flx：提交大屏水波球总包柱状图自动滚动

2024-08-22 14:27:54 +08:00 · 2024-08-22 14:27:54 +08:00 · aef467286f
commit aef467286f
parent 2d6868a3e9
7 changed files with 603 additions and 166 deletions
--- a/.env.development
+++ b/.env.development
@ -4,7 +4,8 @@ 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://192.168.34.221:28890' #雄哥本地
 # 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'
@ -46,7 +47,7 @@ VITE_API_URL = 'http://192.168.34.221:9111' #雄哥本地
 # 包头化工
 # VITE_API_URL = 'http://jxj.zhgdyun.com:18000'
 # 大连金笔
-VITE_API_URL = 'http://101.43.164.214:11126'
+# VITE_API_URL = 'http://101.43.164.214:11126'

 # 上传
 VITE_ULD_API_URL = 'http://192.168.34.155:8012/onlinePreview?url='
--- a/src/config/config.ts
+++ b/src/config/config.ts
@ -30,10 +30,10 @@ export const BASE_IMAGE_URL = import.meta.env.VITE_BASE_IMAGE_URL;
 // export const COMPANY: string = "agjt"; //鞍钢集团
 // export const COMPANY: string = "tj"; // 同济项目
 // export const COMPANY: string = "scwc"; // 四川网诚项目
-export const COMPANY: string = "dljb"; // 大连金笔项目
+// export const COMPANY: string = "dljb"; // 大连金笔项目
 // export const COMPANY: string = "agjtLive"; //鞍钢集团现场大屏
 // export const COMPANY: string = "bthg"; //包头化工
-// export const COMPANY: string = "agjtCommand"; //鞍钢集团指挥部大屏
+export const COMPANY: string = "agjtCommand"; //鞍钢集团指挥部大屏
 // export const COMPANY: string = "agjtProjectKanban"; //鞍钢集团项目看板大屏
 // export const COMPANY: string = "agjtOverviewScreen"; //鞍钢集团项目总览
 // export const COMPANY: string = "agjtLocationLive"; //鞍钢集团人员定位大屏
