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

修改安全帽页面

Browse Source
This commit is contained in:
Vce 2024-03-30 11:18:21 +08:00
parent 5dafeb0f03
commit 910b287ced
1 changed files with 265 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -113,9 +113,11 @@
</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: 50%">{{ item.fenceName }}</div> <div style="width: 100%;display: flex;justify-content: space-between;align-items: center;" @click="openDetail(item)">
<div style="width: 50%">{{ item.workerNum }}</div> <div style="width: 50%">{{ item.fenceName }}</div>
</div> <div style="width: 50%">{{ item.workerNum }}</div>
</div>
</div>
<div class="not-data" style="top: 20%" v-if="fenceList.length == 0"> <div class="not-data" style="top: 20%" v-if="fenceList.length == 0">
<img src="@/assets/images/noData.png" alt="" /> <img src="@/assets/images/noData.png" alt="" />
<p>暂无数据</p> <p>暂无数据</p>
@ -126,6 +128,42 @@
</div> </div>
</div> </div>
<!-- 围栏信息详情 -->
<div id="welanMaskContainer" class="welanMask" v-show="isOpenDetail">
<div class="weilanDetail">
<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: 33%">序号</div>
<div style="width: 33%">人员名称</div>
<div style="width: 33%">身份证号</div>
</div>
<el-scrollbar class="list-box">
<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="workerListInFence.length == 0">
<img src="@/assets/images/noData.png" alt="" />
<p>暂无数据</p>
</div>
</el-scrollbar>
</div>
</div>
</div>
<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%">
@ -279,7 +317,7 @@
</div> </div>
<!-- **********报警数据*********** --> <!-- **********报警数据*********** -->
<div class="right-bottom"> <div class="right-bottom">
<div class="hat-bottom"> <!-- <div class="hat-bottom">
<Card title="帽子总数"> <Card title="帽子总数">
<div class="hat-container"> <div class="hat-container">
<div class="hat-image"> <div class="hat-image">
@ -290,7 +328,7 @@
</div> </div>
</div> </div>
</Card> </Card>
</div> </div> -->
<div class="week-bottom"> <div class="week-bottom">
<Card title="近七天报警数据"> <Card title="近七天报警数据">
<div id="weekAlarmLine" ref="weekAlarmLine" style="width: 100%; height: 100%"></div> <div id="weekAlarmLine" ref="weekAlarmLine" style="width: 100%; height: 100%"></div>
@ -502,6 +540,23 @@ onMounted(async () => {
getWeekAlarmData(); getWeekAlarmData();
// clearFn(); // clearFn();
resetMapSize();
window.addEventListener("resize", e => {
resetMapSize();
});
});
const resetMapSize = () => {
console.log(666);
setTimeout(() => {
let mapContent: any = document.getElementById("mapContainer");
console.log(mapContent);
mapContent.style.transform = `scale(${1 / store.globalScale})`;
}, 200);
};
onBeforeMount(() => {
window.removeEventListener("resize", e => {
resetMapSize();
});
}); });
watch(dayValue, newVal => { watch(dayValue, newVal => {
@ -521,6 +576,33 @@ watch(choiceMonth, newVal => {
} }
}); });
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
// }
// });
let welanBox = document.getElementById('welanMaskContainer')
if(welanBox){
welanBox.style.zIndex= '999'
}
workerListInFence.value = item.workerListInFence;
isOpenDetail.value = true;
}
function closeDetail() {
let welanBox = document.getElementById('welanMaskContainer')
if(welanBox){
welanBox.style.zIndex= '-1'
}
isOpenDetail.value = false;
}
function handleCancel() { function handleCancel() {
fenceCreateShow.value = false; fenceCreateShow.value = false;
clearFn(); clearFn();
@ -604,7 +686,8 @@ function deleteFence() {
function deleteFenceInfo(idGroups) { function deleteFenceInfo(idGroups) {
console.log("删除id", idGroups); console.log("删除id", idGroups);
let data = { let data = {
ids: idGroups ids: idGroups,
projectSn: store.sn
}; };
deleteSafehatFence(data).then(res => { deleteSafehatFence(data).then(res => {
if (res.success) { if (res.success) {
@ -863,7 +946,8 @@ function getTodayTrack(day) {
let data = { let data = {
devSn: queryInfo.value.devSn, devSn: queryInfo.value.devSn,
createTime_begin: day, createTime_begin: day,
createTime_end: day createTime_end: day,
projectSn: store.sn
}; };
getRealtimeDataApi(data).then((res: any) => { getRealtimeDataApi(data).then((res: any) => {
@ -1057,8 +1141,8 @@ function getCrewListData() {
onlineType = laborType.value; onlineType = laborType.value;
} }
let data = { let data = {
online: onlineType online: onlineType,
// projectSn: store.sn projectSn: store.sn
}; };
console.log("👇智能安全帽--分类查询设备列表--查询参数"); console.log("👇智能安全帽--分类查询设备列表--查询参数");
console.log(data); console.log(data);
@ -1340,22 +1424,25 @@ function trackMapInit(path: any, item: any) {
}); });
function createMarkerAndInfoWindow() { function createMarkerAndInfoWindow() {
marker = new AMap.Marker({ AMap.plugin("AMap.MoveAnimation", function () {
map: map,
position: path[0], marker = new AMap.Marker({
// icon: "https://webapi.amap.com/images/car.png", map: map,
// icon: "src/assets/images/smartSafeHat.png", // 自定义图标 position: path[0],
icon: smartSafeHat, // 自定义图标 // icon: "https://webapi.amap.com/images/car.png",
// icon: "@/assets/images/carPosition/carIcon.png", // 自定义图标 // icon: "src/assets/images/smartSafeHat.png", // 自定义图标
// icon: "src/assets/images/carPosition/carIcon.png", // 自定义图标 icon: smartSafeHat, // 自定义图标
offset: new AMap.Pixel(-26, -13), // icon: "@/assets/images/carPosition/carIcon.png", // 自定义图标
autoRotation: true, // icon: "src/assets/images/carPosition/carIcon.png", // 自定义图标
angle: -90 offset: new AMap.Pixel(-26, -13),
}); autoRotation: true,
marker.on("click", markerClick); angle: 90
marker.emit("click", { target: marker }); });
marker.on("moving", function (e) { marker.on("click", markerClick);
passedPolyline.setPath(e.passedPath); marker.emit("click", { target: marker });
marker.on("moving", function (e) {
passedPolyline.setPath(e.passedPath);
});
}); });
} }
@ -1383,12 +1470,12 @@ function trackMapInit(path: any, item: any) {
// console.log(e); // console.log(e);
let info = []; let info = [];
info.push('<p style="padding:7px;">设备序号: ' + item.devSn + "</p>"); info.push('<div style="padding:0 7px;"><text style="font-weight:bold">设备序号:</text> ' + item.devSn + "</div>");
// info.push('<p style="padding:7px;">车辆/人员名称: ' + item.numberPlate + "</p>"); info.push('<div style="padding:0 7px;"><text style="font-weight:bold">人员名称:</text> ' + item.workerName + "</div>");
info.push('<p style="padding:7px;">人员名称: ' + item.workerName + "</p>"); // info.push('<div style="padding:0 7px;"><text style="font-weight:bold">最后更新时间:</text> ' + item.updateTime + "</div>");
info.push('<p style="padding:7px;">最后更新时间: ' + item.updateTime + "</p>"); info.push('<div style="padding:0 7px;"><text style="font-weight:bold">最后更新时间:</text> ' + item.uploadTime + "</div>");
info.push('<p style="padding:7px;">位置: ' + address + "</p>"); info.push('<div style="padding:0 7px;"><text style="font-weight:bold">经纬度:</text> ' + item.longitude.toFixed(6) + "|" + item.latitude.toFixed(6) + "</div>");
// info.push('<p style="padding:7px;">位置: ' + address + "</p>"); info.push('<div style="padding:0 7px;"><text style="font-weight:bold">位置:</text> ' + address + "</div>");
var infoWindow = new AMap.InfoWindow({ var infoWindow = new AMap.InfoWindow({
offset: new AMap.Pixel(30, -30), offset: new AMap.Pixel(30, -30),
content: info.join("") //使用默认信息窗体框样式，显示信息内容 content: info.join("") //使用默认信息窗体框样式，显示信息内容
@ -1399,7 +1486,9 @@ function trackMapInit(path: any, item: any) {
map.setFitView(); map.setFitView();
} }
function startAnimation() { function startAnimation() {
marker.moveAlong(lineArr, 200); marker.moveAlong(lineArr, {
duration: 500
});
} }
var placeSearch = ref(); var placeSearch = ref();
@ -1526,8 +1615,8 @@ function addMarker() {
var marker = new AMap.Marker({ var marker = new AMap.Marker({
icon: startIcon, icon: startIcon,
position: [locationList.value[0].longitude, locationList.value[0].latitude], position: [locationList.value[0].longitude, locationList.value[0].latitude],
size: new AMap.Size(25, 34) size: new AMap.Size(25, 34),
// offset: new AMap.Pixel(-13, -30) offset: new AMap.Pixel(-12, -29)
}); });
marker.setMap(map); marker.setMap(map);
} }
@ -1720,10 +1809,12 @@ function echoCarMarker(item) {
// console.log(e) // console.log(e)
let info = []; let info = [];
info.push('<p style="padding:7px;">设备序号: ' + item.devSn + "</p>"); info.push('<div style="padding:0 7px;"><text style="font-weight:bold">设备序号:</text> ' + item.devSn + "</div>");
info.push('<p style="padding:7px;">车辆/人员名称: ' + item.numberPlate + "</p>"); info.push('<div style="padding:0 7px;"><text style="font-weight:bold">人员名称:</text> ' + item.workerName + "</div>");
info.push('<p style="padding:7px;">最后更新时间: ' + item.updateTime + "</p>"); // info.push('<div style="padding:0 7px;"><text style="font-weight:bold">最后更新时间:</text> ' + item.updateTime + "</div>");
info.push('<p style="padding:7px;">位置: ' + address + "</p>"); 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> ' + address + "</div>");
let infoWindow = new AMap.InfoWindow({ let infoWindow = new AMap.InfoWindow({
offset: new AMap.Pixel(30, -30), offset: new AMap.Pixel(30, -30),
@ -1777,12 +1868,12 @@ function echoPersonMarker(item) {
console.log(e); console.log(e);
let info = []; let info = [];
info.push('<p style="padding:7px;">设备序号: ' + item.devSn + "</p>"); info.push('<div style="padding:0 7px;"><text style="font-weight:bold">设备序号:</text> ' + item.devSn + "</div>");
// info.push('<p style="padding:7px;">车辆/人员名称: ' + item.personName + "</p>"); info.push('<div style="padding:0 7px;"><text style="font-weight:bold">人员名称:</text> ' + item.workerName + "</div>");
info.push('<p style="padding:7px;">人员名称: ' + item.workerName + "</p>"); // info.push('<div style="padding:0 7px;"><text style="font-weight:bold">最后更新时间:</text> ' + item.updateTime + "</div>");
info.push('<p style="padding:7px;">最后更新时间: ' + item.updateTime + "</p>"); info.push('<div style="padding:0 7px;"><text style="font-weight:bold">最后更新时间:</text> ' + item.uploadTime + "</div>");
info.push('<p style="padding:7px;">位置: ' + address + "</p>"); info.push('<div style="padding:0 7px;"><text style="font-weight:bold">经纬度:</text> ' + item.longitude.toFixed(6) + "|" + item.latitude.toFixed(6) + "</div>");
info.push('<p style="padding:7px;">经纬度: ' + item.longitude + "|" + item.latitude + "</p>"); info.push('<div style="padding:0 7px;"><text style="font-weight:bold">位置:</text> ' + address + "</div>");
var infoWindow = new AMap.InfoWindow({ var infoWindow = new AMap.InfoWindow({
offset: new AMap.Pixel(10, -30), offset: new AMap.Pixel(10, -30),
@ -1811,9 +1902,136 @@ function echoPersonMarker(item) {
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
:deep(.h-card .content) {
overflow: hidden;
}
// :deep(.h-card .content) { // :deep(.h-card .content) {
// background: none; // background: none;
// } // }
.welanMask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
z-index: -1; /* 确保遮罩层位于其他内容上方 */
// position: absolute;
// width: 99%;
// height: 120%;
// background: rgba(0, 0, 0, 0.9);
// z-index: -1;
// transform: transformY(-100%);
.weilanDetail {
position: absolute;
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%;
top: 20%;
left: 32.5%;
height: 65%;
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: 90%;
width: 100%;
.tab-list {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 5%;
background: url("@/assets/images/vehicleManagement/ListTitleImg.png") no-repeat;
background-size: 100% 100%;
// position: absolute;
left: 75.5%;
top: 75%;
// color: #ccc;
color: #fff;
font-size: calc(100vw * 16 / 1920);
line-height: 30px;
div {
text-align: center;
width: 24%;
}
}
.list-box {
height: 90%;
.list-style:nth-child(even) {
background: rgba(39, 88, 192, 0.06);
}
.list-style {
display: flex;
align-items: center;
color: #fff;
line-height: 24px;
font-size: 16px;
div {
text-align: center;
width: 24%;
white-space: nowrap;
}
}
.list-style:hover {
background: #091f3f;
}
.not-data {
top: -10%;
width: 100%;
height: 100%;
// left: 20%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: absolute;
img {
width: 20%;
margin: 5% 30%;
}
p {
color: #fff;
font-size: calc(100vw * 14 / 1920);
margin: -1% 37%;
}
}
}
}
}
}
// 多边形表单 // 多边形表单
.fence-shape { .fence-shape {
display: flex; display: flex;
@ -2426,12 +2644,12 @@ function echoPersonMarker(item) {
} }
} }
.week-bottom { .week-bottom {
width: 25%; width: 48.75%;
margin-top: 20px; margin-top: 20px;
height: 100%; height: 100%;
position: relative; // position: relative;
:deep(.content) { :deep(.content) {
margin-top: 4.2% !important; margin-top: 2.1% !important;
} }
div { div {
} }