修改单车监测

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

@@ -14,9 +14,25 @@
         <!--        </div>-->
       </el-col>
       <el-col :offset="1" :span="11">
-        <div style="width: 100%;text-align: center">
+        <div style="width: 100%;text-align: center;height: 100px">
-          <p style="font-weight: 600;font-size: 20px;margin-top: 32px">单车监控</p>
+          <div style="width: calc(50% - 50px);float:left;">
-          <p style="font-weight: 600;font-size: 16px;color:#cba658">{{ cardInfo.carLicense }} 里程：000.00km</p>
+            <span style="font-weight: 600;font-size: 16px;color:#cba658;line-height: 40px">
+            <span class="platebg">
+              <span class="span1">{{ cardInfo.carLicense.slice(0, 2) }}</span>
+              <span class="span2">{{ cardInfo.carLicense.slice(2, 7) }}</span>
+            </span>
+            </span>
+          </div>
+          <div style="width: 100px;float:left;">
+            <span style="font-weight: 600;font-size: 20px;line-height: 100px">单车监控</span>
+          </div>
+          <div style="width: calc(50% - 50px);float:left;">
+            <span style="font-weight: 600;font-size: 16px;color:#cba658;line-height: 100px">
+              <span style="vertical-align:top;">
+            里程：000.00km
+              </span>
+            </span>
+          </div>
         </div>
         <div v-for="(item,index) in 5" key="index" style="margin-bottom: 18px">
           <div
@@ -44,7 +60,7 @@
         >
           <el-tab-pane label="有车载设备车辆" name="有车载设备车辆">
             <el-form ref="queryRef" :inline="true" :model="queryParams"
-                     label-width="60px">
+                     label-width="60px" max-height="800">
               <el-form-item label="车队" prop="carQueueId">
                 <el-input
                     v-model="queryParams.carQueueId"
@@ -76,7 +92,7 @@
                 @current-change="tableChange"
             >
               <el-table-column label="label" prop="label"/>
-              <el-table-column label="id" prop="id" v-if="false" />
+              <el-table-column v-if="false" label="id" prop="id"/>
             </el-table>
 
             <pagination
@@ -97,15 +113,56 @@
 </template>
 
 <script setup>
-import {listBaseCar,getCarGpsList} from '@/api/realTimeMonitoring/carMonitoring'
+import {listBaseCar, getCarGpsList} from '@/api/realTimeMonitoring/carMonitoring'
 import AMapLoader from '@amap/amap-jsapi-loader';
 import {useI18n} from "vue-i18n";
 import {ref} from 'vue'
+import {useRouter} from 'vue-router';
+import {parseTime} from "@/utils/ruoyi";
 
 const {proxy} = getCurrentInstance();
-
+const $router = useRouter();
 const {t} = useI18n();
+const pageId = ref('')
 const tableRef1 = ref()
+let map = null
+const markers = ref(null)
+
+AMapLoader.load({
+  key: "ba8fb8d8bae1b280b93406d5959d492f",             // 申请好的Web端开发者Key，首次调用 load 时必填
+  // version: "1.4.15",      //
+  version: "2.0",      //
+  plugins: [],
+
+  AMapUI: {
+    version: '1.1',
+    plugins: []
+  }
+}).then((AMap) => {
+  map = new AMap.Map("container", {  //设置地图容器id
+    viewMode: "3D",    //是否为3D地图模式
+    zoom: 16,           //初始化地图级别
+    center: [116.397428, 39.90923], //初始化地图中心点位置
+  });
+}).catch(e => {
+  console.log(e);
+})
+proxy.$nextTick(async () => {
+  pageId.value = $router?.currentRoute?.value?.query?.id
+  if (pageId.value) {
+    // await tableChange({id: pageId.value})
+    const {rows: list} = await listBaseCar(queryParams.value)
+    tableData.value = list.map(e => {
+      return {
+        label: e.carLicense,
+        ...e
+      }
+    })
+    tableRef1.value.setCurrentRow(tableData.value.find(e => e.id === pageId.value))
+  } else {
+    getList()
+  }
+})
 
 // 总条数
 const total = ref(0);
