From 4f953ffc89fc95f83b152e914c5e65938b440f17 Mon Sep 17 00:00:00 2001
From: Xxxu <794772283@qq.com>
Date: 星期二, 07 七月 2020 10:03:02 +0800
Subject: [PATCH] 上传项目
---
src/views/modules/home/user-base-info/user-base-info-led-chart.vue | 184 ++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 184 insertions(+), 0 deletions(-)
diff --git a/src/views/modules/home/user-base-info/user-base-info-led-chart.vue b/src/views/modules/home/user-base-info/user-base-info-led-chart.vue
new file mode 100644
index 0000000..7e8590a
--- /dev/null
+++ b/src/views/modules/home/user-base-info/user-base-info-led-chart.vue
@@ -0,0 +1,184 @@
+<template>
+ <div>
+ <div id='ledChart' style='height:150px;width:100%'></div>
+ </div>
+</template>
+<script>
+import echarts from 'echarts'
+export default {
+ data () {
+ return {
+ onlineNum: 0,
+ outlineNum: 0,
+ dataList: []
+ }
+ },
+ activated () {
+ this.getLedList()
+ },
+ methods: {
+ getLedList () {
+ this.$http({
+ url: this.$http.adornUrl('/pole/polelightemit/list'),
+ method: 'get',
+ params: this.$http.adornParams({
+ 'page': 0,
+ 'limit': 9999
+ })
+ }).then(({data}) => {
+ if (data && data.code === 0) {
+ this.dataList = data.page.list
+ } else {
+ this.dataList = []
+ }
+ }).then(() => {
+ // 鏌ヨ姣忎釜led灞忓箷鐘舵��
+ var ids = this.dataList.map(item => {
+ return item.lightemitId
+ })
+ this.$http({
+ url: this.$http.adornUrl('/pole/polelightemit/ledStatus'),
+ method: 'post',
+ data: this.$http.adornData(ids, false)
+ }).then(({data}) => {
+ if (data && data.code === 0) {
+ var resultMap = data.result
+ this.dataList.forEach(item => {
+ item.screenOpen = resultMap[item.lightemitId]
+ })
+ this.onlineNum = 0
+ this.outlineNum = 0
+
+ for (var i = 0; i < this.dataList.length; i++) {
+ if (this.dataList[i].screenOpen === 'true') {
+ this.onlineNum++
+ } else {
+ this.outlineNum++
+ }
+ }
+ this.drawChart()
+ } else {
+ // this.$message.error(data.msg)
+ }
+ })
+ })
+ },
+ drawChart () {
+ var ledChartOption = {
+ color: ['#09BAFE', '#FC0A15'],
+ title: {
+ text: 'LED/鍙�',
+ left: 'center',
+ top: '45%',
+ textStyle: {
+ color: 'white',
+ fontSize: 13,
+ align: 'center'
+ }
+ },
+
+ graphic: [
+ {
+ type: 'group',
+ left: '15%',
+ top: '15%',
+ children: [
+ {
+ type: 'text',
+ z: 100,
+ style: {
+ fill: '#FC0A15',
+ text: [this.outlineNum].join('\n'),
+ font: '14px Microsoft YaHei'
+ }
+ }
+ ]
+ },
+ {
+ type: 'group',
+ left: '70%',
+ top: '15%',
+ children: [
+ {
+ type: 'text',
+ z: 100,
+ left: 50,
+ top: 500,
+ style: {
+ fill: '#09BAFE',
+ text: [this.onlineNum].join('\n'),
+ font: '14px Microsoft YaHei'
+ }
+ }
+ ]
+ }
+ ],
+
+ tooltip: {
+ trigger: 'item',
+ // formatter: '{a} <br/>{b}: {c} ({d}%)',
+ formatter: '{a} <br/>{b}: {c}',
+ position: function (point, params, dom, rect, size) {
+ // 鍏朵腑point涓哄綋鍓嶉紶鏍囩殑浣嶇疆锛宻ize涓湁涓や釜灞炴�э細viewSize鍜宑ontentSize锛屽垎鍒负澶栧眰div鍜宼ooltip鎻愮ず妗嗙殑澶у皬
+ var x = point[0]
+ var y = point[1]
+ var boxWidth = size.contentSize[0]
+ var boxHeight = size.contentSize[1]
+ var posX = 0 // x鍧愭爣浣嶇疆
+ var posY = 0 // y鍧愭爣浣嶇疆
+
+ if (x < boxWidth) {
+ // 宸﹁竟鏀句笉寮�
+ posX = 5
+ } else {
+ // 宸﹁竟鏀剧殑涓�
+ posX = x - boxWidth
+ }
+
+ if (y < boxHeight) {
+ // 涓婅竟鏀句笉寮�
+ posY = 5
+ } else {
+ // 涓婅竟鏀惧緱涓�
+ posY = y - boxHeight
+ }
+
+ return [posX, posY]
+ }
+ },
+ series: [
+ {
+ name: 'LED鍦ㄧ嚎鏁伴噺',
+ type: 'pie',
+ radius: ['55%', '70%'],
+ avoidLabelOverlap: false,
+ label: {
+ normal: {
+ show: false
+ },
+ emphasis: {
+ show: false,
+ textStyle: {
+ fontSize: '5',
+ fontWeight: 'bold'
+ }
+ }
+ },
+ labelLine: {
+ normal: {
+ show: false
+ }
+ },
+ data: [{ value: this.onlineNum, name: '鍦ㄧ嚎' }, { value: this.outlineNum, name: '涓嶅湪绾�' }]
+ }
+ ]
+ }
+
+ var ledChart = echarts.init(document.getElementById('ledChart'))
+ ledChart.setOption(ledChartOption)
+ }
+ }
+}
+</script>
+<style>
+</style>
\ No newline at end of file
--
Gitblit v1.9.3