lift-web/src/apps/mobile/views/personnel/index.vue

<template>
  <div class="homeContainer">
      <div class="add-edit-dialog-container">
        <div class="search-container TableSelectMain">
              <el-form class="table-select-main" :model="searchForm" label-position="left">
                  <el-row :gutter="15">
                      <el-col :span="4" style="margin-top:6px">
                        <el-select placeholder="请选择人员" v-model="searchForm.userId" filterable>
                          <el-option
                            :label="item.name"
                            :value="item.userId"
                            v-for="(item, i) in userList"
                            :key="i"
                          ></el-option>
                        </el-select>
                      </el-col>
                      <el-col :span="4">
                          <el-form-item>
                              <el-date-picker v-model="searchForm.createTime" type="datetime" placeholder="请选择日期"></el-date-picker>
                          </el-form-item>
                      </el-col>
                      <el-col :span="4">
                          <el-form-item>
                              <el-button type="primary" plain round @click="query">查询</el-button>
                          </el-form-item>
                      </el-col>
                  </el-row>
              </el-form>
          </div>
      </div>
    <div class="amap-wrapper">
      <el-amap vid="amapDemo" :zoom="zoom" :center="center" class="amap-demo">
        <el-amap-polyline :path="polyline.path" :strokeOpacity="polyline.strokeOpacity" 
         :strokeColor="polyline.strokeColor" :strokeWeight="polyline.strokeWeight"></el-amap-polyline>
        <el-amap-marker v-for="text in texts" :position="text.position"></el-amap-marker>
        <el-amap-text v-for="text in texts" :text="text.text" :position="text.position" :offset="text.offset"></el-amap-text>
      </el-amap>
    </div>
  </div>
</template>

<script>
// 引入高德使用高德
import aMap from "vue-amap";
import { getUserByCompanyId, queryTrail } from '@/apps/mobile/api/monitoring-center/index';
// 初始化高德
aMap.initAMapApiLoader({
  key: "937eb4405db2a8895695506871c3a1d5",
  plugin: [
    "AMap.Autocomplete",
    "AMap.PlaceSearch",
    "AMap.Scale",
    "AMap.OverView",
    "AMap.ToolBar",
    "AMap.MapType",
    "AMap.PolyEditor",
    "AMap.CircleEditor"
  ],
  v: "1.4.4",
  uiVersion: "1.0.11"
});
export default {
  data() {
    return {
        searchForm: {},
        zoom: 11,
        center: [114.407749, 30.455714],
        userList: [],
        polyline: {
          path: [],
          strokeOpacity: 1,
          strokeColor: "#FF9900",
          strokeWeight: 6,
        },
        texts: []
    };
  },
  created() {
  },
  mounted() {
      let companyData = JSON.parse(sessionStorage.getItem('companyID'));
      let companyId = companyData.id;
      getUserByCompanyId(companyId)
          .then(res => {
              for (let i = 0; i < res.data.length; i++) {
                  this.userList.push(res.data[i]);
              }
              this.center = [this.userList[0].lon, this.userList[0].lat]
          })
          .catch(err => err);
  },
  methods: {
      query(){
        let obj = {
            userId: this.searchForm.userId,
            createTime: this.searchForm.createTime
        };
        console.warn(obj);
        queryTrail(obj)
            .then(res => {
              this.polyline.path = [];
              this.texts = [];
              this.polyline.path = res.data.polylines;
              this.texts = res.data.texts;
              this.texts.forEach(tem => {
                  tem.offset = [0,-50];
              })
            })
          .catch(() => {
          });
      }
  }
};
</script>
<style lang="stylus">
.homeContainer {
    display: inline-block;
    height:700px;
    width: 100%;
    margin-top: 15px;
    padding: 0 15px;

  .amap-wrapper {
    width: 100%;
    height: 700px;
    font-size: 18px;
    vertical-align: 10px;

    el-amap-text{
      top:10px;
    }
  }

  .add-edit-dialog-container {
    ::v-deep .el-input {
        width: auto;
    }
  }
}
</style>