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%;
+ }
}
}
}