<template> <!-- 基础设施 --> <div class="infrastructure"> <div class="ListBoxHeader"> <div class="ListBoxHeader_font">基础设施</div> </div> <div class="jcssTop"> <div class="subRightBox"> <div class="headcenter" v-for="(item, index) in categoryList" :key="item" :class="activedname == item.name ? 'activedright' : ''" @click="categoryclick(item, index)" > {{ item.name }} </div> </div> <div class="jcssBox flex"> <div class="jcssTp"> <div class="jcsskj"> <img src="@/assets/newImgs/dz.png" alt="" class="DzImg" /> <img :src="riskData[0].Imgurl" alt="" class="NewImg" /> </div> </div> <div class="jcssContent"> <div class="jcssContent_z"> <div class="ListContent flex flex-align-center"> <div class="icon"></div> <div class="gw">{{ riskData[0].name1 }}</div> <div class="NumClass">{{ riskData[0].num1 }}</div> <div class="gl">{{ riskData[0].dw1 }}</div> </div> <div class="ListContent flex flex-align-center"> <div class="icon"></div> <div class="gw">{{ riskData[0].name2 }}</div> <div class="NumClass">{{ riskData[0].num2 }}</div> <div class="gl">{{ riskData[0].dw2 }}</div> </div> <div class="ListContent flex flex-align-center"> <div class="icon"></div> <div class="gw">{{ riskData[0].name3 }}</div> <div class="NumClass">{{ riskData[0].num3 }}</div> <div class="gl">{{ riskData[0].dw3 }}</div> </div> </div> </div> </div> </div> </div> <!-- 运行监测 --> <div class="Operationmonitoring"> <div class="ListBoxHeader"> <div class="ListBoxHeader_font">运行监测</div> </div> <div class="yxjcTop"> <div class="topVehicl flex"> <div class="icon"></div> <div class="text">预警监测</div> <div class="yxjcList"> <div class="head-right" style=""> <div class="head-item" v-for="(item, index) in yearList" :key="item" :class="yxjcname == item.name ? 'activedright' : ''" @click="yearclick(item, index)" > {{ item.name }} </div> </div> </div> </div> <div class="yxjcEcharts"> <publicEch :data="chartData2" :refresh="refresh" /> </div> </div> </div> <!-- 实时监测 --> <div class="Realtime"> <div class="ListBoxHeader"> <div class="ListBoxHeader_font">实时监测</div> </div> <div class="RealTop"> <div class="tableHeader"> <span class="tableHeaderList tableList1">位置</span> <span class="tableHeaderList tableList2">监测对象</span> <span class="tableHeaderList tableList3">监测指标</span> <span class="tableHeaderList tableList4">监测时间</span> <span class="tableHeaderList tableList5">状态</span> </div> <Vue3SeamlessScroll :list="FXJCData" :singleHeight="60" :singleWaitTime="1500" :hover="true" class="tableBody"> <div class="tableBodyList" v-for="item in FXJCData"> <span class="tableBodyList_span1" :title="item.name">{{ item.name }}</span> <span class="tableBodyList_span2" :title="item.jcdx">{{ item.jcdx }} </span> <span class="tableBodyList_span3" :title="item.jczb">{{ item.jczb }}</span> <div class="tableBodyList_span4" :title="item.jcsj">{{ item.jcsj }}</div> <span class="tableBodyList_span5"> <el-tag type="danger" v-if="item.zk == '异常'">异 常</el-tag> <el-tag type="success" v-if="item.zk == '正常'">正 常</el-tag> </span> </div> </Vue3SeamlessScroll> </div> </div> </template> <script setup> import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue'; import publicEch from '@/views/oneMap/Echarts/publicEch.vue'; import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'; import ranqi_icon from '@/assets/newImgs/rq.png'; //燃气 import qiaoliang from '@/assets/newImgs/ql.png'; //桥梁 import sd_icon from '@/assets/newImgs/sd.png'; //隧道 import ps_icon from '@/assets/newImgs/ps.png'; //排水 const chartData2 = ref({ xAxis: [], yAxis: [], yAxis2: [] }); const refresh = ref(''); const categoryList = ref([ { name: '燃气', value: 1 }, { name: '排水', value: 2 }, { name: '桥梁', value: 3 }, { name: '隧道', value: 4 }, ]); const yearList = ref([ { name: '7天', value: 1 }, { name: '15天', value: 2 }, { name: '30天', value: 3 }, ]); const FXJCData = ref([ { name: '延安中学', jcdx: '燃气管网', jczb: '甲烷浓度4.4%VOL', jcsj: '11:54', zk: '正常', }, { name: '延安大学附属医院', jcdx: '燃气管网', jczb: '甲烷浓度4%VOL', jcsj: '12:14', zk: '正常', }, { name: '王家坪大桥', jcdx: '桥梁结构', jczb: '倾角+1°', jcsj: '12:24', zk: '正常', }, { name: '王家坪大桥', jcdx: '桥梁结构', jczb: '位移12mm', jcsj: '13:13', zk: '正常', }, { name: '王家坪大桥', jcdx: '桥梁外部荷载', jczb: '均布荷载6.4kn/m', jcsj: '13:43', zk: '正常', }, { name: '王家坪大桥', jcdx: '桥梁气象环境', jczb: '风速3.2m/s', jcsj: '14:03', zk: '正常', }, { name: '杨家岭隧道', jcdx: '隧道结构', jczb: '裂缝宽度0.12mm', jcsj: '14:05', zk: '正常', }, { name: '杨家岭隧道', jcdx: '隧道结构', jczb: '静应变+10με', jcsj: '14:25', zk: '正常', }, { name: '王家坪旧址门口', jcdx: '积水液位', jczb: '水深0m', jcsj: '15:21', zk: '正常', }, { name: '大砭沟与北大街交叉口', jcdx: '积水液位', jczb: '水深0m', jcsj: '15:25', zk: '正常', }, ]); const yxjcname = ref('7天'); function yearclick(val) { yxjcname.value = val.name; } const riskData = ref([ { name1: '管网', name2: '传感器', name3: '窨井', num1: '234', num2: '12', num3: '12', Imgurl: ranqi_icon, dw1: '公里', dw2: '套', dw3: '口', }, ]); const activedname = ref('燃气'); // 点击事件 function categoryclick(val) { console.log(val.name, '1'); activedname.value = val.name; if (activedname.value == '燃气') { riskData.value = [ { name1: '管网', name2: '传感器', name3: '窨井', num1: '234', num2: '12', num3: '12', Imgurl: ranqi_icon, dw1: '公里', dw2: '套', dw3: '口', }, ]; } else if (activedname.value == '排水') { riskData.value = [ { name1: '管网', name2: '检查口', name3: '感知设备', num1: '234', num2: '234', num3: '18', Imgurl: ps_icon, dw1: '公里', dw2: '处', dw3: '套', }, ]; } else if (activedname.value == '桥梁') { riskData.value = [ { name1: '数量', name2: '长度', name3: '感知设备', num1: '1', num2: '204', num3: '92', Imgurl: qiaoliang, dw1: '座', dw2: '米', dw3: '套', }, ]; } else { riskData.value = [ { name1: '数量', name2: '长度', name3: '感知设备', num1: '1', num2: '750', num3: '111', Imgurl: sd_icon, dw1: '座', dw2: '米', dw3: '套', }, ]; } } function GetgetFacilities() { let obj = { x: ['燃气', '排水', '桥梁', '隧道', '其他'], y: ['870', '568', '700', '600', '276'], }; chartData2.value.xAxis = obj.x; chartData2.value.yAxis = obj.y; refresh.value = Math.random(); } onMounted(() => { GetgetFacilities(); }); </script> <style lang="scss" scoped> .infrastructure { width: 450px; height: 28%; // background: red; .jcssTop { width: 450px; height: calc(100% - 55px); margin: 8px auto; .subRightBox { width: 450px; margin: 0 auto; height: 35px; display: flex; cursor: pointer; font-size: 14px; color: #ffffff; .headcenter { width: 100px; height: 26px; padding: 2px 3px; background: #00344f; text-align: center; margin-top: 5px; margin-left: 10px; font-size: 16px; } .activedright { border: 1px solid #2cfce9; color: #e4f5ff; background: #166f84; } } .jcssBox { margin-top: 2px; width: 450px; height: calc(100% - 40px); .jcssTp { width: 43%; height: 100%; // background: #00344f; .jcsskj { position: relative; left: 50px; top: 14%; width: 118px; height: 111px; // background: red; .DzImg { position: relative; left: -20px; width: 151px; height: 111px; top: 10px; } .NewImg { position: relative; width: 60px; height: 60px; left: 25px; top: -100px; } } } .jcssContent { width: 52%; height: 100%; // background: yellowgreen; .jcssContent_z { position: relative; top: 20%; width: 100%; height: 100px; // background: red; .ListContent { height: 30px; margin-top: 5px; // background: yellow; .icon { width: 25px; height: 25px; background: url('@/assets/newImgs/xtb_img.png') no-repeat; } .gw { font-family: Source Han Sans CN; font-weight: bold; font-size: 16px; color: #85d2d4; padding-left: 5px; // background: yellow; width: 70px; } .NumClass { width: 70px; text-align: right; font-family: Source Han Sans CN; font-weight: bold; font-size: 26px; color: #12f9ff; padding-left: 20px; } .gl { font-family: Source Han Sans CN; padding-left: 10px; font-weight: bold; font-size: 16px; color: #85d2d4; } } } } } } } .Operationmonitoring { // background: blue; width: 450px; height: 33%; .yxjcTop { width: 450px; height: calc(100% - 60px); margin: 10px auto; // background: red; .topVehicl { height: 26px; .icon { position: relative; left: 10px; width: 25px; height: 25px; background: url('@/assets/newImgs/xtb_img.png') no-repeat; } .text { font-family: Source Han Sans CN; font-weight: bold; font-size: 16px; color: #ebfeff; line-height: 25px; position: relative; left: 12px; top: 10px; // box-shadow: inset 0px -7px 10px -5px #47eef38a; background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%); height: 10px; line-height: 0px; } .yxjcList { position: relative; left: 150px; display: flex; width: 46%; // background: rgb(92, 122, 96); .head-right { margin-top: 2px; cursor: pointer; font-size: 16px; color: #ffffff; display: flex; line-height: 18px; .head-item { width: 60px; margin-right: 10px; padding: 2px 3px; background: #00344f; height: 23px; text-align: center; } .activedright { border: 1px solid #2cfce9; color: #e4f5ff; background: #166f84; } } } } .yxjcEcharts { margin: 10px auto; width: 430px; height: calc(100% - 40px); } } } .Realtime { width: 450px; height: 35%; .RealTop { margin: 5px auto; width: 430px; height: calc(100% - 45px); .tableHeader { width: 100%; height: 34px; background: linear-gradient(0deg, #00fbffa3 0%, #00fbff00 100%); border-radius: 2px; border: 1px solid #74dde1; display: flex; .tableHeaderList { font-family: Source Han Sans CN; font-weight: 400; font-size: 14px; color: #ffffff; height: 34px; line-height: 34px; // padding-left: 5px; // text-align: center; } .tableList1 { width: 15%; text-align: center; } .tableList2 { width: 20%; text-align: center; } .tableList3 { width: 20%; text-align: center; } .tableList4 { width: 25%; text-align: center; } .tableList5 { width: 20%; text-align: center; } } .tableBody { width: 430px; height: calc(100% - 35px); overflow: hidden; margin: 0 auto; .tableBodyList { height: 60px; line-height: 60px; width: 100%; display: flex; /* 选择偶数行 */ &:nth-child(even) { background: linear-gradient(0deg, #008599 0%, #08596d 100%); } .tableBodyList_span1 { font-family: Source Han Sans CN; font-weight: 400; font-size: 14px; color: #ffffff; height: 60px; line-height: 60px; text-align: center; width: 15%; overflow: hidden; white-space: nowrap; /* 防止文字换行 */ text-overflow: ellipsis; /* 超出部分显示省略号 */ // background: #217e8cff; } .tableBodyList_span2 { font-family: Source Han Sans CN; font-weight: 400; font-size: 14px; color: #ffffff; height: 60px; line-height: 60px; text-align: center; width: 22%; overflow: hidden; white-space: nowrap; /* 防止文字换行 */ text-overflow: ellipsis; /* 超出部分显示省略号 */ } .tableBodyList_span3 { font-family: Source Han Sans CN; font-weight: 400; font-size: 14px; color: #ffffff; height: 60px; line-height: 60px; text-align: center; width: 20%; overflow: hidden; white-space: nowrap; /* 防止文字换行 */ text-overflow: ellipsis; /* 超出部分显示省略号 */ } .tableBodyList_span4 { font-family: Source Han Sans CN; font-weight: 400; font-size: 14px; color: #ffffff; height: 60px; line-height: 60px; text-align: center; width: 23%; overflow: hidden; white-space: nowrap; /* 防止文字换行 */ text-overflow: ellipsis; /* 超出部分显示省略号 */ } .tableBodyList_span5 { font-family: Source Han Sans CN; font-weight: 400; font-size: 14px; color: #ffffff; height: 60px; line-height: 60px; text-align: center; width: 20%; } } } } } .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; } } </style>