From 6b6af7efe91c7d17d3b2d96863bf1531a824429c Mon Sep 17 00:00:00 2001
From: X_Rian <904416525@qq.com>
Date: Mon, 3 Jun 2024 16:55:51 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E5=A4=A7=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/modules/projectOverview.ts            |  10 +
 .../commandCenter/centerBottom.vue            | 342 +++++++++++-------
 .../commandScreen/commandCenter/rightAll.vue  |  68 ++--
 .../commandScreen/components/leftBottom.vue   |  10 +-
 4 files changed, 263 insertions(+), 167 deletions(-)

diff --git a/src/api/modules/projectOverview.ts b/src/api/modules/projectOverview.ts
index 1dcb944..c7a2766 100644
--- a/src/api/modules/projectOverview.ts
+++ b/src/api/modules/projectOverview.ts
@@ -109,3 +109,13 @@ export const getInspectionRiskChartApi = (params: {}) => {
 export const getSpecialCountAllSpecialApi = (params: {}) => {
 	return http.post(BASEURL + `/xmgl/xzSpecial/countAllSpecial`, params);
 };
+
+// 应急类型统计(今日)
+export const getCountEmergencyTypedApi = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/xzEmergencyRecord/countEmergencyTyped`, params);
+};
+
+// 应急处置(近七日)
+export const getCountAlarmNumByEnterpriseApi = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/xzEmergencyRecord/countAlarmNumByEnterprise`, params);
+};
diff --git a/src/views/commandScreen/commandCenter/centerBottom.vue b/src/views/commandScreen/commandCenter/centerBottom.vue
index c6f06d4..b118426 100644
--- a/src/views/commandScreen/commandCenter/centerBottom.vue
+++ b/src/views/commandScreen/commandCenter/centerBottom.vue
@@ -5,7 +5,7 @@
 				<div class="cbHeaderInfo">
 					<!-- <div class="cubeIcon"></div> -->
 					<div class="cLeft title-tabs">
-						<div class="title-color">应急处置</div>
+						<div class="title-color">应急处置（近七天）</div>
 						<div>事故风险趋势预期</div>
 					</div>
 				</div>
@@ -118,9 +118,9 @@
 <script setup lang="ts">
 import { getNoticeListApi } from "@/api/modules/projectOverview";
 import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
-import Card from "@/components/card.vue";
-import { ref, watch, onMounted } from "vue";
-import { getStageOption } from "@/api/modules/projectOverview";
+// import Card from "@/components/card.vue";
+import { ref, onMounted } from "vue";
+import { getCountEmergencyTypedApi, getCountAlarmNumByEnterpriseApi } from "@/api/modules/projectOverview";
 import * as echarts from "echarts";
 import { GlobalStore } from "@/stores";
 const store = GlobalStore();
@@ -166,24 +166,77 @@ const getNoticeList = async () => {
 
 	console.log("================center================", listData.value);
 };
