实体关系查询

src/api/basicGeographic.js

@@ -30,3 +30,10 @@ export function getRelationship(params) {
         params
     })
 }
+export function filtership(data) {
+    return request({
+        url: '/apply/dimentity/entity/relationship/filter',
+        method: 'post',
+        data
+    })
+}

src/components/echartsTemplate/graph.vue

@@ -64,17 +64,17 @@ let option = {
         },
       },
       symbolKeepAspect: false,
-      focusNodeAdjacency: false, // 指定的节点以及其所有邻接节点高亮
-      emphasis: {
-        // focus: 'none', // 不受鼠标操作影响
-        label: {
-          show: true // 显示标签
-        },
-        itemStyle: {
-          borderColor: 'red',
-          borderWidth: 2
-        }
-      },
+      focusNodeAdjacency: true, // 指定的节点以及其所有邻接节点高亮
+      // emphasis: {
+      //   // focus: 'none', // 不受鼠标操作影响
+      //   label: {
+      //     show: true // 显示标签
+      //   },
+      //   itemStyle: {
+      //     borderColor: 'red',
+      //     borderWidth: 2
+      //   }
+      // },
       itemStyle: {
         normal: {
           borderColor: "#29ACFC",
@@ -139,7 +139,7 @@ export default {
       option.series[0].data = data
       option.series[0].links = links
       option.series[0].categories = categors
-      console.log(option.legend);
+      // console.log(option.legend);
       this.myChart.setOption(option);
       this.myChart.on("click", (params) => {
         params.event.stop()

src/views/basicGeographic/components/config.js

@@ -129,3 +129,26 @@ export const chInfos = [
 
 
 
+export const gxConfig = [
+  [
+    {
+      label: '',
+      prop: 'query_data',
+      span: 8,
+      component: 'ElInput',
+      componentProps: {
+        placeholder: '请输入查询名称或Id'
+      }
+    },
+    {
+      label: '',
+      prop: 'link',
+      span: 5
+    },
+    {
+      prop: 'action',
+      span: 5
+    }
+  ]
+]
+

src/views/basicGeographic/components/list.vue

@@ -8,11 +8,10 @@
     <div>
       <custom-form ref="formRef" :model="model" :config="formConfig">
         <template #action>
-          <el-button size="mini" type="" @click="getTableData">查询</el-button>
-          <el-button size="mini" @click="reset()">重置</el-button>
+          <el-button size="mini" type="primary" @click="getTableData">查询</el-button>
+          <el-button size="mini" type="primary" @click="reset()">重置</el-button>
         </template>
       </custom-form>
-      <customForm></customForm>
       <!-- :check="true" @selectChange="selectChange" -->
       <tablePage class="tablePage" :cloumn="cloumn" :table="table" ref="tableDialogRef" @currentChange="searchFun">
         <!-- <template #state="{ row }"></template> -->

src/views/basicGeographic/index.vue

@@ -6,22 +6,36 @@
     <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">
+    <div class="sm-panel rightWrap" v-show="showInter" :class="fold ? 'HideRight' : ''">
+      <div 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>
+        <custom-form ref="formRef" :model="pageObj" :config="gxConfig">
+          <template #link>
+            <el-select v-model="pageObj.query_links" placeholder="请选择实体关系" clearable>
+              <el-option v-for="item in linkList" :key="item.value" :label="item.value" :value="item.value">
+              </el-option>
+            </el-select>
+          </template>
+          <template #action>
+            <el-button size="mini" type="primary" @click="setSelected">查询</el-button>
+            <el-button size="mini" type="primary" @click="resetGraph()">重置</el-button>
+          </template>
+        </custom-form>
+        <!-- <div>
+        <el-input placeholder="请输入查询名称或Id" prefix-icon="el-icon-search" v-model="pageObj.query_data" size="small"
+          style="width: 30%; margin-right: 20px;" @change="setSelected">
         </el-input>
-        <el-select v-model="link" placeholder="实体关系" clearable>
+        <el-select v-model="query_links" placeholder="实体关系" clearable style="width: 30%;">
           <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" @mouseout="mouseout"></graph>
       </div>
-      <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="infoto">详情</div>
@@ -51,11 +65,31 @@ let categors = [
       },
     },
   },
+  {
+    name: "上一级",
+    itemStyle: {
+      normal: {
+        color: "#d6a04e",
+        borderColor: "#d6a04e",
+        shadowColor: "#d6a04e",
+      },
+    },
+  },
+  {
+    name: "上两级",
+    itemStyle: {
+      normal: {
+        color: "#967036",
+        borderColor: "#967036",
+        shadowColor: "#967036",
+      },
+    },
+  },
   {
     name: '类别',
     itemStyle: {
       normal: {
-        color: '#87ceeb' // 分类2的颜色
+        color: '#2DBDFF' // 分类2的颜色#87ceeb
       }
     }
   }]
@@ -64,20 +98,26 @@ 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 customForm from "@/components/mapView/custom-form.vue";
+import { getData, getRelationship, filtership } from "@/api/basicGeographic.js";
 import { loadGeoJSON, removeGeoJSON } from "@/utils/MapHelper/help.js";
+import { gxConfig } from "./components/config.js";
 export default {
   name: "BasicGeographic",
   components: {
     EntityManage,
     graph,
     Info,
-    List
+    List,
+    customForm
   },
   data() {
     return {
-      graphText: "",
-      link: "",
+      gxConfig: gxConfig,
+      pageObj: {
+        query_data: "",
+        query_links: "",
+      },
       linkList: [],
       nowObj: {},
       loading: false,
@@ -95,13 +135,16 @@ export default {
   },
   created() { },
   mounted() {
-    // this.detail({ id: 'MA1001NE103K103501003XXXXXXXXXXX2501010000', label: '测试' })//MA1001NE103K103501004XXXXXXXXXXX2203040000
+    this.detail({ entityid: 'MA1001NE103K10350XXXXXXXXXXXXXXX2203020000', entityname: '科尔沁北路' })//MA1001NE103K103501004XXXXXXXXXXX2203040000
   },
   methods: {
     showlist(data) {
       this.$refs.list.show(data)
     },
     click(params) {
+      if (this.oldclick.length && this.oldclick[this.oldclick.length - 1].id == params.data.id) return
+      this.graphdata = [];
+      this.addOld(params.data)
       this.getRelationship(params.data)
     },
     rightClick(params) {
@@ -116,31 +159,54 @@ export default {
       this.showInter = true
       this.graphdata = []
       this.gralinks = []
+      this.$refs.graphEchart.setOptions([], [], []);
       // 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.oldclick = []
+      this.addOld({ name: obj.entityname, id: obj.entityid, category: 0, data: obj })
       this.getRelationship(obj)
-
     },
     HideGraph() {
       this.showInter = false
     },
-    setSelected() {
-      if (this.graphText) {
+    setSelectedold() {
+      if (this.pageObj.query_data) {
         this.$refs.graphEchart.myChart.dispatchAction({
           type: 'highlight',
           seriesIndex: 0,
           dataIndex: this.graphdata.findIndex((node) => {
-            return node.name.includes(this.graphText) || node.id.includes(this.graphText)
+            return node.name.includes(this.pageObj.query_data) || node.id.includes(this.pageObj.query_data)
           })
         });
       } else {
         this.$refs.graphEchart.myChart.clear()
         this.$refs.graphEchart.setOptions(this.graphdata, this.gralinks, categors);
       }
-
+    },
+    setSelected() {
+      console.log(this.pageObj)
+      // if (this.pageObj.query_data || this.pageObj.query_links) {
+      //   let gdaata = this.graphdata
+      //   let glinks = this.gralinks
+      //   // if (this.pageObj.query_data) {
+      //   //   gdaata = this.graphdata.filter(node => { return node.name.includes(this.pageObj.query_data) || node.id.includes(this.pageObj.query_data) })
+      //   //   glinks = this.gralinks.filter(litem => { return node.id == ga.source || node.id == ga.target })
+      //   // }
+      //   if (this.pageObj.query_links)
+      //     glinks = this.gralinks.filter(litem => { return litem.value == this.pageObj.query_links })
+      //   console.log(this.pageObj, glinks)
+      //   gdaata = gdaata.filter((node) => {
+      //     return (node.name.includes(this.pageObj.query_data) || node.id.includes(this.pageObj.query_data)) && (glinks.find(ga => node.id == ga.source || node.id == ga.target)) || node.category == 0
+      //   })
+      //   console.log(this.pageObj, gdaata)
+      //   this.$refs.graphEchart.setOptions(gdaata, this.gralinks, categors);
+      // } else {
+      //   this.$refs.graphEchart.setOptions(this.graphdata, this.gralinks, categors);
+      // }
+      this.filterShip()
+    },
+    resetGraph() {
+      this.pageObj = { query_data: '', query_links: '' }
+      this.$refs.graphEchart.setOptions(this.graphdata, this.gralinks, categors);
     },
     getData(obj, type) {
       getData({ entityid: obj.id || obj.entityid }).then((res) => {
@@ -159,7 +225,17 @@ export default {
         }
       });
     },
+    addOld(obj) {
+      this.oldclick = this.oldclick.filter(gi => gi.id != obj.id)
+      if (this.oldclick.length == 3) this.oldclick = this.oldclick.slice(-2)
+      this.oldclick.push({ ...obj, category: 0 })
+      this.oldclick.forEach((ol, i) => {
+        this.graphdata.push({ ...ol, category: i })
+      })
+    },
     getRelationship(obj) {
+      this.linkList = []
+      this.pageObj = { query_data: '', query_links: '' }
       this.graloading = true
       getRelationship({ entityid: obj.id || obj.entityid }).then((res) => {
         if (res.statuscode == 200) {
@@ -173,6 +249,7 @@ export default {
             }
           })
           this.gralinks = [...this.gralinks, ...res.data.links]
+          // this.gralinks = res.data.links
           this.gralinks.forEach((gli) => {
             if (!this.linkList.find(li => li.value == gli.value)) {
               this.linkList.push({ value: gli.value })
@@ -183,6 +260,16 @@ export default {
         }
       });
     },
+    filterShip() {
+      this.graloading = true
+      this.$refs.graphEchart.setOptions([], [], []);
+      filtership({ ...this.pageObj, data: this.graphdata, links: this.gralinks }).then((res) => {
+        if (res.statuscode == 200) {
+          this.$refs.graphEchart.setOptions(res.data.data, res.data.links, categors);
+          this.graloading = false
+        }
+      });
+    },
     fly() {
       this.nowgeoId && removeGeoJSON(this.nowgeoId)
       this.nowgeoId = 'h' + this.nowObj.data.entityid
@@ -200,7 +287,7 @@ export default {
     }
   },
   watch: {
-    // graphText(newValue) {
+    // query_data(newValue) {
     // },
   },
   beforeDestroy() {
@@ -222,6 +309,7 @@ export default {
     transition-property: right, background;
     transition-duration: 0.5s, 1s;
 
+
     .foldBtn {
       right: 40px;
     }

src/views/geologyDisaster/index.vue

@@ -94,6 +94,7 @@ export default {
 
     },
     addTerrain(LayerURL) {
+      this.searchFun();
       viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
         url: LayerURL,
         isSct: true,
@@ -103,9 +104,6 @@ export default {
       // this.bus.$emit("setDepthAgainst", true);
       viewer.terrainProvider.readyPromise.then(() => {
         console.error('地形加载成功: ');
-        setTimeout(() => {
-          this.searchFun();
-        }, 50000);
       }).otherwise((error) => {
         console.error('地形加载失败: ', error);
       });
@@ -128,7 +126,7 @@ export default {
       }).then((res) => {
         this.loading = false
         this.table = { total: res.data.length, data: res.data };
-        this.active_tableData(res.data);
+        this.active_tableData(this.table.data);
       });
     },
     active_tableData(newVal) {