圖片標記地點以及圖片放大縮小，標記地點隨著圖片位置計算定位位置，動態連接標記點之間的連線

如有需要請下載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>