390 lines
9.7 KiB
Vue
390 lines
9.7 KiB
Vue
<template>
|
|
<Card title="高边坡实时监测">
|
|
<div class="formwork-top-right">
|
|
<div class="left-point-map">
|
|
<div class="monitor-time">
|
|
<span> 已监测时长: {{ monitorTimeText }} </span>
|
|
<el-select v-model="selectSlope" style="width: 140px; margin-right: 10px" size="small" @change="slopeListChange">
|
|
<el-option v-for="(item, index) in slopeList" :key="index" :label="item.slopeName" :value="item.id" />
|
|
</el-select>
|
|
<el-select v-model="selectView" style="width: 140px; margin-right: 10px" size="small">
|
|
<el-option v-for="(item, index) in viewList" :key="index" :label="item.planeFigureName" :value="item.id" />
|
|
</el-select>
|
|
</div>
|
|
<div class="point-state">
|
|
<div class="common">
|
|
<div class="state-color"></div>
|
|
<div class="state-text">正常</div>
|
|
</div>
|
|
<div class="warn">
|
|
<div class="state-color"></div>
|
|
<div class="state-text">超出报警值</div>
|
|
</div>
|
|
<div class="control">
|
|
<div class="state-color"></div>
|
|
<div class="state-text">超出控制值</div>
|
|
</div>
|
|
</div>
|
|
<div class="point-map">
|
|
<img :src="planViewData?.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
|
|
? 'changeColor3'
|
|
: item.alarmState == 3
|
|
? 'changeColor2'
|
|
: ''
|
|
"
|
|
:style="{
|
|
left: (+item.mapX*100/721) + '%',
|
|
top: (+item.mapY*100/545) + '%'
|
|
}"
|
|
@click="openDialog(item)"
|
|
></div>
|
|
<div
|
|
class="item-dialog"
|
|
:style="{
|
|
left: ((+item.mapX - 65)*100/721) + '%',
|
|
top: ((+item.mapY - 90)*100/545) + '%'
|
|
}"
|
|
v-if="item.id === currentIndex && showDialog"
|
|
@click="closeDialog"
|
|
>
|
|
<div class="triangle"></div>
|
|
<div class="dialog-title">{{ item.measurePointName }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="right-list">
|
|
<div class="list-tab">
|
|
<div class="tab-box" v-for="(item, index) in topText" :key="item.id" @click="activeBtn(item)">
|
|
<div class="text" :style="getStyle(item)">{{ item.title }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="select-project">
|
|
<el-select v-model="selectPoint" style="width: 90%; margin-right: 5%" size="small">
|
|
<el-option v-for="(item, index) in pointList" :key="index" :label="item.measurePointName" :value="item.measurePointNumber" />
|
|
</el-select>
|
|
</div>
|
|
<div class="monitor-list">
|
|
<div class="realTime-list" v-if="tabIndex == 1">
|
|
<real-time-list :selectPoint="selectPoint"></real-time-list>
|
|
</div>
|
|
<div class="history-list" v-if="tabIndex == 2">
|
|
<history-list :selectPoint="selectPoint"></history-list>
|
|
</div>
|
|
<div class="alarm-list" v-if="tabIndex == 3">
|
|
<alarm-list :selectPoint="selectPoint"></alarm-list>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import Card from "@/components/card.vue";
|
|
import { watch, ref, onMounted } from "vue";
|
|
import realTimeList from "@/views/sevenLargeScreen/safetyManagement/highSlope/real-time-list.vue";
|
|
import historyList from "@/views/sevenLargeScreen/safetyManagement/highSlope/history-list.vue";
|
|
import alarmList from "@/views/sevenLargeScreen/safetyManagement/highSlope/alarm-list.vue";
|
|
import { highSlopeRealMonitorTime, highSlopeList, selectPlanView, selectPlanViewPoint, highSlopeMonitorType } from "@/api/modules/highSlope";
|
|
import firstIcon from "@/assets/images/smartPartyBuilding/contentBox.png";
|
|
|
|
import { GlobalStore } from "@/stores";
|
|
const store = GlobalStore();
|
|
const planViewData = ref<any>();
|
|
const slopeList = ref([] as any);
|
|
const viewList = ref([] as any);
|
|
const selectSlope = ref("");
|
|
const selectView = ref("");
|
|
const monitorTimeText = ref("");
|
|
const selectPoint = ref("" as any);
|
|
const pointList = ref([] as any);
|
|
let tabIndex = ref(1 as any);
|
|
let topText = ref([
|
|
{ id: 1, title: "实时值", isActive: true },
|
|
{ id: 2, title: "历史数据", isActive: false },
|
|
{ id: 3, title: "报警记录", isActive: false }
|
|
]);
|
|
|
|
// function boxStyle(item: any) {
|
|
// if (item.isActive) {
|
|
// let choiseStyle = {
|
|
// background: `url(${firstIcon}) no-repeat`,
|
|
// backgroundSize: "100% 100%"
|
|
// };
|
|
// return choiseStyle;
|
|
// }
|
|
// return {};
|
|
// }
|
|
watch(
|
|
() => selectView.value,
|
|
newVal => {
|
|
planViewData.value = viewList.value.find((item: any) => item.id === newVal);
|
|
getMonitorViewPoint();
|
|
}
|
|
);
|
|
// 获取监测类型
|
|
// const getMonitorType = async () => {
|
|
// const res: any = await highSlopeMonitorType({ highSlopePlaneFigureId: selectView.value });
|
|
// console.log("获取监测类型", res);
|
|
// pointList.value = res.result;
|
|
// if (res.result && res.result.length > 0) {
|
|
// selectPoint.value = res.result[0].id;
|
|
// }
|
|
// };
|
|
// 边坡列表选择切换时
|
|
const slopeListChange = async (e: any) => {
|
|
console.log(e, "选中");
|
|
await getMonitorView();
|
|
};
|
|
// 获取监测点数据
|
|
const getMonitorViewPoint = async () => {
|
|
const res: any = await selectPlanViewPoint({ highSlopeEngineeringId: selectSlope.value, highSlopePlaneFigureId: selectView.value });
|
|
console.log("获取监测点数据", res);
|
|
list.value = res.result;
|
|
pointList.value = res.result
|
|
if(res.result && res.result.length > 0){
|
|
selectPoint.value = res.result[0].measurePointNumber
|
|
}
|
|
};
|
|
// 获取监测图纸
|
|
const getMonitorView = async () => {
|
|
const res: any = await selectPlanView({ projectSn: store.sn, highSlopeEngineeringId: selectSlope.value });
|
|
console.log("获取监测图纸", res);
|
|
viewList.value = res.result;
|
|
if (viewList.value && viewList.value.length > 0) {
|
|
planViewData.value = viewList.value[0];
|
|
selectView.value = viewList.value[0].id;
|
|
}
|
|
};
|
|
// 获取边坡列表
|
|
const getSlopeList = async () => {
|
|
const res: any = await highSlopeList({ projectSn: store.sn });
|
|
console.log("获取边坡列表", res);
|
|
slopeList.value = res.result;
|
|
if (slopeList.value && slopeList.value.length > 0) {
|
|
selectSlope.value = slopeList.value[0].id;
|
|
}
|
|
};
|
|
// 获取监测时长
|
|
const getMonitorTime = async () => {
|
|
const res: any = await highSlopeRealMonitorTime({ projectSn: store.sn });
|
|
console.log("获取监测时长", res);
|
|
monitorTimeText.value = res.result;
|
|
};
|
|
function getStyle(item: any) {
|
|
if (item.isActive) {
|
|
let choiseStyle = {
|
|
color: "#4AC0F3"
|
|
};
|
|
return choiseStyle;
|
|
}
|
|
return {};
|
|
}
|
|
|
|
function activeBtn(item: any) {
|
|
let currentState = item.isActive;
|
|
if (!currentState) {
|
|
topText.value.forEach(el => {
|
|
el.isActive = false;
|
|
});
|
|
item.isActive = !currentState;
|
|
tabIndex.value = item.id;
|
|
}
|
|
}
|
|
|
|
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([] as any);
|
|
onMounted(async () => {
|
|
await getMonitorTime();
|
|
await getSlopeList();
|
|
await getMonitorView();
|
|
await getMonitorViewPoint();
|
|
// await getMonitorType();
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.item-dialog {
|
|
width: 100px;
|
|
padding: 2%;
|
|
z-index: 10;
|
|
color: #ffffff;
|
|
font-size: 12px;
|
|
opacity: 0.8;
|
|
background-color: #000000;
|
|
position: absolute;
|
|
.dialog-title {
|
|
text-align: center;
|
|
padding-bottom: 2%;
|
|
}
|
|
.triangle {
|
|
position: absolute;
|
|
width: 0;
|
|
height: 0;
|
|
left: 42%;
|
|
bottom: -21%;
|
|
border-left: 10px solid transparent;
|
|
border-top: 10px solid #000000;
|
|
border-right: 10px solid transparent;
|
|
}
|
|
}
|
|
.changeColor1 {
|
|
background: #48da39;
|
|
}
|
|
.changeColor2 {
|
|
background: #eea959;
|
|
}
|
|
.changeColor3 {
|
|
background: #ec6266;
|
|
}
|
|
.formwork-top-right {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
position: relative;
|
|
.left-point-map {
|
|
width: 44%;
|
|
.point-map {
|
|
width: 90%;
|
|
height: 65%;
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
.monitor-time {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 3%;
|
|
> span {
|
|
font-size: 16px;
|
|
margin-left: 5%;
|
|
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
|
color: #ffffff;
|
|
margin-right: auto;
|
|
}
|
|
}
|
|
.point-state {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
padding-top: 5%;
|
|
padding-left: 5%;
|
|
color: #ffffff;
|
|
font-size: 14px;
|
|
.common {
|
|
width: 20%;
|
|
display: flex;
|
|
align-items: center;
|
|
.state-color {
|
|
width: 10px;
|
|
height: 10px;
|
|
margin-right: 15%;
|
|
background: #48da39;
|
|
}
|
|
}
|
|
.warn {
|
|
width: 25%;
|
|
display: flex;
|
|
align-items: center;
|
|
.state-color {
|
|
width: 10px;
|
|
height: 10px;
|
|
margin-right: 15%;
|
|
background: #eea959;
|
|
}
|
|
}
|
|
.control {
|
|
width: 25%;
|
|
display: flex;
|
|
align-items: center;
|
|
.state-color {
|
|
width: 10px;
|
|
height: 10px;
|
|
margin-right: 15%;
|
|
background: #ec6266;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.right-list {
|
|
width: 56%;
|
|
position: relative;
|
|
.select-project {
|
|
position: absolute;
|
|
right: 0%;
|
|
top: 5%;
|
|
}
|
|
.monitor-list {
|
|
width: 100%;
|
|
height: 90%;
|
|
.realTime-list,.history-list,.alarm-list {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.list-tab {
|
|
display: flex;
|
|
.tab-box {
|
|
margin-right: 5%;
|
|
margin-top: 3%;
|
|
.text {
|
|
font-size: 14px;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
:deep(.el-input__wrapper) {
|
|
background: #112d59;
|
|
}
|
|
:deep(.el-input__inner) {
|
|
color: #fff;
|
|
}
|
|
:deep(.el-select .el-input .el-select__caret) {
|
|
color: #fff;
|
|
}
|
|
:deep(.el-date-editor) {
|
|
width: 100%;
|
|
}
|
|
:deep(.el-range-separator) {
|
|
color: #fff;
|
|
}
|
|
:deep(.el-date-editor .el-range-input) {
|
|
color: #fff;
|
|
}
|
|
</style>
|