feat: 增加默认图例

package.json

@@ -29,7 +29,7 @@
     "pinia": "2.0.28",
     "qs": "6.11.0",
     "spark-md5": "^3.0.2",
-    "sy-cesium-sdk": "^2.3.0",
+    "sy-cesium-sdk": "^2.4.1",
     "vue": "3.3.7",
     "vue-router": "4.0.16",
     "vuedraggable": "^4.1.0"

src/App.vue

@@ -1,28 +1,5 @@
 <script setup lang="ts">
-import { onMounted, onBeforeUnmount } from "vue";
-import { messageCallback } from "@/message/index";
-import { useMap } from "@/hooks/web/useMap";
 import zhCn from "element-plus/dist/locale/zh-cn.mjs";
-const { initMap } = useMap();
-const resize = () => {
-  const app = document.getElementById("app") as HTMLDivElement;
-  if (!app) return;
-  const clientHeight = document.body.clientHeight;
-  const zoom = clientHeight / 1080;
-  (app.style as any).zoom = zoom * 100 + "%";
-};
-
-onMounted(async () => {
-  initMap();
-  // 注册postMessage事件
-  window.addEventListener("message", messageCallback);
-  window.addEventListener("resize", resize);
-  window.addEventListener("load", resize);
-});
-onBeforeUnmount(() => {
-  window.removeEventListener("message", messageCallback);
-  window.$bus.$all_off();
-});
 const locale = zhCn as any;
 </script>
 
@@ -41,8 +18,8 @@ body {
   padding: 0;
   border: none;
   overflow: hidden;
-  font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, "Microsoft Yahei",
-    "Hiragino Sans GB", "WenQuanYi Micro Hei", sans-serif;
+  font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, "Microsoft Yahei", "Hiragino Sans GB", "WenQuanYi Micro Hei",
+    sans-serif;
   font-size: 14px;
   color: #ffffff;
   background: #000;
@@ -196,21 +173,11 @@ body {
   }
 
   50% {
-    clip: rect(
-      var(--clip-height-2),
-      var(--clip-width-1),
-      var(--clip-width-1),
-      0px
-    );
+    clip: rect(var(--clip-height-2), var(--clip-width-1), var(--clip-width-1), 0px);
   }
 
   75% {
-    clip: rect(
-      0px,
-      var(--clip-width-1),
-      var(--clip-height-1),
-      var(--clip-width-2)
-    );
+    clip: rect(0px, var(--clip-width-1), var(--clip-height-1), var(--clip-width-2));
   }
 }
 
