<template> <div class="app-container"> <el-button icon="el-icon-back" size="mini" style="margin-bottom: 10px" @click="$router.go(-1)" > 返回 </el-button> <div style="display: flex"> <div style="width: 59%;margin-right: 10px"> <div style="margin:6px 0px 14px;font-size: 20px;">巡检记录</div> <el-table v-loading="loading" :data="patrolInfoList"> <el-table-column label="巡检人" align="center" prop="memberName"/> <el-table-column label="开始时间" align="center" prop="createTime"> <template slot-scope="scope"> <span v-if="scope.row.createTime">{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span> <span v-else>-</span> </template> </el-table-column> <el-table-column label="结束时间" align="center" prop="endTime"> <template slot-scope="scope"> <span v-if="scope.row.endTime">{{ parseTime(scope.row.endTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span> <span v-else>-</span> </template> </el-table-column> <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180"> <template slot-scope="scope"> <el-button size="mini" type="text" icon="el-icon-document" @click="handlePhoto(scope.row)" >照片</el-button> <el-button size="mini" type="text" icon="el-icon-location" @click="handleTrack(scope.row)" >轨迹</el-button> </template> </el-table-column> </el-table> <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getPatrolInfo" /> </div> <!-- 位置 --> <div style="width: 40%;margin-left: 10px"> <div id="map" style="width: 100%;height: 500px;border: 1px solid;margin-top: 45px"></div> </div> <!-- 照片浏览 --> <el-dialog title="照片浏览" :visible.sync="isView" width="1000px" append-to-body destroy-on-close> <el-carousel :interval="4000" height="400px"> <el-carousel-item v-for="item in patrolCardList" :key="item.cardId"> <el-image :src="item.picture" style="width: 100%; height: 100%" /> </el-carousel-item> </el-carousel> </el-dialog> </div> </div> </template> <script> import { listPatrol } from "@/api/inspectionWork/patrol"; import { EditorMap } from "@/utils/mapClass/map"; import { mapGetters } from "vuex"; import { locationListInfo } from "@/api/inspectionWork/location"; import { patrolCardInfoList } from "@/api/inspectionWork/card"; export default { name: "task-patrol-detail", props:{ taskId:{ type: Number } }, data(){ return{ loading: false, patrolInfoList: [], queryParams:{ pageNum: 1, pageSize: 10, taskId: null }, total: 0, gaoMap: null, trackMarker: null, polyline: null, passedPolyline: null, passedTrackMarker: [], isView: false, patrolCardList: [] } }, mounted(){ this.queryParams.taskId = this.$route.query.taskId; this.initMap(); this.getPatrolInfo(); }, methods:{ getPatrolInfo(){ listPatrol(this.queryParams).then(res =>{ if(res.code == 200){ this.total = res.total; this.patrolInfoList = res.rows; if(this.patrolInfoList && this.patrolInfoList.length >0){ this.getLocationInfo(this.patrolInfoList[0],"init"); } } }) }, //地图初始化 initMap(){ const path = eval(this.systemSetting.map_center); this.gaoMap = new EditorMap( "map", { center: path, zoom: 12, }, this ); }, //轨迹查询 handleTrack(row){ this.getLocationInfo(row,null); }, getLocationInfo(row,type){ locationListInfo({userId: row.memberId,beginTime:row.createTime,endTime:row.endTime}).then(res =>{ if(res.code == 200 && res.data && res.data.length > 0){ this.clearTrack(); const trackInfo = []; res.data.forEach(item =>{ trackInfo.push([eval(item.longitude),eval(item.latitude)]); this.addMarker([eval(item.longitude),eval(item.latitude)],item.createTime) }) this.addLine(trackInfo); }else{ if(type != "init"){ this.$message.error("未查到轨迹信息") } } }) }, addLine(trackInfo){ // 绘制轨迹 this.polyline = new AMap.Polyline({ map: this.gaoMap.map, path: trackInfo, showDir:true, strokeColor: "#28F", //线颜色 // strokeOpacity: 1, //线透明度 strokeWeight: 6, //线宽 // strokeStyle: "solid" //线样式 }); this.gaoMap.map.setCenter(trackInfo[0],true); this.gaoMap.map.setZoom(14) }, addMarker(trackInfo,createTime){ const trackMarker = new AMap.Marker({ map: this.gaoMap.map, position: trackInfo, //icon: require("@/assets/firstimage/user.svg"), //offset: new AMap.Pixel(-13, -26), }); //trackMarker.setTitle(createTime); // trackMarker.setLabel({ // direction:'top', // offset: new AMap.Pixel(0, -3), //设置文本标注偏移量 // content: "<div class='info'>" + createTime +"</div>", //设置文本标注内容 // }); trackMarker.setTitle(createTime); this.passedTrackMarker.push(trackMarker); // trackMarker.on('click',mapEvent => { // console.log(mapEvent) // }) }, clearTrack(){ if(this.passedTrackMarker.length >0){ this.passedTrackMarker.forEach(item =>{ this.gaoMap.map.remove(item); }) } if(this.polyline){ this.gaoMap.map.remove(this.polyline); } }, handlePhoto(row){ this.getPatrolCardInfo(row.patrolId,row.memberId); }, getPatrolCardInfo(patrolId,memberId){ patrolCardInfoList({patrolId:patrolId,memberId:memberId}).then(res =>{ if(res.code == 200 && res.data && res.data.length > 0){ this.patrolCardList = res.data; this.isView = true; }else{ this.$message.error('未上传照片!') } }) } }, computed: { ...mapGetters(["systemSetting"]) } } </script> <style scoped lang="scss"> /*.amap-marker-label{ border: 0; background-color: transparent !important; } .info{ position: relative; margin:0; top: 0; right: 0; min-width: 0; }*/ </style>