地图清空 搜索功能 弹窗样式

ruoyi-ui/src/views/JiHeExpressway/components/Dialog/index.vue

@@ -4,7 +4,7 @@
       <div class="mask-layer" v-if="modelVisible">
         <BackgroundClip class='dialog'
           clipPath="polygon(calc(100% - var(--clip-width)) 0, 100% var(--clip-width), 100% 100%, var(--clip-width) 100%, 0 calc(100% - var(--clip-width)), 0 0)"
-          borderColor="linear-gradient(180deg, rgba(78, 174, 204, .6), rgba(78, 174, 204, 0))"
+          borderColor="linear-gradient(180deg, rgba(78, 174, 204, .9), rgba(78, 174, 204, 0))"
           bgColor="linear-gradient(180deg, rgba(14, 69, 92, 0.9) 0%, rgba(20, 89, 119, 0.9) 100%)">
           <div class="dialog-title">
             <img class="title-icon" src="@screen/images/dialog/title-icon.svg" />
@@ -86,27 +86,11 @@ export default {
 
 .dialog {
   max-width: 72vw;
-  // background: linear-gradient(180deg, rgba(14, 69, 92, 0.9) 0%, rgba(20, 89, 119, 0.9) 100%);
   opacity: 1;
   background-clip: padding-box;
-  // clip-path: polygon(calc(100% - var(--clip-width)) 0, 100% var(--clip-width), 100% 100%, var(--clip-width) 100%, 0 calc(100% - var(--clip-width)), 0 0);
   position: relative;
   box-sizing: border-box;
   margin: calc(var(--border-width) / 2);
-  border: 2px solid;
-  border-image: linear-gradient(180deg, rgba(78, 174, 204, .6), rgba(78, 174, 204, 0)) 2 2;
-
-  // &::before {
-  //   content: "";
-  //   position: absolute;
-  //   background: rgba(78, 174, 204, .6);
-  //   height: 2px;
-  //   // width: calc(sqrt(pow(var(--clip-width-num), 2) * 2) * 1px);
-  //   right: calc(var(--clip-width) / -2);
-  //   top: -2px;
-  //   transform-origin: top left;
-  //   transform: rotate(45deg);
-  // }
 
   .dialog-title {
     position: relative;

ruoyi-ui/src/views/JiHeExpressway/components/InputSearch/index.vue

@@ -1,42 +1,111 @@
 <template>
-  <ElInput v-on="$listeners" :placeholder="placeholder" size="mini" class='InputSearch'>
-    <img slot="suffix" src="./search.svg">
-  </ElInput>
+  <ElPopover placement="bottom" popper-class="global-input-search-popover" :popperOptions="popperOptions"
+    :visibleArrow="false" :width="this.width" trigger="hover" @show="handleShow">
+    <div class='InputSearch' slot="reference" ref="ReferenceInputRef">
+      <span>{{ placeholder }}</span>
+      <img src="./search.svg">
+    </div>
+
+    <div style="width: 100%">
+      <slot>
+        <Form class="form" :formList="formList" v-bind="getFormConfigOptions" />
+        <ElEmpty description="暂无搜索内容"></ElEmpty>
+      </slot>
+
+      <div class="footer">
+        <Button style="background-color: rgba(0, 179, 204, .3);">
+          重置
+        </Button>
+        <Button>
+          搜索
+        </Button>
+      </div>
+    </div>
+  </ElPopover>
 </template>
 
 <script>
+import Button from '@screen/components/Buttons/Button.vue';
+import Form from '@screen/components/FormConfig';
+
 export default {
   name: 'InputSearch',
+  components: {
+    Button,
+    Form
+  },
   props: {
     placeholder: {
       type: String,
       default: "请点击右侧图标筛选"
+    },
+    formConfigOptions: {
+      type: Object,
+      default: null
+    },
+    formList: {
+      type: Array,
+      default: () => []
+    },
+  },
+  data() {
+    return {
+      width: null,
+      popperOptions: {}
+    }
+  },
+  emit: [
+    'handleReset',
+    "handleSearch"
+  ],
+  computed: {
+    getFormConfigOptions() {
+      return {
+        column: "1",
+        labelWidth: "120px",
+        ...this.formConfigOptions
+      }
+    }
+  },
+  methods: {
+    handleShow() {
+      if (this.width) return;
+
+      this.width = this.$refs.ReferenceInputRef.getBoundingClientRect().width
     }
   }
 }
 </script>
 
+<style lang='scss'>
+div.el-popper.global-input-search-popover {
+  background: #064258;
+
+  .footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 9px;
+  }
+}
+</style>
 <style lang='scss' scoped>
 .InputSearch {
   height: 26px;
-  opacity: 1;
-
-  ::v-deep {
-    .el-input__inner {
-      background: linear-gradient(180deg, #005C79 0%, #009BCC 100%) !important;
-      color: #fff;
-      border-radius: 2px;
-
-      &::placeholder {
-        color: #fff;
-      }
-    }
+  background: linear-gradient(180deg, #005C79 0%, #009BCC 100%) !important;
+  color: #fff;
+  border-radius: 2px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 3px 15px;
+  padding-right: 9px;
+  cursor: pointer;
 
-    .el-input__suffix {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-  }
+  font-size: 12px;
+  font-family: PingFang SC, PingFang SC;
+  font-weight: 400;
+  color: #FFFFFF;
+  line-height: 14px;
 }
 </style>

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/index.vue

@@ -74,6 +74,22 @@ export default {
     this.layerData = layerData;
     this.tabContentData = layerData[defaultActive].children || [];
     this.active = layerData[defaultActive].title;
+
+    this.minLayers = 3;
+  },
+  mounted() {
+    // 获取原始 Layer
+    const getMinMapLayers = (time = 0) => {
+      setTimeout(() => {
+        const { mapIns } = this.getMap();
+
+        if (!mapIns) return getMinMapLayers(150);
+
+        this.minLayers = mapIns.getLayers().length - 1;
+      }, time);
+    }
+
+    getMinMapLayers();
   },
   methods: {
     handleClick(item) {
@@ -102,7 +118,7 @@ export default {
       }
 
       // mapIns.clearMap();
-      mapIns.getLayers().forEach((layer, index) => index > 1 && mapIns.remove(layer))
+      mapIns.getLayers().forEach((layer, index) => index > this.minLayers && mapIns.remove(layer))
     },
 
     // 摄像机 可控 不可控 弹窗 回调