- A+
所属分类：Web前端
如有需要请下载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>
