From 01cc615d49258ad9ed8d6c925785d08c01bbc3d4 Mon Sep 17 00:00:00 2001
From: X_Rian <904416525@qq.com>
Date: Mon, 3 Jun 2024 17:52:59 +0800
Subject: [PATCH] 1

---
 .../commandCenter/centerBottom.vue            | 149 ++++++++++++------
 .../commandScreen/commandCenter/centerTop.vue |  72 +++++----
 .../commandScreen/commandCenter/rightAll.vue  |  30 ++--
 .../commandScreen/components/leftBottom.vue   |   4 +-
 4 files changed, 151 insertions(+), 104 deletions(-)

diff --git a/src/views/commandScreen/commandCenter/centerBottom.vue b/src/views/commandScreen/commandCenter/centerBottom.vue
index b118426..88dc940 100644
--- a/src/views/commandScreen/commandCenter/centerBottom.vue
+++ b/src/views/commandScreen/commandCenter/centerBottom.vue
@@ -6,25 +6,26 @@
 					<!-- <div class="cubeIcon"></div> -->
 					<div class="cLeft title-tabs">
 						<div class="title-color">应急处置（近七天）</div>
-						<div>事故风险趋势预期</div>
+						<div>事故风险预测趋势</div>
 					</div>
 				</div>
 				<div class="cbHeaderLine" style="margin-top: 1%"></div>
 			</div>
 			<div class="ctContent" style="margin-top: 1%; display: flex">
-				<div style="width: 50%">
+				<div style="width: 50%; position: relative">
 					<div id="eacherMess" style="width: 100%; height: 100%"></div>
-					<!-- <div class="notoDta" v-if="dataList.length == 0">
+					<div class="right-dap" @click="onPageMess" v-if="dataListAlarm.length != 0"></div>
+					<div class="notoDta" v-if="dataListAlarm.length == 0">
 						<img src="@/assets/images/noData.png" alt="" />
 						<p>暂无数据</p>
-					</div> -->
+					</div>
 				</div>
 				<div style="width: 50%">
 					<div id="eacherMessCount" style="width: 100%; height: 100%"></div>
-					<!-- <div class="notoDta" v-if="dataList.length == 0">
+					<div class="notoDta" v-if="messCountType.data.length == 0">
 						<img src="@/assets/images/noData.png" alt="" />
 						<p>暂无数据</p>
-					</div> -->
+					</div>
 				</div>
 			</div>
 		</div>
@@ -119,7 +120,7 @@
 import { getNoticeListApi } from "@/api/modules/projectOverview";
 import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
 // import Card from "@/components/card.vue";
-import { ref, onMounted } from "vue";
+import { ref, onMounted, reactive } from "vue";
 import { getCountEmergencyTypedApi, getCountAlarmNumByEnterpriseApi } from "@/api/modules/projectOverview";
 import * as echarts from "echarts";
 import { GlobalStore } from "@/stores";
@@ -167,55 +168,74 @@ const getNoticeList = async () => {
 	console.log("================center================", listData.value);
 };
 const dataListAlarm = ref([]);
+const pageInfo = reactive({
+	dataListAlarmPage: [] as any[],
+	page: 0
+});
+const spArr = (arr: any[], num: number) => {
+	let newArr = [];
+	for (let i = 0; i < arr.length; ) {
+		newArr.push(arr.slice(i, (i += num)));
+	}
+	return newArr;
+};
+const onPageMess = () => {
+	pageInfo.page += 1;
+	if (pageInfo.page >= pageInfo.dataListAlarmPage.length) {
+		pageInfo.page = 0;
+	}
+	getMessEchart();
+};
 // 应急处置
 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]
