增加危险的tips

danger-manage-web/src/views/dangerScale/profile/DangerTips.vue

+<!--
+ * @Author: 纪泽龙 jizelong@qq.com
+ * @Date: 2023-02-01 09:37:02
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @LastEditTime: 2023-02-01 09:59:55
+ * @FilePath: /danger-manage-web/src/views/dangerScale/profile/tiops.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <div class="danger-tips">
+    <!-- <div>管道压力</div> -->
+    <div class="hasColorBox" :style="{ color: dangerColor['1'] }">
+      <div :style="{ backgroundColor: dangerColor['1'] }"></div>
+      <span>重大风险</span>
+    </div>
+    <div class="hasColorBox" :style="{ color: dangerColor[`2`] }">
+      <div :style="{ backgroundColor: dangerColor[`2`] }"></div>
+      <span>较大风险</span>
+    </div>
+    <div class="hasColorBox" :style="{ color: dangerColor[`3`] }">
+      <div :style="{ backgroundColor: dangerColor[`3`] }"></div>
+      <span>一般风险</span>
+    </div>
+    <div class="hasColorBox" :style="{ color: dangerColor[`4`] }">
+      <div :style="{ backgroundColor: dangerColor[`4`] }"></div>
+      <span>低风险</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "",
+  data() {
+    return {
+      dangerColor: {
+        1: "red",
+        2: "orange",
+        3: "yellow",
+        4: "blue",
+      },
+    };
+  },
+  methods: {},
+};
+</script>
+<style lang="scss" scoped>
+.danger-tips {
+  position: absolute;
+  color: #fff;
+  left: 10px;
+  top: 10px;
+  padding: 1px;
+  padding-left:10px;
+  width: 150px;
+  // background: rgba(6, 29, 51, 0.2);
+  .hasColorBox {
+    // border: 1px solid #053b6a;
+    padding: 2px 5px;
+    margin-bottom: 5px;
+    position:relative;
+    & > div {
+      display: inline-block;
+      width: 50px;
+      height: 20px;
+      margin-right: 10px;
+    }
+    & > span {
+      position:absolute;
+      display: inline-block;
+      width: 100px;
+    }
+
+  }
+}
+</style>

danger-manage-web/src/views/dangerScale/profile/index.vue

@@ -2,7 +2,7 @@
  * @Author: 纪泽龙 jizelong@qq.com
  * @Date: 2022-06-16 15:03:40
  * @LastEditors: 纪泽龙 jizelong@qq.com
- * @LastEditTime: 2022-10-22 10:39:48
+ * @LastEditTime: 2023-02-01 09:48:47
  * @FilePath: /danger-manage-web/src/views/bigwindow/index.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@@ -20,13 +20,14 @@
       >
     </div> -->
     <div id="mapbox"></div>
+    <DangerTips />
   </div>
 </template>
 
 <script>
 import CreateCesium, { DEVICE_PIC_TYPE } from "@/utils/cesium/cesiumClass.js";
 import { dangerArr } from "@/utils/cesium/dangerArr.js";
-
+import DangerTips from "./DangerTips.vue";
 import Video from "@/components/bigWindow/video";
 import Null from "@/components/bigWindow/Null";
 import Danger from "@/components/bigWindow/Danger";
@@ -42,6 +43,7 @@ export default {
   name: "profile",
   components: {
     Editor,
+    DangerTips,
   },
   data() {
     return {
@@ -249,6 +251,7 @@ export default {
 <style lang="scss" scoped>
 .big-window {
   width: 100%;
+  position:relative;
   // height: calc(100vh - 84px);
   height: calc(100vh - 50px);
   #mapbox {