From 73ae858af996ecc401f17f010f5a5c6cdc01f1e4 Mon Sep 17 00:00:00 2001
From: kun <1422840143@qq.com>
Date: Sat, 29 Jun 2024 18:26:20 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=9B=A8=E9=87=8F=E7=9B=91=E6=B5=8B?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=B7=BB=E5=8A=A0=E4=BB=A5=E5=8F=8A=E9=83=A8?=
 =?UTF-8?q?=E5=88=86=E6=8E=A5=E5=8F=A3=E5=AF=B9=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                              |   4 +-
 .env.production                               |   4 +-
 src/api/modules/headNoise.ts                  |  22 +
 src/routers/modules/staticRouter.ts           |   5 +
 src/views/sevenLargeScreen/indexL.vue         |   6 +-
 .../rainfallMonitoring/centerBottom.vue       | 138 +++++
 .../rainfallMonitoring/centerTop.vue          | 208 +++++++
 .../rainfallMonitoring/index.vue              |  97 ++++
 .../rainfallMonitoring/leftBottom.vue         | 377 +++++++++++++
 .../rainfallMonitoring/leftCenter.vue         | 136 +++++
 .../rainfallMonitoring/leftTop.vue            | 523 ++++++++++++++++++
 .../rainfallMonitoring/rightBottom.vue        | 110 ++++
 .../rainfallMonitoring/rightCenter.vue        | 511 +++++++++++++++++
 .../rainfallMonitoring/rightTop.vue           | 244 ++++++++
 14 files changed, 2380 insertions(+), 5 deletions(-)
 create mode 100644 src/views/sevenLargeScreen/rainfallMonitoring/centerBottom.vue
 create mode 100644 src/views/sevenLargeScreen/rainfallMonitoring/centerTop.vue
 create mode 100644 src/views/sevenLargeScreen/rainfallMonitoring/index.vue
 create mode 100644 src/views/sevenLargeScreen/rainfallMonitoring/leftBottom.vue
 create mode 100644 src/views/sevenLargeScreen/rainfallMonitoring/leftCenter.vue
 create mode 100644 src/views/sevenLargeScreen/rainfallMonitoring/leftTop.vue
 create mode 100644 src/views/sevenLargeScreen/rainfallMonitoring/rightBottom.vue
 create mode 100644 src/views/sevenLargeScreen/rainfallMonitoring/rightCenter.vue
 create mode 100644 src/views/sevenLargeScreen/rainfallMonitoring/rightTop.vue

diff --git a/.env.development b/.env.development
index 7b26a8c..b7870ef 100644
--- a/.env.development
+++ b/.env.development
@@ -4,7 +4,7 @@ NODE_ENV = 'development'
 # 本地环境接口地址(/api/index.ts文件中使用)
 # 后端本地
 # VITE_API_URL = 'http://192.168.34.155:19111'
-# VITE_API_URL = 'http://192.168.34.221:9111' #雄哥本地
+VITE_API_URL = 'http://192.168.34.221:9111' #雄哥本地
 # VITE_API_URL = 'http://182.90.224.237:51234'  #雄哥远程
 # VITE_API_URL = 'http://192.168.34.221:28889'
 # VITE_API_URL = 'http://121.196.214.246/api'
@@ -23,7 +23,7 @@ NODE_ENV = 'development'
 # 七参数标准版(测试平台)
 # VITE_API_URL = 'http://182.90.224.237:15551'
 # 七参数标准版(演示平台)
-VITE_API_URL = 'http://jxj.zhgdyun.com:9809'
+# VITE_API_URL = 'http://jxj.zhgdyun.com:9809'
 # agjt
 # VITE_API_URL = 'http://42.180.188.17:9809' #生产环境
 # VITE_API_URL = 'http://42.180.188.17:11211' #测试环境
diff --git a/.env.production b/.env.production
index 57d5fa0..27e0b0f 100644
--- a/.env.production
+++ b/.env.production
@@ -12,7 +12,7 @@ NODE_ENV = "production"
 # VITE_API_URL = "http://183.249.224.118:9003"
 
 # 百色  新项目通用地址
-VITE_API_URL = 'http://101.43.164.214:11111'
+# VITE_API_URL = 'http://101.43.164.214:11111'
 
 # 七参数标准版(演示平台)
 # VITE_API_URL = 'http://jxj.zhgdyun.com:9809'
@@ -30,7 +30,7 @@ VITE_API_URL = 'http://101.43.164.214:11111'
 # 中科佳成
 # VITE_API_URL = 'http://1.13.185.209:8089'
 # 合肥启程(乌丹)
-# VITE_API_URL = 'http://192.168.100.4:9809'
+VITE_API_URL = 'http://192.168.100.4:9809'
 # 打包
 VITE_ULD_API_URL = 'http://jxj.zhgdyun.com:8012/onlinePreview?url='
 
diff --git a/src/api/modules/headNoise.ts b/src/api/modules/headNoise.ts
index 2554015..ca81cdf 100644
--- a/src/api/modules/headNoise.ts
+++ b/src/api/modules/headNoise.ts
@@ -42,3 +42,25 @@ export const getAirQualityStatisticsApi = (params: {}) => {
 export const getAlarmCountTotalApi = (params: {}) => {
 	return http.post(BASEURL + `/xmgl/environmentAlarm/selectEnvironmentAlarmCountTotal`, params);
 };
+
+// 雨量监测
+// 环境监测
+export const getRainCurrentDayAirQualityApi = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/rainBigScreen/getCurrentDayAirQuality`, params);
+};
+// 设备情况
+export const getRainDevlApi = (params: {}) => {
+	return http.get(BASEURL + `/xmgl/rainDev/list`, params);
+};
+// 趋势图
+export const selectRainDustNoiseDataApi = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/rainBigScreen/queryTodayTrendGroupByHour`, params);
+};
+//实时数据
+export const getRealTimeRainRecordApi = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/rainBigScreen/getRealTimeRainRecord`, params);
+};
+// 晴雨表
+export const getRainWeatherDataApi = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/rainBigScreen/getWeatherData`, params);
+};
\ No newline at end of file
diff --git a/src/routers/modules/staticRouter.ts b/src/routers/modules/staticRouter.ts
index f6d8dda..653623e 100644
--- a/src/routers/modules/staticRouter.ts
+++ b/src/routers/modules/staticRouter.ts
@@ -213,6 +213,11 @@ export const staticRouter: RouteRecordRaw[] = [
 				name: "污水监测",
 				component: () => import("@/views/sevenLargeScreen/greenConstruct/sewageMonitor/index.vue")
 			},
