提交

src/api/mosty-jcz.js

@@ -738,3 +738,48 @@ export const feignQueryById = (params) => {
   });
 };
 
+// 人员轨迹查询
+export const RyGjTrajectory = (params) => {
+  return request({
+    url: api + "/tbJczRyGj/trajectory",
+    method: "get",
+    params
+  });
+};
+
+// 人员轨迹CRUD
+export const RyGjSelectPage = (params) => {
+  return request({
+    url: api + "/tbJczRyGj/selectPage",
+    method: "get",
+    params
+  });
+};
+export const RyGjQueryById = (params) => {
+  return request({
+    url: api + "/tbJczRyGj/queryById",
+    method: "get",
+    params
+  });
+};
+export const RyGjInsertEntity = (data) => {
+  return request({
+    url: api + "/tbJczRyGj/insertEntity",
+    method: "post",
+    data
+  });
+};
+export const RyGjEditEntity = (data) => {
+  return request({
+    url: api + "/tbJczRyGj/editEntity",
+    method: "post",
+    data
+  });
+};
+export const RyGjDeleteById = (id) => {
+  return request({
+    url: api + `/tbJczRyGj/deleteById/${id}`,
+    method: "delete"
+  });
+};
+

src/components/GdMap/index copy.vue

@@ -1,8 +1,8 @@
 <template>
   <div :id="mapid" class="map"></div>
   <div class="changeMap_box" v-if="props.isShow">
-    <el-switch v-model="conditionRoute" @change="handleSwitch" active-text="打开路况" inactive-text="关闭路况"
+    <!-- <el-switch v-model="conditionRoute" @change="handleSwitch" active-text="打开路况" inactive-text="关闭路况"
-      style="--el-switch-color: #13ce66; --el-switch-off-color: #ff4949" />
+      style="--el-switch-color: #13ce66; --el-switch-off-color: #ff4949" /> -->
     <!-- <el-carousel type="card" height="75px" :autoplay="false" indicator-position="none" :initial-index="3"  @change="onMapImageChange">
       <el-carousel-item>
         <div class="mapImageItem">

src/components/GdMap/index.vue

@@ -1,8 +1,7 @@
 <template>
   <div :id="mapid" class="map"></div>
   <div class="changeMap_box" v-if="props.isShow">
-    <el-switch v-model="conditionRoute" @change="handleSwitch" active-text="打开路况" inactive-text="关闭路况"
+    <!-- <el-switch v-model="conditionRoute" @change="handleSwitch" active-text="打开路况" inactive-text="关闭路况" style="--el-switch-color:#13ce66;--el-switch-off-color:#ff4949;" /> -->
-      style="--el-switch-color: #13ce66; --el-switch-off-color: #ff4949" />
     <!-- <el-carousel type="card" height="75px" :autoplay="false" indicator-position="none" :initial-index="3"  @change="onMapImageChange">
       <el-carousel-item>
         <div class="mapImageItem">
@@ -31,7 +30,8 @@
     </el-carousel> -->
     <!-- 地图缩放 -->
     <div class="zoomTargetBox">
-      <el-input-number :min="7" :max="18" v-model="zoomTarget" :step="1" step-strictly @change="handleZoom"></el-input-number>
+      <el-input-number :min="7" :max="18" v-model="zoomTarget" :step="1" step-strictly @change="handleZoom">
+      </el-input-number>
     </div>
   </div>
 </template>
@@ -71,18 +71,11 @@ const props = defineProps({
     type: Boolean,
     default: false
   },
-  minZoom: {
+
-    type: Number,
-    default:  7
-  },
-  maxZoom: {
-    type: Number,
-    default: 18
-  },
 });
 try {
   const userInfo = getItem("deptId")[0].deptCode;
-} catch (error) { }
+} catch (error) {}
 let map;
 let mapLayer;
 let mapLayer1;
