实体

src/api/basicGeographic.js

@@ -0,0 +1,26 @@
+
+import request from '@/utils/request'
+
+export function getEntityTree(params) {
+    return request({
+        url: '/apply/dimentity/entity/code/table/tree',
+        method: 'get',
+        params
+    })
+}
+
+export function getData(params) {
+    return request({
+        url: '/apply/dimentity/entity/data',
+        method: 'get',
+        params
+    })
+}
+// 驾驶舱
+export function getRelationship(params) {
+    return request({
+        url: '/apply/dimentity/entity/relationship',
+        method: 'get',
+        params
+    })
+}

src/components/echartsTemplate/graph.vue

@@ -0,0 +1,248 @@
+<template>
+  <div id="graph_echart" ref="echart"></div>
+  <!-- <div>
+    <div class="echars">
+      <div ref="first_pie" id="first_pie"></div>
+    </div>
+  </div> -->
+</template>
+
+<script>
+let option = {
+  backgroundColor: 'rgba(4, 28, 50, 0.5)',
+  tooltip: {},
+  toolbox: {
+    feature: {
+      saveAsImage: {},
+    },
+  },
+  legend: {
+    type: "scroll",
+    orient: "vertical",
+    right: 20,
+    bottom: 20,
+    data: [],
+    icon: "circle", //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
+    itemWidth: 12, // 设置宽度
+    itemHeight: 12, // 设置高度
+    itemGap: 10, // 设置间距
+    textStyle: {
+      //图例文字的样式
+      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,
+        edgeLength: 120,
+        layoutAnimation: true,
+      },
+      symbolSize: 70,
+      nodeScaleRatio: 1, //图标大小是否随鼠标滚动而变
+      roam: true, //缩放
+      draggable: true, //节点是否可以拖拽
+      edgeSymbol: ["none", "arrow"], //线2头标记
+      label: {
+        normal: {
+          show: true,
+          position: "inside",
+          color: "#FFF",
+        },
+      },
+      edgeLabel: {
+        normal: {
+          show: true,
+          textStyle: {
+            fontSize: 12,
+            color: "#FFF",
+          },
+          formatter: "{c}",
+        },
+      },
+      symbolKeepAspect: false,
+      focusNodeAdjacency: false, // 指定的节点以及其所有邻接节点高亮
+      itemStyle: {
+        normal: {
+          borderColor: "#29ACFC",
+          borderWidth: 2,
+          shadowColor: "#29ACFC",
+          color: "#29ACFC",
+          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,
+          },
+        },
+      },
+
+      data: [],
+      links: [],
+    },
+  ],
+};
+
+export default {
+  components: {},
+  data() {
+    return {
+      myChart: null,
+      timer: null
+    };
+  },
+  computed: {},
+  mounted() {
+    // this.setOptions(data, links);
+  },
+  methods: {
+    setOptions(data, links, categors = []) {
+      let _this = this;
+      if (!this.myChart) {
+        this.myChart = echarts.init(this.$refs.echart);
+      }
+      option.legend.data = categors.map((a) => { return a.name; })
+      option.series[0].data = data
+      option.series[0].links = links
+      option.series[0].categories = categors
+      console.log(option.legend);
+      this.myChart.setOption(option);
+      this.myChart.on("click", (params) => {
+        this.$emit("click", params)
+      });
+      // 监听右键点击事件
+      this.myChart.on('contextmenu', function (params) {
+        let event = params.event
+        // 阻止默认的右键菜单出现 even.preventDefault();
+        event.stop()
+        var menu = document.getElementById('myContext');
+        if (!menu) return
+        menu.style.left = event.offsetX + 'px';
+        menu.style.top = event.offsetY + 'px';
+        menu.style.display = 'block';
+        // 关闭弹窗
+        document.addEventListener('click', function closeMenu() {
+          menu.style.display = 'none';
+          document.removeEventListener('click', closeMenu);
+        });
+      });
+      this.myChart.on('mouseout', (params) => {
+        if (this.timer) clearTimeout(this.timer);
+        this.timer = setTimeout(() => {
+          var menu = document.getElementById('myContext');
+          if (menu) menu.style.display = 'none';
+        }, 3000);
+        console.log('out');
+      });
+
+
+      // 自定义弹窗HTML
+      //       var contextMenuHtml = `
+      // <div id="myContextMenu" style="display:none; position:absolute; z-index:100; background-color:#fff; border:1px solid #ccc;">
+      //     <ul>
+      //         <li>操作一</li>
+      //         <li>操作二</li>
+      //         <li>操作三</li>
+      //     </ul>
+      // </div>`
+      //       document.body.appendChild(contextMenuHtml);
+      // 图表点击事件监听
+      //   this.myChart.on("click", function (params) {
+      //     // 刷新数据的逻辑，例如从服务器获取新数据
+      //     fetchNewData()
+      //       .then(function (newData) {
+      //         let that = this
+      //         // 更新图表的数据
+      //         that.myChart.setOption({
+      //           series: [
+      //             {
+      //               // 假设您要更新的是 series 下的某个数据系列
+      //               data: newData[0], // 使用新数据更新 series.data
+      //               links: newData[1],
+      //             },
+      //           ],
+      //         });
+      //       })
+      //       .catch(function (error) {
+      //         console.error("Error fetching new data:", error);
+      //       });
+
+      //     // 这里可以添加其他需要在点击后执行的代码
+      //   });
+      // 模拟的数据获取函数，实际应用中应该从服务器获取
+      function fetchNewData() {
+        // 返回一个新数据的 Promise
+        return new Promise((resolve, reject) => {
+          setTimeout(() => {
+            // 模拟获取到的新数据
+            const newData = [
+              /* 新数据数组 */
+              data2,
+              links2,
+            ];
+            resolve(newData);
+          }, 1000); // 延迟 1 秒来模拟异步数据加载
+        });
+      }
+    },
+    test() {
+      this.initTwo(data2, links2);
+    },
+  },
+  watch: {},
+
+  beforeDestroy() { },
+};
+</script>
+
+<style lang="less" scoped>
+#graph_echart {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/utils/MapHelper/help.js

