zhgdlarge/src/views/sevenLargeScreen/headNoise/leftBottom.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>