512 lines
10 KiB
Vue
512 lines
10 KiB
Vue
<template>
|
||
<Card title="今日报警统计">
|
||
<div class="top-bg">
|
||
<div class="num">{{ totalAlarm }}</div>
|
||
<div class="styleImg"></div>
|
||
<div id="echartsTest" style="width: 100%; height: 100%"></div>
|
||
</div>
|
||
</Card>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
|
||
import * as echarts from "echarts";
|
||
import Card from "@/components/card.vue";
|
||
import { getAlarmCountTotalApi } from "@/api/modules/headNoise";
|
||
import { GlobalStore } from "@/stores";
|
||
const store = GlobalStore();
|
||
// let timer = ref(null);
|
||
// //角度，用来做简单的动画效果的
|
||
// let angle = ref(0);
|
||
// let value = ref(55.33);
|
||
const totalAlarm = ref(0);
|
||
//图形右侧数据
|
||
let totalData = ref([
|
||
{
|
||
name: "噪声报警",
|
||
value: 0,
|
||
radio: 0
|
||
},
|
||
{
|
||
name: "PM2.5超标报警",
|
||
value: 0,
|
||
radio: 0
|
||
},
|
||
{
|
||
name: "PM10超标报警",
|
||
value: 0,
|
||
radio: 0
|
||
},
|
||
{
|
||
name: "TSP报警",
|
||
value: 0,
|
||
radio: 0
|
||
},
|
||
{
|
||
name: "温度报警",
|
||
value: 0,
|
||
radio: 0
|
||
},
|
||
{
|
||
name: "湿度报警",
|
||
value: 0,
|
||
radio: 0
|
||
},
|
||
{
|
||
name: "风速报警",
|
||
value: 0,
|
||
radio: 0
|
||
}
|
||
]);
|
||
//控制图形数据比例
|
||
let trafficWay = reactive([
|
||
{
|
||
name: "噪声报警",
|
||
value: 10
|
||
},
|
||
{
|
||
name: "PM2.5超标报警",
|
||
value: 10
|
||
},
|
||
{
|
||
name: "PM10超标报警",
|
||
value: 10
|
||
},
|
||
{
|
||
name: "TSP报警",
|
||
value: 10
|
||
},
|
||
{
|
||
name: "温度报警",
|
||
value: 10
|
||
},
|
||
{
|
||
name: "湿度报警",
|
||
value: 10
|
||
},
|
||
{
|
||
name: "风速报警",
|
||
value: 10
|
||
}
|
||
]);
|
||
let data = reactive([]);
|
||
// let color = reactive(["#5A5EE0", "#34B1FA", "#53E4D8", "#52B06A", "#E8E65A", "#F06C48"]);
|
||
let color = reactive(["#82FBEA", "#EEA959", "#4CC4F8 ", "#E0D838", "#EC6266", "#6375C7", "#81F279"]);
|
||
for (var i = 0; i < trafficWay.length; i++) {
|
||
data.push(
|
||
{
|
||
value: trafficWay[i].value,
|
||
name: trafficWay[i].name,
|
||
itemStyle: {
|
||
normal: {
|
||
borderWidth: 0,
|
||
shadowBlur: 2,
|
||
borderColor: color[i],
|
||
shadowColor: color[i]
|
||
}
|
||
}
|
||
},
|
||
{
|
||
value: 2,
|
||
name: "",
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
color: "rgba(0, 0, 0, 0)",
|
||
borderColor: "rgba(0, 0, 0, 0)",
|
||
borderWidth: 0
|
||
}
|
||
}
|
||
}
|
||
);
|
||
}
|
||
const seriesOption = ref([
|
||
// {
|
||
// name: "ring5",
|
||
// type: "custom",
|
||
// coordinateSystem: "none",
|
||
// renderItem: function (params, api) {
|
||
// return {
|
||
// type: "arc",
|
||
// shape: {
|
||
// cx: api.getWidth() / 4,
|
||
// cy: api.getHeight() / 2,
|
||
// r: 80,
|
||
// startAngle: ((0 + angle.value) * Math.PI) / 180,
|
||
// endAngle: ((90 + angle.value) * Math.PI) / 180
|
||
// },
|
||
// style: {
|
||
// stroke: "#0CD3DB",
|
||
// fill: "transparent",
|
||
// lineWidth: 1.5
|
||
// },
|
||
// silent: true
|
||
// };
|
||
// },
|
||
// data: [0]
|
||
// },
|
||
// {
|
||
// name: "ring5",
|
||
// type: "custom",
|
||
// coordinateSystem: "none",
|
||
// renderItem: function (params, api) {
|
||
// return {
|
||
// type: "arc",
|
||
// shape: {
|
||
// cx: api.getWidth() / 4,
|
||
// cy: api.getHeight() / 2,
|
||
// r: 80,
|
||
// startAngle: ((180 + angle.value) * Math.PI) / 180,
|
||
// endAngle: ((270 + angle.value) * Math.PI) / 180
|
||
// },
|
||
// style: {
|
||
// stroke: "#0CD3DB",
|
||
// fill: "transparent",
|
||
// lineWidth: 1.5
|
||
// },
|
||
// silent: true
|
||
// };
|
||
// },
|
||
// data: [0]
|
||
// },
|
||
// {
|
||
// name: "ring5",
|
||
// type: "custom",
|
||
// coordinateSystem: "none",
|
||
// renderItem: function (params, api) {
|
||
// return {
|
||
// type: "arc",
|
||
// shape: {
|
||
// cx: api.getWidth() / 4,
|
||
// cy: api.getHeight() / 2,
|
||
// r: 90,
|
||
// startAngle: ((270 + -angle.value) * Math.PI) / 180,
|
||
// endAngle: ((40 + -angle.value) * Math.PI) / 180
|
||
// },
|
||
// style: {
|
||
// stroke: "#0CD3DB",
|
||
// fill: "transparent",
|
||
// lineWidth: 1.5
|
||
// },
|
||
// silent: true
|
||
// };
|
||
// },
|
||
// data: [0]
|
||
// },
|
||
// {
|
||
// name: "ring5",
|
||
// type: "custom",
|
||
// coordinateSystem: "none",
|
||
// renderItem: function (params, api) {
|
||
// return {
|
||
// type: "arc",
|
||
// shape: {
|
||
// cx: api.getWidth() / 4,
|
||
// cy: api.getHeight() / 2,
|
||
// r: 90,
|
||
// startAngle: ((90 + -angle.value) * Math.PI) / 180,
|
||
// endAngle: ((220 + -angle.value) * Math.PI) / 180
|
||
// },
|
||
// style: {
|
||
// stroke: "#0CD3DB",
|
||
// fill: "transparent",
|
||
// lineWidth: 1.5
|
||
// },
|
||
// silent: true
|
||
// };
|
||
// },
|
||
// data: [0]
|
||
// },
|
||
// {
|
||
// name: "ring5",
|
||
// type: "custom",
|
||
// coordinateSystem: "none",
|
||
// renderItem: function (params, api) {
|
||
// let x0 = api.getWidth() / 4;
|
||
// let y0 = api.getHeight() / 2;
|
||
// let r = 90;
|
||
// let point = getCirlPoint(x0, y0, r, 90 + -angle.value);
|
||
// return {
|
||
// type: "circle",
|
||
// shape: {
|
||
// cx: point.x,
|
||
// cy: point.y,
|
||
// r: 4
|
||
// },
|
||
// style: {
|
||
// stroke: "#0CD3DB", //粉
|
||
// fill: "#0CD3DB"
|
||
// },
|
||
// silent: true
|
||
// };
|
||
// },
|
||
// data: [0]
|
||
// },
|
||
// {
|
||
// name: "ring5", //绿点
|
||
// type: "custom",
|
||
// coordinateSystem: "none",
|
||
// renderItem: function (params, api) {
|
||
// let x0 = api.getWidth() / 4;
|
||
// let y0 = api.getHeight() / 2;
|
||
// let r = 90;
|
||
// let point = getCirlPoint(x0, y0, r, 270 + -angle.value);
|
||
// return {
|
||
// type: "circle",
|
||
// shape: {
|
||
// cx: point.x,
|
||
// cy: point.y,
|
||
// r: 4
|
||
// },
|
||
// style: {
|
||
// stroke: "#0CD3DB", //绿
|
||
// fill: "#0CD3DB"
|
||
// },
|
||
// silent: true
|
||
// };
|
||
// },
|
||
// data: [0]
|
||
// },
|
||
|
||
{
|
||
name: "",
|
||
type: "pie",
|
||
center: ["25%", "55%"],
|
||
clockWise: false,
|
||
radius: [70, 60],
|
||
hoverAnimation: false,
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: false
|
||
}
|
||
}
|
||
},
|
||
data: data
|
||
},
|
||
//
|
||
// {
|
||
// type: 'pie',
|
||
// radius: [70, 70],
|
||
// hoverAnimation: false,
|
||
// clockWise: false,
|
||
// itemStyle: {
|
||
// normal: {
|
||
// borderColor: '#34B0FA',
|
||
// borderWidth: 1,
|
||
// }
|
||
// },
|
||
// label: {
|
||
// show: false
|
||
// },
|
||
// data: [200]
|
||
// },
|
||
{
|
||
type: "pie",
|
||
center: ["25%", "54%"],
|
||
|
||
radius: [50, 50],
|
||
zlevel: 2,
|
||
silent: true,
|
||
label: {
|
||
normal: {
|
||
show: false
|
||
}
|
||
},
|
||
labelLine: {
|
||
normal: {
|
||
show: false
|
||
}
|
||
},
|
||
data: _pie3()
|
||
}
|
||
]);
|
||
|
||
let option = ref({
|
||
// backgroundColor: "#0A2E5D",
|
||
color: color,
|
||
center: ["25%", "50%"],
|
||
|
||
title: {
|
||
text: "报警总数",
|
||
top: "57%",
|
||
textAlign: "center",
|
||
left: "24%",
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 14,
|
||
fontWeight: "400"
|
||
}
|
||
},
|
||
tooltip: {
|
||
show: false
|
||
},
|
||
legend: {
|
||
show: true,
|
||
icon: "rect",
|
||
itemGap: 20,
|
||
itemWidth: 15,
|
||
itemHeight: 15,
|
||
orient: "vertical",
|
||
x: "right",
|
||
formatter: function (name) {
|
||
let num;
|
||
for (let i = 0; i < totalData.value.length; i++) {
|
||
if (totalData.value[i].name === name) {
|
||
let cont = 9;
|
||
let stringArr = " ";
|
||
// if (name.length == 4) {
|
||
// cont = 19;
|
||
// } else if (name.length == 5) {
|
||
// cont = 20;
|
||
// }
|
||
// for (let j = 0; j < cont; j++) {
|
||
// stringArr += "";
|
||
// }
|
||
num = name + stringArr + totalData.value[i].value;
|
||
}
|
||
}
|
||
return num;
|
||
},
|
||
data: ["噪声报警", "PM2.5超标报警", "PM10超标报警", "TSP报警", "温度报警", "湿度报警", "风速报警"],
|
||
top: 20,
|
||
right: 300,
|
||
left: 280,
|
||
bottom: 10,
|
||
align: "left",
|
||
textStyle: {
|
||
color: "#fff"
|
||
},
|
||
itemGap: 15
|
||
},
|
||
toolbox: {
|
||
show: false
|
||
},
|
||
series: seriesOption.value
|
||
});
|
||
|
||
function _pie3() {
|
||
let dataArr = [];
|
||
for (var i = 0; i < 100; i++) {
|
||
if (i % 2 === 0) {
|
||
dataArr.push({
|
||
name: (i + 1).toString(),
|
||
value: 10,
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#5A5DE0",
|
||
borderWidth: 4,
|
||
borderColor: "#87E0FB"
|
||
}
|
||
}
|
||
});
|
||
} else {
|
||
dataArr.push({
|
||
name: (i + 1).toString(),
|
||
value: 20,
|
||
itemStyle: {
|
||
normal: {
|
||
color: "rgba(0,0,0,0)",
|
||
borderWidth: 0,
|
||
borderColor: "rgba(0,0,0,0)"
|
||
}
|
||
}
|
||
});
|
||
}
|
||
}
|
||
return dataArr;
|
||
}
|
||
//获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
|
||
function getCirlPoint(x0, y0, r, angle) {
|
||
let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
|
||
let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
|
||
return {
|
||
x: x1,
|
||
y: y1
|
||
};
|
||
}
|
||
|
||
// function draw(echartsTest) {
|
||
// angle.value = angle.value + 3;
|
||
// echartsTest.setOption(option, true);
|
||
// //window.requestAnimationFrame(draw);
|
||
// }
|
||
//获取今日报警统计
|
||
const getList = async () => {
|
||
const res = await getAlarmCountTotalApi({
|
||
sn: store.sn,
|
||
selectType: 1
|
||
});
|
||
// console.log("获取今日报警统计", res);
|
||
if (res.result) {
|
||
totalAlarm.value = res.result.totalAlarm;
|
||
for (let i = 0; i < totalData.value.length; i++) {
|
||
if (totalData.value[i].name == "噪声报警") {
|
||
totalData.value[i].value = res.result.noiseNum;
|
||
} else if (totalData.value[i].name == "PM2.5超标报警") {
|
||
totalData.value[i].value = res.result.pm25Num;
|
||
} else if (totalData.value[i].name == "PM10超标报警") {
|
||
totalData.value[i].value = res.result.pm10Num;
|
||
} else if (totalData.value[i].name == "TSP报警") {
|
||
totalData.value[i].value = res.result.tspNum;
|
||
} else if (totalData.value[i].name == "温度报警") {
|
||
totalData.value[i].value = res.result.temperatureNum;
|
||
} else if (totalData.value[i].name == "湿度报警") {
|
||
totalData.value[i].value = res.result.humidityNum;
|
||
} else if (totalData.value[i].name == "风速报警") {
|
||
totalData.value[i].value = res.result.windspeedNum;
|
||
}
|
||
}
|
||
console.log("获取今日报警统计", totalData.value);
|
||
draw();
|
||
}
|
||
};
|
||
|
||
function draw() {
|
||
console.log("绘图数据", option.value);
|
||
let echartsTest = echarts.init(document.getElementById("echartsTest"));
|
||
echartsTest.setOption(option.value);
|
||
}
|
||
onMounted(async () => {
|
||
getList();
|
||
// setTimeout(function () {
|
||
// timer = setInterval(function () {
|
||
// // //用setInterval做动画感觉有问题
|
||
// draw(echartsTest);
|
||
// }, 100);
|
||
// }, 700);
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.top-bg {
|
||
position: relative;
|
||
height: 100%;
|
||
.num {
|
||
width: 100px;
|
||
text-align: center;
|
||
font-family: sadigitalNumber;
|
||
font-size: 20px;
|
||
color: #fff;
|
||
position: absolute;
|
||
top: 41%;
|
||
left: 15%;
|
||
z-index: 9;
|
||
}
|
||
.styleImg {
|
||
left: 5%;
|
||
top: 17%;
|
||
width: 40%;
|
||
position: absolute;
|
||
height: 75%;
|
||
background: url("@/assets/images/dustNoise/motionEffect.webp") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
</style>
|