如有需要請下載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=https://www.cnblogs.com/caiguanzheng/archive/2023/02/17/"../../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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/544223.html
標籤：其他
下一篇：js - 數字轉中文