防火巡检画面字段及接口对接

src/api/firegrid/index.ts

@@ -19,6 +19,7 @@ enum Api {
   GetClockOnList = '/api/FireGrid/GetClockOnList',
   GetStatisticsCount = '/api/FireGrid/GetStatisticsCount',
   GetStatistics = '/api/FireGrid/GetStatistics',
+  GetPatrolPointByTime = '/api/FirePatrol/GetPatrolPointByTime',
 }
 
 /**
@@ -96,3 +97,9 @@ export function getStatisticsCount(params: GetStatisticsCountParams) {
 export function getStatistics(params: GetStatisticsParams) {
   return defHttp.get({ url: Api.GetStatistics, params });
 }
+/**
+ * @description: 获取巡查轨迹
+ */
+export function GetPatrolPointByTime(params) {
+  return defHttp.get({ url: Api.GetPatrolPointByTime, params });
+}

src/views/demo/meshing/inspection/LeftTable.vue

@@ -28,15 +28,15 @@
             <img src="@/assets/images/meshing/clockIn-bg.png" />
           </div>
           <div class="clock-item-info">
-            <p>打卡点名称：{{ item.PointName }}</p>
+            <p>打卡点名称：{{ item.pointname }}</p>
-            <p>创建时间：{{ item.CreateTime }}</p>
+            <p>创建时间：{{ item.createtime }}</p>
-            <p>负责人员：{{ item.CreateUserName }}</p>
+            <p>负责人员：{{ item.usernames }}</p>
             <p style="text-align: right">
               <a-popconfirm
                 title="确定删除吗？"
                 ok-text="是"
                 cancel-text="否"
-                @confirm="deleteTask(item.Id)"
+                @confirm="deleteTask(item.id)"
               >
                 <a-button type="primary" danger size="mini">删除</a-button>
               </a-popconfirm>
@@ -52,6 +52,7 @@
       </div>
       <div class="table-data-pagination m-4">
         <a-pagination
+          size="small"
           show-size-changer
           show-quick-jumper
           v-model:current="pageData.current"
@@ -173,7 +174,7 @@
   const editClockInfo = (row) => {
     openEidtModal(true, {
       isUpdate: true,
-      id: row.Id,
+      id: row.id,
     });
   };
   //   编辑成功
@@ -187,7 +188,7 @@
   // 查看
   const lookClockInfo = (row) => {
     emits('viewHandle', row);
-    const lnglat = [row.Lng, row.Lat];
+    const lnglat = [row.lng, row.lat];
     EventBus.emit('inspectionMap', lnglat);
   };
   // 巡检
@@ -245,7 +246,9 @@
     position: relative;
     height: calc(100% - 68px);
     .table-data-pagination {
-      position: absolute;
+      display: flex;
+      justify-content: end;
+      position: relative;
       bottom: 0px;
       background-color: @component-background;
     }

src/views/demo/meshing/inspection/LeftView.vue

@@ -15,7 +15,7 @@
               <BankOutlined />
               打卡点名称
             </template>
-            {{ itemData.PointName }}
+            {{ itemData.pointname }}
           </a-descriptions-item>
 
           <a-descriptions-item>
@@ -23,14 +23,14 @@
               <HistoryOutlined />
               创建时间
             </template>
-            {{ itemData.CreateTime }}
+            {{ itemData.createtime }}
           </a-descriptions-item>
           <a-descriptions-item>
             <template v-slot:label>
               <EnvironmentOutlined />
               打卡点位置
             </template>
-            {{ itemData.Lng }},{{ itemData.Lat }}&nbsp;&nbsp;
+            {{ itemData.lng }},{{ itemData.lat }}&nbsp;&nbsp;
             <!-- <el-button type="primary" size="mini" round icon="el-icon-location-outline" @click="lookClockInfo(currentClockInfo)">定位</el-button> -->
           </a-descriptions-item>
         </a-descriptions>
@@ -83,14 +83,14 @@
                 style="float: right; position: relative; top: 8px"
                 >轨迹</a-button
               >
-              <a-button
+              <!-- <a-button
                 type="primary"
                 size="mini"
                 round
                 @click="getRange(it.phone)"
                 style="float: right; position: relative; top: 8px; left: -12px"
                 >范围</a-button
-              >
+              > -->
             </div>
             {{ it.startTime }}
             &nbsp;&nbsp; <SwapRightOutlined style="font-size: 20px" />
@@ -135,18 +135,20 @@
     BankOutlined,
     ArrowLeftOutlined,
   } from '@ant-design/icons-vue';
-  import { getCheckInfoByPointId } from '@/api/firegrid/index';
+  import { getCheckInfoByPointId,  GetPatrolPointByTime } from '@/api/firegrid/index';
   import { getPatrolInfoByUserId } from '@/api/firegrid/patrol';
   import { EventBus } from '@/utils/eventBus';
-  import moment from 'moment';
+  import dayjs from 'dayjs'
+  import * as mars3d from 'mars3d';
+import { message } from 'ant-design-vue';
 
