项目节点

.env.development

@@ -1,2 +1,2 @@
 VITE_BASE_API='/api'
-
+VITE_CityGIS_API='cityGIsApi'

.env.production

@@ -1 +1,2 @@
-VITE_BASE_API=''
+VITE_BASE_API=''
+VITE_CityGIS_API=''

src/components/map/GisMap.vue

@@ -40,10 +40,10 @@ onMounted(() => {
           date: '',
           described: ''
         };
-        drawPointStore.setCurrentDrawPointList(pointInfo);
+        drawPointStore.pushCurrentDrawPointList(pointInfo);
         console.log(index);
         addPoint(drawPointStore.currentDrawPointList, 'drawPoint');
-        if (index > 0) {
+        if (index >= 0) {
           //画线
           addPolyLine(drawPointStore.currentDrawPointList, 'drawLine');
         }

src/service/api/mapRequest.js

@@ -1,4 +1,4 @@
-import { request } from '../request';
+import { request, cityGisRequest } from '../request';
 
 export function getDataByArea() {
   return request({
@@ -29,3 +29,11 @@ export function getTrajectorPointOnPeople(params) {
     params: params
   });
 }
+
+export function getGeocode(params) {
+  return cityGisRequest({
+    url: '/citygis-geocode/geocode',
+    method: 'get',
+    params: params
+  });
+}

src/service/request.js

@@ -19,4 +19,21 @@ request.interceptors.response.use(
   }
 );
 
-export { request };
+const cityGisRequest = axios.create({
+  baseURL: import.meta.env.VITE_CityGIS_API,
+  timeout: 10000
+});
+cityGisRequest.interceptors.request.use((config) => {
+  return config;
+});
+
+cityGisRequest.interceptors.response.use(
+  function (res) {
+    return res.data;
+  },
+  function (error) {
+    return new Error(error);
+  }
+);
+
+export { request, cityGisRequest };

src/stores/drawPointManage.js

@@ -2,8 +2,45 @@ import { ref } from 'vue';
 import { defineStore } from 'pinia';
 
 export const useDrawPointStore = defineStore('drawPointStore', () => {
-  //当前绘制点位列表
-  const currentDrawPointList = ref([]);
+  //当前患者绘制点位列表
+  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 drawStartStatus = ref(false);
@@ -21,7 +58,7 @@ export const useDrawPointStore = defineStore('drawPointStore', () => {
     drawStartStatus.value = value;
   };
 
-  const setCurrentDrawPointList = (point) => {
+  const pushCurrentDrawPointList = (point) => {
     currentDrawPointList.value.push(point);
   };
 
@@ -35,7 +72,7 @@ export const useDrawPointStore = defineStore('drawPointStore', () => {
     infoBoxIndex,
     setInfoBoxIndex,
     drawStartStatus,
-    setCurrentDrawPointList,
+    pushCurrentDrawPointList,
     setDrawStartStatus,
     modifyCurrentDrawPointList
   };

src/utils/map/mapOperation.js

@@ -479,3 +479,19 @@ export function closeOutputPoint() {
     mode: 'stop'
   });
 }
+
+//定位
+export function gotoPosition(point) {
+  invokeParams('goToPosition', {
+    positon: point,
+    heading: 0,
+    tilt: 45,
+    hasImg: true,
+    marker: {
+      size: 16,
+      color: '#000fff'
+    },
+    zoom: 18,
+    isRotation360: false
+  });
+}

src/views/DataCenterGis/components/LeftMap.vue

@@ -7,27 +7,75 @@
       <GisMap />
       <Tools></Tools>
 
-      <div class="table-container">
-        <div class="table-box">
-          <div>坐标</div>
-          <div>地址</div>
-          <div>时间</div>
-          <div>描述</div>
+      <div class="table-container" v-if="mapStore.currentToolSelectArray.includes('Bidding')">
+        <div class="top-box">
+          <span>患者: 张三</span>
+          <span>编号: 00134</span>
+          <el-button class="add-box" type="primary" @click="tableAdd">新增</el-button>
         </div>
-        <div class="table-box"></div>
+        <el-table :data="drawPointStore.currentDrawPointList">
+          <el-table-column show-overflow-tooltip label="点位:x" prop="x" min-width="60" />
+          <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 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>
+          </el-table-column>
+        </el-table>
       </div>
 
-      <div class="info-container" v-if="drawPointStore?.currentDrawPointList?.length > 0">
+      <div class="search-container" v-if="modifyTrail">
+        <div class="search-box">
+          <el-input
+            v-model="searchParam"
+            class="w-50 m-2"
+            size="small"
+            placeholder="请输入"
+            :suffix-icon="Search"
+          />
+          <el-button @click="handleSearch">搜索</el-button>
+        </div>
+        <div class="search-result" v-if="searchData && searchData.length > 0">
+          <div
+            class="search-result-item"
+            v-for="(result, index) in searchData"
+            :key="index"
+            @click="selectPoint(result)"
+          >
+            <el-form>
+              <el-form-item label="类型">{{ result.typeName }}</el-form-item>
+            </el-form>
+            <el-form>
+              <el-form-item label="地址">{{ result.poiAddress }}</el-form-item>
+            </el-form>
+          </div>
+        </div>
+        <div class="search-pagination" v-if="searchTotal > 5">
+          <el-pagination
+            v-model:current-page="searchPageNum"
+            @currentChange="currentChange"
+            layout="prev, pager, next"
+            :total="searchTotal"
+            small
+          />
+        </div>
+      </div>
+
+      <div class="info-container" v-if="modifyTrail">
         <el-form>
           <el-form-item class="index-box" label="序号">
-            {{ drawPointStore.infoBoxIndex + 1 }}</el-form-item
+            {{ drawPointStore.infoBoxIndex }}</el-form-item
           >
           <el-form-item class="index-box" label="坐标">
-            <div v-if="drawPointStore.currentDrawPointList[drawPointStore.infoBoxIndex]?.x">
-              x: {{ drawPointStore.currentDrawPointList[drawPointStore.infoBoxIndex]?.x || '--' }}
+            <div v-if="drawPointStore.currentDrawPointList[drawPointStore.infoBoxIndex - 1]?.x">
+              x:
+              {{ drawPointStore.currentDrawPointList[drawPointStore.infoBoxIndex - 1]?.x || '--' }}
             </div>
-            <div v-if="drawPointStore.currentDrawPointList[drawPointStore.infoBoxIndex]?.y">
-              y: {{ drawPointStore.currentDrawPointList[drawPointStore.infoBoxIndex]?.y || '--' }}
+            <div v-if="drawPointStore.currentDrawPointList[drawPointStore.infoBoxIndex - 1]?.y">
+              y:
+              {{ drawPointStore.currentDrawPointList[drawPointStore.infoBoxIndex - 1]?.y || '--' }}
             </div>
           </el-form-item>
           <el-form-item label="时间">
@@ -60,16 +108,15 @@
         </div>
       </div>
 
-      <div class="info-button" v-if="mapStore.currentToolSelectArray.includes('Bidding')">
-        <el-button type="primary" v-if="!drawPointStore.drawStartStatus" @click="startDrawLine"
+      <div class="info-button" v-if="modifyTrail">
+        <!-- <el-button type="primary" v-if="!drawPointStore.drawStartStatus" @click="startDrawLine"
           >开始画线</el-button
-        >
-        <template v-else-if="drawPointStore.currentDrawPointList.length > 0">
-          <el-button type="success" @click="handleSave">保存并关闭</el-button>
+        > -->
+        <template>
+          <el-button type="success" @click="handleSave">保存</el-button>
           <el-button type="warning" @click="handleClose">关闭</el-button>
         </template>
       </div>
-      <el-button type="warning" @click="handleReplace">替换</el-button>
     </div>
   </div>
 </template>
@@ -80,31 +127,72 @@ import Tools from './Tools.vue';
 import { onMounted, ref } from 'vue';
 import { useDrawPointStore } from '@/stores/drawPointManage';
 import { useMapStore } from '@/stores/mapStore';
-import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue';
+import { ArrowLeftBold, ArrowRightBold, Search } from '@element-plus/icons-vue';
 import {
   playTrajectory,
   startOutputPoint,
   closeOutputPoint,
-  replacePoint
+  gotoPosition
 } from '@/utils/map/mapOperation.js';
-import { addCdcDraw } from '@/service/api/mapRequest.js';
+import { addCdcDraw, getGeocode } from '@/service/api/mapRequest.js';
 const drawPointStore = useDrawPointStore();
 const mapStore = useMapStore();
 const date = ref('');
 const described = ref('');
+const searchParam = ref('');
 
 const timeSelect = (val) => {
   drawPointStore.modifyCurrentDrawPointList('date', val);
 };
 
-const handleReplace = () => {
-  replacePoint([], 'drawPoint');
-};
-
 const textSelect = (val) => {
   drawPointStore.modifyCurrentDrawPointList('described', val);
 };
 
+const searchData = ref([]);
+const searchPageNum = ref(1);
+const searchTotal = ref(0);
+const handleSearch = async () => {
+  try {
+    const res = await getGeocode({
+      keyWord: searchParam.value,
+      pageIndex: searchPageNum.value,
+      pageSize: 5
+    });
+    searchData.value = [];
+    if (res.result) {
+      searchData.value = res.result;
+      searchTotal.value = res.total;
+    } else {
+      console.log('geocode:error');
+    }
+  } catch (error) {
+    console.log(error);
+  }
+};
+
+//是否在修改或新增轨迹点位
+const modifyTrail = ref(false);
+const tableAdd = () => {
+  modifyTrail.value = true;
+  drawPointStore.pushCurrentDrawPointList({
+    x: '',
+    y: '',
+    date: '',
+    described: ''
+  });
+  drawPointStore.setInfoBoxIndex(drawPointStore.currentDrawPointList.length);
+};
+
+const currentChange = () => {
+  handleSearch();
+};
+
+//搜索框选中点
+const selectPoint = (result) => {
+  gotoPosition(result);
+};
+
 const handlePlay = () => {
   playTrajectory();
 };
@@ -125,18 +213,18 @@ const handleClose = () => {
 };
 
 const lastPoint = () => {
-  if (drawPointStore.infoBoxIndex <= 0) return;
+  if (drawPointStore.infoBoxIndex <= 1) return;
   const index = drawPointStore.infoBoxIndex - 1;
   drawPointStore.setInfoBoxIndex(index);
-  date.value = drawPointStore.currentDrawPointList[index]?.date || '';
-  described.value = drawPointStore.currentDrawPointList[index].described || '';
+  date.value = drawPointStore.currentDrawPointList[index - 1]?.date || '';
+  described.value = drawPointStore.currentDrawPointList[index - 1].described || '';
 };
 const nextPoint = () => {
-  if (drawPointStore.infoBoxIndex >= drawPointStore.currentDrawPointList.length - 1) return;
+  if (drawPointStore.infoBoxIndex >= drawPointStore.currentDrawPointList.length) return;
   const index = drawPointStore.infoBoxIndex + 1;
   drawPointStore.setInfoBoxIndex(index);
-  date.value = drawPointStore.currentDrawPointList[index]?.date || '';
-  described.value = drawPointStore.currentDrawPointList[index].described || '';
+  date.value = drawPointStore.currentDrawPointList[index - 1]?.date || '';
+  described.value = drawPointStore.currentDrawPointList[index - 1].described || '';
 };
 </script>
 
@@ -198,11 +286,120 @@ const nextPoint = () => {
 
     .table-container {
       position: absolute;
+      padding: 10px 8px;
       bottom: 20px;
       left: 100px;
       width: 400px;
       height: 350px;
-      background: #cccccc;
+      background: #ffffff;
+      box-shadow: 0px 4px 5px #cccccc;
+      overflow: hidden;
+      .option-button {
+        width: 30px;
+      }
+      .top-box {
+        display: flex;
+        justify-content: flex-start;
+        padding-right: 20px;
+        span {
+          margin-right: 10px;
+        }
+        .add-box {
+          width: 40px;
+          height: 30px;
+          margin-left: auto;
+        }
+      }
+      :deep(.el-table) {
+        height: 100%;
+        .cell {
+          padding: 0;
+        }
+        .el-table__cell {
+          padding: 5px 3px;
+        }
+        .el-button + .el-button {
+          margin-left: 5px;
+        }
+      }
+      .table-row-head,
+      .table-row-box {
+        display: flex;
+        justify-content: space-evenly;
+        align-items: center;
+        height: 25px;
+        font-size: 14px;
+        .table-td {
+          flex: 1;
+          text-align: center;
+        }
+      }
+      .table-row-head {
+        background-color: #dde2eb;
+      }
+      .table-row-box {
+      }
+    }
+
+    :deep(.search-container) {
+      position: absolute;
+      top: 40px;
+      right: 20px;
+      .search-box {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        height: 40px;
+        width: 250px;
+        padding: 10px;
+        background-color: #ffffff;
+        box-shadow: 0px 4px 5px #cccccc;
+        .el-input {
+          width: calc(100% - 40px);
+          height: 25px;
+        }
+        .el-button {
+          width: 40px;
+          height: 25px;
+          border-top-left-radius: 0;
+          border-bottom-left-radius: 0;
+        }
+      }
+      .search-result {
+        height: 300px;
+        width: 250px;
+        background: #ffffff;
+        margin-top: 5px;
+        box-shadow: 0px 3px 5px #cccccc;
+        padding: 10px 15px;
+        overflow-y: auto;
+        scrollbar-width: none;
+        .search-result-item {
+          background: rgb(0, 128, 255, 0.1);
+          margin-bottom: 10px;
+          padding: 10px;
+          .one {
+            font-size: 14px;
+            padding: 3px 7px;
+            color: rgba(63, 63, 63, 1);
+          }
+          .el-form-item {
+            margin: 0;
+            .el-form-item__content,
+            .el-form-item__label {
+              line-height: 1.3;
+            }
+          }
+        }
+      }
+      .search-pagination {
+        width: 250px;
+        padding: 10px;
+        background-color: #ffffff;
+        .el-pagination {
+          width: 250px;
+        }
+      }
     }
     :deep(.info-container) {
       position: absolute;

vite.config.js

@@ -26,6 +26,13 @@ export default defineConfig({
         secure: false,
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/api/, '') //重写匹配的字段，如果不需要放在请求路径上，可以重写为""
+      },
+      '/cityGIsApi': {
+        //apiTest是自行设置的请求前缀，按照这个来匹配请求，有这个字段的请求，就会进到代理来
+        target: 'http://10.1.161.113:18080/', // 需要代理的域名
+        secure: false,
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/cityGIsApi/, '') //重写匹配的字段，如果不需要放在请求路径上，可以重写为""
       }
     }
   },