diff --git a/src/views/oneMap/OverallOverview/LeftBox.vue b/src/views/oneMap/OverallOverview/LeftBox.vue index 1a47767..e62e2a7 100644 --- a/src/views/oneMap/OverallOverview/LeftBox.vue +++ b/src/views/oneMap/OverallOverview/LeftBox.vue @@ -82,18 +82,27 @@
实时监测
- -
- {{ item.num }} - {{ item.sz }} - {{ item.bm }} - {{ item.zb }} - - 异 常 - 正 常 - +
+
+ 位置 + 监测对象 + 监测指标 + 监测时间 + 状态
- + +
+ {{ item.name }} + {{ item.jcdx }} + {{ item.jczb }} +
{{ item.jcsj }}
+ + 异 常 + 正 常 + +
+
+
@@ -121,17 +130,76 @@ ]); const FXJCData = ref([ { - num: '01', - zb: '管网病管', - sz: '排水', - bm: 'BM234454', - zk: '异常', + name: '延安中学', + jcdx: '燃气管网', + jczb: '甲烷浓度4.4%VOL', + jcsj: '2024/10/23 11:54', + zk: '正常', }, - { num: '02', zb: '管网病管', sz: '排水', bm: 'BM234454', zk: '正常' }, - { num: '03', zb: '结构', sz: '隧道', bm: 'BM234454', zk: '正常' }, - { num: '04', zb: '老化', sz: '桥梁', bm: 'BM234454', zk: '正常' }, - { num: '05', zb: '老化', sz: '排水', bm: 'BM234454', zk: '异常' }, - { num: '06', zb: '老化', sz: '排水', bm: 'BM234454', 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: '正常', + }, ]); const yxjcname = ref('7天'); function yearclick(val) { @@ -414,82 +482,135 @@ margin: 10px auto; width: 430px; height: calc(100% - 40px); - // background: red; - // background: url('@/assets/newImgs/yxjcE.png') no-repeat; - // background-size: 100% 100%; } } } .Realtime { width: 450px; height: 35%; - .tableBody { - width: 432px; - height: calc(100% - 50px); - overflow: hidden; - margin: 0 auto; - .tableBodyList { - height: 60px; - line-height: 60px; + .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; - /* 选择偶数行 */ - &:nth-child(even) { - background: linear-gradient(0deg, #008599 0%, #08596d 100%); - } - - .tableBodyList_span1 { - font-family: Source Han Sans CN; - font-weight: bold; - font-size: 16px; - color: #00f2ff; - height: 60px; - line-height: 60px; - text-align: center; - width: 10%; - // background: #217e8cff; - } - .tableBodyList_span2 { + .tableHeaderList { font-family: Source Han Sans CN; font-weight: 400; font-size: 14px; color: #ffffff; - height: 60px; - line-height: 60px; - text-align: center; - width: 10%; + height: 34px; + line-height: 34px; + // padding-left: 5px; + // text-align: center; } - .tableBodyList_span3 { - font-family: Source Han Sans CN; - font-weight: 400; - font-size: 14px; - color: #ffffff; - height: 60px; - line-height: 60px; + .tableList1 { + width: 15%; text-align: center; - width: 25%; } - - .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: 35%; - } - - .tableBodyList_span5 { - font-family: Source Han Sans CN; - font-weight: 400; - font-size: 14px; - color: #ffffff; - height: 60px; - line-height: 60px; - 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: 20%; + 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: 25%; + 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%; + } } } }