修改人员轨迹页面逻辑及功能，增加团队最新定位页面及功能

src/apps/mobile/views/personnel/index.vue

@@ -5,7 +5,14 @@
               <el-form class="table-select-main" :model="searchForm" label-position="left">
                   <el-row :gutter="15">
                       <el-col :span="4" style="margin-top:6px">
-                        <el-input placeholder="请输入" v-model="searchForm.mobile"></el-input>
+                        <el-select placeholder="请选择人员" v-model="searchForm.userId">
+                          <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>
@@ -36,7 +43,7 @@
 // 引入高德使用高德
 import aMap from "vue-amap";
 import { lazyAMapApiLoaderInstance } from "vue-amap";
-import { queryTrail } from '@/apps/mobile/api/monitoring-center/index';
+import { getUserByCompanyId, queryTrail } from '@/apps/mobile/api/monitoring-center/index';
 // 初始化高德
 aMap.initAMapApiLoader({
   key: "937eb4405db2a8895695506871c3a1d5",
@@ -56,10 +63,10 @@ aMap.initAMapApiLoader({
 export default {
   data() {
     return {
-          MTCompanyID: JSON.parse(sessionStorage.getItem('mtCompanyId')),
           searchForm: {},
           zoom: 15,
           center: [114.459891,30.463359],
+          userList: [],
           polyline: {
               path: [[114.462895,30.473531], [114.461607,30.468315], [114.459891,30.463359], [114.431927,30.478135],
               [114.416134,30.451206], [114.445703,30.454832], [114.39708,30.505279], [114.391715,30.498956]],
@@ -112,31 +119,37 @@ export default {
     };
   },
   created() {
-    console.warn('------------------',this.MTCompanyID);
   },
   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]);
+                }
+          })
+          .catch(err => err);
   },
   methods: {
       query(){
-          let obj = {
-              mtCompanyId: 10086,
-              mobile: this.searchForm.mobile,
-              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];
-                })
+        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(() => {
-              });
+            })
+            .catch(() => {
+          });
       }
   }
 };
@@ -168,18 +181,6 @@ export default {
     ::v-deep .el-input__inner {
         width: 200px;
     }
-
-    .upload {
-        display: inline-block;
-    }
-
-    ::v-deep .video .el-upload {
-        height: auto;
-    }
-
-    ::v-deep .el-upload {
-        margin-right: 10px;
-    }
   }
 }
 </style>

src/apps/mobile/views/personnel/team.vue

@@ -1,31 +1,21 @@
 <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-input placeholder="请输入" v-model="searchForm.mobile"></el-input>
-                      </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-marker v-for="text in texts" :position="text.position"></el-amap-marker>
-        <el-amap-text v-for="text in texts" :text="text.text" :title="text.text" :position="text.position" :offset="text.offset">
-        </el-amap-text>
+      <el-amap vid="amapDemo" :zoom="zoom" :center="center" class="amap-demo" :events="events" pitch-enable="false">
+        <el-amap-marker v-for="(text,index) in texts" :position="text.position" :key="index" :events="text.events"></el-amap-marker>
+        <el-amap-info-window
+          v-if="window"
+          :position="window.position"
+          :visible="window.visible"
+          :content="window.content"
+          :offset="window.offset"
+          :close-when-click-map="true"
+          :is-custom="true"
+        >
+        <div id="info-window">
+          <p>{{ window.text }}</p>
+        </div>
+      </el-amap-info-window>
       </el-amap>
     </div>
   </div>
@@ -35,7 +25,7 @@
 // 引入高德使用高德
 import aMap from "vue-amap";
 import { lazyAMapApiLoaderInstance } from "vue-amap";