-
+const dataListAlarm = ref([]);
 // 应急处置
 function getMessEchart() {
 	console.log("我是应急处置11");
 	const echartsTest = echarts.init(document.getElementById("eacherMess"));
+	// 抽出企业
+	const dataList = dataListAlarm.value.map((item: any) => {
+		return {
+			name: item.enterpriseName,
+			type: "line",
+			stack: "Total",
+			smooth: true,
+			symbol: "none",
+			data: item.dataList
+		};
+	});
+	// const dataList = [
+	// 	{
+	// 		name: "中东责任有限公司1",
+	// 		type: "line",
+	// 		stack: "Total",
+	// 		smooth: true,
+	// 		symbol: "none",
+	// 		data: [120, 132, 101, 134, 90, 230, 210]
+	// 	},
+	// 	{
+	// 		name: "中东责任有限公司2",
+	// 		type: "line",
+	// 		stack: "Total",
+	// 		smooth: true,
+	// 		symbol: "none",
+	// 		data: [120, 99, 101, 78, 90, 230, 210]
+	// 	},
+	// 	{
+	// 		name: "中东责任有限公司3",
+	// 		type: "line",
+	// 		stack: "Total",
+	// 		smooth: true,
+	// 		symbol: "none",
+	// 		data: [120, 57, 101, 134, 78, 230, 210]
+	// 	},
+	// 	{
+	// 		name: "中东责任有限公司4",
+	// 		type: "line",
+	// 		stack: "Total",
+	// 		smooth: true,
+	// 		symbol: "none",
+	// 		data: [120, 42, 42, 14, 90, 230, 210]
+	// 	}
+	// ];
 	let option = {
 		tooltip: {
 			trigger: "axis"
 		},
-		// legend: {
-		// 	x: "right",
-		// 	textStyle: {
-		// 		color: "#fff"
-		// 	},
-		// 	itemHeight: 10,
-		// 	icon: "roundRect",
-		// 	data: ["重大风险", "较大风险", "一般风险", "低风险"]
-		// },
+		legend: {
+			x: "center",
+			textStyle: {
+				color: "#fff"
+			},
+			icon: "rect",
+			data: dataList.map((item: any) => item.name),
+			formatter: function (params: any) {
+				let val = "";
+				if (params.length > 4) {
+					val = params.substr(0, 4) + "...";
+					return val;
+				} else {
+					return params;
+				}
+			}
+		},
 		color: ["#FF3232", "#FF9901", "#FFE500", "#3A3AE7"],
 		grid: {
 			left: "3%",
@@ -195,18 +248,9 @@ function getMessEchart() {
 		xAxis: {
 			type: "category",
 			boundaryGap: false,
-			data: ["中东有限公司", "中东有限公司", "中东有限公司", "中东有限公司", "中东有限公司", "中东有限公司"],
+			data: ["5.30", "5.31", "6.1", "6.2", "6.3", "6.4"],
 			axisLabel: {
-				color: "#fff",
-				formatter: function (params: any) {
-					let val = "";
-					if (params.length > 4) {
-						val = params.substr(0, 4) + "...";
-						return val;
-					} else {
-						return params;
-					}
-				}
+				color: "#fff"
 			},
 			axisTick: {
 				show: false
@@ -242,41 +286,32 @@ function getMessEchart() {
 			}
 			// type: 'value'
 		},
-		dataZoom: [
-			{
-				id: "dataZoomX",
-				type: "inside",
-				xAxisIndex: [0],
-				brushSelect: false,
-				zoomOnMouseWheel: false,
-				moveOnMouseWheel: true, // 开启滚轮平移
-				moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
-				preventDefaultMouseMove: false,
-				// start:100,
-				startValue: 1,
-				endValue: 4,
-				// 滚动条高度
-				width: 8,
-				// 滚动条显示位置
-				// height: "80%",
-				// 距离右边
-				right: 3,
-				// 控制手柄的尺寸
-				handleSize: 0,
-				filterMode: "empty"
-				// top: "top",
-			}
-		],
-		series: [
-			{
-				name: "重大风险",
-				type: "line",
-				stack: "Total",
-				smooth: true,
-				symbol: "none",
-				data: [120, 132, 101, 134, 90, 230, 210]
-			}
-		]
+		// dataZoom: [
+		// 	{
+		// 		id: "dataZoomX",
+		// 		type: "inside",
+		// 		xAxisIndex: [0],
+		// 		brushSelect: false,
+		// 		zoomOnMouseWheel: false,
+		// 		moveOnMouseWheel: true, // 开启滚轮平移
+		// 		moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
+		// 		preventDefaultMouseMove: false,
+		// 		// start:100,
+		// 		startValue: 1,
+		// 		endValue: 4,
+		// 		// 滚动条高度
+		// 		width: 8,
+		// 		// 滚动条显示位置
+		// 		// height: "80%",
+		// 		// 距离右边
+		// 		right: 3,
+		// 		// 控制手柄的尺寸
+		// 		handleSize: 0,
+		// 		filterMode: "empty"
+		// 		// top: "top",
+		// 	}
+		// ],
+		series: dataList
 	};
 	echartsTest.setOption(option, true);
 	window.addEventListener("resize", () => {
@@ -318,51 +353,53 @@ function Pie() {
 	return dataArr;
 }
 
-
-let dataList2 = ref([
-	{
-		enumType: "",
-		value: 30,
-		show: true,
-		name: "重大隐患",
-		itemStyle: {
-			normal: {
-				color: "#038cf5",
-				borderWidth: 20
-			}
-		}
-	},
-	{
-		enumType: "",
-		value: 2,
-		show: false,
-		name: "",
-		itemStyle: {
-			color: "rgba(0,0,0,0)"
-		}
-	},
-	{
-		value: 70,
-		show: true,
-		name: "一般隐患",
-		itemStyle: {
-			normal: {
-				color: "#01d6f4",
-				borderWidth: 20
-			}
-		}
-	},
-	{
-		enumType: "",
-		value: 2,
-		show: false,
-		name: "",
-		itemStyle: {
-			color: "rgba(0,0,0,0)"
-		}
-	}
-]);
-
+// let dataList2 = ref([
+// 	{
+// 		enumType: "",
+// 		value: 30,
+// 		show: true,
+// 		name: "重大隐患",
+// 		itemStyle: {
+// 			normal: {
+// 				color: "#038cf5",
+// 				borderWidth: 20
+// 			}
+// 		}
+// 	},
+// 	{
+// 		enumType: "",
+// 		value: 2,
+// 		show: false,
+// 		name: "",
+// 		itemStyle: {
+// 			color: "rgba(0,0,0,0)"
+// 		}
+// 	},
+// 	{
+// 		value: 70,
+// 		show: true,
+// 		name: "一般隐患",
+// 		itemStyle: {
+// 			normal: {
+// 				color: "#01d6f4",
+// 				borderWidth: 20
+// 			}
+// 		}
+// 	},
+// 	{
+// 		enumType: "",
+// 		value: 2,
+// 		show: false,
+// 		name: "",
+// 		itemStyle: {
+// 			color: "rgba(0,0,0,0)"
+// 		}
+// 	}
+// ]);
+const messCountType = ref({
+	count: 0,
+	data: []
+});
 function getMessCountEchart() {
 	let echartsTest = echarts.init(document.getElementById("eacherMessCount"));
 	let option = {
@@ -370,7 +407,7 @@ function getMessCountEchart() {
 			trigger: "item"
 		},
 		title: {
-			text: 120,
+			text: messCountType.value.count,
 			// text: '100%',
 			subtext: "今日应急次数",
 			x: "24%",
@@ -404,7 +441,7 @@ function getMessCountEchart() {
 			itemHeight: 7, // 设置高度
 			symbolKeepAspect: false,
 			textStyle: {
-				color: "#000",
+				color: "#fff",
 				rich: {
 					name: {
 						verticalAlign: "right",
@@ -419,22 +456,20 @@ function getMessCountEchart() {
 					}
 				}
 			},
-			data: dataList2.value.map(item => {
+			data: messCountType.value.data.map((item: any) => {
 				if (item.show) {
 					return item.name;
 				}
-			}),
-			formatter: function (data: any) {
-				if (dataList2.value && dataList2.value.length) {
-					for (var i = 0; i < dataList2.value.length; i++) {
-						if (data === dataList2.value[i].name) {
-							var value = dataList2.value[i].value;
-							var percentage = value + "%";
-							return "{name| " + data + "}  {gap|       }" + "{value|" + value + " " + "}";
-						}
-					}
-				}
-			}
+			})
+			// formatter: function (params: any) {
+			// 	let val = "";
+			// 	if (params.length > 4) {
+			// 		val = params.substr(0, 5) + "...";
+			// 		return val;
+			// 	} else {
+			// 		return params;
+			// 	}
+			// }
 		},
 		series: [
 			// 外侧光线
@@ -565,7 +600,7 @@ function getMessCountEchart() {
 				labelLine: {
 					show: false
 				},
-				data: dataList2.value
+				data: messCountType.value.data
 			},
 			{
 				type: "pie",
@@ -585,10 +620,54 @@ function getMessCountEchart() {
 	});
 }
 
+const getMessCountEchartType = async () => {
+	const res: any = await getCountEmergencyTypedApi({
+		projectSn: store.sn,
+		type: 1
+	});
+	console.log("应急统计图", res);
+	messCountType.value.data = res.result.data.map((item: any) => {
+		return {
+			...item,
+			value: item.count,
+			show: true,
+			itemStyle: {
+				normal: {
+					// color: "#01d6f4",
+					borderWidth: 20
+				}
+			}
+		};
+	});
+	messCountType.value.count = res.result.count;
+	getMessCountEchart();
+};
+
+const getCountAlarmNumByEnterprise = async () => {
+	const res: any = await getCountAlarmNumByEnterpriseApi({
+		projectSn: store.sn,
+		type: 1
+	});
+	dataListAlarm.value = res.result.reduce((prev: any[], item: any) => {
+		console.log("1111", prev);
+		item.list.forEach((ele: any) => {
+			const findIndex = prev.findIndex((option: any) => option.enterpriseId == ele.enterpriseId);
+			if (findIndex == -1) {
+				prev.push({ ...ele, dataList: [ele.alarmNum] });
+			} else {
+				prev[findIndex].dataList.push(ele.alarmNum);
+			}
+		});
+		return prev;
+	}, []);
+	console.log("应急处置统计图", res);
+	getMessEchart();
+};
+
 onMounted(async () => {
 	await getNoticeList();
-	await getMessEchart();
-	await getMessCountEchart();
+	getCountAlarmNumByEnterprise();
+	getMessCountEchartType();
 });
 </script>
 
@@ -610,17 +689,18 @@ onMounted(async () => {
 		width: 140px;
 		text-align: center;
 		// background-color: #315296;
-		background: rgb(0,33,116);
-		background: linear-gradient(270deg, rgba(0,33,116,0.8) 0%, rgba(40,88,184,0.3) 96%);
+		background: rgb(0, 33, 116);
+		background: linear-gradient(270deg, rgba(0, 33, 116, 0.8) 0%, rgba(40, 88, 184, 0.3) 96%);
 		cursor: pointer;
 	}
 
 	.title-color {
 		// background-color: #1449b6;
-		background: rgb(0,33,116);
-		background: linear-gradient(270deg, rgba(0,33,116,1) 0%, rgba(40,88,184,1) 96%);
+		background: rgb(0, 33, 116);
+		background: linear-gradient(270deg, rgba(0, 33, 116, 1) 0%, rgba(40, 88, 184, 1) 96%);
 	}
 }
+
 .notoDta {
 	top: 50%;
 	// width: 50%;
@@ -641,6 +721,7 @@ onMounted(async () => {
 		margin: -6% 30%;
 	}
 }
+
 .scroll {
 	height: 100%;
 	width: 100%;
@@ -670,7 +751,7 @@ onMounted(async () => {
 	}
 
 	.ctContent {
-		height: 74%;
+		height: 85%;
 		// background-color: darkred;
 	}
 }
@@ -761,6 +842,7 @@ onMounted(async () => {
 					margin: 9px 0;
 					margin-left: 2px;
 				}
+
 				.itemHeadInner2 {
 					font-size: 16px;
 					border: 1px solid #f46649;
@@ -771,6 +853,7 @@ onMounted(async () => {
 					margin: 9px 0;
 					margin-left: 2px;
 				}
+
 				.itemHeadInner3 {
 					font-size: 16px;
 					border: 1px solid #ecbe45;
@@ -781,6 +864,7 @@ onMounted(async () => {
 					margin: 9px 0;
 					margin-left: 2px;
 				}
+
 				.itemHeadInner4 {
 					font-size: 16px;
 					border: 1px solid #5394f7;
@@ -791,6 +875,7 @@ onMounted(async () => {
 					margin: 9px 0;
 					margin-left: 2px;
 				}
+
 				.itemHeadInner5 {
 					font-size: 16px;
 					border: 1px solid #9400d3;
@@ -801,6 +886,7 @@ onMounted(async () => {
 					margin: 9px 0;
 					margin-left: 2px;
 				}
+
 				.itemHeadInner6 {
 					font-size: 16px;
 					border: 1px solid #00ced1;
diff --git a/src/views/commandScreen/commandCenter/rightAll.vue b/src/views/commandScreen/commandCenter/rightAll.vue
index ee58fe5..3547a26 100644
--- a/src/views/commandScreen/commandCenter/rightAll.vue
+++ b/src/views/commandScreen/commandCenter/rightAll.vue
@@ -16,7 +16,7 @@
 			</div>
 		</div>
 		<div class="content">
-			<div class="contentTop contentMiddle" style="height: 24%">
+			<div class="contentTop contentMiddle" style="height: 28%">
 				<div class="ctHead" @click="onEchartsSafeTab(1)">
 					<div>
 						重大隐患超期未整改<text>{{ overdueMajorDangerCount }}</text
@@ -55,10 +55,10 @@
 					</div>
 				</div>
 						</div> -->
-			<div class="contentTop contentMiddle" style="height: 23%; margin-top: 4px">
+			<div class="contentTop contentMiddle" style="height: 27%; margin-top: 10px">
 				<leftBottom @openDialog="openDialogData"></leftBottom>
 			</div>
-			<div class="contentTop contentBottom" style="height: 20.5%; margin-top: 10px">
+			<div class="contentTop contentBottom" style="height: 22.5%; margin-top: 10px">
 				<div class="cbHeader">
 					<div class="cbHeaderInfo">
 						<div class="cubeIcon"></div>
@@ -391,7 +391,7 @@ function drawEchart() {
 								let percentage = dataList.value[i].greatFaultLevelNumJzrRate + "%";
 								const greatFaultLevelNumJzrRate = Number(dataList.value[i].greatFaultLevelNumJzrRate);
 								const templateString = greatFaultLevelNumJzrRate > 0 ? `color1|↑` : "color2|↓";
-								return "{name| " + data + "}  {gap|    }" + `{value|${value}} {${templateString}} {value1|${percentage}}`;
+								return "{name| " + data + "}  {gap|  }" + `{value|${value}} {${templateString}} {value1|${percentage}}`;
 							}
 						}
 					}
@@ -457,7 +457,7 @@ function drawEchart() {
 								const templateString = rectificationNumJzrRate > 0 ? `color1|↑` : "color2|↓";
 								// ↓
 								return (
-									"{name| " + rectificationName + "}  {gap|    }" + `{value|${value}} {${templateString}} {value1|${percentage}}`
+									"{name| " + rectificationName + "}  {gap|  }" + `{value|${value}} {${templateString}} {value1|${percentage}}`
 								);
 							}
 						}
@@ -998,18 +998,18 @@ const getSafeInfo = async () => {
 		dataList.value.push(obj);
 	}
 	questionTotal.value = result.result.dangerNum;
-	overdueMajorDangerCount.value = result.result.overdueRectificationNum;
-	overdueMajorDangerRate.value = result.result.overdueRectificationNumRatio;
-	majorDangerCount.value = result.result.notCloseNum;
+	// overdueMajorDangerCount.value = result.result.overdueRectificationNum;
+	// overdueMajorDangerRate.value = result.result.overdueRectificationNumRatio;
+	// majorDangerCount.value = result.result.notCloseNum;
 	// majorDangerRate.value = result.result.percent;
 	console.log("1111111111111", dataList.value);
 
-	// const res: any = await getCountDangerLevelApi({
-	// 	projectSn: store.sn,
-	// 	isOverdueRectification: 1,
-	// 	inspectStartTime: dateRange.value[0],
-	// 	inspectEndTime: dateRange.value[1]
-	// });
+	const res: any = await getCountDangerLevelApi({
+		projectSn: store.sn,
+		isOverdueRectification: 1,
+		inspectStartTime: dateRange.value[0],
+		inspectEndTime: dateRange.value[1]
+	});
 	// dataList.value = res.result.data.map((item: any, index: number) => {
 	// 	return {
 	// 		...item,
@@ -1026,10 +1026,10 @@ const getSafeInfo = async () => {
 	// questionTotal.value = res.result.count;
 	// console.log("饼图", res);
 
-	// const filterResult = res.result.data.find((item: any) => item.enumType == 1);
+	const filterResult = res.result.data.find((item: any) => item.enumType == 1);
 
-	// overdueMajorDangerCount.value = filterResult.count;
-	// overdueMajorDangerRate.value = filterResult.percent;
+	overdueMajorDangerCount.value = filterResult.count;
+	overdueMajorDangerRate.value = filterResult.percent;
 
 	drawEchart();
 };
@@ -1312,20 +1312,20 @@ const qualityInfo = async () => {
 		inspectStartTime: dateRange.value[0],
 		inspectEndTime: dateRange.value[1]
 	});
-	dataList2.value = res.result.data.map((item: any, index: number) => {
-		return {
-			...item,
-			value: item.count,
-			show: true,
-			itemStyle: {
-				normal: {
-					color: classColorList.value[index],
-					borderWidth: 20
-				}
-			}
-		};
-	});
-	questionTotal.value = res.result.count;
+	// dataList2.value = res.result.data.map((item: any, index: number) => {
+	// 	return {
+	// 		...item,
+	// 		value: item.count,
+	// 		show: true,
+	// 		itemStyle: {
+	// 			normal: {
+	// 				color: classColorList.value[index],
+	// 				borderWidth: 20
+	// 			}
+	// 		}
+	// 	};
+	// });
+	// questionTotal.value = res.result.count;
 
 	const filterResult = res.result.data.find((item: any) => item.enumType == 1);
 	majorDangerCount.value = filterResult.count;
@@ -1435,14 +1435,14 @@ onMounted(async () => {
 		width: 140px;
 		text-align: center;
 		// background-color: #315296;
-		background: rgb(0,33,116);
+		background: rgb(0, 33, 116);
 		background: linear-gradient(270deg, rgba(0, 33, 116, 0.8) 0%, rgba(40, 88, 184, 0.3) 96%);
 		cursor: pointer;
 	}
 
 	.title-color {
 		// background-color: #1449b6;
-		background: rgb(0,33,116);
+		background: rgb(0, 33, 116);
 		background: linear-gradient(270deg, rgba(0, 33, 116, 1) 0%, rgba(40, 88, 184, 1) 96%);
 	}
 }
@@ -1506,7 +1506,7 @@ onMounted(async () => {
 
 	.content {
 		padding: 0 20px;
-		height: 100%;
+		height: calc(100% - 100px);
 
 		.contentTop {
 			margin-top: 10px;
diff --git a/src/views/commandScreen/components/leftBottom.vue b/src/views/commandScreen/components/leftBottom.vue
index 8e97935..c6dc506 100644
--- a/src/views/commandScreen/components/leftBottom.vue
+++ b/src/views/commandScreen/components/leftBottom.vue
@@ -4,7 +4,7 @@
 			<div class="header">
 				<div class="cbHeaderInfo hLeft">
 					<div class="cubeIcon"></div>
-					<div class="cLeft" @click="openDialogData({ index: 8, title: '人员履职情况分析(整改人)' })">人员履职情况分析</div>
+					<div class="cLeft" @click="openDialogData({ index: 8, title: '人员履职情况分析(整改人)' })">责任单位隐患整改统计</div>
 				</div>
 				<!-- <div class="hLeft" @click="openDialogData({ index: 8, title: '人员履职情况分析(整改人)' })">人员履职情况分析</div> -->
 				<div class="hRight">
@@ -555,7 +555,7 @@ onMounted(async () => {
 
 	// height: 10%;
 	.hLeft {
-		width: 50%;
+		width: 58%;
 		font-size: 20px;
 		font-weight: bold;
 		background-image: linear-gradient(to bottom left, #c8e3ff, #007aff);
@@ -565,7 +565,7 @@ onMounted(async () => {
 	}
 
 	.hRight {
-		width: 50%;
+		width: 42%;
 	}
 }
 
@@ -597,7 +597,7 @@ onMounted(async () => {
 			border-bottom: 1px solid #0059ff;
 
 			.hLeft {
-				width: 50%;
+				width: 58%;
 				font-size: 20px;
 				font-weight: bold;
 				background-image: linear-gradient(to bottom left, #c8e3ff, #007aff);
@@ -607,7 +607,7 @@ onMounted(async () => {
 			}
 
 			.hRight {
-				width: 50%;
+				width: 42%;
 			}
 		}