|
@@ -13,16 +13,11 @@
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
|
+import { queryAreaSaleAmount } from '@/api/bigScreen.js'
|
|
export default {
|
|
export default {
|
|
data () {
|
|
data () {
|
|
return {
|
|
return {
|
|
options: {},
|
|
options: {},
|
|
- countUserNumData: {
|
|
|
|
- lockNum: 0,
|
|
|
|
- onlineNum: 0,
|
|
|
|
- offlineNum: 0,
|
|
|
|
- totalNum: 0
|
|
|
|
- },
|
|
|
|
pageflag: true,
|
|
pageflag: true,
|
|
timer: null
|
|
timer: null
|
|
}
|
|
}
|
|
@@ -43,26 +38,21 @@ export default {
|
|
}
|
|
}
|
|
},
|
|
},
|
|
getData () {
|
|
getData () {
|
|
- this.countUserNumData = { 'offlineNum': 1786, 'lockNum': 647, 'totalNum': 2218, 'onlineNum': -215 }
|
|
|
|
- this.$nextTick(() => {
|
|
|
|
- this.init()
|
|
|
|
|
|
+ queryAreaSaleAmount({}).then(res => {
|
|
|
|
+ // 只打印一次
|
|
|
|
+ if (!this.timer) {
|
|
|
|
+ console.log('区域销售金额占比', res)
|
|
|
|
+ }
|
|
|
|
+ if (res.status == 200) {
|
|
|
|
+ const listData = res.data
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
+ this.init(listData)
|
|
|
|
+ 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 () {
|
|
switper () {
|
|
@@ -81,11 +71,9 @@ export default {
|
|
this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime)
|
|
this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime)
|
|
})
|
|
})
|
|
},
|
|
},
|
|
- init () {
|
|
|
|
- const total = this.countUserNumData.totalNum
|
|
|
|
- const colors = ['#ECA444', '#33A1DB', '#56B557']
|
|
|
|
|
|
+ init (list) {
|
|
const piedata = {
|
|
const piedata = {
|
|
- name: '用户总览',
|
|
|
|
|
|
+ name: '区域销售金额占比',
|
|
type: 'pie',
|
|
type: 'pie',
|
|
radius: ['42%', '65%'],
|
|
radius: ['42%', '65%'],
|
|
avoidLabelOverlap: false,
|
|
avoidLabelOverlap: false,
|
|
@@ -94,53 +82,9 @@ export default {
|
|
borderColor: 'rgba(0,0,0,0)',
|
|
borderColor: 'rgba(0,0,0,0)',
|
|
borderWidth: 2
|
|
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]
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- ]
|
|
|
|
|
|
+ data: list
|
|
}
|
|
}
|
|
this.options = {
|
|
this.options = {
|
|
- title: {
|
|
|
|
- // zlevel: 0,
|
|
|
|
- text: ['{value|' + total + '}', '{name|总销售额}'].join('\n'),
|
|
|
|
- top: 'center',
|
|
|
|
- left: 'center',
|
|
|
|
- textStyle: {
|
|
|
|
- rich: {
|
|
|
|
- value: {
|
|
|
|
- color: '#ffffff',
|
|
|
|
- fontSize: 24,
|
|
|
|
- fontWeight: 'bold',
|
|
|
|
- lineHeight: 20
|
|
|
|
- },
|
|
|
|
- name: {
|
|
|
|
- color: '#ffffff',
|
|
|
|
- lineHeight: 20
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
tooltip: {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
trigger: 'item',
|
|
backgroundColor: 'rgba(0,0,0,.6)',
|
|
backgroundColor: 'rgba(0,0,0,.6)',
|
|
@@ -160,7 +104,7 @@ export default {
|
|
...piedata,
|
|
...piedata,
|
|
tooltip: { show: true },
|
|
tooltip: { show: true },
|
|
label: {
|
|
label: {
|
|
- formatter: ' {b|{b}} \n {c|{c}元} {per|{d}%} ',
|
|
|
|
|
|
+ formatter: ' {b|{b}} {per|{d}%} ',
|
|
// position: "outside",
|
|
// position: "outside",
|
|
rich: {
|
|
rich: {
|
|
b: {
|
|
b: {
|
|
@@ -179,8 +123,8 @@ export default {
|
|
}
|
|
}
|
|
},
|
|
},
|
|
labelLine: {
|
|
labelLine: {
|
|
- length: 20, // 第一段线 长度
|
|
|
|
- length2: 36, // 第二段线 长度
|
|
|
|
|
|
+ length: 30, // 第一段线 长度
|
|
|
|
+ length2: 10, // 第二段线 长度
|
|
show: true
|
|
show: true
|
|
|
|
|
|
},
|
|
},
|
|
@@ -203,8 +147,8 @@ export default {
|
|
padding: [2.5, -2.5, 2.5, -2.5]
|
|
padding: [2.5, -2.5, 2.5, -2.5]
|
|
},
|
|
},
|
|
labelLine: {
|
|
labelLine: {
|
|
- length: 20, // 第一段线 长度
|
|
|
|
- length2: 36, // 第二段线 长度
|
|
|
|
|
|
+ length: 30, // 第一段线 长度
|
|
|
|
+ length2: 10, // 第二段线 长度
|
|
show: false
|
|
show: false
|
|
}
|
|
}
|
|
}
|
|
}
|