+			{
+				path: "/rainfallMonitoring",
+				name: "雨量监测",
+				component: () => import("@/views/sevenLargeScreen/rainfallMonitoring/index.vue")
+			},
 			{
 				path: "/gantryCrane",
 				name: "龙门吊监测",
diff --git a/src/views/sevenLargeScreen/indexL.vue b/src/views/sevenLargeScreen/indexL.vue
index 3b6f6e9..c698f09 100644
--- a/src/views/sevenLargeScreen/indexL.vue
+++ b/src/views/sevenLargeScreen/indexL.vue
@@ -376,7 +376,11 @@ let menuList = ref([
 			{
 				companyPath: "/sewageMonitor",
 				menuName: "污水监测"
-			}
+			},
+			// {
+			// 	companyPath: "/rainfallMonitoring",
+			// 	menuName: "雨量监测"
+			// }
 		]
 	},
 	{
diff --git a/src/views/sevenLargeScreen/rainfallMonitoring/centerBottom.vue b/src/views/sevenLargeScreen/rainfallMonitoring/centerBottom.vue
new file mode 100644
index 0000000..8d49151
--- /dev/null
+++ b/src/views/sevenLargeScreen/rainfallMonitoring/centerBottom.vue
@@ -0,0 +1,138 @@
+<template>
+	<div class="CenterBox">
+		<Card title="晴雨表">
+			<div class="weatherBox">
+				<div class="weatherItem" v-for="(item, index) in weatherList" :key="index">
+					<p>{{ item.day }}</p>
+					<p class="imgBox">
+						<img :src="item.url" />
+						<!-- <img v-else src="@/assets/images/dustNoise/weatherIcon/yu.png" /> -->
+					</p>
+					<div class="weather">{{ item.wea }}</div>
+					<div class="temp">{{ item.tem2 }} ~ {{ item.tem1 }}</div>
+					<p>
+						{{ item.win_speed }}
+					</p>
+				</div>
+			</div>
+		</Card>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import Card from "@/components/card.vue";
+import { reactive, onMounted, ref } from "vue";
+import { getRainWeatherDataApi } from "@/api/modules/headNoise";
+import { getTaskTimeDetail } from "@/api/modules/schedulePlan";
+import { GlobalStore } from "@/stores";
+const store = GlobalStore();
+
+const weatherList = ref([]);
+//获取项目信息
+const projectTimeInfo = ref({} as any);
+const getProjectInfo = async () => {
+	const res: any = await getTaskTimeDetail({ projectSn: store.sn });
+	console.log("获取项目信息", res);
+	projectTimeInfo.value = res.result;
+	loadWeather();
+};
+//获取天气
+const loadWeather = async () => {
+	const res = await getRainWeatherDataApi({ cityid: "", areaId: projectTimeInfo.value.areaCode});
+	let json = JSON.parse(res.result);
+	let list = json;
+	console.log("获取天气", res.result);
+	list.forEach(element => {
+		const weatherImg = weatherIcon.value.find(icon => icon.Image.includes(element.wea_img));
+		if (weatherImg) {
+			const imageUrl = weatherImg.Image;
+			// 将拼接好的URL赋值给element.url字段
+			element.url = imageUrl;
+		}
+		weatherList.value.push(element);
+	});
+};
+onMounted(() => {
+	getProjectInfo();
+});
+const weatherIcon = ref([
+	{
+		Image: new URL("@/assets/images/dustNoise/bingbao.png", import.meta.url).href
+	},
+	{
+		Image: new URL("@/assets/images/dustNoise/qing.png", import.meta.url).href
+	},
+	{
+		Image: new URL("@/assets/images/dustNoise/shachen.png", import.meta.url).href
+	},
+	{
+		Image: new URL("@/assets/images/dustNoise/weather4.png", import.meta.url).href
+	},
+	{
+		Image: new URL("@/assets/images/dustNoise/weather5.png", import.meta.url).href
+	},
+	{
+		Image: new URL("@/assets/images/dustNoise/wu.png", import.meta.url).href
+	},
+	{
+		Image: new URL("@/assets/images/dustNoise/xue.png", import.meta.url).href
+	},
+	{
+		Image: new URL("@/assets/images/dustNoise/yin.png", import.meta.url).href
+	},
+	{
+		Image: new URL("@/assets/images/dustNoise/yu.png", import.meta.url).href
+	},
+	{
+		Image: new URL("@/assets/images/dustNoise/yu1.png", import.meta.url).href
+	},
+	{
+		Image: new URL("@/assets/images/dustNoise/yun.png", import.meta.url).href
+	},
+	{
+		Image: new URL("@/assets/images/dustNoise/yun1.png", import.meta.url).href
+	}
+]);
+</script>
+
+<style lang="scss" scoped>
+.CenterBox {
+	width: 100%;
+	height: 100%;
+	.weatherBox {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		font-size: 14px;
+		color: #fff;
+		.weatherItem {
+			height: 100%;
+			width: 15%;
+			border-right: 1px solid #14346c;
+			text-align: center;
+
+			.imgBox {
+				width: 100%;
+				height: 40%;
+
+				img {
+					width: 70%;
+					height: 95%;
+					margin-top: -2%;
+				}
+			}
+
+			.weather {
+				margin-top: -20%;
+			}
+
+			.temp {
+				margin-top: 10%;
+			}
+		}
+	}
+}
+::v-deep .h-card .content{
+margin-top: 1%;
+}
+</style>
diff --git a/src/views/sevenLargeScreen/rainfallMonitoring/centerTop.vue b/src/views/sevenLargeScreen/rainfallMonitoring/centerTop.vue
new file mode 100644
index 0000000..bc68a79
--- /dev/null
+++ b/src/views/sevenLargeScreen/rainfallMonitoring/centerTop.vue
@@ -0,0 +1,208 @@
+<template>
+	<div class="CenterBox">
+		<div class="title"><i>实时数据</i></div>
+		<div class="content">
+			<div class="selectRight">
+				<el-select v-model="deviceName" class="m-2" placeholder="Select" size="small">
+					<el-option
+						v-for="(item, index) in noiseList"
+						:key="index"
+						:label="item.devName"
+						:value="item.id"
+						@click="realTimeMonitor(item)"
+					/>
+				</el-select>
+			</div>
+			<div class="gifImg">
+				<img src="@/assets/images/dustNoise/centerGif.gif" alt="" />
+			</div>
+			<div class="menListWd menu">温度:{{ plantCap.temperature || plantCap.temperature == '0' ? plantCap.temperature : "--" }}℃</div>
+			<div class="menListSd menu">湿度:{{ plantCap.humidity || plantCap.humidity == '0' ? plantCap.humidity : "--" }}%RH</div>
+			<div class="menListPm2 menu">PM2.5:{{ plantCap.pm25 || plantCap.pm25 == '0' ? plantCap.pm25 : "--" }}ug/m³</div>
+			<div class="menListTs menu">TSP:{{ plantCap.tsp || plantCap.tsp == '0' ? plantCap.tsp : "--" }}ug/m³</div>
+			<div class="menListPm10 menu">PM10:{{ plantCap.pm10 || plantCap.pm10 == '0' ? plantCap.pm10 : "--" }}ug/m³</div>
+			<div class="menListZs menu">噪声:{{ plantCap.noise || plantCap.noise == '0' ? plantCap.noise : "--" }}dB</div>
+			<div class="menListFs menu">风速:{{ plantCap.windspeed || plantCap.windspeed == '0' ? plantCap.windspeed : "--" }}m/s</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { GlobalStore } from "@/stores";
+import { getRainDevlApi, getRealTimeRainRecordApi } from "@/api/modules/headNoise";
+import mitts from "@/utils/bus"; //兄弟组件传值
+import { ref, reactive, onMounted } from "vue";
+const store = GlobalStore();
+let deviceName = ref("");
+let noiseList = ref([]);
+let plantCap = ref({
+	crc: "--",
+	humidity: "--",
+	noise: "--",
+	plateHumidity: "--",
+	plateTemperature: "--",
+	pm10: "--",
+	pm25: "--",
+	pressure: "--",
+	temperature: "--",
+	tsp: "--",
+	voltage: "--",
+	winddirectionName: "--",
+	windspeed: "--"
+});
+let currentDevDetail = reactive({});
+//切换设备
+const realTimeMonitor = val => {
+	currentDevDetail = val;
+	getRealTimeDustNoiseData();
+};
+//获取设备下拉
+const getList = async () => {
+	const res = await getRainDevlApi({ projectSn: store.sn });
+	console.log("获取设备下拉", res);
+	if (res.result.length > 0) {
+		noiseList.value = res.result;
+		deviceName.value = res.result[0].devName;
+		currentDevDetail = res.result[0];
+		
+		getRealTimeDustNoiseData();
+	}
+};
+//获取环境设备详情数据
+const getRealTimeDustNoiseData = async () => {
+	const res = await getRealTimeRainRecordApi({
+		devSn: currentDevDetail.devSn,
+		projectSn: store.sn
+	});
+	if (res.result) {
+		plantCap.value = res.result;
+	} 
+	// else {
+	// 	plantCap.value = {
+	// 		crc: "--",
+	// 		humidity: "--",
+	// 		noise: "--",
+	// 		plateHumidity: "--",
+	// 		plateTemperature: "--",
+	// 		pm10: "--",
+	// 		pm25: "--",
+	// 		pressure: "--",
+	// 		temperature: "--",
+	// 		tsp: "--",
+	// 		voltage: "--",
+	// 		winddirectionName: "--",
+	// 		windspeed: "--"
+	// 	};
+	// }
+	//发送编号
+	mitts.emit("currentDevDetail", currentDevDetail);
+};
+onMounted(() => {
+	getList();
+});
+</script>
+
+<style lang="scss" scoped>
+.CenterBox {
+	width: 100%;
+	height: 100%;
+	background: url("@/assets/images/dustNoise/centerImg.png") no-repeat;
+	background-size: 100% 100%;
+	.title {
+		height: 7%;
+		line-height: 33px;
+		text-align: left;
+		font-size: calc(100vw * 18 / 1920);
+		color: #ffffff;
+		background: url("@/assets/images/titleBig.webp") no-repeat;
+		background-size: 100% 100%;
+
+		i {
+			margin-left: 50px;
+			font-family: OPPOSansH;
+		}
+	}
+	.content{
+		position: relative;
+    width: 100%;
+    height: 100%;
+	}
+
+	.selectRight {
+		position: absolute;
+		left: 78%;
+		width: 13%;
+		top: 4%;
+		z-index: 9;
+	}
+
+	.gifImg {
+		position: absolute;
+		left: 42%;
+		top: 10%;
+
+		img {
+			width: 80%;
+		}
+	}
+
+	.menu {
+		width: 15%;
+		height: 5%;
+		color: #fff;
+		background: url("@/assets/images/dustNoise/menuImg.png") no-repeat;
+		background-size: 100% 100%;
+		text-align: center;
+		position: absolute;
+		line-height: 28px;
+		font-size: calc(100vw * 14 / 1920);
+	}
+
+	.menListWd {
+		left: 13%;
+		top: 30%;
+	}
+
+	.menListSd {
+		top: 43%;
+		left: 10%;
+	}
+
+	.menListPm2 {
+		top: 57%;
+		left: 20%;
+	}
+
+	.menListTs {
+		top: 66%;
+		left: 42%;
+	}
+
+	.menListPm10 {
+		top: 58%;
+		left: 64%;
+	}
+
+	.menListZs {
+		top: 43%;
+		left: 72%;
+	}
+
+	.menListFs {
+		top: 30%;
+		left: 68%;
+	}
+}
+
+::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>
diff --git a/src/views/sevenLargeScreen/rainfallMonitoring/index.vue b/src/views/sevenLargeScreen/rainfallMonitoring/index.vue
new file mode 100644
index 0000000..7dc9c63
--- /dev/null
+++ b/src/views/sevenLargeScreen/rainfallMonitoring/index.vue
@@ -0,0 +1,97 @@
+<template>
+	<!-- 扬程噪声 -->
+	<div class="headerNoise">
+		<div class="left">
+			<div class="leftTop"><LeftTop /></div>
+			<div class="leftCenter"><LeftCenter /></div>
+			<div class="leftBottom"><LeftBottom /></div>
+		</div>
+		<div class="center">
+			<div class="centerTop"><CenterTop /></div>
+			<div class="centerBottom"><CenterBottom /></div>
+		</div>
+		<div class="right">
+			<div class="rightTop"><RightTop /></div>
+			<div class="rightCenter"><RightCenter /></div>
+			<div class="rightbottom"><RightBottom /></div>
+		</div>
+	</div>
+</template>
+
+<script>
+import LeftTop from "./leftTop.vue";
+import LeftCenter from "./leftCenter.vue";
+import LeftBottom from "./leftBottom.vue";
+import CenterTop from "./centerTop.vue";
+import CenterBottom from "./centerBottom.vue";
+import RightTop from "./rightTop.vue";
+import RightCenter from "./rightCenter.vue";
+import RightBottom from "./rightBottom.vue";
+export default {
+	components: {
+		LeftTop,
+		LeftCenter,
+		LeftBottom,
+		CenterTop,
+		CenterBottom,
+		RightTop,
+		RightCenter,
+		RightBottom
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.headerNoise {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	justify-content: space-between;
+	&::-webkit-scrollbar {
+		display: none; //隐藏滚动条
+	}
+	.left {
+		width: 29%;
+		height: 100%;
+		.leftTop {
+			height: 29%;
+		}
+		.leftCenter {
+			margin-top: 8%;
+			height: 31%;
+		}
+		.leftBottom {
+			margin-top: 8%;
+			height: 29%;
+		}
+	}
+	.center {
+		// width: calc(40% - 40px);
+		margin: 0% 1%;
+		width: 55%;
+		height: 100%;
+		.centerTop {
+			height: 68%;
+		}
+		.centerBottom {
+			height: 30%;
+		}
+	}
+	.right {
+		width: 29%;
+		height: 100%;
+		.rightTop {
+			height: 29%;
+		}
+		.rightCenter {
+			margin-top: 8%;
+			height: 31%;
+		}
+		.rightbottom {
+			margin-top: 8%;
+			height: 29%;
+		}
+	}
+}
+
+</style>
diff --git a/src/views/sevenLargeScreen/rainfallMonitoring/leftBottom.vue b/src/views/sevenLargeScreen/rainfallMonitoring/leftBottom.vue
new file mode 100644
index 0000000..1907f63
--- /dev/null
+++ b/src/views/sevenLargeScreen/rainfallMonitoring/leftBottom.vue
@@ -0,0 +1,377 @@
+<template>
+	<Card title="趋势图">
+		<div class="box">
+			<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="selectValue">
+				<el-option
+					v-for="(item, index) in noiseList"
+					:key="index"
+					:label="item.label"
+					:value="item.value"
+					@click="checkChange(item.label)"
+				/>
+			</el-select>
+		</div>
+
+		<div id="myEcharts" ref="myEcharts" style="width: 100%; height: 100%"></div>
+		</div>
+		
+	</Card>
+</template>
+
+<script lang="ts" setup>
+import { GlobalStore } from "@/stores";
+import { selectRainDustNoiseDataApi } 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 = ref([]);
+let yData = ref([]);
+let chart = ref();
+let yUnit = ref("单位:ug/m³") as any;
+const noiseList = [
+	{
+		value: 0,
+		label: "PM2.5"
+	},
+	{
+		value: 1,
+		label: "PM10"
+	},
+	{
+		value: 2,
+		label: "噪声"
+	},
+	// {
+	// 	value: 3,
+	// 	label: "夜晚噪音"
+	// },
+	{
+		value: 4,
+		label: "风速"
+	},
+	{
+		value: 5,
+		label: "TSP"
+	},
+	{
+		value: 6,
+		label: "温度"
+	},
+	{
+		value: 7,
+		label: "湿度"
+	}
+];
+let receive = ref("" as any);
+let selectValue = ref("PM2.5" as any);
+function drawChart() {
+	let myEchart = echarts.init(document.getElementById("myEcharts"));
+	let option = {
+		// 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: yUnit.value,
+				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.value
+			}
+		]
+	};
+	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 selectRainDustNoiseDataApi({
+		// searchDate: time,
+		deviceId: type,
+		projectSn: store.sn
+	});
+	console.log("左下角趋势图", res.result);
+	dustData_24.value = res.result;
+	xData.value = [];
+	yData.value = [];
+	res.result.forEach(item => {
+		xData.value.push(item.time);
+		yData.value.push(item.pm25);
+	});
+	drawChart();
+};
+const checkChange = (val: any) => {
+	yData.value = [];
+	dustData_24.value.forEach(item => {
+		if (val == "PM2.5") {
+			yData.value.push(item.pm25);
+			yUnit.value = "ug/m³";
+		} else if (val == "PM10") {
+			yData.value.push(item.pm10);
+			yUnit.value = "ug/m³";
+		} else if (val == "噪声") {
+			yData.value.push(item.noise);
+			yUnit.value = "dB";
+		} else if (val == "夜晚噪音") {
+			yData.value.push(item.nightNoise);
+			yUnit.value = "dB";
+		} else if (val == "风速") {
+			yData.value.push(item.windspeed);
+			yUnit.value = "m/s";
+		} else if (val == "TSP") {
+			yData.value.push(item.tsp);
+			yUnit.value = "ug/m³";
+		} else if (val == "温度") {
+			yData.value.push(item.temperature);
+			yUnit.value = "℃";
+		} else if (val == "湿度") {
+			yData.value.push(item.humidity);
+			yUnit.value = "%RH";
+		}
+	});
+	drawChart();
+};
+
+onMounted(async () => {
+	// const myChart = echarts.init(chart.vaule);
+
+	// window.addEventListener(
+	// 	"resize",
+	// 	() => {
+	// 		myChart.resize();
+	// 	},
+	// 	false
+	// );
+	checkChange(selectValue.value);
+	mitts.on("currentDevDetail", e => {
+		receive.value = e.deviceId;
+		getList(e.deviceId);
+	});
+	
+});
+//  
+onBeforeUnmount(async () => {
+	mitts.off("currentDevDetail");
+	echarts.dispose;
+});
+</script>
+
+<style lang="scss" scoped>
+  .box{
+		width: 100%;
+		height: 100%;
+		position: relative;
+	}
+.selectRight {
+	position: absolute;
+    left: 75%;
+    width: 20%;
+    top: 6%;
+    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>
diff --git a/src/views/sevenLargeScreen/rainfallMonitoring/leftCenter.vue b/src/views/sevenLargeScreen/rainfallMonitoring/leftCenter.vue
new file mode 100644
index 0000000..894d03b
--- /dev/null
+++ b/src/views/sevenLargeScreen/rainfallMonitoring/leftCenter.vue
@@ -0,0 +1,136 @@
+<template>
+	<Card title="设备情况">
+		<div class="deviceData">
+			<div class="onlineDev">
+				<div class="dev">在线设备</div>
+				<div class="num">{{ onlineDevNum }}</div>
+			</div>
+			<div class="lineDev">
+				<div class="dev">离线设备</div>
+				<div class="num">{{ offlineDevNum }}</div>
+			</div>
+		</div>
+		<div class="decivList">
+			<div class="menuDev" v-for="item in deciData" :class="item.online == 1 ? 'online' : 'offline'">
+				<div class="decName">
+					<span v-show="item.online == 1"><img src="@/assets/images/dustNoise/onlineImg.png" alt="" /></span>
+					<span v-show="item.online == 0"><img src="@/assets/images/dustNoise/offImg.png" alt="" /></span>
+					<span> {{ item.devName }}</span>
+				</div>
+				<div class="status">{{ item.online == 1 ? "在线" : "离线" }}</div>
+			</div>
+			<div class="notoDta" v-if="deciData.length == 0">
+				<img src="@/assets/images/noData.png" alt="" />
+				<p>暂无数据</p>
+			</div>
+		</div>
+	</Card>
+</template>
+
+<script lang="ts" setup>
+import { GlobalStore } from "@/stores";
+
+import { getRainDevlApi } from "@/api/modules/headNoise";
+import { reactive, ref, onMounted } from "vue";
+import Card from "@/components/card.vue";
+
+const deciData = ref([]);
+const onlineDevNum = ref(0);
+const offlineDevNum = ref(0);
+const store = GlobalStore();
+//获取设备情况数据
+const getList = async () => {
+	const res = await getRainDevlApi({ projectSn: store.sn });
+	deciData.value = res.result;
+	if (res.result.length > 0) {
+		onlineDevNum.value = 0;
+		offlineDevNum.value = 0;
+		deciData.value.forEach(element => {
+			if (element.online == 0) {
+				offlineDevNum.value++;
+			} else {
+				onlineDevNum.value++;
+			}
+		});
+	}
+};
+onMounted(() => {
+	getList();
+});
+</script>
+
+<style lang="scss" scoped>
+.deviceData {
+	width: 100%;
+	height: 30%;
+	background: pink;
+	display: flex;
+	background: url("@/assets/images/dustNoise/devImg.png") no-repeat;
+	background-size: 100% 100%;
+	color: #fff;
+	justify-content: space-around;
+	.onlineDev {
+		margin: 2% 0;
+		.num {
+			color: #82fbea;
+		}
+	}
+	.lineDev {
+		margin: 2% 0;
+		.num {
+			color: #ec6266;
+		}
+	}
+	.num {
+		text-align: center;
+		font-size: calc(100vw * 20 / 1920);
+		margin-top: 2px;
+	}
+}
+.decivList {
+	width: 100%;
+	height: 70%;
+	.menuDev {
+		height: 20%;
+		background: url("@/assets/images/dustNoise/listImg.png") no-repeat;
+		background-size: 100% 100%;
+		color: #fff;
+		display: flex;
+		line-height: 31px;
+		font-size: calc(100vw * 14 / 1920);
+		margin: 1% 3%;
+		.decName {
+			width: 90%;
+			display: flex;
+			span {
+				margin-left: 2%;
+		    display: inline-block;
+			}
+		}
+		.status {
+			// margin-left: 60%;
+		}
+	}
+}
+.online {
+	.status {
+		color: #65d7f9;
+	}
+}
+.offline {
+	.status {
+		color: #ec6266;
+	}
+}
+.notoDta {
+	img {
+		width: 16%;
+		margin: 6% 36%;
+	}
+	p {
+		color: #fff;
+		font-size: calc(100vw * 14 / 1920);
+		margin: -5% 38%;
+	}
+}
+</style>
diff --git a/src/views/sevenLargeScreen/rainfallMonitoring/leftTop.vue b/src/views/sevenLargeScreen/rainfallMonitoring/leftTop.vue
new file mode 100644
index 0000000..6bbeb42
--- /dev/null
+++ b/src/views/sevenLargeScreen/rainfallMonitoring/leftTop.vue
@@ -0,0 +1,523 @@
+<template>
+	<Card title="环境监测">
+		<div class="box">
+			<div id="leftTopEcharts" ref="leftTopEcharts" style="width: 100%; height: 100%"></div>
+			<div class="footerData">{{ analysisData }}</div>
+			<div class="colour">
+				<div class="colour_content">
+					<div class="bg" style="background: #65d7f9; border-top-left-radius: 8px; border-bottom-left-radius: 8px"></div>
+					<div class="size">优</div>
+				</div>
+				<div class="colour_content">
+					<div class="bg" style="background: #ffbb38"></div>
+					<div class="size">良</div>
+				</div>
+				<div class="colour_content">
+					<div class="bg" style="background: #fe7a18"></div>
+					<div class="size">轻度污染</div>
+				</div>
+				<div class="colour_content">
+					<div class="bg" style="background: #7718fe"></div>
+					<div class="size">中度污染</div>
+				</div>
+				<div class="colour_content">
+					<div class="bg" style="background: #890ea1"></div>
+					<div class="size">重度污染</div>
+				</div>
+				<div class="colour_content">
+					<div class="bg" style="background: #970c0c; border-top-right-radius: 8px; border-bottom-right-radius: 8px"></div>
+					<div class="size">严重污染</div>
+				</div>
+			</div>
+		</div>
+	</Card>
+</template>
+
+<script lang="ts" setup>
+import { GlobalStore } from "@/stores";
+import { getRainCurrentDayAirQualityApi } from "@/api/modules/headNoise";
+import { ref, onMounted, reactive } from "vue";
+import * as echarts from "echarts";
+import Card from "@/components/card.vue";
+const store = GlobalStore();
+const analysisType = ref("" as any);
+const analysisData = ref(0 as any);
+const posCenter = ref(["50%", "64%"]);
+
+function drawChart() {
+	let leftTopEcharts = echarts.init(document.getElementById("leftTopEcharts"));
+	let option = {
+		series: [
+			{
+				// 外围刻度
+				type: "gauge",
+				radius: "100%",
+				center: posCenter.value,
+				splitNumber: 10,
+				min: 0,
+				max: 500,
+				startAngle: 180,
+				endAngle: 0,
+				axisLine: {
+					show: true,
+					lineStyle: {
+						width: 18,
+						shadowBlur: 0,
+						color: [
+							[
+								1,
+								new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+									// {
+									// 	offset: 0,
+									// 	color: "rgba(151, 12, 12, 1)"
+									// },
+									// {
+									// 	offset: 0.2,
+									// 	color: "rgba(137, 14, 161, 1)"
+									// },
+									// {
+									// 	offset: 0.4,
+									// 	color: "rgba(119, 24, 254, 1)"
+									// },
+									// {
+									// 	offset: 0.5,
+									// 	color: "rgba(254, 122, 24, 1)"
+									// },
+									// {
+									// 	offset: 0.8,
+									// 	color: "rgba(255, 187, 56, 1)"
+									// },
+									// {
+									// 	offset: 1,
+									// 	color: "rgba(101, 215, 249, 1)"
+									// }
+									{
+										offset: 0,
+										color: "rgba(101, 215, 249, 1)"
+									},
+									{
+										offset: 0.2,
+										color: "rgba(255, 187, 56, 1)"
+									},
+									{
+										offset: 0.4,
+										color: "rgba(254, 122, 24, 1)"
+									},
+									{
+										offset: 0.5,
+										color: "rgba(119, 24, 254, 1)"
+									},
+									{
+										offset: 0.8,
+										color: "rgba(137, 14, 161, 1)"
+									},
+									{
+										offset: 1,
+										color: "rgba(151, 12, 12, 1)"
+									}
+								])
+							]
+						]
+					}
+				},
+				axisTick: {
+					show: false
+				},
+				splitLine: {
+					show: false
+				},
+				axisLabel: {
+					show: true,
+					color: "#fff",
+					fontSize: 10,
+					distance: -40
+				},
+				pointer: {
+					show: 0
+				}
+			},
+			{
+				// 内侧指针、数值显示
+				name: "",
+				type: "gauge",
+				radius: "95%",
+				center: posCenter.value,
+				startAngle: 180,
+				endAngle: 0,
+				min: 0, //最小刻度
+				max: 500, //最大刻度
+				splitNumber: 100, //刻度数量
+				axisLine: {
+					show: false
+				},
+				axisLabel: {
+					show: false
+				}, //刻度标签。
+				axisTick: {
+					show: false
+				}, //刻度样式
+				splitLine: {
+					show: true,
+					length: 5,
+					lineStyle: {
+						color: "#87E0FB",
+						width: 1
+					}
+				},
+				detail: {
+					show: false
+				},
+				itemStyle: {
+					normal: {
+						color: "#fff"
+					}
+				},
+				data: [
+					{
+						value: analysisData.value
+					}
+				],
+				z: 9
+			},
+			// 第三个圆
+			{
+				type: "gauge",
+				radius: "70%",
+				center: posCenter.value,
+				splitNumber: 4,
+				min: 0,
+				max: 100,
+				startAngle: 180,
+				endAngle: 0,
+				axisLine: {
+					show: true,
+					lineStyle: {
+						width: 2,
+						shadowBlur: 0,
+						color: [
+							[
+								1,
+								new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+									{
+										offset: 0,
+										color: "rgb(1,192,229)"
+									},
+									{
+										offset: 1,
+										color: "#87E0FB "
+									}
+								])
+							]
+						]
+					}
+				},
+				axisTick: {
+					show: false
+				},
+				splitLine: {
+					show: false
+				},
+				axisLabel: {
+					show: false
+				},
+				pointer: {
+					show: 0
+				},
+				detail: {
+					show: 0
+				}
+			},
+			// 第二个圆
+			{
+				type: "gauge",
+				radius: "45%",
+				center: posCenter.value,
+				splitNumber: 4,
+				min: 0,
+				max: 100,
+				startAngle: 180,
+				endAngle: 0,
+				axisLine: {
+					show: true,
+					lineStyle: {
+						width: 2,
+						shadowBlur: 0,
+						color: [
+							[
+								1,
+								new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+									{
+										offset: 0,
+										color: "rgb(1,192,229)"
+									},
+									{
+										offset: 1,
+										color: "#87E0FB "
+									}
+								])
+							]
+						]
+					}
+				},
+				axisTick: {
+					show: false
+				},
+				splitLine: {
+					show: false
+				},
+				axisLabel: {
+					show: false
+				},
+				pointer: {
+					show: 0
+				},
+				detail: {
+					show: 0
+				}
+			},
+			// 第一个圆
+			{
+				type: "gauge",
+				radius: "25%",
+				center: posCenter.value,
+				splitNumber: 4,
+				min: 0,
+				max: 100,
+				startAngle: 180,
+				endAngle: 0,
+
+				axisLine: {
+					show: true,
+					lineStyle: {
+						width: 200,
+						shadowBlur: 0,
+						color: [
+							[
+								1,
+								new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+									{
+										offset: 1,
+										color: "rgba(135, 224, 251, 0.2)"
+									},
+									{
+										offset: 0.2,
+										color: "rgba(135, 224, 251, 0.7)"
+									}
+								])
+							],
+							[1, "transparent"]
+						]
+					}
+				},
+				axisTick: {
+					show: false
+				},
+				splitLine: {
+					show: false
+				},
+				axisLabel: {
+					show: false
+				},
+				pointer: {
+					show: 0
+				},
+				detail: {
+					show: 0
+				}
+			},
+			{
+				type: "gauge",
+				radius: "70%",
+				center: posCenter.value,
+				splitNumber: 0, //刻度数量
+				startAngle: 180,
+				endAngle: 0,
+
+				axisLine: {
+					show: true,
+					lineStyle: {
+						width: 26,
+						color: [
+							[
+								analysisData.value / 500,
+								new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+									{
+										offset: 0.5,
+										color: "rgba(135, 224, 251, 1)"
+									},
+									{
+										offset: 1,
+										color: "#fff"
+									}
+								])
+							],
+							[1, "transparent"]
+						]
+					}
+				},
+				//分隔线样式。
+				splitLine: {
+					show: false
+				},
+				axisLabel: {
+					show: false
+				},
+				axisTick: {
+					show: false
+				},
+				pointer: {
+					show: false
+				},
+				title: {
+					show: false
+				},
+				//仪表盘详情，用于显示数据。
+				detail: {
+					show: false
+				},
+				data: [
+					{
+						value: analysisData.value,
+						itemStyle: {
+							color: "red"
+						}
+					}
+				]
+			},
+			{
+				//指针外环
+				type: "pie",
+				hoverAnimation: false,
+				legendHoverLink: false,
+				center: posCenter.value,
+				radius: ["8%", "6%"],
+				// width:5,
+				z: 10,
+				label: {
+					normal: {
+						show: false
+					}
+				},
+				labelLine: {
+					normal: {
+						show: false
+					}
+				},
+				data: [
+					{
+						value: analysisData.value,
+						itemStyle: {
+							normal: {
+								color: "#87E0FB"
+							}
+						}
+					}
+				]
+			},
+			{
+				//指针内环
+				type: "pie",
+				hoverAnimation: false,
+				legendHoverLink: false,
+				center: posCenter.value,
+				radius: ["-2%", "4%"],
+				z: 10,
+
+				axisLine: {
+					show: true
+				},
+				label: {
+					normal: {
+						show: false
+					}
+				},
+				labelLine: {
+					normal: {
+						show: false
+					}
+				},
+
+				data: [
+					{
+						value: analysisData.value,
+						itemStyle: {
+							normal: {
+								color: "rgba(7, 31, 60) "
+							}
+						}
+					}
+				]
+			}
+		]
+	};
+	leftTopEcharts.setOption(option);
+	// window.onresize = function () {
+	//   myEchart.resize();
+	// }
+}
+//获取环境监测数据
+const getList = async () => {
+	const res = await getRainCurrentDayAirQualityApi({ projectSn: store.sn });
+	console.log("获取环境监测数据", res);
+	if (res.result) {
+		analysisType.value = res.result.analysisType;
+		analysisData.value = res.result.analysisData;
+	}
+	console.log("analysisType", analysisType.value);
+	console.log("analysisData", analysisData.value);
+	drawChart();
+};
+onMounted(() => {
+	getList();
+});
+</script>
+
+<style lang="scss" scoped>
+.box {
+	width: 100%;
+	height: 100%;
+	position: relative;
+}
+.footerData {
+	position: absolute;
+	top: 69%;
+	left: 48%;
+	font-family: sadigitalNumber;
+	font-size: calc(100vw * 14 / 1920);
+	color: #fff;
+}
+.colour {
+	position: absolute;
+	bottom: 0;
+	width: 100%;
+	font-size: calc(100vw * 10 / 1920);
+	left: 8%;
+	top: 80%;
+	color: #fff;
+
+	.colour_content {
+		width: 14%;
+		text-align: center;
+		float: left;
+
+		.bg {
+			width: 100%;
+			height: 8px;
+			margin-bottom: 10px;
+		}
+
+		.size {
+			width: 100%;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+	}
+}
+// .flex5 {
+// 	display: flex;
+// 	justify-content: space-evenly;
+// 	align-items: center;
+// 	flex-wrap: wrap;
+// }
+</style>
diff --git a/src/views/sevenLargeScreen/rainfallMonitoring/rightBottom.vue b/src/views/sevenLargeScreen/rainfallMonitoring/rightBottom.vue
new file mode 100644
index 0000000..7c30e77
--- /dev/null
+++ b/src/views/sevenLargeScreen/rainfallMonitoring/rightBottom.vue
@@ -0,0 +1,110 @@
+<template>
+	<div class="tableBox">
+		<Card title="报警记录">
+			<div class="tabList">
+				<div>报警设备</div>
+				<div>报警时间</div>
+				<div>报警类型</div>
+			</div>
+			<div class="listBox" ref="scrollRef">
+				<el-scrollbar style="height: 80%">
+					<div v-for="item in list" class="listStyle">
+						<div style="margin-left: 10px" class="dev">{{ item.deviceName }}</div>
+						<div>{{ item.tempAlarmTime }}</div>
+						<div>{{ item.alarmTypeName }}</div>
+					</div>
+				</el-scrollbar>
+				<div class="notoDta" v-if="list.length == 0">
+					<img src="@/assets/images/noData.png" alt="" />
+					<p>暂无数据</p>
+				</div>
+			</div>
+		</Card>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import Card from "@/components/card.vue";
+import { selectNewEnvironmentAlarmListApi } from "@/api/modules/headNoise";
+import { GlobalStore } from "@/stores";
+import { ref, onMounted } from "vue";
+const store = GlobalStore();
+
+const list = ref([]);
+//获取报警记录
+const getList = async () => {
+	const res = await selectNewEnvironmentAlarmListApi({ projectSn: store.sn });
+	console.log("获取报警记录", res);
+	list.value = res.result;
+};
+onMounted(() => {
+	getList();
+});
+</script>
+
+<style lang="scss" scoped>
+.tableBox {
+	width: 100%;
+	height: 100%;
+
+	.tabList {
+		display: flex;
+		width: 100%;
+		height: 14%;
+		background: url("@/assets/images/dustNoise/rightBottom.png") no-repeat;
+		background-size: 100% 100%;
+		// position: absolute;
+		left: 75.5%;
+		top: 75%;
+		color: #7b86a3;
+		font-size: calc(100vw * 14 / 1920);
+		line-height: 30px;
+		justify-content: space-around;
+		div {
+			text-align: center;
+			width: 30%;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+		}
+	}
+	.listBox {
+		height: 91%;
+		.listStyle {
+			display: flex;
+			justify-content: space-around;
+			color: #fff;
+			height: 12%;
+			line-height: 25px;
+			font-size: calc(100vw * 12 / 1920);
+			div {
+			text-align: center;
+
+				width: 30%;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+		}
+		.listStyle:hover {
+			background: #091f3f;
+		}
+	}
+	.notoDta {
+		top: 75%;
+		width: 12%;
+		margin: 5% -40%;
+		left: 120%;
+		position: absolute;
+		img {
+			width: 40%;
+			margin: 5% 30%;
+		}
+		p {
+			color: #fff;
+			font-size: calc(100vw * 14 / 1920);
+			margin: -6% 37%;
+		}
+	}
+}
+</style>
diff --git a/src/views/sevenLargeScreen/rainfallMonitoring/rightCenter.vue b/src/views/sevenLargeScreen/rainfallMonitoring/rightCenter.vue
new file mode 100644
index 0000000..0a158b7
--- /dev/null
+++ b/src/views/sevenLargeScreen/rainfallMonitoring/rightCenter.vue
@@ -0,0 +1,511 @@
+<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>
diff --git a/src/views/sevenLargeScreen/rainfallMonitoring/rightTop.vue b/src/views/sevenLargeScreen/rainfallMonitoring/rightTop.vue
new file mode 100644
index 0000000..a65a402
--- /dev/null
+++ b/src/views/sevenLargeScreen/rainfallMonitoring/rightTop.vue
@@ -0,0 +1,244 @@
+<template>
+	<Card title="空气分析">
+		<div class="box">
+			<div class="rightHeader">
+			<div
+				class="day"
+				:class="airType == 1 ? 'active' : ''"
+				@click="
+					airType = 1;
+					getAirQualityStatistics();
+				"
+			>
+				最近30天
+			</div>
+			<div
+				class="year"
+				:class="airType == 2 ? 'active' : ''"
+				@click="
+					airType = 2;
+					getAirQualityStatistics();
+				"
+			>
+				最近一年
+			</div>
+		</div>
+		<div id="rightEcharts" ref="rightEcharts" style="width: 100%; height: 100%"></div>
+		</div>
+	
+	</Card>
+</template>
+
+<script lang="ts" setup>
+import { GlobalStore } from "@/stores";
+import { getAirQualityStatisticsApi } from "@/api/modules/headNoise";
+import * as echarts from "echarts";
+import { onMounted, reactive, ref } from "vue";
+import Card from "@/components/card.vue";
+const store = GlobalStore();
+const airType = ref(1);
+const airTypeEchart = ref([]);
+const airTypeData = ref([]);
+const option = reactive({
+	grid: {
+		left: "5%",
+		right: "5%",
+		bottom: "-8%",
+		top: "15%",
+		containLabel: true
+	},
+	// backgroundColor: '#101129',
+	xAxis: {
+		show: false,
+		type: "value",
+		max: 100
+	},
+	yAxis: [
+		{
+			type: "category",
+			inverse: true,
+			axisLabel: {
+				show: true,
+				textStyle: {
+					fontSize: "14",
+					color: "#fff"
+				}
+			},
+			splitLine: {
+				show: false
+			},
+			axisTick: {
+				show: false
+			},
+			axisLine: {
+				show: false
+			},
+			data: airTypeEchart.value
+		},
+		{
+			axisTick: "none",
+			inverse: true,
+			axisLine: "none",
+			axisLabel: {
+				textStyle: {
+					color: "#fff",
+					fontSize: "12"
+				}
+			},
+			data: airTypeData.value
+		},
+		{
+			type: "category",
+			inverse: true,
+			axisTick: "none",
+			axisLine: "none",
+			show: true,
+			data: airTypeData.value
+		}
+	],
+	series: [
+		{
+			type: "bar",
+			showBackground: true,
+			backgroundStyle: {
+				color: "#14346c",
+				borderRadius: 30
+			},
+			label: {
+				show: false,
+				// position:'right',
+				// formatter:'{@score}%',
+				textStyle: {
+					color: "#03fcfe",
+					fontSize: "12"
+				}
+			},
+			itemStyle: {
+				normal: {
+					barBorderRadius: 10,
+					color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+						{
+							offset: 0,
+							color: "#194077"
+						},
+						{
+							offset: 1,
+							color: "#4CC4F8"
+						}
+					])
+				}
+			},
+			barWidth: 3,
+			data: airTypeData.value
+		},
+		{
+			name: "内圆",
+			type: "scatter",
+			stack: "圆",
+			yAxisIndex: 0,
+			data: airTypeData.value, //小白点，数据静态
+			label: false,
+			symbolSize: 2,
+			itemStyle: {
+				normal: {
+					borderColor: "#fff",
+					borderWidth: 4,
+					color: "#fff",
+					opacity: 1
+				}
+			},
+			z: 3
+		},
+		{
+			name: "内圆框",
+			type: "scatter",
+			stack: "圆",
+			yAxisIndex: 0,
+			data: [0, 0, 0, 0, 0, 0], //小白点外圈，数据静态
+			label: false,
+			symbolSize: 15,
+			itemStyle: {
+				normal: {
+					borderColor: "#4CC4F8",
+					borderWidth: 2,
+					color: "#14346c",
+					opacity: 1
+				}
+			},
+			z: 2
+		}
+	]
+});
+function rightChart() {
+	let chartDom = document.getElementById("rightEcharts");
+	if (chartDom) {
+		chartDom.removeAttribute("_echarts_instance_");
+	}
+	let rightEcharts = echarts.init(document.getElementById("rightEcharts"));
+	rightEcharts.setOption(option);
+	// window.onresize = function () {
+	//   myEchart.resize();
+	// }
+}
+
+//获取空气分析
+const getAirQualityStatistics = async () => {
+	const res = await getAirQualityStatisticsApi({
+		type: airType.value,
+		projectSn: store.sn
+	});
+	// console.log("倒叙前的", res.result);
+	// let data = res.result;
+	// data.sort();
+	// console.log("data倒叙后的", data);
+	if (res.result) {
+		for (let index = 0; index < res.result.length; index++) {
+			airTypeEchart.value[index] = res.result[index].type;
+			airTypeData.value[index] = res.result[index].num;
+		}
+
+		rightChart();
+	}
+};
+onMounted(async () => {
+	getAirQualityStatistics();
+});
+</script>
+
+<style lang="scss" scoped>
+.box {
+	width: 100%;
+	height: 100%;
+	position: relative;
+}
+.rightHeader {
+	width: 30%;
+	display: flex;
+	position: absolute;
+	z-index: 99;
+	color: #fff;
+	font-size: 10px;
+	text-align: center;
+	line-height: 20px;
+	left: 63%;
+	top: 4%;
+	.active {
+		height: 5%;
+		background: url("@/assets/images/dustNoise/rightImg.png") no-repeat;
+		background-size: 100% 100%;
+		cursor: pointer;
+	}
+	.day {
+		width: 80%;
+		margin-right: 5%;
+		z-index:99;
+	}
+	.year {
+		width: 80%;
+		margin-right: 8%;
+		z-index:99;
+
+	}
+	
+}
+</style>