--- a/src/routers/modules/staticRouter.ts
+++ b/src/routers/modules/staticRouter.ts
@ -24,8 +24,8 @@ export const staticRouter: RouteRecordRaw[] = [
 	{
 		path: "/large",
 		name: "大屏",
-		component: () => import("@/views/sevenLargeScreen/indexL.vue"), //七参数标准版
-		// component: () => import("@/views/commandScreen/indexCommand.vue"), //指挥部大屏
+		// component: () => import("@/views/sevenLargeScreen/indexL.vue"), //七参数标准版
+		component: () => import("@/views/commandScreen/indexCommand.vue"), //指挥部大屏
 		// component: () => import("@/views/agjtLiveScreen/indexLive.vue"), //鞍钢现场大屏
 		// component: () => import("@/views/overviewScreen/indexCommand.vue"), //总览大屏
 		// component: () => import("@/views/locationLive/locationL.vue"), //人员定位大屏
--- a/src/views/commandScreen/commandCenter/centerTop.vue
+++ b/src/views/commandScreen/commandCenter/centerTop.vue
@ -1,6 +1,7 @@
 <template>
 	<div class="centerTop">
 		<div class="top-content">
+			<!-- @click="openPeopleCountDialog(1)" -->
 			<div class="content-div aq">
 				<!-- <div class="circle-box">
 					<span>{{ statScore.hiddenDangerScore }}分</span>
@ -11,6 +12,7 @@
 					安全管理
 				</span>
 			</div>
+			<!-- @click="openPeopleCountDialog(2)" -->
 			<div class="content-div wd" >
 				<!-- <div class="circle-box">
 					<span>{{ statScore.dangerEngScore }}分</span>
@ -21,18 +23,29 @@
 					文明施工
 				</span>
 			</div>
-			<div class="content-div jy">
-				<!-- <div class="circle-box"> -->
-				<!-- <span>{{statScore}}分</span> -->
-				<!-- <span>25分</span>
+
+			<div class="content-div zn" @click="toolInfoFn('wdgc')" v-if="toolInfo.dangerousProjectFlag">
+				<!-- <div class="circle-box">
+					<span>{{ statScore.aiScore }}分</span>
 					</div> -->
-				<div id="waterJy" style="width: 80%; height: 80%; transform: translateY(-25px)"></div>
+				<div id="waterZn" style="width: 80%; height: 80%; transform: translateY(-25px)"></div>
 				<span style="transform: translateY(-50px)">
-					<!-- 安全教育 -->
-					施工支具
+					<!-- AI警报 -->
+					危大工程
 				</span>
 			</div>
-			<div class="content-div fx">
+			<div class="zn content-div3" v-else>
+				<!-- @click="openPeopleCountDialog(item.tenType)" -->
+				<div class="content-div2" v-for="item in toolInfo.dangerousProjectList" :key="item.id">
+					<div :id="`waterZn${item.id}`" style="width: 100%; height: 100%"></div>
+					<span>
+						<!-- AI警报 -->
+						{{ item.title }}
+					</span>
+				</div>
+			</div>
+
+			<div class="content-div fx" @click="toolInfoFn('gcjx')" v-if="toolInfo.engineeringMachineryFlag">
 				<!-- <div class="circle-box">
 					<span>{{ statScore.riskScore }}分</span>
 				</div> -->
@ -42,16 +55,29 @@
 					工程器械
 				</span>
 			</div>
-			<div class="content-div zn">
-				<!-- <div class="circle-box">
-					<span>{{ statScore.aiScore }}分</span>
-				</div> -->
-				<div id="waterZn" style="width: 80%; height: 80%; transform: translateY(-25px)"></div>
-				<span style="transform: translateY(-50px)">
+			<div class="content-div4" v-else>
+				<!-- @click="openPeopleCountDialog(item.tenType)" -->
+				<div class="content-div5" v-for="item in toolInfo.engineeringMachineryList" :key="item.id">
+					<div :id="`waterFx${item.id}`" style="width: 100%; height: 100%"></div>
+					<span>
 						<!-- AI警报 -->
-					危险作业
+						{{ item.title }}
 					</span>
 				</div>
+			</div>
+			<!-- @click="openPeopleCountDialog(10)" -->
+			<div class="content-div jy">
+				<!-- <div class="circle-box"> -->
+				<!-- <span>{{statScore}}分</span> -->
+				<!-- <span>25分</span>
+				</div> -->
+				<div id="waterJy" style="width: 80%; height: 80%; transform: translateY(-25px)"></div>
+				<span style="transform: translateY(-50px)">
+					<!-- 安全教育 -->
+					施工机具
+				</span>
+			</div>
+
 			<div class="count-div">
 				<div class="count-div-item">
 					<span>上月安全综合评分</span>
@ -59,23 +85,28 @@
 					<span>分</span>
 				</div>
 				<div class="count-div-item">
-					<span
-						>相较上月{{
+					<span>相较上月{{
 						statScore2.differScoreRate > 0
 						? "上升" + (statScore2.differScoreRate ? statScore2.differScoreRate : 0)
-								: "下降" + (statScore2.differScoreRate ? statScore2.differScoreRate.toString().substr(1) : 0)
+						: "下降" +
+						(statScore2.differScoreRate
+							? statScore2.differScoreRate.toString().substr(1)
+							: 0)
 					}}
-						%</span
-					>
-					<span :style="statScore2.differScoreRate > 0 ? 'color:#0db027' : 'color:#f77c7d'"
-						>{{ statScore2.differScoreRate > 0 ? "↑" : "↓" }}
+						%</span>
+					<span :style="statScore2.differScoreRate > 0 ? 'color:#0db027' : 'color:#f77c7d'">{{
+						statScore2.differScoreRate > 0 ? "↑" : "↓" }}
 					</span>
 				</div>
 			</div>
-			<div
-				:class="['score-div', statScore2.monthScore >= 80 ? 'scoreBg1' : statScore2.monthScore >= 60 ? 'scoreBg2' : 'scoreBg3']"
-				@click="openDialogData({ index: 9, title: '月度安全综合评分' })"
-			>
+			<div :class="[
+				'score-div',
+				statScore2.monthScore >= 80
+					? 'scoreBg1'
+					: statScore2.monthScore >= 60
+						? 'scoreBg2'
+						: 'scoreBg3',
+			]" @click="openDialogData({ index: 9, title: '月度安全综合评分' })">
 				<div class="score-part">
 					<span>{{ statScore2.monthScore }}</span>
 					<span>分</span>
@ -101,25 +132,37 @@
 					<span style="font-size: 12px">人员总览</span>
 				</div>
 				<div class="classify-div-item" style="width: 250px" @click="openDialogData({ index: 1, title: '' })">
-					<span style="font-size: 12px">危险特殊作业&nbsp;{{ statsDirectorateBigScreen.dangerousEngineeringRecordNum }}</span>
+					<span style="font-size: 12px">危险特殊作业&nbsp;{{
+						statsDirectorateBigScreen.dangerousEngineeringRecordNum
+					}}</span>
 				</div>
 				<div class="classify-div-item" style="width: 210px" @click="openDialogData({ index: 2, title: '' })">
 					<span style="font-size: 12px">安全教育&nbsp;{{ statsDirectorateBigScreen.workerInfoAuditRecordNum }}</span>
 				</div>
 				<div class="classify-div-item" style="width: 300px" @click="openDialogData({ index: 3, title: '' })">
-					<span style="font-size: 12px">影响进度计划因素&nbsp;{{ statsDirectorateBigScreen.taskProgressContentNum }}</span>
+					<span style="font-size: 12px">影响进度计划因素&nbsp;{{
+						statsDirectorateBigScreen.taskProgressContentNum
+					}}</span>
 				</div>
 				<div class="classify-div-item" @click="openDialogData({ index: 4, title: '风险统计' })">
-					<span style="font-size: 12px">风险统计&nbsp;{{ statsDirectorateBigScreen.securityQualityInspectionRecordNum }}</span>
+					<span style="font-size: 12px">风险统计&nbsp;{{
+						statsDirectorateBigScreen.securityQualityInspectionRecordNum
+					}}</span>
 				</div>
 				<div class="classify-div-item" @click="openDialogData({ index: 5, title: '安全隐患' })">
-					<span style="font-size: 12px">安全隐患&nbsp;{{ statsDirectorateBigScreen.securityQualityInspectionRecordNum }}</span>
+					<span style="font-size: 12px">安全隐患&nbsp;{{
+						statsDirectorateBigScreen.securityQualityInspectionRecordNum
+					}}</span>
 				</div>
 				<div class="classify-div-item" @click="openDialogData({ index: 99, title: '质量管理' })">
-					<span style="font-size: 12px">质量管理&nbsp;{{ statsDirectorateBigScreen.qualityInspectionRecordNum }}</span>
+					<span style="font-size: 12px">质量管理&nbsp;{{
+						statsDirectorateBigScreen.qualityInspectionRecordNum
+					}}</span>
 				</div>
 				<div class="classify-div-item" @click="openDialogData({ index: 6, title: 'AI警报', type: 4 })">
-					<span style="font-size: 12px">AI警报&nbsp;{{ statsDirectorateBigScreen.aiAnalyseHardWareAlarmRecordNum }}</span>
+					<span style="font-size: 12px">AI警报&nbsp;{{
+						statsDirectorateBigScreen.aiAnalyseHardWareAlarmRecordNum
+					}}</span>
 				</div>
 			</div>
 			<div class="background-title">
@ -131,14 +174,23 @@

 <script setup lang="ts">
 import Card from "@/components/card.vue";
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted, watch, reactive, nextTick } from "vue";
 import { GlobalStore } from "@/stores";
 import { ElMessage } from "element-plus";
 import * as echarts from "echarts";
 import "echarts-liquidfill";
-
-import { editProjectInfo, eidtProjectShowConfig, queryBySnData } from "@/api/modules/projectOverview";
-import { getStatsDirectorateBigScreenApi, getStatScoreApi, getFiveScoresApi } from "@/api/modules/agjtCommandApi";
+import moment from "moment";
+import {
+	editProjectInfo,
+	eidtProjectShowConfig,
+	queryBySnData,
+} from "@/api/modules/projectOverview";
+import {
+	getStatsDirectorateBigScreenApi,
+	getStatScoreApi,
+	getFiveScoresApi,
+	getScoresApi,
+} from "@/api/modules/agjtCommandApi";
 import { selectLiveVideoListApi } from "@/api/modules/video";
 import ckplayerComp from "./ckplayerComp.vue";
 import { COMPANY } from "@/config/config";
@ -152,17 +204,237 @@ type Props = {
 };
 // withDefaults 定义默认值(传入的数据类型同默认值)
 const props = withDefaults(defineProps<Props>(), {
-	projectData: {}
+	projectData: {},
 });
+const toolInfo = reactive({
+	dangerousProjectFlag: true,
+	dangerousProjectList: [
+		{
+			id: 1,
+			title: "脚手架",
+			tenType: 3
+		},
+		{
+			id: 2,
+			title: "基坑工程",
+			tenType: 5
+		},
+		{
+			id: 3,
+			title: "模版支架",
+			tenType: 6
+		},
+		{
+			id: 4,
+			title: "物料提升机",
+			tenType: 8
+		},
+		{
+			id: 5,
+			title: "塔式起重机",
+			tenType: 9
+		}
+	],
+	engineeringMachineryFlag: true,
+	engineeringMachineryList: [
+		{
+			id: 1,
+			title: "高处作业",
+			tenType: 4
+		},
+		{
+			id: 2,
+			title: "施工用电",
+			tenType: 7
+		}
+	],
+	toolName: ""
+});
+const toolInfoFn = (toolName: string) => {
+	toolInfo.toolName = toolName;
+	if (toolName == "wdgc") {
+		toolInfo.dangerousProjectFlag = false;
+		emits("openDialog", {
+			index: 15,
+			type: 6,
+			title: "检查评分表"
+		});
+		nextTick(() => {
+			drawZnWater1();
+		});
+	} else if (toolName == "gcjx") {
+		toolInfo.engineeringMachineryFlag = false;
+		emits("openDialog", {
+			index: 15,
+			type: 6,
+			title: "检查评分表"
+		});
+		nextTick(() => {
+			drawFxWater1();
+		});
+	}
+};
+
+const dangerousProjectFlagFn = () => {
+	console.log("dangerousProjectFlag", safetyTypeScores.value);
+	if (toolInfo.toolName == "wdgc") {
+		toolInfo.dangerousProjectFlag = true;
+		nextTick(() => {
+			drawZnWater();
+		});
+	} else if (toolInfo.toolName == "gcjx") {
+		toolInfo.engineeringMachineryFlag = true;
+		nextTick(() => {
+			drawFxWater();
+		});
+	}
+};
+
+function drawZnWater1() {
+	toolInfo.dangerousProjectList.forEach((item: any) => {
+		const find = safetyTypeScores.value.find((ele: any) => ele.tenType == item.tenType);
+		type EChartsOption = echarts.EChartsOption;
+		let chartDom = document.getElementById(`waterZn${item.id}`)!;
+		let myChart = echarts.init(chartDom);
+		let option: EChartsOption;
+		// 配置项
+		option = {
+			series: [
+				{
+					type: "liquidFill", //设置图表类型
+					// data: [0.6], // 设置水位，值为0到1之间
+					data: [0.001, 0.001, 0.001, 0.001, 0.001], //设置水位，可以写多个值，用来设置多个水位
+					waveAnimation: true, //是否开启水波动画,
+					amplitude: 15, // 设置振幅，值越大波形越尖
+					waveLength: 150, //水波的长度，值越大水波越长
+					shape: "circle", //设置形状，可选为'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
+					direction: "right", //设置方向，可选为'left', 'right', 'top', 'bottom',
+					radius: "60%", // 设置图的大小  默认为50%
+					// color:['#1E90FF','#191970','#000080','#6495ED','#0000FF'] ,// 设置颜色，可以设置多个值，用来设置多个水位
+					color: ["#156ACF"], // 设置颜色，可以设置多个值，用来设置多个水位
+					center: ["50%", "50%"], //中心点的位置1E90FF
+					// animationEasing:'linear',
+					animationEasing: "easeOut",
+					outline: {
+						borderDistance: 4, // 外边框距离
+						itemStyle: {
+							borderWidth: 2, // 外边框宽度
+							borderColor: "#156ACF", // 外边框颜色
+						},
+					},
+					backgroundStyle: {
+						color: "rgba(0,0,0,0)", // 背景色
+					},
+					label: {
+						normal: {
+							formatter: function () {
+								return find.score + "分";
+							},
+							textStyle: {
+								color: "#fff",
+								insideColor: "#fff",
+								fontSize: 12,
+							},
+						},
+					},
+				},
+			],
+		};
+		// 使用配置项设置图表
+		myChart.setOption(option);
+	});
+}
+
+//绘画安全隐患治理水波图
+function drawFxWater1() {
+	toolInfo.engineeringMachineryList.forEach((item: any) => {
+		const find = safetyTypeScores.value.find((ele: any) => ele.tenType == item.tenType);
+		type EChartsOption = echarts.EChartsOption;
+		let chartDom = document.getElementById(`waterFx${item.id}`)!;
+		let myChart = echarts.init(chartDom);
+		let option: EChartsOption;
+		// 配置项
+		option = {
+			series: [
+				{
+					type: "liquidFill", //设置图表类型
+					// data: [0.6], // 设置水位，值为0到1之间
+					data: [0.001, 0.001, 0.001, 0.001, 0.001], //设置水位，可以写多个值，用来设置多个水位
+					waveAnimation: true, //是否开启水波动画,
+					amplitude: 15, // 设置振幅，值越大波形越尖
+					waveLength: 150, //水波的长度，值越大水波越长
+					shape: "circle", //设置形状，可选为'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
+					direction: "right", //设置方向，可选为'left', 'right', 'top', 'bottom',
+					radius: "60%", // 设置图的大小  默认为50%
+					// color:['#1E90FF','#191970','#000080','#6495ED','#0000FF'] ,// 设置颜色，可以设置多个值，用来设置多个水位
+					color: ["#156ACF"], // 设置颜色，可以设置多个值，用来设置多个水位
+					center: ["50%", "50%"], //中心点的位置1E90FF
+					// animationEasing:'linear',
+					animationEasing: "easeOut",
+					outline: {
+						borderDistance: 4, // 外边框距离
+						itemStyle: {
+							borderWidth: 2, // 外边框宽度
+							borderColor: "#156ACF", // 外边框颜色
+						},
+					},
+					backgroundStyle: {
+						color: "rgba(0,0,0,0)", // 背景色
+					},
+					label: {
+						normal: {
+							formatter: function () {
+								return find.score + "分";
+							},
+							textStyle: {
+								color: "#fff",
+								insideColor: "#fff",
+								fontSize: 12,
+							},
+						},
+					},
+				},
+			],
+		};
+		// 使用配置项设置图表
+		myChart.setOption(option);
+	});
+}
+
 // 项目信息
 const projectData = ref({} as any);
+const safetyTypeScores = ref([] as any);
+// 获取月度安全综合评分（十种）
+const getScores = async () => {
+	let requestData: any = {
+		projectSn: store.sn,
+		month: moment(new Date()).format("YYYY-MM"),
+	};
+	const res: any = await getScoresApi(requestData);
+	safetyTypeScores.value = res.result.safetyTypeScores;
+	console.log(safetyTypeScores);
+};
+// 弹窗
+const openPeopleCountDialog = (tenType: any) => {
+	console.log(safetyTypeScores.value);
+	emits("openDialog", {
+		index: 14,
+		type: 4,
+		title: "检查评分表",
+		tableItem: {
+			tenType,
+		},
+		currentDate: moment(new Date()).format("YYYY-MM"),
+	});
+	// console.log(partyBuildRef.value);
+};
 // 打开弹窗
 const openDialogData = (obj: any) => {
 	emits("openDialog", obj);
 };
 watch(
 	() => props.projectData,
-	newVal => {
+	(newVal) => {
 		if (newVal) {
 			// props.xData = newVal;
 			projectData.value = newVal;
@ -215,8 +487,8 @@ function drawAqWater() {
 					borderDistance: 4, // 外边框距离
 					itemStyle: {
 						borderWidth: 2, // 外边框宽度
-						borderColor: "#156ACF" // 外边框颜色
-					}
+						borderColor: "#156ACF", // 外边框颜色
+					},
 				},
 				//  // 水波样式
 				//  itemStyle:{
@ -228,7 +500,7 @@ function drawAqWater() {
 				//     shadowOffsetY:10,                 // 阴影竖直偏移量
 				// },
 				backgroundStyle: {
-					color: "rgba(0,0,0,0)" // 背景色
+					color: "rgba(0,0,0,0)", // 背景色
 				},
 				label: {
 					normal: {
@ -239,12 +511,12 @@ function drawAqWater() {
 							//   color: "#6495ED", //蓝色
 							color: "#fff",
 							insideColor: "#fff",
-							fontSize: 16
-						}
-					}
-				}
-			}
-		]
+							fontSize: 16,
+						},
+					},
+				},
+			},
+		],
 	};
 	// 使用配置项设置图表
 	myChart.setOption(option);