-import { queryTrail } from '@/apps/mobile/api/monitoring-center/index';
+import { queryTrailByTeam } from '@/apps/mobile/api/monitoring-center/index';
 // 初始化高德
 aMap.initAMapApiLoader({
   key: "937eb4405db2a8895695506871c3a1d5",
@@ -54,76 +44,81 @@ aMap.initAMapApiLoader({
 });
 export default {
   data() {
+  const self = this
     return {
-          searchForm: {},
-          zoom: 15,
-          center: [114.459891,30.463359],
-          texts: [
-            {
-              position: [114.462895,30.473531],
-              text: '1.2020-07-15 9：00pm',
-              offset: [0,-50],
-            },
-            {
-              position: [114.461607,30.468315],
-              text: '2.2020-07-15 7：00pm',
-              offset: [0,-50],
-            },
-            {
-              position: [114.459891,30.463359],
-              text: '3.2020-07-14 6：00am',
-              offset: [0,-50],
-            },
-            {
-              position: [114.431927,30.478135],
-              text: '4.2020-07-15 3：00am',
-              offset: [0,-50],
-            },
-            {
-              position: [114.416134,30.451206],
-              text: '5.2020-07-13 7：00am',
-              offset: [0,-50],
-            },
-            {
-              position: [114.445703,30.454832],
-              text: '6.2020-07-13 9：00am',
-              offset: [0,-50],
-            },
-            {
-              position: [114.39708,30.505279],
-              text: '7.2020-07-14 9：20am',
-              offset: [0,-50],
-            },
-            {
-              position: [114.391715,30.498956],
-              text: '8.2020-07-14 9：50am',
-              offset: [0,-50],
-            }
-          ]
-    };
+      markers: [],
+      zoom: 3,
+      center: [114.459891,30.463359],
+      expandZoomRange: true,
+      texts: [],
+      windows: [],
+      window: '',
+      events: {
+        click(e) {
+          const { lng, lat } = e.lnglat
+          self.lng = lng
+          self.lat = lat
+        }
+      },
+      lng: 0,
+      lat: 0,
+      searchForm: {}
+    }
   },
   mounted() {
-     
+      this.query();
   },
   methods: {
-      query(){
+    query(){
+          let companyData = JSON.parse(sessionStorage.getItem('companyID'));
           let obj = {
-              mtCompanyId: 10086,
-              mobile: this.searchForm.mobile,
-              createTime: this.searchForm.createTime
-          };
-          console.warn(obj);
-          queryTrail(obj)
+              mtCompanyId: companyData.id
+          }
+          queryTrailByTeam(obj)
               .then(res => {
-                this.texts = [];
-                this.texts= res.data.texts;
-                this.texts.forEach(tem => {
-                    tem.offset = [0,-50];
+                this.markers = [];
+                this.markers = res.data.texts;
+
+                const texts = []
+                const windows = []
+                const that = this
+          this.markers.forEach((item, index) => {
+                texts.push({
+                  position: item.position,
+                  // icon:item.url, //不设置默认蓝色水滴
+                  events: {
+                    mouseover() {
+                      // 方法：鼠标移动到点标记上，显示相应窗体
+                      that.windows.forEach(window => {
+                        window.visible = false // 关闭窗体
+                      })
+                        that.window = that.windows[index]
+                      that.$nextTick(() => {
+                        that.window.visible = true
+                      })
+                    }
+                  }
                 })
-              })
-              .catch(() => {
-              });
-      }
+            windows.push({
+              position: item.position,
+              isCustom: true,
+              offset: [115, 55], // 窗体偏移
+              showShadow: false,
+              visible: false, // 初始是否显示
+              text: item.text
+            })
+          })
+          //  加点
+          this.texts = texts
+          // 加弹窗
+          this.windows = windows
+          })
+          .catch(() => {
+          });
+    },
+    // checkDetail() {
+    //   alert('点击了查看详情')
+    // }
   }
 };
 </script>
@@ -140,33 +135,23 @@ export default {
     height: 700px;
     font-size: 18px;
     vertical-align: 10px;
-
-    el-amap-text{
-      top:10px;
-      height:80px;
-    }
   }
 
-  .add-edit-dialog-container {
-    ::v-deep .el-input {
-        width: auto;
+.amap-demo {
+      height: 800px;
     }
-
-    ::v-deep .el-input__inner {
-        width: 200px;
+    .amap-page-container {
+      position: relative;
     }
-
-    .upload {
-        display: inline-block;
-    }
-
-    ::v-deep .video .el-upload {
-        height: auto;
+    #info-window{
+      width: 211px;
+      height: 80px;
+      margin-left: 30px;
+      background:rgba(255,255,255,0.9);
+      border-radius: 1px;
+      position: relative;
+      overflow: hidden;
     }
 
-    ::v-deep .el-upload {
-        margin-right: 10px;
-    }
   }
-}
 </style>