图片标记地点以及图片放大缩小，标记地点随着图片位置计算定位位置，动态连接标记点之间的连线

如有需要请下载leader_line.js文件https://pan.baidu.com/s/1zNJhiGsH32hNpTwAEsyQaQ?pwd=1997

<template>
  <div style="height:100%;overflow: hidden;width:100%" v-loading='loading'>
      <div style="height:40px;line-height: 40px;background: #f5f7fa;width:100%" class="top">
        <!-- @change="uesrsChange" -->
      巡检人员：<el-select v-model="taskUsers" style="width: 240px" placeholder="选择巡检人员" >
        <el-option
          v-for="item in taskUsersList"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
      <div class="but">
        <el-button plain type="info"  @click="back">返回</el-button>
      </div>
      </div>
      <div span="8" class="left" @mousewheel.prevent="rollImg"  id='left'>
    <div class="img" id="img" @mousedown="move">
        <img src="../../assets/泸湾江.jpg" alt="" class="imgz"  ref="imgDiv" />
        <div class="sic1 sic" id='sic1' @click="readDevice('泸湾江原水厂江面')">泸湾江原水厂江面</div>
        <div class="sic2 sic" id='sic2' @click="readDevice('泸湾江原水厂取水井')">泸湾江原水厂取水井</div>
        <div class="sic3 sic" id='sic3' @click="readDevice('泸湾江原水厂鱼缸')">泸湾江原水厂鱼缸</div>
        <div class="sic4 sic" id='sic4' @click="readDevice('泸湾江原水厂配电室')">泸湾江原水厂配电室</div>
        <div class="sic5 sic" id='sic5' @click="readDevice('泸湾江原水厂加药间')">泸湾江原水厂加药间</div>
        <div class="sic6 sic" id='sic6' @click="readDevice('泸湾江原水厂泵房')">泸湾江原水厂泵房</div>
    </div>
  </div>
  <div class="chs" v-if="showDevice" style="width:500px">
        <div class="hd-card__title">
          <span>设备信息</span>
          <i class="el-icon-close" @click="showDevice= false"></i>
        </div>
        <div class="detail-wrap">
          <cue-table border
                     :columns="devColumns"
                     :data="deviceList">
          </cue-table>
        </div>
      </div>
  </div>
