231 lines
5.5 KiB
Vue
231 lines
5.5 KiB
Vue
<!--
|
||
* @Author: szy
|
||
* @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-center.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.success) {
|
||
this.countUserNumData = res.data
|
||
this.$nextTick(() => {
|
||
this.init()
|
||
})
|
||
|
||
} else {
|
||
this.pageflag = false
|
||
this.$Message({
|
||
text: res.msg,
|
||
type: 'warning'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
//轮询
|
||
switper() {
|
||
if (this.timer) {
|
||
return
|
||
}
|
||
let looper = (a) => {
|
||
this.getData()
|
||
};
|
||
this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
|
||
let myChart = this.$refs.charts.chart
|
||
myChart.on('mouseover', params => {
|
||
this.clearData()
|
||
});
|
||
myChart.on('mouseout', params => {
|
||
this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
|
||
});
|
||
},
|
||
init() {
|
||
let total = this.countUserNumData.totalNum;
|
||
let colors = ["#ECA444", "#33A1DB", "#56B557"];
|
||
let piedata = {
|
||
name: "用户总览",
|
||
type: "pie",
|
||
radius: ["42%", "65%"],
|
||
avoidLabelOverlap: false,
|
||
itemStyle: {
|
||
borderRadius: 4,
|
||
borderColor: "rgba(0,0,0,0)",
|
||
borderWidth: 2,
|
||
},
|
||
|
||
color: colors,
|
||
data: [
|
||
// {
|
||
// value: 0,
|
||
// name: "告警",
|
||
// label: {
|
||
// shadowColor: colors[0],
|
||
// },
|
||
// },
|
||
{
|
||
value: this.countUserNumData.lockNum,
|
||
name: "锁定",
|
||
label: {
|
||
shadowColor: colors[0],
|
||
},
|
||
},
|
||
{
|
||
value: this.countUserNumData.onlineNum,
|
||
name: "在线",
|
||
label: {
|
||
shadowColor: colors[2],
|
||
},
|
||
},
|
||
{
|
||
value: this.countUserNumData.offlineNum,
|
||
name: "离线",
|
||
label: {
|
||
shadowColor: colors[1],
|
||
},
|
||
},
|
||
|
||
|
||
],
|
||
};
|
||
this.options = {
|
||
title: {
|
||
// zlevel: 0,
|
||
text: ["{value|" + total + "}", "{name|总数}"].join("\n"),
|
||
top: "center",
|
||
left: "center",
|
||
textStyle: {
|
||
rich: {
|
||
value: {
|
||
color: "#333",
|
||
fontSize: 24,
|
||
fontWeight: "bold",
|
||
lineHeight: 20,
|
||
},
|
||
name: {
|
||
color: "#333",
|
||
lineHeight: 20,
|
||
},
|
||
},
|
||
},
|
||
},
|
||
tooltip: {
|
||
trigger: "item",
|
||
backgroundColor: "rgba(0,0,0,.6)",
|
||
borderColor: "rgba(147, 235, 248, .8)",
|
||
textStyle: {
|
||
color: "#333",
|
||
},
|
||
},
|
||
legend: {
|
||
show: false,
|
||
top: "5%",
|
||
left: "center",
|
||
},
|
||
series: [
|
||
//展示圆点
|
||
{
|
||
...piedata,
|
||
tooltip: { show: true },
|
||
label: {
|
||
formatter: " {b|{b}} \n {c|{c}个} {per|{d}%} ",
|
||
// position: "outside",
|
||
rich: {
|
||
b: {
|
||
color: "#333",
|
||
fontSize: 12,
|
||
lineHeight: 26,
|
||
},
|
||
c: {
|
||
color: "#31ABE3",
|
||
fontSize: 14,
|
||
},
|
||
per: {
|
||
color: "#31ABE3",
|
||
fontSize: 14,
|
||
},
|
||
},
|
||
},
|
||
labelLine: {
|
||
length: 20, // 第一段线 长度
|
||
length2: 36, // 第二段线 长度
|
||
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,
|
||
},
|
||
},
|
||
],
|
||
};
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style lang='scss' scoped>
|
||
</style> |