diff --git a/src/views/dike/safeOperation/components/Legend.vue b/src/views/components/Legend.vue
similarity index 98%
rename from src/views/dike/safeOperation/components/Legend.vue
rename to src/views/components/Legend.vue
index f359cfd..4250d36 100644
--- a/src/views/dike/safeOperation/components/Legend.vue
+++ b/src/views/components/Legend.vue
@@ -50,6 +50,7 @@ export default {
 <style scoped lang="scss">
 .legend-comp {
   width: 100%;
+  font-size: 14px;
   .row {
     display: flex;
     align-items: center;
diff --git a/src/views/dike/safeOperation/index.vue b/src/views/dike/safeOperation/index.vue
index 7ad7792..70412bd 100644
--- a/src/views/dike/safeOperation/index.vue
+++ b/src/views/dike/safeOperation/index.vue
@@ -94,7 +94,7 @@ import {
 } from "@/views/aiSupervision/waterSetting/runScene/layerTree/index";
 
 import { queryLayersByPos, getSelectedLayersLegend } from "@/utils/mapUtils";
-import Legend from "./components/Legend.vue";
+import Legend from "@/views/components/Legend.vue";
 
 import { throttle } from "lodash-es";
 import { devRun } from "@/utils";
diff --git a/src/views/reservoir/safeOperation/components/Legend.vue b/src/views/reservoir/safeOperation/components/Legend.vue
deleted file mode 100644
index f359cfd..0000000
--- a/src/views/reservoir/safeOperation/components/Legend.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<template>
-  <div class="legend-comp">
-    <div class="row">
-      <img class="icon" src="@/assets/image/reservoir_big.png" alt="" />
-      <span>大型水库</span>
-    </div>
-    <div class="row">
-      <img class="icon" src="@/assets/image/reservoir_normal.png" alt="" />
-      <span>中型水库</span>
-    </div>
-    <div class="row">
-      <img class="icon" src="@/assets/image/reservoir_small.png" alt="" />
-      <span>小型水库</span>
-    </div>
-    <div class="row">
-      <img class="icon" src="@/assets/image/dike_one.png" alt="" />
-      <span>一级堤防</span>
-    </div>
-    <div class="row">
-      <img class="icon" src="@/assets/image/dike_two_three.png" alt="" />
-      <span>二三级堤防</span>
-    </div>
-    <div class="row">
-      <img class="icon" src="@/assets/image/dike_four.png" alt="" />
-      <span>四级堤防</span>
-    </div>
-    <div class="row">
-      <img class="icon" src="@/assets/image/sluice_big.png" alt="" />
-      <span>大型水闸</span>
-    </div>
-    <div class="row">
-      <img class="icon" src="@/assets/image/sluice_middle.png" alt="" />
-      <span>中型水闸</span>
-    </div>
-    <div class="row">
-      <img class="icon" src="@/assets/image/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%;
-  .row {
-    display: flex;
-    align-items: center;
-  }
-  .icon {
-    width: 24px;
-    height: 24px;
-    margin-right: 4px;
-  }
-}
-</style>
diff --git a/src/views/reservoir/safeOperation/index.vue b/src/views/reservoir/safeOperation/index.vue
index 33c4a0c..c47b03c 100644
--- a/src/views/reservoir/safeOperation/index.vue
+++ b/src/views/reservoir/safeOperation/index.vue
@@ -112,7 +112,7 @@ import {
 } from "@/views/aiSupervision/waterSetting/runScene/layerTree/index";
 
 import { queryLayersByPos, getSelectedLayersLegend } from "@/utils/mapUtils";
-import Legend from "./components/Legend.vue";
+import Legend from "@/views/components/Legend.vue";
 
 import { throttle } from "lodash-es";
 import { devRun } from "@/utils";
diff --git a/src/views/sluice/safeOperation/components/Legend.vue b/src/views/sluice/safeOperation/components/Legend.vue
deleted file mode 100644
index f359cfd..0000000
--- a/src/views/sluice/safeOperation/components/Legend.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<template>
-  <div class="legend-comp">
-    <div class="row">
-      <img class="icon" src="@/assets/image/reservoir_big.png" alt="" />
-      <span>大型水库</span>
-    </div>
-    <div class="row">
-      <img class="icon" src="@/assets/image/reservoir_normal.png" alt="" />
-      <span>中型水库</span>
-    </div>
-    <div class="row">
-      <img class="icon" src="@/assets/image/reservoir_small.png" alt="" />
-      <span>小型水库</span>
-    </div>
-    <div class="row">
-      <img class="icon" src="@/assets/image/dike_one.png" alt="" />
-      <span>一级堤防</span>
-    </div>
-    <div class="row">
-      <img class="icon" src="@/assets/image/dike_two_three.png" alt="" />
-      <span>二三级堤防</span>
-    </div>
-    <div class="row">
-      <img class="icon" src="@/assets/image/dike_four.png" alt="" />
-      <span>四级堤防</span>
-    </div>
-    <div class="row">
-      <img class="icon" src="@/assets/image/sluice_big.png" alt="" />
-      <span>大型水闸</span>
-    </div>
-    <div class="row">
-      <img class="icon" src="@/assets/image/sluice_middle.png" alt="" />
-      <span>中型水闸</span>
-    </div>
-    <div class="row">
-      <img class="icon" src="@/assets/image/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%;
-  .row {
-    display: flex;
-    align-items: center;
-  }
-  .icon {
-    width: 24px;
-    height: 24px;
-    margin-right: 4px;
-  }
-}
-</style>
diff --git a/src/views/sluice/safeOperation/index.vue b/src/views/sluice/safeOperation/index.vue
index 86d4a49..246716b 100644
--- a/src/views/sluice/safeOperation/index.vue
+++ b/src/views/sluice/safeOperation/index.vue
@@ -94,7 +94,7 @@ import {
 import { queryLayersByPos, getSelectedLayersLegend } from "@/utils/mapUtils";
 
 import { throttle } from "lodash-es";
-import Legend from "./components/Legend.vue";
+import Legend from "@/views/components/Legend.vue";
 import { devRun } from "@/utils";
 
 const emitter = mitt();