<!-- 总体概览右侧面板 -->
<template>
<div class="rightSD">
<!-- 运行监测 -->
<div class="topBox">
<div class="ListBoxHeader">
<div class="ListBoxHeader_font">运行监测</div>
</div>
<div class="topContent">
<!-- 结构监测 -->
<div class="jcBox">
<div class="jcBox_Header">
<img
src="@/assets/images/Sponge_screen/QiaoLiang/JX.png"
class="jcBox_HeaderIcon"
/>
<span class="jcBox_HeaderFont">结构监测</span>
</div>
<div class="jcBox_Content jgBox">
<div class="jcInfo" v-for="(item, index) in jgjcTitle" :key="item.code">
<div class="jcInfo_title">{{ item.name }}</div>
<div
class="jcInfo_state"
:class="jgjcData[item.code] == '1' ? '' : 'active'"
>
<div
class="jcInfo_stateIcon"
:class="jgjcData[item.code] == '1' ? '' : 'active'"
></div>
{{ jgjcData[item.code] == "1" ? "正常" : "异常" }}
</div>
<div
class="jcInfo_btn"
v-show="jgjcData[item.code] == '0'"
@click="GongDanPaiFa(item)"
>
派单
</div>
</div>
</div>
</div>
<!-- 通行监测 -->
<div class="jcBox txBox">
<div class="jcBox_Header">
<img
src="@/assets/images/Sponge_screen/QiaoLiang/JX.png"
class="jcBox_HeaderIcon"
/>
<span class="jcBox_HeaderFont">通行监测</span>
</div>
<div class="lineBox">
<twoLine :echartData="lineData" :refresh="chartRefresh" />
</div>
</div>
<!-- 突发事件监测 -->
<div class="jcBox">
<div class="jcBox_Header">
<img
src="@/assets/images/Sponge_screen/QiaoLiang/JX.png"
class="jcBox_HeaderIcon"
/>
<span class="jcBox_HeaderFont">突发事件监测</span>
</div>
<div class="jcBox_Content">
<div class="tfInfo" v-for="(item, index) in tfjcTitle" :key="item.code">
<img :src="item.icon" alt="" class="tfInfo_icon" />
<div class="tfInfo_title">{{ item.name }}</div>
<div
class="tfInfo_state"
:class="tfjcData[item.code] == '0' ? '' : 'active'"
>
{{ tfjcData[item.code] == "1" ? "有" : "无" }}
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 检测评估 -->
<div class="bottomBox">
<div class="ListBoxHeader">
<div class="ListBoxHeader_font">检测评估</div>
<img src="@/assets/tunnelImg/bg_img.png" alt="" class="ListBoxHeader_img" />
</div>
<div class="bottomContent">
<div class="contentTop">
<div class="pgBox">
<div class="pgInfo">
<div>{{ assessment.update.slice(0, 4) }}年</div>
<div>
{{ assessment.update.slice(5, 7) }}月{{ assessment.update.slice(8) }}日
</div>
</div>
<div class="pgTitle">最近一次检测</div>
</div>
<div class="pgBox">
<div class="pgInfo">
<div>{{ assessment.state }}</div>
</div>
<div class="pgTitle">整体工作性能</div>
</div>
<div class="pgBox">
<div class="pgInfo">
<div>{{ assessment.level }}</div>
</div>
<div class="pgTitle">技术状况等级</div>
</div>
</div>
<div class="contentBottom">
<div>检测单位</div>
<div class="pgCompany">{{ assessment.company }}</div>
</div>
</div>
</div>
</div>
</template>
<script setup name="rightSD">
import twoLine from "./components/twoLine.vue";
import { ref, reactive, toRefs, onMounted } from "vue";
import bus from "@/bus";
import yjsj from "@/assets/newImgs/yjsj.png"; //预警数据
import czsj from "@/assets/newImgs/czsj.png"; //处置数据
import czl from "@/assets/newImgs/czl.png"; //处置率
import ranqi_icon from "@/assets/newImgs/ranqi_icon.png"; //燃气
import qiaoliang from "@/assets/newImgs/qiaoliang.png"; //桥梁
import sd_icon from "@/assets/newImgs/sd_icon.png"; //隧道
import ps_icon from "@/assets/newImgs/ps_icon.png"; //隧道
import fxzb from "@/assets/newImgs/fxzb.png"; //风险占比
import hz_icon from "@/assets/tunnelImg/hz_icon.png";
import jtsg_icon from "@/assets/tunnelImg/jtsg_icon.png";
import ydqt_icon from "@/assets/tunnelImg/ydqt_icon.png";
let chartRefresh = ref(Math.random());
const assessment = ref({
update: "2023-11-20",
state: "良好",
level: "二类",
company: "陕西海嵘工程试验检测股份有限公司",
});
const jgjcTitle = [
{
name: "沉降监测",
code: "cj",
qy: "宝塔区凤凰山街道二道街",
tz: "压力监测异常波动",
sj: 5,
yp: "设施故障",
value: "001",
},
{
name: "滑坡监测",
code: "hp",
qy: "宝塔区凤凰山街道二道街",
tz: "燃气管道压力过大",
sj: 5,
yp: "燃气爆管风险",
value: "002",
},
{
name: "收敛监测",
code: "sl",
qy: "宝塔区凤凰山街道二道街",
tz: "高峰期流量持续降低",
sj: 4,
yp: "燃气泄漏风险",
value: "1849021488119042050",
},
{
name: "裂缝监测",
code: "lf",
qy: "宝塔区凤凰山街道二道街",
tz: "压力监测异常波动",
sj: 5,
yp: "设施故障",
value: "001",
},
{
name: "水位监测",
code: "sw",
qy: "宝塔区凤凰山街道二道街",
tz: "燃气管道压力过大",
sj: 5,
yp: "燃气爆管风险",
value: "002",
},
{
name: "应变监测",
code: "yb",
qy: "宝塔区凤凰山街道二道街",
tz: "燃气管道压力过大",
sj: 5,
yp: "燃气爆管风险",
value: "002",
},
];
const jgjcData = ref({
cj: "1",
hp: "1",
sl: "0",
lf: "1",
sw: "1",
yb: "1",
});
const tfjcTitle = [
{ name: "火灾", code: "hz", icon: hz_icon },
{ name: "交通事故", code: "jt", icon: jtsg_icon },
{ name: "有毒气体", code: "dq", icon: ydqt_icon },
];
const tfjcData = ref({
hz: "0",
jt: "0",
dq: "0",
});
const lineData = ref({
tabX: ["11/6", "11/7", "11/8", "11/9", "11/10", "11/12", "11/13"],
unit: "辆",
series: [
{
name: "南向北",
tabY: ["0", "150", "150", "200", "130", "320", "300"],
},
{
name: "北向南",
tabY: ["100", "200", "200", "150", "240", "240", "180"],
},
],
});
watch(
() => lineData.value,
(newVal, oldVal) => {
// console.log('change', newVal);
// eData.value = ArrayToObject(newVal.slice(0, 10));
// eData.value.headerList = headerList.value;
nextTick(() => {
chartRefresh.value = Math.random();
});
// console.log('obj', rightData.value);
},
{
immediate: true,
deep: true,
}
);
// 工单派发
const GongDanPaiFa = (item) => {
console.log(item);
let data = {
title: item.qy,
comIDs: ["gdpf"],
getSiteId: item.value,
};
bus.emit("publicDialog", data);
};
onMounted(() => {});
</script>
<style lang="scss" scoped>
.rightSD {
width: 100%;
height: 100%;
// box-sizing: border-box;
padding: 10px;
display: flex;
flex-direction: column;
}
.topBox {
width: 100%;
flex: 1;
// height: 49%;
// background: yellowgreen;
.topContent {
width: 100%;
margin: 0px 0 5px;
height: calc(100% - 49px);
display: flex;
flex-direction: column;
// border: 1px solid red;
.jcBox {
width: 100%;
margin-top: 5px;
.jcBox_Header {
height: 24px;
width: 100%;
.jcBox_HeaderIcon {
width: 24px;
height: 24px;
vertical-align: middle;
}
.jcBox_HeaderFont {
display: inline-block;
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 16px;
color: #ebfeff;
height: 24px;
line-height: 24px;
position: relative;
&::after {
content: "";
// width: 60px;
width: 100%;
height: 10px;
background: linear-gradient(0deg, rgba(28,138,255,0.5) 0%, rgba(28,138,255,0) 100%);
position: absolute;
bottom: 0;
left: 0;
}
}
}
.jgBox {
height: 140px;
}
.jcBox_Content {
margin-top: 5px;
// border: 1px solid red;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-content: space-between;
.jcInfo {
position: relative;
width: 200px;
height: 40px;
background: linear-gradient(90deg, rgba(28, 138, 255, 0.2) 0%, rgba(28, 138, 255, 0.05) 100%);
display: flex;
align-items: center;
// justify-content: space-between;
&::before {
content: "";
width: 4px;
height: 40px;
position: absolute;
left: 0;
top: 0;
background: #1c8aff;
}
.jcInfo_title {
font-weight: bold;
font-size: 16px;
color: #ebfeff;
margin-left: 15px;
}
.jcInfo_state {
display: flex;
align-items: center;
color: #00ff9c;
margin-left: 16px;
&.active {
color: #fe667b;
}
.jcInfo_stateIcon {
width: 10px;
height: 10px;
background: #00ff9c;
border-radius: 50%;
margin-right: 3px;
&.active {
background: #fe667b;
}
}
}
.jcInfo_btn {
width: 42px;
height: 24px;
margin-left: 12px;
background: #0ea3c3;
border-radius: 11px;
font-weight: 500;
font-size: 16px;
color: #ebfeff;
text-align: center;
cursor: pointer;
}
}
.tfInfo {
width: 136px;
height: 130px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: url("@/assets/tunnelImg/tfjcBg.png") no-repeat;
background-size: 100% 100%;
.tfInfo_icon {
width: 60px;
height: 60px;
}
.tfInfo_title {
font-weight: bold;
font-size: 16px;
color: #15d2fd;
}
.tfInfo_state {
font-weight: bold;
font-size: 26px;
color: #3effb9;
&.active {
color: #fe667b;
}
}
}
}
}
.txBox {
flex: 1;
// border: 1px solid red;
display: flex;
flex-direction: column;
.lineBox {
flex: 1;
// border: 1px solid red;
}
}
}
}
.bottomBox {
width: 100%;
// height: 49%;
// background: red;
// border: 1px solid red;
.bottomContent {
width: 100%;
.contentTop {
display: flex;
justify-content: space-between;
align-items: center;
margin: 8px 0;
.pgBox {
width: 136px;
height: 130px;
background: url("@/assets/images/Sponge_screen/QiaoLiang/FBox.png") no-repeat;
background-size: 100% 100%;
text-align: center;
.pgInfo {
width: 100%;
height: 89px;
display: flex;
flex-direction: column;
font-weight: bold;
font-size: 20px;
color: #15d2fd;
align-items: center;
justify-content: center;
}
.pgTitle {
font-family: Source Han Sans CN;
font-weight: 500;
font-size: 16px;
color: #ffffff;
height: 16px;
line-height: 16px;
// border: 1px solid red;
}
}
}
.contentBottom {
width: 100%;
height: 39px;
box-sizing: border-box;
line-height: 39px;
background: url("@/assets/images/Sponge_screen/QiaoLiang/CBox.png") no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
padding: 0 20px;
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 16px;
color: #ebfeff;
.pgCompany {
color: #15d2fd;
margin-left: 20px;
}
}
}
}
.ListBoxHeader {
height: 44px;
line-height: 50px;
width: 98%;
background: url("@/assets/newImgs/partBg.png") no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: space-between;
// margin: 7px 0px 0px 8px;
.ListBoxHeader_font {
font-family: PangMenZhengDao;
font-weight: 400;
font-size: 23px;
color: #ebfeff;
padding-left: 34px;
}
.ListBoxHeader_img {
width: 23px;
height: 27px;
margin-right: 5px;
}
}
</style>
