孙浩博，fixed：新增测绘功能

src/views/situation/Model.vue

@@ -0,0 +1,120 @@
+<template>
+  <el-tabs v-model="activeName" @tab-click="tabClick" :stretch="true" type="card">
+    <el-tab-pane label="红方" name="red">
+      <div class="image-container">
+        <div v-for="(image, index) in imagesRed" :key="index" class="image-item">
+          <el-image
+            :src="image.url"
+            fit="fill"
+            :class="{ 'highlighted-red': activeImage === image.name }"
+            @click="paneClick(image.name)"
+          ></el-image>
+          <div class="image-name">{{ image.name }}</div>
+        </div>
+      </div>
+    </el-tab-pane>
+    <el-tab-pane label="蓝方" name="blue">
+      <div class="image-container">
+        <div v-for="(image, index) in imagesBlue" :key="index" class="image-item">
+          <el-image
+            :src="image.url"
+            fit="fill"
+            :class="{ 'highlighted-blue': activeImage === image.name }"
+            @click="paneClick(image.name)"
+          ></el-image>
+          <div class="image-name">{{ image.name }}</div>
+        </div>
+      </div>
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      activeName: "red",
+      activeImage: "",
+      isShow: false,
+      imagesRed: [
+        {
+          url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          isClicked: false,
+          name: "Thad拦截导弹"
+        },
+        {
+          url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          isClicked: false,
+          name: "拦截雷达"
+        },
+        {
+          url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          isClicked: false,
+          name: "拦截卫星"
+        }
+      ],
+      imagesBlue: [
+        {
+          url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          isClicked: false,
+          name: "弹道导弹"
+        },
+        {
+          url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          isClicked: false,
+          name: "雷达诱饵"
+        },
+        {
+          url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          isClicked: false,
+          name: "干扰雷达"
+        }
+      ]
+    };
+  },
+  methods: {
+    tabClick(tab, event) {
+      this.cancelHighlight();
+      console.log("123 :>> ");
+    },
+    paneClick(name) {
+      if (name === this.activeImage) {
+        this.cancelHighlight();
+        return;
+      }
+      this.$emit("selectModel", "pointer");
+      this.activeImage = name;
+    },
+    cancelHighlight() {
+      this.activeImage = "";
+      this.$emit("selectModel");
+    }
+  }
+};
+</script>
+
+<style scope lang="less">
+.highlighted-red {
+  border: 2px solid red; /* 可以根据需求设置高亮效果，这里用蓝色边框表示 */
+  box-shadow: 0 0 5px red; /* 可选：添加阴影效果 */
+}
+.highlighted-blue {
+  border: 2px solid blue; /* 可以根据需求设置高亮效果，这里用蓝色边框表示 */
+  box-shadow: 0 0 5px blue; /* 可选：添加阴影效果 */
+}
+.image-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  overflow: auto;
+  max-height: 300px;
+  .image-item {
+    width: 48%;
+    .image-name {
+      padding: 5px;
+      font-size: 14px;
+      text-align: center;
+    }
+  }
+}
+</style>

src/views/situation/index.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="container">
-    <div id="modeltooltip">左键单击确认</div>
     <el-row style="height: 40px">
       <div class="myHeader">
         <el-button :type="this.dimension == 2 ? 'success' : 'danger'" @click="dimensionswitch(2)" round>二维</el-button>
@@ -10,7 +9,7 @@
         </el-button>
       </div>
     </el-row>
-    <el-row id="map" style="height: 790px; width: 100%; display: flex; position: relative">
+    <el-row id="earth" style="height: 790px; width: 100%; display: flex; position: relative">
       <el-col style="height: 100%; position: relative" :span="this.leftwidth">
         <div class="main-layout" v-on:mouseover="changeActive('3D')">
           <div id="3DcesiumContainer" class="map"></div>
@@ -30,19 +29,18 @@
         @tab-click="legendClick"
       >
         <el-tab-pane name="first">
-          <span slot="label">
-            <el-modeltooltip class="item" effect="dark" content="标绘" placement="left">
-              <i class="el-icon-wind-power"></i>
-            </el-modeltooltip>
-          </span>
+          <el-tooltip placement="right" effect="light" slot="label">
+            <span slot="content" class="item">标绘</span>
+            <span><i class="el-icon-wind-power"></i></span>
+          </el-tooltip>
         </el-tab-pane>
         <el-tab-pane name="second">
-          <span slot="label">
-            <el-modeltooltip class="item" effect="dark" content="模型" placement="left">
-              <i class="el-icon-receiving"></i>
-            </el-modeltooltip>
-          </span>
-          <el-radio-group v-model="whosmodel" style="margin: 0 auto" size="mini">
+          <el-tooltip placement="right" effect="light" slot="label">
+            <span slot="content" class="item">模型</span>
+            <span><i class="el-icon-receiving"></i></span>
+          </el-tooltip>
+          <Model @selectModel="selectModel"></Model>
+          <!-- <el-radio-group v-model="whosmodel" style="margin: 0 auto" size="mini">
             <el-radio-button label="red">红方</el-radio-button>
             <el-radio-button label="blue">蓝方</el-radio-button>
           </el-radio-group>
@@ -73,21 +71,19 @@
               <el-image style="width: 100px; height: 80px; margin: 0 auto" :src="url" fit="fill"></el-image>
               <div style="text-align: center">干扰雷达</div>
             </div>
