real3d-portalsite/src/views/basicGeographic/index.vue

<!--合规性分析-->
<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' : ''" 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="请输入查询内容" prefix-icon="el-icon-search" v-model="graphText" size="small"
          @change="setSelected">
        </el-input>
      </div>
      <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>

      </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",
  }
];


let categors = [
  {
    name: "李富贵",
    itemStyle: {
      normal: {
        color: "#FCBB5B",
        borderColor: "#FCBB5B",
        shadowColor: "#FCBB5B",
      },
    },
  },
  {
    name: '类别',
    itemStyle: {
      normal: {
        color: '#87ceeb' // 分类2的颜色
      }
    }
  }]

import Info from "../Idleland/components/info.vue";
import EntityManage from "./entityManage.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,
    graph,
    Info
  },
  data() {
    return {
      graphText: "",
      nowObj: {},
      loading: false,
      showInter: false,
      fold: false,
      geoSources: {},
      showinfo: false,
      jbxxData: [],
      graloading: false,
      graphdata: [],
      gralinks: []
    };
  },
  created() { },
  mounted() {
    this.detail({ id: 'MA1001NE103K103501003XXXXXXXXXXX2501010000' })//MA1001NE103K103501004XXXXXXXXXXX2203040000
  },
  methods: {
    click(params) {
      console.log(params, "paramsparams");
      this.getRelationship(params.data)
    },
    checkChange(obj, checked) {
      if (checked) this.getData(obj)
      else removeGeoJSON(obj.id)
    },
    detail(obj) {
      this.showInter = true
      this.graphdata = []
      this.gralinks = []
      this.graphdata.push({ name: obj.label, id: obj.id, category: 0, })
      this.getRelationship(obj)

    },
    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) {
          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;
            });
          });

        }
      });
    },
    getRelationship(obj) {
      this.graloading = true
      getRelationship({ entityid: obj.id }).then((res) => {
        if (res.statuscode == 200) {
          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
        }
      });
    },
    fly() {
      console.log('fly,', '---');
    },
    info() {
      console.log('info', '---');
    }
  },
  watch: {
    // graphText(newValue) {
    // },
  },
};
</script>

<style lang="less" scoped>
.basicGeographic {
  .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>