Merge branch 'feature-v1.0.0' of ssh://gitlab.datameta.com:2224/project/water/data-board-2025 into feature-v1.0.0

src/store/modules/project.ts

@@ -189,7 +189,7 @@ export const useProjectStore = defineStore("project", {
       const rData = await getFirstScene();
       if (rData.code === 200) {
         if (rData.records && rData.records.length > 0) {
-          this.defaultSceneId = "1897595541221593090";
+          this.defaultSceneId = "1788738027296657409";
           // rData.records[0].id;
         }
       } else {

src/views/Main/Map/components/LayerSwitch.vue

@@ -2,12 +2,26 @@
   <div class="layer-switch-box">
     <div class="layer-switch">
       <div class="btn">
-        <img class="icon" src="@/assets/map/layer.svg" alt="" @click="layerTreeChange" />
+        <img
+          class="icon"
+          src="@/assets/map/layer.svg"
+          alt=""
+          @click="layerTreeChange"
+        />
       </div>
       <div class="slider-line"></div>
       <div class="btn">
-        <el-tooltip effect="dark" :content="is3DScene ? '三维模式' : '二维模式'" placement="right">
-          <img class="icon" src="@/assets/map/changeScene.svg" alt="" @click="handleChangeMode" />
+        <el-tooltip
+          effect="dark"
+          :content="is3DScene ? '三维模式' : '二维模式'"
+          placement="bottom"
+        >
+          <img
+            class="icon"
+            src="@/assets/map/changeScene.svg"
+            alt=""
+            @click="handleChangeMode"
+          />
         </el-tooltip>
       </div>
     </div>
@@ -23,7 +37,7 @@ defineOptions({
 });
 let is3DScene = ref(true);
 let showTreeBox = ref(false);
-const emits = defineEmits(["layerTreeChange"]);
+const emits = defineEmits(["layerTreeChange", "showChange"]);
 function handleChangeMode() {
   is3DScene.value = !is3DScene.value;
   const mapSceneType = !is3DScene.value ? 2 : 3;
@@ -34,7 +48,7 @@ function handleChangeMode() {
     () => {
       console.log("移动结束 >>>>> ");
     },
-    1,
+    1
   );
 }
 
@@ -46,23 +60,27 @@ function layerTreeChange() {
 
 <style lang="scss" scoped>
 .layer-switch-box {
-  position: fixed;
-  top: 24px;
-  right: 510px;
+  // position: fixed;
+  // top: 24px;
+  // right: 510px;
   border-radius: 4px;
   background-color: #fff;
 }
 .layer-switch {
   display: flex;
   width: 100%;
-  height: 37px;
+  height: 36px;
   align-items: center;
   justify-content: center;
   .btn {
-    padding: 8px 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 10px 12px;
+    cursor: pointer;
     .icon {
-      width: 17px;
-      height: 17px;
+      width: 16px;
+      height: 16px;
     }
   }
   .slider-line {

src/views/Main/Map/components/Legend.vue

@@ -73,13 +73,14 @@ onMounted(() => {
 </script>
 <style scoped lang="scss">
 .legend-box {
-  position: fixed;
-  bottom: 24px;
-  right: 510px;
+  // position: fixed;
+  // bottom: 24px;
+  // right: 510px;
   padding: 12px 0 12px 12px;
   overflow-y: auto;
   border-radius: 4px;
-  background-color: #fff;
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(10px);
   overflow: hidden;
 }
 .legend-comp {
@@ -98,7 +99,7 @@ onMounted(() => {
   .icon {
     width: 20px;
     height: 20px;
-    margin-right: 4px;
+    margin-right: 10px;
   }
 }
 </style>

src/views/Main/MapSearch/index.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="map-search">
+    <span class="map-search-icon">
+      <iconpark-icon name="search" size="16" fill="#fff"></iconpark-icon>
+    </span>
+    <el-input
+      class="map-search-input"
+      placeholder="输入水库名称、水库编码"
+    ></el-input>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {} from "element-plus/";
+defineOptions({
+  name: "MapSearch",
+});
+</script>
+
+<style scoped lang="less">
+.map-search {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  height: 36px;
+  border-radius: 4px;
+  overflow: hidden;
+  .map-search-icon {
+    background: #36b29e;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+  }
+
+  :deep(.map-search-input) {
+    width: 204px;
+    background: rgba(255, 255, 255, 0.8);
+    color: rgba(0, 0, 0, 0.9);
+    ::-webkit-input-placeholder {
+      color: rgba(0, 0, 0, 0.4);
+    }
+  }
+}
+</style>

src/views/Main/index.vue

@@ -8,8 +8,9 @@
     <RegionSelect />
   </LeftPanel>
   <RightPanel>
-    <div>
+    <div class="right-panel-left">
       <div class="top">
+        <MapSearch />
         <MapLayerSwitch @showChange="layerTreeChange"></MapLayerSwitch>
       </div>
       <div class="bottom">
@@ -39,6 +40,7 @@ import MapLayerSwitch from "./Map/components/LayerSwitch.vue";
 import LayerTree from "./Map/components/LayerTree.vue";
 import Map from "./Map/index.vue";
 import RegionSelect from "../RegionSelect/index.vue";
+import MapSearch from "./MapSearch/index.vue";
 import { onBeforeUnmount, onMounted, ref } from "vue";
 defineOptions({
   name: "main",
@@ -76,4 +78,18 @@ onBeforeUnmount(() => {
 });
 </script>
 
-<style scoped></style>
+<style scoped lang="less">
+.right-panel-left {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-end;
+  .top {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    gap: 12px;
+  }
+}
+</style>