zhgdlarge/src/views/sevenLargeScreen/headNoise/leftBottom.vue

<template>
	<Card title="趋势图">
		<div class="selectRight">
			<el-select class="m-2" placeholder="Select" size="small" v-model="labelName">
				<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 = reactive([]);
let xData = ref([]);
let yData = ref([]);
const option = reactive({
	// 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.value
		}
	],

	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: [
		{
			name: "扬尘",
			type: "line",
			// smooth: true, //是否平滑
			showAllSymbol: true,
			// symbol: 'image://./static/images/guang-circle.png',
			symbol: "circle",
			symbolSize: 10,
			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.value
		}
	]
});
const noiseList = [
	{
		value: 0,
		label: "扬尘PM2.5"
	},
	{
		value: 1,
		label: "扬尘PM10"
	},
	{
		value: 2,
		label: "风速"
	},
	{
		value: 3,
		label: "噪声"
	}
];
const labelName = ref("扬尘PM2.5");
const receive = ref("");
function drawChart() {
	let myEchart = echarts.init(document.getElementById("myEcharts"));
	myEchart.setOption(option);
	// 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: receive.value,
		projectSn: store.sn
	});

	dustData_24 = res.result;
	drawChart();
};
const checkChange = type => {
	dustData_24.forEach(item => {
		xData.value.push(item.uploadDate.split(" ")[1]);
		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 => {
		receive.value = e.deviceId;
		getList(e.deviceId);
	});
});
// 即时销毁事件总线派发，否则会执行两次miits.on造成不必要的内存浪费 7.14 by CJP
onBeforeUnmount(async () => {
	mitts.off("currentDevDetail");
});
</script>

<style lang="scss" scoped>
.selectRight {
	position: absolute;
	left: 18%;
	width: 7%;
	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>