From 8434ee4f0773fd0b3ed594add0eab59674f58c0a Mon Sep 17 00:00:00 2001
From: xuechunyuan <17853500702@163.com>
Date: Thu, 19 Jan 2023 10:43:34 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8C=E7=A8=8B=E5=92=8C=E6=8A=A5=E8=AD=A6?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E6=94=B9=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/data.js                  |   6 ++
 src/views/components/carMile.vue | 150 +++++++++++++++++++++++++------
 src/views/components/carWarn.vue |  25 +++++-
 3 files changed, 150 insertions(+), 31 deletions(-)

diff --git a/src/api/data.js b/src/api/data.js
index e6bc2f0..daa0978 100644
--- a/src/api/data.js
+++ b/src/api/data.js
@@ -1290,4 +1290,10 @@ export const styleJson = [{
     "stylers": {
         "opacity": "00"
     }
+}, {
+    "featureType": "scenicspotslabel",
+    "elementType": "labels.icon",
+    "stylers": {
+        "visibility": "off"
+    }
 }];
\ No newline at end of file
diff --git a/src/views/components/carMile.vue b/src/views/components/carMile.vue
index 38098ab..d2ee818 100644
--- a/src/views/components/carMile.vue
+++ b/src/views/components/carMile.vue
@@ -2,10 +2,10 @@
   <div class="mile_warp">
     <table class="table_box">
       <colgroup>
-        <col width="20%"/>
-        <col width="30%"/>
-        <col width="25%"/>
-        <col width="25%"/>
+        <col width="20%" />
+        <col width="30%" />
+        <col width="25%" />
+        <col width="25%" />
       </colgroup>
       <thead>
         <tr>
@@ -16,20 +16,25 @@
         </tr>
       </thead>
     </table>
-    <div style="width:100%;height:4.5rem;overflow-y:auto;">
+    <div style="width:100%;height:1.5rem;overflow-y:auto;">
       <table class="table_box">
         <colgroup>
-          <col width="20%"/>
-          <col width="30%"/>
-          <col width="25%"/>
-          <col width="25%"/>
+          <col width="20%" />
+          <col width="30%" />
+          <col width="25%" />
+          <col width="25%" />
         </colgroup>
         <tbody>
           <tr v-for="(item, index) in carMile" :key="'car' + index">
-            <td>{{ index+ 1}}</td>
-            <td title="点击定位到该车辆位置" @click="queryMap(item)"><a href="javascript:;">{{ item.cardNo }}</a></td>
-            <td>{{ item.mile }}</td>
-            <td><a :href="`https://lcrm3.lunz.cn/#/Equipment/LocatMonitor/Path/${item.key}`" target="_blank">查询</a></td>
+            <td>
+              <div>{{ index+ 1}}</div>
+            </td>
+            <td title="点击定位到该车辆位置" @click="queryMap(item)">
+              <div style="cursor:pointer;">{{ item.cardNo }}</div>
+            </td>
+            <td><div>{{ item.mile }}</div></td>
+            <td><a class="btn_path" :href="`https://lcrm3.lunz.cn/#/Equipment/LocatMonitor/Path/${item.key}`"
+                target="_blank">查询</a></td>
           </tr>
         </tbody>
       </table>
