diff --git a/src/views/oneMap/FloodStuationReview/xqRightBox.vue b/src/views/oneMap/FloodStuationReview/xqRightBox.vue index e5ececd..6e52623 100644 --- a/src/views/oneMap/FloodStuationReview/xqRightBox.vue +++ b/src/views/oneMap/FloodStuationReview/xqRightBox.vue @@ -144,7 +144,22 @@ -
+
+
+
{{ item.scale }}
+
+
+
{{ item.remark }}
+
{{ item.address }}
+
{{ item.person }}{{ ' ' }}{{ item.phone }}
+
+
+
上报:{{ item.startTime }}
+
截止:{{ item.endTime }}
+
+
+
+
@@ -178,6 +193,38 @@ status: 1, }, ]; +const problemList = ref([ + { + scale: 'Ⅳ', + remark: '污水井盖丢失', + address: '小河沟', + person: '张三', + phone: '13277980987', + startTime: '2022-02-27 10:00', + endTime: '2022-02-28 10:00', + class: 'highProblem', + }, + { + scale: 'Ⅲ', + remark: '污水井盖丢失', + address: '小河沟', + person: '张三', + phone: '13277980987', + startTime: '2022-02-27 10:00', + endTime: '2022-02-28 10:00', + class: 'middleProblem', + }, + { + scale: 'Ⅱ', + remark: '污水井盖丢失', + address: '小河沟', + person: '张三', + phone: '13277980987', + startTime: '2022-02-27 10:00', + endTime: '2022-02-28 10:00', + class: 'lowProblem', + }, +]); const ListBox = ref([ { name: '水雨情', value: 1 }, { name: '险情', value: 2 }, @@ -468,7 +515,6 @@ .table_content { width: 430px; height: calc(100% - 43px); - .tableHeader { width: 100%; height: 34px; @@ -620,9 +666,79 @@ } .problem { height: calc(100% - 45px); + height: 50px; + margin-bottom: 5px; + margin-left: 10px; + .problemItem { + display: flex; + .highProblem { + text-align: center; + font-weight: 400; + font-size: 16px; + color: #d3f6ff; + height: 35px; + width: 12%; + background: linear-gradient(0deg, #8e1e1e 0%, #420606 100%); + border-image: linear-gradient(0deg, #fd4d62, #ac241a) 10 10; + border: rgb(141, 28, 21) 1px solid; + border-radius: 10%; + } + .middleProblem { + text-align: center; + font-weight: 400; + font-size: 16px; + color: #d3f6ff; + height: 35px; + width: 12%; + background: linear-gradient(0deg, #f1b500 0%, #331e02 100%); + border-image: linear-gradient(0deg, #ffb61a, #f5a100) 10 10; + border: rgb(193, 133, 4) 1px solid; + border-radius: 10%; + } + .lowProblem { + text-align: center; + font-weight: 400; + font-size: 16px; + color: #d3f6ff; + height: 35px; + width: 12%; + background: linear-gradient(0deg, #97990e 0%, #3e3f0c 100%); + border-image: linear-gradient(0deg, #97990e, #97990e) 10 10; + border: rgb(202, 199, 6) 1px solid; + border-radius: 10%; + } + .problemText { + width: 88%; + margin-left: 20px; + display: flex; + flex-direction: column; + .problemTextTop { + display: flex; + height: 50%; + .problemContent { + margin-right: 35px; + margin-bottom: 5px; + text-align: center; + font-weight: 600; + font-size: 14px; + color: #d3f6ff; + } + } + .problemTextBottom { + display: flex; + text-align: center; + font-weight: 400; + font-size: 10px; + color: #d3f6ff; + .problemContent { + margin-right: 50px; + } + } + } + } // background: yellow; - background: url('@/assets/images/fhpl/normsadal.png') no-repeat; - background-size: 100% 100%; + // background: url('@/assets/images/fhpl/normsadal.png') no-repeat; + // background-size: 100% 100%; } } } diff --git a/src/views/oneMap/FloodStuationReview/xqRightBox.vue b/src/views/oneMap/FloodStuationReview/xqRightBox.vue index e5ececd..6e52623 100644 --- a/src/views/oneMap/FloodStuationReview/xqRightBox.vue +++ b/src/views/oneMap/FloodStuationReview/xqRightBox.vue @@ -144,7 +144,22 @@ -
+
+
+
{{ item.scale }}
+
+
+
{{ item.remark }}
+
{{ item.address }}
+
{{ item.person }}{{ ' ' }}{{ item.phone }}
+
+
+
上报:{{ item.startTime }}
+
截止:{{ item.endTime }}
+
+
+
+
@@ -178,6 +193,38 @@ status: 1, }, ]; +const problemList = ref([ + { + scale: 'Ⅳ', + remark: '污水井盖丢失', + address: '小河沟', + person: '张三', + phone: '13277980987', + startTime: '2022-02-27 10:00', + endTime: '2022-02-28 10:00', + class: 'highProblem', + }, + { + scale: 'Ⅲ', + remark: '污水井盖丢失', + address: '小河沟', + person: '张三', + phone: '13277980987', + startTime: '2022-02-27 10:00', + endTime: '2022-02-28 10:00', + class: 'middleProblem', + }, + { + scale: 'Ⅱ', + remark: '污水井盖丢失', + address: '小河沟', + person: '张三', + phone: '13277980987', + startTime: '2022-02-27 10:00', + endTime: '2022-02-28 10:00', + class: 'lowProblem', + }, +]); const ListBox = ref([ { name: '水雨情', value: 1 }, { name: '险情', value: 2 }, @@ -468,7 +515,6 @@ .table_content { width: 430px; height: calc(100% - 43px); - .tableHeader { width: 100%; height: 34px; @@ -620,9 +666,79 @@ } .problem { height: calc(100% - 45px); + height: 50px; + margin-bottom: 5px; + margin-left: 10px; + .problemItem { + display: flex; + .highProblem { + text-align: center; + font-weight: 400; + font-size: 16px; + color: #d3f6ff; + height: 35px; + width: 12%; + background: linear-gradient(0deg, #8e1e1e 0%, #420606 100%); + border-image: linear-gradient(0deg, #fd4d62, #ac241a) 10 10; + border: rgb(141, 28, 21) 1px solid; + border-radius: 10%; + } + .middleProblem { + text-align: center; + font-weight: 400; + font-size: 16px; + color: #d3f6ff; + height: 35px; + width: 12%; + background: linear-gradient(0deg, #f1b500 0%, #331e02 100%); + border-image: linear-gradient(0deg, #ffb61a, #f5a100) 10 10; + border: rgb(193, 133, 4) 1px solid; + border-radius: 10%; + } + .lowProblem { + text-align: center; + font-weight: 400; + font-size: 16px; + color: #d3f6ff; + height: 35px; + width: 12%; + background: linear-gradient(0deg, #97990e 0%, #3e3f0c 100%); + border-image: linear-gradient(0deg, #97990e, #97990e) 10 10; + border: rgb(202, 199, 6) 1px solid; + border-radius: 10%; + } + .problemText { + width: 88%; + margin-left: 20px; + display: flex; + flex-direction: column; + .problemTextTop { + display: flex; + height: 50%; + .problemContent { + margin-right: 35px; + margin-bottom: 5px; + text-align: center; + font-weight: 600; + font-size: 14px; + color: #d3f6ff; + } + } + .problemTextBottom { + display: flex; + text-align: center; + font-weight: 400; + font-size: 10px; + color: #d3f6ff; + .problemContent { + margin-right: 50px; + } + } + } + } // background: yellow; - background: url('@/assets/images/fhpl/normsadal.png') no-repeat; - background-size: 100% 100%; + // background: url('@/assets/images/fhpl/normsadal.png') no-repeat; + // background-size: 100% 100%; } } } diff --git a/src/views/oneMap/LayerControl/LayerControl.vue b/src/views/oneMap/LayerControl/LayerControl.vue index cffbae3..cc8e024 100644 --- a/src/views/oneMap/LayerControl/LayerControl.vue +++ b/src/views/oneMap/LayerControl/LayerControl.vue @@ -2,24 +2,28 @@
-
{{ item.title }}
-
-
- -
- - - +
{{ item.title }}
+ +
+
+
+ +
+ + + -
- {{ item2.layerName }} +
+ {{ item2.layerName }} +
+
@@ -62,7 +66,8 @@ */ LayerData: [ { - title: '基本信息', + title: "基本信息", + Show: true, children: [ { layerName: '蓝色地图', @@ -155,7 +160,8 @@ ], }, { - title: '燃气系统', + title: "燃气系统", + Show: true, children: [ { layerName: '燃气管网', @@ -196,7 +202,8 @@ ], }, { - title: '雨水系统', + title: "雨水系统", + Show: true, children: [ { layerName: '雨水分区', @@ -234,7 +241,8 @@ ], }, { - title: '污水系统', + title: "污水系统", + Show: true, children: [ { layerName: '污水分区', @@ -270,7 +278,8 @@ ], }, { - title: '感知设备', + title: "感知设备", + Show: true, children: [ { layerName: '内涝易涝点', @@ -548,45 +557,50 @@ font-size: 14px; color: #ffffff; text-align: center; - } - .TCList { - width: 100%; - height: 14px; - margin-top: 10px; - display: flex; - color: #fff; cursor: pointer; - flex-direction: row; - flex-wrap: nowrap; - align-content: center; - justify-content: flex-start; - align-items: center; - box-sizing: border-box; - padding-left: 20px; - - .TCList_Select { - width: 14px; - height: 14px; - box-sizing: border-box; - border: 1px solid #fff; - } - .TCList_Icon { - width: 14px; - height: 14px; - margin: 0 10px; - } - .TCList_Name { - font-family: Source Han Sans CN; - font-weight: 500; - font-size: 14px; - height: 14px; - line-height: 14px; - } } - .TCList_Check { - color: #12f3ff; - .TCList_Select { - border: 1px solid #12f3ff; + .TCListBox { + width: 100%; + height: auto; + .TCList { + width: 100%; + height: 14px; + margin-top: 10px; + display: flex; + color: #fff; + cursor: pointer; + flex-direction: row; + flex-wrap: nowrap; + align-content: center; + justify-content: flex-start; + align-items: center; + box-sizing: border-box; + padding-left: 20px; + + .TCList_Select { + width: 14px; + height: 14px; + box-sizing: border-box; + border: 1px solid #fff; + } + .TCList_Icon { + width: 14px; + height: 14px; + margin: 0 10px; + } + .TCList_Name { + font-family: Source Han Sans CN; + font-weight: 500; + font-size: 14px; + height: 14px; + line-height: 14px; + } + } + .TCList_Check { + color: #12f3ff; + .TCList_Select { + border: 1px solid #12f3ff; + } } } } @@ -606,4 +620,13 @@ height: 0px; opacity: 0; } +.Group-enter-active, +.Group-leave-active { + transition: all 1s ease; +} + +.Group-enter-from, +.Group-leave-to { + height: 0px; +} diff --git a/src/views/oneMap/FloodStuationReview/xqRightBox.vue b/src/views/oneMap/FloodStuationReview/xqRightBox.vue index e5ececd..6e52623 100644 --- a/src/views/oneMap/FloodStuationReview/xqRightBox.vue +++ b/src/views/oneMap/FloodStuationReview/xqRightBox.vue @@ -144,7 +144,22 @@
-
+
+
+
{{ item.scale }}
+
+
+
{{ item.remark }}
+
{{ item.address }}
+
{{ item.person }}{{ ' ' }}{{ item.phone }}
+
+
+
上报:{{ item.startTime }}
+
截止:{{ item.endTime }}
+
+
+
+
@@ -178,6 +193,38 @@ status: 1, }, ]; +const problemList = ref([ + { + scale: 'Ⅳ', + remark: '污水井盖丢失', + address: '小河沟', + person: '张三', + phone: '13277980987', + startTime: '2022-02-27 10:00', + endTime: '2022-02-28 10:00', + class: 'highProblem', + }, + { + scale: 'Ⅲ', + remark: '污水井盖丢失', + address: '小河沟', + person: '张三', + phone: '13277980987', + startTime: '2022-02-27 10:00', + endTime: '2022-02-28 10:00', + class: 'middleProblem', + }, + { + scale: 'Ⅱ', + remark: '污水井盖丢失', + address: '小河沟', + person: '张三', + phone: '13277980987', + startTime: '2022-02-27 10:00', + endTime: '2022-02-28 10:00', + class: 'lowProblem', + }, +]); const ListBox = ref([ { name: '水雨情', value: 1 }, { name: '险情', value: 2 }, @@ -468,7 +515,6 @@ .table_content { width: 430px; height: calc(100% - 43px); - .tableHeader { width: 100%; height: 34px; @@ -620,9 +666,79 @@ } .problem { height: calc(100% - 45px); + height: 50px; + margin-bottom: 5px; + margin-left: 10px; + .problemItem { + display: flex; + .highProblem { + text-align: center; + font-weight: 400; + font-size: 16px; + color: #d3f6ff; + height: 35px; + width: 12%; + background: linear-gradient(0deg, #8e1e1e 0%, #420606 100%); + border-image: linear-gradient(0deg, #fd4d62, #ac241a) 10 10; + border: rgb(141, 28, 21) 1px solid; + border-radius: 10%; + } + .middleProblem { + text-align: center; + font-weight: 400; + font-size: 16px; + color: #d3f6ff; + height: 35px; + width: 12%; + background: linear-gradient(0deg, #f1b500 0%, #331e02 100%); + border-image: linear-gradient(0deg, #ffb61a, #f5a100) 10 10; + border: rgb(193, 133, 4) 1px solid; + border-radius: 10%; + } + .lowProblem { + text-align: center; + font-weight: 400; + font-size: 16px; + color: #d3f6ff; + height: 35px; + width: 12%; + background: linear-gradient(0deg, #97990e 0%, #3e3f0c 100%); + border-image: linear-gradient(0deg, #97990e, #97990e) 10 10; + border: rgb(202, 199, 6) 1px solid; + border-radius: 10%; + } + .problemText { + width: 88%; + margin-left: 20px; + display: flex; + flex-direction: column; + .problemTextTop { + display: flex; + height: 50%; + .problemContent { + margin-right: 35px; + margin-bottom: 5px; + text-align: center; + font-weight: 600; + font-size: 14px; + color: #d3f6ff; + } + } + .problemTextBottom { + display: flex; + text-align: center; + font-weight: 400; + font-size: 10px; + color: #d3f6ff; + .problemContent { + margin-right: 50px; + } + } + } + } // background: yellow; - background: url('@/assets/images/fhpl/normsadal.png') no-repeat; - background-size: 100% 100%; + // background: url('@/assets/images/fhpl/normsadal.png') no-repeat; + // background-size: 100% 100%; } } } diff --git a/src/views/oneMap/LayerControl/LayerControl.vue b/src/views/oneMap/LayerControl/LayerControl.vue index cffbae3..cc8e024 100644 --- a/src/views/oneMap/LayerControl/LayerControl.vue +++ b/src/views/oneMap/LayerControl/LayerControl.vue @@ -2,24 +2,28 @@
-
{{ item.title }}
-
-
- -
- - - +
{{ item.title }}
+ +
+
+
+ +
+ + + -
- {{ item2.layerName }} +
+ {{ item2.layerName }} +
+
@@ -62,7 +66,8 @@ */ LayerData: [ { - title: '基本信息', + title: "基本信息", + Show: true, children: [ { layerName: '蓝色地图', @@ -155,7 +160,8 @@ ], }, { - title: '燃气系统', + title: "燃气系统", + Show: true, children: [ { layerName: '燃气管网', @@ -196,7 +202,8 @@ ], }, { - title: '雨水系统', + title: "雨水系统", + Show: true, children: [ { layerName: '雨水分区', @@ -234,7 +241,8 @@ ], }, { - title: '污水系统', + title: "污水系统", + Show: true, children: [ { layerName: '污水分区', @@ -270,7 +278,8 @@ ], }, { - title: '感知设备', + title: "感知设备", + Show: true, children: [ { layerName: '内涝易涝点', @@ -548,45 +557,50 @@ font-size: 14px; color: #ffffff; text-align: center; - } - .TCList { - width: 100%; - height: 14px; - margin-top: 10px; - display: flex; - color: #fff; cursor: pointer; - flex-direction: row; - flex-wrap: nowrap; - align-content: center; - justify-content: flex-start; - align-items: center; - box-sizing: border-box; - padding-left: 20px; - - .TCList_Select { - width: 14px; - height: 14px; - box-sizing: border-box; - border: 1px solid #fff; - } - .TCList_Icon { - width: 14px; - height: 14px; - margin: 0 10px; - } - .TCList_Name { - font-family: Source Han Sans CN; - font-weight: 500; - font-size: 14px; - height: 14px; - line-height: 14px; - } } - .TCList_Check { - color: #12f3ff; - .TCList_Select { - border: 1px solid #12f3ff; + .TCListBox { + width: 100%; + height: auto; + .TCList { + width: 100%; + height: 14px; + margin-top: 10px; + display: flex; + color: #fff; + cursor: pointer; + flex-direction: row; + flex-wrap: nowrap; + align-content: center; + justify-content: flex-start; + align-items: center; + box-sizing: border-box; + padding-left: 20px; + + .TCList_Select { + width: 14px; + height: 14px; + box-sizing: border-box; + border: 1px solid #fff; + } + .TCList_Icon { + width: 14px; + height: 14px; + margin: 0 10px; + } + .TCList_Name { + font-family: Source Han Sans CN; + font-weight: 500; + font-size: 14px; + height: 14px; + line-height: 14px; + } + } + .TCList_Check { + color: #12f3ff; + .TCList_Select { + border: 1px solid #12f3ff; + } } } } @@ -606,4 +620,13 @@ height: 0px; opacity: 0; } +.Group-enter-active, +.Group-leave-active { + transition: all 1s ease; +} + +.Group-enter-from, +.Group-leave-to { + height: 0px; +} diff --git a/src/views/oneMap/index.vue b/src/views/oneMap/index.vue index 4ec8be4..c8aecec 100644 --- a/src/views/oneMap/index.vue +++ b/src/views/oneMap/index.vue @@ -404,9 +404,11 @@ bus.off("publicDialog_Close"); bus.off("OpenRY"); bus.off("ChangeZhuanTiTu"); + bus.off("checkRainL"); }); // 菜单点击 const MenuClick = (item, index) => { + showRainFlow.value = false; showPanel.value = false; // 改变菜单选中索引 AllData.AC_MenuIndex = item.id; @@ -427,6 +429,7 @@ }; // 二级菜单点击 const ErJiMenuClick = (item, item2) => { + showRainFlow.value = false; console.log(22); // 改变菜单选中索引 AllData.AC_MenuIndex = item.id;