实体关系

src/components/echartsTemplate/graph.vue

@@ -31,34 +31,13 @@ let option = {
       color: "#fff",
       fontSize: 14,
     },
-    // textStyle: {
-    //   rich: {
-    //     name: {
-    //       color: "#fff", //#BCD3E5
-    //       fontSize: 14,
-    //       // width: 60,
-    //     },
-    //     value: {
-    //       color: "#64DAFF",
-    //       fontSize: 14,
-    //       padding: [5, 0],
-    //       align: "center",
-    //       // width: 40,
-    //     },
-    //     unit: {
-    //       color: "#fff", //#BCD3E5
-    //       fontSize: 14,
-    //       // width: 5,
-    //     },
-    //   },
-    // },
   },
   series: [
     {
       type: "graph",
       layout: "force",
       force: {
-        repulsion: 1500,
+        repulsion: 1000,
         edgeLength: 120,
         layoutAnimation: true,
       },
@@ -85,7 +64,7 @@ let option = {
         },
       },
       symbolKeepAspect: false,
-      focusNodeAdjacency: false, // 指定的节点以及其所有邻接节点高亮
+      focusNodeAdjacency: true, // 指定的节点以及其所有邻接节点高亮
       itemStyle: {
         normal: {
           borderColor: "#29ACFC",
@@ -95,30 +74,30 @@ let option = {
           curveness: 0.08,
         },
       },
-
       lineStyle: {
         normal: {
           opacity: 0.9,
           width: 2,
           curveness: 0.15,
-          color: {
-            type: "linear",
-            x: 0,
-            y: 0,
-            x2: 0,
-            y2: 1,
-            colorStops: [
-              {
-                offset: 0,
-                color: "#FFF", // 0% 处的颜色
-              },
-              {
-                offset: 1,
-                color: "#FFF", // 100% 处的颜色
-              },
-            ],
-            globalCoord: false,
-          },
+          color: 'source',//'target',
+          // color: {
+          //   type: "linear",
+          //   x: 0,
+          //   y: 0,
+          //   x2: 0,
+          //   y2: 1,
+          //   colorStops: [
+          //     {
+          //       offset: 0,
+          //       color: "#FFF", // 0% 处的颜色
+          //     },
+          //     {
+          //       offset: 1,
+          //       color: "#FFF", // 100% 处的颜色
+          //     },
+          //   ],
+          //   globalCoord: false,
+          // },
         },
       },
 
@@ -153,6 +132,7 @@ export default {
       console.log(option.legend);
       this.myChart.setOption(option);
       this.myChart.on("click", (params) => {
+        params.event.stop()
         this.$emit("click", params)
       });
       // 监听右键点击事件
@@ -177,7 +157,6 @@ export default {
           var menu = document.getElementById('myContext');
           if (menu) menu.style.display = 'none';
         }, 3000);
-        console.log('out');
       });
 
 

src/views/basicGeographic/entityManage.vue

@@ -7,10 +7,9 @@
     <div class="treeDiv">
       <!-- :default-checked-keys="checkedKeys" :data="TreeDatas" :props="defaultProps" -->
       <el-tree @check="handleCheckChange" class="filter-tree" show-checkbox node-key="id" ref="tree" lazy
-        :load="getTree">
+        :props="defaultProps" :load="getTree">
         <span class="custom-tree-node" slot-scope="{ node, data }">
-          <span class="ellipsisText" :title="node.label">{{ node.label }}{{ data.disabled ? `(${data.count || 0})` : ''
-            }}</span>
+          <span :class="data.disabled ? '' : 'ellipsisText'" :title="node.label">{{ node.label }}{{ data.disabled ? `(${data.count || 0})` : ''}}</span>
           <span>
             <i v-if="!data.disabled" class="el-icon-s-order" @click="showDetail(data)"></i>
           </span>
@@ -37,6 +36,7 @@ export default {
       defaultProps: {
         children: "children",
         label: "label",
+        isLeaf: 'isLeaf'
       },
       TreeDatas: [],
       fold: true,
@@ -54,8 +54,13 @@ export default {
     },
 
     getTree(node, resolve) {
+      if (node.data && !node.data.disabled) resolve([]);
       getEntityTree({ id: node.data ? node.data.id : undefined }).then((res) => {
         if (res.statuscode == 200) {
+          res.data.forEach(element => {
+            element.isLeaf = !element.disabled
+          });
+          console.log(res.data)
           resolve(res.data);
         }
       });

src/views/basicGeographic/index.vue

@@ -2,18 +2,19 @@
 <template>
   <div class="ghzc basicGeographic">
     <EntityManage class="innerContainer leftPane" @detail="detail" @checkChange="checkChange"></EntityManage>
-    <div class="sm-panel rightWrap" v-show="showInter" :class="fold ? 'HideRight' : ''">
+    <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="showInter = false">&times;</span>
+        <span class="closeBtn" @click="HideGraph">&times;</span>
 
       </div>
       <div style="width: 50%;">
-        <el-input placeholder="请输入查询内容" prefix-icon="el-icon-search" v-model="graphText" size="small" @change="detail">
+        <el-input placeholder="请输入查询内容" prefix-icon="el-icon-search" v-model="graphText" size="small"
+          @change="setSelected">
         </el-input>
       </div>
-      <graph id="first_pie" ref="graphEchart" click=""></graph>
+      <graph id="first_pie" ref="graphEchart" @click="click"></graph>
       <div id="myContext" class="myContextMenu" style="display: none;">
         <div @click="fly"> 定位</div>
         <div @click="info">详情</div>
@@ -44,91 +45,10 @@ let data = [
     },
     name: "王桂花",
     id: "wgh",
-  },
-  {
-    tooltip: {
-      formatter: "{b} <br/>性别：男<br/>出生年月：19951114<br/>星座：处女座",
-    },
-    name: "李思思",
-    category: 0,
-    id: 'lss'
-  },
-  {
-    name: "自住房屋",
-  },
-  {
-    name: "车子",
-    category: 1
-  },
-  {
-    name: "租房",
-  },
-  {
-    name: "黄涛",
-  },
-  {
-    name: "于海",
-  },
-  {
-    name: "张柏",
-  },
-  {
-    name: "付梦杰",
-  },
+  }
 ];
 
