fix: BUG修改

src/views/goverment/huizhou/siteSupervision/historyDataAnalysis/index.scss

@@ -91,13 +91,17 @@
 			display: flex;
 			flex-direction: column;
 			position: relative;
+			overflow-y: scroll;
 			.echarts-option {
 				padding: 10px;
 				border: 1px solid #216876;
 				border-radius: 8px;
+				margin-bottom: 20px;
 				.top-search {
 					display: flex;
 					align-items: center;
+					border-bottom: 1px solid white;
+					padding-bottom: 10px;
 					> span {
 						font-size: 18px;
 						color: white;
@@ -106,7 +110,7 @@
 				}
 				.card {
 					width: 100%;
-					height: 300px;
+					height: 500px;
 					padding: 0;
 				}
 			}

src/views/goverment/huizhou/siteSupervision/historyDataAnalysis/index.vue

@@ -31,40 +31,47 @@
 			<div class="search-select">
 				<el-card shadow="never" class="topCard">
 					<span style="margin: 0 20px 2px 0px; font-size: 18px">分组</span>
-					<el-checkbox-group v-model="checkList">
+					<el-checkbox-group v-model="checkList" @change="optionChange">
-						<el-checkbox label="温度"></el-checkbox>
+						<el-checkbox :label="item.label" v-for="item in optionList">{{ item.label }}</el-checkbox>
-						<el-checkbox label="风速"></el-checkbox>
-						<el-checkbox label="PM2.5"></el-checkbox>
-						<el-checkbox label="噪音"></el-checkbox>
-						<el-checkbox label="PM10"></el-checkbox>
-						<el-checkbox label="TSP"></el-checkbox>
-						<el-checkbox label="湿度"></el-checkbox>
-						<el-checkbox label="风向"></el-checkbox>
 					</el-checkbox-group>
 				</el-card>
 			</div>
 			<div class="echarts-content">
-				<div class="echarts-option">
+				<div class="echarts-option" v-for="(item, index) in echartsList" :key="index">
 					<div class="top-search">
-						<span>温度</span>
+						<span>{{ item.title }}</span>
-						<el-date-picker
+						<el-select style="width: 200px; margin-right: 10px" v-model="item.code" clearable placeholder="请选择">
-							style="width: 260px; margin-right: 10px"
+							<el-option v-for="item1 in deviceList" :key="item1.code" :label="item1.name" :value="item1.code" />
-							v-model="value1"
-							type="datetime"
-							placeholder="选择日期时间"
-						></el-date-picker>
-						<el-date-picker
-							style="width: 260px; margin-right: 10px"
-							v-model="value1"
-							type="datetime"
-							placeholder="选择日期时间"
-						></el-date-picker>
-						<el-select style="width: 200px; margin-right: 10px" v-model="value2" clearable placeholder="请选择">
-							<el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
 						</el-select>
-						<el-button type="primary" style="margin-left: 10px">查询</el-button>
+						<el-date-picker
+							style="width: 260px; margin-right: 10px"
+							v-model="item.startTime"
+							format="YYYY-MM-DD HH:mm:ss"
+							value-format="YYYY-MM-DD HH:mm:ss"
+							type="datetime"
+							placeholder="选择开始时间"
+						></el-date-picker>
+						<el-date-picker
+							style="width: 260px; margin-right: 10px"
+							v-model="item.endTime"
+							format="YYYY-MM-DD HH:mm:ss"
+							value-format="YYYY-MM-DD HH:mm:ss"
+							type="datetime"
+							placeholder="选择结束时间"
+						></el-date-picker>
+						<el-select
+							style="width: 200px; margin-right: 10px"
+							v-model="item.rangeTime"
+							value-key="label"
+							clearable
+							placeholder="请选择"
+							@change="val => rangeChange(val, index)"
+						>
+							<el-option v-for="item2 in statusList" :key="item2.label" :label="item2.label" :value="item2" />
+						</el-select>
+						<el-button type="primary" style="margin-left: 10px" @click="searchData(item)">查询</el-button>
 					</div>
-					<div id="echarts1" class="card content-box"></div>
+					<div :id="'echarts' + item.key" class="card content-box"></div>
 				</div>
 			</div>
 		</div>
@@ -73,25 +80,37 @@
 
 <script lang="tsx" setup name="historyDataAnalysis">
 import { ref, reactive, onMounted, watch } from "vue";
-import { getDustprojectPage, getDustengineeringPage, getAIQuestionPage } from "@/api/modules/goverment";
+import { getDustprojectPage, getDustengineeringPage, getAIQuestionPage, getDustMonitorDev } from "@/api/modules/goverment";
 import { GlobalStore } from "@/stores";
 import LeftMenu from "@/components/LeftMenu/LeftMenu.vue";
 import type { ResAiProjectPage, ResAiEngineerPage } from "@/api/types/government/AIwaring";
 import { sendIframeMessage } from "@/utils/util";
+import { getRealTimePage } from "@/api/modules/project";
 import * as echarts from "echarts";
-const statusList = ref([
+import dayjs from "dayjs";
-	{ label: "半小时", value: 0.5 },
+const deviceList = ref([]);
-	{ label: "一小时", value: 1 },
+const optionList = ref([
-	{ label: "一天", value: 24 },
+	{ label: "温度", value: 0 },
-	{ label: "七天", value: 24 * 7 },
+	{ label: "风速", value: 1 },
-	{ label: "十五天", value: 24 * 15 },
+	{ label: "PM2.5", value: 2 },
-	{ label: "一个月", value: 24 * 31 },
+	{ label: "噪音", value: 3 },
-	{ label: "半年", value: 24 * 31 * 6 },
+	{ label: "PM10", value: 4 },
-	{ label: "一年", value: 24 * 31 * 12 }
+	{ label: "TSP", value: 5 },
+	{ label: "湿度", value: 6 },
+	{ label: "风向", value: 7 }
+]);
+const statusList = ref([
+	{ label: "半小时", value: 0.5, type: "hour" },
+	{ label: "一小时", value: 1, type: "hour" },
+	{ label: "一天", value: 1, type: "day" },
+	{ label: "七天", value: 7, type: "day" },
+	{ label: "十五天", value: 15, type: "day" },
+	{ label: "一个月", value: 1, type: "month" },
+	{ label: "半年", value: 6, type: "month" },
+	{ label: "一年", value: 1, type: "year" }
 ]);
-const value1 = ref(null);
-const value2 = ref(null);
 const checkList = ref([]);
+const echartsList = ref<any>([]);
 const pages = ref({
 	pageNo: 1,
 	pageSize: 7,
@@ -120,12 +139,92 @@ const pageable = ref({
 });
 // 搜索用的项目sn或者工程sn
 const searchSn = ref("");
-
+const resApiData = ref([]);
 // 项目或者工程名字
 const searchName = ref<string>("");
+// 获取设备列表
+const getDeviceList = async () => {
+	const res = await getDustMonitorDev({});
+	deviceList.value = res.result;
+	console.log(res, "-------设备列表");
+};
+const rangeChange = (item: any, index: any) => {
+	console.log(item, index);
+	if (item) {
+		echartsList.value[index].startTime = dayjs().subtract(item.value, item.type).format("YYYY-MM-DD HH:mm:ss");
+		echartsList.value[index].endTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
+	} else {
+		echartsList.value[index].startTime = dayjs().hour(0).minute(0).second(0).format("YYYY-MM-DD HH:mm:ss");
+		echartsList.value[index].endTime = dayjs().hour(23).minute(59).second(59).format("YYYY-MM-DD HH:mm:ss");
+	}
+};
+const searchData = async (item: any) => {
+	let findItem = echartsList.value.find(item => {
+		return item.key == item.key;
+	});
+	let requestData = {
+		code: findItem.code,
+		startTime: findItem.startTime,
+		endTime: findItem.endTime,
+		pageSize: -1
+	};
+	const res = await getRealTimePage(requestData);
+	resApiData.value = res.result.records;
+	drawEcharts(item);
+};
+// 菜单选项改变
+const optionChange = () => {
+	echartsList.value = [];
+	if (checkList.value.length > 0) {
+		let matchLastItem = optionList.value.find(item => {
+			return item.label == checkList.value[checkList.value.length - 1];
+		});
+		checkList.value.map(item => {
+			let matchItem = optionList.value.find(item2 => {
+				return item2.label == item;
+			});
+			echartsList.value.push({
+				title: item,
+				code: deviceList.value.length > 0 ? deviceList.value[0].code : "",
+				startTime: "",
+				endTime: "",
+				rangeTime: "",
+				key: matchItem?.value
+			});
+		});
+		setTimeout(function () {
+			searchData(echartsList.value[echartsList.value.length - 1]);
+		}, 500);
+	}
+};
 // 绘制折线图
-const drawEcharts = () => {
+const drawEcharts = (item: any) => {
-	let chartDom = document.getElementById("echarts1");
+	console.log(item, "--------1111");
+	let xData = [] as any;
+	let yData = [] as any;
+	let number = item.key;
+	console.log(number);
+	resApiData.value.map(item => {
+		xData.push(item.createTime);
+		if (number == 0) {
+			yData.push(item.temperature);
+		} else if (number == 1) {
+			yData.push(item.windspeed);
+		} else if (number == 2) {
+			yData.push(item.pm25);
+		} else if (number == 3) {
+			yData.push(item.noise);
+		} else if (number == 4) {
+			yData.push(item.pm10);
+		} else if (number == 5) {
+			yData.push(item.tsp);
+		} else if (number == 6) {
+			yData.push(item.humidity);
+		} else if (number == 7) {
+			yData.push(item.winddirection);
+		}
+	});
+	let chartDom = document.getElementById(`echarts${number}`);
 	let myChart: echarts.ECharts = echarts.init(chartDom);
 	let option;
 	option = {
@@ -134,14 +233,18 @@ const drawEcharts = () => {
 			axisPointer: {
 				type: "cross",
 				crossStyle: {
-					color: "fff"
+					color: "#fff"
+				},
+				label: {
+					show: false
 				}
 			}
 		},
 		grid: {
-			left: 60,
+			left: 80,
-			top: 60,
+			top: 50,
-			width: "95%"
+			width: "92%",
+			height: "75%"
 		},
 		// legend: {
 		// 	right: 0,
@@ -152,23 +255,53 @@ const drawEcharts = () => {
 		// 	},
 		// 	data: ["出勤总数(人)", "在职总数(人)", "出勤率(%)"]
 		// },
+		dataZoom: {
+			type: "slider",
+			show: true
+		},
 		xAxis: [
 			{
 				type: "category",
-				data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
+				data: xData,
 				axisPointer: {
 					type: "shadow"
 				},
+				axisLine: {
+					show: true,
+					lineStyle: {
+						color: "white"
+					}
+				},
 				axisLabel: {
 					color: "#fff",
 					fontSize: 14
+					// rotate: 30,
+					// interval: 50
 				}
 			}
 		],
 		yAxis: [
 			{
 				type: "value",
-				name: "单位(人)",
+				name: `单位(${
+					number == 0
+						? "℃"
+						: number == 1
+						? "m/s"
+						: number == 2
+						? "μg/m³"
+						: number == 3
+						? "db"
+						: number == 4
+						? "μg/m³"
+						: number == 5
+						? "μg/m³"
+						: number == 6
+						? ""
+						: number == 7
+						? ""
+						: ""
+				})`,
 				nameTextStyle: {
 					align: "right",
 					color: "#fff",
@@ -178,6 +311,18 @@ const drawEcharts = () => {
 					color: "#fff",
 					fontSize: 16
 				},
+				axisLine: {
+					show: true,
+					lineStyle: {
+						color: "white"
+					}
+				},
+				splitLine: {
+					show: true,
+					lineStyle: {
+						color: ["#216876"]
+					}
+				},
 				min: 0,
 				max: 250,
 				interval: 50
@@ -185,7 +330,25 @@ const drawEcharts = () => {
 		],
 		series: [
 			{
-				name: "出勤总数(人)",
+				name: `${item.title}(${
+					number == 0
+						? "℃"
+						: number == 1
+						? "m/s"
+						: number == 2
+						? "μg/m³"
+						: number == 3
+						? "db"
+						: number == 4
+						? "μg/m³"
+						: number == 5
+						? "μg/m³"
+						: number == 6
+						? ""
+						: number == 7
+						? ""
+						: ""
+				})`,
 				type: "line",
 				barWidth: 18,
 				itemStyle: {
@@ -193,10 +356,31 @@ const drawEcharts = () => {
 				},
 				tooltip: {
 					valueFormatter: function (value) {
-						return value + " ml";
+						return (
+							value +
+							` ${
+								number == 0
+									? "℃"
+									: number == 1
+									? "m/s"
+									: number == 2
+									? "μg/m³"
+									: number == 3
+									? "db"
+									: number == 4
+									? "μg/m³"
+									: number == 5
+									? "μg/m³"
+									: number == 6
+									? ""
+									: number == 7
+									? ""
+									: ""
+							}`
+						);
 					}
 				},
-				data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
+				data: yData
 			}
 		]
 	};
@@ -284,7 +468,7 @@ watch(
 	}
 );
 onMounted(async () => {
-	drawEcharts();
+	getDeviceList();
 	await getProPage();
 	onSearch(records.value[0]);
 	searchSn.value = (records.value as ResAiProjectPage[])[0].projectSn;