331 lines
6.1 KiB
Vue
331 lines
6.1 KiB
Vue
<template>
|
||
<Card title="趋势图">
|
||
<div class="selectRight">
|
||
<el-date-picker
|
||
style="width:100%"
|
||
v-model="value1"
|
||
type="daterange"
|
||
range-separator="至"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
>
|
||
</el-date-picker>
|
||
<!-- <el-select class="m-2" placeholder="Select" size="small" v-model="receive">
|
||
<el-option
|
||
v-for="(item, index) in noiseList"
|
||
:key="index"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
@click="checkChange(item.value)"
|
||
/>
|
||
</el-select> -->
|
||
</div>
|
||
|
||
<div id="myEcharts" ref="myEcharts" style="width: 100%; height: 100%"></div>
|
||
</Card>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { GlobalStore } from "@/stores";
|
||
import { selectDustNoiseDataApi } from "@/api/modules/headNoise";
|
||
import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
|
||
import * as echarts from "echarts";
|
||
import Card from "@/components/card.vue";
|
||
import mitts from "@/utils/bus"; //兄弟组件传值
|
||
const store = GlobalStore();
|
||
let dustData_24 = ref([]);
|
||
let xData: any = [];
|
||
let yData: any = [];
|
||
let option = ref({
|
||
// backgroundColor: '#071c3a',
|
||
title: {
|
||
// text: '日用气量分析',
|
||
textStyle: {
|
||
align: "center",
|
||
color: "#fff",
|
||
fontSize: 20
|
||
},
|
||
top: "2%",
|
||
left: "center"
|
||
},
|
||
// legend: {
|
||
// color: ["#17B4FA", "#47D8BE", "#F9A589"],
|
||
// // data: ['日用气量分析'],
|
||
// left: 'center',
|
||
// top: "8%",
|
||
// textStyle: {
|
||
// color: "#ffffff"
|
||
// }
|
||
// },
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
lineStyle: {
|
||
color: {
|
||
type: "linear",
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: "rgba(0, 255, 233,0)"
|
||
},
|
||
{
|
||
offset: 0.5,
|
||
color: "rgba(255, 255, 255,1)"
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(0, 255, 233,0)"
|
||
}
|
||
],
|
||
global: false
|
||
}
|
||
}
|
||
}
|
||
},
|
||
grid: {
|
||
top: "30%",
|
||
left: "12%",
|
||
right: "5%",
|
||
bottom: "15%"
|
||
// containLabel: true
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#14346C"
|
||
}
|
||
},
|
||
splitArea: {
|
||
// show: true,
|
||
color: "#f00",
|
||
lineStyle: {
|
||
color: "#f00"
|
||
}
|
||
},
|
||
axisLabel: {
|
||
color: "#fff"
|
||
},
|
||
splitLine: {
|
||
show: false
|
||
},
|
||
boundaryGap: false,
|
||
data: xData
|
||
}
|
||
],
|
||
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
name: "单位:ug/m³",
|
||
nameTextStyle: {
|
||
color: "#fff",
|
||
nameLocation: "start"
|
||
},
|
||
min: 0,
|
||
// max: 140,
|
||
splitNumber: 3,
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#14346C"
|
||
}
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#14346C"
|
||
}
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
margin: 20,
|
||
textStyle: {
|
||
color: "#fff"
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: true
|
||
}
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
type: "line",
|
||
// smooth: true, //是否平滑
|
||
showAllSymbol: true,
|
||
// symbol: 'image://./static/images/guang-circle.png',
|
||
symbol: "circle",
|
||
symbolSize: 5,
|
||
lineStyle: {
|
||
normal: {
|
||
color: "#fff",
|
||
shadowBlur: 0
|
||
}
|
||
},
|
||
label: {
|
||
show: false,
|
||
position: "top",
|
||
textStyle: {
|
||
color: "#fff"
|
||
}
|
||
},
|
||
itemStyle: {
|
||
color: "#A3EAFF",
|
||
borderColor: "#82FBEA",
|
||
borderWidth: 5,
|
||
shadowColor: "rgba(0, 0, 0, .6)",
|
||
shadowBlur: 0
|
||
},
|
||
lineStyle: {
|
||
normal: {
|
||
width: 1
|
||
}
|
||
},
|
||
tooltip: {
|
||
show: true
|
||
},
|
||
areaStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: "rgba(130, 251, 234,0.5)"
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(130, 251, 234,0.1)"
|
||
}
|
||
],
|
||
false
|
||
),
|
||
shadowColor: "rgba(130, 251, 234, 0.2",
|
||
shadowBlur: 20
|
||
}
|
||
},
|
||
data: yData
|
||
}
|
||
]
|
||
});
|
||
const noiseList = [
|
||
{
|
||
value: 0,
|
||
label: "扬尘PM2.5"
|
||
},
|
||
{
|
||
value: 1,
|
||
label: "扬尘PM10"
|
||
},
|
||
{
|
||
value: 2,
|
||
label: "风速"
|
||
},
|
||
{
|
||
value: 3,
|
||
label: "噪声"
|
||
}
|
||
];
|
||
// const labelName = ref("扬尘PM2.5");
|
||
let receive = ref("扬尘PM2.5" as any);
|
||
function drawChart() {
|
||
console.log("趋势图", xData);
|
||
console.log("趋势图", yData);
|
||
console.log("趋势图", option.value);
|
||
let myEchart = echarts.init(document.getElementById("myEcharts"));
|
||
myEchart.setOption(option.value);
|
||
// window.onresize = function () {
|
||
// myEchart.resize();
|
||
// }
|
||
}
|
||
//获取趋势图数据
|
||
const getList = async type => {
|
||
//当前日期
|
||
// let now = new Date();
|
||
// let yy = now.getFullYear(); //年
|
||
// let mm = now.getMonth() + 1; //月
|
||
// let dd = now.getDate(); //日
|
||
// let time = yy + "-";
|
||
// if (mm < 10) time += "0";
|
||
// time += mm + "-";
|
||
// if (dd < 10) time += "0";
|
||
// time += dd;
|
||
const res = await selectDustNoiseDataApi({
|
||
// searchDate: time,
|
||
deviceId: type,
|
||
projectSn: store.sn
|
||
});
|
||
console.log("左下角趋势图", res.result);
|
||
// dustData_24.value = res.result;
|
||
res.result.forEach(item => {
|
||
xData.push(item.time);
|
||
yData.push(item.pm25);
|
||
});
|
||
drawChart();
|
||
};
|
||
// const checkChange = type => {
|
||
// dustData_24.value.forEach(item => {
|
||
// xData.value.push(item.uploadDate.split(" ")[1]);
|
||
// yData.value.push(item.pm25);
|
||
// // if (type == 0) {
|
||
// // yData.value.push(item.pm25);
|
||
// // } else if (type == 1) {
|
||
// // yData.value.push(item.pm10);
|
||
// // } else if (type == 2) {
|
||
// // yData.value.push(item.windspeed);
|
||
// // } else if (type == 3) {
|
||
// // yData.value.push(item.noise);
|
||
// // }
|
||
// });
|
||
// console.log("selectType", type);
|
||
// getList(type);
|
||
// };
|
||
|
||
onMounted(async () => {
|
||
// checkChange(0);
|
||
mitts.on("currentDevDetail", e => {
|
||
xData.length = 0;
|
||
yData.length = 0;
|
||
receive.value = e.deviceId;
|
||
getList(e.deviceId);
|
||
});
|
||
});
|
||
// 即时销毁事件总线派发，否则会执行两次miits.on造成不必要的内存浪费 7.14 by CJP
|
||
onBeforeUnmount(async () => {
|
||
mitts.off("currentDevDetail");
|
||
echarts.dispose;
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.selectRight {
|
||
position: absolute;
|
||
left: 12%;
|
||
width: 12%;
|
||
top: 75%;
|
||
z-index: 9;
|
||
}
|
||
|
||
::v-deep .el-input__wrapper {
|
||
background: #112d59;
|
||
}
|
||
|
||
::v-deep .el-input__inner {
|
||
color: #fff;
|
||
}
|
||
|
||
::v-deep .el-select .el-input .el-select__caret {
|
||
color: #fff;
|
||
}
|
||
</style>
|