|
@@ -13,16 +13,12 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import { countSubareaDealerQty } from '@/api/bigScreen'
|
|
|
export default {
|
|
|
data () {
|
|
|
return {
|
|
|
options: {},
|
|
|
- countUserNumData: {
|
|
|
- lockNum: 0,
|
|
|
- onlineNum: 0,
|
|
|
- offlineNum: 0,
|
|
|
- totalNum: 0
|
|
|
- },
|
|
|
+ listData: [],
|
|
|
pageflag: true,
|
|
|
timer: null
|
|
|
}
|
|
@@ -43,26 +39,33 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
getData () {
|
|
|
- this.countUserNumData = { 'offlineNum': 1786, 'lockNum': 647, 'totalNum': 2218, 'onlineNum': -215 }
|
|
|
- this.$nextTick(() => {
|
|
|
- this.init()
|
|
|
+ this.listData = []
|
|
|
+ countSubareaDealerQty().then(res => {
|
|
|
+ // 只打印一次
|
|
|
+ if (!this.timer) {
|
|
|
+ console.log('加盟商总数量', res)
|
|
|
+ }
|
|
|
+ if (res.status == 200) {
|
|
|
+ let totalQty = 0
|
|
|
+ res.data.map(item => {
|
|
|
+ if (item.subareaName != 'totalQty') {
|
|
|
+ this.listData.push({
|
|
|
+ value: item.dealerQty,
|
|
|
+ name: item.subareaName
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ totalQty = item.dealerQty
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.$emit('total', totalQty)
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.init()
|
|
|
+ this.switper()
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.pageflag = false
|
|
|
+ }
|
|
|
})
|
|
|
- // this.pageflag = true
|
|
|
- // currentGET('big1').then(res => {
|
|
|
- // // 只打印一次
|
|
|
- // if (!this.timer) {
|
|
|
- // console.log('设备总览', res)
|
|
|
- // }
|
|
|
- // if (res.success) {
|
|
|
- // this.countUserNumData = res.data
|
|
|
- // this.$nextTick(() => {
|
|
|
- // this.init()
|
|
|
- // // this.switper()
|
|
|
- // })
|
|
|
- // } else {
|
|
|
- // this.pageflag = false
|
|
|
- // }
|
|
|
- // })
|
|
|
},
|
|
|
// 轮询
|
|
|
switper () {
|
|
@@ -72,6 +75,7 @@ export default {
|
|
|
const looper = (a) => {
|
|
|
this.getData()
|
|
|
}
|
|
|
+ console.log(this.$store.state.setting)
|
|
|
this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime)
|
|
|
const myChart = this.$refs.charts.chart
|
|
|
myChart.on('mouseover', params => {
|
|
@@ -82,8 +86,6 @@ export default {
|
|
|
})
|
|
|
},
|
|
|
init () {
|
|
|
- const total = this.countUserNumData.totalNum
|
|
|
- const colors = ['#ECA444', '#33A1DB', '#56B557']
|
|
|
const piedata = {
|
|
|
name: '加盟商数量',
|
|
|
type: 'pie',
|
|
@@ -94,52 +96,7 @@ export default {
|
|
|
borderColor: 'rgba(0,0,0,0)',
|
|
|
borderWidth: 2
|
|
|
},
|
|
|
-
|
|
|
- color: colors,
|
|
|
- data: [
|
|
|
- {
|
|
|
- value: this.countUserNumData.lockNum,
|
|
|
- name: 'A区',
|
|
|
- label: {
|
|
|
- shadowColor: colors[0]
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- value: this.countUserNumData.onlineNum,
|
|
|
- name: 'B区',
|
|
|
- label: {
|
|
|
- shadowColor: colors[2]
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- value: this.countUserNumData.offlineNum,
|
|
|
- name: 'G区',
|
|
|
- label: {
|
|
|
- shadowColor: colors[1]
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- value: this.countUserNumData.lockNum,
|
|
|
- name: 'E区',
|
|
|
- label: {
|
|
|
- shadowColor: colors[0]
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- value: this.countUserNumData.onlineNum,
|
|
|
- name: '西部区',
|
|
|
- label: {
|
|
|
- shadowColor: colors[2]
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- value: this.countUserNumData.offlineNum,
|
|
|
- name: '东部区',
|
|
|
- label: {
|
|
|
- shadowColor: colors[1]
|
|
|
- }
|
|
|
- }
|
|
|
- ]
|
|
|
+ data: this.listData
|
|
|
}
|
|
|
this.options = {
|
|
|
tooltip: {
|
|
@@ -162,7 +119,7 @@ export default {
|
|
|
tooltip: { show: true },
|
|
|
label: {
|
|
|
formatter: ' {b|{b}} \n {c|{c}个} {per|{d}%} ',
|
|
|
- // position: "outside",
|
|
|
+ position: 'outside',
|
|
|
rich: {
|
|
|
b: {
|
|
|
color: '#fff',
|
|
@@ -180,34 +137,13 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
labelLine: {
|
|
|
- length: 20, // 第一段线 长度
|
|
|
- length2: 36, // 第二段线 长度
|
|
|
+ length: 40, // 第一段线 长度
|
|
|
+ length2: 10, // 第二段线 长度
|
|
|
show: true
|
|
|
-
|
|
|
},
|
|
|
emphasis: {
|
|
|
show: true
|
|
|
}
|
|
|
- },
|
|
|
- {
|
|
|
- ...piedata,
|
|
|
- tooltip: { show: true },
|
|
|
- itemStyle: {},
|
|
|
- label: {
|
|
|
- backgroundColor: 'inherit', // 圆点颜色,auto:映射的系列色
|
|
|
- height: 0,
|
|
|
- width: 0,
|
|
|
- lineHeight: 0,
|
|
|
- borderRadius: 2.5,
|
|
|
- shadowBlur: 8,
|
|
|
- shadowColor: 'auto',
|
|
|
- padding: [2.5, -2.5, 2.5, -2.5]
|
|
|
- },
|
|
|
- labelLine: {
|
|
|
- length: 20, // 第一段线 长度
|
|
|
- length2: 36, // 第二段线 长度
|
|
|
- show: false
|
|
|
- }
|
|
|
}
|
|
|
]
|
|
|
}
|