+ 巡检任务轨迹查询

src/views/bd/location/index.vue

@@ -126,8 +126,6 @@ export default {
   },
   methods: {
     init() {
-      debugger
-
       this.socket = new WebSocket(`ws://172.192.13.77:2223/socket/websocket/pollingArea`);
 
       this.socket.onopen = () => {

src/views/bd/realtimeLocation/index.vue

@@ -24,11 +24,6 @@
                         title="查看设备定位"
                         @click="()=>showLocation(device)"
               />
-              <!--               <i-->
-              <!--                   class="el-icon-circle-close"-->
-              <!--                   title="查看设备定位"-->
-              <!--                   @click="()=>play(device)"-->
-              <!--               />-->
             </span>
           </div>
         </template>

src/views/park/inspectTaskTrail/index.vue

@@ -24,7 +24,8 @@
           size="mini"
           @click="handleAdd"
           v-hasPermi="['park:inspectTaskTrail:add']"
-        >新增</el-button>
+        >新增
+        </el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -35,7 +36,8 @@
           :disabled="single"
           @click="handleUpdate"
           v-hasPermi="['park:inspectTaskTrail:edit']"
-        >修改</el-button>
+        >修改
+        </el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -46,7 +48,8 @@
           :disabled="multiple"
           @click="handleDelete"
           v-hasPermi="['park:inspectTaskTrail:remove']"
-        >删除</el-button>
+        >删除
+        </el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -56,16 +59,17 @@
           size="mini"
           @click="handleExport"
           v-hasPermi="['park:inspectTaskTrail:export']"
-        >导出</el-button>
+        >导出
+        </el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
     <el-table v-loading="loading" :data="inspectTaskTrailList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="编号" align="center" prop="id" />
-      <el-table-column label="任务名称" align="center" prop="taskName" />
-      <el-table-column label="巡检轨迹" align="center" prop="trail" />
+      <el-table-column type="selection" width="55" align="center"/>
+      <el-table-column label="编号" align="center" prop="id"/>
+      <el-table-column label="任务名称" align="center" prop="taskName"/>
+      <el-table-column label="巡检轨迹" align="center" prop="trail"/>
       <el-table-column label="修改时间" align="center" prop="createTime" width="180">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
@@ -76,21 +80,30 @@
           <el-button
             size="mini"
             type="text"
+            icon="el-icon-view"
+            @click="handleView(scope.row,scope.index)"
+          >详细
+          </el-button>
+          <el-button
+            size="mini"
+            type="text"
             icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
             v-hasPermi="['park:inspectTaskTrail:edit']"
-          >修改</el-button>
+          >修改
+          </el-button>
           <el-button
             size="mini"
             type="text"
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
             v-hasPermi="['park:inspectTaskTrail:remove']"
-          >删除</el-button>
+          >删除
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
-    
+
     <pagination
       v-show="total>0"
       :total="total"
@@ -103,19 +116,19 @@
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="关系id" prop="taskUsrRelId">
-          <el-input v-model="form.taskUsrRelId" placeholder="请输入关系id" />
+          <el-input v-model="form.taskUsrRelId" placeholder="请输入关系id"/>
         </el-form-item>
         <el-form-item label="任务名称" prop="taskName">
-          <el-input v-model="form.taskName" placeholder="请输入任务名称" />
+          <el-input v-model="form.taskName" placeholder="请输入任务名称"/>
         </el-form-item>
         <el-form-item label="任务主键" prop="taskId">
-          <el-input v-model="form.taskId" placeholder="请输入任务主键" />
+          <el-input v-model="form.taskId" placeholder="请输入任务主键"/>
         </el-form-item>
         <el-form-item label="任务执行人" prop="usrId">
-          <el-input v-model="form.usrId" placeholder="请输入任务执行人" />
+          <el-input v-model="form.usrId" placeholder="请输入任务执行人"/>
         </el-form-item>
         <el-form-item label="租户id" prop="tenantId">
-          <el-input v-model="form.tenantId" placeholder="请输入租户id" />
+          <el-input v-model="form.tenantId" placeholder="请输入租户id"/>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -123,14 +136,23 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+    <trail-dialog ref="trailDialog"></trail-dialog>
   </div>
 </template>
 
 <script>
-import { listInspectTaskTrail, getInspectTaskTrail, delInspectTaskTrail, addInspectTaskTrail, updateInspectTaskTrail } from "@/api/park/inspectTaskTrail";
+import {
+  addInspectTaskTrail,
+  delInspectTaskTrail,
+  getInspectTaskTrail,
+  listInspectTaskTrail,
+  updateInspectTaskTrail
+} from "@/api/park/inspectTaskTrail";
+import TrailDialog from "@/views/park/inspectTaskTrail/trail-dialog.vue";
 
 export default {
   name: "InspectTaskTrail",
+  components: {TrailDialog},
   data() {
     return {
       // 遮罩层
@@ -162,7 +184,7 @@ export default {
       // 表单校验
       rules: {
         taskName: [
-          { required: true, message: "任务名称不能为空", trigger: "blur" }
+          {required: true, message: "任务名称不能为空", trigger: "blur"}
         ],
       }
     };
@@ -215,7 +237,7 @@ export default {
     // 多选框选中数据
     handleSelectionChange(selection) {
       this.ids = selection.map(item => item.id)
-      this.single = selection.length!==1
+      this.single = selection.length !== 1
       this.multiple = !selection.length
     },
     /** 新增按钮操作 */
@@ -257,18 +279,22 @@ export default {
     /** 删除按钮操作 */
     handleDelete(row) {
       const ids = row.id || this.ids;
-      this.$modal.confirm('是否确认删除巡检轨迹编号为"' + ids + '"的数据项？').then(function() {
+      this.$modal.confirm('是否确认删除巡检轨迹编号为"' + ids + '"的数据项？').then(function () {
         return delInspectTaskTrail(ids);
       }).then(() => {
         this.getList();
         this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+      }).catch(() => {
+      });
     },
     /** 导出按钮操作 */
     handleExport() {
       this.download('park/inspectTaskTrail/export', {
         ...this.queryParams
       }, `inspectTaskTrail_${new Date().getTime()}.xlsx`)
+    },
+    handleView(data) {
+      this.$refs.trailDialog.show(data);
     }
   }
 };

src/views/park/inspectTaskTrail/trail-dialog.vue

@@ -0,0 +1,212 @@
+<template>
+  <el-dialog
+    title="巡检任务轨迹"
+    :visible.sync="centerDialogVisible"
+    width="70vw"
+    @closed="onDialogClose"
+  >
+    <div v-if="!destroyed" class="trail-dialog-content" style="width: 100%;height: 70vh;">
+      <bd-map :loaded="loaded" map-id="room-map"/>
+      <div class="map-ctrl">
+        <el-button type="primary" @click="trailPlay">轨迹播放</el-button>
+        <el-button type="primary" @click="showTrailTime">轨迹时间</el-button>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+
+import BdMap from '@/views/bd/map/index.vue';
+import maphandle from '@/views/bd/map/maphandle';
+import position from '@/views/bd/realtimeLocation/icon/position.png';
+import dayjs from 'dayjs';
+// import {uuid} from "@/utils";
+
+export default {
+  name: 'trail-dialog',
+  mixins: [maphandle],
+  components: {
+    BdMap
+  },
+  data() {
+    return {
+      centerDialogVisible: false,
+      locationMarkers: {},
+      mapIns: null,
+      fencePolyLayer: null,
+      trail: {},
+      destroyed: false,
+      playLine: null
+    };
+  },
+  // 组件卸载前清空图层信息
+  beforeDestroy() {
+    this.markLayer && this.mapIns.removeLayersById('markerLayer');
+    this.fencePolyLayer && this.fencePolyLayer.cust.clearLayer()
+  },
+  created() {
+
+  },
+  mounted() {
+  },
+  methods: {
+    dayjs,
+    onDialogClose() {
+      this.markLayer = null;
+      this.destroyed = true;
+    },
+    loaded(map) {
+      this.markLayer = new BDLayers.Lib.Layer.CBVectorLayer('markerLayer', true);
+      map.addCustomLayers(this.markLayer, 99);
+      this.mapIns = map;
+      map.setPitch(0);
+      map.setCenter([118.86895, 32.01326]);
+      this.fencePolyLayer = this.createLayer(map);
+      this.addTrail()
+    },
+    show(data) {
+      this.trail = data;
+      this.destroyed = false;
+      this.centerDialogVisible = true;
+    },
+    addTrail(data) {
+      const coordinates = [
+        [118.868474555524, 32.013913750075],
+        [118.868459917135, 32.0138560330253],
+        [118.868460650064, 32.0137600494265],
+        [118.868469791963, 32.0135491295906],
+        [118.868450597046, 32.0135969285238],
+        [118.868451821878, 32.0134372342673],
+        [118.868369085172, 32.0134271059761],
+        [118.868229813542, 32.0134261784667],
+        [118.868037844538, 32.0134249000077],
+        [118.867988911263, 32.013424574126],
+        [118.867990212059, 32.0132809893746],
+        [118.867986825628, 32.0132395072755],
+        [118.867987028075, 32.0132171885197],
+        [118.867987432888, 32.0131725599655],
+        [118.867984539806, 32.0130769425047],
+        [118.867977454441, 32.0130291167663],
+        [118.86797791828, 32.0129781711549],
+        [118.867978150146, 32.0129527041872],
+        [118.867974855578, 32.0129017568948],
+        [118.868046176274, 32.0129117791912],
+        [118.868121507934, 32.0128931867922],
+        [118.868117943319, 32.0128708893801],
+        [118.868126616248, 32.012737367597],
+        [118.868127634971, 32.0126197858525],
+        [118.868127662494, 32.0126166091195],
+        [118.868165320753, 32.0126041528561],
+        [118.868173101262, 32.0125724412675],
+        [118.868240681514, 32.0125728913369],
+        [118.868308235972, 32.0125765173023],
+        [118.868334874981, 32.0125322352762],
+        [118.868324305199, 32.012446455205],
+        [118.868361835438, 32.0124467051483],
+        [118.868364679658, 32.0125610134717],
+        [118.868492254263, 32.0125713907483],
+        [118.868541014618, 32.0125780675563],
+        [118.868732580782, 32.012566639437],
+        [118.868841456955, 32.0125673645282],
+        [118.868976574771, 32.0125746162152],
+        [118.869070453844, 32.0125720654824],
+        [118.869096734551, 32.0125722405062],
+        [118.869156822422, 32.0125694647922],
+        [118.869179313588, 32.0125759664106],
+        [118.869201684821, 32.0126047016424],
+        [118.869186178487, 32.0126935647542],
+        [118.869193065594, 32.0128080658432],
+        [118.869192510216, 32.0129098661745],
+        [118.86919198924, 32.0130053604978],
+        [118.869179854563, 32.0131613771548],
+        [118.869190250492, 32.0133240705021],
+        [118.869185964264, 32.0134197772962],
+        [118.86917071489, 32.0134547924615],
+        [118.869159014503, 32.0135281642937],
+        [118.869166174307, 32.0135953030259],
+        [118.869165521059, 32.0137135723353],
+        [118.869187426642, 32.0138416759025],
+        [118.869153188005, 32.0138990608231],
+        [118.868990969654, 32.0139203908971],
+        [118.868768561862, 32.0139189097324],
+        [118.868572541435, 32.0139176042992],
+        [118.868557462941, 32.0139175038812],
+      ];
+      // 19FB03
+      this.playLine = bdmap.comp.Trajectory.loadTrajectory({
+        mapView: this.mapIns,
+        latlons: coordinates,
+        unitTime: 500,
+        speedValue: 1,
+        mapToCenter: false,
+      });
+      bdmap.comp.Trajectory.trajectoryPlay(this.playLine);
+    },
+    showTrailTime(data) {
+      let location = [
+        {
+          lnglat: [118.868240681514, 32.0125728913369],
+          date: '2024-12-11 06:10:00',
+        },
+        {
+          lnglat: [118.869096734551, 32.0125722405062],
+          date: '2024-12-11 06:13:00',
+        },
+        {
+          lnglat: [118.869179854563, 32.0131613771548],
+          date: '2024-12-11 06:15:30',
+        },
+        {
+          lnglat: [118.868768561862, 32.0139189097324],
+          date: '2024-12-11 06:25:33',
+        }
+      ]
+      this.markLayer && this.markLayer.removeAll();
+      location.forEach((item, i) => {
+          const {
+            lnglat,
+            date,
+          } = item;
+          this.markLayer.addMarker(new BDLayers.Lib.Overlays.MarkerImg(
+            `marker${date + i}`,
+            lnglat,
+            {
+              imgurl: position,
+              iconSize: [25, 30],
+              labelText: `${date}`,
+              labelTextColor: '#fff',
+              labelTextSize: 10,
+            },
+          ));
+        }
+      );
+    },
+    trailPlay() {
+      bdmap.comp.Trajectory.trajectoryCancel(this.playLine);
+      bdmap.comp.Trajectory.trajectoryPlay(this.playLine);
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.trail-dialog-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .map-ctrl {
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    margin-left: 20px;
+
+    .el-button {
+      margin-left: 0;
+      margin-top: 10px;
+    }
+  }
+}
+</style>