修改安全帽页面
This commit is contained in:
Vce
parent
5dafeb0f03
commit
910b287ced
@ -113,8 +113,10 @@
|
||||
</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 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="" />
|
||||
@ -126,6 +128,42 @@
|
||||
</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="map-top">
|
||||
<Card title="定位地图" style="width: 100%">
|
||||
@ -279,7 +317,7 @@
|
||||
</div>
|
||||
<!-- **********报警数据*********** -->
|
||||
<div class="right-bottom">
|
||||
<div class="hat-bottom">
|
||||
<!-- <div class="hat-bottom">
|
||||
<Card title="帽子总数">
|
||||
<div class="hat-container">
|
||||
<div class="hat-image">
|
||||
@ -290,7 +328,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="week-bottom">
|
||||
<Card title="近七天报警数据">
|
||||
<div id="weekAlarmLine" ref="weekAlarmLine" style="width: 100%; height: 100%"></div>
|
||||
@ -502,6 +540,23 @@ onMounted(async () => {
|
||||
getWeekAlarmData();
|
||||
|
||||
// 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 => {
|
||||
@ -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() {
|
||||
fenceCreateShow.value = false;
|
||||
clearFn();
|
||||
@ -604,7 +686,8 @@ function deleteFence() {
|
||||
function deleteFenceInfo(idGroups) {
|
||||
console.log("删除id", idGroups);
|
||||
let data = {
|
||||
ids: idGroups
|
||||
ids: idGroups,
|
||||
projectSn: store.sn
|
||||
};
|
||||
deleteSafehatFence(data).then(res => {
|
||||
if (res.success) {
|
||||
@ -863,7 +946,8 @@ function getTodayTrack(day) {
|
||||
let data = {
|
||||
devSn: queryInfo.value.devSn,
|
||||
createTime_begin: day,
|
||||
createTime_end: day
|
||||
createTime_end: day,
|
||||
projectSn: store.sn
|
||||
};
|
||||
|
||||
getRealtimeDataApi(data).then((res: any) => {
|
||||
@ -1057,8 +1141,8 @@ function getCrewListData() {
|
||||
onlineType = laborType.value;
|
||||
}
|
||||
let data = {
|
||||
online: onlineType
|
||||
// projectSn: store.sn
|
||||
online: onlineType,
|
||||
projectSn: store.sn
|
||||
};
|
||||
console.log("👇智能安全帽--分类查询设备列表--查询参数");
|
||||
console.log(data);
|
||||
@ -1340,6 +1424,8 @@ function trackMapInit(path: any, item: any) {
|
||||
});
|
||||
|
||||
function createMarkerAndInfoWindow() {
|
||||
AMap.plugin("AMap.MoveAnimation", function () {
|
||||
|
||||
marker = new AMap.Marker({
|
||||
map: map,
|
||||
position: path[0],
|
||||
@ -1350,13 +1436,14 @@ function trackMapInit(path: any, item: any) {
|
||||
// icon: "src/assets/images/carPosition/carIcon.png", // 自定义图标
|
||||
offset: new AMap.Pixel(-26, -13),
|
||||
autoRotation: true,
|
||||
angle: -90
|
||||
angle: 90
|
||||
});
|
||||
marker.on("click", markerClick);
|
||||
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);
|
||||
let info = [];
|
||||
|
||||
info.push('<p style="padding:7px;">设备序号: ' + item.devSn + "</p>");
|
||||
// info.push('<p style="padding:7px;">车辆/人员名称: ' + item.numberPlate + "</p>");
|
||||
info.push('<p style="padding:7px;">人员名称: ' + item.workerName + "</p>");
|
||||
info.push('<p style="padding:7px;">最后更新时间: ' + item.updateTime + "</p>");
|
||||
info.push('<p style="padding:7px;">位置: ' + address + "</p>");
|
||||
// info.push('<p style="padding:7px;">位置: ' + address + "</p>");
|
||||
info.push('<div style="padding:0 7px;"><text style="font-weight:bold">设备序号:</text> ' + item.devSn + "</div>");
|
||||
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> ' + address + "</div>");
|
||||
var infoWindow = new AMap.InfoWindow({
|
||||
offset: new AMap.Pixel(30, -30),
|
||||
content: info.join("") //使用默认信息窗体框样式，显示信息内容
|
||||
@ -1399,7 +1486,9 @@ function trackMapInit(path: any, item: any) {
|
||||
map.setFitView();
|
||||
}
|
||||
function startAnimation() {
|
||||
marker.moveAlong(lineArr, 200);
|
||||
marker.moveAlong(lineArr, {
|
||||
duration: 500
|
||||
});
|
||||
}
|
||||
|
||||
var placeSearch = ref();
|
||||
@ -1526,8 +1615,8 @@ function addMarker() {
|
||||
var marker = new AMap.Marker({
|
||||
icon: startIcon,
|
||||
position: [locationList.value[0].longitude, locationList.value[0].latitude],
|
||||
size: new AMap.Size(25, 34)
|
||||
// offset: new AMap.Pixel(-13, -30)
|
||||
size: new AMap.Size(25, 34),
|
||||
offset: new AMap.Pixel(-12, -29)
|
||||
});
|
||||
marker.setMap(map);
|
||||
}
|
||||
@ -1720,10 +1809,12 @@ function echoCarMarker(item) {
|
||||
// console.log(e)
|
||||
let info = [];
|
||||
|
||||
info.push('<p style="padding:7px;">设备序号: ' + item.devSn + "</p>");
|
||||
info.push('<p style="padding:7px;">车辆/人员名称: ' + item.numberPlate + "</p>");
|
||||
info.push('<p style="padding:7px;">最后更新时间: ' + item.updateTime + "</p>");
|
||||
info.push('<p style="padding:7px;">位置: ' + address + "</p>");
|
||||
info.push('<div style="padding:0 7px;"><text style="font-weight:bold">设备序号:</text> ' + item.devSn + "</div>");
|
||||
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> ' + address + "</div>");
|
||||
|
||||
let infoWindow = new AMap.InfoWindow({
|
||||
offset: new AMap.Pixel(30, -30),
|
||||
@ -1777,12 +1868,12 @@ function echoPersonMarker(item) {
|
||||
console.log(e);
|
||||
let info = [];
|
||||
|
||||
info.push('<p style="padding:7px;">设备序号: ' + item.devSn + "</p>");
|
||||
// info.push('<p style="padding:7px;">车辆/人员名称: ' + item.personName + "</p>");
|
||||
info.push('<p style="padding:7px;">人员名称: ' + item.workerName + "</p>");
|
||||
info.push('<p style="padding:7px;">最后更新时间: ' + item.updateTime + "</p>");
|
||||
info.push('<p style="padding:7px;">位置: ' + address + "</p>");
|
||||
info.push('<p style="padding:7px;">经纬度: ' + item.longitude + "|" + item.latitude + "</p>");
|
||||
info.push('<div style="padding:0 7px;"><text style="font-weight:bold">设备序号:</text> ' + item.devSn + "</div>");
|
||||
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> ' + address + "</div>");
|
||||
|
||||
var infoWindow = new AMap.InfoWindow({
|
||||
offset: new AMap.Pixel(10, -30),
|
||||
@ -1811,9 +1902,136 @@ function echoPersonMarker(item) {
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.h-card .content) {
|
||||
overflow: hidden;
|
||||
}
|
||||
// :deep(.h-card .content) {
|
||||
// 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 {
|
||||
display: flex;
|
||||
@ -2426,12 +2644,12 @@ function echoPersonMarker(item) {
|
||||
}
|
||||
}
|
||||
.week-bottom {
|
||||
width: 25%;
|
||||
width: 48.75%;
|
||||
margin-top: 20px;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
// position: relative;
|
||||
:deep(.content) {
|
||||
margin-top: 4.2% !important;
|
||||
margin-top: 2.1% !important;
|
||||
}
|
||||
div {
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user