diff --git a/src/views/NewMainPageComponents/RightBottom.vue b/src/views/NewMainPageComponents/RightBottom.vue index 6fea7e5f59e588f641b269acb028b8f57ffb20bc..a339ad53db65c943065d2349f76c8fc1870f15db 100644 --- a/src/views/NewMainPageComponents/RightBottom.vue +++ b/src/views/NewMainPageComponents/RightBottom.vue @@ -34,19 +34,19 @@
- 离线天数超阈值 + 不活跃度超阈值
- - + +

加载中...

@@ -110,6 +110,9 @@ export default { computed: { policeThreshold() { return this.$store.state.dataPageData.policeThreshold + }, + policeInactivity() { + return this.$store.state.dataPageData.policeInactivity } } } diff --git a/src/views/NewMainPageComponents/RightMiddle.vue b/src/views/NewMainPageComponents/RightMiddle.vue index 8fbfee547ecdef4f562845dc3c17cd5408bac1fc..640edc0f7be729a76f514c48cebbd2e00139b9ca 100644 --- a/src/views/NewMainPageComponents/RightMiddle.vue +++ b/src/views/NewMainPageComponents/RightMiddle.vue @@ -5,10 +5,10 @@ 数据环比
- 当日 + 以日
- 当周 + 以周
指定 @@ -41,16 +41,16 @@ class="right-center-btn" style="border: 0;color: #eeeeee;font-size: 16px;text-align: center;line-height: 30px;margin-left:58px;width: 95px;height: 30px" > - 离线率 + 不活跃度
本周期
- 56% + {{ currentCycleInactivity }}
上周期
- 56% + {{ lastCycleInactivity }}
@@ -65,12 +65,17 @@ export default { data() { return { currentCycle: 0, - lastCycle: 0 + lastCycle: 0, + currentCycleInactivity: 0, + lastCycleInactivity: 0 } }, computed: { policeRing() { return this.$store.state.dataPageData.policeRing + }, + inactivityRing() { + return this.$store.state.dataPageData.inactivityRing } }, watch: { @@ -80,14 +85,26 @@ export default { if (this.myChart) { if (newVal) { this.initCharts1(this.policeRing) - this.initCharts2() } else { this.initCharts1(this.policeRing) - this.initCharts2() } } else { this.initCharts1(this.policeRing) - this.initCharts2() + } + }, + deep: true + }, + inactivityRing: { + immediate: true, + handler(newVal, oldVal) { + if (this.myChart) { + if (newVal) { + this.initCharts2(this.inactivityRing) + } else { + this.initCharts2(this.inactivityRing) + } + } else { + this.initCharts2(this.inactivityRing) } }, deep: true @@ -95,7 +112,7 @@ export default { }, mounted() { this.initCharts1(this.policeRing) - this.initCharts2() + this.initCharts2(this.inactivityRing) }, methods: { initCharts1(policeRing) { @@ -171,7 +188,7 @@ export default { fontSize: 18, fontWeight: 'bolder', formatter: '{value}%', - color: '#21ee8b' + color: policeRing.trend === '-' ? '#21ee8b' : '#f70b0b' }, data: [ { @@ -202,7 +219,7 @@ export default { option && myChart.setOption(option) }, - initCharts2() { + initCharts2(inactivityRing) { const chartDom = document.getElementById('rightMiddle2') const myChart = echarts.init(chartDom) const option = { @@ -246,7 +263,7 @@ export default { }, anchor: { show: true, - icon: 'image://http://ldjy.asc.jx.cn/efedef9e-197a-4220-b99e-23b21caa8cfc.png', + icon: inactivityRing.trend === '-' ? 'image://http://ldjy.asc.jx.cn/f9f9f665-43c9-4628-b06a-f8c4fc1872d0.png' : 'image://http://ldjy.asc.jx.cn/efedef9e-197a-4220-b99e-23b21caa8cfc.png', showAbove: false, offsetCenter: [0, '-35%'], size: 20, @@ -269,33 +286,19 @@ export default { fontSize: 18, fontWeight: 'bolder', formatter: '{value}%', - color: '#f70b0b' + color: inactivityRing.trend === '-' ? '#21ee8b' : '#f70b0b' }, data: [ { - value: 20, - name: '离线率环比' + value: inactivityRing.rate, + name: '不活跃环比' } ] } ] } - setInterval(function() { - const random = +(Math.random() * 60).toFixed(2) - myChart.setOption({ - series: [ - { - data: [ - { - value: random, - name: '离线率环比' - } - ] - } - ] - }) - }, 2000) - + this.currentCycleInactivity = inactivityRing.currentCycle + this.lastCycleInactivity = inactivityRing.lastCycle option && myChart.setOption(option) } } diff --git a/src/views/NewMainPageComponents/RightTop.vue b/src/views/NewMainPageComponents/RightTop.vue index ea5c6a2a274d2daef34a55253852b7dc865aef44..0d6c9d38b59944d6c1e0e14956d6772eb637db4b 100644 --- a/src/views/NewMainPageComponents/RightTop.vue +++ b/src/views/NewMainPageComponents/RightTop.vue @@ -5,10 +5,10 @@ 数据统计
- 当周 + 以周
- 当月 + 以月
指定