-  const props = defineProps({
+  const props = defineProps(['itemData','map']);
-    itemData: Object,
-  });
   const emits = defineEmits(['delView']);
   const tabActive = ref(1);
   const currentRouters = ref([]);
   const clockInList = ref([]);
+  const value1: any = ref([dayjs().subtract(1, 'month'), dayjs()]);
+  const polyLineArr = ref([])
   //   查询
   interface FormState {
     begintime: string | null;
@@ -163,7 +165,7 @@
   };
   // 获取打卡记录
   const getPointInfo = () => {
-    getCheckInfoByPointId({ id: props.itemData.Id, page: 1, limit: 999999 }).then((res) => {
+    getCheckInfoByPointId({ id: props.itemData.id, page: 1, limit: 999999 }).then((res) => {
       clockInList.value = res.items;
     });
   };
@@ -171,37 +173,60 @@
   const getPatrolInfo = () => {
     const params = {
       ...formState,
-      id: props.itemData.Id,
+      id: props.itemData.userid,
     };
     getPatrolInfoByUserId(params).then((res) => {
       currentRouters.value = res;
     });
   };
-  const value1: any = ref([]);
+  
 
   onMounted(() => {
+    formState.begintime = dayjs().subtract(1, 'month').format('YYYY-MM-DD HH:mm')
+    formState.endtime = dayjs().format('YYYY-MM-DD HH:mm')
     getPointInfo();
     getPatrolInfo();
-    let start = new Date();
-    let end = new Date();
-    const time = [
-      end.getFullYear() + '-' + (end.getMonth() + 1) + '-' + end.getDate() + ' 00:00:00',
-      start.getFullYear() +
-        '-' +
-        (start.getMonth() + 1) +
-        '-' +
-        start.getDate() +
-        ' ' +
-        start.getHours() +
-        ':' +
-        start.getMinutes() +
-        ':' +
-        start.getSeconds(),
-    ];
-    formState.begintime = time[0];
-    formState.endtime = time[1];
-    value1.value = [moment(time[0], 'YYYY-MM-DD HH:mm'), moment(time[1], 'YYYY-MM-DD HH:mm')];
   });
+  const getTrajectoryData = (data) => {
+    if(polyLineArr.value.length > 0){
+      polyLineArr.value.forEach(item =>{
+        let graphic = props.map.graphicLayer.getGraphicById(item);
+        props.map.graphicLayer.removeGraphic(graphic);
+      })
+      polyLineArr.value = []
+    }
+    let params = {
+      ...formState,
+      id: data.createId,
+    }
+    GetPatrolPointByTime(params).then(res => {
+      let rel = res
+      let positionsArr = []
+      if(rel.length > 0){
+        rel.forEach(item =>{
+          let arr = []
+          arr.push(item.lng,item.lat)
+          positionsArr.push(arr)
+        })
+        const graphic = new mars3d.graphic.PolylineEntity({
+          id: data.createId,
+          positions: positionsArr,
+          style: {
+            color: '#25F8EE',
+            depthFail: true,
+            opacity: 1,
+          },
+          attr: { remark: "轨迹" },
+          flyTo: true
+        })
+        props.map.graphicLayer.addGraphic(graphic)
+        polyLineArr.value.push(data.createId)
+      }else{
+        message.warning('暂无巡查轨迹');
+      }
+    })
+    
+  }
 </script>
 <style lang="less" scoped>
   .item-container {

src/views/demo/meshing/inspection/Map.vue

@@ -18,6 +18,7 @@
   import axios from 'axios';
 
   const [editModal, { openModal: openEidtModal }] = useModal();
+  const emits = defineEmits(['onLoad'])
 
   let map: mars3d.Map; // 地图对象
 
@@ -270,6 +271,9 @@
       // map.setOptions(newData);
       map.setSceneOptions(newData.scene);
     }
+    map.on(mars3d.EventType.load, function (event) {
+      emits('onLoad', map);
+    })
     isFirstLoad.value = false;
     // 初始化矢量图层
     handlerInitEntityLayer();

src/views/demo/meshing/inspection/index.vue

@@ -1,15 +1,15 @@
 <template>
   <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
-    <LeftView class="w-1/2 xl:w-1/2" :itemData="viewData" v-if="viewData" @delView="delViewData" />
+    <LeftView class="w-1/2 xl:w-1/2" :map="map" :itemData="viewData" v-if="viewData" @delView="delViewData" />
     <LeftTable class="w-1/2 xl:w-1/2" @viewHandle="viewHandle" v-else />
-    <Map class="w-1/2 xl:w-1/2" />
+    <Map class="w-1/2 xl:w-1/2" @onLoad="onMapLoad"/>
   </PageWrapper>
 </template>
 <script setup lang="ts">
   import { ref } from 'vue';
   import { PageWrapper } from '@/components/Page';
   import { LeftTable, Map, LeftView } from './index';
-
+  const map = ref()
   const viewData = ref(null);
   const viewHandle = (data: any) => {
     console.log(data);
@@ -18,5 +18,8 @@
   const delViewData = () => {
     viewData.value = null;
   };
+  const onMapLoad = (value) => {
+    map.value = value
+  }
 </script>
 <style lang="scss" scoped></style>