<!-- 总体概览右侧面板 -->
<template>
<div class="rightQL">
<!-- 运行监测 -->
<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_stateIcon" :class="jgjcData[item.code] == '1' ? '' : 'red'"></div>
</div>
<div class="pieBox">
<pieRing :echartData="pieData" :refresh="chartRefresh"></pieRing>
<div class="boxCircle">
<div class="biaoji1"></div>
<div class="biaoji2"></div>
<div class="biaoji3"></div>
<div class="biaoji4"></div>
<div class="outCircle">
<div class="innerCircle"></div>
</div>
<div class="circleValue">{{ pieData.data }}<span>分</span></div>
</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="YXJC_Box3_tableHeader">
<span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan1">方向</span>
<span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan2">车牌</span>
<span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan3">通行时间</span>
<span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan4">载重</span>
<span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan5">超重</span>
</div>
<div class="YXJC_Box3_tableBody">
<div class="YXJC_Box3_tableList" v-for="item in YXJCTableData">
<span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan1">{{ item.fx }}</span>
<span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan2">{{ item.cp }}</span>
<span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan3">{{ item.sj }}</span>
<span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan4">{{ item.zz }}</span>
<span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan5">{{ item.cz }}</span>
</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="rightQL">
import twoLine from '../smartTunnel/components/twoLine.vue';
import pieRing from './components/pieRing.vue';
import { ref, reactive, toRefs, onMounted } from 'vue';
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: 'nd' },
{ name: '振动', code: 'zd' },
{ name: '位移', code: 'wy' },
{ name: '索力', code: 'sl' },
{ name: '裂缝', code: 'lf' },
{ name: '应变', code: 'yb' },
];
const jgjcData = ref({
nd: '1',
zd: '1',
wy: '0',
sl: '1',
lf: '1',
yb: '1',
});
const YXJCTableData = [
{
fx: '北向南',
cp: '陕J-24YU8',
sj: '2024-09-30 12:26:00',
zz: '54.6',
cz: '16.2',
},
{
fx: '南北向',
cp: '陕J-24YU8',
sj: '2024-09-29 16:32:00',
zz: '48',
cz: '9.6',
},
];
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'],
},
],
});
const pieData = ref({
data: 80,
});
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,
}
);
onMounted(() => {});
</script>
<style lang="scss" scoped>
.rightQL {
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: 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 {
position: relative;
height: 140px;
.pieBox {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 140px;
height: 140px;
box-sizing: border-box;
// border: 1px solid rgba(255, 255, 255, 0.2);
.boxCircle {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
.circleValue {
width: 60px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-weight: bold;
font-size: 28px;
color: #3efeca;
text-align: center;
span {
font-weight: 500;
font-size: 16px;
color: #cef6ff;
}
}
.biaoji1 {
width: 10px;
height: 2px;
position: absolute;
top: 50%;
left: 0;
background-color: #ffffff;
z-index: 99;
}
.biaoji2 {
width: 10px;
height: 2px;
position: absolute;
top: 50%;
right: 0;
background-color: #ffffff;
z-index: 99;
}
.biaoji4 {
width: 2px;
height: 10px;
position: absolute;
left: 50%;
bottom: 0;
background-color: #ffffff;
z-index: 99;
}
.biaoji3 {
width: 2px;
height: 10px;
position: absolute;
left: 50%;
top: 0;
background-color: #ffffff;
z-index: 99;
}
.outCircle {
position: relative;
// left: 0;
// top: 0;
width: 90px;
height: 90px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
/* border: 1px solid red; */
background: conic-gradient(from 0deg at 50% 50%, rgba(62, 255, 203, 0) 0%, #3effcb 100%);
animation: rotateGradient 5s linear infinite;
overflow: hidden;
}
.innerCircle {
position: absolute;
top: 10px;
left: 10px;
width: 70px;
height: 70px;
border-radius: 50%;
background-color: #235b7c;
}
@keyframes rotateGradient {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
}
}
}
.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;
display: flex;
align-items: center;
&:nth-child(2n + 1) {
background: linear-gradient(90deg, rgba(21, 210, 253, 0.2) 0%, rgba(21, 210, 253, 0.05) 100%);
.jcInfo_title {
margin-left: 15px;
}
.jcInfo_stateIcon {
margin-left: 10px;
}
&::before {
content: '';
width: 4px;
height: 40px;
position: absolute;
left: 0;
top: 0;
background: #00f2ff;
}
}
&:nth-child(2n) {
flex-direction: row-reverse;
background: linear-gradient(90deg, rgba(21, 210, 253, 0.05) 0%, rgba(21, 210, 253, 0.2) 100%);
.jcInfo_title {
margin-right: 15px;
}
.jcInfo_stateIcon {
margin-right: 10px;
}
&::after {
content: '';
width: 4px;
height: 40px;
position: absolute;
right: 0;
top: 0;
background: #00f2ff;
}
}
.jcInfo_title {
font-weight: bold;
font-size: 16px;
color: #ebfeff;
// margin-left: 15px;
}
.jcInfo_stateIcon {
width: 10px;
height: 10px;
background: #00ff9c;
border-radius: 50%;
// margin-right: 3px;
&.red {
background: #fe667b;
}
}
}
.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;
}
}
.YXJC_Box3_tableHeader {
width: 100%;
height: 35px;
line-height: 35px;
background: linear-gradient(0deg, rgba(21, 210, 253, 0.2) 0%, rgba(0, 158, 164, 0.5) 100%);
border-radius: 2px;
}
.YXJC_Box3_tableBody {
width: 100%;
// height: calc(100% - 40px);
overflow: auto;
.YXJC_Box3_tableList {
width: 100%;
height: 40px;
line-height: 40px;
font-size: 16px;
background: linear-gradient(0deg, rgba(21, 210, 253, 0.2) 0%, rgba(0, 158, 164, 0.05) 100%);
border-radius: 2px;
.YXJC_Box3_tableSpan5 {
color: #ff3f3f;
}
}
}
.YXJC_Box3_tableSpan {
display: inline-block;
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 14px;
color: #ebfeff;
text-align: center;
}
.YXJC_Box3_tableSpan1 {
width: 60px;
}
.YXJC_Box3_tableSpan2 {
width: 100px;
}
.YXJC_Box3_tableSpan3 {
width: 158px;
}
.YXJC_Box3_tableSpan4 {
width: 50px;
}
.YXJC_Box3_tableSpan5 {
width: 50px;
}
}
}
.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>
