<!-- 总体概览右侧面板 -->
<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-11-12 12:26:00",
zz: "54.6",
cz: "16.2",
},
{
fx: "南北向",
cp: "陕J-24YU8",
sj: "2024-11-12 16:32:00",
zz: "48",
cz: "9.6",
},
];
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"],
},
],
});
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: #ffffff;
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%);
background: linear-gradient(0deg, rgba(28,138,255,0.5) 0%, rgba(28,138,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: #1c8aff;
// color: #3efeca;
text-align: center;
span {
font-weight: 500;
font-size: 16px;
color: #ffffff;
}
}
.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(28, 138, 255, 0) 0%, #1c8aff 100%);
animation: rotateGradient 5s linear infinite;
overflow: hidden;
}
.innerCircle {
position: absolute;
top: 10px;
left: 10px;
width: 70px;
height: 70px;
border-radius: 50%;
background-color: #243f6a;
}
@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(28, 138, 255, 0.2) 0%, rgba(28, 138, 255, 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: #1c8aff;
}
}
&:nth-child(2n) {
flex-direction: row-reverse;
background: linear-gradient(90deg, rgba(28, 138, 255, 0.05) 0%, rgba(28, 138, 255, 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: #1c8aff;
}
}
.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(28, 138, 255, 0.2) 0%, rgba(28, 138, 255, 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,141,253,0.2) 0%, rgba(21,141,253,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;
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>
