修改车辆监测

ruoyi-ui/src/api/basetyre/basetyre.js

@@ -1,6 +1,6 @@
 import request from '@/utils/request'
 
-// 查询轮胎基础信息列表
+// 查询列表
 export function listBasetyre(query) {
   return request({
     url: '/basetyre/tyre/list',
@@ -9,7 +9,7 @@ export function listBasetyre(query) {
   })
 }
 
-// 查询轮胎基础信息详细
+// 查询基础信息详细
 export function getBasetyre(id) {
   return request({
     url: '/basetyre/basetyre/' + id,
@@ -17,7 +17,7 @@ export function getBasetyre(id) {
   })
 }
 
-// 新增轮胎基础信息
+// 新增信息
 export function addBasetyre(data) {
   return request({
     url: '/basetyre/basetyre',
@@ -26,7 +26,7 @@ export function addBasetyre(data) {
   })
 }
 
-// 修改轮胎基础信息
+// 修改信息
 export function updateBasetyre(data) {
   return request({
     url: '/basetyre/basetyre',

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

@@ -0,0 +1,19 @@
+import request from '@/utils/request'
+
+// 查询轮胎基础信息列表
+export function getCarGpsList(query) {
+    return request({
+        url: '/basecar/car/getCarGpsList',
+        method: 'post',
+        params: query
+    })
+}
+
+export function listBasetyre(query) {
+    return request({
+        url: '/carqueue/carqueue/carQueuelist',
+        method: 'get',
+        params: query
+    })
+}
+

ruoyi-ui/src/lang/zhCn.js

@@ -1,6 +1,6 @@
 export default {
     login: {
-        title: '轮胎智能云平台后台管理系统',
+        title: '账 号 登 录',
         logIn: '登 录',
         username: '账号',
         password: '密码',

ruoyi-ui/src/views/login.vue

@@ -8,6 +8,7 @@
             type="text"
             size="large"
             auto-complete="off"
+            style="color: #fff;"
             :placeholder="t('login.username')"
         >
           <template #prefix>
@@ -90,10 +91,6 @@
         </div>
       </el-form-item>
     </el-form>
-    <!--  底部  -->
-    <div class="el-login-footer">
-      <span>Copyright © 2018-2022 ruoyi.vip All Rights Reserved.</span>
-    </div>
   </div>
 </template>
 
@@ -200,19 +197,23 @@ getCookie();
   align-items: center;
   height: 100%;
   background-image: url("../assets/images/login-background.jpg");
-  background-size: cover;
+  background-size: 100% 100%;
 }
 
 .title {
   margin: 0px auto 30px auto;
   text-align: center;
-  color: #707070;
+  color: #cfcecf;
 }
 
 .login-form {
+  position: absolute;
+  transform: translateY(-50%);
+  top: 50%;
+  right: 10%;
   border-radius: 6px;
-  background: #ffffff;
+  background: #16191e;
-  width: 400px;
+  width: 18vw;
   padding: 25px 25px 5px 25px;
 
   .el-input {

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

@@ -11,10 +11,10 @@
         </el-card>
         <h2>实时位置</h2>
         <div id="container"></div>
-        <div style="width: 25%;text-align: center;margin-top: 14px">
+<!--        <div style="width: 25%;text-align: center;margin-top: 14px">-->
-          <img height="70" src="@/assets/images/tyre.png" style="" width="70"/>
+<!--          <img height="70" src="@/assets/images/tyre.png" style="" width="70"/>-->
-          <div style="width: 100%;font-size: 12px;white-space:nowrap">轮胎详情</div>
+<!--          <div style="width: 100%;font-size: 12px;white-space:nowrap">轮胎详情</div>-->
-        </div>
+<!--        </div>-->
       </el-col>
       <el-col :offset="1" :span="11">
         <div style="width: 100%;text-align: center">
@@ -42,6 +42,7 @@
         <el-tabs
             v-model="tabsName"
             type="card"
+            style="margin:24px 0 0 0"
             @tab-click="resetQuery"
         >
           <el-tab-pane label="有车载设备车辆" name="有车载设备车辆">
@@ -182,6 +183,7 @@ const resetQuery = () => {
     params2: '',
   }
   handleQuery();
+  tableRef1.value.setCurrentRow()
 }
 let map = null
 let polyline = null

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

@@ -7,18 +7,19 @@
 
 <script setup>
 import AMapLoader from '@amap/amap-jsapi-loader';
+import {getCarGpsList, listBasetyre} from '@/api/realTimeMonitoring/vehicleMonitoring'
 
-const treeData = [
+const treeData = ref([
   {
-    label: 'Level one 1',
+    title: 'Level one 1',
     id: 1,
-    children: [
+    baseCarList: [
       {
-        label: 'Level two 1-1',
+        title: 'Level two 1-1',
         id: 11,
-        children: [
+        baseCarList: [
           {
-            label: 'Level three 1-1-1',
+            title: 'Level three 1-1-1',
             id: 111,
           },
         ],
@@ -26,52 +27,49 @@ const treeData = [
     ],
   },
   {
-    label: 'Level one 2',
+    title: 'Level one 2',
-    children: [
+    baseCarList: [
       {
-        label: 'Level two 2-1',
+        title: 'Level two 2-1',
-        children: [
+        baseCarList: [
           {
-            label: 'Level three 2-1-1',
+            title: 'Level three 2-1-1',
           },
         ],
       },
       {
-        label: 'Level two 2-2',
+        title: 'Level two 2-2',
-        children: [
+        baseCarList: [
           {
-            label: 'Level three 2-2-1',
+            title: 'Level three 2-2-1',
           },
         ],
       },
     ],
   },
   {
-    label: 'Level one 3',
+    title: 'Level one 3',
-    children: [
+    baseCarList: [
       {
-        label: 'Level two 3-1',
+        title: 'Level two 3-1',
-        children: [
+        baseCarList: [
           {
-            label: 'Level three 3-1-1',
+            title: 'Level three 3-1-1',
           },
         ],
       },
       {
-        label: 'Level two 3-2',
+        title: 'Level two 3-2',
-        children: [
+        baseCarList: [
           {
-            label: 'Level three 3-2-1',
+            title: 'Level three 3-2-1',
           },
         ],
       },
     ],
   },
-]
+])
-const treeDefaultProps = {
+const treeDefaultProps = {label: 'title', children: 'baseCarList'}
-  children: 'children',
-  label: 'label',
-}
 const treeClick = (data) => {
   console.log(data)
 }
@@ -109,18 +107,19 @@ const mockRequest = () => {
 }
 
 const setMarker = async () => {
-  const markerArr = await mockRequest()
+  const {data: markerArr} = await getCarGpsList()
+  console.log(markerArr)
   markerArr.forEach(e => {
 
     // 点标记
     let marker = new AMap.Marker({
       content: '<div class="markerIcon" />',
-      position: e.location,
+      position: [e.longitude, e.latitude],
       anchor: 'bottom-center',
       offset: new AMap.Pixel(0, 0),
       label: {
         direction: 'top',
-        content: `<div class='info'>${e.title} - ${e.one}</div><div class='info'>${e.two} ${e.three}</div><div class='info'>${e.four}</div>`, //设置文本标注内容
+        content: `<div class='info'>${e.carLicense || ''} - ${e.state === 0? '在线':'离线'}</div><div class='info'>${e.two || ''} ${e.three || ''}</div><div class='info'>${e.four || ''}</div>`, //设置文本标注内容
       }
     });
 
@@ -129,9 +128,9 @@ const setMarker = async () => {
 }
 
 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 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,
+    path: path,
     showDir: true,
     strokeColor: '#77DDFF', // 线颜色--浅蓝色
     strokeWeight: 6, // 线宽
@@ -139,7 +138,7 @@ const setLine = async () => {
   })
   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]),
+    position: new AMap.LngLat(path[path.length - 1][0], path[path.length - 1][1]),
     text: '路径长' + distance + '米',
     offset: new AMap.Pixel(0, 0)
   })
@@ -188,6 +187,13 @@ AMapLoader.load({
   console.log(e);
 })
 
+listBasetyre().then(e => {
+  let res = JSON.stringify(e.rows)
+  let newObj = JSON.parse(res.replace(/"carLicense":/g,'"title":'))
+  treeData.value = newObj
+  console.log(newObj)
+})
+
 </script>
 <style>
 .tree {
@@ -211,9 +217,10 @@ AMapLoader.load({
   background-size: 100% 100%;
   background-image: url("../../../assets/images/trucks.png");
 }
-.amap-marker-label{
+
-  top:0 !important;
+.amap-marker-label {
-  left:0 !important;
+  top: 0 !important;
-  transform: translate(calc(-50% + 32px),-100%);
+  left: 0 !important;
+  transform: translate(calc(-50% + 32px), -100%);
 }
 </style>