修改车辆监测

2 years ago · 9822f810f7
parent bf46ea7b20
commit 9822f810f7
7 changed files with 83 additions and 54 deletions
--- a/ruoyi-ui/src/api/basetyre/basetyre.js
+++ b/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',
--- a/ruoyi-ui/src/api/realTimeMonitoring/vehicleMonitoring.js
+++ b/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
+    })
+}
+
--- a/ruoyi-ui/src/assets/images/login-background.jpg
+++ b/ruoyi-ui/src/assets/images/login-background.jpg
--- a/ruoyi-ui/src/lang/zhCn.js
+++ b/ruoyi-ui/src/lang/zhCn.js
@ -1,6 +1,6 @@
 export default {
    login: {
-        title: '轮胎智能云平台后台管理系统',
+        title: '账 号 登 录',
        logIn: '登 录',
        username: '账号',
        password: '密码',
--- a/ruoyi-ui/src/views/login.vue
+++ b/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;
-  width: 400px;
+  background: #16191e;
+  width: 18vw;
  padding: 25px 25px 5px 25px;

  .el-input {
--- a/ruoyi-ui/src/views/realTimeMonitoring/carMonitoring/index.vue
+++ b/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">
-          <img height="70" src="@/assets/images/tyre.png" style="" width="70"/>
-          <div style="width: 100%;font-size: 12px;white-space:nowrap">轮胎详情</div>
-        </div>
+<!--        <div style="width: 25%;text-align: center;margin-top: 14px">-->
+<!--          <img height="70" src="@/assets/images/tyre.png" style="" width="70"/>-->
+<!--          <div style="width: 100%;font-size: 12px;white-space:nowrap">轮胎详情</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
--- a/ruoyi-ui/src/views/realTimeMonitoring/vehicleMonitoring/index.vue
+++ b/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',
-    children: [
+    title: 'Level one 2',
+    baseCarList: [
      {
-        label: 'Level two 2-1',
-        children: [
+        title: 'Level two 2-1',
+        baseCarList: [
          {
-            label: 'Level three 2-1-1',
+            title: 'Level three 2-1-1',
          },
        ],
      },
      {
-        label: 'Level two 2-2',
-        children: [
+        title: 'Level two 2-2',
+        baseCarList: [
          {
-            label: 'Level three 2-2-1',
+            title: 'Level three 2-2-1',
          },
        ],
      },
    ],
  },
  {
-    label: 'Level one 3',
-    children: [
+    title: 'Level one 3',
+    baseCarList: [
      {
-        label: 'Level two 3-1',
-        children: [
+        title: 'Level two 3-1',
+        baseCarList: [
          {
-            label: 'Level three 3-1-1',
+            title: 'Level three 3-1-1',
          },
        ],
      },
      {
-        label: 'Level two 3-2',
-        children: [
+        title: 'Level two 3-2',
+        baseCarList: [
          {
-            label: 'Level three 3-2-1',
+            title: 'Level three 3-2-1',
          },
        ],
      },
    ],
  },
-]
-const treeDefaultProps = {
-  children: 'children',
-  label: 'label',
-}
+])
+const treeDefaultProps = {label: 'title', children: 'baseCarList'}
 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;
-  left:0 !important;
-  transform: translate(calc(-50% + 32px),-100%);
+
+.amap-marker-label {
+  top: 0 !important;
+  left: 0 !important;
+  transform: translate(calc(-50% + 32px), -100%);
 }
 </style>