fix: 修改智能安全帽机械设备地图精准问题

2024-03-28 09:49:15 +08:00 · 2024-03-28 09:49:15 +08:00 · 17d785069f
commit 17d785069f
parent b602a446ee
5 changed files with 158 additions and 53 deletions
--- a/index.html
+++ b/index.html
@ -6,7 +6,7 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
 		<title><%- title %></title>
 	</head>
-	<body>
+	<body id="body">
 		<div id="app">
 			<style>
 				html,
@ -74,6 +74,7 @@
 					left: 0;
 					animation-delay: 1.2s;
 				}
+				
 				@keyframes ant-rotate {
 					to {
 						transform: rotate(405deg);
@ -84,6 +85,7 @@
 						opacity: 1;
 					}
 				}
+				
 			</style>
 			<div class="loading-box">
 				<div class="loading-wrap">
@ -91,6 +93,7 @@
 				</div>
 			</div>
 		</div>
+		
 		<script>
 			const globalState = JSON.parse(window.localStorage.getItem("GlobalState"));
 			if (globalState) {
@ -177,6 +180,33 @@
 				},
 				{ passive: false }
 			);
+			
+		</script>
+		<script>
+			// window.onload = function(){
+				// console.log('window.onload')
+        changePageSize()
+        
+      // }
+      // window.addEventListener('resize', () => { //监听浏览器窗口大小改变
+      //     changePageSize()
+      // });
+      function changePageSize(){
+          var width = window.innerWidth
+          // console.log(window.screen.width)
+          var height = window.innerHeight
+					console.log('-sssss---',width,height)
+          var scaleWidthNum = width / 1920
+          var scaleHeightNum = height / 1080
+          var ratio;
+          if(scaleWidthNum > scaleHeightNum){
+            ratio = scaleHeightNum
+          } else {
+            ratio = scaleWidthNum
+          }
+					sessionStorage.setItem('ratio',ratio)
+          // document.querySelector("#body").style.zoom = ratio
+        }
 		</script>
 	</body>
 </html>
--- a/src/styles/reset.scss
+++ b/src/styles/reset.scss
@ -136,7 +136,20 @@ body,
 	margin: 0;
 	font-family: siyuan;
 }
-
+// body, html{
+// 	width: 100%;
+// 	height: 100%;
+// 	position: relative;
+// 	overflow: hidden;
+// }
+// #app {
+// 	width: 1920px;
+// 	height: 1080px;
+// 	position: fixed;
+// 	left: 50%;
+// 	top: 50%;
+// 	transform: translate(-50%, -50%);
+// }
 /* 解决 h1 标签在 webkit 内核浏览器中文字大小失效问题 */
 :-webkit-any(article, aside, nav, section) h1 {
 	font-size: 2em;
--- a/src/views/sevenLargeScreen/digitalConstruction/equipmentPosition/index.vue
+++ b/src/views/sevenLargeScreen/digitalConstruction/equipmentPosition/index.vue
@ -109,7 +109,7 @@
 		<div class="right-data">
 			<div class="map-top">
 				<Card title="定位地图" style="width: 100%">
-					<div class="map-box" id="mapContainer"></div>
+					<div class="map-box" id="mapContainer" :style="{'transform':fenceShow?`scale(${ratio})`:'none'}"></div>
 					<div class="wei-lan" v-if="checked === 1">
 						<div class="icon-off" v-if="!fenceShow" @click="openFence">
 							<img src="@/assets/images/iconOff.png" alt="" />
@ -338,6 +338,8 @@ let isIndeterminateFence = ref(true);
 let checked = ref(1);
 let devName = ref("");
 let locationList = ref([]);
+let ratio:any = ref(sessionStorage.getItem('ratio'))
+ratio.value = 1/Number(ratio.value)
 let addFormRef = ref<FormInstance>();
 let addForm = ref({
 	areaRadius: 100, //区域半径
@ -1112,9 +1114,10 @@ function trackMapInit(path: any, item: any) {
 			content: info.join("") //使用默认信息窗体框样式，显示信息内容
 		});
 		infoWindow.open(map, e.target.getPosition());
+		map.setFitView();
 	}

-	map.setFitView();
+	
 }
 function startAnimation() {
 	marker.moveAlong(lineArr, 200);
@ -1125,7 +1128,8 @@ function initMap() {
 	var that = this;
 	//地图加载
 	map = new AMap.Map("mapContainer", {
-		resizeEnable: true
+		// viewMode: '3D',
+		resizeEnable: true,
 	});
 	var geocoder = new AMap.Geocoder({});
 	//输入提示
@ -1487,8 +1491,9 @@ function echoPersonMarker(item) {
 		});

 		infoWindow.open(map, e.target.getPosition());
+		map.setFitView();
 	}
-	map.setFitView();
+	
 }
 </script>

