You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
155 lines
3.4 KiB
Vue
155 lines
3.4 KiB
Vue
<!--
|
|
* @Author: daidai
|
|
* @Date: 2022-02-28 16:16:42
|
|
* @LastEditors: Please set LastEditors
|
|
* @LastEditTime: 2022-10-25 09:18:22
|
|
* @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-bottom.vue
|
|
-->
|
|
<template>
|
|
<Echart id="leftCenter" :options="options" class="left_center_inner" v-if="pageflag" ref="charts"/>
|
|
<Reacquire v-else @onclick="getData" style="line-height:200px">
|
|
重新获取
|
|
</Reacquire>
|
|
</template>
|
|
|
|
<script>
|
|
import {currentGET} from '@/api/modules'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
options: {},
|
|
countUserNumData: {
|
|
lockNum: 0,
|
|
onlineNum: 0,
|
|
offlineNum: 0,
|
|
totalNum: 0
|
|
},
|
|
pageflag: true,
|
|
timer: null
|
|
};
|
|
},
|
|
created() {
|
|
this.getData()
|
|
},
|
|
mounted() {
|
|
},
|
|
beforeDestroy() {
|
|
this.clearData()
|
|
|
|
},
|
|
methods: {
|
|
clearData() {
|
|
if (this.timer) {
|
|
clearInterval(this.timer)
|
|
this.timer = null
|
|
}
|
|
},
|
|
getData() {
|
|
this.pageflag = true
|
|
// this.pageflag =false
|
|
|
|
currentGET('big1').then(res => {
|
|
//只打印一次
|
|
if (!this.timer) {
|
|
console.log("设备总览", res);
|
|
}
|
|
if (res.code == 20000) {
|
|
this.countUserNumData = res.data
|
|
this.$nextTick(() => {
|
|
this.init()
|
|
})
|
|
|
|
} else {
|
|
this.pageflag = false
|
|
this.$Message({
|
|
text: res.msg,
|
|
type: 'warning'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
init() {
|
|
this.options = {
|
|
title: {
|
|
text: ["总数 1 "].join("\n"),
|
|
// subtext: 'Fake Data',
|
|
// left: 'center'
|
|
textStyle: {
|
|
color: "#ffffff",
|
|
lineHeight: 20,
|
|
}
|
|
},
|
|
color:
|
|
[
|
|
"#fc8452",
|
|
"#fac858",
|
|
"#73c0de",
|
|
"#3ba272",
|
|
"#5470c6",
|
|
"#5470c6",
|
|
"#91cc75",
|
|
"#ee6666",
|
|
"#9a60b4",
|
|
"#ea7ccc"
|
|
|
|
],
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
// legend: {
|
|
// orient: 'vertical',
|
|
// left: 'left'
|
|
// },
|
|
series: [
|
|
{
|
|
width: "100%",
|
|
height: "100%",
|
|
name: 'Access From',
|
|
type: 'pie',
|
|
radius: '50%',
|
|
data: [
|
|
{value: 1, name: '产品预警'},
|
|
{value: 0, name: '资质预警'},
|
|
{value: 0, name: '其他预警'},
|
|
],
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
},
|
|
label: {
|
|
formatter: " {b|{b}} \n {c|{c}个} {per|{d}%} ",
|
|
// position: "outside",
|
|
rich: {
|
|
b: {
|
|
color: "#fff",
|
|
fontSize: 12,
|
|
lineHeight: 26,
|
|
},
|
|
c: {
|
|
color: "#31ABE3",
|
|
fontSize: 14,
|
|
},
|
|
d: {
|
|
color: "#31ABE3",
|
|
fontSize: 14,
|
|
},
|
|
per: {
|
|
color: "#31ABE3",
|
|
fontSize: 14,
|
|
},
|
|
},
|
|
}
|
|
}
|
|
]
|
|
};
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang='scss' scoped>
|
|
</style>
|