菜单更改，人员定位更换树形

src/api/modules/smartSafeHat.ts

@@ -51,6 +51,11 @@ export const getVehiclePositionDayRecord = (params: {}) => {
 export const getHatDevOptionApi = (params: {}) => {
 	return http.get(BASEURL + `/xmgl/safetyHatDev/list`, params);
 };
+// 智能安全帽--分类查询设备树
+export const getEnterpriseTreeApi = (params: {}) => {
+	return http.get(BASEURL + `/xmgl/safetyHatDev/enterprise/tree/list`, params);
+};
+
 // 智能安全帽--查询设备状态总数
 export const getSafeHatTypeTotalApi = (params: {}) => {
 	return http.post(BASEURL + `/xmgl/safetyHatDev/countSafetyHatDev`, params);

src/config/staticMenu.ts

@@ -1910,6 +1910,10 @@ export const ZMMLMenu: Array<any> = [
 				menuName: "安全管理",
 				companyPath: "/securityManagement"
 			},
+			{
+				menuName: "安全教育",
+				companyPath: "/safeEducation"
+			},
 			{
 				companyPath: "/foundationPitMonitor",
 				menuName: "基坑监测"
@@ -1922,10 +1926,6 @@ export const ZMMLMenu: Array<any> = [
 				menuName: "高支模监测",
 				companyPath: "/highFormwork"
 			},
-			{
-				menuName: "安全教育",
-				companyPath: "/safeEducation"
-			},
 			{
 				menuName: "外墙脚手架监测",
 				companyPath: "/wallScaffold2"
@@ -1940,14 +1940,14 @@ export const ZMMLMenu: Array<any> = [
 				menuName: "质量管理",
 				companyPath: "/qualityManagement"
 			},
-			{
-				menuName: "混凝土测温",
-				companyPath: "/concreteMonitor"
-			},
 			{
 				menuName: "进度计划",
 				companyPath: "/schedulePlan"
 			}
+			// {
+			// 	menuName: "混凝土测温",
+			// 	companyPath: "/concreteMonitor"
+			// }
 		]
 	},
 	{

src/views/sevenLargeScreen/digitalConstruction/smartSafeHat/index.vue

@@ -50,21 +50,40 @@
 									style="margin-left: 55px; color: #fff"
 									>全选</el-checkbox
 								>
-								<el-scrollbar>
+								<el-scrollbar class="treeStyle">
 									<div style="margin: 15px 0"></div>
-									<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
+									<el-tree
+										:data="treeList"
+										@check="handleCheck"
+										:props="{
+											children: 'safetyHatDevs',
+											label: 'name'
+										}"
+										show-checkbox
+										check-on-click-node
+										default-expand-all
+										node-key="devSn"
+										ref="tree"
+									>
+										<template #default="{ node, data }">
+											<span class="custom-tree-node">
+												<img :src="personOn" v-if="data.online === 1" />
+												<img :src="personOff" v-if="data.online === 0" />
+												<span class="nodeName">{{ node.label }}</span>
+											</span>
+										</template>
+									</el-tree>
+									<!-- <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
 										<div v-for="item in devList" class="choice-item" :key="item.id">
 											<div class="list-type">
 												<img :src="personOn" v-if="item.online === 1" />
 												<img :src="personOff" v-if="item.online === 0" />
 											</div>
 											<el-checkbox :label="item.devSn" :key="item.devSn" class="dev-check">
-												<!-- {{ item.numberPlate || "" }}{{ item.personName || "" }} -->
 												{{ item.workerName }}
 											</el-checkbox>
-											<!-- <div class="choice-speed" v-if="item.speed">{{ item.speed }}km/h</div> -->
 										</div>
-									</el-checkbox-group>
+									</el-checkbox-group> -->
 								</el-scrollbar>
 							</div>
 							<div v-else style="text-align: center; margin-top: 130px; color: #fff; font-size: 20px">暂无设备</div>
@@ -113,11 +132,14 @@
 						</div>
 						<el-scrollbar class="list-box">
 							<div v-for="(item, index) in fenceList" class="list-style" :key="item.id">
-                <div style="width: 100%;display: flex;justify-content: space-between;align-items: center;" @click="openDetail(item)">
+								<div
-                  <div style="width: 50%">{{ item.fenceName }}</div>
+									style="width: 100%; display: flex; justify-content: space-between; align-items: center"
-                  <div style="width: 50%">{{ item.workerNum }}</div>
+									@click="openDetail(item)"
-                </div>
+								>
-              </div>
+									<div style="width: 50%">{{ item.fenceName }}</div>
+									<div style="width: 50%">{{ item.workerNum }}</div>
+								</div>
+							</div>
 							<div class="not-data" style="top: 20%" v-if="fenceList.length == 0">
 								<img src="@/assets/images/noData.png" alt="" />
 								<p>暂无数据</p>
@@ -129,40 +151,38 @@
 		</div>
 
 		<!-- 围栏信息详情 -->
-    <div id="welanMaskContainer" class="welanMask" v-show="isOpenDetail">
+		<div id="welanMaskContainer" class="welanMask" v-show="isOpenDetail">
-      <div class="weilanDetail">
+			<div class="weilanDetail">
-        <div class="detailTitle">
+				<div class="detailTitle">
-          <div class="leftTitle">
+					<div class="leftTitle"><img src="@/assets/images/titleIcon.png" />围栏中的人员</div>
-            <img src="@/assets/images/titleIcon.png" />围栏中的人员
+					<div class="rightTitle">
-          </div>
+						<div class="closeDetail" @click="closeDetail">
-          <div class="rightTitle">
+							<el-icon :size="25" :color="'#657280'">
-            <div class="closeDetail" @click="closeDetail">
+								<Close />
-              <el-icon :size="25" :color="'#657280'">
+							</el-icon>
-                <Close />
+						</div>
-              </el-icon>
+					</div>
-            </div>
+				</div>
-          </div>
+				<div class="detailContent">
-        </div>
+					<div class="tab-list">
-        <div class="detailContent">
+						<div style="width: 33%">序号</div>
-          <div class="tab-list">
+						<div style="width: 33%">人员名称</div>
-            <div style="width: 33%">序号</div>
+						<div style="width: 33%">身份证号</div>
-            <div style="width: 33%">人员名称</div>
+					</div>
-            <div style="width: 33%">身份证号</div>
+					<el-scrollbar class="list-box">
-          </div>
+						<div v-for="(item, index) in workerListInFence" class="list-style" :key="item.id">
-          <el-scrollbar class="list-box">
+							<div style="width: 33%">{{ index + 1 }}</div>
-            <div v-for="(item, index) in workerListInFence" class="list-style" :key="item.id">
+							<div style="width: 33%">{{ item.workerName }}</div>
-              <div style="width: 33%">{{ index + 1 }}</div>
+							<div style="width: 33%">{{ item.idCard }}</div>
-              <div style="width: 33%">{{ item.workerName }}</div>
+						</div>
-              <div style="width: 33%">{{ item.idCard }}</div>
+						<div class="not-data" v-if="workerListInFence.length == 0">
-            </div>
+							<img src="@/assets/images/noData.png" alt="" />
-            <div class="not-data" v-if="workerListInFence.length == 0">
+							<p>暂无数据</p>
-              <img src="@/assets/images/noData.png" alt="" />
+						</div>
-              <p>暂无数据</p>
+					</el-scrollbar>
-            </div>
+				</div>
-          </el-scrollbar>
+			</div>
-        </div>
+		</div>
-      </div>
-    </div>
 
 		<div class="right-data">
 			<div class="map-top" :style="enlarge ? 'height:105%' : ''">
@@ -181,7 +201,7 @@
 							<img src="@/assets/images/enlarge-icon.png" alt="" />
 							<!-- <div>放大</div> -->
 						</div>
-						<div class="enlargeIconOn" v-if="enlarge" @click="notEnlargeMap" >
+						<div class="enlargeIconOn" v-if="enlarge" @click="notEnlargeMap">
 							<img src="@/assets/images/not-enlarge-icon.png" alt="" />
 							<!-- <div>缩小</div> -->
 						</div>
@@ -274,8 +294,15 @@
 										<div style="margin-top: 15%">
 											<el-form-item label="围栏名称" prop="region">
 												<!-- <el-input v-model="addForm.fenceName" placeholder="请输入"></el-input> -->
-												<el-select v-model="addForm.region" filterable clearable value-key="id" placeholder="请选择" style="width: 240px">
+												<el-select
-													<el-option v-for="item in regionList" :key="item.id" :label="item.regionName" :value="item"/>
+													v-model="addForm.region"
+													filterable
+													clearable
+													value-key="id"
+													placeholder="请选择"
+													style="width: 240px"
+												>
+													<el-option v-for="item in regionList" :key="item.id" :label="item.regionName" :value="item" />
 												</el-select>
 											</el-form-item>
 
@@ -323,12 +350,24 @@
 					</div>
 					<!-- **********************围栏弹窗******************************** -->
 
-					<div class="start-track" @click="startAnimation" v-if="checked === 2" :style="enlarge ? 'bottom:8%' : 'bottom:5%'">开始轨迹动画</div>
+					<div class="start-track" @click="startAnimation" v-if="checked === 2" :style="enlarge ? 'bottom:8%' : 'bottom:5%'">
-					<div class="start-track-isEnlage" @click="enlargeMap" v-if="checked === 2 && !enlarge" :style="enlarge ? '' : 'bottom:5%'">
+						开始轨迹动画
+					</div>
+					<div
+						class="start-track-isEnlage"
+						@click="enlargeMap"
+						v-if="checked === 2 && !enlarge"
+						:style="enlarge ? '' : 'bottom:5%'"
+					>
 						<!-- 放大 -->
 						<img src="@/assets/images/enlarge-icon.png" alt="" />
 					</div>
-					<div class="start-track-isEnlage" @click="notEnlargeMap" v-if="checked === 2 && enlarge" :style="enlarge ? 'bottom:8%' : ''">
+					<div
+						class="start-track-isEnlage"
+						@click="notEnlargeMap"
+						v-if="checked === 2 && enlarge"
+						:style="enlarge ? 'bottom:8%' : ''"
+					>
 						<!-- 缩小 -->
 						<img src="@/assets/images/not-enlarge-icon.png" alt="" />
 					</div>
@@ -391,6 +430,7 @@
 import {
 	getAlarmRecordInfoApi,
 	getHatDevOptionApi,
+	getEnterpriseTreeApi,
 	addstandardDevApi,
 	getRealtimeRecordInfo,
 	getRealtimeRecordList,
@@ -413,8 +453,8 @@ import {
 // import carIcon from "@/assets/images/carPosition/carIcon.png";
 import carOn from "@/assets/images/carPosition/carOn2.png";
 import carOff from "@/assets/images/carPosition/carOff2.png";
-import smartSafeHat from "@/assets/images/carPosition/smartSafeHat.png";
+import smartSafeHat from "@/assets/images/carPosition/person.png";
-import smartSafeHat2 from "@/assets/images//carPosition/smartSafeHat2.png";
+import smartSafeHat2 from "@/assets/images//carPosition/person2.png";
 import personOff from "@/assets/images/carPosition/personOff.png";
 import startIcon from "@/assets/images/carPosition/startIcon.png";
 import endIcon from "@/assets/images/carPosition/endIcon.png";
@@ -449,7 +489,8 @@ let checkAll = ref(false);
 let checkAllFence = ref(false);
 let checkedCities = ref([]);
 let checkedFence = ref([]);
-let devList = ref(["鲁U6675", "刘江", "蒋东", "鲁U9675"]);
+let devList = ref([]);
+let treeList = ref([]);
 let isIndeterminate = ref(true);
 let isIndeterminateFence = ref(true);
 let checked = ref(1);
@@ -459,6 +500,7 @@ interface RuleForm {
 	// fenceName: string
 	// areaRadius: number
 }
+let tree = ref(null);
 let addFormRef = ref<FormInstance>();
 // const addForm = reactive<RuleForm>({
 let addForm = ref({
@@ -604,11 +646,11 @@ watch(choiceMonth, newVal => {
 		getDayRunData();
 	}
 });
-function enlargeMap(){
+function enlargeMap() {
-	enlarge.value = true
+	enlarge.value = true;
 }
-function notEnlargeMap(){
+function notEnlargeMap() {
-	enlarge.value = false
+	enlarge.value = false;
 }
 let isOpenDetail = ref(false);
 let workerListInFence = ref([]);
@@ -622,17 +664,17 @@ function openDetail(item) {
 	// 		workerListInFence.value = res.result.workerListInFence
 	// 	}
 	// });
-	let welanBox = document.getElementById('welanMaskContainer')
+	let welanBox = document.getElementById("welanMaskContainer");
-	if(welanBox){
+	if (welanBox) {
-		welanBox.style.zIndex= '999'
+		welanBox.style.zIndex = "999";
 	}
 	workerListInFence.value = item.workerListInFence;
 	isOpenDetail.value = true;
 }
 function closeDetail() {
-	let welanBox = document.getElementById('welanMaskContainer')
+	let welanBox = document.getElementById("welanMaskContainer");
-	if(welanBox){
+	if (welanBox) {
-		welanBox.style.zIndex= '-1'
+		welanBox.style.zIndex = "-1";
 	}
 	isOpenDetail.value = false;
 }
@@ -684,8 +726,8 @@ function getRegionList() {
 	getRegionListApi(data).then(res => {
 		if (res.success) {
 			checkedFence.value = [];
-			regionList.value = res.result
+			regionList.value = res.result;
-			console.log(regionList.value,777777777777777777777)
+			console.log(regionList.value, 777777777777777777777);
 		}
 	});
 }
@@ -1197,7 +1239,8 @@ function getCrewListData() {
 	};
 	console.log("👇智能安全帽--分类查询设备列表--查询参数");
 	console.log(data);
-	getHatDevOptionApi(data).then(res => {
+	// getHatDevOptionApi(data).then(res => {
+	getEnterpriseTreeApi(data).then(res => {
 		console.log("👇智能安全帽--分类查询设备列表");
 		console.log(res);
 		if (res.code == 200) {
@@ -1224,13 +1267,25 @@ function getCrewListData() {
 			// });
 			// nameOptions.value = nameOption.concat(carOption);
 			nameOptions.value = nameOption.concat([]);
-
+			treeList.value = res.result;
-			devList.value = res.result;
+			devList.value = flattenTree(res.result).filter(item => item.devSn);
 		} else {
 			ElMessage.error(res.message);
 		}
 	});
 }
+// 扁平化树形数据
+function flattenTree(tree) {
+	let result = [];
+	tree.forEach(item => {
+		result.push(item);
+		if (item.safetyHatDevs && item.safetyHatDevs.length > 0) {
+			result = result.concat(flattenTree(item.safetyHatDevs));
+		}
+	});
+	return result;
+}
+
 // 智能安全帽--查询报警信息
 function getProgressListData() {
 	let data = {
@@ -1262,6 +1317,7 @@ function handleCheckAllChange(val) {
 	clearFn();
 	let nameArr = devList.value.map(item => item.devSn);
 	checkedCities.value = val ? nameArr : [];
+	tree.value.setCheckedKeys(checkedCities.value);
 	isIndeterminate.value = false;
 	if (val) {
 		listData;
@@ -1273,6 +1329,11 @@ function handleCheckAllChange(val) {
 	getProgressListData();
 	drawFencePoint();
 }
+const handleCheck = () => {
+	checkedCities.value = tree?.value.getCheckedKeys().filter(item => item);
+	console.info(checkedCities.value, "checkedCities");
+	handleCheckedCitiesChange(checkedCities.value);
+};
 function handleCheckedCitiesChange(value) {
 	console.log("设备选中", value);
 	clearFn();
@@ -1476,7 +1537,6 @@ function trackMapInit(path: any, item: any) {
 
 	function createMarkerAndInfoWindow() {
 		AMap.plugin("AMap.MoveAnimation", function () {
-
 			marker = new AMap.Marker({
 				map: map,
 				position: path[0],
@@ -1525,7 +1585,13 @@ function trackMapInit(path: any, item: any) {
 		info.push('<div style="padding:0 7px;"><text style="font-weight:bold">人员名称:</text> ' + item.workerName + "</div>");
 		// info.push('<div style="padding:0 7px;"><text style="font-weight:bold">最后更新时间:</text> ' + item.updateTime + "</div>");
 		info.push('<div style="padding:0 7px;"><text style="font-weight:bold">最后更新时间:</text> ' + item.uploadTime + "</div>");
-		info.push('<div style="padding:0 7px;"><text style="font-weight:bold">经纬度:</text> ' + item.longitude.toFixed(6) + "|" + item.latitude.toFixed(6) + "</div>");
+		info.push(
+			'<div style="padding:0 7px;"><text style="font-weight:bold">经纬度:</text> ' +
+				item.longitude.toFixed(6) +
+				"|" +
+				item.latitude.toFixed(6) +
+				"</div>"
+		);
 		info.push('<div style="padding:0 7px;"><text style="font-weight:bold">位置:</text> ' + address + "</div>");
 		var infoWindow = new AMap.InfoWindow({
 			offset: new AMap.Pixel(30, -30),
@@ -1864,7 +1930,13 @@ function echoCarMarker(item) {
 		info.push('<div style="padding:0 7px;"><text style="font-weight:bold">人员名称:</text> ' + item.workerName + "</div>");
 		// info.push('<div style="padding:0 7px;"><text style="font-weight:bold">最后更新时间:</text> ' + item.updateTime + "</div>");
 		info.push('<div style="padding:0 7px;"><text style="font-weight:bold">最后更新时间:</text> ' + item.uploadTime + "</div>");
-		info.push('<div style="padding:0 7px;"><text style="font-weight:bold">经纬度:</text> ' + item.longitude.toFixed(6) + "|" + item.latitude.toFixed(6) + "</div>");
+		info.push(
+			'<div style="padding:0 7px;"><text style="font-weight:bold">经纬度:</text> ' +
+				item.longitude.toFixed(6) +
+				"|" +
+				item.latitude.toFixed(6) +
+				"</div>"
+		);
 		info.push('<div style="padding:0 7px;"><text style="font-weight:bold">位置:</text> ' + address + "</div>");
 
 		let infoWindow = new AMap.InfoWindow({
@@ -1923,7 +1995,13 @@ function echoPersonMarker(item) {
 		info.push('<div style="padding:0 7px;"><text style="font-weight:bold">人员名称:</text> ' + item.workerName + "</div>");
 		// info.push('<div style="padding:0 7px;"><text style="font-weight:bold">最后更新时间:</text> ' + item.updateTime + "</div>");
 		info.push('<div style="padding:0 7px;"><text style="font-weight:bold">最后更新时间:</text> ' + item.uploadTime + "</div>");
-		info.push('<div style="padding:0 7px;"><text style="font-weight:bold">经纬度:</text> ' + item.longitude.toFixed(6) + "|" + item.latitude.toFixed(6) + "</div>");
+		info.push(
+			'<div style="padding:0 7px;"><text style="font-weight:bold">经纬度:</text> ' +
+				item.longitude.toFixed(6) +
+				"|" +
+				item.latitude.toFixed(6) +
+				"</div>"
+		);
 		info.push('<div style="padding:0 7px;"><text style="font-weight:bold">位置:</text> ' + address + "</div>");
 
 		var infoWindow = new AMap.InfoWindow({
@@ -1961,12 +2039,12 @@ function echoPersonMarker(item) {
 // }
 .welanMask {
 	position: fixed;
-  top: 0;
+	top: 0;
-  left: 0;
+	left: 0;
-  width: 100%;
+	width: 100%;
-  height: 100%;
+	height: 100%;
-  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
+	background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
-  z-index: -1; /* 确保遮罩层位于其他内容上方 */
+	z-index: -1; /* 确保遮罩层位于其他内容上方 */
 
 	// position: absolute;
 	// width: 99%;
@@ -1996,7 +2074,7 @@ function echoPersonMarker(item) {
 				height: 100%;
 				// background-color: #fff;
 				display: flex;
-				justify-content: start;
+				justify-content: flex-start;
 				align-items: center;
 				color: #fff;
 				font-size: 26px;
@@ -2493,10 +2571,10 @@ function echoPersonMarker(item) {
 			margin-top: 1%;
 			height: 38%;
 			:deep(.h-card) {
-					.content {
+				.content {
-						margin-top: 4% !important;
+					margin-top: 4% !important;
-					}
 				}
+			}
 			.left-content {
 				height: 100%;
 				width: 100%;
@@ -2689,7 +2767,7 @@ function echoPersonMarker(item) {
 				box-shadow: 0px 0px 10px 0px rgba(39, 45, 69, 0.2);
 				bottom: 8%;
 				right: 1%;
-				img{
+				img {
 					width: 20px;
 					height: 22px;
 					margin: 6px auto;
@@ -3021,4 +3099,56 @@ function echoPersonMarker(item) {
 		}
 	}
 }
+
+:deep() {
+	.el-tree {
+		background-color: transparent;
+		.el-tree-node {
+			white-space: normal;
+			&:focus > .el-tree-node__content {
+				background-color: transparent;
+			}
+			&.is-current > .el-tree-node__content {
+				background-color: rgba(81, 129, 246, 0.14);
+				color: #5181f6;
+			}
+		}
+		.el-tree-node__label {
+			color: #fff;
+		}
+		.el-tree-node__content {
+			position: relative;
+			&:hover {
+				background-color: rgba(81, 129, 246, 0.14);
+				color: #5181f6;
+			}
+		}
+		.el-tree-node__expand-icon {
+			font-size: 16px;
+			padding: 0 6px;
+			&.is-leaf {
+				color: transparent !important;
+			}
+		}
+		.treeTitle {
+			background-color: #f7f7f7;
+			margin-bottom: 10px;
+		}
+	}
+}
+.custom-tree-node {
+	width: 100%;
+	img {
+		width: 16px;
+		height: 16px;
+		margin-right: 4px;
+	}
+}
+.nodeName {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	display: inline-block;
+	color: #fff;
+}
 </style>