From f41e347a34d2859c149c59691bda6d179b209d44 Mon Sep 17 00:00:00 2001
From: yxl <584911253@qq.com>
Date: 星期三, 22 一月 2025 17:42:53 +0800
Subject: [PATCH] 最新修改

---
 src/views/mapView/mapView.vue |  136 ++++++++++++++++++++++++++++++++++++++-------
 1 files changed, 114 insertions(+), 22 deletions(-)

diff --git a/src/views/mapView/mapView.vue b/src/views/mapView/mapView.vue
index 0133e4e..e035c8c 100644
--- a/src/views/mapView/mapView.vue
+++ b/src/views/mapView/mapView.vue
@@ -14,10 +14,11 @@
         <button @click="setQueryErroInfo(true)">璇㈤棶</button>
         <button @click="setQueryErroInfo(false)">鍏抽棴</button>
       </div>
-    </div> 
-    <!-- <!-- <img :src="http://localhost:12315/image/1.jpg" />   -->
-    
-    <!-- <img :src="$store.state.ImageUrl" style="width:100%;height:50%"> -->
+    </div>
+
+    <div class="relationBox" v-if="$store.state.showRelationBox">
+      <div class="chartBox" id="relationChart"></div>
+    </div>
   </div>
 </template>
 
@@ -26,6 +27,8 @@
 import mapView from "./../../assets/js/map/mapView.js";
 import bus from "./../../assets/js/bus.js";
 import mapServer from "../../assets/js/map/mapServer.js";
+import * as echarts from "echarts";
+// import { nextTick } from "vue/types/umd";
 export default {
   data() {
     return {
@@ -34,46 +37,55 @@
       lengedList: [
         {
           name: "鍐涗簨鐩爣",
-          color: "#73afff"
+          color: "#73afff",
         },
         {
           name: "鏀挎不鐩爣",
-          color: "#fffd72"
+          color: "#fffd72",
         },
         {
           name: "缁忔祹鐩爣",
-          color: "#fabc56"
+          color: "#fabc56",
         },
         {
           name: "绀句細鐩爣",
-          color: "#272424"
+          color: "#272424",
         },
         {
           name: "姘戝畢",
-          color: "#979696"
-        }
-      ]
+          color: "#979696",
+        },
+      ],
     };
   },
   computed: {
     erroInfo() {
       return this.$store.state.erroInfoMessage;
-    }
+    },
+    relationInfo() {
+      return this.$store.state.relationData;
+    },
   },
   watch: {
     erroInfo(nVal, Oval) {
       if (nVal) {
         this.setErrorMessage(nVal);
       }
-    }
+    },
+    relationInfo(data, Oval) {
+      if (data) {
+        setTimeout(() => {
+          this.initChart(data);
+        }, 500);
+      }
+    },
   },
   methods: {
     getBackgroundColor(res) {
-      return `background-color: ${res.color};`
+      return `background-color: ${res.color};`;
     },
     setMapViewStart() {
       mapView.initMap();
-
     },
     setErrorMessage(res) {
       this.errInfoMessage = res;
@@ -87,21 +99,87 @@
         const obj = JSON.parse(JSON.stringify(this.errInfoMessage));
         bus.$emit("mapInfo", {
           type: "erroInfo",
-          value: obj.val
+          value: obj.val,
         });
-
       }
       this.$nextTick(() => {
         this.errInfoFlag = false;
         document.getElementById("inforMessage").innerHTML = "";
         this.errInfoMessage = null;
       });
-    }
+    },
+    initChart(data) {
+      let dom = document.getElementById("relationChart");
+      let myChart = echarts.init(dom);
+      const option = {
+        tooltip: {},
+        series: [
+          {
+            type: "graph",
+            layout: "force",
+            data: data.nodes,
+            links: data.links,
+            symbolSize: function (size) {
+              return size;
+            },
+            roam: true, // 鍚敤缂╂斁鍜屾嫋鎷�
+            label: {
+              show: true,
+              textStyle: {
+                fontSize: 13,
+                color: "#fff",
+              },
+            },
+            force: {
+              repulsion: 500,
+            },
+            edgeSymbol: ["none", "arrow"], //绾�2澶存爣璁�
+            lineStyle: {
+              opacity: 1,
+              width: 1,
+              curveness: 0,
+              color: "#fff",
+              type: "dashed",
+            },
+          },
+        ],
+      };
+      if (option && typeof option === "object") {
+        myChart.setOption(option);
+      }
+      window.addEventListener("resize", myChart.resize);
+      const that = this;
+      myChart.on("click", function (params) {
+        //瀹氫綅鍒板搴斿疄浣�
+        if (params.data.uuid) {
+          that.flyToEntity(params.data);
+        }
+      });
+    },
+    flyToEntity(entity) {
+      const modelLayer = mapServer.listData.filter((obj) => {
+        if (obj.name == config.modelLayer) {
+          return obj;
+        }
+      });
+      modelLayer[0].layer.style = new Cesium.Cesium3DTileStyle({
+        color: {
+          evaluateColor: (feature) => {
+            const id = feature.getProperty("id");
+            if (id.indexOf(entity.uuid) > -1) {
+              console.log("id**********", id);
+              return new SmartEarth.Cesium.Color.fromCssColorString("#FF0000");
+            }
+          },
+        },
+      });
+      earthCtrl.camera.flyTo(entity.lontitude, entity.lattitude, 3000, 0, -90, 0, 2);
+    },
   },
 
   mounted() {
     this.setMapViewStart();
-  }
+  },
 };
 </script>
 
@@ -110,14 +188,13 @@
   width: 100%;
   height: 100%;
   position: absolute;
- 
 }
 
 .mapLenged {
   position: absolute;
   z-index: 40;
   border: 1px solid #808080;
-  background: rgba(255, 255, 255, .7);
+  background: rgba(255, 255, 255, 0.7);
   padding: 4px;
   bottom: 20px;
   left: 20px;
@@ -130,7 +207,6 @@
   align-items: center;
   margin-left: 10px;
   font-size: 16px;
-
 }
 
 .mapLenged li {
@@ -182,6 +258,22 @@
   line-height: normal;
   font-size: 12px;
 }
+
+.relationBox {
+  position: absolute;
+  z-index: 40;
+  background: rgba(0, 0, 0, 0.4);
+  padding: 4px;
+  top: 20px;
+  left: 20px;
+  width: 95%;
+  height: 50%;
+  width: 45vw;
+}
+.chartBox {
+  width: 100%;
+  height: 100%;
+}
 </style>
 <style>
 .infoTitle {

--
Gitblit v1.9.3