gateLink.vue

<template>
  <el-dialog
    title="安装关系图"
    class="manage-dialog xy-dialog "
    :visible.sync="linkVisible"
    :show-close="false"
    @close="dialogClose"
  >
    <div class="floorbox">
        <img
          :src="floorPath"
          @load="imgLoaded('linkpic')"
          id="linkpic"
          class="background-img background-floorimg"
        />
        <div id="linkgraphChart" class="graph-box graph-chart-container" v-if="imgWidth"></div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button lass="dialog-btn" @click="dialogClose">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      emitData: "",
      linkVisible: false,
      floorPath: null,
      GatelinkList: [],
      imgWidth: 0,
      imgheight: 0,
      curdata: "",
      mychart: null,
      type:null,
    };
  },
  methods: {
    showLink(val,type) {
      this.linkVisible = true;
      this.type = type;
      this.getFloorImg(val);
      this.curdata = val;
    },
    dialogClose() {
      this.linkVisible = false;
      this.floorPath = null;
    },
    getFloorImg(val) {
      let { mallId } = val;
      this.$api.base
        .floor({
          mallId: mallId,
          status: 1,
          zoneType: 4,
        })
        .then((res) => {
          //debugger
          if(res.data.code === 200) {
            if(res.data.data && res.data.data.length > 0) {
              this.floorPath =
            window._vionConfig.imagesUrl +
            "/images/" +
            res.data.data[0].floorPlan;
            } else {
               this.$message({
                  type: "error",
                  message:"该楼层连通区域为空！"
                });
                this.linkVisible = false;
            }
          }
        
        })
        .catch((err) => {
          this.catchErrorHandle(err);
        });
    },
    imgLoaded(domId) {
      const { offsetWidth } = this.queryIdDom(domId);
      this.imgWidth = offsetWidth > this.imgWidth ? offsetWidth : this.imgWidth;
      this.$nextTick(() => {
        if(this.type === 'floor') {
          this.getFloorUnicom();
        } else {
         this.getUnicom();
        }
      });
    },
    queryIdDom(id) {
      return document.getElementById(id);
    },
    //获取连通图
    getUnicom() {
      this.$api.management.getGatelink(this.curdata.id).then((res) => {
        let linkarr = [];
        res.data.data.map((ele) => {
          //  if (ele.fromGate.id == this.curdata.id && ele.toGate.id==this.curdata.id) {
          //    ele.iscenter = true;
          //  }
          linkarr.push(ele);
        });
        this.GatelinkList = linkarr;
        this.intLinkChart(this.GatelinkList);
      });
    },
    getFloorUnicom(){
        this.$api.management.getGateFloorlink(this.curdata.id).then((res) => {
        let linkarr = [];
        res.data.data.map((ele) => {
          //  if (ele.fromGate.id == this.curdata.id && ele.toGate.id==this.curdata.id) {
          //    ele.iscenter = true;
          //  }
          linkarr.push(ele);
        });
        this.GatelinkList = linkarr;
        this.intLinkChart(this.GatelinkList);
      });
    },
    intLinkChart(data) {
      let chartDom = document.getElementById("linkgraphChart");
      chartDom.style.width = $("#linkpic").width() + "px";
      chartDom.style.height = $("#linkpic").height()  + "px";
      if (this.$echarts.getInstanceByDom(chartDom)) {
        this.$echarts.init(chartDom).dispose();
        this.myEchart = this.$echarts.init(chartDom);
      } else {
        this.myEchart = this.$echarts.init(chartDom);
      }
      let { orgdata, orglinks } = this.buildChartData(data);
      var option = {
        tooltip: {},
        color: "#4054af",
        series: [
          {
            edgeSymbol: ["circle", "arrow"],
            categories: [],
            type: "graph",
            layout: "none",
            roam: false,
            data: orgdata,
            links: orglinks,
            label: {
              normal: {
                show: true,
                position: "right",
                formatter: "{b}",
              },
            },
            lineStyle: {
              normal: {
                "color":"blue",
                "curveness":0.3
              },
            },
          },
        ],
      };
      // this.myEchart.clear()
      setTimeout(() => {
        this.myEchart.setOption(option);
      }, 1000);
    },
    /**
     * 处理 相对点位
     * source_floor | target_floor
     * sourceX | targetX
     * sourceY | targetY
     */
    dealXY(...args) {
      if (!args[0]) return;
      const { getDomAttrs, normalWidth, normalHeight } = this;
      const { width, height, index } = getDomAttrs(args[0]);
      
      return {
        x:  (args[1]/ normalWidth * $('#linkpic').width()).toFixed(2),
        y:(args[2] / normalHeight * $('#linkpic').height()).toFixed(2)
      };
    },
    getDomAttrs(id) {
      const { queryIdDom, gateFloorMap } = this;
      try {
        const { dataset, offsetHeight, offsetWidth } = queryIdDom(id);
        const index = dataset.index;
        return {
          width: offsetWidth,
          height: offsetHeight,
          index: 0,
        };
      } catch (err) {
        console.log(err);
        return {
          width: 0,
          height: 0,
          index: 0,
        };
      }
    },
    buildChartData(data) {
      let cdata = [],
        clinks = [];
       
      data.map((ele, i) => {
				let nodeX = ((ele.fromGate.x|| 10) / this.normalWidth * $('#linkpic').width()).toFixed(2);
				let nodeY = ((ele.fromGate.y|| 10)/ this.normalHeight * $('#linkpic').height()).toFixed(2);
        let obj = {          
          x: nodeX > $('.background-floorimg').width() ? 0 : nodeX,
          y: nodeY > $('.background-floorimg').height() ? 0 : nodeY,
          value: 1,
          symbolSize: 10,
          name: ele.fromGate.name,
          category:i
        };
        cdata.push(obj);
        let nodeX1 = ((ele.toGate.x - 10 || 10) / this.normalWidth * $('#linkpic').width()).toFixed(2);
				let nodeY1= ((ele.toGate.y || 10) / this.normalHeight * $('#linkpic').height()).toFixed(2);
        let obj1 = {
          x:  nodeX1 > $('.background-floorimg').width() ? 0 : nodeX1,
          y: nodeY1 > $('.background-floorimg').height() ? 0 : nodeY1,
          symbolSize: 10,
          name: ele.toGate.name,
           category:i
        };
        cdata.push(obj1);

        let linkobj = {
          source: ele.fromGate.name,
          target: ele.toGate.name,
        };
        linkobj.label = { show: true };
        linkobj.lineStyle = { width: 1 };
        clinks.push(linkobj);
      });

      let c = this.redues(cdata);
       c.push({
					id:-1,
					name:'22',
					value:-1,
					x:0,
					y:0,
					symbolSize: 0,
					label: {
						show: false,
					}
				},{
					id:-2,
					name:'000',
					value:-1,
					x: $('#linkpic').width(),
					y: $('#linkpic').height(),
					symbolSize: 0,
					label: {
						show: false,
					}
				})
      return { orgdata: c, orglinks: clinks };
    },
    redues(arr) {
      const hash = {};
      const newArray = arr.reduce((item, next) => {
        hash[next.name] ? "" : (hash[next.name] = true && item.push(next));
        return item;
      }, []);
      console.log(arr);
      console.log("newarr", newArray);
      return newArray;
    },
  },
  created() {},
  mounted() {},
};
</script>

<style >
.floorbox {
  position: relative;
}
.graph-chart-container {
  position: absolute;
  top: 0px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.graph-container {
  position: relative;
  width: 100%;
  text-align: center;
  overflow-x: auto;
  overflow-y: hidden;
}
/* .background-img {

  max-width: 100%;
  max-height: 100%;
  display: block;
  margin: 0 auto;
} */
.graph-box {
  margin: 0 auto;
}
</style>