-	// 	}
-	// ];
+	// pageInfo.dataListAlarmPage = spArr(
+	// 	[
+	// 		{
+	// 			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]
+	// 		},
+	// 		{
+	// 			name: "中东责任有限公司5",
+	// 			type: "line",
+	// 			stack: "Total",
+	// 			smooth: true,
+	// 			symbol: "none",
+	// 			data: [120, 42, 42, 14, 90, 230, 210]
+	// 		}
+	// 	],
+	// 	4
+	// );
+	const dataList = pageInfo.dataListAlarmPage[pageInfo.page];
 	let option = {
 		tooltip: {
 			trigger: "axis"
@@ -225,6 +245,8 @@ function getMessEchart() {
 			textStyle: {
 				color: "#fff"
 			},
+			itemHeight: 8,
+			itemWidth: 8,
 			icon: "rect",
 			data: dataList.map((item: any) => item.name),
 			formatter: function (params: any) {
@@ -660,6 +682,18 @@ const getCountAlarmNumByEnterprise = async () => {
 		});
 		return prev;
 	}, []);
+	// 抽出企业
+	const dataList = dataListAlarm.value.map((item: any) => {
+		return {
+			name: item.enterpriseName,
+			type: "line",
+			stack: "Total",
+			smooth: true,
+			symbol: "none",
+			data: item.dataList
+		};
+	});
+	pageInfo.dataListAlarmPage = spArr(dataList, 4);
 	console.log("应急处置统计图", res);
 	getMessEchart();
 };
