ui优化，及轨迹绘画

src/api/gpsData/index.ts

@@ -0,0 +1,12 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+import { gpsDataVO } from '@/api/gpsData/type';
+
+// 获取路由
+export function getGpsData(query): AxiosPromise<gpsDataVO[]> {
+  return request({
+    url: '/system/gpsdata/list',
+    method: 'get',
+    params: query
+  });
+}

src/api/gpsData/type.ts

@@ -0,0 +1,32 @@
+export interface gpsDataVO {
+    /**
+     * 
+     */
+    devicecode: string | number;
+  
+    /**
+     * 路线名称
+     */
+    speed: string;
+  
+    /**
+     * 起止及经过站点信息（包括场站编号及路过场站的时间）
+     */
+    lat: string;
+  
+    /**
+     * 车辆信息
+     */
+    lng: string ;
+  
+    /**
+     * 司机
+     */
+    alt: string;
+  
+    /**
+     * 随车人员
+     */
+    ts: string;
+  
+  }

src/components/Map/index.vue

@@ -14,13 +14,16 @@ import AMapLoader from '@amap/amap-jsapi-loader';
 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) {
@@ -30,6 +33,19 @@ const getDictsData = (param) => {
     })
 }
 
+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',
@@ -97,7 +113,6 @@ const initMap = () => {
 }
 
 const addMarker = (obj, data) => {
-    console.log(data)
     const marker = new AMap.Marker({
         icon: new AMap.Icon({
             image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
@@ -118,14 +133,35 @@ const addMarker = (obj, data) => {
     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) => {
-    console.log(e.target.getExtData());
     emit('childToParent', e.target.getExtData())
 }
 
+
 initMap()
+// getGpsDataList();
+defineExpose({
+    getGpsDataList,
+});
 </script>
 
 <style>

src/components/Public/table.vue

@@ -125,6 +125,8 @@ const getJsonDataFormat = (str, data, prop, pprop) =>{
 const getObjectData = (data, prop) => {
     var obj = JSON.parse(data);
     if(obj != null){
+      console.log(prop)
+      console.log(obj[prop])
         return obj[prop];
     }
   // return eval("obj." + prop)

src/components/Public/timeLine.vue

@@ -2,14 +2,14 @@
   <div>
     <div style="display: flex;flex-direction: row;margin-bottom:20px">
       <div v-for="(obj, index1) in list" style="width: 13vw;">
-        <div style="display: flex;flex-direction: row;">
+        <div style="display: flex;flex-direction: row;width: 13vw">
           <div style="height: 40px;">
-            <img v-if="getCurrentStation(obj.stationName, index1)" style="width: 30px;" src="@/assets/images/icon/小货车.png" />
+            <img v-if="index1 == carIndex" style="width: 30px;margin-left: 1vw;" src="@/assets/images/icon/小货车.png" />
           </div>
-          <!-- <div style="height: 40px;">
-            <img v-if="getCurrentStation(obj.stationName, index1)" style="width: 40px;margin-left: 4vw;"
+          <div style="height: 40px;">
+            <img v-if="index1 == Number(carIndex)+0.5" style="width: 30px;margin-left: 5vw;"
               src="@/assets/images/icon/小货车.png" />
-          </div> -->
+          </div>
         </div>
         <!-- <div
           style="width:13vw;display: flex;flex-direction: row;  font-family: 思源黑体;font-size: 12px;font-weight: bold;color:#C0C4CC">
@@ -24,23 +24,26 @@
           <div style="display: flex;flex-direction: row;">
             <div class="activitieyContent" v-if="index == 0" style="background: #06D903;">
               起
-              <div style="position: absolute;top:-26px;color:#C0C4CC;font-weight: bold;">{{ formatDate(item.planOutTime)}}</div>
+              <div style="position: absolute;top:-26px;color:#C0C4CC;font-weight: bold;">{{
+        formatDate(item.planOutTime) }}</div>
             </div>
-            <div class="activitieyContent" v-if="index> 0 && index<list.length-1" style="">
+            <div class="activitieyContent" v-if="index > 0 && index < list.length - 1" style="">
               {{ index }}
-              <div style="position: absolute;top:-26px;left:-35px;color:#C0C4CC;font-weight:bold;width:100px;display:flex;justify-content: space-evenly;">
-                 <div>{{ formatDate(item.planInTime) }}</div> <div>{{ formatDate(item.planOutTime) }}</div>
+              <div
+                style="position: absolute;top:-26px;left:-35px;color:#C0C4CC;font-weight:bold;width:100px;display:flex;justify-content: space-evenly;">
+                <div>{{ formatDate(item.planInTime) }}</div>
+                <div>{{ formatDate(item.planOutTime) }}</div>
               </div>
             </div>
-            <div class="activitieyContent" v-if="index == list.length-1" style="background: #ad012f;">
+            <div class="activitieyContent" v-if="index == list.length - 1" style="background: #ad012f;">
               终
-              <div style="position: absolute;top:-26px;color:#C0C4CC;font-weight: bold;">{{ formatDate(item.planInTime)}}</div>
+              <div style="position: absolute;top:-26px;color:#C0C4CC;font-weight: bold;">{{
+        formatDate(item.planInTime) }}</div>
             </div>
             <div class="line" style="margin: 2px 4px;margin-top:13px;" v-if="index != list.length - 1"></div>
           </div>
           <div
-            style="writing-mode:vertical-rl;width: 35px;line-height: 40px;font-family: 思源黑体;text-align: left;font-size: 13px;font-weight: bold;letter-spacing: 4px;margin-top: 5px;"
-          >
+            style="writing-mode:vertical-rl;width: 35px;line-height: 40px;font-family: 思源黑体;text-align: left;font-size: 13px;font-weight: bold;letter-spacing: 4px;margin-top: 5px;">
             {{ item.stationName }}
           </div>
         </div>
@@ -61,6 +64,8 @@ const props = defineProps({
   }
 });
 
+const carIndex = ref(-1)
+
 const activities = [
   {
     content: '白下',
@@ -123,19 +128,55 @@ const formatDate = (value) => {
   }
 }
 
-const getCurrentStation = (name, index) => {
+const getCurrentStation = () => {
   var stationObj = props.stationInfo;
+  var list = props.list
   if (stationObj.passStations == 'null') {
-    console.log(index == 0)
-    return index == 0
+    carIndex.value = 0
+    // return index == 0
   } else {
-        var passStationsArry = stationObj.passStations.split(",");
+    var passStationsArry = stationObj.passStations.split(",");
+    if (stationObj.currentStation == "null") {
+      for (var index in list) {
+        if (passStationsArry[passStationsArry.length - 1] == list[index].stationName) {
+          carIndex.value = index + 0.5
+        }
+      }
+    } else {
+      if (stationObj.currentStation.split(",").length == 1) {
+        for (var index in list) {
+          if (stationObj.currentStation == list[index].stationName) {
+            carIndex.value = index
+          }
+        }
+      } else {
+        var currentStations = stationObj.currentStation.split(",");
+        const arry = currentStations.filter((item) => !passStationsArry.some((obj) => item === obj))
+        if (arry.length == 1) {
+          for (var index in list) {
+            if (stationObj.currentStation == list[index].stationName) {
+              carIndex.value = index
+            }
+          }
+        } else {
+          lineList:
+          for (var i in props.list) {
+            for (var j in arry) {
+                if(props.list[i].stationName == arry[j]){
+                  carIndex.value = i
+                  break lineList;
+                }
+            }
+          }
+        }
+      }
+
+    }
   }
 }
 
 onMounted(() => {
-  console.log(props.stationInfo)
-  // getCurrentStation()
+  getCurrentStation();
 });
 </script>
 <style lang="scss" scoped>

src/views/car/activeSupervision/index.vue

@@ -176,7 +176,7 @@ const getList = async () => {
                 warnCount:"苏A51972",
             }
           ],
-          total:12
+          total:1
     }
     var buttons = [
         { type: 'primary', text: '核销', func: "goAdd" },

src/views/car/carInfo/add.vue

@@ -486,9 +486,31 @@ const updateObj = (data) => {
     console.log(addForm.value)
 }
 
+const deleteObj = (data) => {
+    console.log(data.id);
+    var param = {
+        id: route.query.id,
+    }
+    console.log(tableJson[activeName.value - 1]);
+    let prop = tableJson[activeName.value - 1].dataName
+    // var data = eval("form.value." + prop);
+    var list = JSON.parse(form.value[prop])
+    const arry = list.filter((item) => item.id != data.id)
+    // console.log(date)
+    param[prop] = JSON.stringify(arry);
+    updateCarInfo(param).then(res => {
+        addForm.value = {}
+        dialog.visible = false
+        form.value[prop] = JSON.stringify(arry)
+        setTableData(activeName.value);
+    })
+}
+
 const childrenClick = (data) => {
     if (data.func == 'updateObj') {
         updateObj(data.data)
+    } else if (data.func == 'deleteObj') {
+        deleteObj(data.data)
     }
 }
 

src/views/car/carInfo/index.vue

@@ -42,13 +42,13 @@
 
     <el-card shadow="never">
 
-      <tableElm :columns="columns" @childToParent='childrenClick'  :showButton="false" ref="table"></tableElm>
+      <tableElm :columns="columns" @childToParent='childrenClick' :showButton="false" ref="table"></tableElm>
 
       <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
         v-model:limit="queryParams.pageSize" @pagination="getList" />
     </el-card>
     <!-- 添加或修改车辆信息对话框 -->
-    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
+    <!-- <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
       <el-form ref="carInfoFormRef" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="车牌号" prop="carNum">
           <el-input v-model="form.carNum" placeholder="请输入车牌号" />
@@ -60,6 +60,10 @@
           <el-button @click="cancel">取 消</el-button>
         </div>
       </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>
   </div>
 
@@ -72,7 +76,10 @@ import tableElm from "@/components/Public/table.vue";
 import { useRoute, useRouter } from "vue-router";
 import useTagsViewStore from '@/store/modules/tagsView';
 import { h } from 'vue';
-import { ElButton,ElMessage } from 'element-plus'
+import { ElButton, ElMessage } from 'element-plus'
+import mapDiv from "@/components/Map/index.vue"
+import moment from 'moment';
+
 
 const route = useRoute();
 const router = useRouter();
@@ -91,7 +98,7 @@ const total = ref(0);
 const queryFormRef = ref<ElFormInstance>();
 const carInfoFormRef = ref<ElFormInstance>();
 
-const dialog = reactive<DialogOption>({
+const dialogMap = reactive<DialogOption>({
   visible: false,
   title: ''
 });
@@ -102,34 +109,37 @@ const columns = ref([
   // {label: '上层位置', prop: 'v', visible: true},
   { label: '车牌号', prop: 'carNum', visible: true, isTemplate: false },
   { label: '能源类型、业务类型', prop: 'ext1', visible: true, isTemplate: false, isTemplateTag: true },
-  { label: '车辆分类', prop: 'carType', pprop: "ext1", visible: true, isTemplate: false, isTemplateJson: false ,dict:"tbl_car_type"},
+  { label: '车辆分类', prop: 'carType', pprop: "ext1", visible: true, isTemplate: false, isTemplateJson: false, dict: "tbl_car_type" },
   { label: '网格', prop: 'wangge', pprop: "ext1", visible: true, isTemplate: false, isTemplateJson: true },
   { label: '单位', prop: 'dept', pprop: "ext1", visible: true, isTemplate: false, isTemplateJson: true },
   {
     label: '操作', custom: true, visible: true, render: (data) => {
 
-      return h('div',[h(ElButton, {
+      return h('div', [h(ElButton, {
         type: 'primary', // 组件属性
-        link:true,
+        link: true,
         onClick: () => {
           handleUpdate(data)
         },
-      },'管理'),h(ElButton, {
+      }, '管理'), h(ElButton, {
         type: 'danger', // 组件属性
-        link:true,
+        link: true,
         onClick: () => {
           handleDelete(data)
         },
-      },'删除')].concat(data.carType==1?[h(ElButton, {
+      }, '删除')].concat(data.carType == 1 ? [h(ElButton, {
         type: 'primary', // 组件属性
-        link:true,
+        link: true,
         onClick: () => {
-          ElMessage.success("sss")
+          openMapDiv(data)
         },
-      },'查看地图')]:[])) ;
-  } },
+      }, '查看地图')] : []));
+    }
+  },
 ])
 
+const mapElm = ref(mapDiv)
+
 const initFormData: CarInfoForm = {
   id: undefined,
   carNum: undefined,
@@ -217,6 +227,35 @@ const goadd = () => {
   // router.push("/car/carInfo/add")
 }
 
+const openMapDiv = (data) => {
+  dialogMap.visible = true;
+  const info = data
+  // const info = getCatInfoData(data.carNum);
+  console.log(info)
+  var deviceInfo = JSON.parse(info.deviceInfos)
+  console.log(deviceInfo)
+  var code = '';
+  for (var index in deviceInfo) {
+    if (deviceInfo[index].type == 'gps') {
+      code = deviceInfo[index].code
+    }
+  }
+  var date = moment(new Date()).format('YYYY-MM-DD')
+  var param = {
+    devicecode: code,
+    params: {
+      starttime: date + ' 00:00:00',
+      endtime: date + ' ' + '23:59:59',
+    }
+  }
+  // console.log(mapElm.value);
+  // mapElm.value.getGpsDataList(param);
+  setTimeout(() => {
+    mapElm.value.getGpsDataList(param);
+  }, 1000);
+
+}
+
 /** 查询车辆信息列表 */
 const getList = async () => {
   loading.value = true;
@@ -298,9 +337,9 @@ const handleDelete = async (row?: CarInfoVO) => {
 }
 
 const childrenClick = (data) => {
-  if(data.func == "handleUpdate"){
+  if (data.func == "handleUpdate") {
     handleUpdate(data.data)
-  }else if(data.func == "handleDelete"){
+  } else if (data.func == "handleDelete") {
     handleDelete(data.data)
   }
 }

src/views/car/examine/inout.vue

@@ -187,7 +187,7 @@ const getList = async () => {
 
             }
         ],
-        total: 12
+        total: 1
     }
     var buttons = [
         { type: 'primary', text: '查看图片', func: "goAdd" },

src/views/car/people/index.vue

@@ -377,7 +377,7 @@
       userName: [{ required: true, message: "用户名称不能为空", trigger: "blur" }, { min: 2, max: 20, message: "用户名称长度必须介于 2 和 20 之间", trigger: "blur" }],
       nickName: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
       password: [{ required: true, message: "用户密码不能为空", trigger: "blur" }, { min: 5, max: 20, message: "用户密码长度必须介于 5 和 20 之间", trigger: "blur" }],
-      email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }],
+      // email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }],
       phonenumber: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }]
     }
   })

src/views/car/safe/index.vue

@@ -201,7 +201,7 @@ const getList = async () => {
                 warnCount: "5",
             }
         ],
-        total: 12
+        total: 1
     }
     var buttons = [
         { type: 'primary', text: '查看危险驾驶警告', func: "openDetail" },

src/views/car/vehicleService/oilUse.vue

@@ -10,7 +10,7 @@
         </div>
         <div style="margin-top: 1vh;">
             <el-card body-style="background: rgba(0, 0, 0, 0.05);">
-                <el-row style="font-size: 12px;">
+                <el-row style="font-size: 12px;line-height: 20px;">
                     <el-col :span="12">
                        时间：2024-01-23 10:00:00
                     </el-col>

src/views/car/work/carWork.vue

@@ -223,9 +223,7 @@ const cancel = () => {
 
 const getUserList = async () => {
   api.listUser({ pageSize: 1000 }).then(res => {
-    console.log(res.rows)
     userList.value = res.rows;
-    console.log(userList.value)
   });
 
 }

src/views/car/work/schedule.vue

@@ -413,6 +413,7 @@ const initList = (val) => {
   queryParams.value.params.scheduleDate = moment(val).format('YYYY-MM-DD');
   listCarSchedule(queryParams.value).then(res => {
     console.log(res)
+    console.log(table.value)
     table.value.setDataList(res.rows);
     total.value = res.total;
   })

src/views/yunying/scheduling/index.vue

@@ -1,96 +1,89 @@
 <template>
-  <div class="p-2">
-    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div class="search" v-show="showSearch" style="display: flex;flex-direction: row;">
-        <div style="width: 85%;">
-          <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
-            <el-form-item label="车牌" prop="carNum">
-              <el-input v-model="queryParams.carNum" placeholder="请输入车牌号" clearable style="width: 160px" @keyup.enter="handleQuery" />
-            </el-form-item>
-            <el-form-item label="状态" prop="carNum">
-              <el-input v-model="queryParams.carNum" placeholder="请输入车牌号" clearable style="width: 160px" @keyup.enter="handleQuery" />
-            </el-form-item>
-            <el-form-item label="站点" prop="carNum">
-              <el-input v-model="queryParams.carNum" placeholder="请输入车牌号" clearable style="width: 160px" @keyup.enter="handleQuery" />
-            </el-form-item>
-            <el-form-item label="司机" prop="carNum">
-              <el-input v-model="queryParams.carNum" placeholder="请输入车牌号" clearable style="width: 160px" @keyup.enter="handleQuery" />
-            </el-form-item>
-            <el-form-item label="时间" prop="carNum">
-              <el-date-picker
-                v-model="value2"
-                type="datetimerange"
-                :shortcuts="shortcuts"
-                range-separator="至"
-                start-placeholder="开始时间"
-                end-placeholder="结束时间"
-              />
-            </el-form-item>
-          </el-form>
-        </div>
-        <div style="width: 15%;">
-          <el-form-item>
-            <el-button type="primary" @click="goadd">新增</el-button>
-            <el-button type="primary" @click="resetQuery">查询</el-button>
-          </el-form-item>
+    <div class="p-2">
+        <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
+            :leave-active-class="proxy?.animate.searchAnimate.leave">
+            <div class="search" v-show="showSearch" style="display: flex;flex-direction: row;">
+                <div style="width: 85%;">
+                    <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
+                        <el-form-item label="车牌" prop="carNum">
+                            <el-input v-model="queryParams.carNum" placeholder="请输入车牌号" clearable style="width: 160px"
+                                @keyup.enter="handleQuery" />
+                        </el-form-item>
+                        <el-form-item label="状态" prop="carNum">
+                            <el-input v-model="queryParams.carNum" placeholder="请输入车牌号" clearable style="width: 160px"
+                                @keyup.enter="handleQuery" />
+                        </el-form-item>
+                        <el-form-item label="站点" prop="carNum">
+                            <el-input v-model="queryParams.carNum" placeholder="请输入车牌号" clearable style="width: 160px"
+                                @keyup.enter="handleQuery" />
+                        </el-form-item>
+                        <el-form-item label="司机" prop="carNum">
+                            <el-input v-model="queryParams.carNum" placeholder="请输入车牌号" clearable style="width: 160px"
+                                @keyup.enter="handleQuery" />
+                        </el-form-item>
+                        <el-form-item label="时间" prop="carNum">
+                            <el-date-picker v-model="value2" type="datetimerange" :shortcuts="shortcuts"
+                                range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" />
+                        </el-form-item>
+                    </el-form>
+                </div>
+                <div style="width: 15%;">
+                    <el-form-item>
+                        <el-button type="primary" @click="goadd">新增</el-button>
+                        <el-button type="primary" @click="resetQuery">查询</el-button>
+                    </el-form-item>
+                </div>
+            </div>
+        </transition>
+        <div style="text-align: center;margin-bottom:10px">
+            <el-tag type="success" effect="dark" round>正常作业</el-tag>
+            <el-tag style="margin-left: 40px;" type="danger" effect="dark" round>异常作业</el-tag>
         </div>
-      </div>
-    </transition>
-    <div style="text-align: center;margin-bottom:10px">
-      <el-tag type="success" effect="dark" round>正常作业</el-tag>
-      <el-tag style="margin-left: 40px;" type="danger" effect="dark" round>异常作业</el-tag>
-    </div>
 
-    <div v-for="(item, index) in carScheduleList">
-      <el-card shadow="never">
-        <div class="carDiv" style="position: relative;">
-          <div
-            style="width: 18%;background: #7BC932;text-align: center;display: flex;flex-direction: column;justify-content: center;align-items:center;"
-          >
-            <div class="carDetail">{{ item.carNum }}</div>
-            <div class="carFont" style="font-size: 12px;">{{ getTimeFormat(item.pathInfo) }}</div>
-            <div class="carFont" style="font-size: 12px;margin-top:8px;">{{ getAddr(item.pathInfo) }}</div>
-            <!-- <div class="carFont">{{ JSON.parse(item.pathInfo).driver_info.nickName }}</div> -->
-            <div class="carFont" style="font-size: 12px;margin-top:8px;color:rgba(255,255,255,0.9)">
-              司机：{{ getUserName(JSON.parse(item.pathInfo).driverInfo) }}
-            </div>
-            <div class="carFont" style="font-size: 12px;margin-top:8px">{{ getCatInfo(item.carNum) }}</div>
-          </div>
-          <div style="width: 80%;">
-            <el-scrollbar ref="scrollbarRef" height="400px" always @scroll="scroll">
-              <timeLineDiv :list="JSON.parse(item.pathInfo).pathLine" :stationInfo="JSON.parse(item.stationInfo)"></timeLineDiv>
-            </el-scrollbar>
-          </div>
-          <div style="position:absolute;top:10px;right:6px">
-            <div style="width: 30px;height: 30px; cursor: pointer;" @click="dialogMap.visible = true">
-              <img style="width: 28px;height: 28px;" src="@/assets/images/icon/map1.png" />
-            </div>
-            <div style="width: 30px;height: 20px; cursor: pointer;" @click="dialog.visible = true">
-              <img style="width: 28px;height: 28px;" src="@/assets/images/icon/cam.png" />
-            </div>
-          </div>
-          <div style="position:absolute;bottom:10px;right:6px;font-size:10px">
-            <span>乘客：11人 </span> <span style="margin-left: 10px;">货物：11个</span>
-          </div>
+        <div v-for="(item, index) in carScheduleList">
+            <el-card shadow="never">
+                <div class="carDiv" style="position: relative;">
+                    <div
+                        style="width: 18%;background: #7BC932;text-align: center;display: flex;flex-direction: column;justify-content: center;align-items:center;">
+                        <div class="carDetail">{{ item.carNum }}</div>
+                        <div class="carFont" style="font-size: 12px;">{{ getTimeFormat(item.pathInfo) }}</div>
+                        <div class="carFont" style="font-size: 12px;margin-top:8px;">{{ getAddr(item.pathInfo) }}</div>
+                        <!-- <div class="carFont">{{ JSON.parse(item.pathInfo).driver_info.nickName }}</div> -->
+                        <div class="carFont" style="font-size: 12px;margin-top:8px;color:rgba(255,255,255,0.9)">
+                            司机：{{ getUserName(JSON.parse(item.pathInfo).driverInfo) }}
+                        </div>
+                        <div class="carFont" style="font-size: 12px;margin-top:8px">{{ getCatInfo(item.carNum) }}</div>
+                    </div>
+                    <div style="width: 80%;">
+                        <el-scrollbar ref="scrollbarRef" height="400px" always @scroll="scroll">
+                            <timeLineDiv :list="JSON.parse(item.pathInfo).pathLine"
+                                :stationInfo="JSON.parse(item.stationInfo)"></timeLineDiv>
+                        </el-scrollbar>
+                    </div>
+                    <div style="position:absolute;top:10px;right:6px">
+                        <div style="width: 30px;height: 30px; cursor: pointer;" @click="openMapDiv(item)">
+                            <img style="width: 28px;height: 28px;" src="@/assets/images/icon/map1.png" />
+                        </div>
+                        <div style="width: 30px;height: 20px; cursor: pointer;" @click="dialog.visible = true">
+                            <img style="width: 28px;height: 28px;" src="@/assets/images/icon/cam.png" />
+                        </div>
+                    </div>
+                    <div style="position:absolute;bottom:10px;right:6px;font-size:10px">
+                        <span>乘客：11人 </span> <span style="margin-left: 10px;">货物：11个</span>
+                    </div>
+                </div>
+            </el-card>
         </div>
-      </el-card>
-    </div>
 
-    <el-dialog :title="dialogMap.title" v-model="dialogMap.visible" width="40vw" append-to-body>
-      <mapDiv style="width:40vw;height:40vh;"></mapDiv>
-    </el-dialog>
-
-    <el-dialog :title="dialog.title" v-model="dialog.visible" width="40vw" append-to-body>
-      <video
-        v-for="item in 1"
-        style="width: 99%;margin-left:0.5%"
-        controls="controls"
-        :autoplay="false"
-        muted="muted"
-        :ref="`videoref${item}`"
-      ></video>
-    </el-dialog>
-  </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>
+
+        <el-dialog :title="dialog.title" v-model="dialog.visible" width="40vw" append-to-body>
+            <video v-for="item in 1" style="width: 99%;margin-left:0.5%" controls="controls" :autoplay="false"
+                muted="muted" :ref="`videoref${item}`"></video>
+        </el-dialog>
+    </div>
 </template>
 
 <script setup name="CarInfo" lang="ts">
@@ -144,7 +137,7 @@ const dialog = reactive<DialogOption>({
     title: '在线视频'
 });
 
-const table = ref(tableElm)
+const mapElm = ref(mapDiv)
 
 const columns = ref([
     // {label: '上层位置', prop: 'v', visible: true},
@@ -258,12 +251,11 @@ const getScheduleList = async () => {
     }
     const res = await listCarSchedule(param);
     carScheduleList.value = res.rows;
-    console.log(carScheduleList.value)
 }
 
 const getTimeFormat = (data) => {
     var value = JSON.parse(data).pathLine
-    console.log(value)
+    console.log(JSON.parse(data))
     if (value[0].planInTime && value[value.length - 1].planOutTime) {
         return value[0].planInTime + '-' + value[value.length - 1].planOutTime
     } else {
@@ -296,9 +288,7 @@ const cancel = () => {
 
 const getUserList = () => {
     api.listUser({ pageSize: 1000 }).then(res => {
-        console.log(res.rows)
         userList.value = res.rows;
-        console.log(userList.value)
     });
 }
 
@@ -322,6 +312,36 @@ const handleQuery = () => {
     getList();
 }
 
+const openMapDiv = (data) => {
+    dialogMap.visible = true;
+    const info = getCatInfoData(data.carNum);
+    console.log(info)
+    var deviceInfo = JSON.parse(info.deviceInfos)
+    console.log(deviceInfo)
+    var code = '';
+    for (var index in deviceInfo) {
+        if (deviceInfo[index].type == 'gps') {
+            code = deviceInfo[index].code
+        }
+    }
+    var value = JSON.parse(data.pathInfo).pathLine
+    var date = moment(new Date()).format('YYYY-MM-DD')
+    if (value[0].planInTime && value[value.length - 1].planOutTime) {
+        var param = {
+            devicecode: code,
+            params: {
+                starttime: date + ' ' + value[0].planInTime,
+                endtime: date + ' ' + value[value.length - 1].planOutTime,
+            }
+        }
+        // console.log(mapElm.value);
+        // mapElm.value.getGpsDataList(param);
+        setTimeout(() => {
+            mapElm.value.getGpsDataList(param);
+        }, 1000);
+    }
+}
+
 /** 重置按钮操作 */
 const resetQuery = () => {
     queryFormRef.value?.resetFields();
@@ -404,18 +424,22 @@ const getDictLabel = (value, list) => {
 }
 
 const getCatInfo = (value) => {
-    console.log(value)
-    console.log(carInfoList.value);
     for (var index in carInfoList.value) {
-        console.log(carInfoList.value[index].carNum)
         if (carInfoList.value[index].carNum == value) {
-            console.log(carInfoList.value[index]);
             var data = JSON.parse(carInfoList.value[index].ext1)
             return getDictLabel(data.energyType, energyTypeList).replaceAll("车", "") + getDictLabel(data.bussinessType, bussinessTypeList)
         }
     }
 }
 
+const getCatInfoData = (value) => {
+    for (var index in carInfoList.value) {
+        if (carInfoList.value[index].carNum == value) {
+            return carInfoList.value[index]
+        }
+    }
+}
+
 onMounted(() => {
     initData();
 });