优化

src/components/Map/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="app-container">
-        <div style="background-color: #ffffff;height: 100%;">
+        <div style="background-color: #ffffff;height:100%;">
             <div id="container"></div>
         </div>
     </div>
@@ -23,6 +23,8 @@ const path = ref([]);
 const current_position = ref([]);
 let mapObj = ref()
 
+const lineObj = ref(null);
+
 
 const getDictsData = (param) => {
     getDicts(param).then(res => {
@@ -60,18 +62,20 @@ const initMap = () => {
             zoom: 13,           //初始化地图级别
             center: [119.807462, 26.958413], //初始化地图中心点位置
         });
-        mapObj = map;
+        console.log(map)
+        mapObj.value = map;
+        console.log(map)
         // 添加插件
-        AMap.plugin(["AMap.ToolBar", "AMap.Scale", "AMap.HawkEye", "AMap.Geolocation", "AMap.MapType", "AMap.MouseTool"], function () {
-            //异步同时加载多个插件
-            // 添加地图插件
-            // map.addControl(new AMap.ToolBar()); // 工具条控件;范围选择控件
-            map.addControl(new AMap.Scale()); // 显示当前地图中心的比例尺
-            map.addControl(new AMap.HawkEye()); // 显示缩略图
-            map.addControl(new AMap.Geolocation()); // 定位当前位置
-            // map.addControl(new AMap.MapType()); // 实现默认图层与卫星图,实时交通图层之间切换
+        // AMap.plugin(["AMap.ToolBar", "AMap.Scale", "AMap.HawkEye", "AMap.Geolocation", "AMap.MapType", "AMap.MouseTool"], function () {
+        //     //异步同时加载多个插件
+        //     // 添加地图插件
+        //     // map.addControl(new AMap.ToolBar()); // 工具条控件;范围选择控件
+        //     map.addControl(new AMap.Scale()); // 显示当前地图中心的比例尺
+        //     map.addControl(new AMap.HawkEye()); // 显示缩略图
+        //     map.addControl(new AMap.Geolocation()); // 定位当前位置
+        //     // map.addControl(new AMap.MapType()); // 实现默认图层与卫星图,实时交通图层之间切换
 
-        });
+        // });
 
         getDictsData("tbl_sites");
         // 单击
@@ -126,7 +130,7 @@ const addMarker = (obj, data) => {
         offset: new AMap.Pixel(-30, 20),
         content: data.dictLabel
     });
-    marker.setMap(mapObj);
+    marker.setMap(mapObj.value);
     //给marker添加属性
     marker.setExtData(data)
     //给marker添加点击事件
@@ -134,6 +138,9 @@ const addMarker = (obj, data) => {
 }
 
 const addLine = (list) => {
+    if(lineObj.value != null){
+        mapObj.value.remove([lineObj.value])
+    }
     var dataList = []
     for (var index in list) {
         var obj = new AMap.LngLat(list[index].lng, list[index].lat);
@@ -146,8 +153,9 @@ const addLine = (list) => {
         lineJoin: "round", //折线拐点连接处样式
     });
     // polyline.setMap(mapObj);
-    console.log(mapObj)
-    mapObj.add([polyline]);
+    // console.log(mapObj)
+    lineObj.value = polyline
+    mapObj.value.add(polyline);
 }
 
 const emit = defineEmits(['childToParent']);

src/components/Map/map.vue

@@ -0,0 +1,175 @@
+<template>
+    <div class="app-container">
+        <div style="background-color: #ffffff;height: 30vh;">
+            <div id="container"></div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import AMapLoader from '@amap/amap-jsapi-loader';
+/*在Vue3中使用时,需要引入Vue3中的shallowRef方法(使用shallowRef进行非深度监听,
+因为在Vue3中所使用的Proxy拦截操作会改变JSAPI原生对象,所以此处需要区别Vue2使用方式对地图对象进行非深度监听,
+否则会出现问题,建议JSAPI相关对象采用非响应式的普通对象来存储)*/
+import { shallowRef } from '@vue/reactivity';
+import { ref } from "vue";
+import { getDicts } from '@/api/system/dict/data'
+import { getGpsData } from '@/api/gpsData/index'
+import add from '@/views/car/carInfo/add.vue';
+
+
+// const map = shallowRef(null);
+const path = ref([]);
+const current_position = ref([]);
+let mapObj = ref()
+
+
+const getDictsData = (param) => {
+    getDicts(param).then(res => {
+        for (var index in res.data) {
+            var obj = res.data[index].dictValue.split(",");
+            addMarker(obj, res.data[index])
+        }
+    })
+}
+
+const getGpsDataList = (param) => {
+    console.log(param)
+    getGpsData(param).then(res => {
+        console.log(res);
+        addLine(res.rows);
+    })
+}
+
+
+const setDataList = (data) => {
+    tableData.value = data
+}
+
+const initMap = () => {
+    window._AMapSecurityConfig = {
+        securityJsCode: '8e920f73eb2e6880a92ea6662eefc476',
+    }
+    AMapLoader.load({
+        key: "88d0fc14bcd5921a4e5a09ef1a3ab31a", // 申请好的Web端开发者Key，首次调用 load 时必填
+        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+        // plugins:[''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+    }).then((AMap) => {
+        const map = new AMap.Map("container", {  //设置地图容器id
+            viewMode: "3D",    //是否为3D地图模式
+            zoom: 13,           //初始化地图级别
+            center: [119.807462, 26.958413], //初始化地图中心点位置
+        });
+        mapObj = map;
+        console.log(map)
+        // 添加插件
+        AMap.plugin(["AMap.ToolBar", "AMap.Scale", "AMap.HawkEye", "AMap.Geolocation", "AMap.MapType", "AMap.MouseTool"], function () {
+            //异步同时加载多个插件
+            // 添加地图插件
+            // map.addControl(new AMap.ToolBar()); // 工具条控件;范围选择控件
+            map.addControl(new AMap.Scale()); // 显示当前地图中心的比例尺
+            map.addControl(new AMap.HawkEye()); // 显示缩略图
+            map.addControl(new AMap.Geolocation()); // 定位当前位置
+            // map.addControl(new AMap.MapType()); // 实现默认图层与卫星图,实时交通图层之间切换
+
+        });
+
+        getDictsData("tbl_sites");
+        // 单击
+        map.on('click', (e) => {
+            // lng ==> 经度值  lat => 维度值
+            current_position.value = [e.lnglat.lng, e.lnglat.lat];
+            path.value.push([e.lnglat.lng, e.lnglat.lat]);
+            //addMarker();
+            // addPolyLine();
+        })
+
+
+        // 折线
+        function addPolyLine() {
+            const polyline = new AMap.Polyline({
+                path: path.value,
+                isOutline: true,
+                outlineColor: "#ffeeff",
+                borderWeight: 1,
+                strokeColor: "#3366FF",
+                strokeOpacity: 0.6,
+                strokeWeight: 5,
+                // 折线样式还支持 'dashed'
+                strokeStyle: "solid",
+                // strokeStyle是dashed时有效
+                // strokeDasharray: [10, 5],
+                lineJoin: "round",
+                lineCap: "round",
+                zIndex: 50,
+            });
+            map.add([polyline]);
+        }
+
+
+
+    }).catch(e => {
+        console.log(e);
+    })
+}
+
+const addMarker = (obj, data) => {
+    const marker = new AMap.Marker({
+        icon: new AMap.Icon({
+            image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
+            imageSize: new AMap.Size(22, 28) //图标大小
+        }),
+        position: obj, // 这里我们通过上面的点击获取经纬度坐标,实时添加标记
+        // 通过设置 offset 来添加偏移量
+        offset: new AMap.Pixel(-10, -20),
+    });
+    marker.setLabel({
+        offset: new AMap.Pixel(-30, 20),
+        content: data.dictLabel
+    });
+    marker.setMap(mapObj);
+    //给marker添加属性
+    marker.setExtData(data)
+    //给marker添加点击事件
+    marker.on('click', clickMarker)
+}
+
+const addLine = (list) => {
+    var dataList = []
+    for (var index in list) {
+        var obj = new AMap.LngLat(list[index].lng, list[index].lat);
+        dataList.push(obj)
+    }
+    var polyline = new AMap.Polyline({
+        path: dataList,
+        strokeWeight: 2, //线条宽度
+        strokeColor: "red", //线条颜色
+        lineJoin: "round", //折线拐点连接处样式
+    });
+    // polyline.setMap(mapObj);
+    console.log(mapObj)
+    mapObj.add([polyline]);
+}
+
+const emit = defineEmits(['childToParent']);
+
+const clickMarker = (e) => {
+    emit('childToParent', e.target.getExtData())
+}
+
+
+initMap()
+// getGpsDataList();
+defineExpose({
+    getGpsDataList,
+});
+</script>
+
+<style>
+#container {
+    padding: 0px;
+    margin: 0px;
+    width: 100%;
+    height: 30vh;
+}
+</style>