-          </div>
+          </div> -->
         </el-tab-pane>
         <el-tab-pane name="third">
-          <span slot="label">
-            <el-modeltooltip class="item" effect="dark" content="测量" placement="left">
-              <i class="el-icon-discount"></i>
-            </el-modeltooltip>
-          </span>
+          <el-tooltip placement="right" effect="light" slot="label">
+            <span slot="content" class="item">测量</span>
+            <span><i class="el-icon-discount"></i></span>
+          </el-tooltip>
         </el-tab-pane>
         <el-tab-pane name="fouth">
-          <span slot="label">
-            <el-modeltooltip class="item" effect="dark" content="测想定" placement="left">
-              <i class="el-icon-house"></i>
-            </el-modeltooltip>
-          </span>
+          <el-tooltip placement="right" effect="light" slot="label">
+            <span slot="content" class="item">测想定</span>
+            <span><i class="el-icon-house"></i></span>
+          </el-tooltip>
           <el-table :data="situation">
             <el-table-column label="名称" prop="xdname"></el-table-column>
             <el-table-column label="操作">
@@ -108,6 +104,7 @@
         <el-button icon="el-icon-minus" circle @click="small()"></el-button>
       </div>
     </el-row>
+    <div v-if="isShow" class="modeltooltip" ref="modeltooltip">左键单击确认</div>
   </div>
 </template>
 <script>
@@ -115,8 +112,12 @@ import screenfull from "screenfull";
 import fireController from "../../api/fireController";
 import { getToken } from "@/utils";
 import axios from "axios";
+import Model from "@/views/situation/Model";
 export default {
   computed: {},
+  components: {
+    Model
+  },
   data() {
     return {
       situation: [],
@@ -136,7 +137,8 @@ export default {
       },
       whosmodel: "red",
       modelType: null,
-      url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+      url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+      isShow: false
     };
   },
   created() {
@@ -145,7 +147,6 @@ export default {
   mounted() {
     this.cesiumInit();
   },
-
   methods: {
     async saveJson(row) {
       await axios
@@ -608,31 +609,33 @@ export default {
         tab_content[0].style.display = "block";
       }
     },
-
-    selectmodel(modelType) {
-      if (this.modelType == modelType) {
-        this.modelType == null;
+    mouseMove(event) {
+      this.$refs.modeltooltip.style.left = event.pageX - 220 + "px";
+      this.$refs.modeltooltip.style.top = event.pageY - 110 + "px";
+    },
+    selectModel(cursorStyle) {
+      let earthMap = document.getElementById("earth");
+      earthMap.style.cursor = cursorStyle || "auto";
+      if (cursorStyle) {
+        document.addEventListener("mousemove", this.mouseMove);
+        this.isShow = true;
       } else {
-        this.modelType = modelType;
-        var map = document.getElementById("map");
-        map.style.cursor = "crosshair";
-        document.addEventListener("mousemove", function (event) {
-          var modeltooltip = document.getElementById("modeltooltip");
-          modeltooltip.style.display = "block";
-          modeltooltip.style.left = event.clientX - 180 + "px";
-          modeltooltip.style.top = event.clientY - 100 + "px";
-        });
-
-        document.addEventListener("mouseout", function () {
-          var modeltooltip = document.getElementById("modeltooltip");
-          modeltooltip.style.display = "none";
-        });
+        document.removeEventListener("mousemove", this.mouseMove);
+        this.isShow = false;
       }
     }
   }
 };
 </script>
 <style scoped>
+.modeltooltip {
+  position: absolute;
+  padding: 5px;
+  color: #fff;
+  font-size: 20px;
+  pointer-events: none;
+  z-index: 999;
+}
 .myHeader {
   background-color: #1c222b !important;
   color: #fff;
@@ -653,7 +656,7 @@ export default {
   height: 100%;
 }
 
-/deep/ .el-card__body {
+::v-deep .el-card__body {
   height: 100% !important;
   padding: 0px !important;
 }
@@ -663,10 +666,6 @@ export default {
   width: 100%;
 }
 
-.container {
-  height: 100%;
-}
-
 .map {
   width: 100%;
   height: 100%;
@@ -680,7 +679,7 @@ export default {
   top: 20px;
 }
 
-/deep/.el-tabs--left .el-tabs__header.is-left {
+::v-deep .el-tabs--left .el-tabs__header.is-left {
   margin-right: 0px !important;
 }
 
@@ -698,7 +697,7 @@ export default {
   margin: 5px !important;
 }
 
-/deep/.el-tabs--border-card > .el-tabs__content {
+::v-deep .el-tabs--border-card > .el-tabs__content {
   width: 300px;
   display: none;
 }
@@ -731,18 +730,13 @@ export default {
   display: block !important;
 }
 
-/deep/ .el-image .el-image__inner {
+::v-deep .el-image .el-image__inner {
   border: 1px solid #ddd;
   border-radius: 5px;
 }
 
-#modeltooltip {
-  position: absolute;
-  display: none;
-  padding: 5px;
-  color: #fff;
-  font-size: 20px;
-  pointer-events: none;
-  z-index: 999;
+.item {
+  font-size: 14px;
+  /* right: 20px; */
 }
 </style>