修改车辆监测

ruoyi-ui/src/api/realTimeMonitoring/vehicleMonitoring.js

@@ -4,7 +4,7 @@ import request from '@/utils/request'
 export function getCarGpsList(query) {
     return request({
         url: '/basecar/car/getCarGpsList',
-        method: 'post',
+        method: 'get',
         params: query
     })
 }

ruoyi-ui/src/utils/request.js

@@ -47,6 +47,15 @@ service.interceptors.request.use(config => {
         config.params = {};
         config.url = url;
     }
+    if (config.method === 'post') {
+        config.data = typeof config.data === 'object' ? JSON.stringify({
+            ...config.data,
+            lang
+        }) : JSON.stringify({
+            ...JSON.parse(config.data || '{}'),
+            lang
+        });
+    }
     if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {
         const requestObj = {
             url: config.url,

ruoyi-ui/src/views/realTimeMonitoring/vehicleMonitoring/index.vue

@@ -1,153 +1,52 @@
 <template>
   <div>
-    <el-tree :data="treeData" :props="treeDefaultProps" class="tree" @node-click="treeClick"/>
+    <el-tree :data="treeData" :props="treeDefaultProps" class="tree" @node-click="treeClick" />
     <div id="container"></div>
   </div>
 </template>
 
 <script setup>
 import AMapLoader from '@amap/amap-jsapi-loader';
-import {getCarGpsList, listBasetyre} from '@/api/realTimeMonitoring/vehicleMonitoring'
+import { getCarGpsList, listBasetyre } from '@/api/realTimeMonitoring/vehicleMonitoring'
-
+import { parseTime } from "@/utils/ruoyi";
-const treeData = ref([
+
-  {
+let map = null
-    title: 'Level one 1',
+const treeData = ref([])
-    id: 1,
+const markers = ref([])
-    baseCarList: [
+const treeDefaultProps = { label: 'title', children: 'baseCarList' }
-      {
-        title: 'Level two 1-1',
-        id: 11,
-        baseCarList: [
-          {
-            title: 'Level three 1-1-1',
-            id: 111,
-          },
-        ],
-      },
-    ],
-  },
-  {
-    title: 'Level one 2',
-    baseCarList: [
-      {
-        title: 'Level two 2-1',
-        baseCarList: [
-          {
-            title: 'Level three 2-1-1',
-          },
-        ],
-      },
-      {
-        title: 'Level two 2-2',
-        baseCarList: [
-          {
-            title: 'Level three 2-2-1',
-          },
-        ],
-      },
-    ],
-  },
-  {
-    title: 'Level one 3',
-    baseCarList: [
-      {
-        title: 'Level two 3-1',
-        baseCarList: [
-          {
-            title: 'Level three 3-1-1',
-          },
-        ],
-      },
-      {
-        title: 'Level two 3-2',
-        baseCarList: [
-          {
-            title: 'Level three 3-2-1',
-          },
-        ],
-      },
-    ],
-  },
-])
-const treeDefaultProps = {label: 'title', children: 'baseCarList'}
 const treeClick = (data) => {
-  console.log(data)
+  if (!data.baseCarList) {
-}
+    map.remove(markers.value);
-const mockRequest = () => {
+    markers.value = []
-  return new Promise((resolve, reject) => {
+    setMarker({ id: data.id }, 14)
-    setTimeout(() => {
+  } else {
-      resolve([
+    map.remove(markers.value);
-        {
+    markers.value = []
-          title: '车牌号1',
+    setMarker({ queueId: data.id }, 8)
-          one: '离线',
+  }
-          two: '监控',
-          three: '报警',
-          four: new Date(),
-          location: [116.606315, 44.008775]
-        },
-        {
-          title: '车牌号2',
-          one: '离线',
-          two: '监控',
-          three: '报警',
-          four: new Date(),
-          location: [116.706315, 40.108775]
-        },
-        {
-          title: '车牌号3',
-          one: '离线',
-          two: '监控',
-          three: '报警',
-          four: new Date(),
-          location: [116.806315, 40.208775]
-        },
-      ])
-    }, 2000)
-  })
 }
 
-const setMarker = async () => {
+const setMarker = async (data, zoom) => {
-  const {data: markerArr} = await getCarGpsList()
+  const { data: markerArr } = await getCarGpsList(data)
-  console.log(markerArr)
+  markerArr.forEach((e, index) => {
-  markerArr.forEach(e => {
 
     // 点标记
-    let marker = new AMap.Marker({
+    markers.value[index] = new AMap.Marker({
       content: '<div class="markerIcon" />',
       position: [e.longitude, e.latitude],
       anchor: 'bottom-center',
       offset: new AMap.Pixel(0, 0),
       label: {
         direction: 'top',
-        content: `<div class='info'>${e.carLicense || ''} - <span style="color: ${e.state === 0? 'green">在线':'red">离线'}</span></div><div class='info'>${e.two || ''} ${e.three || ''}</div><div class='info'>${e.laseRuntime || ''}</div>`, //设置文本标注内容
+        content: `<div class='info'>${e.carLicense || ''} - <span style="color: ${e.state === 0 ? 'green">在线' : 'red">离线'}</span></div><div class='info' onClick='function a(i){location.href = (location.origin+location.pathname+"?id="+i)}a("${e.id}")'>监控 ${e.three || ''}</div><div class='info'>${parseTime(e.laseRuntime) || ''}</div>`, //设置文本标注内容
       }
     });
-
-    marker.setMap(map);
   })
+  map.add(markers.value)
+  map.setFitView()
+  map.setZoom(zoom || 8)
 }
 
-const setLine = async () => {
-  let path = [[116.478935, 39.997761], [103.85094, 35.987496], [106.205794, 38.458831], [108.983569, 34.285675], [111.761777, 40.875595]]
-  let polyline = new AMap.Polyline({
-    path: path,
-    showDir: true,
-    strokeColor: '#77DDFF', // 线颜色--浅蓝色
-    strokeWeight: 6, // 线宽
-    lineJoin: 'round', // 折线拐点的绘制样式
-  })
-  let distance = Math.round(AMap.GeometryUtil.distanceOfLine(path));
-  let text = new AMap.Text({
-    position: new AMap.LngLat(path[path.length - 1][0], path[path.length - 1][1]),
-    text: '路径长' + distance + '米',
-    offset: new AMap.Pixel(0, 0)
-  })
-  map.add(text);
-  map.add(polyline);
-}
-
-let map = null
-let path = [[116.478935, 39.997761], [103.85094, 35.987496], [106.205794, 38.458831], [108.983569, 34.285675], [111.761777, 40.875595]]
 
 AMapLoader.load({
   key: "ba8fb8d8bae1b280b93406d5959d492f",             // 申请好的Web端开发者Key，首次调用 load 时必填
@@ -166,30 +65,28 @@ AMapLoader.load({
     center: [116.397428, 39.90923], //初始化地图中心点位置
   });
   await setMarker()
-  await setLine()
 
 
   // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
-  map.addControl(new AMap.ToolBar({position: 'LT'}));
+  map.addControl(new AMap.ToolBar({ position: 'LT' }));
 
   // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
   map.addControl(new AMap.Scale());
 
   // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
-  map.addControl(new AMap.HawkEye({isOpen: true}));
+  map.addControl(new AMap.HawkEye({ isOpen: true }));
 
   // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
   map.addControl(new AMap.MapType());
 
 
-  map.setFitView()
 }).catch(e => {
   console.log(e);
 })
 
 listBasetyre().then(e => {
   let res = JSON.stringify(e.rows)
-  let newObj = JSON.parse(res.replace(/"carLicense":/g,'"title":'))
+  let newObj = JSON.parse(res.replace(/"carLicense":/g, '"title":'))
   treeData.value = newObj
   console.log(newObj)
 })