会商车轨迹

src/components/map/GisMap.vue

@@ -8,8 +8,9 @@
 <script setup>
 import { onMounted } from 'vue';
 import { myBridge } from '@/utils/map/map.js';
-import { addPoint, addPolyLine } from '@/utils/map/mapOperation.js';
+import { addPoint, addPolyLine, addTrajectory, playTrajectory } from '@/utils/map/mapOperation.js';
 import { useDrawPointStore } from '@/stores/drawPointManage';
+import { getTrajectorPointOnCarById } from '@/service/api/mapRequest.js';
 let bridge;
 let listen;
 const drawPointStore = useDrawPointStore();
@@ -26,7 +27,7 @@ onMounted(() => {
     }
   });
 
-  listen = (arg) => {
+  listen = async (arg) => {
     console.log('listen', arg);
     switch (arg.action) {
       case 'getPoint': {
@@ -49,6 +50,25 @@ onMounted(() => {
         }
         break;
       }
+      case 'mapclick': {
+        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);
+              setTimeout(() => {
+                playTrajectory(id);
+              }, 2000);
+            }
+          } catch (error) {
+            console.log(error);
+          }
+        }
+
+        break;
+      }
     }
   };
   //鼠标操作地图监听

src/service/api/mapRequest.js

@@ -37,3 +37,20 @@ export function getGeocode(params) {
     params: params
   });
 }
+
+//获取会商车洒点
+export function getTrajectorPointOnCar() {
+  return request({
+    url: '/guiji/getTrajectorPointOnCar',
+    method: 'get'
+  });
+}
+
+//获取会商车轨迹
+export function getTrajectorPointOnCarById(params) {
+  return request({
+    url: '/guiji/getTrajectorPointOnCarById',
+    method: 'get',
+    params: params
+  });
+}

src/stores/mapStore.js

@@ -9,7 +9,12 @@ import {
   startBidding
 } from '@/utils/map/mapOperation.js';
 import { useDrawPointStore } from './drawPointManage';
