| |
---|
| | <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" |
---|
| | > |
---|
| | <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> |
---|
| | </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"; //排水 |
---|
| | 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 refresh = ref(''); |
---|
| | const categoryList = ref([ |
---|
| | { name: "燃气", value: 1 }, |
---|
| | { name: "排水", value: 2 }, |
---|
| | { name: "桥梁", value: 3 }, |
---|
| | { name: "隧道", value: 4 }, |
---|
| | { 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 }, |
---|
| | { name: '7天', value: 1 }, |
---|
| | { name: '15天', value: 2 }, |
---|
| | { name: '30天', value: 3 }, |
---|
| | ]); |
---|
| | const FXJCData = ref([ |
---|
| | { |
---|
| | name: "延安中学", |
---|
| | jcdx: "燃气管网", |
---|
| | jczb: "甲烷浓度4.4%VOL", |
---|
| | jcsj: "2024/10/23 11:54", |
---|
| | zk: "正常", |
---|
| | }, |
---|
| | { |
---|
| | name: "延安大学附属医院", |
---|
| | jcdx: "燃气管网", |
---|
| | jczb: "甲烷浓度4%VOL", |
---|
| | jcsj: "2024/10/23 12:14", |
---|
| | zk: "正常", |
---|
| | }, |
---|
| | { |
---|
| | name: "王家坪大桥", |
---|
| | jcdx: "桥梁结构", |
---|
| | jczb: "倾角+1°", |
---|
| | jcsj: "2024/10/23 12:24", |
---|
| | zk: "正常", |
---|
| | }, |
---|
| | { |
---|
| | name: "王家坪大桥", |
---|
| | jcdx: "桥梁结构", |
---|
| | jczb: "位移12mm", |
---|
| | jcsj: "2024/10/23 13:13", |
---|
| | zk: "正常", |
---|
| | }, |
---|
| | { |
---|
| | name: "王家坪大桥", |
---|
| | jcdx: "桥梁外部荷载", |
---|
| | jczb: "均布荷载6.4kn/m", |
---|
| | jcsj: "2024/10/23 13:43", |
---|
| | zk: "正常", |
---|
| | }, |
---|
| | { |
---|
| | name: "王家坪大桥", |
---|
| | jcdx: "桥梁气象环境", |
---|
| | jczb: "风速3.2m/s", |
---|
| | jcsj: "2024/10/23 14:03", |
---|
| | zk: "正常", |
---|
| | }, |
---|
| | { |
---|
| | name: "杨家岭隧道", |
---|
| | jcdx: "隧道结构", |
---|
| | jczb: "裂缝宽度0.12mm", |
---|
| | jcsj: "2024/10/23 14:05", |
---|
| | zk: "正常", |
---|
| | }, |
---|
| | { |
---|
| | name: "杨家岭隧道", |
---|
| | jcdx: "隧道结构", |
---|
| | jczb: "静应变+10με", |
---|
| | jcsj: "2024/10/23 14:25", |
---|
| | zk: "正常", |
---|
| | }, |
---|
| | |
---|
| | { |
---|
| | name: "王家坪旧址门口", |
---|
| | jcdx: "积水液位", |
---|
| | jczb: "水深0m", |
---|
| | jcsj: "2024/10/23 15:21", |
---|
| | zk: "正常", |
---|
| | }, |
---|
| | { |
---|
| | name: "大砭沟与北大街交叉口", |
---|
| | jcdx: "积水液位", |
---|
| | jczb: "水深0m", |
---|
| | jcsj: "2024/10/23 15:25", |
---|
| | zk: "正常", |
---|
| | 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天"); |
---|
| | const yxjcname = ref('7天'); |
---|
| | function yearclick(val) { |
---|
| | yxjcname.value = val.name; |
---|
| | } |
---|
| | const riskData = ref([ |
---|
| | { |
---|
| | name1: "管网", |
---|
| | name2: "传感器", |
---|
| | name3: "窨井", |
---|
| | num1: "234", |
---|
| | num2: "12", |
---|
| | num3: "12", |
---|
| | name1: '管网', |
---|
| | name2: '传感器', |
---|
| | name3: '窨井', |
---|
| | num1: '234', |
---|
| | num2: '12', |
---|
| | num3: '12', |
---|
| | Imgurl: ranqi_icon, |
---|
| | dw1: "公里", |
---|
| | dw2: "套", |
---|
| | dw3: "口", |
---|
| | dw1: '公里', |
---|
| | dw2: '套', |
---|
| | dw3: '口', |
---|
| | }, |
---|
| | ]); |
---|
| | |
---|
| | const activedname = ref("燃气"); |
---|
| | const activedname = ref('燃气'); |
---|
| | // 点击事件 |
---|
| | function categoryclick(val) { |
---|
| | console.log(val.name, "1"); |
---|
| | console.log(val.name, '1'); |
---|
| | activedname.value = val.name; |
---|
| | if (activedname.value == "燃气") { |
---|
| | if (activedname.value == '燃气') { |
---|
| | riskData.value = [ |
---|
| | { |
---|
| | name1: "管网", |
---|
| | name2: "传感器", |
---|
| | name3: "窨井", |
---|
| | num1: "234", |
---|
| | num2: "12", |
---|
| | num3: "12", |
---|
| | name1: '管网', |
---|
| | name2: '传感器', |
---|
| | name3: '窨井', |
---|
| | num1: '234', |
---|
| | num2: '12', |
---|
| | num3: '12', |
---|
| | Imgurl: ranqi_icon, |
---|
| | dw1: "公里", |
---|
| | dw2: "套", |
---|
| | dw3: "口", |
---|
| | dw1: '公里', |
---|
| | dw2: '套', |
---|
| | dw3: '口', |
---|
| | }, |
---|
| | ]; |
---|
| | } else if (activedname.value == "排水") { |
---|
| | } else if (activedname.value == '排水') { |
---|
| | riskData.value = [ |
---|
| | { |
---|
| | name1: "管网", |
---|
| | name2: "检查口", |
---|
| | name3: "感知设备", |
---|
| | num1: "234", |
---|
| | num2: "234", |
---|
| | num3: "18", |
---|
| | name1: '管网', |
---|
| | name2: '检查口', |
---|
| | name3: '感知设备', |
---|
| | num1: '234', |
---|
| | num2: '234', |
---|
| | num3: '18', |
---|
| | Imgurl: ps_icon, |
---|
| | dw1: "公里", |
---|
| | dw2: "处", |
---|
| | dw3: "套", |
---|
| | dw1: '公里', |
---|
| | dw2: '处', |
---|
| | dw3: '套', |
---|
| | }, |
---|
| | ]; |
---|
| | } else if (activedname.value == "桥梁") { |
---|
| | } else if (activedname.value == '桥梁') { |
---|
| | riskData.value = [ |
---|
| | { |
---|
| | name1: "数量", |
---|
| | name2: "长度", |
---|
| | name3: "感知设备", |
---|
| | num1: "1", |
---|
| | num2: "204", |
---|
| | num3: "92", |
---|
| | name1: '数量', |
---|
| | name2: '长度', |
---|
| | name3: '感知设备', |
---|
| | num1: '1', |
---|
| | num2: '204', |
---|
| | num3: '92', |
---|
| | Imgurl: qiaoliang, |
---|
| | dw1: "座", |
---|
| | dw2: "米", |
---|
| | dw3: "套", |
---|
| | dw1: '座', |
---|
| | dw2: '米', |
---|
| | dw3: '套', |
---|
| | }, |
---|
| | ]; |
---|
| | } else { |
---|
| | riskData.value = [ |
---|
| | { |
---|
| | name1: "数量", |
---|
| | name2: "长度", |
---|
| | name3: "感知设备", |
---|
| | num1: "1", |
---|
| | num2: "750", |
---|
| | num3: "111", |
---|
| | name1: '数量', |
---|
| | name2: '长度', |
---|
| | name3: '感知设备', |
---|
| | num1: '1', |
---|
| | num2: '750', |
---|
| | num3: '111', |
---|
| | Imgurl: sd_icon, |
---|
| | dw1: "座", |
---|
| | dw2: "米", |
---|
| | dw3: "套", |
---|
| | dw1: '座', |
---|
| | dw2: '米', |
---|
| | dw3: '套', |
---|
| | }, |
---|
| | ]; |
---|
| | } |
---|
| | } |
---|
| | |
---|
| | function GetgetFacilities() { |
---|
| | let obj = { |
---|
| | x: ["燃气", "排水", "桥梁", "隧道", "其他"], |
---|
| | y: ["870", "568", "700", "600", "276"], |
---|
| | x: ['燃气', '排水', '桥梁', '隧道', '其他'], |
---|
| | y: ['870', '568', '700', '600', '276'], |
---|
| | }; |
---|
| | chartData2.value.xAxis = obj.x; |
---|
| | chartData2.value.yAxis = obj.y; |
---|
| | refresh.value = Math.random(); |
---|
| |
---|
| | // background: yellow; |
---|
| | .icon { |
---|
| | width: 25px; |
---|
| | height: 25px; |
---|
| | background: url("@/assets/newImgs/xtb_img.png") no-repeat; |
---|
| | background: url('@/assets/newImgs/xtb_img.png') no-repeat; |
---|
| | } |
---|
| | .gw { |
---|
| | font-family: Source Han Sans CN; |
---|
| | font-weight: bold; |
---|
| |
---|
| | position: relative; |
---|
| | left: 10px; |
---|
| | width: 25px; |
---|
| | height: 25px; |
---|
| | background: url("@/assets/newImgs/xtb_img.png") no-repeat; |
---|
| | background: url('@/assets/newImgs/xtb_img.png') no-repeat; |
---|
| | } |
---|
| | .text { |
---|
| | font-family: Source Han Sans CN; |
---|
| | font-weight: bold; |
---|
| |
---|
| | 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% |
---|
| | ); |
---|
| | background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%); |
---|
| | height: 10px; |
---|
| | line-height: 0px; |
---|
| | } |
---|
| | .yxjcList { |
---|
| |
---|
| | color: #ffffff; |
---|
| | height: 60px; |
---|
| | line-height: 60px; |
---|
| | text-align: center; |
---|
| | width: 20%; |
---|
| | width: 22%; |
---|
| | overflow: hidden; |
---|
| | white-space: nowrap; /* 防止文字换行 */ |
---|
| | text-overflow: ellipsis; /* 超出部分显示省略号 */ |
---|
| | } |
---|
| |
---|
| | color: #ffffff; |
---|
| | height: 60px; |
---|
| | line-height: 60px; |
---|
| | text-align: center; |
---|
| | width: 25%; |
---|
| | width: 23%; |
---|
| | overflow: hidden; |
---|
| | white-space: nowrap; /* 防止文字换行 */ |
---|
| | text-overflow: ellipsis; /* 超出部分显示省略号 */ |
---|
| | } |
---|
| |
---|
| | .ListBoxHeader { |
---|
| | height: 44px; |
---|
| | line-height: 50px; |
---|
| | width: 98%; |
---|
| | background: url("@/assets/newImgs/partBg.png") no-repeat; |
---|
| | background: url('@/assets/newImgs/partBg.png') no-repeat; |
---|
| | background-size: 100% 100%; |
---|
| | display: flex; |
---|
| | align-items: center; |
---|
| | justify-content: space-between; |
---|
| |
---|
| | |
|