admin/zhgdlarge
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Vce 2024-03-28 09:49:15 +08:00
parent b602a446ee
commit 17d785069f
5 changed files with 158 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
index.html
View File

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title><%- title %></title> <title><%- title %></title>
</head> </head>
<body> <body id="body">
<div id="app"> <div id="app">
<style> <style>
html, html,
@ -74,6 +74,7 @@
left: 0; left: 0;
animation-delay: 1.2s; animation-delay: 1.2s;
} }
@keyframes ant-rotate { @keyframes ant-rotate {
to { to {
transform: rotate(405deg); transform: rotate(405deg);
@ -84,6 +85,7 @@
opacity: 1; opacity: 1;
} }
} }
</style> </style>
<div class="loading-box"> <div class="loading-box">
<div class="loading-wrap"> <div class="loading-wrap">
@ -91,6 +93,7 @@
</div> </div>
</div> </div>
</div> </div>
<script> <script>
const globalState = JSON.parse(window.localStorage.getItem("GlobalState")); const globalState = JSON.parse(window.localStorage.getItem("GlobalState"));
if (globalState) { if (globalState) {
@ -177,6 +180,33 @@
}, },
{ passive: false } { 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> </script>
</body> </body>
</html> </html>

15
src/styles/reset.scss
View File

@ -136,7 +136,20 @@ body,
margin: 0; margin: 0;
font-family: siyuan; 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 内核浏览器中文字大小失效问题 */ /* 解决 h1 标签在 webkit 内核浏览器中文字大小失效问题 */
:-webkit-any(article, aside, nav, section) h1 { :-webkit-any(article, aside, nav, section) h1 {
font-size: 2em; font-size: 2em;

19
src/views/sevenLargeScreen/digitalConstruction/equipmentPosition/index.vue
View File

@ -109,7 +109,7 @@
<div class="right-data"> <div class="right-data">
<div class="map-top"> <div class="map-top">
<Card title="定位地图" style="width: 100%"> <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="wei-lan" v-if="checked === 1">
<div class="icon-off" v-if="!fenceShow" @click="openFence"> <div class="icon-off" v-if="!fenceShow" @click="openFence">
<img src="@/assets/images/iconOff.png" alt="" /> <img src="@/assets/images/iconOff.png" alt="" />
@ -338,6 +338,8 @@ let isIndeterminateFence = ref(true);
let checked = ref(1); let checked = ref(1);
let devName = ref(""); let devName = ref("");
let locationList = ref([]); let locationList = ref([]);
let ratio:any = ref(sessionStorage.getItem('ratio'))
ratio.value = 1/Number(ratio.value)
let addFormRef = ref<FormInstance>(); let addFormRef = ref<FormInstance>();
let addForm = ref({ let addForm = ref({
areaRadius: 100, //区域半径 areaRadius: 100, //区域半径
@ -1112,9 +1114,10 @@ function trackMapInit(path: any, item: any) {
content: info.join("") //使用默认信息窗体框样式，显示信息内容 content: info.join("") //使用默认信息窗体框样式，显示信息内容
}); });
infoWindow.open(map, e.target.getPosition()); infoWindow.open(map, e.target.getPosition());
map.setFitView();
} }
map.setFitView();
} }
function startAnimation() { function startAnimation() {
marker.moveAlong(lineArr, 200); marker.moveAlong(lineArr, 200);
@ -1125,7 +1128,8 @@ function initMap() {
var that = this; var that = this;
//地图加载 //地图加载
map = new AMap.Map("mapContainer", { map = new AMap.Map("mapContainer", {
resizeEnable: true // viewMode: '3D',
resizeEnable: true,
}); });
var geocoder = new AMap.Geocoder({}); var geocoder = new AMap.Geocoder({});
//输入提示 //输入提示
@ -1487,8 +1491,9 @@ function echoPersonMarker(item) {
}); });
infoWindow.open(map, e.target.getPosition()); infoWindow.open(map, e.target.getPosition());
map.setFitView();
} }
map.setFitView();
} }
</script> </script>
@ -1505,9 +1510,9 @@ function echoPersonMarker(item) {
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
// :deep(.h-card .content) { :deep(.h-card .content) {
// background: none; overflow: hidden;
// } }
// 多边形表单 // 多边形表单
.fence-shape { .fence-shape {
display: flex; display: flex;

139
src/views/sevenLargeScreen/digitalConstruction/smartSafeHat/index.vue
View File

@ -97,7 +97,7 @@
</div> </div>
<el-scrollbar class="list-box"> <el-scrollbar class="list-box">
<div v-for="(item, index) in fenceList" class="list-style" :key="item.id"> <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.fenceName }}</div>
<div style="width: 50%">{{ item.workerNum }}</div> <div style="width: 50%">{{ item.workerNum }}</div>
</div> </div>
@ -114,27 +114,31 @@
<!-- 围栏信息详情 --> <!-- 围栏信息详情 -->
<div class="weilanDetail" v-show="isOpenDetail"> <div class="weilanDetail" v-show="isOpenDetail">
<div class="detailTitle"> <div class="detailTitle">
<div class="leftTitle"></div> <div class="leftTitle">
<div class="rightTitle"></div> <img src="@/assets/images/titleIcon.png" />围栏中的人员
</div> </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="detailContent">
<div class="tab-list"> <div class="tab-list">
<div style="width: 10%">序号</div> <div style="width: 33%">序号</div>
<div style="width: 15%">人员名称</div> <div style="width: 33%">人员名称</div>
<div style="width: 15%">设备序号</div> <div style="width: 33%">身份证号</div>
<div style="width: 20%">报警时间</div>
<div style="width: 40%">报警信息</div>
</div> </div>
<el-scrollbar class="list-box"> <el-scrollbar class="list-box">
<div v-for="(item, index) in listData" class="list-style" :key="item.id"> <div v-for="(item, index) in workerListInFence" class="list-style" :key="item.id">
<div style="width: 10%">{{ index + 1 }}</div> <div style="width: 33%">{{ index + 1 }}</div>
<div style="width: 15%">{{ item.workerName }}</div> <div style="width: 33%">{{ item.workerName }}</div>
<div style="width: 15%">{{ item.devSn }}</div> <div style="width: 33%">{{ item.idCard }}</div>
<div style="width: 20%">{{ item.alarmTime }}</div>
<div style="width: 40%">{{ item.alarmInfo }}</div>
</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="" /> <img src="@/assets/images/noData.png" alt="" />
<p>暂无数据</p> <p>暂无数据</p>
</div> </div>
@ -145,7 +149,7 @@
<div class="right-data"> <div class="right-data">
<div class="map-top"> <div class="map-top">
<Card title="定位地图" style="width: 100%"> <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="wei-lan" v-if="checked === 1">
<div class="icon-off" v-if="!fenceShow" @click="openFence"> <div class="icon-off" v-if="!fenceShow" @click="openFence">
<img src="@/assets/images/carPosition/iconOff.png" alt="" /> <img src="@/assets/images/carPosition/iconOff.png" alt="" />
@ -348,7 +352,8 @@ import {
deleteSafehatFence, deleteSafehatFence,
addSafeHatPositionFence, addSafeHatPositionFence,
getSuroundInfoApi, getSuroundInfoApi,
getSafeHatTypeTotalApi getSafeHatTypeTotalApi,
getFencePersonApi
} from "@/api/modules/smartSafeHat"; } from "@/api/modules/smartSafeHat";
// import carIcon from "@/assets/images/carPosition/carIcon.png"; // import carIcon from "@/assets/images/carPosition/carIcon.png";
@ -395,6 +400,8 @@ let isIndeterminateFence = ref(true);
let checked = ref(1); let checked = ref(1);
let devName = ref(""); let devName = ref("");
let locationList = ref([]); let locationList = ref([]);
let ratio:any = ref(sessionStorage.getItem('ratio'))
let ratio2 = 1/Number(ratio.value)
interface RuleForm { interface RuleForm {
// fenceName: string // fenceName: string
// areaRadius: number // areaRadius: number
@ -520,9 +527,23 @@ watch(choiceMonth, newVal => {
} }
}); });
let isOpenDetail = ref(true); let isOpenDetail = ref(false);
function openDetail(id) { let workerListInFence = ref([])
isOpenDetail.value = !isOpenDetail.value; 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(""); let addressStr = ref("");
@ -982,12 +1003,13 @@ function getFenceList() {
// console.log("👇智能安全帽--围栏信息--转换数据"); // console.log("👇智能安全帽--围栏信息--转换数据");
// let testArr = ref([{longitude: '',latitude: ''}]) // let testArr = ref([{longitude: '',latitude: ''}])
// fenceList.value.forEach(element => { // fenceList.value.forEach(element => {
// testArr.value[0].longitude = element.longitude // testArr.value[0].longitude = element.longitude
// testArr.value[0].latitude = element.latitude // testArr.value[0].latitude = element.latitude
// element.fenceShapeArr = JSON.stringify(testArr._value) // element.fenceShapeArr = JSON.stringify(testArr._value)
// console.log(element.fenceShapeArr) // console.log(element.fenceShapeArr)
// }); // });
// console.log(fenceList); console.log("👇智能安全帽--围栏信息-------------------");
console.log(fenceList);
circleMapData.value = res.result.filter(item => item.rangeType === 1); circleMapData.value = res.result.filter(item => item.rangeType === 1);
shapeMapData.value = res.result.filter(item => item.rangeType === 2); shapeMapData.value = res.result.filter(item => item.rangeType === 2);
console.log("围栏", circleMapData.value, shapeMapData.value); console.log("围栏", circleMapData.value, shapeMapData.value);
@ -1792,8 +1814,9 @@ function echoPersonMarker(item) {
// infoWindow.open(map, e.target.getPosition()); // infoWindow.open(map, e.target.getPosition());
infoWindow.open(map, lnglat); infoWindow.open(map, lnglat);
map.setFitView();
} }
map.setFitView();
} }
</script> </script>
@ -1814,7 +1837,9 @@ function echoPersonMarker(item) {
<style lang="scss" scoped> <style lang="scss" scoped>
.weilanDetail { .weilanDetail {
position: absolute; 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%; background-size: 100% 100%;
box-sizing: border-box; box-sizing: border-box;
width: 35%; width: 35%;
@ -1823,8 +1848,38 @@ function echoPersonMarker(item) {
height: 65%; height: 65%;
z-index: 999; z-index: 999;
padding: 0 1%; 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 { .detailContent {
height: 100%; height: 90%;
width: 100%; width: 100%;
.tab-list { .tab-list {
display: flex; display: flex;
@ -1837,7 +1892,8 @@ function echoPersonMarker(item) {
// position: absolute; // position: absolute;
left: 75.5%; left: 75.5%;
top: 75%; top: 75%;
color: #ccc; // color: #ccc;
color: #fff;
font-size: calc(100vw * 16 / 1920); font-size: calc(100vw * 16 / 1920);
line-height: 30px; line-height: 30px;
div { div {
@ -1855,7 +1911,7 @@ function echoPersonMarker(item) {
align-items: center; align-items: center;
color: #fff; color: #fff;
line-height: 24px; line-height: 24px;
font-size: 14px; font-size: 16px;
div { div {
text-align: center; text-align: center;
width: 24%; width: 24%;
@ -1866,30 +1922,31 @@ function echoPersonMarker(item) {
background: #091f3f; background: #091f3f;
} }
.not-data { .not-data {
top: 23%; top: -10%;
// width: 16%; width: 100%;
left: 20%; height: 100%;
// left: 20%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: absolute; position: absolute;
img { img {
width: 40%; width: 20%;
margin: 5% 30%; margin: 5% 30%;
} }
p { p {
color: #fff; color: #fff;
font-size: calc(100vw * 14 / 1920); font-size: calc(100vw * 14 / 1920);
margin: -6% 37%; margin: -1% 37%;
} }
} }
} }
} }
} }
// :deep(.h-card .content) { :deep(.h-card .content) {
// background: none; overflow: hidden;
// } }
// 多边形表单 // 多边形表单
.fence-shape { .fence-shape {
display: flex; display: flex;

6
src/views/sevenLargeScreen/indexL_syhy.vue
View File

@ -1,6 +1,6 @@
<template> <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="largeScreen" ref="dataScreenRef">
<div class="header"> <div class="header">
<!-- 顶部左上角图片 --> <!-- 顶部左上角图片 -->
@ -77,11 +77,11 @@
<router-view></router-view> <router-view></router-view>
</div> </div>
</div> </div>
</ScaleBox> <!-- </ScaleBox> -->
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import ScaleBox from "vue3-scale-box"; // import ScaleBox from "vue3-scale-box";
import { ref, reactive, onMounted, onBeforeUnmount } from "vue"; import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import { GlobalStore } from "@/stores"; import { GlobalStore } from "@/stores";