- 当日
+ 以日
- 当周
+ 以周
指定
@@ -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 @@
数据统计