322 lines
7.3 KiB
Vue
322 lines
7.3 KiB
Vue
<template>
|
|
<Card title="点位图">
|
|
<div class="pit-top-left">
|
|
<div class="select-right">
|
|
<el-select v-model="selectDay" style="width: 85%" size="small" @change="selectChange">
|
|
<el-option v-for="(item, index) in devList" :key="index" :label="item.engineeringName" :value="item.id" />
|
|
</el-select>
|
|
</div>
|
|
<div class="point-state-top">
|
|
<div class="common">
|
|
<div class="background"></div>
|
|
<div class="state-text">正常</div>
|
|
</div>
|
|
<div class="warn">
|
|
<div class="background"></div>
|
|
<div class="state-text">超出报警值</div>
|
|
</div>
|
|
<div class="control">
|
|
<div class="background"></div>
|
|
<div class="state-text">超出控制值</div>
|
|
</div>
|
|
</div>
|
|
<div class="point-map" v-if="list.length > 0">
|
|
<img :src="currentData.imageUrl" alt="" />
|
|
<div class="point-list" v-for="item in list" :key="item.id">
|
|
<div
|
|
class="point-item"
|
|
:class="
|
|
item.alarmState == 1
|
|
? 'changeColor1'
|
|
: item.alarmState == 2
|
|
? 'changeColor2'
|
|
: item.alarmState == 3
|
|
? 'changeColor3'
|
|
: ''
|
|
"
|
|
:style="{
|
|
left: (+item.mapX*100/706.276) + '%',
|
|
top: (+item.mapY*100/519) + '%'
|
|
}"
|
|
@click="openDialog(item)"
|
|
></div>
|
|
<div
|
|
class="item-dialog"
|
|
:style="{
|
|
left: ((+item.mapX + 50)*100/706.276) + '%',
|
|
top: ((+item.mapY - 20)*100/706.276) + '%',
|
|
}"
|
|
v-if="item.id === currentIndex && showDialog"
|
|
>
|
|
<div class="triangle"></div>
|
|
<div class="dialog-title">{{ item.measurePointName }}</div>
|
|
<div class="dialog-text">监测类型:{{item.monitorTypeName}}</div>
|
|
<div class="dialog-text">单次变化值:{{ item.sensorlist[0].data}}</div>
|
|
<div class="dialog-text">累计变化值:{{ item.sensorlist[0].dataTotal}}</div>
|
|
<div class="dialog-text">变化速率:{{ item.sensorlist[0].dataRate}}</div>
|
|
<div class="dialog-text">采集时间:{{ item.sensorlist[0].receiveTime}}</div>
|
|
<div style="border-bottom: 1px solid rgba(255, 255, 255, 0.2); margin-top: 5%"></div>
|
|
<div class="dialog-text">当前累计变化值为{{ item.sensorlist[0].dataTotal}},超过报警值{{ item.sensorlist[0].dataTotal - item.sensorlist[0].alarmValue}}</div>
|
|
<div class="close-icon" @click="closeDialog">
|
|
<el-icon><Close /></el-icon>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="notoDta" v-if="list.length == 0">
|
|
<img src="@/assets/images/noData.png" alt="" />
|
|
<p>暂无数据</p>
|
|
</div>
|
|
<!-- <div class="check-time">已安全监测: 2065天19时30分28秒</div> -->
|
|
</div>
|
|
</Card>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import Card from "@/components/card.vue";
|
|
import { selectDeepExcavationList, selectDeepPicList, selectDeepPointList } from "@/api/modules/securityManagement";
|
|
import { reactive, ref, onMounted, onBeforeUnmount } from "vue";
|
|
import mitts from "@/utils/bus"; //兄弟组件传值
|
|
import { GlobalStore } from "@/stores";
|
|
const store = GlobalStore();
|
|
const BASEURL = import.meta.env.VITE_API_URL;
|
|
let currentIndex = ref(1 as any);
|
|
// let showDialog = ref(false as any);
|
|
function openDialog(item: any) {
|
|
currentIndex.value = item.id;
|
|
showDialog.value = true;
|
|
}
|
|
function closeDialog() {
|
|
showDialog.value = false;
|
|
console.log("点击");
|
|
}
|
|
const list = ref([]);
|
|
|
|
|
|
// 当前对应的种类
|
|
let selectDay = ref("");
|
|
let devList = ref([]);
|
|
|
|
let showDialog = ref(false as any);
|
|
function handleClick(event: any) {
|
|
console.log("点击", event.target.className);
|
|
if (event.target.className == "list-detail") {
|
|
showDialog.value = false;
|
|
}
|
|
}
|
|
const getDevOption = async () => {
|
|
const res: any = await selectDeepExcavationList({ projectSn: store.sn });
|
|
console.log("设备列表", res);
|
|
if (res.result.length > 0) {
|
|
devList.value = res.result;
|
|
selectDay.value = res.result[0].id;
|
|
mitts.emit("foundationPitId", selectDay.value);
|
|
getGantryCurrentData();
|
|
}
|
|
};
|
|
|
|
function selectChange(e: any) {
|
|
console.log("选择", e);
|
|
selectDay.value = e;
|
|
list.value = []
|
|
mitts.emit("foundationPitId", e);
|
|
getGantryCurrentData();
|
|
}
|
|
|
|
let currentData = ref({}) as any;
|
|
// 获取图列表
|
|
const getGantryCurrentData = async () => {
|
|
const res: any = await selectDeepPicList({ projectSn: store.sn, deepExcavationId: selectDay.value });
|
|
console.log("获取图列表", res);
|
|
if (res.result.length > 0) {
|
|
currentData.value = res.result[0];
|
|
getPointList();
|
|
}
|
|
};
|
|
|
|
// 获取点位
|
|
const getPointList = async () => {
|
|
const res: any = await selectDeepPointList({ projectSn: store.sn, planeFigureId: currentData.value.id, deepExcavationId: selectDay.value });
|
|
console.log("获取点位", res);
|
|
if (res.result.length > 0) {
|
|
list.value = res.result;
|
|
}
|
|
};
|
|
|
|
onMounted(async () => {
|
|
getDevOption();
|
|
});
|
|
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.item-dialog {
|
|
width: 189px;
|
|
padding: 2%;
|
|
left: 100%;
|
|
top: -40%;
|
|
z-index: 10;
|
|
color: #ffffff;
|
|
font-size: 12px;
|
|
opacity: 0.8;
|
|
background-color: #000000;
|
|
position: absolute;
|
|
.dialog-title {
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
|
padding-bottom: 2%;
|
|
}
|
|
.dialog-time {
|
|
margin-top: 4%;
|
|
width: 100%;
|
|
text-align: right;
|
|
}
|
|
.dialog-text {
|
|
margin-top: 5%;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
.triangle {
|
|
position: absolute;
|
|
width: 0;
|
|
height: 0;
|
|
left: -4%;
|
|
top: 5%;
|
|
border-top: 8px solid transparent;
|
|
border-bottom: 8px solid transparent;
|
|
border-right: 12px solid #000000;
|
|
}
|
|
.close-icon {
|
|
position: absolute;
|
|
right: 5%;
|
|
top: 3%;
|
|
cursor: pointer;
|
|
color: #ffffff;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
.changeColor1 {
|
|
background: #48da39;
|
|
}
|
|
.changeColor2 {
|
|
background: #eea959;
|
|
}
|
|
.changeColor3 {
|
|
background: #ec6266;
|
|
}
|
|
.pit-top-left {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
.point-map {
|
|
width: 80%;
|
|
height: 70%;
|
|
margin: 0 auto;
|
|
margin-top: 5%;
|
|
position: relative;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.point-list {
|
|
.point-item {
|
|
width: 20px;
|
|
height: 20px;
|
|
cursor: pointer;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
}
|
|
}
|
|
}
|
|
.point-state-top {
|
|
width: 100%;
|
|
display: flex;
|
|
padding-top: 5%;
|
|
margin-left: 5%;
|
|
.common {
|
|
width: 25%;
|
|
display: flex;
|
|
align-items: center;
|
|
.background {
|
|
width: 10px;
|
|
height: 10px;
|
|
margin-right: 15%;
|
|
background: #48da39;
|
|
}
|
|
.state-text {
|
|
color: #ffffff;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
.warn {
|
|
width: 30%;
|
|
display: flex;
|
|
align-items: center;
|
|
.background {
|
|
width: 10px;
|
|
height: 10px;
|
|
margin-right: 15%;
|
|
background: #eea959;
|
|
}
|
|
.state-text {
|
|
color: #ffffff;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
.control {
|
|
width: 30%;
|
|
display: flex;
|
|
align-items: center;
|
|
.background {
|
|
width: 10px;
|
|
height: 10px;
|
|
margin-right: 15%;
|
|
background: #ec6266;
|
|
}
|
|
.state-text {
|
|
color: #ffffff;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
}
|
|
.check-time {
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: 16px;
|
|
margin-top: 3%;
|
|
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
.select-right {
|
|
position: absolute;
|
|
right: 1%;
|
|
width: 30%;
|
|
top: -13%;
|
|
z-index: 9;
|
|
}
|
|
:deep(.el-input__wrapper) {
|
|
background: #112d59;
|
|
}
|
|
:deep(.el-input__inner) {
|
|
color: #fff;
|
|
}
|
|
:deep(.el-select .el-input .el-select__caret) {
|
|
color: #fff;
|
|
}
|
|
.notoDta {
|
|
top: 35%;
|
|
width: 50%;
|
|
left: 30%;
|
|
position: absolute;
|
|
text-align: center;
|
|
img {
|
|
width: 40%;
|
|
margin: 5% 30%;
|
|
}
|
|
p {
|
|
color: #fff;
|
|
font-size: 14px;
|
|
margin: -6% 37%;
|
|
}
|
|
}
|
|
</style>
|