-let links = [
-  {
-    source: 'lfg',
-    target: 'wgh',
-    value: "夫妻",
-  },
-  {
-    source: 0,
-    target: 'lss',
-    value: "父亲",
-  },
-  {
-    source: 2,
-    target: 0,
-    value: "女儿",
-  },
-  {
-    source: 0,
-    target: 3,
-    value: "自住",
-  },
-  {
-    source: 0,
-    target: 4,
-    value: "车主",
-  },
-  {
-    source: 0,
-    target: 5,
-    value: "租户",
-  },
-  {
-    source: 5,
-    target: 6,
-    value: "租赁",
-  },
-  {
-    source: 5,
-    target: 7,
-    value: "租赁",
-  },
-  {
-    source: 5,
-    target: 8,
-    value: "租赁",
-  },
-  {
-    source: 5,
-    target: 9,
-    value: "租赁",
-  },
-];
+
 let categors = [
   {
     name: "李富贵",
@@ -148,69 +68,7 @@ let categors = [
       }
     }
   }]
-let data2 = [
-  {
-    name: "租房",
-    tooltip: {
-      formatter: "{b} <br/>性别：男<br/>职务：富阳区灵桥镇灵桥村务农",
-    },
-    itemStyle: {
-      normal: {
-        color: "#FCBB5B",
-        borderColor: "#FCBB5B",
-        shadowColor: "#FCBB5B",
-      },
-    },
-  },
-  {
-    name: "黄涛",
-  },
-  {
-    name: "于海",
-  },
-  {
-    name: "张柏",
-  },
-  {
-    name: "付梦杰",
-  },
-  {
-    name: "李富贵",
-  },
-];
 
-let links2 = [
-  {
-    source: 0,
-    target: 1,
-    value: "租赁",
-  },
-  {
-    source: 0,
-    target: 2,
-    value: "租赁",
-  },
-  {
-    source: 0,
-    target: 3,
-    value: "租赁",
-  },
-  {
-    source: 0,
-    target: 4,
-    value: "租赁",
-  },
-  {
-    source: 0,
-    target: 5,
-    value: "房主",
-  },
-  {
-    source: 5,
-    target: 0,
-    value: "租户",
-  },
-];
 import Info from "../Idleland/components/info.vue";
 import EntityManage from "./entityManage.vue";
 import graph from "@/components/echartsTemplate/graph.vue";
@@ -232,21 +90,20 @@ export default {
       fold: false,
       geoSources: {},
       showinfo: false,
-      jbxxData: []
+      jbxxData: [],
+      graloading: false,
+      graphdata: [],
+      gralinks: []
     };
   },
   created() { },
   mounted() {
-    this.detail({ id: 'MA1001NE103K10342XXXXXXXXXXXXXXX2203020000' });
+    this.detail({ id: 'MA1001NE103K103501003XXXXXXXXXXX2501010000' })//MA1001NE103K103501004XXXXXXXXXXX2203040000
   },
   methods: {
     click(params) {
       console.log(params, "paramsparams");
-      if (params.name == "租房") {
-        this.$refs.graphEchart.setOptions(data2, links2, categors)
-      } else if (params.name == "李富贵") {
-        this.$refs.graphEchart.setOptions(data, links, categors)
-      }
+      this.getRelationship(params.data)
     },
     checkChange(obj, checked) {
       if (checked) this.getData(obj)
@@ -254,11 +111,27 @@ export default {
     },
     detail(obj) {
       this.showInter = true
-      console.log(obj, "paramsparams",getRelationship);
+      this.graphdata = []
+      this.gralinks = []
+      this.graphdata.push({ name: obj.label, id: obj.id, category: 0, })
       this.getRelationship(obj)
-      this.$refs.graphEchart.setOptions(data, links, categors);
-    },
 
+    },
+    HideGraph() {
+      this.showInter = false
+    },
+    setSelected() {
+      let sdata = this.graphdata.map((node) => {
+        console.log();
+        return {
+          name: node.name,
+          value: node.value,
+          selected: node.name.includes(this.graphText)
+        };
+      })
+      this.$refs.graphEchart.setOptions(sdata, this.gralinks, categors);
+      // this.$refs.graphEchart.setOptions(this.graphdata, this.gralinks, categors);
+    },
     getData(obj) {
       getData({ entityid: obj.id }).then((res) => {
         if (res.statuscode == 200) {
@@ -278,12 +151,20 @@ export default {
       });
     },
     getRelationship(obj) {
-      console.log(obj, "paramsparams",getRelationship);
+      this.graloading = true
       getRelationship({ entityid: obj.id }).then((res) => {
         if (res.statuscode == 200) {
-          console.log(res.data);
-          // res.data
-
+          res.data.data.forEach((item, i) => {
+            if (item.info.entityid && !this.graphdata.find(gi => gi.id == item.info.entityid)) {
+              this.graphdata.push({
+                name: item.info.entityname != 'null' ? item.info.entityname : item.info.entityid,
+                id: item.info.entityid,
+              })
+            }
+          })
+          this.gralinks = [...this.gralinks, ...res.data.links]
+          this.$refs.graphEchart.setOptions(this.graphdata, this.gralinks, categors);
+          this.graloading = false
         }
       });
     },