@@ -672,6 +706,17 @@ onMounted(async () => {
 </script>
 
 <style lang="scss" scoped>
+.right-dap {
+	width: 18px;
+	height: 18px;
+	background-image: url(@/assets/images/right-dap.png);
+	background-repeat: no-repeat;
+	background-size: 100% 100%;
+	position: absolute;
+	top: 4px;
+	right: 25px;
+	cursor: pointer;
+}
 .title-tabs {
 	width: initial !important;
 	display: flex;
diff --git a/src/views/commandScreen/commandCenter/centerTop.vue b/src/views/commandScreen/commandCenter/centerTop.vue
index f0b859a..0cdb0dd 100644
--- a/src/views/commandScreen/commandCenter/centerTop.vue
+++ b/src/views/commandScreen/commandCenter/centerTop.vue
@@ -39,9 +39,15 @@
 					<span>分</span>
 				</div>
 				<div class="count-div-item">
-					<span>相较上月{{ statScore.radio > 0 ? '上升' + statScore.radio : '下降' + (statScore.radio && statScore.radio.toString().substr(1)) }} %</span>
-					<span :style="statScore.radio > 0 ? 'color:#0db027' : 'color:#f77c7d'">{{ statScore.radio > 0 ? '↑'
-						: '↓' }} </span>
+					<span
+						>相较上月{{
+							statScore.radio > 0
+								? "上升" + (statScore.radio ? statScore.radio : 0)
+								: "下降" + (statScore.radio ? statScore.radio.toString().substr(1) : 0)
+						}}
+						%</span
+					>
+					<span :style="statScore.radio > 0 ? 'color:#0db027' : 'color:#f77c7d'">{{ statScore.radio > 0 ? "↑" : "↓" }} </span>
 				</div>
 			</div>
 			<div class="score-div" @click="openDialogData({ index: 9, title: '月度安全综合评分' })">
@@ -53,28 +59,26 @@
 			</div>
 			<div class="classify-div">
 				<div class="classify-div-item" @click="openDialogData({ index: 1, title: '危大工程' })">
-					<span
-						style="font-size: 12px;">危大工程&nbsp;&nbsp;{{ statsDirectorateBigScreen.dangerousEngineeringRecordNum }}</span>
+					<span style="font-size: 12px">危大工程&nbsp;&nbsp;{{ statsDirectorateBigScreen.dangerousEngineeringRecordNum }}</span>
 				</div>
 				<div class="classify-div-item" @click="openDialogData({ index: 2, title: '安全教育' })">
-					<span
-						style="font-size: 12px;">安全教育&nbsp;&nbsp;{{ statsDirectorateBigScreen.workerInfoAuditRecordNum }}</span>
+					<span style="font-size: 12px">安全教育&nbsp;&nbsp;{{ statsDirectorateBigScreen.workerInfoAuditRecordNum }}</span>
 				</div>
-				<div class="classify-div-item" style="width: 280px;" @click="openDialogData({ index: 3, title: '影响进度计划因素' })">
-					<span
-						style="font-size: 12px;">影响进度计划因素&nbsp;&nbsp;{{ statsDirectorateBigScreen.taskProgressContentNum }}</span>
+				<div class="classify-div-item" style="width: 280px" @click="openDialogData({ index: 3, title: '影响进度计划因素' })">
+					<span style="font-size: 12px">影响进度计划因素&nbsp;&nbsp;{{ statsDirectorateBigScreen.taskProgressContentNum }}</span>
 				</div>
 				<div class="classify-div-item" @click="openDialogData({ index: 4, title: '风险统计' })">
-					<span
-						style="font-size: 12px;">风险统计&nbsp;&nbsp;{{ statsDirectorateBigScreen.securityQualityInspectionRecordNum }}</span>
+					<span style="font-size: 12px"
+						>风险统计&nbsp;&nbsp;{{ statsDirectorateBigScreen.securityQualityInspectionRecordNum }}</span
+					>
 				</div>
 				<div class="classify-div-item" @click="openDialogData({ index: 5, title: '安全隐患' })">
-					<span
-						style="font-size: 12px;">安全隐患&nbsp;&nbsp;{{ statsDirectorateBigScreen.securityQualityInspectionRecordNum }}</span>
+					<span style="font-size: 12px"
+						>安全隐患&nbsp;&nbsp;{{ statsDirectorateBigScreen.securityQualityInspectionRecordNum }}</span
+					>
 				</div>
 				<div class="classify-div-item" @click="openDialogData({ index: 6, title: 'AI警报' })">
-					<span
-						style="font-size: 12px;">AI警报&nbsp;&nbsp;{{ statsDirectorateBigScreen.aiAnalyseHardWareAlarmRecordNum }}</span>
+					<span style="font-size: 12px">AI警报&nbsp;&nbsp;{{ statsDirectorateBigScreen.aiAnalyseHardWareAlarmRecordNum }}</span>
 				</div>
 			</div>
 			<div class="background-title">
@@ -96,7 +100,7 @@ import { selectLiveVideoListApi } from "@/api/modules/video";
 import ckplayerComp from "./ckplayerComp.vue";
 import { COMPANY } from "@/config/config";
 
-const emits = defineEmits(["openDialog"])
+const emits = defineEmits(["openDialog"]);
 const store = GlobalStore();
 const videoList = ref([] as any);
 // ts
@@ -111,8 +115,8 @@ const props = withDefaults(defineProps<Props>(), {
 const projectData = ref({} as any);
 // 打开弹窗
 const openDialogData = (obj: any) => {
-	emits("openDialog", obj)
-}
+	emits("openDialog", obj);
+};
 watch(
 	() => props.projectData,
 	newVal => {
@@ -150,14 +154,14 @@ const getVideoList = async () => {
 	let res: any = await selectLiveVideoListApi({
 		projectSn: store.sn
 	});
-	console.log(res, '445566')
+	console.log(res, "445566");
 	if (res.result && res.result.extend1) {
 		videoList.value = JSON.parse(res.result.extend1).result.videoList;
-		console.log(videoList.value, '112233')
+		console.log(videoList.value, "112233");
 		// 为了解决视频播放器渲染，第二个总是会默认显示一半，我动态设置样式让视图刷新，只要设置百分百就有问题，所以只能使用此方法
 		setTimeout(() => {
 			// 获取所有的 video 元素
-			var videos = document.querySelectorAll(".href-content video")
+			var videos = document.querySelectorAll(".href-content video");
 			// var videos = document.getElementsByTagName("video");
 			// 遍历所有的 video 元素
 			for (var i = 0; i < videos.length; i++) {
@@ -172,24 +176,23 @@ let statsDirectorateBigScreen = ref({} as any);
 //获取centerTop底部按钮显示数据
 const getStatsDirectorateBigScreen = async () => {
 	const res = await getStatsDirectorateBigScreenApi({ projectSn: store.sn });
-	statsDirectorateBigScreen.value = res.result
+	statsDirectorateBigScreen.value = res.result;
 };
 let statScore = ref({
 	dangerEngScore: 0,
 	hiddenDangerScore: 0,
 	aiScore: 0,
 	riskScore: 0,
-	total:0,
-	lastMonthTotal:0,
+	total: 0,
+	lastMonthTotal: 0
 } as any);
 //获取centerTop底部按钮显示数据
 const getStatScore = async () => {
 	const res = await getStatScoreApi({ projectSn: store.sn });
 	console.log("获取项目信息6666666666666666666666666666666666", res);
-	statScore.value = res.result
+	statScore.value = res.result;
 };
 
-
 function boxStyle(item: any) {
 	if (item.isActive) {
 		let choiseStyle = {
@@ -210,7 +213,7 @@ function activeBtn(item: any) {
 		tabIndex.value = item.id;
 	}
 	showVideo.value = item.id;
-	console.log(showVideo.value)
+	console.log(showVideo.value);
 }
 
 const uploadFail = () => {
@@ -262,7 +265,7 @@ function saveOrDeleteVideo(url) {
 //将方法暴露给父组件
 defineExpose({
 	getQueryBySnData
-})
+});
 onMounted(async () => {
 	await getVideoList();
 	getQueryBySnData();
@@ -273,7 +276,6 @@ onMounted(async () => {
 
 <style lang="scss" scoped>
 .centerTop {
-
 	// background-color: darkred;
 	.top-content {
 		height: 100%;
@@ -310,7 +312,7 @@ onMounted(async () => {
 				}
 			}
 
-			>span {
+			> span {
 				margin-top: 10px;
 				color: white;
 			}
@@ -366,8 +368,8 @@ onMounted(async () => {
 			&-item {
 				font-size: 14px;
 
-				>span:nth-child(2) {
-					color: #2983E1;
+				> span:nth-child(2) {
+					color: #2983e1;
 				}
 			}
 		}
@@ -395,7 +397,7 @@ onMounted(async () => {
 				}
 			}
 
-			>span {
+			> span {
 				color: white;
 				font-size: 18px;
 			}
@@ -436,7 +438,7 @@ onMounted(async () => {
 			position: absolute;
 			text-align: center;
 			line-height: 50px;
-			color: #00E2F9;
+			color: #00e2f9;
 			font-size: 14px;
 			bottom: -10px;
 			left: 0px;
diff --git a/src/views/commandScreen/commandCenter/rightAll.vue b/src/views/commandScreen/commandCenter/rightAll.vue
index 3547a26..581d1f4 100644
--- a/src/views/commandScreen/commandCenter/rightAll.vue
+++ b/src/views/commandScreen/commandCenter/rightAll.vue
@@ -2,7 +2,7 @@
 <template>
 	<div class="rightAll">
 		<div class="header">
-			<div class="hLeft">隐患统计智能分析</div>
+			<div class="hLeft">隐患智能统计分析</div>
 			<div class="hRight">
 				<el-date-picker
 					style="width: 85%"
@@ -31,8 +31,8 @@
 				</div>
 				<div class="ctContent" style="position: relative">
 					<div id="echartsSafe" style="width: 100%; height: 100%"></div>
-					<div class="safetext1">状态统计（较昨日）</div>
-					<div class="safetext2">风险统计（较昨日）</div>
+					<div class="safetext1" v-if="dataList.length == 0">状态统计（较昨日）</div>
+					<div class="safetext2" v-if="dataList.length == 0">风险统计（较昨日）</div>
 					<div class="notoDta" v-if="dataList.length == 0">
 						<img src="@/assets/images/noData.png" alt="" />
 						<p>暂无数据</p>
@@ -64,14 +64,14 @@
 						<div class="cubeIcon"></div>
 						<div class="cLeft title-tabs">
 							<div class="title-color">风险走势图</div>
-							<div>隐患风险趋势预期</div>
+							<div>隐患风险预测趋势</div>
 						</div>
 					</div>
 					<div class="cbHeaderLine"></div>
 				</div>
 				<div class="ctContent cbContent" style="margin-top: 1%; height: 78%">
 					<div id="eacherRisk" style="width: 100%; height: 100%"></div>
-					<div class="notoDta" v-if="dataList.length == 0">
+					<div class="notoDta" v-if="riskList.length == 0">
 						<img src="@/assets/images/noData.png" alt="" />
 						<p>暂无数据</p>
 					</div>
@@ -83,14 +83,14 @@
 						<div class="cubeIcon"></div>
 						<div class="cLeft title-tabs">
 							<div class="title-color">特殊作业统计分析</div>
-							<div>特殊作业风险趋势预期</div>
+							<div>特殊作业风险预测趋势</div>
 						</div>
 					</div>
 					<div class="cbHeaderLine"></div>
 				</div>
 				<div class="ctContent" style="margin-top: 1%; height: 73%">
 					<div id="eacherSpecial" style="width: 100%; height: 100%"></div>
-					<div class="notoDta" v-if="dataList.length == 0">
+					<div class="notoDta" v-if="specialList.length == 0">
 						<img src="@/assets/images/noData.png" alt="" />
 						<p>暂无数据</p>
 					</div>
@@ -266,7 +266,7 @@ const onEchartsSafeTab = (type: number) => {
 		resultInfo.majorInfo.isNotQualified = 0;
 		emits("openDialog", resultInfo);
 	} else if (type == 2) {
-		resultInfo.title = "未销项目";
+		resultInfo.title = "未销项";
 		resultInfo.majorInfo.isOverdueRectification = 0;
 		resultInfo.majorInfo.isNotQualified = 1;
 		emits("openDialog", resultInfo);
@@ -339,7 +339,7 @@ function drawEchart() {
 				icon: "rect",
 				type: "plain",
 				orient: "vertical",
-				right: "0%",
+				right: "-1%",
 				top: "20%",
 				align: "left",
 				itemGap: 14,
@@ -403,10 +403,10 @@ function drawEchart() {
 				icon: "none",
 				type: "plain",
 				orient: "vertical",
-				left: "31%",
+				left: "35%",
 				top: "20%",
 				align: "left",
-				itemGap: 12,
+				itemGap: 14,
 				itemWidth: 8, // 设置宽度
 				itemHeight: 7, // 设置高度
 				symbolKeepAspect: false,
@@ -983,8 +983,8 @@ const getSafeInfo = async () => {
 			obj.name = "低隐患";
 			obj.value = result.result.lowRiskNum;
 			obj.greatFaultLevelNumJzrRate = result.result.lowRiskNumJzrRate;
-			obj.rectificationNum = result.result.closeNum;
-			obj.rectificationNumJzrRate = result.result.closeNumJzrRate;
+			obj.rectificationNum = result.result.closeInspectionNum;
+			obj.rectificationNumJzrRate = result.result.closeInspectionNumJzrRate;
 			obj.rectificationName = "合格";
 		} else if (index == 4) {
 			obj.name = "无";
@@ -1378,7 +1378,7 @@ watch(
 const getInspectionRiskChart = async () => {
 	const res: any = await getInspectionRiskChartApi({
 		projectSn: store.sn,
-		type: 1
+		queryType: 1
 	});
 	console.log("风险走势图", res);
 	riskList.value = res.result;
@@ -1410,7 +1410,7 @@ onMounted(async () => {
 	position: absolute;
 	top: 6%;
 	color: white;
-	left: 40%;
+	left: 44%;
 }
 .safetext2 {
 	position: absolute;
diff --git a/src/views/commandScreen/components/leftBottom.vue b/src/views/commandScreen/components/leftBottom.vue
index c6dc506..e1d25e1 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">
@@ -685,7 +685,7 @@ onMounted(async () => {
 				p {
 					color: #fff;
 					font-size: 14px;
-					margin: -6% 37%;
+					margin: -6% 30%;
 				}
 			}
 		}