@ -294,8 +566,8 @@ function drawWdWater() {
 					borderDistance: 4, // 外边框距离
 					itemStyle: {
 						borderWidth: 2, // 外边框宽度
-						borderColor: "#156ACF" // 外边框颜色
-					}
+						borderColor: "#156ACF", // 外边框颜色
+					},
 				},
 				//  // 水波样式
 				//  itemStyle:{
@ -307,7 +579,7 @@ function drawWdWater() {
 				//     shadowOffsetY:10,                 // 阴影竖直偏移量
 				// },
 				backgroundStyle: {
-					color: "rgba(0,0,0,0)" // 背景色
+					color: "rgba(0,0,0,0)", // 背景色
 				},
 				label: {
 					normal: {
@ -317,12 +589,12 @@ function drawWdWater() {
 						textStyle: {
 							color: "#fff",
 							insideColor: "#fff",
-							fontSize: 16
-						}
-					}
-				}
-			}
-		]
+							fontSize: 16,
+						},
+					},
+				},
+			},
+		],
 	};
 	// 使用配置项设置图表
 	myChart.setOption(option);
@ -372,8 +644,8 @@ function drawJyWater() {
 					borderDistance: 4, // 外边框距离
 					itemStyle: {
 						borderWidth: 2, // 外边框宽度
-						borderColor: "#156ACF" // 外边框颜色
-					}
+						borderColor: "#156ACF", // 外边框颜色
+					},
 				},
 				//  // 水波样式
 				//  itemStyle:{