src/views/car/carInfo/index.vue

@@ -62,8 +62,18 @@
       </template>
 </el-dialog> -->
 
-    <el-dialog :title="dialogMap.title" v-model="dialogMap.visible" width="40vw" append-to-body>
-      <mapDiv style="width:40vw;height:40vh;" ref="mapElm"></mapDiv>
+    <el-dialog v-if="dialog.visible" :title="dialog.title" v-model="dialog.visible" width="40vw" append-to-body>
+      <el-form :inline="true" label-width="68px">
+        <el-form-item label="时间选择" prop="carNum">
+        <el-date-picker v-model="timeArry" type="datetimerange" start-placeholder="开始时间"
+          end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd"
+          time-format="HH:mm:ss" style="width: 20vw;"/>
+        </el-form-item>
+        <el-form-item prop="carNum">
+          <el-button type="primary" @click="initMapLine">查询</el-button>
+        </el-form-item>
+      </el-form>
+      <mapDiv style="width:50vw;height:40vh;" ref="mapElm"></mapDiv>
     </el-dialog>
   </div>
 
@@ -95,10 +105,12 @@ const single = ref(true);
 const multiple = ref(true);
 const total = ref(0);
 
+const timeArry = ref('')
+
 const queryFormRef = ref<ElFormInstance>();
 const carInfoFormRef = ref<ElFormInstance>();
 
