index.vue

<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>