@ -385,23 +657,23 @@ function drawJyWater() {
 				//     shadowOffsetY:10,                 // 阴影竖直偏移量
 				// },
 				backgroundStyle: {
-					color: "rgba(0,0,0,0)" // 背景色
+					color: "rgba(0,0,0,0)", // 背景色
 				},
 				label: {
 					normal: {
 						formatter: function () {
 							// return statScore2.value + "分"
-							return statScore2.value.thisMonthScores.sgzj + "分";
+							return statScore2.value.thisMonthScores.sgjj + "分";
 						},
 						textStyle: {
 							color: "#fff",
 							insideColor: "#fff",
-							fontSize: 16
-						}
-					}
-				}
-			}
-		]
+							fontSize: 16,
+						},
+					},
+				},
+			},
+		],
 	};
 	// 使用配置项设置图表
 	myChart.setOption(option);
@ -451,8 +723,8 @@ function drawFxWater() {
 					borderDistance: 4, // 外边框距离
 					itemStyle: {
 						borderWidth: 2, // 外边框宽度
-						borderColor: "#156ACF" // 外边框颜色
-					}
+						borderColor: "#156ACF", // 外边框颜色
+					},
 				},
 				//  // 水波样式
 				//  itemStyle:{
@ -464,22 +736,22 @@ function drawFxWater() {
 				//     shadowOffsetY:10,                 // 阴影竖直偏移量
 				// },
 				backgroundStyle: {
-					color: "rgba(0,0,0,0)" // 背景色
+					color: "rgba(0,0,0,0)", // 背景色
 				},
 				label: {
 					normal: {
 						formatter: function () {
-							return statScore2.value.thisMonthScores.gcqx + "分";
+							return (statScore2.value.thisMonthScores.gczy + statScore2.value.thisMonthScores.sgyd) + "分";
 						},
 						textStyle: {
 							color: "#fff",
 							insideColor: "#fff",
-							fontSize: 16
-						}
-					}
-				}
-			}
-		]
+							fontSize: 16,
+						},
+					},
+				},
+			},
+		],
 	};
 	// 使用配置项设置图表
 	myChart.setOption(option);
@ -529,8 +801,8 @@ function drawZnWater() {
 					borderDistance: 4, // 外边框距离
 					itemStyle: {
 						borderWidth: 2, // 外边框宽度
-						borderColor: "#156ACF" // 外边框颜色
-					}
+						borderColor: "#156ACF", // 外边框颜色
+					},
 				},
 				//  // 水波样式
 				//  itemStyle:{
@ -542,22 +814,22 @@ function drawZnWater() {
 				//     shadowOffsetY:10,                 // 阴影竖直偏移量
 				// },
 				backgroundStyle: {
-					color: "rgba(0,0,0,0)" // 背景色
+					color: "rgba(0,0,0,0)", // 背景色
 				},
 				label: {
 					normal: {
 						formatter: function () {
-							return statScore2.value.thisMonthScores.wxzy + "分";
+							return (statScore2.value.thisMonthScores.jsj + statScore2.value.thisMonthScores.jkgc + statScore2.value.thisMonthScores.mbzj + statScore2.value.thisMonthScores.wltsj + statScore2.value.thisMonthScores.tsqzj) + "分";
 						},
 						textStyle: {
 							color: "#fff",
 							insideColor: "#fff",
-							fontSize: 16
-						}
-					}
-				}
-			}
-		]
+							fontSize: 16,
+						},
+					},
+				},
+			},
+		],
 	};
 	// 使用配置项设置图表
 	myChart.setOption(option);
