重点车辆调整

src/api/globalMap/KeyVehicles.ts

@@ -10,13 +10,13 @@ export const getVehicleList = (data) => {
 };
 
 // 轨迹信息
-export const getVehicleTrajectory = (id) => {
+export const getVehicleTrajectory = (vehicle_no) => {
   return request({
     url: '/api/gateway/v2/get_vehicle_trajectory',
     method: 'post',
     data: {
       query: {
-        vehicle_no: id
+        vehicle_no: vehicle_no
       }
     }
   });

src/api/inspectionWork/inspector.ts

@@ -31,11 +31,10 @@ export function inspectorDetail(id) {
   });
 }
 // 查询区划树
-export function inspectorDivision(params) {
+export function inspectorDivision() {
   return request({
     url: '/api/riskManagement/allAreas',
-    method: 'get',
-    params: params
+    method: 'get'
   });
 }
 export function inspectorUpload(data) {

src/hooks/AMap/useAMap.ts

@@ -410,14 +410,14 @@ export function useAMap(options) {
     moveMarker?.remove();
     let index = 0;
     const icon = new AMap.Icon({
-      size: new AMap.Size(26, 52),
+      size: new AMap.Size(13, 26),
       image: carImg
     });
     moveMarker = new AMap.Marker({
       map: map,
-      position: [116.478935, 39.997761],
+      position: lineArr[0],
       icon: icon,
-      offset: new AMap.Pixel(-13, -26)
+      anchor: 'center'
     });
     // 绘制轨迹
     movePolyline = new AMap.Polyline({
@@ -441,22 +441,23 @@ export function useAMap(options) {
       map.setCenter(e.target.getPosition(), true);
     });
 
-    moveMarker.on('moveend', function (e) {
-      index++;
-      if (index === lineArr.length - 1) {
-        timerId = setTimeout(() => {
-          movePolyline.remove();
-          movePassedPolyline.remove();
-          moveMarker.remove();
-        }, 5000);
-      }
-    });
+    // moveMarker.on('moveend', function (e) {
+    //   index++;
+    //   if (index === lineArr.length - 1) {
+    //     timerId = setTimeout(() => {
+    //       movePolyline.remove();
+    //       movePassedPolyline.remove();
+    //       moveMarker.remove();
+    //     }, 5000);
+    //   }
+    // });
     moveMarker.moveAlong(lineArr, {
       // 每一段的时长
       duration: 1000, //可根据实际采集时间间隔设置
       // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
       autoRotation: true
     });
+    return [movePolyline, movePassedPolyline, moveMarker];
   };
 
   const drawData = (data) => {

src/types/components.d.ts

@@ -27,7 +27,6 @@ declare module 'vue' {
     ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
     ElBadge: typeof import('element-plus/es')['ElBadge']
     ElButton: typeof import('element-plus/es')['ElButton']
-    ElCard: typeof import('element-plus/es')['ElCard']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCheckboxButton: typeof import('element-plus/es')['ElCheckboxButton']
     ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
@@ -35,8 +34,6 @@ declare module 'vue' {
     ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
-    ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
-    ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDivider: typeof import('element-plus/es')['ElDivider']
     ElDrawer: typeof import('element-plus/es')['ElDrawer']
@@ -49,6 +46,7 @@ declare module 'vue' {
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
+    ElLink: typeof import('element-plus/es')['ElLink']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
@@ -86,6 +84,7 @@ declare module 'vue' {
     HikvisionPlayer: typeof import('./../components/HKVideo/hikvision-player.vue')['default']
     HKVideo: typeof import('./../components/HKVideo/index.vue')['default']
     IconSelect: typeof import('./../components/IconSelect/index.vue')['default']
+    IEpUploadFilled: typeof import('~icons/ep/upload-filled')['default']
     IFrame: typeof import('./../components/iFrame/index.vue')['default']
     ImagePreview: typeof import('./../components/ImagePreview/index.vue')['default']
     ImageUpload: typeof import('./../components/ImageUpload/index.vue')['default']

src/utils/olMap/olMap.ts

@@ -91,6 +91,8 @@ export class olMap {
   private carLayer;
   private carFeature;
   private traceFeature;
+  // 自定义绘制结束调用方法
+  private drawEndMethod;
 
   constructor(options) {
     this.options = options;
@@ -700,19 +702,19 @@ export class olMap {
         })
       });
       this.map.addLayer(this.maskLayer2);
-      // this.maskLayer = new VectorLayer({
-      //   source: new VectorSource(),
-      //   style: new Style({
-      //     fill: new Fill({
-      //       color: options.fillColor ? options.fillColor : 'rgba(16, 36, 59, 0.65)'
-      //     }),
-      //     stroke: new Stroke({
-      //       color: options.strokeColor ? options.strokeColor : 'rgba(38, 138, 185, 1)',
-      //       width: 2
-      //     })
-      //   }),
-      //   zIndex: options.zIndex ? options.zIndex : 99
-      // });
+      this.maskLayer = new VectorLayer({
+        source: new VectorSource(),
+        style: new Style({
+          fill: new Fill({
+            color: options.fillColor ? options.fillColor : 'rgba(16, 36, 59, 0.65)'
+          }),
+          stroke: new Stroke({
+            color: options.strokeColor ? options.strokeColor : 'rgba(38, 138, 185, 1)',
+            width: 2
+          })
+        }),
+        zIndex: options.zIndex ? options.zIndex : 99
+      });
       // // 合并区边界
       // const format = new GeoJSON();
       // const data2 = mergeGeoJsonPolygons(json);
@@ -988,8 +990,9 @@ export class olMap {
     const icon = new Icon({
       crossOrigin: 'anonymous',
       src: carImg,
-      width: 26,
-      height: 52,
+      width: 13,
+      height: 26,
+      anchor: [0.5, 0.5],
       rotation: angle
     });
     this.carFeature.setStyle(
@@ -1005,7 +1008,7 @@ export class olMap {
       source: source,
       style: new Style({
         stroke: new Stroke({
-          color: 'rgb(37,232,142)',
+          color: '#AF5',
           width: 5
         })
       })
@@ -1046,6 +1049,7 @@ export class olMap {
     // 触发地图渲染
     const geo = this.carFeature.getGeometry().clone();
     this.carFeature.setGeometry(geo);
+    return [this.carLayer];
   }
   drawData(data) {
     const res = [];
@@ -1110,9 +1114,7 @@ export class olMap {
           const height = img.height;
           const style = new Style({
             image: new Icon({
-              anchor: [0.5, 0.5],
-              anchorXUnits: 'fraction',
-              anchorYUnits: 'pixels',
+              anchor: [0.5, 1],
               src: item.icon,
               size: [width, height],
               scale: !!item.size[0] ? item.size[0] / width : 1
@@ -1149,4 +1151,7 @@ export class olMap {
   getMouseTool() {
     return this.drawTool;
   }
+  setDrawEndMethod(newMethod) {
+    this.drawEndMethod = newMethod;
+  }
 }

src/views/globalMap/RightMenu/FixedPointAnalysis.vue

@@ -100,7 +100,6 @@ import startImg from '@/assets/images/map/start.png';
 import endImg from '@/assets/images/map/end.png';
 
 interface Props {
-  modelValue: boolean;
   location?: string | number[];
   activeMap: string;
 }
@@ -108,7 +107,6 @@ const AMapType = ['vectorgraph', 'satellite'];
 const props = withDefaults(defineProps<Props>(), {});
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { emergency_resource, disaster_relief_material } = toRefs<any>(proxy?.useDict('emergency_resource', 'disaster_relief_material'));
-const emits = defineEmits(['update:modelValue']);
 import gcoord from 'gcoord';
 import Icon from 'ol/style/Icon';
 import Feature from 'ol/Feature';

src/views/globalMap/RightMenu/KeyVehicles.vue

@@ -38,9 +38,13 @@
 
 <script setup lang="ts">
 import { Search } from '@element-plus/icons-vue';
-import { getVehicleList, getVehicleTrajectory } from "@/api/globalMap/KeyVehicles";
-import { onMounted, reactive } from 'vue';
+import { getVehicleList, getVehicleTrajectory } from '@/api/globalMap/KeyVehicles';
+
+const AMapType = ['vectorgraph', 'satellite'];
 const trackPlayback = inject('trackPlayback');
+const props = defineProps({
+  activeMap: String
+});
 // 数据列表,直接定义为数组
 const dataList = reactive([]);
 //入参
@@ -73,19 +77,32 @@ const handleCancel = () => {
 const handleConnect = () => {};
 const handleCollaborate = () => {};
 // 轨迹
+let obj = [];
 const handleTrack = (item) => {
   getVehicleTrajectory(item.vehicle_no).then((res) => {
     const trajectory = [];
     res.rows.forEach((item) => {
       trajectory.push([item.lng, item.lat]);
     });
-    trackPlayback(trajectory);
+    obj = trackPlayback(trajectory);
   });
 };
 //调用函数
 onMounted(() => {
   initData();
 });
+onUnmounted(() => {
+  if (AMapType.includes(props.activeMap)) {
+    obj.forEach((item) => {
+      item.remove();
+    });
+  } else {
+    const source = obj[0].getSource();
+    if (source) {
+      source.clear();
+    }
+  }
+});
 </script>
 
 <style lang="scss" scoped>

src/views/globalMap/RightMenu/OnlinePlotting/EditClassDialog.vue

@@ -17,10 +17,10 @@
       <el-form-item label="图标:" label-width="80px" prop="fileList">
         <FileUpload v-model="form.fileList" :file-type="['jpg', 'jpeg', 'png']" :limit="1" :file-size="20" :is-show-tip="false" class="upload-box" />
       </el-form-item>
-      <el-form-item label="图标宽度:" label-width="80px" prop="size.0">
+      <el-form-item v-if="form.value === 'marker'" label="图标宽度:" label-width="80px" prop="size.0">
         <el-input v-model="form.size[0]" class="custom-input2" placeholder="请输入图标宽度" />
       </el-form-item>
-      <el-form-item label="图标高度:" label-width="80px" prop="size.1">
+      <el-form-item v-if="form.value === 'marker'" label="图标高度:" label-width="80px" prop="size.1">
         <el-input v-model="form.size[1]" class="custom-input2" placeholder="请输入图标高度" />
       </el-form-item>
       <el-form-item label="排序:" label-width="80px" prop="order_num">

src/views/globalMap/RightMenu/index.vue

@@ -67,7 +67,7 @@
         <!--交通视频-->
         <TrafficVideo v-if="menuState.menuData[menuState.activeIndex]?.name === '交通视频'" @handle-menu="handleMenu" />
         <!--交通局视频-->
-        <tranBureauVideo  v-if="menuState.menuData[menuState.activeIndex]?.name === '交通局视频'" @handle-menu="handleMenu" />
+        <tranBureauVideo v-if="menuState.menuData[menuState.activeIndex]?.name === '交通局视频'" @handle-menu="handleMenu" />
         <!--易涝隐患点-->
         <PotentialFloodHazard
           v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '易涝隐患点'"
@@ -78,7 +78,11 @@
         <!--手机工作平台-->
         <MobilePlatform v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '手机工作台'" @handle-menu="handleMenu" />
         <!--重点车辆-->
-        <KeyVehicles v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '重点车辆'" @handle-menu="handleMenu" />
+        <KeyVehicles
+          v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '重点车辆'"
+          :activeMap="activeMap"
+          @handle-menu="handleMenu"
+        />
         <!--卫星电话-->
         <SatellitePhone v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '卫星电话'" @handle-menu="handleMenu" />
         <!--机动无人机-->