@ -1505,9 +1510,9 @@ function echoPersonMarker(item) {
 </style>

 <style lang="scss" scoped>
-// :deep(.h-card .content) {
-// 	background: none;
-// }
+:deep(.h-card .content) {
+	overflow: hidden;
+}
 // 多边形表单
 .fence-shape {
 	display: flex;
--- a/src/views/sevenLargeScreen/digitalConstruction/smartSafeHat/index.vue
+++ b/src/views/sevenLargeScreen/digitalConstruction/smartSafeHat/index.vue
@ -97,7 +97,7 @@
            </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.id)">
+                <div style="width: 100%;display: flex;justify-content: space-between;align-items: center;" @click="openDetail(item)">
                  <div style="width: 50%">{{ item.fenceName }}</div>
                  <div style="width: 50%">{{ item.workerNum }}</div>
                </div>
@ -114,27 +114,31 @@

    <!-- 围栏信息详情 -->
    <div class="weilanDetail" v-show="isOpenDetail">
-			<div class="detailTitle">
-				<div class="leftTitle"></div>
-				<div class="rightTitle"></div>
-			</div>
+      <div class="detailTitle">
+        <div class="leftTitle">
+					<img src="@/assets/images/titleIcon.png" />围栏中的人员
+				</div>
+        <div class="rightTitle">
+					<div class="closeDetail" @click="closeDetail">
+						<el-icon :size="25" :color="'#657280'">
+							<Close />
+						</el-icon>
+					</div>
+        </div>
+      </div>
      <div class="detailContent">
        <div class="tab-list">
-          <div style="width: 10%">序号</div>
-          <div style="width: 15%">人员名称</div>
-          <div style="width: 15%">设备序号</div>
-          <div style="width: 20%">报警时间</div>
-          <div style="width: 40%">报警信息</div>
+          <div style="width: 33%">序号</div>
+          <div style="width: 33%">人员名称</div>
+          <div style="width: 33%">身份证号</div>
        </div>
        <el-scrollbar class="list-box">
-          <div v-for="(item, index) in listData" class="list-style" :key="item.id">
-            <div style="width: 10%">{{ index + 1 }}</div>
-            <div style="width: 15%">{{ item.workerName }}</div>
-            <div style="width: 15%">{{ item.devSn }}</div>
-            <div style="width: 20%">{{ item.alarmTime }}</div>
-            <div style="width: 40%">{{ item.alarmInfo }}</div>
+          <div v-for="(item, index) in workerListInFence" class="list-style" :key="item.id">
+            <div style="width: 33%">{{ index + 1 }}</div>
+            <div style="width: 33%">{{ item.workerName }}</div>
+            <div style="width: 33%">{{ item.idCard }}</div>
          </div>
-          <div class="not-data" v-if="listData.length == 0">
+          <div class="not-data" v-if="workerListInFence.length == 0">
            <img src="@/assets/images/noData.png" alt="" />
            <p>暂无数据</p>
          </div>
@ -145,7 +149,7 @@
    <div class="right-data">
      <div class="map-top">
        <Card title="定位地图" style="width: 100%">
-          <div class="map-box" id="mapContainer"></div>
+          	<div class="map-box" id="mapContainer" :style="{'transform':`scale(${fenceShow?ratio2:1})`}"></div>
          <div class="wei-lan" v-if="checked === 1">
            <div class="icon-off" v-if="!fenceShow" @click="openFence">
              <img src="@/assets/images/carPosition/iconOff.png" alt="" />
@ -348,7 +352,8 @@ import {
 	deleteSafehatFence,
 	addSafeHatPositionFence,
 	getSuroundInfoApi,
-	getSafeHatTypeTotalApi
+	getSafeHatTypeTotalApi,
+	getFencePersonApi
 } from "@/api/modules/smartSafeHat";

 // import carIcon from "@/assets/images/carPosition/carIcon.png";
@ -395,6 +400,8 @@ let isIndeterminateFence = ref(true);
 let checked = ref(1);
 let devName = ref("");
 let locationList = ref([]);
+let ratio:any = ref(sessionStorage.getItem('ratio'))
+let ratio2 = 1/Number(ratio.value)
 interface RuleForm {
 	// fenceName: string
 	// areaRadius: number
@ -520,9 +527,23 @@ watch(choiceMonth, newVal => {
 	}
 });

-let isOpenDetail = ref(true);
-function openDetail(id) {
-	isOpenDetail.value = !isOpenDetail.value;
+let isOpenDetail = ref(false);
+let workerListInFence = ref([])
+function openDetail(item) {
+	// let data = {
+	// 	id: fenceId,
+	// 	projectSn: store.sn
+	// };
+	// getFencePersonApi(data).then(res => {
+	// 	if (res.success) {
+	// 		workerListInFence.value = res.result.workerListInFence
+	// 	}
+	// });
+	workerListInFence.value = item.workerListInFence
+	isOpenDetail.value = true;
+}
+function closeDetail(){
+	isOpenDetail.value = false
 }

 let addressStr = ref("");
@ -982,12 +1003,13 @@ function getFenceList() {
 			// console.log("👇智能安全帽--围栏信息--转换数据");
 			// let testArr = ref([{longitude: '',latitude: ''}])
 			// fenceList.value.forEach(element => {
-			// 	testArr.value[0].longitude = element.longitude
-			// 	testArr.value[0].latitude = element.latitude
-			// 	element.fenceShapeArr = JSON.stringify(testArr._value)
-			// 	console.log(element.fenceShapeArr)
-			// });
-			// console.log(fenceList);
+				// 	testArr.value[0].longitude = element.longitude
+				// 	testArr.value[0].latitude = element.latitude
+				// 	element.fenceShapeArr = JSON.stringify(testArr._value)
+				// 	console.log(element.fenceShapeArr)
+				// });
+			console.log("👇智能安全帽--围栏信息-------------------");
+			console.log(fenceList);
 			circleMapData.value = res.result.filter(item => item.rangeType === 1);
 			shapeMapData.value = res.result.filter(item => item.rangeType === 2);
 			console.log("围栏", circleMapData.value, shapeMapData.value);
@ -1792,8 +1814,9 @@ function echoPersonMarker(item) {

 		// infoWindow.open(map, e.target.getPosition());
 		infoWindow.open(map, lnglat);
+		map.setFitView();
 	}
-	map.setFitView();
+	
 }
 </script>

@ -1814,7 +1837,9 @@ function echoPersonMarker(item) {
 <style lang="scss" scoped>
 .weilanDetail {
 	position: absolute;
-	background: rgba(8,23,68, 0.5);
+	background: url("@/assets/images/aIEarlyWarning/dialogBg.png") no-repeat;
+	// background: url("@/assets/images/cardImg.png") no-repeat;
+	// background: black;
 	background-size: 100% 100%;
 	box-sizing: border-box;
 	width: 35%;
@ -1823,8 +1848,38 @@ function echoPersonMarker(item) {
 	height: 65%;
 	z-index: 999;
 	padding: 0 1%;
+	.detailTitle {
+		width: 100%;
+		height: 10%;
+		display: flex;
+		justify-content: space-between;
+		.leftTitle {
+			width: auto;
+			height: 100%;
+			// background-color: #fff;
+			display: flex;
+			justify-content: start;
+			align-items: center;
+			color: #fff;
+			font-size: 26px;
+			font-family: OPPOSansH;
+			font-style: italic;
+			letter-spacing: 2px;
+		}
+		.rightTitle {
+			width: 20%;
+			height: 100%;
+			// background-color: black;
+			display: flex;
+			justify-content: end;
+			align-items: center;
+			.closeDetail{
+				cursor: pointer;
+			}
+		}
+	}
 	.detailContent {
-		height: 100%;
+		height: 90%;
 		width: 100%;
 		.tab-list {
 			display: flex;
@ -1837,7 +1892,8 @@ function echoPersonMarker(item) {
 			// position: absolute;
 			left: 75.5%;
 			top: 75%;
-			color: #ccc;
+			// color: #ccc;
+			color: #fff;
 			font-size: calc(100vw * 16 / 1920);
 			line-height: 30px;
 			div {
@ -1855,7 +1911,7 @@ function echoPersonMarker(item) {
 				align-items: center;
 				color: #fff;
 				line-height: 24px;
-				font-size: 14px;
+				font-size: 16px;
 				div {
 					text-align: center;
 					width: 24%;
@ -1866,30 +1922,31 @@ function echoPersonMarker(item) {
 				background: #091f3f;
 			}
 			.not-data {
-				top: 23%;
-				// width: 16%;
-				left: 20%;
+				top: -10%;
+				width: 100%;
+				height: 100%;
+				// left: 20%;
 				display: flex;
 				flex-direction: column;
 				align-items: center;
 				justify-content: center;
 				position: absolute;
 				img {
-					width: 40%;
+					width: 20%;
 					margin: 5% 30%;
 				}
 				p {
 					color: #fff;
 					font-size: calc(100vw * 14 / 1920);
-					margin: -6% 37%;
+					margin: -1% 37%;
 				}
 			}
 		}
 	}
 }
-// :deep(.h-card .content) {
-// 	background: none;
-// }
+:deep(.h-card .content) {
+	overflow: hidden;
+}
 // 多边形表单
 .fence-shape {
 	display: flex;
--- a/src/views/sevenLargeScreen/indexL_syhy.vue
+++ b/src/views/sevenLargeScreen/indexL_syhy.vue
@ -1,6 +1,6 @@
 <template>
 	<!-- 沈阳合盈 盘锦项目 首页定制 -->
-	<ScaleBox :width="1920" :height="1080" bgc="transparent" :delay="100" :isFlat="false">
+	<!-- <ScaleBox :width="1920" :height="1080" bgc="transparent" :delay="100" :isFlat="false"> -->
 		<div class="largeScreen" ref="dataScreenRef">
 			<div class="header">
 				<!-- 顶部左上角图片 -->
@ -77,11 +77,11 @@
 				<router-view></router-view>
 			</div>
 		</div>
-	</ScaleBox>
+	<!-- </ScaleBox> -->
 </template>

 <script lang="ts" setup>
-import ScaleBox from "vue3-scale-box";
+// import ScaleBox from "vue3-scale-box";
 import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
 import { useRouter } from "vue-router";
 import { GlobalStore } from "@/stores";