-import { getTrajectorPointOnPeople } from '@/service/api/mapRequest.js';
+import {
+  getTrajectorPointOnPeople,
+  getTrajectorPointOnCar,
+  getTrajectorPointOnCarById
+} from '@/service/api/mapRequest.js';
+import { color } from 'echarts';
 export const useMapStore = defineStore('mapStore', () => {
   //当前图例高亮图标列表
   const currentToolSelectArray = ref(['newAdress', 'touch']);
@@ -28,16 +33,26 @@ export const useMapStore = defineStore('mapStore', () => {
         }
         case 'touch': {
           //密接图标
-          addImagePoint(value, {
-            imageUrl: new URL(`@/assets/image/mapTools/2.png`, import.meta.url).href
-          });
+          const res = await getTrajectorPointOnPeople({ type: 1 });
+          if (res?.code == 200) {
+            addJuHePoint(value, res?.data || []);
+          } else {
+            console.log('获取传染病数据错误');
+          }
+          // 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 || []);
+            addJuHePoint(value, res?.data || [], {
+              label: '传染病',
+              color: 'rgba(230, 162, 60, 0.5)',
+              borderColor: 'rgba(230, 162, 60, 1)'
+            });
           } else {
             console.log('获取传染病数据错误');
           }
@@ -48,7 +63,11 @@ export const useMapStore = defineStore('mapStore', () => {
           //发热门诊图标
           const res = await getTrajectorPointOnPeople({ type: 2 });
           if (res?.code == 200) {
-            addJuHePoint(value, res?.data || []);
+            addJuHePoint(value, res?.data || [], {
+              label: '发热门诊',
+              color: 'rgba(245, 108, 108, 0.5)',
+              borderColor: 'rgba(245, 108, 108, 1)'
+            });
           } else {
             console.log('获取发热数据错误');
           }
@@ -56,15 +75,30 @@ export const useMapStore = defineStore('mapStore', () => {
         }
         case 'breathe': {
           //呼吸图标
-          addJuHePoint(value);
+          const res = await getTrajectorPointOnPeople({ type: 3 });
+          if (res?.code == 200) {
+            addJuHePoint(value, res?.data || [], {
+              label: '呼吸数据',
+              color: 'rgba(148, 0, 211, 0.5)',
+              borderColor: 'rgba(148, 0, 211, 1)'
+            });
+          } else {
+            console.log('获取呼吸数据错误');
+          }
           break;
         }
         case 'flowCar': {
+          const res = await getTrajectorPointOnCar();
+          if (res?.code == 200) {
+            addImagePoint(value, res?.data || [], {
+              imageUrl: new URL(`@/assets/image/mapTools/6.png`, import.meta.url).href
+            });
+          }
           //流调会商车图标
-          addTrajectory();
-          setTimeout(() => {
-            playTrajectory();
-          }, 2000);
+          // addTrajectory();
+          // setTimeout(() => {
+          //   playTrajectory();
+          // }, 2000);
           break;
         }
         case 'Bidding': {

src/utils/map/mapOperation.js

@@ -41,7 +41,7 @@ export function addJuHePointSearch() {
  * @param {*} param.imageUrl 打点图标，需要使用new URL(``, import.meta.url).href转为链接
  * @param {*} param.url 数据源接口地址
  */
-export function addJuHePoint(name, data, label) {
+export function addJuHePoint(name, data, params) {
   invokeParams('ShowData', {
     name: name,
     data: {
@@ -52,15 +52,15 @@ export function addJuHePoint(name, data, label) {
     popupEnabled: false,
     renderer: {
       type: 'simple',
-      label: label,
+      label: params?.label || '',
       visualVariables: [],
       symbol: {
         type: 'simple-marker',
         size: 15,
-        color: 'rgba(0,128,255,0.4)',
+        color: params?.color || 'rgba(0,128,255,0.4)',
         outline: {
           width: 0.5,
-          color: '#0080FF'
+          color: params?.borderColor || '#0080FF'
         }
         // type: 'picture-marker',
         // url: new URL(`@/assets/image/mapTools/2.png`, import.meta.url).href,
@@ -169,12 +169,11 @@ export function replacePoint(data, name) {
  * @param {*} param.imageUrl 打点图标，需要使用new URL(``, import.meta.url).href转为链接
  * @param {*} param.url 数据源接口地址
  */
-export function addImagePoint(name, params) {
+export function addImagePoint(name, data, params) {
   invokeParams('ShowData', {
     name: name,
     data: {
-      url: new URL(`@/utils/map/test.json`, import.meta.url).href,
-      parsedata: 'function(d){return d}',
+      content: data,
       parsegeometry: 'function(item){return {x:Number(item.x),y:Number(item.y)}}'
     },
     legendVisible: false,
@@ -211,16 +210,15 @@ export function closePoint(name) {
 }
 
 //轨迹
-export function addTrajectory() {
+export function addTrajectory(data, id) {
   invokeParams('ShowData', {
-    name: 'car_layer1',
+    name: 'car_layer' + id,
     type: 'track',
     isLocate: true,
     data: {
       isComputingRote: false,
-      url: './Data/1212/GPS模拟数据.json',
-      parsedata: 'function(d){return d.data}',
-      parsegeometry: 'function(item){return {x:Number(item.X),y:Number(item.Y)}}'
+      content: data,
+      parsegeometry: 'function(item){return {x:Number(item.x),y:Number(item.y)}}'
     },
     legendVisible: true,
     popupEnabled: true,
@@ -274,12 +272,12 @@ export function addTrajectory() {
 }
 
 //轨迹播放
-export function playTrajectory() {
+export function playTrajectory(id) {
   invokeParams('ShowData', {
-    name: 'car_layer1',
+    name: 'car_layer' + id,
     mode: 'player',
     action: 'play',
-    speed: 20,
+    speed: 60,
     showline: true,
     renderer: {
       type: 'unique-value',
@@ -306,7 +304,7 @@ export function playTrajectory() {
           symbol: {
             type: 'text',
             color: 'black',
-            text: '{{FID}}\r\n{{DATETIME}}\r\n\r\n',
+            text: '{{date}}\r\n\r\n',
             font: {
               size: 10,
               weight: 'bold'
@@ -317,7 +315,7 @@ export function playTrajectory() {
           value: 'marker',
           symbol: {
             type: 'simple-marker',
-            size: 20,
+            size: 10,
             color: 'red',
             outline: {
               width: 0.5,

src/views/DataCenterGis/components/LeftMap.vue

@@ -68,6 +68,17 @@
           <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-input
+              v-model="address"
+              @input="addressInput"
+              autosize
+              type="text"
+              placeholder="请输入"
+            />
+          </el-form-item>
           <el-form-item class="index-box" label="坐标">
             <div v-if="drawPointStore.currentDrawPointList[drawPointStore.infoBoxIndex - 1]?.x">
               x:
@@ -79,13 +90,7 @@
             </div>
           </el-form-item>
           <el-form-item label="时间">
-            <el-input
-              v-model="date"
-              @input="timeSelect"
-              autosize
-              type="text"
-              placeholder="请输入"
-            />
+            <el-date-picker v-model="date" type="datetime" placeholder="请选择时间" />
           </el-form-item>
           <el-form-item label="描述">
             <el-input
@@ -112,10 +117,8 @@
         <!-- <el-button type="primary" v-if="!drawPointStore.drawStartStatus" @click="startDrawLine"
           >开始画线</el-button
         > -->
-        <template>
-          <el-button type="success" @click="handleSave">保存</el-button>
-          <el-button type="warning" @click="handleClose">关闭</el-button>
-        </template>
+        <el-button type="success" @click="handleSave">保存</el-button>
+        <el-button type="warning" @click="handleClose">关闭</el-button>
       </div>
     </div>
   </div>
@@ -140,6 +143,7 @@ const mapStore = useMapStore();
 const date = ref('');
 const described = ref('');
 const searchParam = ref('');
+const addressInput = ref('');
 
 const timeSelect = (val) => {
   drawPointStore.modifyCurrentDrawPointList('date', val);
@@ -182,6 +186,8 @@ const tableAdd = () => {
     described: ''
   });
   drawPointStore.setInfoBoxIndex(drawPointStore.currentDrawPointList.length);
+  //保存接口
+  //addCdcDraw()
 };
 
 const currentChange = () => {
@@ -191,10 +197,7 @@ const currentChange = () => {
 //搜索框选中点
 const selectPoint = (result) => {
   gotoPosition(result);
-};
-
-const handlePlay = () => {
-  playTrajectory();
+  addressInput.value = result.poiAddress;
 };
 
 const startDrawLine = () => {
@@ -206,10 +209,11 @@ const startDrawLine = () => {
 
 const handleSave = () => {
   addCdcDraw(drawPointStore.currentDrawPointList);
-  closeOutputPoint();
+  // closeOutputPoint();
 };
 const handleClose = () => {
-  closeOutputPoint();
+  modifyTrail.value = false;
+  // closeOutputPoint();
 };
 
 const lastPoint = () => {
@@ -311,7 +315,7 @@ const nextPoint = () => {
         }
       }
       :deep(.el-table) {
-        height: 100%;
+        height: calc(100% - 50px);
         .cell {
           padding: 0;
         }

vite.config.js

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