实体列表定位、详情、关系处理

src/views/basicGeographic/components/config.js

@@ -35,12 +35,12 @@ export const FormConfig = [
 
 export const TableHeader = [
   // 序号
-  { label: "实体名称", prop: "entityname", width: 100 },
+  { label: "实体名称", prop: "entityname", width: 150 },
   { label: "实体ID", prop: "entityid" },
   { label: "图元标识码", prop: "elementid" },
   { label: "图元编码", prop: "elementcode" },
   { label: "位置码", prop: "locationid" },
-  { label: "操作", slot: "action" },
+  { label: "操作", slot: "action", width: 120 },
 ]
 
 

src/views/basicGeographic/index.vue

@@ -1,23 +1,30 @@
 <!--合规性分析-->
 <template>
-  <div class="ghzc basicGeographic">
-    <EntityManage class="innerContainer leftPane" @detail="detail" @checkChange="checkChange"></EntityManage>
+  <div class="ghzc basicGeographic" :class="!fold ? 'HideLeft' : ''">
+    <!-- @detail="detail" @checkChange="checkChange" -->
+    <EntityManage class="innerContainer leftPane" @showlist="showlist"></EntityManage>
+    <div>
+    </div>
+    <List class="innerContainer bottomPane" v-drag ref="list" @click="getData" @graph="detail"></List>
     <div class="sm-panel rightWrap" v-show="showInter" :class="fold ? 'HideRight' : ''" v-loading="graloading">
       <div class="sm-panel-header">
         <span>实体关系</span>
         <span class="closeBtn foldBtn" :class="`el-icon-s-${fold ? '' : 'un'}fold`" @click="fold = !fold"></span>
         <span class="closeBtn" @click="HideGraph">&times;</span>
-
       </div>
       <div style="width: 50%;">
         <el-input placeholder="请输入查询名称或Id" prefix-icon="el-icon-search" v-model="graphText" size="small"
           @change="setSelected">
         </el-input>
+        <el-select v-model="link" placeholder="实体关系" clearable>
+          <el-option v-for="item in linkList" :key="item.value" :label="item.value" :value="item.value">
+          </el-option>
+        </el-select>
       </div>
-      <graph id="first_pie" ref="graphEchart" @click="click" @rightClick="rightClick"></graph>
+      <graph id="first_pie" ref="graphEchart" @click="click" @rightClick="rightClick" @mouseout="mouseout"></graph>
       <div id="myContext" class="myContextMenu" style="display: none;">
         <div @click="fly"> 定位</div>
-        <div @click="info">详情</div>
+        <div @click="infoto">详情</div>
       </div>
     </div>
     <div class="sm-panel infoDiv" v-show="showinfo">
@@ -56,6 +63,7 @@ let categors = [
 import Info from "../Idleland/components/info.vue";
 import EntityManage from "../BasicGeographic/entityManage.vue";
 import graph from "@/components/echartsTemplate/graph.vue";
+import List from "./components/list.vue";
 import { getData, getRelationship } from "@/api/basicGeographic.js";
 import { loadGeoJSON, removeGeoJSON } from "@/utils/MapHelper/help.js";
 export default {
@@ -63,11 +71,14 @@ export default {
   components: {
     EntityManage,
     graph,
-    Info
+    Info,
+    List
   },
   data() {
     return {
       graphText: "",
+      link: "",
+      linkList: [],
       nowObj: {},
       loading: false,
       showInter: false,
@@ -76,6 +87,7 @@ export default {
       showinfo: false,
       jbxxData: [],
       graloading: false,
+      oldclick: [],
       graphdata: [],
       gralinks: [],
       nowgeoId: "",
@@ -83,15 +95,19 @@ export default {
   },
   created() { },
   mounted() {
-    this.detail({ id: 'MA1001NE103K103501003XXXXXXXXXXX2501010000', label: '测试' })//MA1001NE103K103501004XXXXXXXXXXX2203040000
+    // this.detail({ id: 'MA1001NE103K103501003XXXXXXXXXXX2501010000', label: '测试' })//MA1001NE103K103501004XXXXXXXXXXX2203040000
   },
   methods: {
+    showlist(data) {
+      this.$refs.list.show(data)
+    },
     click(params) {
       this.getRelationship(params.data)
     },
     rightClick(params) {
       this.nowObj = params.data
     },
+    mouseout() { },
     checkChange(obj, checked) {
       if (checked) this.getData(obj)
       else removeGeoJSON(`2wentity${obj.id}`)
@@ -100,7 +116,11 @@ export default {
       this.showInter = true
       this.graphdata = []
       this.gralinks = []
-      this.graphdata.push({ name: obj.label, id: obj.id, category: 0, data: obj })
+      // this.graphdata.push({ name: obj.label, id: obj.id, category: 0, data: obj })
+      this.graphdata.push({ name: obj.entityname, id: obj.entityid, category: 0, data: obj })
+      if(this.oldclick)
+      arr.slice(1)
+      this.oldclick.push({ name: obj.entityname, id: obj.entityid, category: 0, data: obj })
       this.getRelationship(obj)
 
     },
@@ -122,32 +142,42 @@ export default {
       }
 
     },
-    getData(obj) {
-      getData({ entityid: obj.id }).then((res) => {
+    getData(obj, type) {
+      getData({ entityid: obj.id || obj.entityid }).then((res) => {
         if (res.statuscode == 200) {
-          //#facd91
-          res.data.geom.forEach(item => {
-            loadGeoJSON(item.siweigeomewkt, "#55A1E3", { isfly: true }, (data) => {
-              data.name = `2wentity${obj.id}`;
+          if (type == 'infoto' || type == 'fly') {
+            this.nowObj = res;
+            this[type]();
+          }
+          else
+            //#facd91
+            res.data.geom.forEach(item => {
+              loadGeoJSON(item.siweigeomewkt, "#55A1E3", { isfly: true }, (data) => {
+                data.name = `2wentity${obj.id}`;
+              });
             });
-          });
         }
       });
     },
     getRelationship(obj) {
       this.graloading = true
-      getRelationship({ entityid: obj.id }).then((res) => {
+      getRelationship({ entityid: obj.id || obj.entityid }).then((res) => {
         if (res.statuscode == 200) {
           res.data.data.forEach((item, i) => {
             if (item.entityid && !this.graphdata.find(gi => gi.id == item.entityid)) {
               this.graphdata.push({
-                name: item.entityname != 'null' ? item.entityname : item.entityid,
+                name: item.entityname != 'null' ? item.entityname : '未知',
                 id: item.entityid,
                 data: item
               })
             }
           })
           this.gralinks = [...this.gralinks, ...res.data.links]
+          this.gralinks.forEach((gli) => {
+            if (!this.linkList.find(li => li.value == gli.value)) {
+              this.linkList.push({ value: gli.value })
+            }
+          })
           this.$refs.graphEchart.setOptions(this.graphdata, this.gralinks, categors);
           this.graloading = false
         }
@@ -162,7 +192,7 @@ export default {
         });
       });
     },
-    info() {
+    infoto() {
       this.showinfo = true;
       Object.keys(this.nowObj.data).forEach((key) => {
         this.jbxxData.push({ name: key, value: this.nowObj.data[key], });
@@ -234,26 +264,15 @@ export default {
   .infoDiv {
     right: 50%;
   }
+
+  .bottomPane {
+    width: calc(100% - 40px);
+    height: 600px;
+    top: calc(100% - 620px);
+    left: 20px;
+  }
 }
 </style>
 <style lang="scss">
 @import "../complianceAnalysis/ghzc.scss";
-
-
-
-@keyframes toRight {
-  from {
-    transform: translateX(0);
-    opacity: 0;
-  }
-
-  to {
-    transform: translateX(100%);
-    opacity: 1;
-  }
-}
-
-.sliding-element {
-  animation: toLeft 1s forwards
-}
 </style>