@@ -96,37 +89,66 @@ onMounted(() => {
 
   map = new EliMap({
     id: props.mapid,
-    crs: "EPSG:4490",
+    crs: "EPSG:3857",
     style: {
       glyphs: "./fonts/{fontstack}/{range}.pbf",
-      center: [94.36057012, 29.64276831],
+      center: [94.36,29.65],
-      zoom: 15
+      zoom: 11
     },
-    minZoom: props.minZoom,
+    minZoom: 7,
-    maxZoom: props.maxZoom,
+    maxZoom: 18,
+    transformRequest: (url) => {
+      if (url.indexOf("TileMatrix=") != -1) {
+        const arr = url.split("TileMatrix=");
+        const arr1 = arr[1].split("&");
+        const nurl = `${arr[0]}&TileMatrix=${Number(arr1[0])}&${arr1[1]}&${arr1[2]}`;
+
+      }
+    }
   });
+
   window.map = map;
   map.mapboxGLMap.on("load", () => {
-    map.addWMTSLayer(
+     map.addGaudLayer({
-      "/PGIS_S_TileMapServer/Maps/XZDJ_DJ/EzMap"
+      url: 'http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
-      ,
+    })
-      {
-        Service: "getImage",
-        Type: "RGB",
-        ZoomOffset: "0",
-        V: "0.3",
-        Zoom: "{z}",
-        Row: "{y}",
-        Col: "{x}"
-      },
-      {
-        tileSize: 300
-      }
-    );
     zoomTarget.value = map.mapboxGLMap.getZoom();
+    // 地图加载完成后发出事件
+    // emit('mapLoaded')
   });
   mapUtil.value = new MapUtil(map);
-
+  // map = new EliMap({
+  //   id: props.mapid,
+  //   crs: "EPSG:4490",
+  //   style: {
+  //     glyphs: "./fonts/{fontstack}/{range}.pbf",
+  //     center: [94.36057012, 29.64276831],
+  //     zoom: 15
+  //   },
+  //   minZoom: 7,
+  //   maxZoom: 18,
+  // });
+  // window.map = map;
+  // map.mapboxGLMap.on("load", () => {
+  //   map.addWMTSLayer(
+  //     "/PGIS_S_TileMapServer/Maps/XZDJ_SL/EzMap"
+  //     ,
+  //     {
+  //       Service: "getImage",
+  //       Type: "RGB",
+  //       ZoomOffset: "0",
+  //       V: "0.3",
+  //       Zoom: "{z}",
+  //       Row: "{y}",
+  //       Col: "{x}"
+  //     },
+  //     {
+  //       tileSize: 300
+  //     }
+  //   );
+  //   zoomTarget.value = map.mapboxGLMap.getZoom();
+  // });
+  // mapUtil.value = new MapUtil(map);
   mapUtil.value.Drawplot(); //初始化加载绘制工具
 
   // 设置地图中心点及图层
@@ -267,6 +289,7 @@ const mapSetLayer = (id, source) => {
 
 //获取地图绘制的数据
 const resFun = (coord, type, flag, data) => {
+
   emitter.emit("coordString", {
     coord: coord,
     type: type,
@@ -280,6 +303,12 @@ const handleZoom = (val) => {
   map.mapboxGLMap.setZoom(val);
 };
 
+emitter.on("map-resize", () => {
+  if (map && map.mapboxGLMap) {
+    map.mapboxGLMap.resize();
+  }
+});
+
 // 是否打开或者关闭路况
 const handleSwitch = (val) => {
   if (val) {
@@ -309,6 +338,7 @@ onUnmounted(() => {
   emitter.off("diffusionCircle");
   emitter.off("SsCircle");
   emitter.off("ClearssCircle");
+  emitter.off("map-resize");
 });
 </script>
 
@@ -331,35 +361,29 @@ onUnmounted(() => {
   right: 398px;
   bottom: 4px;
   z-index: 9;
-
   .mapImageItem {
     border: 1px solid #08aae8;
     background: rgb(9, 26, 70);
-
+    & > img {
-    &>img {
       width: 100%;
       height: 50px;
     }
-
+    & > div {
-    &>div {
       text-align: center;
       position: relative;
       top: -3px;
     }
   }
-
   .zoomTargetBox {
     margin-top: 10px;
     margin-left: 23px;
   }
-
   ::v-deep .el-input-number__decrease,
   ::v-deep .el-input-number__increase {
     background: #133362;
     color: #fff;
     border: none;
   }
-
   ::v-deep .el-input__inner {
     background: #0c1641;
   }

src/components/GdMap/indexn.vue

@@ -1,7 +1,7 @@
 <template>
   <div :id="mapid" class="map"></div>
   <div class="changeMap_box" v-if="props.isShow">
-    <el-switch v-model="conditionRoute" @change="handleSwitch" active-text="打开路况" inactive-text="关闭路况" style="--el-switch-color:#13ce66;--el-switch-off-color:#ff4949;" />
+    <!-- <el-switch v-model="conditionRoute" @change="handleSwitch" active-text="打开路况" inactive-text="关闭路况" style="--el-switch-color:#13ce66;--el-switch-off-color:#ff4949;" /> -->
     <!-- <el-carousel type="card" height="75px" :autoplay="false" indicator-position="none" :initial-index="3"  @change="onMapImageChange">
       <el-carousel-item>
         <div class="mapImageItem">
@@ -109,46 +109,26 @@ onMounted(() => {
 
   window.map = map;
  map.mapboxGLMap.on("load", () => {
-     map.addGaudLayer({
+    map.addWMTSLayer(
-      url: 'http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
+      "/PGIS_S_TileMapServer/Maps/XZDJ_DJ/EzMap"
-    })
+      ,
+      {
+        Service: "getImage",
+        Type: "RGB",
+        ZoomOffset: "0",
+        V: "0.3",
+        Zoom: "{z}",
+        Row: "{y}",
+        Col: "{x}"
+      },
+      {
+        tileSize: 300
+      }
+    );
     zoomTarget.value = map.mapboxGLMap.getZoom();
-    // 地图加载完成后发出事件
-    // emit('mapLoaded')
   });
   mapUtil.value = new MapUtil(map);
-  // map = new EliMap({
+ 
-  //   id: props.mapid,
-  //   crs: "EPSG:4490",
-  //   style: {
-  //     glyphs: "./fonts/{fontstack}/{range}.pbf",
-  //     center: [94.36057012, 29.64276831],
-  //     zoom: 15
-  //   },
-  //   minZoom: 7,
-  //   maxZoom: 18,
-  // });
-  // window.map = map;
-  // map.mapboxGLMap.on("load", () => {
-  //   map.addWMTSLayer(
-  //     "/PGIS_S_TileMapServer/Maps/XZDJ_SL/EzMap"
-  //     ,
-  //     {
-  //       Service: "getImage",
-  //       Type: "RGB",
-  //       ZoomOffset: "0",
-  //       V: "0.3",
-  //       Zoom: "{z}",
-  //       Row: "{y}",
-  //       Col: "{x}"
-  //     },
-  //     {
-  //       tileSize: 300
-  //     }
-  //   );
-  //   zoomTarget.value = map.mapboxGLMap.getZoom();
-  // });
-  // mapUtil.value = new MapUtil(map);
   mapUtil.value.Drawplot(); //初始化加载绘制工具
 
   // 设置地图中心点及图层

src/components/aboutTable/MyTable.vue

@@ -16,7 +16,7 @@
       :load="load"
       :tree-props="treePros"
       style="width: 100%"
-      :header-cell-class-name="() => '街面警情统计HeadBgColor'"
+      :show-header="true"
       :highlight-current-row="getConfiger.showSelectType === 'radio'"
       :row-style="{
         height:

src/router/index.js

@@ -339,6 +339,17 @@ export const publicRoutes = [
               icon: "article"
             }
           }
+          ,
+          {
+            path: "/TrackPerson",
+            name: "TrackPerson",
+            component: () =>
+              import("@/views/backOfficeSystem/peopleManag/TrackPerson/index"),
+            meta: {
+              title: "人员轨迹",
+              icon: "article"
+            }
+          }
         ]
       },
       {

src/views/backOfficeSystem/peopleManag/PerceptualSource/index.vue

@@ -197,6 +197,11 @@ const addEdit = (type, row) => {
   detailDiloag.value.init(type, row);
 };
 
+const historyDialog = ref();
+const showTrack = (row) => {
+  historyDialog.value.open(row);
+};
+
 const searchBox = ref(null);
 // 表格高度计算
 const tabHeightFn = () => {

src/views/backOfficeSystem/peopleManag/TrackPerson/components/HistoryTrackDialog.vue

@@ -0,0 +1,56 @@
+<template>
+  <el-dialog v-model="visible" title="历史轨迹" width="80%" :close-on-click-modal="false" :destroy-on-close="true">
+    <div style="width:100%; height:60vh; position:relative;">
+      <GdMap :isShow="true" :isShowZoom="true" />
+    </div>
+    <template #footer>
+      <span>{{ personLabel }}</span>
+      <el-button @click="visible=false">关闭</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, nextTick } from 'vue'
+import GdMap from '@/components/GdMap/index.vue'
+import emitter from '@/utils/eventBus.js'
+import { RyGjTrajectory } from '@/api/mosty-jcz.js'
+import { ElMessage } from 'element-plus'
+
+const visible = ref(false)
+const sfzh = ref('')
+const personLabel = ref('')
+
+const open = async (row) => {
+  sfzh.value = row.sfzh
+  personLabel.value = `${row.xm || ''}（近30天）`
+  visible.value = true
+  await nextTick()
+  emitter.emit('map-resize')
+
+    const res = await RyGjTrajectory({ sfzh: sfzh.value, days: 30 })
+    const list = Array.isArray(res) ? res : (res?.data?.data || [])
+    
+    if (!list || list.length === 0) {
+      ElMessage({ message: '近30天无轨迹数据', type: 'info' })
+      emitter.emit('removeElement', 'rygj')
+      return
+    }
+    const coords = list.map(it => [Number(it.jd), Number(it.wd)])
+    const start = coords[0]
+    console.log('coords', coords)
+    emitter.emit('setMapCenter', { location: start, zoomLevel: 12 })
+    if (coords.length > 1) {
+      emitter.emit('drawLineAnimation', { coords, isClear: true, flag: 'rygj' })
+    }
+    // 撒点显示历史轨迹
+  const pointObjs = list.map(it => ({ jd: Number(it.jd), wd: Number(it.wd) }))
+  emitter.emit('addPointArea', { coords: pointObjs, icon: require('@/assets/images/bi/gzy.png'), flag: 'rygj_points' })
+  
+}
+
+defineExpose({ open })
+</script>
+
+<style scoped>
+</style>

src/views/backOfficeSystem/peopleManag/TrackPerson/components/editAddForm.vue

@@ -0,0 +1,168 @@
+<template>
+  <div class="dialog" v-if="dialogForm">
+    <div class="head_box">
+      <span class="title">{{ pageInfo[pageType].title }}</span>
+      <div>
+        <el-button size="small" type="primary" v-if="['add', 'edit'].includes(pageType)" @click="_onSave">保存</el-button>
+        <el-button size="small" @click="close">关闭</el-button>
+      </div>
+    </div>
+    <div class="cntinfo">
+      <el-form ref="formRef" :model="form" :rules="rules" :inline="true" label-position="top">
+        <el-form-item style="width: 40%" prop="sfzh" label="身份证号">
+          <el-input v-model="form.sfzh" placeholder="请输入身份证号" clearable />
+        </el-form-item>
+        <el-form-item style="width: 40%" prop="xm" label="姓名">
+          <el-input v-model="form.xm" placeholder="请输入姓名" clearable />
+        </el-form-item>
+        <el-form-item style="width: 40%" prop="rylx" label="人员类型">
+          <el-select v-model="form.rylx" placeholder="请选择" style="width: 100%">
+            <el-option label="流动人口" value="01" />
+            <el-option label="常驻人口" value="02" />
+            <el-option label="重点人" value="03" />
+          </el-select>
+        </el-form-item>
+        <el-form-item style="width: 40%" prop="pcsj" label="采集时间">
+          <el-date-picker v-model="form.pcsj" type="datetime" placeholder="请选择" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
+        </el-form-item>
+        <el-form-item style="width: 40%" prop="ssbmdm" label="所属部门">
+          <MOSTY.Department width="100%" clearable v-model="form.ssbmdm" :placeholder="form.ssbm ? form.ssbm : '请选择所属部门'" />
+        </el-form-item>
+        <!-- 联系方式与地址在前 -->
+        <el-form-item style="width: 40%" prop="lxdh" label="联系电话">
+          <el-input v-model="form.lxdh" placeholder="请输入联系电话" clearable />
+        </el-form-item>
+        <el-form-item style="width: 40%" prop="xjzdz" label="居住地址">
+          <el-input v-model="form.xjzdz" placeholder="请输入居住地址" clearable />
+        </el-form-item>
+
+        <!-- 经纬度选择放到最后，参考感知源实现 -->
+        <el-form-item style="width: 85%" prop="jd" label="坐标位置">
+          <div class="latlng">
+            <el-input :disabled="true" v-model="form.jd" clearable placeholder="请选择坐标" style="width: 42%" />
+            <el-input :disabled="true" v-model="form.wd" clearable placeholder="请选择坐标" style="width: 42%; margin-left: 1%" />
+            <el-button @click="selectLocation" size="small" type="primary">选择定位</el-button>
+          </div>
+        </el-form-item>
+        <el-form-item style="width: 100%">
+          <div class="mapbox"><GdMap /></div>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+import { ElMessage } from 'element-plus'
+import { RyGjInsertEntity, RyGjEditEntity } from '@/api/mosty-jcz.js'
+import * as MOSTY from '@/components/MyComponents/index'
+import GdMap from '@/components/GdMap/index.vue'
+import emitter from '@/utils/eventBus.js'
+
+const formRef = ref(null)
+const dialogForm = ref(false)
+const form = ref({})
+const pageType = ref('add')
+const emit = defineEmits(['refresh'])
+const pageInfo = { add: { title: '新增', url: '' }, edit: { title: '编辑', url: '' }, detail: { title: '详情' } }
+
+const rules = {
+  sfzh: [{ required: true, message: '请输入身份证号' }],
+  rylx: [{ required: true, message: '请选择人员类型' }],
+  pcsj: [{ required: true, message: '请选择采集时间', trigger: 'change' }],
+  jd: [{ required: true, message: '请输入经度' }],
+  wd: [{ required: true, message: '请输入纬度' }]
+}
+
+const init = (type, row) => {
+  pageType.value = type
+  dialogForm.value = true
+  if (type === 'detail') {
+    form.value = { ...row }
+    centerMap()
+  } else if (type === 'edit') {
+    form.value = { ...row }
+  } else {
+    form.value = {}
+  }
+}
+
+const _onSave = () => {
+  if (!formRef.value) return
+  formRef.value.validate((valid) => {
+    if (!valid) return
+    enrichFromSfzh()
+    if (pageType.value === 'add') {
+      RyGjInsertEntity(form.value).then(() => { ElMessage({ message: '新增成功', type: 'success' }); emit('refresh'); close(); })
+    } else {
+      RyGjEditEntity(form.value).then(() => { ElMessage({ message: '修改成功', type: 'success' }); emit('refresh'); close(); })
+    }
+  })
+}
+
+const close = () => { dialogForm.value = false; form.value = {} }
+
+defineExpose({ init })
+
+const enrichFromSfzh = () => {
+  const val = form.value.sfzh || ''
+  if (val && val.length >= 18) {
+    const y = val.substring(6, 10)
+    const m = val.substring(10, 12)
+    const d = val.substring(12, 14)
+    form.value.csrq = `${y}-${m}-${d}`
+    const genderCode = parseInt(val.substring(16, 17))
+    form.value.xbdm = (genderCode % 2 === 1) ? '1' : '2' // 1-男 2-女
+  }
+}
+
+const selectLocation = () => {
+  emitter.emit('drawShape', { flag: 'select_point', type: 'point', isclear: true })
+}
+
+const coordHandler = (res) => {
+  if (res?.type === 'point') {
+    form.value.jd = res.coord[0]
+    form.value.wd = res.coord[1]
+    chackLat()
+  }
+}
+
+const centerMap = () => {
+  if (form.value.jd && form.value.wd) {
+    emitter.emit('setMapCenter', { location: [Number(form.value.jd), Number(form.value.wd)], zoomLevel: 12 })
+    chackLat()
+  }
+}
+
+const chackLat = () => {
+  const { jd, wd } = form.value
+  emitter.emit('deletePointArea', 'jczMap_Gzy')
+  if (jd && wd) {
+    emitter.emit('addPointArea', {
+      coords: [{ jd: Number(jd), wd: Number(wd) }],
+      icon: require('@/assets/images/bi/gzy.png'),
+      flag: 'jczMap_Gzy'
+    })
+  }
+}
+
+onMounted(() => { emitter.on('coordString', coordHandler) })
+onUnmounted(() => { emitter.off('coordString') })
+</script>
+
+<style scoped>
+.dialog { padding: 20px; }
+.head_box { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
+.cntinfo { height: calc(100% - 70px); overflow: auto; }
+
+.mapbox {
+  width: 1000px;
+  padding: 0 10px;
+  height: 400px;
+  box-sizing: border-box;
+  background: #000;
+}
+.latlng { display: flex; align-items: center; gap: 8px; }
+</style>

src/views/backOfficeSystem/peopleManag/TrackPerson/index.vue

@@ -0,0 +1,126 @@
+<template>
+  <div>
+    <div class="titleBox">
+      <PageTitle title="人员轨迹">
+        <el-button type="primary" @click="addEdit('add', '')" v-if="Auth">新增</el-button>
+      </PageTitle>
+    </div>
+    <div ref="searchBox">
+      <Search :searchArr="searchConfiger" @submit="onSearch" />
+    </div>
+    <div class="tabBox">
+      <MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
+        :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
+        <template #rylx="{ row }">
+          {{ rylxMap[row.rylx] || row.rylx || '-' }}
+        </template>
+        <template #controls="{ row }">
+          <template v-if="Auth">
+            <el-link type="primary" @click="addEdit('edit', row)">编辑</el-link>
+            <el-link type="primary" @click="delItem(row.id)">删除</el-link>
+          </template>
+          <el-link type="primary" @click="showTrack(row)">历史轨迹</el-link>
+        </template>
+      </MyTable>
+      <Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{
+        ...pageData.pageConfiger,
+        total: pageData.total
+      }"></Pages>
+    </div>
+    <EditAddForm ref="detailDiloag" @refresh="getList" />
+    <HistoryTrackDialog ref="historyDialog" />
+  </div>
+</template>
+
+<script setup>
+import { ElMessage } from "element-plus";
+import PageTitle from "@/components/aboutTable/PageTitle.vue";
+import MyTable from "@/components/aboutTable/MyTable.vue";
+import Pages from "@/components/aboutTable/Pages.vue";
+import Search from "@/components/aboutTable/Search.vue";
+import EditAddForm from "./components/editAddForm.vue";
+import HistoryTrackDialog from "./components/HistoryTrackDialog.vue";
+import { RyGjSelectPage, RyGjDeleteById } from "@/api/mosty-jcz.js";
+import { isAuth } from '@/utils/tools.js'
+import { reactive, ref, onMounted, nextTick } from "vue";
+
+const Auth = ref(true)
+onMounted(() => {
+  Auth.value = isAuth()
+  nextTick(() => { tabHeightFn(); });
+});
+const rylxMap = {
+  '01': '流动人口',
+  '02': '常驻人口',
+  '03': '重点人'
+}
+
+const searchConfiger = ref([
+  { label: "身份证号", prop: "sfzh", placeholder: "请输入身份证号", showType: "input" },
+  { label: "姓名", prop: "xm", placeholder: "请输入姓名", showType: "input" },
+  { label: "人员类型", prop: "rylx", placeholder: "请选择", showType: "select", options: [
+    { label: '流动人口', value: '01' },
+    { label: '常驻人口', value: '02' },
+    { label: '重点人', value: '03' }
+  ] },
+  { label: "开始时间", prop: "startTime", placeholder: "请选择开始时间", showType: "dateTime" },
+  { label: "结束时间", prop: "endTime", placeholder: "请选择结束时间", showType: "dateTime" }
+]);
+
+const pageData = reactive({
+  tableData: [],
+  keyCount: 0,
+  tableConfiger: { rowHieght: 61, showSelectType: "null", loading: false },
+  total: 0,
+  pageConfiger: { pageSize: 20, pageCurrent: 1 },
+  controlsWidth: 250,
+  tableHeight: 0,
+  tableColumn: [
+    { label: "身份证号", prop: "sfzh", showOverflowTooltip: true },
+    { label: "姓名", prop: "xm", showOverflowTooltip: true },
+    { label: "人员类型", prop: "rylx", showOverflowTooltip: true, showSolt: true },
+    { label: "采集时间", prop: "pcsj", showOverflowTooltip: true },
+    { label: "经度", prop: "jd", showOverflowTooltip: true },
+    { label: "纬度", prop: "wd", showOverflowTooltip: true },
+    { label: "所属部门", prop: "ssbm", showOverflowTooltip: true },
+  ]
+});
+
+const queryCondition = ref({});
+const getList = () => {
+  pageData.tableConfiger.loading = true;
+  const params = { ...queryCondition.value, ...pageData.pageConfiger };
+  RyGjSelectPage(params)
+    .then((res) => {
+      const r = res?.data?.data || res;
+      pageData.tableData = r.records || [];
+      pageData.total = r.total || 0;
+    })
+    .finally(() => { pageData.tableConfiger.loading = false; });
+};
+getList();
+
+const onSearch = (val) => { queryCondition.value = { ...queryCondition.value, ...val }; getList(); };
+const changeNo = (val) => { pageData.pageConfiger.pageCurrent = val; getList(); };
+const changeSize = (val) => { pageData.pageConfiger.pageSize = val; getList(); };
+
+const delItem = (id) => {
+  RyGjDeleteById(id).then(() => { ElMessage({ message: "删除成功", type: "success" }); getList(); });
+};
+
+const detailDiloag = ref();
+const addEdit = (type, row) => { detailDiloag.value.init(type, row); };
+
+const historyDialog = ref();
+const showTrack = (row) => { historyDialog.value.open(row); };
+
+const searchBox = ref(null);
+const tabHeightFn = () => {
+  pageData.tableHeight = window.innerHeight - (searchBox.value?.offsetHeight || 0) - 280;
+  window.onresize = function () { tabHeightFn(); };
+};
+</script>
+
+<style>
+.el-loading-mask { background: rgba(0, 0, 0, 0.5) !important; }
+</style>