-const dialogMap = reactive<DialogOption>({
+const dialog = reactive<DialogOption>({
   visible: false,
   title: ''
 });
@@ -140,6 +152,8 @@ const columns = ref([
 
 const mapElm = ref(mapDiv)
 
+const catObj = ref('');
+
 const initFormData: CarInfoForm = {
   id: undefined,
   carNum: undefined,
@@ -227,11 +241,10 @@ const goadd = () => {
   // router.push("/car/carInfo/add")
 }
 
-const openMapDiv = (data) => {
-  dialogMap.visible = true;
-  const info = data
+const initMapLine = () => {
+  const info = catObj.value
   // const info = getCatInfoData(data.carNum);
-  console.log(info)
+  console.log(timeArry.value)
   var deviceInfo = JSON.parse(info.deviceInfos)
   console.log(deviceInfo)
   var code = '';
@@ -240,20 +253,24 @@ const openMapDiv = (data) => {
       code = deviceInfo[index].code
     }
   }
-  var date = moment(new Date()).format('YYYY-MM-DD')
+  // var date = moment(new Date()).format('YYYY-MM-DD')
   var param = {
     devicecode: code,
     params: {
-      starttime: date + ' 00:00:00',
-      endtime: date + ' ' + '23:59:59',
+      starttime: moment(timeArry.value[0]).format('YYYY-MM-DD HH:mm:ss'),
+      endtime: moment(timeArry.value[1]).format('YYYY-MM-DD HH:mm:ss'),
     }
   }
   // console.log(mapElm.value);
   // mapElm.value.getGpsDataList(param);
-  setTimeout(() => {
-    mapElm.value.getGpsDataList(param);
-  }, 1000);
+  // setTimeout(() => {
+  mapElm.value.getGpsDataList(param);
+  // }, 1000);
+}
 
+const openMapDiv = (data) => {
+  dialog.visible = true;
+  catObj.value = data
 }
 
 /** 查询车辆信息列表 */

src/views/car/work/addCarWork.vue

@@ -38,8 +38,8 @@
                             </template>
                             <div class="content-w">
                                 <el-select v-model="extObj.type" class="m-2" placeholder="请选择作业类型" style="width: 240px">
-                                    <el-option v-for="item in workTypeList" :key="item.dictValue" :label="item.dictLabel"
-                                        :value="item.dictValue" />
+                                    <el-option v-for="item in workTypeList" :key="item.dictValue"
+                                        :label="item.dictLabel" :value="item.dictValue" />
                                 </el-select>
                             </div>
                         </el-descriptions-item>
@@ -80,7 +80,8 @@
                                 </div>
                             </template>
                             <div class="content-w">
-                                <el-select v-model="form.driverInfo" class="m-2" placeholder="请选择司机" style="width: 240px">
+                                <el-select v-model="form.driverInfo" class="m-2" placeholder="请选择司机"
+                                    style="width: 240px">
                                     <el-option v-for="item in sjList" :key="item.userId" :label="item.nickName"
                                         :value="item.userId" />
                                 </el-select>
@@ -129,9 +130,14 @@
                                 <div v-if="activity.data != null">{{ activity.data.dictLabel }}</div>
                                 <div v-if="activity.timeObj != null">{{ activity.timeObj.startTime }}-{{
                             activity.timeObj.endTime }}</div>
-                                <div>
+                                <div style="display: flex;flex-direction: row;">
                                     <el-button style="width: 80px;" @click="selectSite(index)">选择地点</el-button>
                                     <el-button style="width: 80px;" @click="selectTime(index)">选择时间</el-button>
+                                    <div style="margin-left:5px" @click="deleteItem(activity)">
+                                        <el-icon :size="20" style="color:red;padding-top: 10px;">
+                                            <CircleClose />
+                                        </el-icon>
+                                    </div>
                                 </div>
                             </div>
                             <div v-show="activity.isadd">
@@ -206,8 +212,8 @@ const carPathId = ref(null)
 const queryFormRef = ref<ElFormInstance>();
 const carPathFormRef = ref<ElFormInstance>();
 const extObj = ref({
-    type:null,
-    wangge:null
+    type: null,
+    wangge: null
 })
 
 const sjList = ref([])
@@ -347,18 +353,16 @@ const columns = ref([
 
 const table = ref(tableElm)
 
-const submit = async() => {
-    console.log(carObj.value);
+const submit = async () => {
     var dataList = [];
-    for(var index in activities.value){
-         if(!activities.value[index].isadd){
+    for (var index in activities.value) {
+        if (!activities.value[index].isadd) {
             dataList.push(activities.value[index]);
-         }
+        }
     }
     form.value.stationList = JSON.stringify(dataList);
     form.value.ext2 = JSON.stringify(extObj.value)
     form.value.ext1 = JSON.stringify(carObj.value);
-    console.log(form.value);
     if (form.value.id) {
         await updateCarPath(form.value).finally(() => buttonLoading.value = false);
     } else {
@@ -367,14 +371,35 @@ const submit = async() => {
     proxy?.$modal.msgSuccess("修改成功");
     dialog.visible = false;
     useTagsViewStore().delView(route);
-     router.back()
+    router.back()
 }
 
+const deleteItem = (obj) => {
+    activities.value = activities.value.filter(function (item) {
+        return item.rank !== obj.rank && item.rank != 998
+    });
+    for (var index in activities.value) {
+        activities.value[index].rank = Number(index) + 1
+        if (index == activities.value.length - 1) {
+            activities.value[index].rank = 999
+            activities.value[index].content = "终点"
+            activities.value[index].size = 'large'
+            activities.value[index].color = '#E37318'
+        }
+    }
+    activities.value.push({
+        content: '2',
+        timestamp: '2018-04-03 20:46',
+        isadd: true,
+        rank: 998,
+    },);
+    activities.value.sort(function (a, b) { return a.rank - b.rank })
+}
 
 const getDictsData = (param, obj) => {
-  getDicts(param).then(res => {
-    obj.value = res.data;
-  })
+    getDicts(param).then(res => {
+        obj.value = res.data;
+    })
 }
 
 
@@ -382,11 +407,9 @@ const getUserList = async () => {
     loading.value = true;
     const res = await allocatedUserList({ pageSize: 1000, roleId: '1763484881548447746' });
     sjList.value = res.rows
-    console.log(sjList.value)
     loading.value = true;
     const ckres = await allocatedUserList({ pageSize: 1000, roleId: '1763484977044361217' });
     ckList.value = ckres.rows
-    console.log(ckList.value)
 }
 
 const addSite = () => {
@@ -405,7 +428,6 @@ const selectSite = (index) => {
 
 const clickSite = (data) => {
     activities.value[siteId.value].data = data;
-    console.log(activities.value[siteId.value].data);
 }
 
 const selectTime = (index) => {
@@ -428,7 +450,7 @@ const getcarInfoList = async () => {
     carInfoList.value = carList.rows
 }
 
-const initData = async() =>{
+const initData = async () => {
     let objId = route.query.id
     carPathId.value = route.query.id
     await getDictsData('work_type', workTypeList);
@@ -439,16 +461,24 @@ const initData = async() =>{
     }
 }
 
-const setData = async(id) =>{
+const setData = async (id) => {
     const res = await getCarPath(id);
-    console.log(res)
     form.value = res.data
     extObj.value = JSON.parse(res.data.ext2)
     carObj.value = JSON.parse(res.data.ext1)
     activities.value = JSON.parse(res.data.stationList)
+    activities.value.push({
+        content: '2',
+        timestamp: '2018-04-03 20:46',
+        isadd: true,
+        rank: 998,
+    },);
+    activities.value.sort(function (a, b) { return a.rank - b.rank })
+    // activities.value[activities.value.length - 1].
+
 }
 
-const goBack = () =>{
+const goBack = () => {
     useTagsViewStore().delView(route);
     router.back();
 }

src/views/yunying/scheduling/index.vue

@@ -75,8 +75,8 @@
             </el-card>
         </div>
 
-        <el-dialog :title="dialogMap.title" v-model="dialogMap.visible" width="40vw" append-to-body>
-            <mapDiv style="width:40vw;height:40vh;" ref="mapElm"></mapDiv>
+        <el-dialog v-if="dialogMap.visible" :title="dialogMap.title" v-model="dialogMap.visible" width="40vw" append-to-body>
+            <mapDiv style="width:40vw;height:40vh;" ref="mapElmDiv"></mapDiv>
         </el-dialog>
 
         <el-dialog :title="dialog.title" v-model="dialog.visible" width="40vw" append-to-body>
@@ -137,7 +137,7 @@ const dialog = reactive<DialogOption>({
     title: '在线视频'
 });
 
-const mapElm = ref(mapDiv)
+const mapElmDiv = ref(mapDiv)
 
 const columns = ref([
     // {label: '上层位置', prop: 'v', visible: true},
@@ -246,6 +246,7 @@ const getScheduleList = async () => {
     var param = {
         params: {
             scheduleDate: moment(date).format('YYYY-MM-DD')
+            // scheduleDate: '2024-03-16'
         },
         pageSize: "1000"
     }
@@ -337,7 +338,7 @@ const openMapDiv = (data) => {
         // console.log(mapElm.value);
         // mapElm.value.getGpsDataList(param);
         setTimeout(() => {
-            mapElm.value.getGpsDataList(param);
+            mapElmDiv.value.getGpsDataList(param);
         }, 1000);
     }
 }
@@ -440,6 +441,10 @@ const getCatInfoData = (value) => {
     }
 }
 
+onUnmounted(() =>{
+
+})
+
 onMounted(() => {
     initData();
 });