@ -579,17 +851,17 @@ const showChangeVideo = ref(false as any);
 let topText2 = ref([
 	{ id: 1, title: "现场视频", isActive: true },
 	{ id: 2, title: "宣传视频", isActive: false },
-	{ id: 3, title: "效果图", isActive: false }
+	{ id: 3, title: "效果图", isActive: false },
 ]);
 let topText = ref([
 	// { id: 1, title: "现场视频", isActive: true },
 	{ id: 2, title: "宣传视频", isActive: false },
-	{ id: 3, title: "效果图", isActive: false }
+	{ id: 3, title: "效果图", isActive: false },
 ]);
 const getVideoList = async (showLoading: boolean) => {
 	let res: any = await selectLiveVideoListApi(
 		{
-			projectSn: store.sn
+			projectSn: store.sn,
 		},
 		showLoading
 	);
@ -612,7 +884,10 @@ const getVideoList = async (showLoading: boolean) => {
 let statsDirectorateBigScreen = ref({} as any);
 //获取centerTop底部按钮显示数据
 const getStatsDirectorateBigScreen = async (showLoading: boolean) => {
-	const res = await getStatsDirectorateBigScreenApi({ projectSn: store.sn, recordStatus: 8 }, showLoading);
+	const res = await getStatsDirectorateBigScreenApi(
+		{ projectSn: store.sn, recordStatus: 8 },
+		showLoading
+	);
 	statsDirectorateBigScreen.value = res.result;
 };
 let statScore = ref({
@ -621,7 +896,7 @@ let statScore = ref({
 	aiScore: 0,
 	riskScore: 0,
 	total: 0,
-	lastMonthTotal: 0
+	lastMonthTotal: 0,
 } as any);
 const statScore2 = ref({
 	differScoreRate: 0,
@ -629,11 +904,16 @@ const statScore2 = ref({
 	monthScore: 0,
 	thisMonthScores: {
 		aqgl: 0,
-		gcqx: 0,
-		sgzj: 0,
-		wmsg: 0,
-		wxzy: 0
-	}
+		gczy: 0,
+		jkgc: 0,
+		jsj: 0,
+		mbzj: 0,
+		sgjj: 0,
+		sgyd: 0,
+		tsqzj: 0,
+		wltsj: 0,
+		wmsg: 0
+	},
 } as any);
 //获取centerTop底部按钮显示数据
 const getStatScore = async (showLoading: boolean) => {
@ -655,7 +935,7 @@ const getStatScore = async (showLoading: boolean) => {
 function boxStyle(item: any) {
 	if (item.isActive) {
 		let choiseStyle = {
-			color: "#fff"
+			color: "#fff",
 		};
 		return choiseStyle;
 	}
@ -665,7 +945,7 @@ let tabIndex = ref(1 as any);
 function activeBtn(item: any) {
 	let currentState = item.isActive;
 	if (!currentState) {
-		topText.value.forEach(el => {
+		topText.value.forEach((el) => {
 			el.isActive = false;
 		});
 		item.isActive = !currentState;
@ -678,7 +958,7 @@ const uploadFail = () => {
 	ElMessage({
 		showClose: true,
 		message: "上传失败，请重试",
-		type: "warning"
+		type: "warning",
 	});
 };

@ -686,7 +966,7 @@ const fileTypeFail = (text: any) => {
 	ElMessage({
 		showClose: true,
 		message: text,
-		type: "warning"
+		type: "warning",
 	});
 };

@ -694,7 +974,7 @@ const uploadSuccess = () => {
 	ElMessage({
 		showClose: true,
 		message: "上传成功",
-		type: "success"
+		type: "success",
 	});
 };
 // 查询效果图
@ -702,7 +982,7 @@ function getQueryBySnData(showLoading: boolean) {
 	queryBySnData(
 		{
 			projectSn: store.sn,
-			showType: 3
+			showType: 3,
 		},
 		showLoading
 	).then((res: any) => {
@ -715,15 +995,16 @@ function getQueryBySnData(showLoading: boolean) {
 function saveOrDeleteVideo(url) {
 	editProjectInfo({
 		projectSn: store.sn,
-		videoUrl: url
-	}).then(res => {
+		videoUrl: url,
+	}).then((res) => {
 		uploadSuccess(); //"上传成功"
 		projectData.value.videoUrl = url;
 	});
 }
 //将方法暴露给父组件
 defineExpose({
-	getQueryBySnData
+	getQueryBySnData,
+	dangerousProjectFlagFn
 });
 const setIntervalFn = (showLoading: boolean) => {
 	getVideoList(showLoading);
@ -732,6 +1013,7 @@ const setIntervalFn = (showLoading: boolean) => {
 	getStatScore(showLoading);
 };
 onMounted(async () => {
+	getScores();
 	setIntervalFn(false);
 	// 定时三十秒刷新
 	setInterval(() => {
@ -742,24 +1024,43 @@ onMounted(async () => {

 <style lang="scss" scoped>
 .scoreBg1 {
-	background-image: radial-gradient(circle, rgb(46, 200, 49) 0px, rgba(255, 255, 255, 0) 115px);
+	background-image: radial-gradient(circle,
+			rgb(46, 200, 49) 0px,
+			rgba(255, 255, 255, 0) 115px);
 }
+
 .scoreBg2 {
-	background-image: radial-gradient(circle, rgb(255, 175, 0) 0px, rgba(255, 255, 255, 0) 115px);
+	background-image: radial-gradient(circle,
+			rgb(255, 175, 0) 0px,
+			rgba(255, 255, 255, 0) 115px);
 }
+
 .scoreBg3 {
-	background-image: radial-gradient(circle, rgb(200, 46, 56) 0px, rgba(255, 255, 255, 0) 115px);
+	background-image: radial-gradient(circle,
+			rgb(200, 46, 56) 0px,
+			rgba(255, 255, 255, 0) 115px);
 }
+
 .scoreTextBg1 {
-	background-image: radial-gradient(circle, rgb(46, 200, 49) 0px, rgba(255, 255, 255, 0) 40px);
+	background-image: radial-gradient(circle,
+			rgb(46, 200, 49) 0px,
+			rgba(255, 255, 255, 0) 40px);
 }
+
 .scoreTextBg2 {
-	background-image: radial-gradient(circle, rgb(255, 175, 0) 0px, rgba(255, 255, 255, 0) 40px);
+	background-image: radial-gradient(circle,
+			rgb(255, 175, 0) 0px,
+			rgba(255, 255, 255, 0) 40px);
 }
+
 .scoreTextBg3 {
-	background-image: radial-gradient(circle, rgb(200, 46, 56) 0px, rgba(255, 255, 255, 0) 40px);
+	background-image: radial-gradient(circle,
+			rgb(200, 46, 56) 0px,
+			rgba(255, 255, 255, 0) 40px);
 }
+
 .centerTop {
+
 	// background-color: darkred;
 	.top-content {
 		height: 100%;
@ -803,6 +1104,42 @@ onMounted(async () => {
 			}
 		}

+		.content-div2 {
+			width: 30%;
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+		}
+
+		.content-div3 {
+			display: flex;
+			width: 80%;
+			height: 19%;
+			margin: 0 auto;
+			/* align-items: center; */
+			justify-content: center;
+			color: white;
+		}
+
+		.content-div4 {
+			display: flex;
+			width: 50%;
+			height: 19%;
+			align-items: center;
+			justify-content: center;
+			color: white;
+			position: absolute;
+			right: -5%;
+			top: 20%;
+		}
+		.content-div5 {
+			width: 30%;
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+		}
 		.aq {
 			// left: 40px;
 			// top: 180px;
@ -820,8 +1157,8 @@ onMounted(async () => {
 		.jy {
 			// left: 400px;
 			// top: 5px;
-			left: 35%;
-			top: 0%;
+			right: 0%;
+			top: 45%;
 		}

 		.fx {
@ -834,8 +1171,8 @@ onMounted(async () => {
 		.zn {
 			// right: 40px;
 			// top: 180px;
-			right: 0%;
-			top: 45%;
+			left: 35%;
+			top: 0%;
 		}

 		.count-div {
@ -871,8 +1208,10 @@ onMounted(async () => {
 			display: flex;
 			flex-direction: column;
 			align-items: center;
+
 			.score-part {
 				margin-top: 60px;
+
 				span:nth-child(1) {
 					font-size: 72px;
 				}
@ -886,6 +1225,7 @@ onMounted(async () => {
 				color: white;
 				font-size: 18px;
 			}
+
 			.scoreInner {
 				text-align: center;
 				margin-top: -10px;
@ -905,6 +1245,7 @@ onMounted(async () => {
 					height: 50px;
 					// background-color: blue;
 				}
+
 				.scoreStar {
 					// background-color: purple;
 					// margin-top: 20px;
--- a/src/views/commandScreen/commandCenter/index.vue
+++ b/src/views/commandScreen/commandCenter/index.vue
@ -5,13 +5,13 @@
 			<leftBottom class="leftBottom" @openDialog="openPeopleCountDialog"></leftBottom>
 		</div>
 		<div class="center">
-			<centerTop class="centerTop" @openDialog="openPeopleCountDialog"></centerTop>
+			<centerTop class="centerTop" ref="centerTopRef" @openDialog="openPeopleCountDialog"></centerTop>
 			<centerBottom class="centerBottom" @openDialog="openPeopleCountDialog"></centerBottom>
 		</div>
 		<div class="right">
 			<rightAll class="rightAll" @openDialog="openPeopleCountDialog"></rightAll>
 		</div>
-		<dataDialog ref="partyBuildRef"></dataDialog>
+		<dataDialog ref="partyBuildRef" @openMB="openMB"></dataDialog>
 		<div :class="{ contentsBox: true, openDialog: show, hiddenDialog: !show }">
 			<div class="topBox">
 				<div class="expand"></div>
@ -46,7 +46,6 @@ import { GlobalStore } from "@/stores";
 import dataDialog from "../dialogCompnnents/data-dialog.vue";
 import * as mqtt from "mqtt/dist/mqtt.min";
 const BASEURL = import.meta.env.VITE_API_URL;
-
 // import { getWorkerStatisticsCountApi, getProjectDetail } from "@/api/modules/projectOverview";
 import { ref, onMounted } from "vue";
 const store = GlobalStore();
@ -58,6 +57,10 @@ const partyBuildRef = ref();
 const openPeopleCountDialog = (index: any) => {
 	partyBuildRef.value.openDialog(index);
 };
+const centerTopRef = ref(null as any);
+const openMB = () => {
+	centerTopRef.value.dangerousProjectFlagFn();
+};
 const options = {
 	connectTimeout: 40000,
 	clientId: "mqttjs_" + Math.random().toString(16).substr(2, 8),
--- a/src/views/commandScreen/commandCenter/leftBottom.vue
+++ b/src/views/commandScreen/commandCenter/leftBottom.vue
@ -20,7 +20,9 @@ s
 					<div style="display: flex" v-if="totalPersonRhbRatio > 0">
 						<div class="dayRadio">{{ totalPersonRhbRatio }}%</div>
 						<div class="iconCenter">
-							<el-icon size="20" color="#1E90FF"><Top /></el-icon>
+							<el-icon size="20" color="#1E90FF">
+								<Top />
+							</el-icon>
 						</div>
 					</div>
 					<div style="display: flex" v-if="totalPersonRhbRatio == 0">
@ -30,20 +32,17 @@ s
 					<div style="display: flex" v-if="totalPersonRhbRatio < 0">
 						<div class="dayRadio">{{ Math.abs(totalPersonRhbRatio) }}%</div>
 						<div class="iconCenter">
-							<el-icon size="20" color="#8B0000"><Bottom /></el-icon>
+							<el-icon size="20" color="#8B0000">
+								<Bottom />
+							</el-icon>
 						</div>
 					</div>
 				</div>
 				<div class="line2">
 				<!-- <div :class="['line2Item', activeIndex == 0 ? 'activeTab' : '']" @click="handleTab(0)">总包出勤情况分析</div>
 						<div :class="['line2Item', activeIndex === 1 ? 'activeTab' : '']" @click="handleTab(1)">人员风险趋势分析</div> -->
-					<div
-						class="line2Item"
-						:class="{ activeTab: activeIfo.activeIndex == index }"
-						v-for="(item, index) in activeIfo.activeTitleList"
-						:key="item.id"
-						@click="handleTab(index)"
-					>
+					<div class="line2Item" :class="{ activeTab: activeIfo.activeIndex == index }"
+						v-for="(item, index) in activeIfo.activeTitleList" :key="item.id" @click="handleTab(index)">
 						{{ item.title }}
 					</div>
 				</div>
@ -64,7 +63,9 @@ s
 			</div>
 			<div class="centerBottom">
 				<div class="cbTop">
-					<div class="header"><div class="hLeft">进度情况分析</div></div>
+					<div class="header">
+						<div class="hLeft">进度情况分析</div>
+					</div>
 					<div class="content" style="backgound: black">
 						<div class="cbLine1">
 							<div style="display: flex">
@ -80,15 +81,8 @@ s
 						</div>
 						<div class="cbProcess" v-if="processList.length >= 5">
 							<!-- v-if="listData.length>0" :list="listData"  -->
-							<vue3-seamless-scroll
-								v-if="processList.length > 0"
-								:list="processList"
-								:speed="1"
-								:limitScrollNum="5"
-								:step="0.3"
-								:hover="true"
-								class="scroll"
-							>
+							<vue3-seamless-scroll v-if="processList.length > 0" :list="processList" :speed="1"
+								:limitScrollNum="5" :step="0.3" :hover="true" class="scroll">
 								<div class="pItem" v-for="(item, i) in processList" :key="i">
 									<div class="pLeft">
 										<span :class="['plInner', 'plBgc' + ((i + 1) % 12)]">
@ -103,7 +97,8 @@ s
 										</div>
 										<div class="prBottom">
 											<div class="processLineBg">
-												<div :class="['processLine', 'plBtnBgc' + ((i + 1) % 12)]" :style="{ width: item.changeAfter + '%' }">
+												<div :class="['processLine', 'plBtnBgc' + ((i + 1) % 12)]"
+													:style="{ width: item.changeAfter + '%' }">
 													<div class="processLineBtn"></div>
 												</div>
 											</div>
@ -137,7 +132,8 @@ s
 									</div>
 									<div class="prBottom">
 										<div class="processLineBg">
-											<div :class="['processLine', 'plBtnBgc' + ((i + 1) % 12)]" :style="{ width: item.changeAfter + '%' }">
+											<div :class="['processLine', 'plBtnBgc' + ((i + 1) % 12)]"
+												:style="{ width: item.changeAfter + '%' }">
 												<div class="processLineBtn"></div>
 											</div>
 										</div>
@ -384,8 +380,8 @@ function drawBar() {
 		dataZoom: [
 			{
 				type: "slider",
-				start: 0,
-				end: 40,
+				startValue: -1, // 从头开始。
+				endValue: 3, // 一次性展示几个。
 				width: "98%",
 				height: 5,
 				left: "center",
@ -413,6 +409,13 @@ function drawBar() {
 						// color: '#ff6b70' // 设置鼠标悬浮时的颜色为水红色
 						color: "#00008B" // 设置鼠标悬浮时的颜色为深蓝色
 					}
+				},
+				label: {
+					show: true,
+					position: 'top',
+					formatter: function (data) {
+						return data.value
+					}
 				}
 			}
 		],
@ -465,9 +468,34 @@ function drawBar() {
 	// window.addEventListener('resize',function(){
 	//       myChart.resize()
 	//   })
-
-	option && myChart.setOption(option);
+	dataZommY(option, myChart);
+	myChart.on("mouseover", function () {
+		console.log("移入");
+		clearTimeout(timechartes.value);
+	});
+	myChart.on("mouseout", function () {
+		console.log("鼠标移出目标元素");
+		dataZommY(option, myChart);
+	});
 }
+const timechartes = ref(null as any);
+const dataZommY = (option: any, myChart: any) => {
+	clearTimeout(timechartes.value);
+	if (xData.value.length > 5) {
+		timechartes.value = setTimeout(function () {
+			// 每次向后滚动一个，最后一个从头开始。
+			if (option.dataZoom[0].endValue == xData.value.length) {
+				option.dataZoom[0].endValue = 4;
+				option.dataZoom[0].startValue = -1;
+			} else {
+				option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
+				option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
+			}
+			option && myChart.setOption(option);
+			dataZommY(option, myChart);
+		}, 3000);
+	}
+};

 //进度数据
 let listData = ref([
@ -585,6 +613,7 @@ onMounted(async () => {
 		border-left: none;
 		border-right: none;
 		border-bottom: 1px solid #0059ff;
+
 		.hLeft {
 			width: 50%;
 			font-size: 20px;
@ -599,12 +628,14 @@ onMounted(async () => {
 	.content {
 		// background-color: darkred;
 		height: 92.5%;
+
 		.contentTop {
 			padding: 0 10px;
 			height: 50%;
 			// background-color: #fff;
 			font-size: 13px;
 			position: relative;
+
 			.line1 {
 				color: #fff;
 				padding-top: 5px;
@ -614,6 +645,7 @@ onMounted(async () => {
 				line-height: 30px;
 				height: 30px;
 				font-size: 15px;
+
 				.numberCard {
 					font-size: 15px;
 					padding: 0 8px;
@ -623,18 +655,21 @@ onMounted(async () => {
 					background: url("@/assets/images/commandScreen/number-bg.png") no-repeat;
 					background-size: 100% 100%;
 				}
+
 				.dayRadio {
 					font-size: 15px;
 					margin-left: 15px;
 					font-weight: bold;
 					color: #47bcec;
 				}
+
 				.iconCenter {
 					display: flex;
 					justify-content: center;
 					align-items: center;
 				}
 			}
+
 			.line2 {
 				padding-top: 5px;
 				display: flex;
@ -642,6 +677,7 @@ onMounted(async () => {
 				align-items: center;
 				line-height: 25px;
 				height: 25px;
+
 				.line2Item {
 					color: #fff;
 					width: 140px;
@ -651,6 +687,7 @@ onMounted(async () => {
 					background: rgb(0, 33, 116);
 					background: linear-gradient(270deg, rgba(0, 33, 116, 0.8) 0%, rgba(40, 88, 184, 0.3) 96%);
 				}
+
 				.activeTab {
 					background: rgb(0, 33, 116);
 					background: linear-gradient(270deg, rgba(0, 33, 116, 1) 0%, rgba(40, 88, 184, 1) 96%);
@ -659,6 +696,7 @@ onMounted(async () => {

 			.barContent1 {
 				height: calc(100% - 65px);
+
 				.barContent {
 					height: 100%;
 				}
@ -694,6 +732,7 @@ onMounted(async () => {
 				.content {
 					padding: 0 10px;
 					height: 90%;
+
 					// background-color: rgba($color: #fff, $alpha: 0.1);
 					.cbLine1 {
 						color: #fff;
@ -704,6 +743,7 @@ onMounted(async () => {
 						line-height: 30px;
 						height: 30px;
 						font-size: 15px;
+
 						.numberCard {
 							font-size: 15px;
 							padding: 0 8px;
@ -714,10 +754,12 @@ onMounted(async () => {
 							background-size: 100% 100%;
 						}
 					}
+
 					.cbProcess {
 						padding-top: 5px;
 						height: calc(100% - 55px);
 						overflow: hidden;
+
 						// background-color: #fff;
 						.pItem {
 							width: 100%;
@ -726,12 +768,14 @@ onMounted(async () => {
 							// background-color: #fff;
 							font-size: 13px;
 							color: #fff;
+
 							.pLeft {
 								width: 20%;
 								height: 55px;
 								display: flex;
 								justify-content: center;
 								align-items: center;
+
 								.plInner {
 									width: 80px;
 									// text-align: center;
@ -740,30 +784,37 @@ onMounted(async () => {
 									border-radius: 100px;
 								}
 							}
+
 							.pRight {
 								width: 80%;
 								height: 55px;
+
 								.prTop {
 									// background-color: darkblue;
 									display: flex;
 									justify-content: space-between;
 									height: 30px;
+
 									.prtLeft {
 										display: flex;
 										justify-content: center;
 										align-items: flex-end;
 									}
+
 									.prtRight {
 										display: flex;
 										justify-content: center;
 										align-items: flex-end;
 									}
 								}
+
 								.prBottom {
 									// background-color: purple;
 									height: 15px;
+
 									.processLineBg {
 										background-color: rgba(50, 50, 50, 0.5);
+
 										// transform: scaleX(-1);
 										.processLine {
 											margin-top: 10px;
@ -771,6 +822,7 @@ onMounted(async () => {
 											height: 5px;
 											display: flex;
 											justify-content: flex-end;
+
 											.processLineBtn {
 												width: 3px;
 												height: 9px;
@ -778,6 +830,7 @@ onMounted(async () => {
 												transform: translateY(-2px);
 											}
 										}
+
 										// .plBgc1{
 										// 	background: rgb(150,0,0);
 										// 	background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(150,0,0,1) 100%);
@ -792,11 +845,13 @@ onMounted(async () => {
 		}
 	}
 }
+
 .scroll {
 	height: 100%;
 	width: 100%;
 	overflow: hidden;
 }
+
 .notoDta {
 	top: 38%;
 	width: 50%;
@ -817,100 +872,123 @@ onMounted(async () => {
 		margin: -6% 30%;
 	}
 }
+
 .plBgc1 {
 	background: rgb(139, 0, 0);
 	background: linear-gradient(90deg, rgba(139, 0, 0, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
 }
+
 .plBtnBgc1 {
 	background: rgb(139, 0, 0);
 	background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(139, 0, 0, 1) 100%);
 }
+
 .plBgc2 {
 	background: rgb(155, 155, 0);
 	background: linear-gradient(90deg, rgba(155, 155, 0, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
 }
+
 .plBtnBgc2 {
 	background: rgb(155, 155, 0);
 	background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(155, 155, 0, 1) 100%);
 }
+
 .plBgc3 {
 	background: rgb(0, 0, 139);
 	background: linear-gradient(90deg, rgba(0, 0, 139, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
 }
+
 .plBtnBgc3 {
 	background: rgb(0, 0, 139);
 	background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(0, 0, 139, 1) 100%);
 }
+
 .plBgc4 {
 	background: rgb(139, 0, 139);
 	background: linear-gradient(90deg, rgba(139, 0, 139, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
 }
+
 .plBtnBgc4 {
 	background: rgb(139, 0, 139);
 	background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(139, 0, 139, 1) 100%);
 }
+
 .plBgc5 {
 	background: rgb(72, 61, 139);
 	background: linear-gradient(90deg, rgba(72, 61, 139, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
 }
+
 .plBtnBgc5 {
 	background: rgb(72, 61, 139);
 	background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(72, 61, 139, 1) 100%);
 }
+
 .plBgc6 {
 	background: rgb(0, 206, 209);
 	background: linear-gradient(90deg, rgba(0, 206, 209, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
 }
+
 .plBtnBgc6 {
 	background: rgb(0, 206, 209);
 	background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(0, 206, 209, 1) 100%);
 }
+
 .plBgc7 {
 	background: rgb(47, 79, 79);
 	background: linear-gradient(90deg, rgba(47, 79, 79, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
 }
+
 .plBtnBgc7 {
 	background: rgb(47, 79, 79);
 	background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(47, 79, 79, 1) 100%);
 }
+
 .plBgc8 {
 	background: rgb(0, 100, 0);
 	background: linear-gradient(90deg, rgba(0, 100, 0, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
 }
+
 .plBtnBgc8 {
 	background: rgb(0, 100, 0);
 	background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(0, 100, 0, 1) 100%);
 }
+
 .plBgc9 {
 	background: rgb(189, 183, 107);
 	background: linear-gradient(90deg, rgba(189, 183, 107, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
 }
+
 .plBtnBgc9 {
 	background: rgb(189, 183, 107);
 	background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(189, 183, 107, 1) 100%);
 }
+
 .plBgc10 {
 	background: rgb(255, 140, 0);
 	background: linear-gradient(90deg, rgba(255, 140, 0, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
 }
+
 .plBtnBgc10 {
 	background: rgb(255, 140, 0);
 	background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(255, 140, 0, 1) 100%);
 }
+
 .plBgc11 {
 	background: rgb(233, 150, 122);
 	background: linear-gradient(90deg, rgba(233, 150, 122, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
 }
+
 .plBtnBgc11 {
 	background: rgb(233, 150, 122);
 	background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(233, 150, 122, 1) 100%);
 }
+
 .plBgc0 {
 	background: rgb(0, 139, 139);
 	background: linear-gradient(90deg, rgba(0, 139, 139, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
 }
+
 .plBtnBgc0 {
 	background: rgb(0, 139, 139);
 	background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(0, 139, 139, 1) 100%);
-}
-</style>
+}</style>
--- a/src/views/commandScreen/dialogCompnnents/data-dialog.vue
+++ b/src/views/commandScreen/dialogCompnnents/data-dialog.vue
@ -1,5 +1,5 @@
 <template>
-	<div class="list-detail" v-if="showDialog && mapsDetail.length == 0">
+	<div class="list-detail" :class="{'opacity_0': postData.type == 6}" @click="closeDialog2" v-if="showDialog && mapsDetail.length == 0">
 		<div
 			:class="
 				postData.type == 1
@ -12,6 +12,8 @@
 					? 'dialog-content-ai'
 					: postData.type == 5
 					? 'dialog-content-table'
+					: postData.type == 6
+					? 'dialog-content-mb'
 					: 'dialog-content-more'
 			"
 			:style="
@ -152,7 +154,7 @@ import memberAllShow from "./member-all-show.vue";
 import memberMoreList from "./member-more-list.vue";
 import monthSafeScoreDetail from "./month-safe-score-detail.vue";
 import { getAssetsFile } from "@/utils/util"; //兄弟组件传值
-
+const emits = defineEmits(["openMB"]);
 // import { GlobalStore } from "@/stores";
 let showDialog = ref(false as any);
 const showIndex = ref(0);
@ -190,6 +192,15 @@ const closeDialog = () => {
 	showDialog.value = false;
 	postData.value = {};
 };
+const closeDialog2 = () => {
+	console.log(postData);
+	if (postData.value.type == 6) {
+		console.log(12345);
+		showDialog.value = false;
+		// postData.value = {};
+		emits("openMB");
+	}
+};
 const closeDialog1 = (id: string, index: number) => {
 	// const findIndex = mapsDetail.value.findIndex((item: any) => item.id == id);
 	// if (findIndex > -1) {
@ -259,6 +270,9 @@ onMounted(async () => {});
 </script>

 <style lang="scss" scoped>
+.opacity_0 {
+	opacity: 0;
+}
 audio {
 	display: inline-block !important;
 	opacity: 0 !important;