feat：新增指挥部大屏雷达图展示

src/views/commandScreen/commandCenter/centerBottom.vue

@@ -5,14 +5,21 @@
 				<div class="cbHeaderInfo">
 					<!-- <div class="cubeIcon"></div> -->
 					<div class="cLeft title-tabs">
-						<div class="title-color">应急处置（近七天）</div>
+						<div
-						<div>事故风险预测趋势</div>
+							:class="{ 'title-color': activeIfo.activeIndex == index }"
+							v-for="(item, index) in activeIfo.activeTitleList"
+							:key="item.id"
+							@click="handleTab(index)"
+						>
+							{{ item.title }}
+						</div>
+						<!-- <div></div> -->
 					</div>
 				</div>
 				<div class="cbHeaderLine" style="margin-top: 1%"></div>
 			</div>
-			<div class="ctContent" style="margin-top: 1%; display: flex">
+			<div class="ctContent" style="display: flex">
-				<div style="width: 50%; position: relative">
+				<div style="width: 55%; position: relative" v-if="activeIfo.activeIndex == 0">
 					<div id="eacherMess" style="width: 100%; height: 100%"></div>
 					<div class="right-dap" @click="onPageMess" v-if="dataListAlarm.length != 0"></div>
 					<div class="notoDta" v-if="dataListAlarm.length == 0">
@@ -20,7 +27,10 @@
 						<p>暂无数据</p>
 					</div>
 				</div>
-				<div style="width: 50%; position: relative">
+				<div style="width: 55%; position: relative" v-else-if="activeIfo.activeIndex == 1">
+					<radarMapOption @openRadarDialog="openDialogData" :randerInfo="randerInfo" />
+				</div>
+				<div style="width: 45%; position: relative">
 					<div id="eacherMessCount" style="width: 100%; height: 100%"></div>
 					<div class="notoDta" v-if="messCountType.code != 200">
 						<img src="@/assets/images/noData.png" alt="" />
@@ -145,6 +155,7 @@
 </template>
 
 <script setup lang="ts">
+import radarMapOption from "@/views/commandScreen/components/radarMapOption.vue";
 import { getNoticeListApi } from "@/api/modules/projectOverview";
 import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
 // import Card from "@/components/card.vue";
@@ -155,34 +166,92 @@ import { GlobalStore } from "@/stores";
 const store = GlobalStore();
 
 let listData = ref([]);
+const activeIfo = reactive({
+	activeIndex: 0,
+	activeTitleList: [
+		{
+			id: 1,
+			title: "应急处置（近七天）"
+		},
+		{ id: 2, title: "事故风险预测趋势" }
+	]
+});
+const randerInfo = reactive({
+	id: "radarMap2",
+	isLegend: "right",
+	radarCenter: ["34%", "50%"],
+	radius: "63%",
+	dataList: [
+		{
+			value: [4200, 3000, 20000, 35000, 50000],
+			name: "项目事故风险概率预测"
+			// areaStyle: {}
+		}
+	],
+	indicator: [
+		{ name: "恶劣天气占比", max: 6500 },
+		{ name: "人员风险概率", max: 16000 },
+		{ name: "特殊作业风险概率", max: 30000 },
+		{ name: "月度安全评分", max: 38000 },
+		{ name: "隐患未整改占比", max: 52000 }
+	],
+	titleInfo: {
+		titleLeft: "未来三天事故风险概率预测",
+		titleRight: "查看各企业应急事故风险概率预测",
+		percentage: 80
+	}
+});
+//切换tab
+const handleTab = (val: number) => {
+	activeIfo.activeIndex = val;
+	if (activeIfo.activeIndex == 0) {
+		getCountAlarmNumByEnterprise(false);
+	}
+};
+const emits = defineEmits(["openDialog"]);
+
+// 打开弹窗
+const openDialogData = () => {
+	console.log("我打开了!!!!!!!!!!11");
+	const resultInfo = {
+		index: 11,
+		title: "总包单位应急事故概率分析",
+		radarType: 2
+	};
+	emits("openDialog", resultInfo);
+};
 
 const getNoticeList = async (showLoading: boolean) => {
 	// const res: any = await getNoticeListApi({ projectSn: store.sn, type: 10, pageNo: 1, pageSize: 99999, });
 	// const res: any = await getNoticeListApi({ isBigScreen: 1, type: 32 }); // 公告
-	const res: any = await getNoticeListApi({ orderBy: 2, projectSn: store.sn, status:60 }, showLoading);
+	const res: any = await getNoticeListApi({ orderBy: 2, projectSn: store.sn, status: 60 }, showLoading);
 
 	// listData.value = res.result.records;
 	// listData.value = res.result.page.records;
 	listData.value = res.result.page.records.map((item: any) => {
-		let statusMsg1 = item.status == 2 ? "未整改":
+		let statusMsg1 = item.status == 2 ? "未整改" : item.status == 3 ? "未复查" : item.status == 4 ? "未核验" : "";
-						item.status == 3 ? "未复查":
+		// item.status == 5 ? "合格":
-						item.status == 4 ? "未核验":""
+		// item.status == 6 ? "已撤回":
-						// item.status == 5 ? "合格":
+		// item.status == 7 ? "超期未整改":""
-						// item.status == 6 ? "已撤回":
+		let statusMsg2 = item.status == 2 ? "整改！" : item.status == 3 ? "复查！" : item.status == 4 ? "核验！" : "";
-						// item.status == 7 ? "超期未整改":""
+		// item.status == 5 ? "合格":
-		let statusMsg2 = item.status == 2 ? "整改！":
+		// item.status == 6 ? "已撤回":
-						item.status == 3 ? "复查！":
+		// item.status == 7 ? "整改！":""
-						item.status == 4 ? "核验！":""
+		let tempMsg =
-						// item.status == 5 ? "合格":
+			item.enterpriseName +
-						// item.status == 6 ? "已撤回":
+			"的" +
-						// item.status == 7 ? "整改！":""
+			item.regionName +
-		let tempMsg = item.enterpriseName + "的" + item.regionName + "责任区域内有一条" + item.dangerItemContent + "的隐患" 
+			"责任区域内有一条" +
-				+ statusMsg1 + "，请注意监督" + statusMsg2
+			item.dangerItemContent +
+			"的隐患" +
+			statusMsg1 +
+			"，请注意监督" +
+			statusMsg2;
 		return {
-			msg:tempMsg,
+			msg: tempMsg,
-			payload: JSON.stringify({status:item.status, level:item.level, time:item.inspectTime,overTime:item.overTime})
+			payload: JSON.stringify({ status: item.status, level: item.level, time: item.inspectTime, overTime: item.overTime })
-		}
+		};
-	})
+	});
 	// listData.value.push({
 	// 	accountId:"1779721457571291137",
 	// 	id:"1789601398432559107",
