地图标会

src/components/map/GisMap.vue

@@ -10,10 +10,15 @@ import { onMounted } from 'vue';
 import { myBridge } from '@/utils/map/map.js';
 import { addPoint, addPolyLine, addTrajectory, playTrajectory } from '@/utils/map/mapOperation.js';
 import { useDrawPointStore } from '@/stores/drawPointManage';
-import { getTrajectorPointOnCarById } from '@/service/api/mapRequest.js';
+import {
+  getTrajectorPointOnCarById,
+  getTrajectorPointOnPeopleById
+} from '@/service/api/mapRequest.js';
+import { useMapStore } from '@/stores/mapStore';
 let bridge;
 let listen;
 const drawPointStore = useDrawPointStore();
+const mapStore = useMapStore();
 onMounted(() => {
   myBridge.bridgeContent = bridge = new CityGis.Bridge({
     id: 'map',
@@ -32,32 +37,35 @@ onMounted(() => {
     switch (arg.action) {
       case 'getPoint': {
         const data = arg.data;
-        const index = drawPointStore.currentDrawPointList.length;
-        drawPointStore.setInfoBoxIndex(index);
-        const pointInfo = {
-          index: index,
-          x: data.x,
-          y: data.y,
-          date: '',
-          described: ''
-        };
-        drawPointStore.pushCurrentDrawPointList(pointInfo);
-        console.log(index);
-        addPoint(drawPointStore.currentDrawPointList, 'drawPoint');
-        if (index >= 0) {
-          //画线
-          addPolyLine(drawPointStore.currentDrawPointList, 'drawLine');
-        }
+        drawPointStore.modifyCurrentDrawPointList('x', data.x);
+        drawPointStore.modifyCurrentDrawPointList('y', data.y);
+        // const index = drawPointStore.currentDrawPointList.length - 1;
+        // drawPointStore.setInfoBoxIndex(index);
+        // const pointInfo = {
+        //   index: index,
+        //   x: data.x,
+        //   y: data.y,
+        //   date: '',
+        //   described: ''
+        // };
+        // drawPointStore.pushCurrentDrawPointList(pointInfo);
+        // console.log(index);
+        // addPoint(drawPointStore.currentDrawPointList, 'drawPoint');
+        // if (index > 0) {
+        //   //画线
+        //   addPolyLine(drawPointStore.currentDrawPointList, 'drawLine');
+        // }
         break;
       }
       case 'mapclick': {
-        if (arg?.data?.flowCar.length > 0 && arg?.data?.flowCar[0]?.id) {
+        if (arg?.data?.flowCar?.length > 0 && arg?.data?.flowCar[0]?.id) {
           //会商车
           try {
             const id = arg?.data?.flowCar[0]?.id;
             const res = await getTrajectorPointOnCarById({ id: id });
             if (res.code == 200) {
               addTrajectory(res.data || [], id);
+              mapStore.pushFlowCarList('car_layer' + id);
               setTimeout(() => {
                 playTrajectory(id);
               }, 2000);
@@ -66,7 +74,24 @@ onMounted(() => {
             console.log(error);
           }
         }
-
+        const key = Object.keys(arg.data).find((item) => {
+          return item == 'infectious' || item == 'feverClinic' || item == 'breathe';
+        });
+        if (key) {
+          try {
+            const res = await getTrajectorPointOnPeopleById({
+              id: arg.data[key][0].id
+            });
+            if (res.code == 200) {
+              drawPointStore.currentSelectId = arg.data[key][0].id;
+              drawPointStore.currentDrawPointList = res.data || [];
+            } else {
+              console.log('获取病例轨迹数据错误');
+            }
+          } catch (error) {
+            console.log(error);
+          }
+        }
         break;
       }
     }

src/service/api/mapRequest.js

@@ -22,6 +22,7 @@ export function addCdcDraw(data) {
   });
 }
 
+//病例洒点
 export function getTrajectorPointOnPeople(params) {
   return request({
     url: '/guiji/getTrajectorPointOnPeople',
@@ -30,6 +31,15 @@ export function getTrajectorPointOnPeople(params) {
   });
 }
 
+//病例轨迹
+export function getTrajectorPointOnPeopleById(params) {
+  return request({
+    url: '/guiji/getTrajectoryPointOnPeopleById',
+    method: 'get',
+    params: params
+  });
+}
+
 export function getGeocode(params) {
   return cityGisRequest({
     url: '/citygis-geocode/geocode',
@@ -54,3 +64,31 @@ export function getTrajectorPointOnCarById(params) {
     params: params
   });
 }
+
+//删除轨迹点
+
+export function delTrajectorPointOnPeopleByOId(params) {
+  return request({
+    url: '/guiji/delTrajectorPointOnPeopleByOId',
+    method: 'get',
+    params: params
+  });
+}
+
+//添加轨迹点位
+export function addTrajectorPointOnPeople(data) {
+  return request({
+    url: '/guiji/addTrajectorPointOnPeople',
+    method: 'post',
+    data: data
+  });
+}
+
+//修改轨迹点位
+export function updTrajectorPointOnPeopleByOId(params) {
+  return request({
+    url: '/guiji/updTrajectorPointOnPeopleByOId',
+    method: 'get',
+    params: params
+  });
+}

src/stores/drawPointManage.js

@@ -1,46 +1,12 @@
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 import { defineStore } from 'pinia';
-
+import { addPoint, addPolyLine } from '@/utils/map/mapOperation.js';
 export const useDrawPointStore = defineStore('drawPointStore', () => {
   //当前患者绘制点位列表
-  const currentDrawPointList = ref([
-    {
-      x: 11661.994542328279,
-      y: 4966.256266126279,
-      date: '2023-02-23 19:23',
-      address: '七宝宛平南路测试测试测试'
-    },
-    {
-      x: 12426.364825179011,
-      y: 4463.0456355269,
-      date: '2023-02-23 19:23',
-      address: '七宝宛平南路测试测试测试'
-    },
-    {
-      x: 12413.625223270126,
-      y: 4189.146381366776,
-      date: '2023-02-23 19:23',
-      address: '七宝宛平南路测试测试测试'
-    },
-    {
-      x: 11814.868598898425,
-      y: 3736.8938668183914,
-      date: '2023-02-23 19:23',
-      address: '七宝宛平南路测试测试测试'
-    },
-    {
-      x: 10789.338372212318,
-      y: 3494.8434716386146,
-      date: '2023-02-23 19:23',
-      address: '七宝宛平南路测试测试测试'
-    },
-    {
-      x: 10451.741545883931,
-      y: 3106.288383466594,
-      date: '2023-02-23 19:23',
-      address: '七宝宛平南路测试测试测试'
-    }
-  ]);
+  const currentDrawPointList = ref([]);
+
+  //当前选中点id
+  const currentSelectId = ref('');
 
   //是否开始标会
   const drawStartStatus = ref(false);
@@ -67,9 +33,26 @@ export const useDrawPointStore = defineStore('drawPointStore', () => {
       currentDrawPointList.value[infoBoxIndex.value][key] = value;
     }
   };
+
+  watch(
+    () => currentDrawPointList.value,
+    () => {
+      const pointList = currentDrawPointList.value
+        .filter((item) => {
+          return item.x && item.y;
+        })
+        .sort((pre, next) => new Date(pre.date) - new Date(next.date));
+      addPoint(pointList, 'drawPoint');
+      addPolyLine(pointList, 'drawLine');
+    },
+    {
+      deep: true
+    }
+  );
   return {
     currentDrawPointList,
     infoBoxIndex,
+    currentSelectId,
     setInfoBoxIndex,
     drawStartStatus,
     pushCurrentDrawPointList,

src/stores/mapStore.js

@@ -1,11 +1,11 @@
 import { ref } from 'vue';
-import { defineStore } from 'pinia';
+import { defineStore, mapStores } from 'pinia';
 import {
   addTrajectory,
   addImagePoint,
   addJuHePoint,
   closePoint,
-  playTrajectory,
+  stopTrajectory,
   startBidding
 } from '@/utils/map/mapOperation.js';
 import { useDrawPointStore } from './drawPointManage';
@@ -16,11 +16,22 @@ import {
 } from '@/service/api/mapRequest.js';
 import { color } from 'echarts';
 export const useMapStore = defineStore('mapStore', () => {
-  //当前图例高亮图标列表
+  //当前病例点位列表
   const currentToolSelectArray = ref(['newAdress', 'touch']);
   //当前绘制点位列表
   const drawPointStore = useDrawPointStore();
 
+  // 会商车绘制列表
+  const flowCarList = ref([]);
+
+  const pushFlowCarList = (value) => {
+    flowCarList.value.push(value);
+  };
+
+  const delFlowCarList = () => {
+    flowCarList.value = [];
+  };
+
   //点亮地图工具图标
   const setCurrentToolSelectArray = async (value) => {
     currentToolSelectArray.value.push(value);
@@ -117,10 +128,24 @@ export const useMapStore = defineStore('mapStore', () => {
       startBidding(false);
       closePoint('drawLine');
       closePoint('drawPoint');
+    } else if (value == 'flowCar') {
+      flowCarList.value.forEach((item) => {
+        stopTrajectory(item);
+        closePoint(item);
+      });
+      closePoint(value);
+      delFlowCarList();
     } else {
       closePoint(value);
     }
   };
 
-  return { currentToolSelectArray, setCurrentToolSelectArray, delCurrentToolSelectArray };
+  return {
+    currentToolSelectArray,
+    flowCarList,
+    pushFlowCarList,
+    delFlowCarList,
+    setCurrentToolSelectArray,
+    delCurrentToolSelectArray
+  };
 });

src/utils/map/mapOperation.js

@@ -185,8 +185,8 @@ export function addImagePoint(name, data, params) {
       symbol: {
         type: 'picture-marker',
         url: params.imageUrl,
-        width: '56px',
-        height: '56px'
+        width: '36px',
+        height: '36px'
       }
     },
     labels: [
@@ -328,6 +328,14 @@ export function playTrajectory(id) {
   });
 }
 
+export function stopTrajectory(id) {
+  invokeParams('ShowData', {
+    name: id,
+    mode: 'player',
+    action: 'stop'
+  });
+}
+
 //标绘制线
 export function startBidding(visible = true) {
   invokeParams('userSketch', {

src/views/DataCenterGis/components/LeftMap.vue

@@ -18,10 +18,23 @@
           <el-table-column show-overflow-tooltip label="点位:y" prop="y" min-width="60" />
           <el-table-column show-overflow-tooltip label="时间" prop="date" min-width="60" />
           <el-table-column show-overflow-tooltip label="地点" prop="address" min-width="60" />
-          <el-table-column show-overflow-tooltip label="地点" prop="描述" min-width="60" />
+          <el-table-column show-overflow-tooltip label="描述" prop="described" min-width="60" />
           <el-table-column fixed="right" label="操作" min-width="70">
-            <el-button class="option-button" type="text">查看</el-button>
-            <el-button class="option-button option-button-delete" type="text">删除</el-button>
+            <template #default="scoped">
+              <el-button class="option-button" @click="handleView(scoped)" type="text"
+                >查看</el-button
+              >
+              <el-popconfirm
+                title="确定删除当前轨迹点吗?"
+                cancel-button-text="取消"
+                confirm-button-text="确定"
+                @confirm="handleDelete(scoped)"
+              >
+                <template #reference>
+                  <el-button class="option-button option-button-delete" type="text">删除</el-button>
+                </template>
+              </el-popconfirm>
+            </template>
           </el-table-column>
         </el-table>
       </div>
@@ -68,8 +81,8 @@
           <el-form-item class="index-box" label="序号">
             {{ drawPointStore.infoBoxIndex }}</el-form-item
           >
-          <el-form-item class="index-box" label="姓名"></el-form-item>
-          <el-form-item class="index-box" label="编号"></el-form-item>
+          <!-- <el-form-item class="index-box" label="姓名"></el-form-item>
+          <el-form-item class="index-box" label="编号"></el-form-item> -->
           <el-form-item class="index-box" label="地址">
             <el-input
               v-model="address"
@@ -79,18 +92,25 @@
               placeholder="请输入"
             />
           </el-form-item>
-          <el-form-item class="index-box" label="坐标">
-            <div v-if="drawPointStore.currentDrawPointList[drawPointStore.infoBoxIndex - 1]?.x">
+          <el-form-item class="index-box point-box" label="坐标">
+            <div v-if="drawPointStore.currentDrawPointList[drawPointStore.infoBoxIndex]?.x">
               x:
-              {{ drawPointStore.currentDrawPointList[drawPointStore.infoBoxIndex - 1]?.x || '--' }}
+              {{ drawPointStore.currentDrawPointList[drawPointStore.infoBoxIndex]?.x || '--' }}
             </div>
-            <div v-if="drawPointStore.currentDrawPointList[drawPointStore.infoBoxIndex - 1]?.y">
+            <div v-if="drawPointStore.currentDrawPointList[drawPointStore.infoBoxIndex]?.y">
               y:
-              {{ drawPointStore.currentDrawPointList[drawPointStore.infoBoxIndex - 1]?.y || '--' }}
+              {{ drawPointStore.currentDrawPointList[drawPointStore.infoBoxIndex]?.y || '--' }}
             </div>
+            <!-- <el-button class="modify-buttton" type="primary">修改点位</el-button> -->
           </el-form-item>
           <el-form-item label="时间">
-            <el-date-picker v-model="date" type="datetime" placeholder="请选择时间" />
+            <el-date-picker
+              v-model="date"
+              format="YYYY-MM-DD hh:mm"
+              type="datetime"
+              placeholder="请选择时间"
+              @change="timeSelect"
+            />
           </el-form-item>
           <el-form-item label="描述">
             <el-input
@@ -127,25 +147,41 @@
 <script setup>
 import GisMap from '@/components/map/GisMap.vue';
 import Tools from './Tools.vue';
-import { onMounted, ref } from 'vue';
+import { ref } from 'vue';
 import { useDrawPointStore } from '@/stores/drawPointManage';
 import { useMapStore } from '@/stores/mapStore';
 import { ArrowLeftBold, ArrowRightBold, Search } from '@element-plus/icons-vue';
+import { startOutputPoint, closeOutputPoint, gotoPosition } from '@/utils/map/mapOperation.js';
 import {
-  playTrajectory,
-  startOutputPoint,
-  closeOutputPoint,
-  gotoPosition
-} from '@/utils/map/mapOperation.js';
-import { addCdcDraw, getGeocode } from '@/service/api/mapRequest.js';
+  addTrajectorPointOnPeople,
+  getGeocode,
+  delTrajectorPointOnPeopleByOId,
+  getTrajectorPointOnPeopleById,
+  updTrajectorPointOnPeopleByOId
+} from '@/service/api/mapRequest.js';
+import { ElMessage } from 'element-plus';
+
 const drawPointStore = useDrawPointStore();
 const mapStore = useMapStore();
 const date = ref('');
 const described = ref('');
 const searchParam = ref('');
-const addressInput = ref('');
+const address = ref('');
 
-const timeSelect = (val) => {
+// 定义格式化封装函数
+const formaData = (timer) => {
+  const year = timer.getFullYear();
+  const month = timer.getMonth() + 1; // 由于月份从0开始，因此需加1
+  const day = timer.getDate();
+  const hour = timer.getHours();
+  const minute = timer.getMinutes();
+  const pad = (timeEl, total = 2, str = '0') => {
+    return timeEl.toString().padStart(total, str);
+  };
+  return `${pad(year, 4)}-${pad(month)}-${pad(day)} ${pad(hour)}:${pad(minute)}`;
+};
+const timeSelect = (time) => {
+  const val = formaData(time);
   drawPointStore.modifyCurrentDrawPointList('date', val);
 };
 
@@ -175,19 +211,100 @@ const handleSearch = async () => {
   }
 };
 
+const addressInput = async () => {
+  try {
+    drawPointStore.modifyCurrentDrawPointList('address', address.value);
+    const res = await getGeocode({
+      keyWord: address.value,
+      pageIndex: 1,
+      pageSize: 5
+    });
+    if (res?.result?.length > 0) {
+      drawPointStore.modifyCurrentDrawPointList('x', res.result[0]?.x || '');
+      drawPointStore.modifyCurrentDrawPointList('y', res.result[0]?.y || '');
+      gotoPosition(res.result[0]);
+    } else {
+      console.log('geocode:error');
+    }
+  } catch (error) {
+    console.log(error);
+  }
+};
+
 //是否在修改或新增轨迹点位
 const modifyTrail = ref(false);
-const tableAdd = () => {
+const tableAdd = async () => {
   modifyTrail.value = true;
-  drawPointStore.pushCurrentDrawPointList({
+  startOutputPoint(true);
+  const newTime = new Date();
+  const data = {
+    id: drawPointStore.currentSelectId,
     x: '',
     y: '',
-    date: '',
-    described: ''
+    date: formaData(newTime),
+    described: '',
+    address: ''
+  };
+  //添加新的一条数据
+  drawPointStore.pushCurrentDrawPointList(data);
+  date.value = data.date;
+  drawPointStore.setInfoBoxIndex(drawPointStore.currentDrawPointList.length - 1);
+  //新增
+  try {
+    const res = await addTrajectorPointOnPeople([data]);
+    if (res.code == '200') {
+      ElMessage.success('新增成功');
+    }
+  } catch (error) {
+    console.log(error);
+  }
+};
+
+const handleView = (scope) => {
+  const row = scope.row;
+  const index = scope.$index;
+  drawPointStore.setInfoBoxIndex(index);
+  date.value = drawPointStore.currentDrawPointList[index]?.date || '';
+  address.value = drawPointStore.currentDrawPointList[index]?.address || '';
+  described.value = drawPointStore.currentDrawPointList[index].described || '';
+  modifyTrail.value = true;
+  startOutputPoint(true);
+  gotoPosition({
+    x: row.x,
+    y: row.y
   });
-  drawPointStore.setInfoBoxIndex(drawPointStore.currentDrawPointList.length);
-  //保存接口
-  //addCdcDraw()
+};
+
+//重新获取当前病例列表数据
+const getCurrentData = async () => {
+  const result = await getTrajectorPointOnPeopleById({
+    id: drawPointStore.currentSelectId
+  });
+  if (result.code == 200) {
+    drawPointStore.currentDrawPointList = result.data || [];
+    const index = drawPointStore.currentDrawPointList.length - 1;
+    drawPointStore.setInfoBoxIndex(index);
+  } else {
+    console.log('获取病例轨迹数据错误');
+  }
+};
+
+//删除
+const handleDelete = async (scoped) => {
+  try {
+    const res = await delTrajectorPointOnPeopleByOId({
+      oId: scoped.row.oid
+    });
+    if (res.code == 200) {
+      ElMessage.success('删除成功');
+      getCurrentData();
+    } else {
+      throw 'delTrajectorPointOnPeopleByOId：error';
+    }
+  } catch (error) {
+    ElMessage('删除失败');
+    console.log(error);
+  }
 };
 
 const currentChange = () => {
@@ -197,7 +314,7 @@ const currentChange = () => {
 //搜索框选中点
 const selectPoint = (result) => {
   gotoPosition(result);
-  addressInput.value = result.poiAddress;
+  address.value = result.poiAddress;
 };
 
 const startDrawLine = () => {
@@ -207,28 +324,56 @@ const startDrawLine = () => {
   drawPointStore.setDrawStartStatus(true);
 };
 
-const handleSave = () => {
-  addCdcDraw(drawPointStore.currentDrawPointList);
-  // closeOutputPoint();
+const handleSave = async () => {
+  try {
+    const data = drawPointStore.currentDrawPointList[drawPointStore.infoBoxIndex];
+    data.oId = data.oid;
+    data.address = 76650012223;
+    delete data.oid;
+    const res = await updTrajectorPointOnPeopleByOId(data);
+    if (res.code == 200) {
+      ElMessage.success('修改成功');
+      getCurrentData();
+    } else {
+      ElMessage('修改失败');
+      throw '修改接口错误';
+    }
+  } catch (error) {
+    console.log(error);
+  }
 };
+
 const handleClose = () => {
   modifyTrail.value = false;
-  // closeOutputPoint();
+  closeOutputPoint();
+  getCurrentData();
 };
 
 const lastPoint = () => {
-  if (drawPointStore.infoBoxIndex <= 1) return;
+  //上一点位
+  if (drawPointStore.infoBoxIndex <= 0) return;
   const index = drawPointStore.infoBoxIndex - 1;
   drawPointStore.setInfoBoxIndex(index);
-  date.value = drawPointStore.currentDrawPointList[index - 1]?.date || '';
-  described.value = drawPointStore.currentDrawPointList[index - 1].described || '';
+  date.value = drawPointStore.currentDrawPointList[index]?.date || '';
+  address.value = drawPointStore.currentDrawPointList[index]?.address || '';
+  described.value = drawPointStore.currentDrawPointList[index]?.described || '';
+  gotoPosition({
+    x: drawPointStore.currentDrawPointList[index].x,
+    y: drawPointStore.currentDrawPointList[index].y
+  });
 };
 const nextPoint = () => {
-  if (drawPointStore.infoBoxIndex >= drawPointStore.currentDrawPointList.length) return;
+  //下一点位
+  if (drawPointStore.infoBoxIndex >= drawPointStore.currentDrawPointList.length - 1) return;
   const index = drawPointStore.infoBoxIndex + 1;
   drawPointStore.setInfoBoxIndex(index);
-  date.value = drawPointStore.currentDrawPointList[index - 1]?.date || '';
-  described.value = drawPointStore.currentDrawPointList[index - 1].described || '';
+  date.value = drawPointStore.currentDrawPointList[index]?.date || '';
+  address.value = drawPointStore.currentDrawPointList[index]?.address || '';
+  described.value = drawPointStore.currentDrawPointList[index]?.described || '';
+  gotoPosition({
+    x: drawPointStore.currentDrawPointList[index].x,
+    y: drawPointStore.currentDrawPointList[index].y
+  });
 };
 </script>
 
@@ -293,7 +438,7 @@ const nextPoint = () => {
       padding: 10px 8px;
       bottom: 20px;
       left: 100px;
-      width: 400px;
+      width: 500px;
       height: 350px;
       background: #ffffff;
       box-shadow: 0px 4px 5px #cccccc;
@@ -417,6 +562,14 @@ const nextPoint = () => {
       .index-box {
         margin: 0;
       }
+      .point-box {
+        position: relative;
+        .modify-buttton {
+          height: 30px;
+          padding: 3px 5px;
+          margin-bottom: 10px;
+        }
+      }
 
       .el-form-item__label {
         font-size: 15px;