<!-- 总体概览右侧面板 -->
<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: '003',
},
{ 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: ['9/1', '9/2', '9/3', '9/4', '9/5', '9/6', '9/7'],
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(0, 242, 255, 0.5) 0%, rgba(0, 242, 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(21, 210, 253, 0.2) 0%, rgba(21, 210, 253, 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: #00f2ff;
}
.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: #09bdf2;
}
.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: #00f2ff;
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: #00f2ff;
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>
