feat: 图层查询

src/components.d.ts

@@ -12,7 +12,9 @@ declare module 'vue' {
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElOption: typeof import('element-plus/es')['ElOption']
+    ElPopover: typeof import('element-plus/es')['ElPopover']
     ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElTag: typeof import('element-plus/es')['ElTag']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElTree: typeof import('element-plus/es')['ElTree']
     ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']

src/theme/index.scss

@@ -13,6 +13,7 @@
 @use "./tabs.scss" as *;
 @use "./step.scss" as *;
 @use "./upload.scss" as *;
+@use "./popover.scss" as *;
 
 body {
   font-family: 思源黑体;
@@ -53,7 +54,11 @@ code {
   align-items: center;
   padding: 3px 0px 3px 16px;
   border-left: 4px solid #59b295;
-  background: linear-gradient(90deg, rgba(134, 191, 105, 0.8) 0%, rgba(57, 147, 191, 0.1) 100%);
+  background: linear-gradient(
+    90deg,
+    rgba(134, 191, 105, 0.8) 0%,
+    rgba(57, 147, 191, 0.1) 100%
+  );
 
   font-family: PingFang SC;
   font-size: 16px;

src/theme/popover.scss

@@ -0,0 +1,122 @@
+.sy-popover.sy-popper.map-search-popper {
+  padding: 0px;
+  .map-search-result {
+    .map-search-result-title {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      padding: 12px 16px;
+      border-width: 0px 0px 1px 0px;
+      border-style: solid;
+      border-color: rgba(0, 0, 0, 0.1);
+
+      font-family: Source Han Sans;
+      font-size: 14px;
+      font-weight: normal;
+      line-height: 22px;
+      letter-spacing: 0em;
+
+      font-variation-settings: "opsz" auto;
+      font-feature-settings: "kern" on;
+      /* 文字&图标/Font Gy2 */
+      color: rgba(0, 0, 0, 0.6);
+      span {
+        padding: 0px 4px;
+        font-family: Source Han Sans;
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 22px;
+        letter-spacing: 0em;
+
+        font-variation-settings: "opsz" auto;
+        font-feature-settings: "kern" on;
+        /* ShuYuan/SY_6 Normal */
+        color: #3a89fe;
+      }
+    }
+    .map-search-result-list {
+      height: 426px;
+      padding: 16px;
+      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+
+      .map-search-result-list-item {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        padding-bottom: 16px;
+        .title {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 4px;
+          .name {
+            font-family: Source Han Sans;
+            font-size: 14px;
+            font-weight: 500;
+            line-height: 22px;
+            letter-spacing: 0em;
+
+            font-variation-settings: "opsz" auto;
+            font-feature-settings: "kern" on;
+            /* 文字&图标/Font Gy1 */
+            color: rgba(0, 0, 0, 0.9);
+          }
+          .tag {
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+            padding: 1px 12px;
+            width: 48px;
+            height: 20px;
+            border-radius: 2px;
+
+            box-sizing: border-box;
+            /* ShuYuan/SY_6 Normal */
+            border: 1px solid #3a89fe;
+
+            font-family: Source Han Sans;
+            font-size: 12px;
+            font-weight: 500;
+            line-height: 18px;
+            letter-spacing: 0em;
+
+            font-variation-settings: "opsz" auto;
+            font-feature-settings: "kern" on;
+            /* ShuYuan/SY_6 Normal */
+            color: #3a89fe;
+          }
+        }
+        .item {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: flex-start;
+          gap: 4px;
+          font-family: Source Han Sans;
+          font-size: 12px;
+          font-weight: normal;
+          line-height: 18px;
+          letter-spacing: 0em;
+
+          font-variation-settings: "opsz" auto;
+          font-feature-settings: "kern" on;
+          /* 文字&图标/Font Gy2 */
+          color: rgba(0, 0, 0, 0.6);
+          i {
+            background: #36b29e;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+          }
+        }
+        &:not(:last-child) {
+          border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+        }
+      }
+    }
+  }
+}

src/views/Main/MapSearch/index.vue

@@ -3,18 +3,63 @@
     <span class="map-search-icon">
       <iconpark-icon name="search" size="16" fill="#fff"></iconpark-icon>
     </span>
+    <el-popover
+      placement="bottom"
+      :width="280"
+      trigger="click"
+      popper-class="map-search-popper"
+    >
+      <template #reference>
         <el-input
           class="map-search-input"
           placeholder="输入水库名称、水库编码"
+          v-model="searchValue"
+          @change="changeInputValue"
         ></el-input>
+      </template>
+      <template #default>
+        <div class="map-search-result">
+          <div class="map-search-result-title">
+            共搜索到<span>{{ searchResultList.length }}</span
+            >条结果
+          </div>
+          <div class="map-search-result-list">
+            <div
+              class="map-search-result-list-item"
+              v-for="(item, index) in searchResultList"
+              :key="index"
+            >
+              <div class="title">
+                <span class="name">{{ item.name }}</span>
+                <span class="tag">{{ item.level }}级</span>
+              </div>
+              <div class="item"><i></i>工程代码：{{ item.code }}</div>
+              <div class="item"><i></i>工程类型：{{ item.type }}</div>
+              <div class="item"><i></i>工程地址：{{ item.address }}</div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </el-popover>
   </div>
 </template>
 
 <script setup lang="ts">
-import {} from "element-plus/";
+import { ref } from "vue";
 defineOptions({
   name: "MapSearch",
 });
+const searchValue = ref("");
+const searchResultList = ref(
+  new Array(10).fill({
+    name: "白头岗水库",
+    level: 1,
+    code: "12300000000000",
+    address: "广州市增城区新塘县",
+    type: "xxx",
+  })
+);
+const changeInputValue = (value: string) => {};
 </script>
 
 <style scoped lang="less">

src/views/Main/SafetyOverviewCard/index.vue

@@ -3,7 +3,10 @@
     <div class="sy-water-cart-title">
       安全监查情况
       <el-select class="sy-water-cart-title-select" size="small">
-        <el-option label="近7日" value="1"></el-option>
+        <el-option label="今日" value="1"></el-option>
+        <el-option label="近7日" value="2"></el-option>
+        <el-option label="近30日" value="3"></el-option>
+        <el-option label="近一年" value="4"></el-option>
       </el-select>
     </div>
     <SafetyAppraise />