diff --git a/src/assets/newImgs/HMScreen/bzIcon.png b/src/assets/newImgs/HMScreen/bzIcon.png new file mode 100644 index 0000000..c9ede11 --- /dev/null +++ b/src/assets/newImgs/HMScreen/bzIcon.png Binary files differ diff --git a/src/assets/newImgs/HMScreen/bzIcon.png b/src/assets/newImgs/HMScreen/bzIcon.png new file mode 100644 index 0000000..c9ede11 --- /dev/null +++ b/src/assets/newImgs/HMScreen/bzIcon.png Binary files differ diff --git a/src/assets/newImgs/HMScreen/gwIcon.png b/src/assets/newImgs/HMScreen/gwIcon.png new file mode 100644 index 0000000..202f1dc --- /dev/null +++ b/src/assets/newImgs/HMScreen/gwIcon.png Binary files differ diff --git a/src/assets/newImgs/HMScreen/bzIcon.png b/src/assets/newImgs/HMScreen/bzIcon.png new file mode 100644 index 0000000..c9ede11 --- /dev/null +++ b/src/assets/newImgs/HMScreen/bzIcon.png Binary files differ diff --git a/src/assets/newImgs/HMScreen/gwIcon.png b/src/assets/newImgs/HMScreen/gwIcon.png new file mode 100644 index 0000000..202f1dc --- /dev/null +++ b/src/assets/newImgs/HMScreen/gwIcon.png Binary files differ diff --git a/src/assets/newImgs/HMScreen/wscIcon.png b/src/assets/newImgs/HMScreen/wscIcon.png new file mode 100644 index 0000000..69721d1 --- /dev/null +++ b/src/assets/newImgs/HMScreen/wscIcon.png Binary files differ diff --git a/src/assets/newImgs/HMScreen/bzIcon.png b/src/assets/newImgs/HMScreen/bzIcon.png new file mode 100644 index 0000000..c9ede11 --- /dev/null +++ b/src/assets/newImgs/HMScreen/bzIcon.png Binary files differ diff --git a/src/assets/newImgs/HMScreen/gwIcon.png b/src/assets/newImgs/HMScreen/gwIcon.png new file mode 100644 index 0000000..202f1dc --- /dev/null +++ b/src/assets/newImgs/HMScreen/gwIcon.png Binary files differ diff --git a/src/assets/newImgs/HMScreen/wscIcon.png b/src/assets/newImgs/HMScreen/wscIcon.png new file mode 100644 index 0000000..69721d1 --- /dev/null +++ b/src/assets/newImgs/HMScreen/wscIcon.png Binary files differ diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue index 9188073..0f54154 100644 --- a/src/views/sponeScreen/HaiMianScreen/index.vue +++ b/src/views/sponeScreen/HaiMianScreen/index.vue @@ -2,7 +2,7 @@
- +
+ +
+
+
+ 海绵建筑与社区 +
+
+
+ 海绵型道路广场 +
+
+
+ 海绵型公园绿地 +
+
+
+ 海绵型水系 +
+
+
+ 管网排查与修复 +
+
+
+ 管网及泵站 +
+
+ @@ -84,7 +112,7 @@ { name: '排水防涝', id: 4 }, { name: '长效运维', id: 5 }, ]); -const menuIndex = ref(1); +const menuIndex = ref(4); const showPanel = ref(false); const showLegend = ref(false); @@ -297,6 +325,12 @@ .right480 { right: 480px; } + .right80 { + right: 80px; + } + .right520 { + right: 520px; + } .controlHM { position: absolute; bottom: 50px; @@ -309,6 +343,46 @@ margin-bottom: 10px; } } + .projectPart { + width: 160px; + position: absolute; + z-index: 220; + bottom: 60px; + background: #004565; + opacity: 0.9; + padding: 10px; + border-radius: 5px; + .part { + display: flex; + align-items: center; + margin-top: 5px; + color: #b8ecff; + div { + width: 22px; + height: 12px; + margin-right: 5px; + border-radius: 5px; + } + .color1 { + background: #b673ff; + } + .color2 { + background: #ffb153; + } + .color3 { + background: #d5e615; + } + .color4 { + background: #5aa9ff; + } + .color5 { + background: #ea6638; + } + .color6 { + background: #15e6e4; + } + } + } .bottomHM { position: absolute; bottom: 0px; diff --git a/src/assets/newImgs/HMScreen/bzIcon.png b/src/assets/newImgs/HMScreen/bzIcon.png new file mode 100644 index 0000000..c9ede11 --- /dev/null +++ b/src/assets/newImgs/HMScreen/bzIcon.png Binary files differ diff --git a/src/assets/newImgs/HMScreen/gwIcon.png b/src/assets/newImgs/HMScreen/gwIcon.png new file mode 100644 index 0000000..202f1dc --- /dev/null +++ b/src/assets/newImgs/HMScreen/gwIcon.png Binary files differ diff --git a/src/assets/newImgs/HMScreen/wscIcon.png b/src/assets/newImgs/HMScreen/wscIcon.png new file mode 100644 index 0000000..69721d1 --- /dev/null +++ b/src/assets/newImgs/HMScreen/wscIcon.png Binary files differ diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue index 9188073..0f54154 100644 --- a/src/views/sponeScreen/HaiMianScreen/index.vue +++ b/src/views/sponeScreen/HaiMianScreen/index.vue @@ -2,7 +2,7 @@
- +
+ +
+
+
+ 海绵建筑与社区 +
+
+
+ 海绵型道路广场 +
+
+
+ 海绵型公园绿地 +
+
+
+ 海绵型水系 +
+
+
+ 管网排查与修复 +
+
+
+ 管网及泵站 +
+
+ @@ -84,7 +112,7 @@ { name: '排水防涝', id: 4 }, { name: '长效运维', id: 5 }, ]); -const menuIndex = ref(1); +const menuIndex = ref(4); const showPanel = ref(false); const showLegend = ref(false); @@ -297,6 +325,12 @@ .right480 { right: 480px; } + .right80 { + right: 80px; + } + .right520 { + right: 520px; + } .controlHM { position: absolute; bottom: 50px; @@ -309,6 +343,46 @@ margin-bottom: 10px; } } + .projectPart { + width: 160px; + position: absolute; + z-index: 220; + bottom: 60px; + background: #004565; + opacity: 0.9; + padding: 10px; + border-radius: 5px; + .part { + display: flex; + align-items: center; + margin-top: 5px; + color: #b8ecff; + div { + width: 22px; + height: 12px; + margin-right: 5px; + border-radius: 5px; + } + .color1 { + background: #b673ff; + } + .color2 { + background: #ffb153; + } + .color3 { + background: #d5e615; + } + .color4 { + background: #5aa9ff; + } + .color5 { + background: #ea6638; + } + .color6 { + background: #15e6e4; + } + } + } .bottomHM { position: absolute; bottom: 0px; diff --git a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue index cecd525..9f3c6bf 100644 --- a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue +++ b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue @@ -2,20 +2,6 @@
项目评估
- -
@@ -23,7 +9,7 @@ 积水分析
- + @@ -37,43 +23,6 @@
- - 片区分析 -
-
- - - - - - - - - - -
-
- -
-
- - 项目分析 -
-
- - - - - - - - - - -
-
-
-
设施分析
@@ -94,6 +43,44 @@
+ +
+
+ + 项目分析 +
+
+ + + + + + + + + + +
+
+ +
+
+ + 片区分析 +
+
+ + + + + + + + + + +
+
@@ -146,60 +133,28 @@ yAxis2: [0.1, 0.2, 0.3, 0.2, 0.1, 0.4, 0.5, 0.03, 0.6, 0.1, 0.2, 0.1, 0.3, 0.4], refresh: 1, }); -const refresh = ref(1); -const refresh1 = ref(1); const ListBod = ref([ - { - name: '明伦桥俩侧积水点', - value: '1', - }, - { - name: '复兴大道四季城积水点', - value: '2', - }, + { name: '明伦桥俩侧积水点', value: '1' }, + { name: '复兴大道四季城积水点', value: '2' }, ]); const areaList = ref([ - { - name: '主城区', - value: '1', - }, - { - name: '示范区', - value: '2', - }, + { name: '主城区', value: '1' }, + { name: '示范区', value: '2' }, ]); const pipeList = ref([ - { - name: '向阳路管网监测点', - value: '1', - }, - { - name: '汴京路管网监测点', - value: '2', - }, + { name: '向阳路管网监测点', value: '1' }, + { name: '汴京路管网监测点', value: '2' }, ]); const XmList = ref([ - { - name: '汴京路海绵项目', - value: '1', - }, - { - name: '老旧小区改造', - value: '2', - }, + { name: '汴京路管网及道路海绵化改造', value: '1' }, + { name: '市民公共文化服务综合体建设', value: '2' }, ]); const XmListA = ref([ - { - name: '出口监测点', - value: '1', - }, - { - name: '进口监测点', - value: '2', - }, + { name: '出口监测点', value: '1' }, + { name: '进口监测点', value: '2' }, ]); const AllData = reactive({ @@ -232,7 +187,7 @@ } .ConstrucClass { width: 460px; - height: calc(100vh - 492px); + height: calc(100vh - 512px); background: #004565; opacity: 0.8; overflow-x: hidden; diff --git a/src/assets/newImgs/HMScreen/bzIcon.png b/src/assets/newImgs/HMScreen/bzIcon.png new file mode 100644 index 0000000..c9ede11 --- /dev/null +++ b/src/assets/newImgs/HMScreen/bzIcon.png Binary files differ diff --git a/src/assets/newImgs/HMScreen/gwIcon.png b/src/assets/newImgs/HMScreen/gwIcon.png new file mode 100644 index 0000000..202f1dc --- /dev/null +++ b/src/assets/newImgs/HMScreen/gwIcon.png Binary files differ diff --git a/src/assets/newImgs/HMScreen/wscIcon.png b/src/assets/newImgs/HMScreen/wscIcon.png new file mode 100644 index 0000000..69721d1 --- /dev/null +++ b/src/assets/newImgs/HMScreen/wscIcon.png Binary files differ diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue index 9188073..0f54154 100644 --- a/src/views/sponeScreen/HaiMianScreen/index.vue +++ b/src/views/sponeScreen/HaiMianScreen/index.vue @@ -2,7 +2,7 @@
- +
+ +
+
+
+ 海绵建筑与社区 +
+
+
+ 海绵型道路广场 +
+
+
+ 海绵型公园绿地 +
+
+
+ 海绵型水系 +
+
+
+ 管网排查与修复 +
+
+
+ 管网及泵站 +
+
+ @@ -84,7 +112,7 @@ { name: '排水防涝', id: 4 }, { name: '长效运维', id: 5 }, ]); -const menuIndex = ref(1); +const menuIndex = ref(4); const showPanel = ref(false); const showLegend = ref(false); @@ -297,6 +325,12 @@ .right480 { right: 480px; } + .right80 { + right: 80px; + } + .right520 { + right: 520px; + } .controlHM { position: absolute; bottom: 50px; @@ -309,6 +343,46 @@ margin-bottom: 10px; } } + .projectPart { + width: 160px; + position: absolute; + z-index: 220; + bottom: 60px; + background: #004565; + opacity: 0.9; + padding: 10px; + border-radius: 5px; + .part { + display: flex; + align-items: center; + margin-top: 5px; + color: #b8ecff; + div { + width: 22px; + height: 12px; + margin-right: 5px; + border-radius: 5px; + } + .color1 { + background: #b673ff; + } + .color2 { + background: #ffb153; + } + .color3 { + background: #d5e615; + } + .color4 { + background: #5aa9ff; + } + .color5 { + background: #ea6638; + } + .color6 { + background: #15e6e4; + } + } + } .bottomHM { position: absolute; bottom: 0px; diff --git a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue index cecd525..9f3c6bf 100644 --- a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue +++ b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue @@ -2,20 +2,6 @@
项目评估
- -
@@ -23,7 +9,7 @@ 积水分析
- + @@ -37,43 +23,6 @@
- - 片区分析 -
-
- - - - - - - - - - -
-
- -
-
- - 项目分析 -
-
- - - - - - - - - - -
-
-
-
设施分析
@@ -94,6 +43,44 @@
+ +
+
+ + 项目分析 +
+
+ + + + + + + + + + +
+
+ +
+
+ + 片区分析 +
+
+ + + + + + + + + + +
+
@@ -146,60 +133,28 @@ yAxis2: [0.1, 0.2, 0.3, 0.2, 0.1, 0.4, 0.5, 0.03, 0.6, 0.1, 0.2, 0.1, 0.3, 0.4], refresh: 1, }); -const refresh = ref(1); -const refresh1 = ref(1); const ListBod = ref([ - { - name: '明伦桥俩侧积水点', - value: '1', - }, - { - name: '复兴大道四季城积水点', - value: '2', - }, + { name: '明伦桥俩侧积水点', value: '1' }, + { name: '复兴大道四季城积水点', value: '2' }, ]); const areaList = ref([ - { - name: '主城区', - value: '1', - }, - { - name: '示范区', - value: '2', - }, + { name: '主城区', value: '1' }, + { name: '示范区', value: '2' }, ]); const pipeList = ref([ - { - name: '向阳路管网监测点', - value: '1', - }, - { - name: '汴京路管网监测点', - value: '2', - }, + { name: '向阳路管网监测点', value: '1' }, + { name: '汴京路管网监测点', value: '2' }, ]); const XmList = ref([ - { - name: '汴京路海绵项目', - value: '1', - }, - { - name: '老旧小区改造', - value: '2', - }, + { name: '汴京路管网及道路海绵化改造', value: '1' }, + { name: '市民公共文化服务综合体建设', value: '2' }, ]); const XmListA = ref([ - { - name: '出口监测点', - value: '1', - }, - { - name: '进口监测点', - value: '2', - }, + { name: '出口监测点', value: '1' }, + { name: '进口监测点', value: '2' }, ]); const AllData = reactive({ @@ -232,7 +187,7 @@ } .ConstrucClass { width: 460px; - height: calc(100vh - 492px); + height: calc(100vh - 512px); background: #004565; opacity: 0.8; overflow-x: hidden; diff --git a/src/views/sponeScreen/projectHM/ProjectYype.vue b/src/views/sponeScreen/projectHM/ProjectYype.vue index b1d01c4..bfb78d7 100644 --- a/src/views/sponeScreen/projectHM/ProjectYype.vue +++ b/src/views/sponeScreen/projectHM/ProjectYype.vue @@ -1,4 +1,5 @@ + + diff --git a/src/views/sponeScreen/waterFlood/equipMonitor.vue b/src/views/sponeScreen/waterFlood/equipMonitor.vue index 9dd6c0c..ba99caf 100644 --- a/src/views/sponeScreen/waterFlood/equipMonitor.vue +++ b/src/views/sponeScreen/waterFlood/equipMonitor.vue @@ -4,7 +4,7 @@
监测设备
-
+
-

{{ item.stName }}

-

- 站点状态 - 在线 - 离线 -

-

- 数据状态 - - {{ item.faultStatus ? faultList.filter(item2 => item2.value == item.faultStatus)[0].label : '--' }} - -

-

- 监测类型 - - {{ item.siteType == 'water_level' ? '水位' : item.siteType == 'flow' ? '流量' : item.siteType == 'rain' ? '降雨' : '水质' }} - -

-

- 建设方式 - - {{ item.buildType == 'owner' ? '新建' : '共享' }} - -

-

- 最后通讯 {{ item.tt }} -

+
{{ item.stName }}
+
+
+ 站点状态 + 在线 + 离线 +
+
+ 数据状态 + + {{ item.faultStatus ? faultList.filter(item2 => item2.value == item.faultStatus)[0].label : '--' }} + +
+
+ 监测类型 + + {{ item.siteType == 'water_level' ? '水位' : item.siteType == 'flow' ? '流量' : item.siteType == 'rain' ? '降雨' : '水质' }} + +
+
+ 建设方式 + + {{ item.buildType == 'owner' ? '新建' : '共享' }} + +
+
+ 最后通讯 {{ item.tt }} +
+
@@ -68,12 +70,12 @@ const stationIndex = ref('total'); const stationType = ref([ { name: '全部', value: '1', key: 'total' }, - { name: '源头地块', value: '2', key: 'typical_land' }, { name: '雨量站', value: '3', key: 'rainfall' }, + { name: '河道断面', value: '7', key: 'river' }, { name: '管网监测点', value: '4', key: 'pipeline' }, { name: '内涝点', value: '5', key: 'waterlogging' }, { name: '海绵设施', value: '6', key: 'drain_outlet' }, - { name: '河道断面', value: '7', key: 'river' }, + { name: '源头地块', value: '2', key: 'typical_land' }, ]); const loadingList = ref(true); const headerObj = ref({}); @@ -141,7 +143,7 @@ font-size: 16px; color: #e4f5ff; padding: 3px 5px; - margin: 0px 8px 8px 0px; + margin: 0px 5px 8px 0px; &:hover { background: #166f84; border: 1px solid #2cfce9; @@ -152,7 +154,7 @@ border: 1px solid #2cfce9; } .monitorCont { - height: calc(100vh - 550px); + height: calc(100vh - 320px); overflow: auto; .stationSel { width: 100%; @@ -163,12 +165,13 @@ padding: 5px 15px; margin-bottom: 5px; position: relative; - p { + .parts { font-family: Source Han Sans CN; font-weight: 400; font-size: 16px; color: #b8ecff; margin-bottom: 6px; + width: 50%; span { color: #3afff8; font-weight: 400; @@ -182,12 +185,13 @@ font-size: 18px; color: #e4f5ff; cursor: pointer; + margin-bottom: 8px; } img { width: 26px; height: 26px; position: absolute; - top: 20px; + top: 5px; right: 30px; cursor: pointer; } diff --git a/src/views/sponeScreen/waterFlood/index.vue b/src/views/sponeScreen/waterFlood/index.vue index 86c1835..ddabf1a 100644 --- a/src/views/sponeScreen/waterFlood/index.vue +++ b/src/views/sponeScreen/waterFlood/index.vue @@ -3,8 +3,8 @@
- - + + @@ -21,7 +21,7 @@
- + @@ -30,7 +30,7 @@