@@ -194,7 +263,6 @@ const getNoticeList = async (showLoading: boolean) => {
 	// 	title: "大屏通知",
 	// 	type: "31",
 	// })
-
 };
 const dataListAlarm = ref([]);
 const pageInfo = reactive({
@@ -403,7 +471,7 @@ function Pie() {
 const messCountType = ref({
 	count: 0,
 	data: [],
-	code: 0
+	code: 200
 });
 function getMessCountEchart() {
 	let echartsTest = echarts.init(document.getElementById("eacherMessCount"));
@@ -633,10 +701,13 @@ function getMessCountEchart() {
 }
 
 const getMessCountEchartType = async (showLoading: boolean) => {
-	const res: any = await getCountEmergencyTypedApi({
+	const res: any = await getCountEmergencyTypedApi(
-		projectSn: store.sn,
+		{
-		type: 1
+			projectSn: store.sn,
-	},showLoading);
+			type: 1
+		},
+		showLoading
+	);
 	messCountType.value.data = res.result.data.map((item: any) => {
 		return {
 			...item,
@@ -656,10 +727,14 @@ const getMessCountEchartType = async (showLoading: boolean) => {
 };
 
 const getCountAlarmNumByEnterprise = async (showLoading: boolean) => {
-	const res: any = await getCountAlarmNumByEnterpriseApi({
+	const res: any = await getCountAlarmNumByEnterpriseApi(
-		projectSn: store.sn,
+		{
-		type: 1
+			projectSn: store.sn,
-	},showLoading);
+			type: 1
+		},
+		showLoading
+	);
+	res.result = res.result && res.result.length > 0 ? res.result : [];
 	dataListAlarm.value = res.result.reduce((prev: any[], item: any) => {
 		item.list.forEach((ele: any) => {
 			const findIndex = prev.findIndex((option: any) => option.enterpriseId == ele.enterpriseId);

src/views/commandScreen/commandCenter/index.vue

@@ -6,7 +6,7 @@
 		</div>
 		<div class="center">
 			<centerTop class="centerTop" @openDialog="openPeopleCountDialog"></centerTop>
-			<centerBottom class="centerBottom"></centerBottom>
+			<centerBottom class="centerBottom" @openDialog="openPeopleCountDialog"></centerBottom>
 		</div>
 		<div class="right">
 			<rightAll class="rightAll" @openDialog="openPeopleCountDialog"></rightAll>
@@ -177,8 +177,8 @@ onMounted(() => {
 		}
 
 		.centerBottom {
-			height: 45.85%;
+			height: 46.85%;
-			margin: 2% 0 0 0;
+			margin: 1% 0 0 0;
 		}
 	}
 

src/views/commandScreen/commandCenter/leftBottom.vue

@@ -1,4 +1,5 @@
-s<template>
+s
+<template>
 	<div class="leftBottom">
 		<div class="header">
 			<div class="hLeft">项目人员考勤</div>
@@ -34,17 +35,22 @@ s<template>
 					</div>
 				</div>
 				<div class="line2">
-					<div :class="['line2Item', activeIndex === '0' ? 'activeTab' : '']" @click="handleTab('0')">总包出勤情况分析</div>
+					<div :class="['line2Item', activeIndex == 0 ? 'activeTab' : '']" @click="handleTab(0)">总包出勤情况分析</div>
-					<div :class="['line2Item', activeIndex === '1' ? 'activeTab' : '']" @click="handleTab('1')">人员风险趋势分析</div>
+					<div :class="['line2Item', activeIndex === 1 ? 'activeTab' : '']" @click="handleTab(1)">人员风险趋势分析</div>
 				</div>
-				<div class="barContent" v-if="isFlag">
+				<div class="barContent1" v-if="activeIndex == 0">
-					<div id="bar" style="width: 98%; height: 100%" ref="bar"></div>
+					<div class="barContent" v-if="isFlag">
-				</div>
+						<div id="bar" style="width: 98%; height: 100%" ref="bar"></div>
-				<div class="cbProcess" v-if="!isFlag">
-					<div class="notoDta" v-if="projectCompanyWorkTotalList.length == 0">
-						<img src="@/assets/images/noData.png" style="margin-top: 100px" alt="" />
-						<p>暂无数据</p>
 					</div>
+					<div class="cbProcess" v-if="!isFlag">
+						<div class="notoDta" v-if="projectCompanyWorkTotalList.length == 0">
+							<img src="@/assets/images/noData.png" style="margin-top: 100px" alt="" />
+							<p>暂无数据</p>
+						</div>
+					</div>
+				</div>
+				<div class="barContent1" v-else-if="activeIndex == 1">
+					<radarMapOption @openRadarDialog="openDialogData" :randerInfo="randerInfo" />
 				</div>
 			</div>
 			<div class="centerBottom">
@@ -137,7 +143,7 @@ s<template>
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { onMounted, ref, reactive } from "vue";
 import * as echarts from "echarts";
 // import ECharts from "vue-echarts";
 import { selectQualityStatisticsApi } from "@/api/modules/projectOverview";
@@ -151,9 +157,49 @@ import type { TabsPaneContext, ElMessageBox } from "element-plus";
 import * as ElementPlusIconsVue from "@element-plus/icons-vue";
 import { GlobalStore } from "@/stores";
 import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
+import radarMapOption from "@/views/commandScreen/components/radarMapOption.vue";
 const store = GlobalStore();
+
+const randerInfo = reactive({
+	id: "radarMap1",
+	isLegend: "right",
+	radarCenter: ["34%", "50%"],
+	radius: "65%",
+	dataList: [
+		{
+			value: [4200, 3000, 20000, 35000, 50000, 18000],
+			name: "项目人员风险"
+			// areaStyle: {}
+		}
+	],
+	indicator: [
+		{ name: "高龄人员总数", max: 6500 },
+		{ name: "人员总数", max: 16000 },
+		{ name: "未闭合隐患", max: 30000 },
+		{ name: "特殊工种人员", max: 38000 },
+		{ name: "平均安全绩效评分", max: 52000 },
+		{ name: "平均培训通过率", max: 25000 }
+	],
+	titleInfo: {
+		titleLeft: "未来三天人员风险概率预测",
+		titleRight: "查看各企业人员风险概率预测",
+		percentage: 1
+	}
+});
+const emits = defineEmits(["openDialog"]);
+
+// 打开弹窗
+const openDialogData = () => {
+	console.log("我打开了!!!!!!!!!!11");
+	const resultInfo = {
+		index: 11,
+		title: "总包单位人员风险概率分析",
+		radarType: 1
+	};
+	emits("openDialog", resultInfo);
+};
 const activeName = ref("总包出勤情况分析");
-const activeIndex = ref("0" as any);
+const activeIndex = ref(0 as any);
 //出勤人员数据
 let totalPerson = ref("" as any);
 //考勤日环比
@@ -197,17 +243,20 @@ const queryAttendanceOfEachCompany = async (showLoading: boolean) => {
 		xData.value = projectCompanyWorkTotalList.value.map(item => item.enterpriseName.substring(0, 4));
 		yData.value = projectCompanyWorkTotalList.value.map(item => item.attendancePersonNum);
 		if (projectCompanyWorkTotalList.value.length > 0) {
-			isFlag = true;
+			isFlag.value = true;
 			drawBar();
 		} else {
-			isFlag = false;
+			isFlag.value = false;
 		}
 	}
 };
 
 //切换tab
-const handleTab = (val: string) => {
+const handleTab = (val: number) => {
 	activeIndex.value = val;
+	if (isFlag.value && activeIndex.value == 0) {
+		queryAttendanceOfEachCompany(false);
+	}
 };
 
 //绘画柱状图
@@ -308,9 +357,11 @@ function drawBar() {
 				if (!attendanceRhbRate) {
 					attendanceRhbRate = "--";
 				} else {
-					if(attendanceRhbRate > 0) attendanceRhbRate = "<span style='color:blue;margin-right:5px'>↑</span>"+Math.abs(attendanceRhbRate)+"%"
+					if (attendanceRhbRate > 0)
-					if(attendanceRhbRate < 0) attendanceRhbRate = "<span style='color:darkred;margin-right:5px'>↓</span>"+Math.abs(attendanceRhbRate)+"%"
+						attendanceRhbRate = "<span style='color:blue;margin-right:5px'>↑</span>" + Math.abs(attendanceRhbRate) + "%";
-					if(attendanceRhbRate == 0) attendanceRhbRate = "0%"
+					if (attendanceRhbRate < 0)
+						attendanceRhbRate = "<span style='color:darkred;margin-right:5px'>↓</span>" + Math.abs(attendanceRhbRate) + "%";
+					if (attendanceRhbRate == 0) attendanceRhbRate = "0%";
 					// attendanceRhbRate = attendanceRhbRate + "%";
 				}
 				return (
@@ -495,8 +546,12 @@ onMounted(async () => {
 					background: linear-gradient(270deg, rgba(0, 33, 116, 1) 0%, rgba(40, 88, 184, 1) 96%);
 				}
 			}
-			.barContent {
+
+			.barContent1 {
 				height: calc(100% - 65px);
+				.barContent {
+					height: 100%;
+				}
 			}
 		}
 

src/views/commandScreen/commandCenter/rightAll.vue

@@ -30,7 +30,7 @@
 					</div>
 				</div>
 				<div class="ctContent" style="position: relative">
-					<div id="echartsSafe" style="width: 100%; height: 100%;transform:translateY(-13px)"></div>
+					<div id="echartsSafe" style="width: 100%; height: 100%; transform: translateY(-13px)"></div>
 					<div class="safetext1" v-if="dataList.length != 0">状态统计（较昨日）</div>
 					<div class="safetext2" v-if="dataList.length != 0">风险统计（较昨日）</div>
 					<div class="notoDta" v-if="dataCode != 200">
@@ -56,45 +56,63 @@
 				</div>
 						</div> -->
 			<div class="contentTop contentMiddle" style="height: 27%; margin-top: 10px">
-				<leftBottom @openDialog="openDialogData"></leftBottom>
+				<leftBottom @openDialogData="openDialogData"></leftBottom>
 			</div>
 			<div class="contentTop contentBottom" style="height: 22.5%; margin-top: 10px">
 				<div class="cbHeader">
 					<div class="cbHeaderInfo">
 						<div class="cubeIcon"></div>
 						<div class="cLeft title-tabs">
-							<div class="title-color">风险走势图</div>
+							<div
-							<div>隐患风险预测趋势</div>
+								:class="{ 'title-color': activeIfo.activeIndex == index }"
+								v-for="(item, index) in activeIfo.activeTitleList"
+								:key="item.id"
+								@click="handleTab(index, 1)"
+							>
+								{{ item.title }}
+							</div>
 						</div>
 					</div>
 					<div class="cbHeaderLine"></div>
 				</div>
-				<div class="ctContent cbContent" style="margin-top: 1%; height: 78%">
+				<div v-if="activeIfo.activeIndex == 0" class="ctContent cbContent" style="margin-top: 1%; height: 78%">
 					<div id="eacherRisk" style="width: 100%; height: 100%"></div>
 					<div class="notoDta" v-if="riskList.length == 0">
 						<img src="@/assets/images/noData.png" alt="" />
 						<p>暂无数据</p>
 					</div>
 				</div>
+				<div v-else-if="activeIfo.activeIndex == 1" class="ctContent cbContent" style="height: 78%">
+					<radarMapOption @openRadarDialog="openDialogData" :randerInfo="randerInfo" />
+				</div>
 			</div>
 			<div class="contentTop contentBottom" style="margin-top: 4px">
 				<div class="cbHeader">
 					<div class="cbHeaderInfo">
 						<div class="cubeIcon"></div>
 						<div class="cLeft title-tabs">
-							<div class="title-color">特殊作业统计分析</div>
+							<div
-							<div>特殊作业风险预测趋势</div>
+								:class="{ 'title-color': activeIfo.activeIndex2 == index }"
+								v-for="(item, index) in activeIfo.activeTitleList2"
+								:key="item.id"
+								@click="handleTab(index, 2)"
+							>
+								{{ item.title }}
+							</div>
 						</div>
 					</div>
 					<div class="cbHeaderLine"></div>
 				</div>
-				<div class="ctContent" style="margin-top: 1%; height: 73%">
+				<div v-if="activeIfo.activeIndex2 == 0" class="ctContent" style="margin-top: 1%; height: 73%">
 					<div id="eacherSpecial" style="width: 100%; height: 100%"></div>
 					<div class="notoDta" v-if="specialList.length == 0">
 						<img src="@/assets/images/noData.png" alt="" />
 						<p>暂无数据</p>
 					</div>
 				</div>
+				<div v-else-if="activeIfo.activeIndex2 == 1" class="ctContent" style="height: 73%">
+					<radarMapOption :randerInfo="randerInfo2" />
+				</div>
 			</div>
 			<!-- <div class="contentBottom">
 			<div class="cbHeader">
@@ -162,9 +180,10 @@
 </template>
 
 <script setup lang="ts">
+import radarMapOption from "@/views/commandScreen/components/radarMapOption.vue";
 // import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
 // import Card from "@/components/card.vue";
-import { onMounted, ref, watch } from "vue";
+import { onMounted, ref, watch, reactive } from "vue";
 import { GlobalStore } from "@/stores";
 import leftBottom from "@/views/commandScreen/components/leftBottom.vue";
 import {
@@ -186,8 +205,99 @@ let questionTotal = ref(0 as any);
 const emits = defineEmits(["openDialog"]);
 
 // 打开弹窗
-const openDialogData = (obj: any) => {
+const openDialogData = () => {
-	emits("openDialog", obj);
+	console.log("我打开了!!!!!!!!!!11");
+	const resultInfo = {
+		index: 11,
+		title: "总包单位安全隐患概率分析",
+		radarType: 3
+	};
+	emits("openDialog", resultInfo);
+};
+
+const activeIfo = reactive({
+	activeIndex: 1,
+	activeTitleList: [
+		{
+			id: 1,
+			title: "风险走势图"
+		},
+		{ id: 2, title: "隐患风险预测趋势" }
+	],
+	activeIndex2: 0,
+	activeTitleList2: [
+		{
+			id: 1,
+			title: "特殊作业统计分析"
+		},
+		{ id: 2, title: "特殊作业风险预测趋势" }
+	]
+});
+const randerInfo = reactive({
+	id: "radarMap3",
+	isLegend: "right",
+	radarCenter: ["34%", "50%"],
+	radius: "55%",
+	dataList: [
+		{
+			value: [4200, 3000, 20000, 35000],
+			name: "项目安全隐患风险概率预测"
+			// areaStyle: {}
+		}
+	],
+	indicator: [
+		{ name: "隐患未闭合", max: 6500 },
+		{ name: "平均安全绩效评分", max: 16000 },
+		{ name: "重大、较大隐患", max: 30000 },
+		{ name: "隐患超期整改", max: 38000 }
+	],
+	titleInfo: {
+		titleLeft: "未来三天安全隐患风险概率预测",
+		titleRight: "查看各企业安全隐患风险概率预测",
+		percentage: 80
+	}
+});
+const randerInfo2 = reactive({
+	id: "radarMap4",
+	isLegend: "right",
+	radarCenter: ["34%", "50%"],
+	radius: "55%",
+	dataList: [
+		{
+			value: [4200, 3000, 20000, 35000, 6500, 6500, 18000, 18000],
+			name: "恶劣天气影响风险概率预测"
+			// areaStyle: {}
+		}
+	],
+	indicator: [
+		{ name: "动火作业", max: 6500 },
+		{ name: "高处作业", max: 16000 },
+		{ name: "盲板抽堵作业", max: 30000 },
+		{ name: "受限空间作业", max: 38000 },
+		{ name: "断路作业", max: 6500 },
+		{ name: "临时用电", max: 16000 },
+		{ name: "吊装安全作业", max: 30000 },
+		{ name: "动土作业", max: 38000 }
+	],
+	titleInfo: {
+		titleLeft: "未来三天特殊作业风险概率预测",
+		// titleRight: "查看各企业特殊作业风险概率预测",
+		percentage: 80
+	}
+});
+//切换tab
+const handleTab = (val: number, type: number) => {
+	if (type == 1) {
+		activeIfo.activeIndex = val;
+		if (activeIfo.activeIndex == 0) {
+			getInspectionRiskChart(false);
+		}
+	} else if (type == 2) {
+		activeIfo.activeIndex2 = val;
+		if (activeIfo.activeIndex2 == 0) {
+			getCountAllSpecial(false);
+		}
+	}
 };
 
 let dateRange = ref([] as any);
@@ -298,7 +408,7 @@ function drawEchart() {
 	let option = {
 		animation: false, // 取消动画
 		tooltip: {
-			trigger: "item",
+			trigger: "item"
 			// position: ['50%','50%']
 		},
 		title: {
@@ -803,43 +913,60 @@ function getSpecialEchart() {
 			},
 			// confine:true,
 			// position:['50%','50%'],
-			appendToBody:true,
+			appendToBody: true,
 			textStyle: {
 				color: "#fff",
-				fontSize: '3px'
+				fontSize: "3px"
 			},
 			// backgroundColor: "#F3F3F3",
 			extraCssText: "width:220px;white-space:pre-wrap;box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25);",
 			formatter: function (params: any) {
 				const obj = safeList[params.dataIndex];
 				// 当鼠标悬停在柱子上时，显示实际数值和百分比
-				return '<div>'+safeList[params.dataIndex].x+'</div>'+
+				return (
-				// return '<div style="display:flex;justify-content:space-between;"><div><span style="color:#5470c6;line-height:3px;font-weight:bolder;">●</span>动土安全作业：'+obj.xzGroundSafetNum+'</div>'+
+					"<div>" +
-					   '<div style="display:flex;justify-content:space-between;"><div><span style="color:#5470c6;line-height:3px;font-weight:bolder;">●</span>动土安全作业：'+obj.xzGroundSafetNum+'</div>'+
+					safeList[params.dataIndex].x +
-					   '<div><span style="color:#91cc75;line-height:3px;font-weight:bolder;">●</span>用电安全作业：'+obj.xzTemporaryElectricitySafeNum+'</div></div>'+
+					"</div>" +
-
+					// return '<div style="display:flex;justify-content:space-between;"><div><span style="color:#5470c6;line-height:3px;font-weight:bolder;">●</span>动土安全作业：'+obj.xzGroundSafetNum+'</div>'+
-					   '<div style="display:flex;justify-content:space-between;"><div><span style="color:#fac858;line-height:3px;font-weight:bolder;">●</span>高处作业作业：'+obj.xzHighJobSafeNum+'</div>'+
+					'<div style="display:flex;justify-content:space-between;"><div><span style="color:#5470c6;line-height:3px;font-weight:bolder;">●</span>动土安全作业：' +
-					   '<div><span style="color:#ee6666;line-height:3px;font-weight:bolder;">●</span>盲板抽堵作业：'+obj.xzBlindPlatePlugSafeNum+'</div></div>'+
+					obj.xzGroundSafetNum +
-
+					"</div>" +
-					   '<div style="display:flex;justify-content:space-between;"><div><span style="color:#73c0de;line-height:3px;font-weight:bolder;">●</span>动火安全作业：'+obj.xzSpecialOperationFireSafetyNum+'</div>'+
+					'<div><span style="color:#91cc75;line-height:3px;font-weight:bolder;">●</span>用电安全作业：' +
-					   '<div><span style="color:#3ba272;line-height:3px;font-weight:bolder;">●</span>断路安全作业：'+obj.xzOpenCircuitSafeNum+'</div></div>'+
+					obj.xzTemporaryElectricitySafeNum +
-
+					"</div></div>" +
-					   '<div style="display:flex;justify-content:space-between;"><div><span style="color:#fc8452;line-height:3px;font-weight:bolder;">●</span>吊装安全作业：'+obj.xzHoistSafetyWorkNum+'</div>'+
+					'<div style="display:flex;justify-content:space-between;"><div><span style="color:#fac858;line-height:3px;font-weight:bolder;">●</span>高处作业作业：' +
-					   '<div><span style="color:#9a60b4;line-height:3px;font-weight:bolder;">●</span>受限空间作业：'+obj.xzLimitSpaceSafeNum+'</div></div>';
+					obj.xzHighJobSafeNum +
+					"</div>" +
+					'<div><span style="color:#ee6666;line-height:3px;font-weight:bolder;">●</span>盲板抽堵作业：' +
+					obj.xzBlindPlatePlugSafeNum +
+					"</div></div>" +
+					'<div style="display:flex;justify-content:space-between;"><div><span style="color:#73c0de;line-height:3px;font-weight:bolder;">●</span>动火安全作业：' +
+					obj.xzSpecialOperationFireSafetyNum +
+					"</div>" +
+					'<div><span style="color:#3ba272;line-height:3px;font-weight:bolder;">●</span>断路安全作业：' +
+					obj.xzOpenCircuitSafeNum +
+					"</div></div>" +
+					'<div style="display:flex;justify-content:space-between;"><div><span style="color:#fc8452;line-height:3px;font-weight:bolder;">●</span>吊装安全作业：' +
+					obj.xzHoistSafetyWorkNum +
+					"</div>" +
+					'<div><span style="color:#9a60b4;line-height:3px;font-weight:bolder;">●</span>受限空间作业：' +
+					obj.xzLimitSpaceSafeNum +
+					"</div></div>"
+				);
 				// return `动火安全作业：${obj.xzSpecialOperationFireSafetyNum}\n盲板抽堵作业：${obj.xzBlindPlatePlugSafeNum}\n动土安全作业：${obj.xzGroundSafetNum}\n高处作业作业：${obj.xzHighJobSafeNum}\n吊装安全作业：${obj.xzHoistSafetyWorkNum}\n受限空间作业：${obj.xzLimitSpaceSafeNum}\n断路安全作业：${obj.xzOpenCircuitSafeNum}\n用电安全作业：${obj.xzTemporaryElectricitySafeNum}`;
 			}
 		},
-		legend:{
+		legend: {
-			show:true,
+			show: true,
-			itemWidth:10,
+			itemWidth: 10,
-			itemHeight:5,
+			itemHeight: 5,
 			// x:'right',
-			textStyle:{
+			textStyle: {
-				fontSize:'3px',
+				fontSize: "3px",
-				color:'#FFF'
+				color: "#FFF"
 			},
 			// x:'left',
-			data: ["动土作业", "临时用电", "高处作业", "盲板抽堵","动火作业", "断路作业", "吊装作业", "受限空间"],
+			data: ["动土作业", "临时用电", "高处作业", "盲板抽堵", "动火作业", "断路作业", "吊装作业", "受限空间"]
 			// icon: 'circle'
 		},
 		grid: {
@@ -934,140 +1061,140 @@ function getSpecialEchart() {
 		series: [
 			//动土作业
 			{
-				name:'动土作业',
+				name: "动土作业",
 				// data: safeList.map(item => item.y),
 				data: specialList.value.map((item: any) => item.xzGroundSafetNum),
 				type: "bar",
 				barWidth: "65%",
 				color: "#5470c6",
-				stack: 'total',
+				stack: "total",
 				label: {
 					show: true,
-					textStyle:{
+					textStyle: {
-						fontSize:'3px'
+						fontSize: "3px"
 					}
 				},
-				emphasis:{focus: 'series'}
+				emphasis: { focus: "series" }
 			},
 			//临时用电
 			{
-				name:'临时用电',
+				name: "临时用电",
 				// data: safeList.map(item => item.y),
 				data: specialList.value.map((item: any) => item.xzTemporaryElectricitySafeNum),
 				type: "bar",
 				barWidth: "65%",
 				color: "#91cc75",
-				stack: 'total',
+				stack: "total",
 				label: {
 					show: true,
-					textStyle:{
+					textStyle: {
-						fontSize:'3px'
+						fontSize: "3px"
 					}
 				},
-				emphasis:{focus: 'series'}
+				emphasis: { focus: "series" }
 			},
 			//高处作业
 			{
-				name:'高处作业',
+				name: "高处作业",
 				// data: safeList.map(item => item.y),
 				data: specialList.value.map((item: any) => item.xzHighJobSafeNum),
 				type: "bar",
 				barWidth: "65%",
 				color: "#fac858",
-				stack: 'total',
+				stack: "total",
 				label: {
 					show: true,
-					textStyle:{
+					textStyle: {
-						fontSize:'3px'
+						fontSize: "3px"
 					}
 				},
-				emphasis:{focus: 'series'}
+				emphasis: { focus: "series" }
 			},
 			//盲板抽堵
 			{
-				name:'盲板抽堵',
+				name: "盲板抽堵",
 				// data: safeList.map(item => item.y),
 				data: specialList.value.map((item: any) => item.xzBlindPlatePlugSafeNum),
 				type: "bar",
 				barWidth: "65%",
 				color: "#ee6666",
-				stack: 'total',
+				stack: "total",
 				label: {
 					show: true,
-					textStyle:{
+					textStyle: {
-						fontSize:'3px'
+						fontSize: "3px"
 					}
 				},
-				emphasis:{focus: 'series'}
+				emphasis: { focus: "series" }
 			},
 			//动火作业
 			{
-				name:'动火作业',
+				name: "动火作业",
 				// data: safeList.map(item => item.y),
 				data: specialList.value.map((item: any) => item.xzSpecialOperationFireSafetyNum),
 				type: "bar",
 				barWidth: "65%",
 				color: "#73c0de",
-				stack: 'total',
+				stack: "total",
 				label: {
 					show: true,
-					textStyle:{
+					textStyle: {
-						fontSize:'3px'
+						fontSize: "3px"
 					}
 				},
-				emphasis:{focus: 'series'}
+				emphasis: { focus: "series" }
 			},
 			//断路作业
 			{
-				name:'断路作业',
+				name: "断路作业",
 				// data: safeList.map(item => item.y),
 				data: specialList.value.map((item: any) => item.xzOpenCircuitSafeNum),
 				type: "bar",
 				barWidth: "65%",
 				color: "#3ba272",
-				stack: 'total',
+				stack: "total",
 				label: {
 					show: true,
-					textStyle:{
+					textStyle: {
-						fontSize:'3px'
+						fontSize: "3px"
 					}
 				},
-				emphasis:{focus: 'series'}
+				emphasis: { focus: "series" }
 			},
 			//吊装作业
 			{
-				name:'吊装作业',
+				name: "吊装作业",
 				// data: safeList.map(item => item.y),
 				data: specialList.value.map((item: any) => item.xzHoistSafetyWorkNum),
 				type: "bar",
 				barWidth: "65%",
 				color: "#fc8452",
-				stack: 'total',
+				stack: "total",
 				label: {
 					show: true,
-					textStyle:{
+					textStyle: {
-						fontSize:'3px'
+						fontSize: "3px"
 					}
 				},
-				emphasis:{focus: 'series'}
+				emphasis: { focus: "series" }
 			},
 			//受限空间
 			{
-				name:'受限空间',
+				name: "受限空间",
 				// data: safeList.map(item => item.y),
 				data: specialList.value.map((item: any) => item.xzLimitSpaceSafeNum),
 				type: "bar",
 				barWidth: "65%",
 				color: "#9a60b4",
-				stack: 'total',
+				stack: "total",
 				label: {
 					show: true,
-					textStyle:{
+					textStyle: {
-						fontSize:'3px'
+						fontSize: "3px"
 					}
 				},
-				emphasis:{focus: 'series'}
+				emphasis: { focus: "series" }
-			},
+			}
 		]
 	};
 	echartsTest.setOption(option, true);
@@ -1651,7 +1778,7 @@ onMounted(async () => {
 		display: flex;
 		// align-items: center;
 		justify-content: space-between;
-		padding: 20px 20px;
+		padding: 10px 20px;
 		border-bottom: 1px solid #0059ff;
 
 		.hLeft {
@@ -1666,12 +1793,14 @@ onMounted(async () => {
 
 		.hRight {
 			width: 50%;
+			display: flex;
+			align-items: center;
 		}
 	}
 
 	.content {
 		padding: 0 20px;
-		height: calc(100% - 100px);
+		height: calc(100% - 80px);
 
 		.contentTop {
 			margin-top: 10px;

src/views/commandScreen/components/radarMapOption.vue

@@ -0,0 +1,182 @@
+<template>
+	<div class="radarMapOption">
+		<div class="header">
+			<div style="display: flex">
+				<span>{{ props.randerInfo.titleInfo.titleLeft }}:</span>
+				<div class="numberCard" v-for="(item, i) in props.randerInfo.titleInfo.percentage.toString()" :key="i">
+					{{ item }}
+				</div>
+				<span style="margin-left: 5px">%</span>
+			</div>
+			<div
+				v-if="props.randerInfo.titleInfo.titleRight"
+				style="display: flex; align-items: center; cursor: pointer"
+				@click="onRadarDialog()"
+			>
+				<span style="margin-left: 15px; color: #47bcec">{{ props.randerInfo.titleInfo.titleRight }}</span>
+				<div class="radar-right"></div>
+			</div>
+		</div>
+		<div class="content">
+			<div :id="props.randerInfo.id" style="width: 98%; height: 100%" ref="radarMap"></div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from "vue";
+import * as echarts from "echarts";
+// import { GlobalStore } from "@/stores";
+// const store = GlobalStore();
+const emits = defineEmits(["openRadarDialog"]);
+const props = defineProps({
+	randerInfo: {
+		type: Object,
+		// eslint-disable-next-line vue/require-valid-default-prop
+		default: {}
+	}
+});
+
+function radarMapEchart() {
+	let echartsTest = echarts.init(document.getElementById(props.randerInfo.id) as any);
+	let isTooltip =
+		props.randerInfo.indicator.length > 7
+			? {
+					extraCssText: "width:300px;white-space:pre-wrap;box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25);",
+					formatter: function (params: any) {
+						// const obj = safeList[params.dataIndex];
+
+						const textHTML = params.value
+							.map((item: any, index: number) => {
+								let htmlobj = "";
+								if (index == 0) {
+									htmlobj = "<div>" + params.name + "</div>";
+								}
+								if (index % 2 == 0) {
+									htmlobj =
+										htmlobj +
+										'<div style="display:flex;justify-content:space-between;"><div>' +
+										props.randerInfo.indicator[index].name +
+										"：" +
+										item +
+										"</div>";
+								} else {
+									htmlobj = "<div>" + props.randerInfo.indicator[index].name + "：" + item + "</div></div>";
+								}
+								return htmlobj;
+							})
+							.join("");
+						console.log(11111111, textHTML);
+						return textHTML;
+					}
+			  }
+			: {};
+	let isLegend =
+		props.randerInfo.isLegend == "right"
+			? {
+					right: "0%",
+					top: "25%",
+					align: "left",
+					position: "inside"
+			  }
+			: { top: "2%" };
+	let option = {
+		legend: {
+			...isLegend,
+			textStyle: {
+				color: "#AAAAAA",
+				fontSize: 10
+			},
+			itemWidth: 20,
+			itemHeight: 10,
+			data: props.randerInfo.dataList.map((item: any) => item.name)
+		},
+		color: ["#4992FF"],
+		tooltip: {
+			trigger: "item",
+			confine: true,
+			...isTooltip
+		},
+		radar: {
+			// shape: 'circle',
+			radius: props.randerInfo.radius ? props.randerInfo.radius : "75%",
+			center: props.randerInfo.radarCenter,
+			indicator: props.randerInfo.indicator,
+			splitLine: {
+				lineStyle: {
+					color: "#AAAAAA"
+				}
+			},
+			axisName: {
+				color: "#AAAAAA",
+				fontSize: 10
+			},
+			splitArea: {
+				areaStyle: {
+					color: ["#3F3C54", "#373551"],
+					shadowColor: "rgba(0, 0, 0, 0.2)",
+					shadowBlur: 10
+				}
+			}
+		},
+		series: [
+			{
+				name: "Budget vs spending",
+				type: "radar",
+				data: props.randerInfo.dataList
+			}
+		]
+	};
+	echartsTest.setOption(option, true);
+	window.addEventListener("resize", () => {
+		echartsTest.resize();
+	});
+}
+
+const onRadarDialog = () => {
+	console.log("我被点击了!!!");
+	emits("openRadarDialog");
+};
+
+onMounted(async () => {
+	radarMapEchart();
+});
+</script>
+
+<style lang="scss" scoped>
+.radarMapOption {
+	width: 100%;
+	height: 100%;
+	.header {
+		color: #fff;
+		padding-top: 5px;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		line-height: 30px;
+		height: 30px;
+		font-size: 11px;
+
+		.numberCard {
+			font-size: 12px;
+			padding: 0 8px;
+			margin-left: 3px;
+			font-weight: bold;
+			color: #47bcec;
+			background: url("@/assets/images/commandScreen/number-bg.png") no-repeat;
+			background-size: 100% 100%;
+		}
+
+		.radar-right {
+			width: 32px;
+			height: 28px;
+			margin-left: 6px;
+			background: url("@/assets/images/commandScreen/radar-right.png") no-repeat;
+			background-size: 100% 100%;
+		}
+	}
+	.content {
+		height: calc(100% - 30px);
+	}
+}
+</style>

src/views/commandScreen/dialogCompnnents/data-dialog.vue

@@ -52,6 +52,9 @@
 			<div class="political-outlook" v-if="showIndex == 9">
 				<monthSafeScore ref="historyAlarmList" tip="月度安全综合评分"></monthSafeScore>
 			</div>
+			<div class="political-outlook" v-if="showIndex == 11">
+				<radarMapList ref="historyAlarmList" :randerDetail="postData" :tip="postData.title"></radarMapList>
+			</div>
 		</div>
 	</div>
 	<div v-else-if="showIndex == 10">
@@ -92,6 +95,7 @@ import safeEducationDialog from "./safe-education-dialog.vue";
 import majorHidder from "./major-hidder.vue";
 import monthSafeScore from "./month-safe-score.vue";
 import myMap from "./my-map.vue";
+import radarMapList from "./radar-map-list.vue";
 import { log } from "console";
 
 // import { GlobalStore } from "@/stores";

src/views/commandScreen/dialogCompnnents/radar-map-list.vue

@@ -0,0 +1,90 @@
+<template>
+	<div class="political-outlook">
+		<el-scrollbar class="scrollbar" ref="refScrollbar">
+			<div class="radar-map_list">
+				<div class="map-list" v-for="item in randerInfo.randerList" :key="item.id">
+					<radarMapOption :randerInfo="item" />
+				</div>
+			</div>
+		</el-scrollbar>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import radarMapOption from "@/views/commandScreen/components/radarMapOption.vue";
+import { onMounted, reactive, ref } from "vue";
+// import { GlobalStore } from "@/stores";
+// const store = GlobalStore();
+const props = defineProps(["tip", "randerDetail"]);
+
+const randerInfo = reactive({
+	randerList: [] as any[],
+	randerTitleList: ["未来三天人员风险概率预测", "未来三天事故风险概率预测", "未来三天安全隐患风险概率预测"],
+	moreScroll: true
+});
+const refScrollbar = ref(null as any); // 绑定到滚动的盒子上
+onMounted(async () => {
+	console.log(props.randerDetail);
+	for (let index = 0; index < 4; index++) {
+		randerInfo.randerList.push({
+			id: `list${index}`,
+			radius: "70%",
+			isLegend: "top",
+			radarCenter: ["50%", "60%"],
+			dataList: [
+				{
+					value: [4200, 3000, 20000, 35000, 50000],
+					name: "项目事故风险概率预测"
+					// areaStyle: {}
+				}
+			],
+			indicator: [
+				{ name: "恶劣天气占比", max: 6500 },
+				{ name: "人员风险概率", max: 16000 },
+				{ name: "特殊作业风险概率", max: 30000 },
+				{ name: "月度安全评分", max: 38000 },
+				{ name: "隐患未整改占比", max: 52000 }
+			],
+			titleInfo: {
+				titleLeft: randerInfo.randerTitleList[props.randerDetail.radarType - 1],
+				// titleRight: "查看各企业应急事故风险概率预测",
+				percentage: 80
+			}
+		});
+	}
+
+	refScrollbar.value.wrapRef.addEventListener("scroll", (e: any) => {
+		const scrollTop = e.target.scrollTop;
+		const scrollHeight = e.target.scrollHeight;
+		const clientHeight = e.target.clientHeight;
+		// 向上加载更多
+		if (scrollTop >= scrollHeight - clientHeight - 1) {
+			if (randerInfo.moreScroll) {
+				// getMemberCountList("more");
+			}
+		}
+	});
+});
+</script>
+
+<style lang="scss" scoped>
+.political-outlook {
+	height: 97%;
+	margin: 50px 60px 0;
+}
+
+.scrollbar {
+	height: 85%;
+}
+
+.radar-map_list {
+	height: 100%;
+	display: flex;
+	flex-wrap: wrap;
+
+	.map-list {
+		width: 33%;
+		height: 290px;
+	}
+}
+</style>