@@ -52,20 +57,22 @@ export default {
   methods: {
     //定位
     queryMap(item) {
-      this.$emit('doMap',item);
+      this.$emit('doMap', item);
     },
     //昨日里程
     queryYesterdayMile() {
       lunzApi.getYesterdayMile(key).then(res => {
         let resData = res.Data;
-        this.carList.map(item => {
-          let idx = resData.findIndex(item2 => item2.Imei == item.deviceId);
-          item.mile = idx > -1 ? res.Data[idx].Mile : 0;
-          this.carMile.push(item);
-        })
-        this.carMile.sort((a, b) => {
-          return b.mile - a.mile;
-        })
+        if (resData && resData != undefined) {
+          this.carList.map(item => {
+            let idx = resData.findIndex(item2 => item2.Imei == item.deviceId);
+            item.mile = idx > -1 ? res.Data[idx].Mile : 0;
+            this.carMile.push(item);
+          })
+          this.carMile.sort((a, b) => {
+            return b.mile - a.mile;
+          })
+        }
       })
     },
   },
@@ -80,17 +87,104 @@ export default {
 
   .table_box {
     width: 100%;
+    margin-top: 0.15rem;
+
+    thead {
+      font-style: italic;
+      height: 0.38rem;
+      background: url(~@/assets/img/tab_bg.png);
+      background-size: 100% 100%;
 
-    tr {
       td {
-        font-size: 0.18rem;
         color: #fff;
-        padding: 0.08rem 0;
+        font-family: "FZSK";
+        font-size: 0.16rem;
       }
     }
-    a{
-      color:#0e94ea;
-      text-decoration: none;
+
+    tbody {
+
+      tr {
+        td {
+          color: #fff;
+          font-size: 0.14rem;
+          padding: 0.08rem 0;
+        }
+
+        &:nth-child(1) {
+          td {
+            padding-top: 0;
+          }
+
+          background: url(~@/assets/img/tab1.png);
+          background-size: 100% 100%;
+
+          div {
+            font-family: "FZSK";
+            font-size: 0.18rem;
+            letter-spacing: 0px;
+            background-image: linear-gradient(to bottom,
+                #fceece,
+                #e39054);
+            /* 线性渐变背景，方向向上 */
+            -webkit-background-clip: text;
+            /* 背景被裁剪成文字的前景色 */
+            -webkit-text-fill-color: transparent;
+            /* 文字填充颜色变透明 */
+          }
+        }
+
+        &:nth-child(2) {
+          background: url(~@/assets/img/tab2.png);
+          background-size: 100% 100%;
+
+          div {
+            font-family: "FZSK";
+            font-size: 0.18rem;
+            letter-spacing: 0px;
+            background-image: linear-gradient(to bottom,
+                #cefce7,
+                #16da85);
+            /* 线性渐变背景，方向向上 */
+            -webkit-background-clip: text;
+            /* 背景被裁剪成文字的前景色 */
+            -webkit-text-fill-color: transparent;
+            /* 文字填充颜色变透明 */
+          }
+        }
+
+        &:nth-child(3) {
+          background: url(~@/assets/img/tab3.png);
+          background-size: 100% 100%;
+
+          div {
+            font-family: "FZSK";
+            font-size: 0.18rem;
+            letter-spacing: 0px;
+            background-image: linear-gradient(to bottom,
+                #cef6fc,
+                #1ca4f2);
+            /* 线性渐变背景，方向向上 */
+            -webkit-background-clip: text;
+            /* 背景被裁剪成文字的前景色 */
+            -webkit-text-fill-color: transparent;
+            /* 文字填充颜色变透明 */
+          }
+        }
+      }
+
+      .btn_path {
+        display: inline-block;
+        width: 0.6rem;
+        color: #ffffff;
+        font-size: 0.14rem;
+        font-style: italic;
+        line-height: 0.2rem;
+        text-align: center;
+        border-radius: 0.1rem 0.08rem 0.1rem 0.08rem;
+        text-decoration: none;
+        background-color: #16da85;
+      }
     }
   }
 }
diff --git a/src/views/components/carWarn.vue b/src/views/components/carWarn.vue
index a8278d6..b7da7ce 100644
--- a/src/views/components/carWarn.vue
+++ b/src/views/components/carWarn.vue
@@ -87,12 +87,31 @@ export default {
 
   .table_box {
     width: 100%;
+    margin-top: 0.15rem;
+
+    thead {
+      font-style: italic;
+      height: 0.38rem;
+      background: url(~@/assets/img/tab_bg.png);
+      background-size: 100% 100%;
 
-    tr {
       td {
-        font-size: 0.18rem;
         color: #fff;
-        padding: 0.08rem 0;
+        font-family: "FZSK";
+        font-size: 0.16rem;
+      }
+    }
+
+    tbody {
+      tr {
+        td {
+          color: #fff;
+          font-size: 0.14rem;
+          padding: 0.08rem 0;
+        }
+        &:nth-child(1) td{
+          padding-top:0;
+        }
       }
     }
   }