diff --git a/src/views/oneMap/components/ZHRQ.vue b/src/views/oneMap/components/ZHRQ.vue index eea850d..d914e2e 100644 --- a/src/views/oneMap/components/ZHRQ.vue +++ b/src/views/oneMap/components/ZHRQ.vue @@ -173,6 +173,23 @@ +
+
+ 指挥中心 + 动态 + 时间 + 指令状态 +
+ +
+ {{ item.zhzx }} + {{ item.dt }} + {{ item.sj }} + {{ item.zlzt }} +
+
+
+
发布预警
@@ -351,6 +368,21 @@ value: null, }, ], + // 底部表格数据 + bottomTableData: [ + { + zhzx: '预警发布', + dt: '启动预警并通知成员单位', + sj: '10-20 08:30', + zlzt: '预警下发给城管局各单位,燃气供应处', + }, + { + zhzx: '预警启动', + dt: '起草燃气安全预警应急行动', + sj: '10-20 07:00', + zlzt: '起草了预警通知', + }, + ], timer: null, }); // 预警统计echarts实例 @@ -1363,7 +1395,6 @@ } } } - .TopBox { width: calc(100% - 1040px); height: 122px; @@ -1456,6 +1487,78 @@ } } } + .bottomBox { + width: calc(100% - 1040px); + height: 122px; + position: absolute; + left: 510px; + bottom: 180px; + background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%); + border-radius: 6px; + border: 1px solid #47eef3; + box-sizing: border-box; + box-shadow: inset 0 0 5px 5px #47eef38a; + padding: 10px; + .TopTableHeader { + width: 100%; + height: 34px; + background: linear-gradient(0deg, #00fbffa3 0%, #00fbff00 100%); + border: 1px solid #74dde1; + display: flex; + } + + .TopTableBody { + width: 100%; + height: calc(100% - 34px); + overflow: auto; + // display: flex; + // flex-direction: column; + // flex-wrap: nowrap; + + .TopTableBody_list { + display: inline-block; + width: 100%; + height: 34px; + /* 选择偶数行 */ + &:nth-child(even) { + background: linear-gradient(0deg, #008599 0%, #08596d 100%); + } + } + } + + .TopTableListSpan { + font-family: Source Han Sans CN; + font-weight: 400; + font-size: 14px; + color: #ffffff; + height: 34px; + line-height: 34px; + display: inline-block; + box-sizing: border-box; + overflow: hidden; + text-overflow: ellipsis; /* 超出宽度后显示省略号 */ + white-space: nowrap; /* 限制不允许换行 */ + } + + .TopTableListSpan1 { + width: 25%; + text-align: left; + padding-left: 10px; + } + .TopTableListSpan2 { + width: 25%; + text-align: center; + } + .TopTableListSpan3 { + width: 25%; + text-align: center; + } + .TopTableListSpan4 { + width: 25%; + text-align: right; + padding-right: 10px; + } + } // 左右两侧展示板块公共样式 .ComBox {