</template>
<script>
import patrol from '@/constants/patrol'
import LeaderLine from "../../utils/leader-line.min"
export default {
     data() {
       return {
         leader_line:{},
         taskUsersList:[],
         taskUsers:"",
         deviceList:[],
         loading:true,
         devColumns:[
          {title: '序号', type: "index"},
          {title: '设备编号', data: 'no', showOverflowTooltip: true},
          {title: '设备名称', data: 'name', showOverflowTooltip: true},
          {title: '巡检时间', data: 'createTime', showOverflowTooltip: true},
        ],
        showDevice:false,
         list:[],
         imgUrl:
           "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1604279122&di=dd5fbc4c325f2d9bac424120463773c2&src=http://a3.att.hudong.com/14/75/01300000164186121366756803686.jpg"
       };
     },
     created(){
       this.$http.get(patrol.getPatrolUsersById,{id:this.$route.query.id}).then(res=>{
        if(res && res.length){
          res.forEach(u=>{
            this.taskUsersList.push({id:u,name:this.$util.usersFilter(u)});
          })
          this.taskUsers=this.taskUsersList[0].id
        }
      })
     },
     watch:{
       taskUsers(){
         this.loading=true
        this.$http.get(patrol.getRealLineById,{id:this.$route.query.id,userId:this.taskUsers}).then(res=>{
          res.patrolTaskFeedbackList.forEach(item=>{
            if(item.name=='泸湾江原水厂江面'){
              item.claId="sic1"
            }else if(item.name=='泸湾江原水厂取水井'){
              item.claId="sic2"
            }else if(item.name=='泸湾江原水厂鱼缸'){
              item.claId="sic3"
            }else if(item.name=='泸湾江原水厂配电室'){
              item.claId="sic4"
            }else if(item.name=='泸湾江原水厂加药间'){
              item.claId="sic5"
            }else if(item.name=='泸湾江原水厂泵房'){
              item.claId="sic6"
            }else{
                item.claId=""
            }
          })
          this.list=res.patrolTaskFeedbackList
          this.$nextTick(()=>{
              this.resizePosition();
          })
          this.loading=false
        })
       }
     },
     mounted(){
     },
     beforeDestroy(){
         for(let key in this.leader_line){
             this.leader_line[key].remove()
           }
     },
     methods: {
       readDevice(name){
         this.loading=true
         let obj=this.list.find(item=>item.name==name)
         if(obj){
            this.$http.get(patrol.getDevicesByIdPointId,{id:this.$route.query.id,pointId:obj.pointId,userId:this.taskUsers}).then(res=>{
            this.deviceList=res
            this.showDevice=true
            this.loading=false
          })
         }else{
           this.loading=false
           this.$notify({
                title: '提示',
                message: '当前位置未在巡检项中，无法查看！',
                type: 'error',
                duration:1000
             });
         }
       },
         resizePosition(){
          //  if(this.leader_line){
          //    this.leader_line.remove()
          //  }
           for(let key in this.leader_line){
             this.leader_line[key].remove()
           }
            //  latitude
            //  let sic = document.getElementById("sic").offsetTop;
            //  console.log('sic',sic)
             let mwidth = document.getElementById("left").offsetWidth;
             let mheight = document.getElementById("left").offsetHeight;
             let width = document.getElementById("img").offsetWidth;
             let height = document.getElementById("img").offsetHeight;
            //  let pleft = (width - mwidth) / 4;
            //  let ptop = (height - mheight) / 4;
            let pl=width/1976
            let pt=height/1312
             let left0=600*pl
             let top0=200*pt
             let left2=700*pl
             let top2=340*pt
             let left3=860*pl
             let top3=210*pt
             let left4=510*pl
             let top4=590*pt
             let left5=910*pl
             let top5=580*pt
             let left6=800*pl
             let top6=270*pt
             let pdata = document.getElementsByClassName("sic");
             pdata[0].style.left = left0 + "px";
             pdata[0].style.top = top0 + "px";
             let pdata2 = document.getElementsByClassName("sic2");
             pdata2[0].style.left = left2 + "px";
             pdata2[0].style.top = top2 + "px";
             let pdata3 = document.getElementsByClassName("sic3");
             pdata3[0].style.left = left3 + "px";
             pdata3[0].style.top = top3 + "px";
             let pdata4 = document.getElementsByClassName("sic4");
             pdata4[0].style.left = left4 + "px";
             pdata4[0].style.top = top4 + "px";
             let pdata5 = document.getElementsByClassName("sic5");
             pdata5[0].style.left = left5 + "px";
             pdata5[0].style.top = top5 + "px";
             let pdata6 = document.getElementsByClassName("sic6");
             pdata6[0].style.left = left6 + "px";
             pdata6[0].style.top = top6 + "px";
            //   new LeaderLine(
            //       document.getElementById('sic'),
            //       document.getElementById('sic2')
            //  );
            let len=this.list.length-1
            this.list.forEach((item,index)=>{
              if(index+1<=len){
                this.leader_line[index]=new LeaderLine(
                document.getElementById(item.claId),
                document.getElementById(this.list[index+1].claId),
                {
                    startPlugColor: '#ff3792', // 渐变色开始色
                    endPlugColor: '#fff386',// 渐变色结束色
                    size: 3, // 线条尺寸
                    // 连线开始文字 默认为空
                    // startLabel: "开始",
                    // // 连线中间文字 默认为空
                    // middleLabel: "中间",
                    // // 连线结束文字 默认为空
                    // endLabel: "结束",
                    // endLabel:LeaderLine.captionLabel({text:`${index+1}`,color:'rgb(60, 60, 60)',offset: [-3, -14]}),
                    middleLabel:LeaderLine.captionLabel({text:`${index+1}`,color:'rgb(60, 60, 60)'}),
                    // 连线类型 straight 直线 , arc 曲线 , fluid 流体线（默认） , magnet 磁铁线 , grid 折线
                    path: "straight",
                    color:'red',
                    gradient: true, // 使用渐变色
                    dash: { // 虚线样式
                        animation: true,// 让线条滚动起来
                    }
                }
             );
              }
            })
            for(let key in this.leader_line){
              this.leader_line[key].setOptions({
               color: '#f7f5ee',
               dropShadow: {dx: 0, dy: 3}
             });
            }
         },
    // 拖动图片
    move(e) {
      let self=this
      e.preventDefault();
      // 获取元素
      var left = document.querySelector(".left");
      var img = document.querySelector(".img");
      var x = e.pageX - img.offsetLeft;
      var y = e.pageY - img.offsetTop;
      // 添加鼠标移动事件
      left.addEventListener("mousemove", move);
      function move(e) {
          for(let key in self.leader_line){
             self.leader_line[key].remove()
           }
        img.style.left = e.pageX - x + "px";
        img.style.top = e.pageY - y + "px";
        let len=self.list.length-1
            self.list.forEach((item,index)=>{
              if(index+1<=len){
                self.leader_line[index]=new LeaderLine(
                document.getElementById(item.claId),
                document.getElementById(self.list[index+1].claId),
                {
                    startPlugColor: '#ff3792', // 渐变色开始色
                    endPlugColor: '#fff386',// 渐变色结束色
                    size: 3, // 线条尺寸
                    middleLabel:LeaderLine.captionLabel({text:`${index+1}`,color:'rgb(60, 60, 60)'}),
                    // 连线类型 straight 直线 , arc 曲线 , fluid 流体线（默认） , magnet 磁铁线 , grid 折线
                    path: "straight",
                    gradient: true, // 使用渐变色
                    dash: { // 虚线样式
                        animation: true,// 让线条滚动起来
                    }
                }
             );
              }
            })
            for(let key in self.leader_line){
              self.leader_line[key].setOptions({
               color: '#f7f5ee',
               dropShadow: {dx: 0, dy: 3}
             });
            }
      }
      // 添加鼠标抬起事件，鼠标抬起，将事件移除
      img.addEventListener("mouseup", function() {
        left.removeEventListener("mousemove", move);
      });
      // 鼠标离开父级元素，把事件移除
      left.addEventListener("mouseout", function() {
        left.removeEventListener("mousemove", move);
      });
    },
    back(){
        // this.$router.go(-1)
        this.$router.push({path: '/patrol/taskStatistics',query:this.$route.query});
      },
    // 缩放图片
    rollImg() {
      /* 获取当前页面的缩放比 若未设置zoom缩放比，则为默认100%，即1，原图大小 */
      var zoom = parseInt(this.$refs.imgDiv.style.zoom) || 100;
      /* event.wheelDelta 获取滚轮滚动值并将滚动值叠加给缩放比zoom wheelDelta统一为±120，其中正数表示为向上滚动，负数表示向下滚动 */
      zoom += event.wheelDelta / 12;
      /* 最小范围 和 最大范围 的图片缩放尺度 */
      if (zoom >= 80 && zoom < 500) {
        this.$refs.imgDiv.style.zoom = zoom + "%";
      }
      this.resizePosition();
      return false;
    }
  }
}
</script>
<style lang="less" scoped>
.left {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #fff;
//   padding: 20px;
  float: left;
  overflow: hidden;
}
.img {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
}
.sic{
  background-color:#095219;
  color: #FFFFFF;
  padding: 3px;
  font-size: 12px;
  z-index: 4;
  position: absolute;
}
.sic1{
    left: 120px;
    top:230px;
}
.sic2{
    left:350px;
    top: 190px;
}
.sic3{
  left:430px;
    top: 140px;
}
.sic4{
  left:460px;
    top: 150px;
}
.imgz{
    max-width: 5976px;
    width: 1976px;
    height: 1312px;
}
.chs{
  position: absolute;
  right: 0;
  top: 40px;
  height: 100%;
  z-index: 4;
  background: #ffffff;
}
.hd-card__title{
    padding: 20px 16px;
    //line-height: 16px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    //margin-bottom: 20px;
    span{
      border-left: 3px solid #0099cb;
      padding-left: 10px;
      font-weight: 400;
      font-size: 14px;
      color: #000;
      line-height: 16px;
    }
    i{
      font-size: 16px;
      cursor: pointer;
    }
  }
  .detail-wrap{
    height: calc(100% - 64px);
    padding: 0 16px;
  }
  .top{
    // position: absolute;
    position: relative;
    z-index: 20;
    padding: 0 10px;
    box-sizing: border-box;
  }
  .but{
    float: right;
  }
</style>