354 lines
7.2 KiB
Vue
354 lines
7.2 KiB
Vue
<template>
|
|
<Card title="高边坡实时监测">
|
|
<div class="formwork-top-right">
|
|
<div class="left-point-map">
|
|
<div class="monitor-time">已监测时长: 1天10时03分19秒</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="@/assets/images/foundationPitMonitor/highPointPic.png" 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.xMap + 'px',
|
|
top: item.yMap + 'px'
|
|
}"
|
|
@click="openDialog(item)"
|
|
></div>
|
|
<div
|
|
class="item-dialog"
|
|
:style="{
|
|
left: item.xMap - 50 + 'px',
|
|
top: item.yMap - 50 + 'px'
|
|
}"
|
|
v-if="item.id === currentIndex && showDialog"
|
|
@click="closeDialog"
|
|
>
|
|
<div class="triangle"></div>
|
|
<div class="dialog-title">{{ item.pointName }}</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="selectProject" style="width: 90%; margin-right: 5%" size="small">
|
|
<el-option v-for="(item, index) in pointList" :key="index" :label="item.dayType" :value="item.value" />
|
|
</el-select>
|
|
</div>
|
|
<div class="monitor-list">
|
|
<div class="realTime-list" v-if="tabIndex == 1">
|
|
<real-time-list></real-time-list>
|
|
</div>
|
|
<div class="history-list" v-if="tabIndex == 2">
|
|
<history-list></history-list>
|
|
</div>
|
|
<div class="alarm-list" v-if="tabIndex == 3">
|
|
<alarm-list></alarm-list>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import Card from "@/components/card.vue";
|
|
import { reactive, 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 firstIcon from "@/assets/images/smartPartyBuilding/contentBox.png";
|
|
|
|
let selectProject = ref(1 as any);
|
|
let pointList = ref([
|
|
{
|
|
value: 1,
|
|
dayType: "高边坡工程01—进行中"
|
|
},
|
|
{
|
|
value: 2,
|
|
dayType: "高边坡工程02—进行中"
|
|
},
|
|
{
|
|
value: 3,
|
|
dayType: "高边坡工程03—进行中"
|
|
},
|
|
{
|
|
value: 4,
|
|
dayType: "高边坡工程04—进行中"
|
|
}
|
|
]);
|
|
|
|
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 {};
|
|
// }
|
|
|
|
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 = reactive([
|
|
{
|
|
id: 1,
|
|
alarmState: 1,
|
|
xMap: 200,
|
|
yMap: 170,
|
|
pointName: "基坑监测点001"
|
|
},
|
|
{
|
|
id: 2,
|
|
alarmState: 2,
|
|
xMap: 150,
|
|
yMap: 90,
|
|
pointName: "基坑监测点002"
|
|
},
|
|
{
|
|
id: 3,
|
|
alarmState: 1,
|
|
xMap: 160,
|
|
yMap: 260,
|
|
pointName: "基坑监测点003"
|
|
},
|
|
{
|
|
id: 4,
|
|
alarmState: 3,
|
|
xMap: 380,
|
|
yMap: 200,
|
|
pointName: "基坑监测点004"
|
|
}
|
|
]);
|
|
</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%;
|
|
font-size: 16px;
|
|
margin-top: 3%;
|
|
margin-left: 5%;
|
|
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
|
color: #ffffff;
|
|
}
|
|
.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 {
|
|
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>
|