@@ -114,7 +171,7 @@ const getList = async () => {
   tableData.value = list.map(e => {
     return {
       label: e.carLicense,
-      id:e.id
+      ...e
     }
   })
   total.value = tableData.value.length
@@ -122,16 +179,27 @@ const getList = async () => {
 }
 
 const tableChange = async (e) => {
-  const {data:info} = await getCarGpsList({id:e.id})
+  pageId.value = e.id
-  console.log(info)
+  const {data: info} = await getCarGpsList({id: pageId.value})
   cardInfo.value = {
-    carLicense:info[0].carLicense
+    carLicense: info[0].carLicense
+  }
+  console.log(info)
+  let timeOut = () => {
+    setTimeout(() => {
+      if (map) {
+        console.log(111)
+        setMarker(info[0])
+        clearTimeout(timeOut)
       }
+    }, 1000)
+  }
+  timeOut()
 }
 
 const cardInfo = ref({
   name: '名称',
-  carLicense:''
+  carLicense: ''
 })
 
 const tabsName = ref('有车载设备车辆')
@@ -162,34 +230,20 @@ const resetQuery = () => {
   handleQuery();
   tableRef1.value.setCurrentRow()
 }
-let map = null
+const setMarker = (res) => {
-let polyline = null
+  markers.value ? map.remove(markers.value) : ''
-let passedPolyline = null
+  markers.value = new AMap.Marker({
-let mouseTool = null
+    content: '<div class="markerIcon" />',
-let path = [[116.478935, 39.997761], [103.85094, 35.987496], [106.205794, 38.458831], [108.983569, 34.285675], [111.761777, 40.875595]]
+    position: [res.longitude, res.latitude],
-AMapLoader.load({
+    anchor: 'bottom-center',
-  key: "ba8fb8d8bae1b280b93406d5959d492f",             // 申请好的Web端开发者Key，首次调用 load 时必填
+    offset: new AMap.Pixel(0, 0),
-  // version: "1.4.15",      //
-  version: "2.0",      //
-  plugins: [],
-
-  AMapUI: {
-    version: '1.1',
-    plugins: []
-  }
-}).then((AMap) => {
-  map = new AMap.Map("container", {  //设置地图容器id
-    viewMode: "3D",    //是否为3D地图模式
-    zoom: 16,           //初始化地图级别
-    center: [116.397428, 39.90923], //初始化地图中心点位置
   });
-
+  map.add(markers.value)
-}).catch(e => {
+  map.setFitView()
-  console.log(e);
+  map.setZoom(8)
-})
+}
-getList()
 </script>
-<style>
+<style lang="scss">
 .container1 {
   padding: 0px;
   margin: 0px;
@@ -211,4 +265,40 @@ getList()
 .el-tabs {
   border: 1px solid #ddd
 }
+
+.platebg {
+  display: inline-block;
+  width: 192px;
+  height: 60px;
+  background-image: url("../../../assets/images/platebg.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  line-height: 40px;
+  font-size: 30px;
+  color: #fff;
+  margin-top: 20px;
+
+  .span1 {
+    display: inline-block;
+    float: left;
+    line-height: 60px;
+    width: 32%;
+  }
+
+  .span2 {
+    display: inline-block;
+    float: left;
+    line-height: 60px;
+    width: 68%;
+    letter-spacing: 4px;
+  }
+}
+
+.markerIcon {
+  width: 65px;
+  height: 50px;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  background-image: url("../../../assets/images/trucks.png");
+}
 </style>

ruoyi-ui/vite.config.js

@@ -31,8 +31,8 @@ export default defineConfig(({mode, command}) => {
             proxy: {
                 // https://cn.vitejs.dev/config/#server-proxy
                 '/dev-api': {
-                    // target: 'http://10.11.41.249:8080',
+                    target: 'http://10.11.41.249:8080',
-                    target: 'http://localhost:8080',
+                    // target: 'http://localhost:8080',
                     changeOrigin: true,
                     rewrite: (p) => p.replace(/^\/dev-api/, '')
                 }