@@ -480,20 +447,8 @@ body {
 }
 
 .tiltPanel-theme-blue .area {
-  background-image: linear-gradient(
-      135deg,
-      transparent 30px,
-      #28bbf06c 30px,
-      #28bbf06c 50%,
-      transparent 50%
-    ),
-    linear-gradient(
-      -45deg,
-      transparent 30px,
-      #28bbf06c 30px,
-      #28bbf06c 50.1%,
-      transparent 50%
-    );
+  background-image: linear-gradient(135deg, transparent 30px, #28bbf06c 30px, #28bbf06c 50%, transparent 50%),
+    linear-gradient(-45deg, transparent 30px, #28bbf06c 30px, #28bbf06c 50.1%, transparent 50%);
 }
 
 .tiltPanel-theme-blue .title {

src/components.d.ts

@@ -9,31 +9,7 @@ declare module 'vue' {
   export interface GlobalComponents {
     Card: typeof import('./components/Card/index.vue')['default']
     Dialog: typeof import('./components/Dialog/index.vue')['default']
-    ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
-    ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
-    ElButton: typeof import('element-plus/es')['ElButton']
-    ElCascader: typeof import('element-plus/es')['ElCascader']
-    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
-    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
-    ElDropdown: typeof import('element-plus/es')['ElDropdown']
-    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
-    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
-    ElIcon: typeof import('element-plus/es')['ElIcon']
-    ElImage: typeof import('element-plus/es')['ElImage']
-    ElInput: typeof import('element-plus/es')['ElInput']
-    ElOption: typeof import('element-plus/es')['ElOption']
-    ElProgress: typeof import('element-plus/es')['ElProgress']
-    ElSelect: typeof import('element-plus/es')['ElSelect']
-    ElSlider: typeof import('element-plus/es')['ElSlider']
-    ElStep: typeof import('element-plus/es')['ElStep']
-    ElSteps: typeof import('element-plus/es')['ElSteps']
-    ElTabPane: typeof import('element-plus/es')['ElTabPane']
-    ElTabs: typeof import('element-plus/es')['ElTabs']
-    ElTag: typeof import('element-plus/es')['ElTag']
-    ElTooltip: typeof import('element-plus/es')['ElTooltip']
-    ElTree: typeof import('element-plus/es')['ElTree']
-    ElUpload: typeof import('element-plus/es')['ElUpload']
     Form: typeof import('./components/Form/index.vue')['default']
     InputNumber: typeof import('./components/Input/input-number.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

src/theme/index.scss

@@ -1,18 +1,18 @@
 // import dark theme
-@use 'element-plus/theme-chalk/src/dark/css-vars.scss' as *;
+@use "element-plus/theme-chalk/src/dark/css-vars.scss" as *;
 
-@use 'element-plus/theme-chalk/src/index.scss' as *;
-@use './overview.scss' as *;
-@use './search.scss' as *;
-@use './date.scss' as *;
-@use './input.scss' as *;
-@use './select.scss' as *;
-@use './dialog.scss' as *;
-@use './tree.scss' as *;
-@use './table.scss' as *;
-@use './tabs.scss' as *;
-@use './step.scss' as *;
-@use './upload.scss' as *;
+@use "element-plus/theme-chalk/src/index.scss" as *;
+@use "./overview.scss" as *;
+@use "./search.scss" as *;
+@use "./date.scss" as *;
+@use "./input.scss" as *;
+@use "./select.scss" as *;
+@use "./dialog.scss" as *;
+@use "./tree.scss" as *;
+@use "./table.scss" as *;
+@use "./tabs.scss" as *;
+@use "./step.scss" as *;
+@use "./upload.scss" as *;
 
 body {
   font-family: 思源黑体;
@@ -27,7 +27,7 @@ body {
   left: 0;
   top: 0;
   width: 100%;
-  // height: 100%;
+  height: 100%;
 }
 
 a {

src/theme/var.css

@@ -77,7 +77,7 @@
   --sy-border-color: rgba(10, 204, 204, 0.32);
   /*滚动条*/
   --sy-webkit-scrollbar-background: transparent;
-  --sy-webkit-scrollbar-thumb-background: rgba(255, 255, 255, 0.4);
+  --sy-webkit-scrollbar-thumb-background: rgba(0, 0, 0, 0.4);
   /*边框*/
-  --sy-base-border-color: rgba(255, 255, 255, 0.2);
+  --sy-base-border-color: rgba(0, 0, 0, 0.2);
 }

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

@@ -0,0 +1,67 @@
+<template>
+  <div class="legend-comp">
+    <div class="row">
+      <img class="icon" src="@/assets/map/reservoir_big.png" alt="" />
+      <span>大型水库</span>
+    </div>
+    <div class="row">
+      <img class="icon" src="@/assets/map/reservoir_normal.png" alt="" />
+      <span>中型水库</span>
+    </div>
+    <div class="row">
+      <img class="icon" src="@/assets/map/reservoir_small.png" alt="" />
+      <span>小型水库</span>
+    </div>
+    <div class="row">
+      <img class="icon" src="@/assets/map/dike_one.png" alt="" />
+      <span>一级堤防</span>
+    </div>
+    <div class="row">
+      <img class="icon" src="@/assets/map/dike_two_three.png" alt="" />
+      <span>二三级堤防</span>
+    </div>
+    <div class="row">
+      <img class="icon" src="@/assets/map/dike_four.png" alt="" />
+      <span>四级堤防</span>
+    </div>
+    <div class="row">
+      <img class="icon" src="@/assets/map/sluice_big.png" alt="" />
+      <span>大型水闸</span>
+    </div>
+    <div class="row">
+      <img class="icon" src="@/assets/map/sluice_middle.png" alt="" />
+      <span>中型水闸</span>
+    </div>
+    <div class="row">
+      <img class="icon" src="@/assets/map/sluice_small.png" alt="" />
+      <span>小型水闸</span>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style scoped lang="scss">
+.legend-comp {
+  width: 100%;
+  max-height: 150px;
+  overflow-y: auto;
+  .row {
+    display: flex;
+    align-items: center;
+    padding-right: 12px;
+    color: rgba(0, 0, 0, 0.9);
+  }
+  .icon {
+    width: 24px;
+    height: 24px;
+    margin-right: 4px;
+  }
+}
+</style>

src/views/Main/Map/index.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { onMounted, onBeforeUnmount } from "vue";
+import { messageCallback } from "@/message/index";
+import Legend from "./components/Legend.vue";
+import { useMap } from "@/hooks/web/useMap";
+const { initMap } = useMap();
+const resize = () => {
+  const app = document.getElementById("app") as HTMLDivElement;
+  if (!app) return;
+  const clientHeight = document.body.clientHeight;
+  const zoom = clientHeight / 1080;
+  (app.style as any).zoom = zoom * 100 + "%";
+};
+
+onMounted(async () => {
+  initMap();
+  // 注册postMessage事件
+  window.addEventListener("message", messageCallback);
+  window.addEventListener("resize", resize);
+  window.addEventListener("load", resize);
+});
+onBeforeUnmount(() => {
+  window.removeEventListener("message", messageCallback);
+  window.$bus.$all_off();
+});
+</script>
+
+<template>
+  <div class="legend-box">
+    <Legend></Legend>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.legend-box {
+  position: absolute;
+  bottom: 24px;
+  right: 550px;
+  padding: 12px 0 12px 12px;
+  overflow-y: auto;
+  background-color: #fff;
+  border-radius: 8px;
+  overflow: hidden;
+}
+</style>

src/views/Main/index.vue

@@ -14,6 +14,7 @@
     </Drawer>
   </RightPanel>
   <BottomPanel></BottomPanel>
+  <Map></Map>
 </template>
 
 <script setup lang="ts">
@@ -27,6 +28,7 @@ import InspectionCard from "./InspectionCard/index.vue";
 import SafetyOverviewCard from "./SafetyOverviewCard/index.vue";
 import RiskInspectionCard from "./RiskInspectionCard/index.vue";
 import DailyPatrolCard from "./DailyPatrolCard/index.vue";
+import Map from "./Map/index.vue";
 defineOptions({
   name: "main",
 });