项目节点

package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "axios": "^1.7.7",
     "echarts": "^5.4.3",
+    "element-plus": "^2.8.3",
     "pinia": "^2.1.7",
     "postcss-px-to-viewport": "^1.1.1",
     "sass": "^1.79.1",

src/components/map/GisMap.vue

@@ -8,11 +8,11 @@
 <script setup>
 import { onMounted } from 'vue';
 import { myBridge } from '@/utils/map/map.js';
-import { addPoint, addPolyLine, juHe } from '@/utils/map/mapOperation.js';
+import { addPoint, addPolyLine } from '@/utils/map/mapOperation.js';
 import { useDrawPointStore } from '@/stores/drawPointManage';
 let bridge;
 let listen;
-// const drawPoint = useDrawPointStore();
+const drawPointStore = useDrawPointStore();
 onMounted(() => {
   myBridge.bridgeContent = bridge = new CityGis.Bridge({
     id: 'map',
@@ -21,19 +21,32 @@ onMounted(() => {
       console.log('ready');
       //默认加载
 
-      // addPoint('newAdress');
-      // addPoint('touch');
+      // addJuHePoint('newAdress');
+      // addJuHePoint('touch');
     }
   });
 
   listen = (arg) => {
     console.log('listen', arg);
     switch (arg.action) {
-      case 'userSketch': {
-        const data = arg?.data?.graphic?.geometry?.paths || [];
-
-        //保存数据
-        addPolyLine();
+      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.setCurrentDrawPointList(pointInfo);
+        console.log(index);
+        addPoint(drawPointStore.currentDrawPointList, 'drawPoint');
+        if (index > 0) {
+          //画线
+          addPolyLine(drawPointStore.currentDrawPointList, 'drawLine');
+        }
         break;
       }
     }

src/main.js

@@ -1,14 +1,17 @@
-import './assets/main.css'
+import './assets/main.css';
 
-import { createApp } from 'vue'
-import { createPinia } from 'pinia'
+import { createApp } from 'vue';
+import { createPinia } from 'pinia';
 
-import App from './App.vue'
-import router from './router'
+import App from './App.vue';
+import router from './router';
+import ElementPlus from 'element-plus';
+import 'element-plus/dist/index.css';
 
-const app = createApp(App)
+const app = createApp(App);
 
-app.use(createPinia())
-app.use(router)
+app.use(createPinia());
+app.use(router);
+app.use(ElementPlus);
 
-app.mount('#app')
+app.mount('#app');

src/service/api/mapRequest.js

@@ -13,3 +13,19 @@ export function getHistogramData() {
     method: 'get'
   });
 }
+
+export function addCdcDraw(data) {
+  return request({
+    url: '/code/cdc-draw-lines/addCdcDraw',
+    method: 'post',
+    data: data
+  });
+}
+
+export function getTrajectorPointOnPeople(params) {
+  return request({
+    url: '/guiji/getTrajectorPointOnPeople',
+    method: 'get',
+    params: params
+  });
+}

src/stores/drawPointManage.js

@@ -3,11 +3,40 @@ import { defineStore } from 'pinia';
 
 export const useDrawPointStore = defineStore('drawPointStore', () => {
   //当前绘制点位列表
-  const currentDrawPoint = ref([]);
+  const currentDrawPointList = ref([]);
 
   //是否开始标会
-  const drawStartStatus = ref(true);
+  const drawStartStatus = ref(false);
 
-  const setCurrentDrawPoint = () => {};
-  return { currentDrawPoint, drawStartStatus };
+  //信息框当前展示点位index
+  const infoBoxIndex = ref(0);
+
+  //修改当前展示点位index
+  const setInfoBoxIndex = (index) => {
+    infoBoxIndex.value = index;
+  };
+
+  //修改是否开始绘制状态
+  const setDrawStartStatus = (value) => {
+    drawStartStatus.value = value;
+  };
+
+  const setCurrentDrawPointList = (point) => {
+    currentDrawPointList.value.push(point);
+  };
+
+  const modifyCurrentDrawPointList = (key, value) => {
+    if (currentDrawPointList.value[infoBoxIndex.value]) {
+      currentDrawPointList.value[infoBoxIndex.value][key] = value;
+    }
+  };
+  return {
+    currentDrawPointList,
+    infoBoxIndex,
+    setInfoBoxIndex,
+    drawStartStatus,
+    setCurrentDrawPointList,
+    setDrawStartStatus,
+    modifyCurrentDrawPointList
+  };
 });

src/stores/mapStore.js

@@ -3,64 +3,76 @@ import { defineStore } from 'pinia';
 import {
   addTrajectory,
   addImagePoint,
-  addPoint,
+  addJuHePoint,
   closePoint,
   playTrajectory,
-  startBidding,
-  juHe
+  startBidding
 } from '@/utils/map/mapOperation.js';
-
+import { useDrawPointStore } from './drawPointManage';
+import { getTrajectorPointOnPeople } from '@/service/api/mapRequest.js';
 export const useMapStore = defineStore('mapStore', () => {
   //当前图例高亮图标列表
   const currentToolSelectArray = ref(['newAdress', 'touch']);
   //当前绘制点位列表
-  const currentDrawPoint = ref([]);
+  const drawPointStore = useDrawPointStore();
 
   //点亮地图工具图标
-  const setCurrentToolSelectArray = (value) => {
+  const setCurrentToolSelectArray = async (value) => {
     currentToolSelectArray.value.push(value);
-    switch (value) {
-      case 'newAdress': {
-        //新址图标
-        addPoint(value);
-        break;
-      }
-      case 'touch': {
-        //密接图标
-        addImagePoint(value, {
-          imageUrl: new URL(`@/assets/image/mapTools/2.png`, import.meta.url).href
-        });
-        break;
-      }
-      case 'infectious': {
-        //传染病图标
-        addPoint(value);
-        break;
-      }
-      case 'feverClinic': {
-        //发热门诊图标
-        addPoint(value);
-        break;
-      }
-      case 'breathe': {
-        //呼吸图标
-        addPoint(value);
-        break;
-      }
-      case 'flowCar': {
-        //流调会商车图标
-        addTrajectory();
-        setTimeout(() => {
-          playTrajectory();
-        }, 1000);
-        break;
-      }
-      case 'Bidding': {
-        //标会工具
-        // startBidding(true);
-        startBidding(true);
-        break;
+    try {
+      switch (value) {
+        case 'newAdress': {
+          //新址图标
+          addJuHePoint(value);
+          break;
+        }
+        case 'touch': {
+          //密接图标
+          addImagePoint(value, {
+            imageUrl: new URL(`@/assets/image/mapTools/2.png`, import.meta.url).href
+          });
+          break;
+        }
+        case 'infectious': {
+          //传染病图标
+          const res = await getTrajectorPointOnPeople({ type: 1 });
+          if (res?.code == 200) {
+            addJuHePoint(value, res?.data || []);
+          } else {
+            console.log('获取传染病数据错误');
+          }
+
+          break;
+        }
+        case 'feverClinic': {
+          //发热门诊图标
+          const res = await getTrajectorPointOnPeople({ type: 2 });
+          if (res?.code == 200) {
+            addJuHePoint(value, res?.data || []);
+          } else {
+            console.log('获取发热数据错误');
+          }
+          break;
+        }
+        case 'breathe': {
+          //呼吸图标
+          addJuHePoint(value);
+          break;
+        }
+        case 'flowCar': {
+          //流调会商车图标
+          addTrajectory();
+          setTimeout(() => {
+            playTrajectory();
+          }, 2000);
+          break;
+        }
+        case 'Bidding': {
+          break;
+        }
       }
+    } catch (error) {
+      console.log(error);
     }
   };
 
@@ -69,6 +81,8 @@ export const useMapStore = defineStore('mapStore', () => {
     currentToolSelectArray.value = currentToolSelectArray.value.filter((item) => item != value);
     if (value == 'Bidding') {
       startBidding(false);
+      closePoint('drawLine');
+      closePoint('drawPoint');
     } else {
       closePoint(value);
     }

src/utils/map/mapOperation.js

@@ -20,14 +20,14 @@ export function invokeParamsMap(mapId, ActionName, params) {
     }
   });
 }
-export function addPointSearchFun(mapId) {
+export function addJuHePointSearchFun(mapId) {
   invokeParamsMap(mapId, 'MapClickAll', {
     status: true,
     is_draw: true,
     is_code: false
   });
 }
-export function addPointSearch() {
+export function addJuHePointSearch() {
   invokeParams('MapClickAll', {
     status: true,
     is_draw: true,
@@ -41,23 +41,22 @@ export function addPointSearch() {
  * @param {*} param.imageUrl 打点图标，需要使用new URL(``, import.meta.url).href转为链接
  * @param {*} param.url 数据源接口地址
  */
-export function addPoint(name) {
+export function addJuHePoint(name, data, label) {
   invokeParams('ShowData', {
     name: name,
     data: {
-      url: './Data/area.json',
-      parsedata: 'function(d){return d}',
+      content: data,
       parsegeometry: 'function(item){return {x:Number(item.x),y:Number(item.y)}}'
     },
     legendVisible: false,
     popupEnabled: false,
     renderer: {
       type: 'simple',
-      label: '测试车辆',
+      label: label,
       visualVariables: [],
       symbol: {
         type: 'simple-marker',
-        size: 30,
+        size: 15,
         color: 'rgba(0,128,255,0.4)',
         outline: {
           width: 0.5,
@@ -71,7 +70,7 @@ export function addPoint(name) {
     },
     featureReduction: {
       type: 'cluster',
-      clusterRadius: '100px',
+      clusterRadius: '150px',
       popupTemplate: {
         title: 'Cluster summary',
         content: 'This cluster represents {cluster_count} earthquakes.',
@@ -85,8 +84,8 @@ export function addPoint(name) {
           }
         ]
       },
-      clusterMinSize: '24px',
-      clusterMaxSize: '60px',
+      clusterMinSize: '20px',
+      clusterMaxSize: '50px',
       labelingInfo: [
         {
           deconflictionStrategy: 'none',
@@ -109,6 +108,61 @@ export function addPoint(name) {
   });
 }
 
+// 简单打点
+export function addPoint(data, name) {
+  invokeParams('ShowData', {
+    name: name,
+    data: {
+      content: data,
+      parsegeometry: 'function(item){return {x:Number(item.x),y:Number(item.y)}}'
+    },
+    legendVisible: false,
+    popupEnabled: false,
+    renderer: {
+      type: 'simple',
+      label: '测试车辆',
+      visualVariables: [],
+      symbol: {
+        type: 'simple-marker',
+        size: 10,
+        color: 'rgba(0,128,255,0.4)',
+        outline: {
+          width: 0.5,
+          color: '#0080FF'
+        }
+      }
+    }
+  });
+}
+
+// 简单打点
+export function replacePoint(data, name) {
+  invokeParams('ShowData', {
+    name: name,
+    mode: 'replace',
+    data: {
+      content: data,
+      parsegeometry: 'function(item){return {x:Number(item.x),y:Number(item.y)}}'
+    },
+    legendVisible: false,
+    popupEnabled: false,
+    renderer: {
+      type: 'simple',
+      label: '测试车辆',
+      visualVariables: [],
+      symbol: {
+        type: 'simple-marker',
+        size: 10,
+        color: 'rgba(0,128,255,0.4)',
+        outline: {
+          width: 0.5,
+          color: '#0080FF'
+        }
+      }
+    }
+  });
+}
+
 /**
  * 带图标打点
  * @param {*} name 打点方法name，关闭时可做标识用
@@ -147,7 +201,7 @@ export function addImagePoint(name, params) {
   });
 }
 
-//电线面隐藏
+//点线面隐藏
 export function closePoint(name) {
   invokeParams('ShowData', {
     name: name,
@@ -282,6 +336,7 @@ export function startBidding(visible = true) {
     type: 'point', //'point',
     visible: visible,
     isTools: true,
+    isLocate: true,
     position: 'top-right',
     activeSymbol: {
       type: 'simple-marker',
@@ -296,12 +351,12 @@ export function startBidding(visible = true) {
 }
 
 //画线
-export function addPolyLine(data) {
+export function addPolyLine(data, name) {
   invokeParams('ShowData', {
-    name: 'car_layer1',
+    name: name || 'layer1',
     type: 'polyline',
     data: {
-      url: data,
+      content: data,
       parsegeometry: "function(item){return [Number(item['x']), Number(item['y'])]}"
     },
     legendVisible: false,
@@ -317,7 +372,7 @@ export function addPolyLine(data) {
             type: 'line',
             size: 2,
             material: {
-              color: 'black'
+              color: 'red'
             },
             cap: 'round',
             join: 'round'
@@ -398,3 +453,29 @@ export function addArcgisMap() {
     type: 'wmts'
   });
 }
+
+//开始输出点坐标点
+export function startOutputPoint() {
+  invokeParams('outputClickPosition', {
+    type: 'position',
+    mode: 'start',
+    popupEnabled: false,
+    symbol: {
+      type: 'simple-marker',
+      size: 6,
+      color: 'black',
+      outline: {
+        width: 0.5,
+        color: 'white'
+      }
+    }
+  });
+}
+
+//关闭输出点坐标
+export function closeOutputPoint() {
+  invokeParams('outputClickPosition', {
+    type: 'position',
+    mode: 'stop'
+  });
+}

src/views/DataCenterGis/components/LeftMap.vue

@@ -6,6 +6,70 @@
     <div class="map-container">
       <GisMap />
       <Tools></Tools>
+
+      <div class="table-container">
+        <div class="table-box">
+          <div>坐标</div>
+          <div>地址</div>
+          <div>时间</div>
+          <div>描述</div>
+        </div>
+        <div class="table-box"></div>
+      </div>
+
+      <div class="info-container" v-if="drawPointStore?.currentDrawPointList?.length > 0">
+        <el-form>
+          <el-form-item class="index-box" label="序号">
+            {{ drawPointStore.infoBoxIndex + 1 }}</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>
+            <div v-if="drawPointStore.currentDrawPointList[drawPointStore.infoBoxIndex]?.y">
+              y: {{ drawPointStore.currentDrawPointList[drawPointStore.infoBoxIndex]?.y || '--' }}
+            </div>
+          </el-form-item>
+          <el-form-item label="时间">
+            <el-input
+              v-model="date"
+              @input="timeSelect"
+              autosize
+              type="text"
+              placeholder="请输入"
+            />
+          </el-form-item>
+          <el-form-item label="描述">
+            <el-input
+              v-model="described"
+              @input="textSelect"
+              autosize
+              type="textarea"
+              placeholder="请输入"
+            />
+          </el-form-item>
+        </el-form>
+        <div class="point-pagination">
+          <span class="left" @click="lastPoint">
+            <el-icon><ArrowLeftBold /></el-icon>上一点位
+          </span>
+
+          <span class="right" @click="nextPoint">
+            下一点位<el-icon><ArrowRightBold /></el-icon>
+          </span>
+        </div>
+      </div>
+
+      <div class="info-button" v-if="mapStore.currentToolSelectArray.includes('Bidding')">
+        <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>
+          <el-button type="warning" @click="handleClose">关闭</el-button>
+        </template>
+      </div>
+      <el-button type="warning" @click="handleReplace">替换</el-button>
     </div>
   </div>
 </template>
@@ -13,6 +77,67 @@
 <script setup>
 import GisMap from '@/components/map/GisMap.vue';
 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 {
+  playTrajectory,
+  startOutputPoint,
+  closeOutputPoint,
+  replacePoint
+} from '@/utils/map/mapOperation.js';
+import { addCdcDraw } from '@/service/api/mapRequest.js';
+const drawPointStore = useDrawPointStore();
+const mapStore = useMapStore();
+const date = ref('');
+const described = ref('');
+
+const timeSelect = (val) => {
+  drawPointStore.modifyCurrentDrawPointList('date', val);
+};
+
+const handleReplace = () => {
+  replacePoint([], 'drawPoint');
+};
+
+const textSelect = (val) => {
+  drawPointStore.modifyCurrentDrawPointList('described', val);
+};
+
+const handlePlay = () => {
+  playTrajectory();
+};
+
+const startDrawLine = () => {
+  //标会工具，使用坐标点输出来做
+  startOutputPoint(true);
+  //开始画线
+  drawPointStore.setDrawStartStatus(true);
+};
+
+const handleSave = () => {
+  addCdcDraw(drawPointStore.currentDrawPointList);
+  closeOutputPoint();
+};
+const handleClose = () => {
+  closeOutputPoint();
+};
+
+const lastPoint = () => {
+  if (drawPointStore.infoBoxIndex <= 0) return;
+  const index = drawPointStore.infoBoxIndex - 1;
+  drawPointStore.setInfoBoxIndex(index);
+  date.value = drawPointStore.currentDrawPointList[index]?.date || '';
+  described.value = drawPointStore.currentDrawPointList[index].described || '';
+};
+const nextPoint = () => {
+  if (drawPointStore.infoBoxIndex >= drawPointStore.currentDrawPointList.length - 1) return;
+  const index = drawPointStore.infoBoxIndex + 1;
+  drawPointStore.setInfoBoxIndex(index);
+  date.value = drawPointStore.currentDrawPointList[index]?.date || '';
+  described.value = drawPointStore.currentDrawPointList[index].described || '';
+};
 </script>
 
 <style lang="scss" scoped>
@@ -40,6 +165,68 @@ import Tools from './Tools.vue';
     width: 1045px;
     height: 976px;
     margin-top: 27px;
+
+    .info-button {
+      position: absolute;
+      background-color: #cccccc;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 250px;
+      height: 45px;
+      bottom: 20px;
+      right: 10px;
+    }
+    .info-button-play {
+      width: 100px;
+    }
+    .point-pagination {
+      color: #0080ff;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 10px;
+      .left,
+      .right {
+        .el-icon {
+          position: relative;
+          top: 2px;
+          margin: 5px;
+        }
+      }
+    }
+
+    .table-container {
+      position: absolute;
+      bottom: 20px;
+      left: 100px;
+      width: 400px;
+      height: 350px;
+      background: #cccccc;
+    }
+    :deep(.info-container) {
+      position: absolute;
+      background-color: #cccccc;
+      padding: 10px;
+      font-size: 16px;
+      width: 250px;
+      bottom: 65px;
+      right: 10px;
+
+      .index-box {
+        margin: 0;
+      }
+
+      .el-form-item__label {
+        font-size: 15px;
+        width: 45px;
+      }
+      input,
+      textarea {
+        height: unset !important;
+        min-height: unset !important;
+      }
+    }
   }
 }
 </style>

src/views/DataCenterGis/components/Tools.vue

@@ -16,37 +16,37 @@ const mapStore = useMapStore();
 const toolsOptions = [
   {
     id: 'newAdress',
-    name: '新址图标',
+    name: '新址',
     image: new URL(`@/assets/image/mapTools/newAdress.png`, import.meta.url).href,
     activeImage: new URL(`@/assets/image/mapTools/newAddressActive.png`, import.meta.url).href
   },
   {
     id: 'touch',
-    name: '密接图标',
+    name: '密接',
     image: new URL(`@/assets/image/mapTools/2.png`, import.meta.url).href,
     activeImage: new URL(`@/assets/image/mapTools/2-1.png`, import.meta.url).href
   },
   {
     id: 'infectious',
-    name: '传染病图标',
+    name: '传染病',
     image: new URL(`@/assets/image/mapTools/3.png`, import.meta.url).href,
     activeImage: new URL(`@/assets/image/mapTools/3-1.png`, import.meta.url).href
   },
   {
     id: 'feverClinic',
-    name: '发热门诊图标',
+    name: '发热门诊',
     image: new URL(`@/assets/image/mapTools/4.png`, import.meta.url).href,
     activeImage: new URL(`@/assets/image/mapTools/4-1.png`, import.meta.url).href
   },
   {
     id: 'breathe',
-    name: '呼吸图标',
+    name: '呼吸',
     image: new URL(`@/assets/image/mapTools/5.png`, import.meta.url).href,
     activeImage: new URL(`@/assets/image/mapTools/5-1.png`, import.meta.url).href
   },
   {
     id: 'flowCar',
-    name: '流调会商车图标',
+    name: '流调会商车',
     image: new URL(`@/assets/image/mapTools/6.png`, import.meta.url).href,
     activeImage: new URL(`@/assets/image/mapTools/6-1.png`, import.meta.url).href
   },