@@ -70,7 +70,7 @@ export function loadGeoJSON(geom, yanse, adata, fun) {
       if (!geojson.type.includes("Polygon")) {
         if (entity.billboard) {
           entity.billboard = new Cesium.BillboardGraphics({
-            image: `@/.././static/images/flypng/${adata.point || 'hos_point'}.png`,
+            image: `@/.././static/images/flypng/${adata.point || 'flyCircle'}.png`,
             height: 40,
             width: 40,
             scale: 1.0,

src/views/basicGeographic/entityManage.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="sm-panel leftWrap" :class="!fold ? 'HideLeft' : ''" v-drag>
+    <div class="sm-panel-header">
+      <span>实体分类目录</span>
+      <span class="closeBtn foldBtn" :class="`el-icon-s-${fold ? '' : 'un'}fold`" @click="fold = !fold"></span>
+    </div>
+    <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">
+        <span class="custom-tree-node" slot-scope="{ node, data }">
+          <span class="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>
+        </span>
+      </el-tree>
+
+    </div>
+  </div>
+
+  <!-- <div class="leftWrap" :class="isHideLeft ? 'HideLeft' : ''">
+  </div> -->
+  <!-- 右边数据展示 -->
+  <!-- <div class="rightWrap" :class="isHideRight ? 'HideRight' : ''">
+  </div> -->
+</template>
+
+<script>
+import { getEntityTree } from "@/api/basicGeographic.js";
+export default {
+  name: "entityManage",
+  props: {},
+  data() {
+    return {
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      TreeDatas: [],
+      fold: true,
+    };
+  },
+  computed: {},
+  mounted() { },
+  methods: {
+    async showDetail(data) {
+      this.$emit("detail", data,);
+    },
+    // 复选框改变
+    handleCheckChange(obj, checked) {
+      this.$emit("checkChange", obj, checked,);
+    },
+
+    getTree(node, resolve) {
+      getEntityTree({ id: node.data ? node.data.id : undefined }).then((res) => {
+        if (res.statuscode == 200) {
+          resolve(res.data);
+        }
+      });
+    }
+  },
+  watch: {},
+};
+</script>
+<style lang="less" scoped>
+.ellipsisText {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 150px;
+}
+
+.leftWrap {
+  transition-property: left, background;
+  transition-duration: 0.5s, 1s;
+}
+
+.HideLeft {
+  left: -340px !important;
+
+  .foldBtn {
+    right: -25px;
+  }
+}
+</style>

src/views/basicGeographic/index.vue

@@ -1,101 +1,382 @@
 <!--合规性分析-->
 <template>
-    <div class="ghzc basicGeographic">
-        <EntityManage class="innerContainer leftPane"></EntityManage>
-        <!-- <div class="innerContainer leftPane" v-drag @click.native.stop>
-        <h2 class="Pangetitle darg-div">
-          <span class="pange_text">耕地保护</span>
-        </h2>
-        <el-tabs type="border-card" class="xz_box" v-model="activeTabs" stretch @tab-click="tabClick">
-          <el-tab-pane label="辅助监测研判" name="fzjcyp">
-            <FZJCYP v-loading="loading" @updateParent="changeData" ref="fzjcyp"></FZJCYP>
-          </el-tab-pane>
-          <el-tab-pane label="历史记录" name="lsju">
-            <Lsjl :rzBsm="rzBsm" :activeTabs="activeTabs" @updateParent="changeData" type="gdbh" ref="lsju"></Lsjl>
-          </el-tab-pane>
-          <el-tab-pane label="分析结果" :disabled="activeTabs != 'scjg'" name="fxjg">
-            <div v-drag style="height: 100%;">
-              <FXJG :activeTabs="activeTabs" @updateParent="changeData" :loading="loading" :fxjgObj="nowObj" ref="fxjg"
-                v-if="activeTabs == 'fxjg'"></FXJG>
-            </div>
-          </el-tab-pane>
-        </el-tabs>
+  <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-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>
+
+      </div>
+      <div style="width: 50%;">
+        <el-input placeholder="请输入查询内容" prefix-icon="el-icon-search" v-model="graphText" size="small" @change="detail">
+        </el-input>
       </div>
-      <interDetails :rzBsm="rzBsm" @updateParent="changeData" :interObj="interObj" v-if="showInter"></interDetails>
-      <RzDtails
-        :rzBsm="rzBsm"
-        :rzMc="nowObj.xmmc"
-        @updateParent="changeData"
-      ></RzDtails> -->
+      <graph id="first_pie" ref="graphEchart" click=""></graph>
+      <div id="myContext" class="myContextMenu" style="display: none;">
+        <div @click="fly"> 定位</div>
+        <div @click="info">详情</div>
+
+      </div>
+    </div>
+    <div class="sm-panel infoDiv" v-show="showinfo">
+      <Info :data="jbxxData"></Info>
     </div>
+    <!-- <interDetails :rzBsm="rzBsm" @updateParent="changeData" :interObj="interObj" v-if="showInter"></interDetails>
+    <RzDtails :rzBsm="rzBsm" :rzMc="nowObj.xmmc" @updateParent="changeData"></RzDtails> --> -->
+  </div>
 </template>
 
 <script>
+let data = [
+  {
+    name: "李富贵",
+    id: "lfg",
+    tooltip: {
+      formatter: "{b} <br/>定位<br/>详情",
+    },
+    category: 0
+  },
+  {
+    tooltip: {
+      formatter: "{b} <br/>性别：男<br/>出生年月：19951114<br/>星座：处女座",
+    },
+    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: "李富贵",
+    itemStyle: {
+      normal: {
+        color: "#FCBB5B",
+        borderColor: "#FCBB5B",
+        shadowColor: "#FCBB5B",
+      },
+    },
+  },
+  {
+    name: '类别',
+    itemStyle: {
+      normal: {
+        color: '#87ceeb' // 分类2的颜色
+      }
+    }
+  }]
+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 FXJG from "./components/fxjg.vue";
-//   import Lsjl from "../complianceAnalysis/components/lsjl.vue";
-//   import interDetails from "./components/interDetails.vue";
-//   import RzDtails from "../complianceAnalysis/components/rzDtails.vue";
+import graph from "@/components/echartsTemplate/graph.vue";
+import { getData, getRelationship } from "@/api/basicGeographic.js";
+import { loadGeoJSON, removeGeoJSON } from "@/utils/MapHelper/help.js";
 export default {
-    name: "BasicGeographic",
-    components: {
-        EntityManage,
-        //   Lsjl,
-        //   FXJG,
-        //   interDetails,
-        //   RzDtails,
+  name: "BasicGeographic",
+  components: {
+    EntityManage,
+    graph,
+    Info
+  },
+  data() {
+    return {
+      graphText: "",
+      nowObj: {},
+      loading: false,
+      showInter: false,
+      fold: false,
+      geoSources: {},
+      showinfo: false,
+      jbxxData: []
+    };
+  },
+  created() { },
+  mounted() {
+    this.detail({ id: 'MA1001NE103K10342XXXXXXXXXXXXXXX2203020000' });
+  },
+  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)
+      }
     },
-    data() {
-        return {
-            activeTabs: "fzjcyp",
-            rzBsm: "",
-            rwBsm: "",
-            nowObj: {},
-            rzMc: "",
-            loading: false,
-            interObj: {},//套合信息存储
-            showInter: false,
-        };
+    checkChange(obj, checked) {
+      if (checked) this.getData(obj)
+      else removeGeoJSON(obj.id)
+    },
+    detail(obj) {
+      this.showInter = true
+      console.log(obj, "paramsparams",getRelationship);
+      this.getRelationship(obj)
+      this.$refs.graphEchart.setOptions(data, links, categors);
+    },
+
+    getData(obj) {
+      getData({ entityid: obj.id }).then((res) => {
+        if (res.statuscode == 200) {
+          this.showinfo = true;
+          Object.keys(res.data.info).forEach((key) => {
+            this.jbxxData.push({ name: key, value: res.data.info[key], });
+          });
+          res.data.geom.forEach(item => {
+            console.log(obj.id, item)
+            loadGeoJSON(item.siweigeomewkt, "#facd91", { isfly: true }, (data) => {
+              geoSources[obj.id] = data;
+              data.name = obj.id;
+            });
+          });
+
+        }
+      });
     },
-    created() { },
-    methods: {
-        changeData(name, updata) {
-            this[name] = updata;
-        },
-        tabClick(evt) {
-            this.activeTabs = evt.name;
-        },
+    getRelationship(obj) {
+      console.log(obj, "paramsparams",getRelationship);
+      getRelationship({ entityid: obj.id }).then((res) => {
+        if (res.statuscode == 200) {
+          console.log(res.data);
+          // res.data
+
+        }
+      });
     },
-    watch: {
-        activeTabs(newValue) {
-        },
+    fly() {
+      console.log('fly,', '---');
     },
+    info() {
+      console.log('info', '---');
+    }
+  },
+  watch: {
+    // graphText(newValue) {
+    // },
+  },
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .basicGeographic {
-    .xz_box {}
-
-    // .headerSearch {
-    //   display: flex;
-    //   justify-content: space-between;
-    //   margin-right: 10px;
-
-    //   .el-input {
-    //     width: 48%;
-    //   }
-
-    /deep/ .el-input--small .el-input__inner {
-        color: white !important;
-        background: rgba(100, 218, 255, 0.1);
-        border-radius: 2px 10px 2px 10px;
-        border-color: #5ecef09a;
+  .rightWrap {
+    width: 40%;
+    height: 85vh;
+    max-width: 40%;
+    min-width: 40%;
+    top: 60px;
+    z-index: 999;
+    transition-property: right, background;
+    transition-duration: 0.5s, 1s;
+
+    .foldBtn {
+      right: 40px;
     }
+  }
+
+  .HideRight {
+    right: -40% !important;
+
+    .foldBtn {
+      right: 100%;
+    }
+  }
+
+  #first_pie {
+    width: 38vw;
+    height: 75vh;
+    margin-top: 20px;
+  }
+
+  /deep/ .el-input--small .el-input__inner {
+    color: white !important;
+    background: rgba(100, 218, 255, 0.1);
+    border-radius: 2px 10px 2px 10px;
+    border-color: #5ecef09a;
+  }
+
+  .myContextMenu {
+    background-color: #041c32 !important;
+    border: 1px solid rgba(15, 122, 200, 0.4) !important;
+    width: 80px;
+    height: 80px;
+    color: #fff;
+    position: absolute;
+    border-radius: 2px;
 
-    // }
+    text-align: center;
+    line-height: 40px;
+  }
+
+  .infoDiv {
+    right: 40%;
+  }
+
+  // }
 }
 </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>