From 3ce02d9f57440134c122923711019daabd6a57d8 Mon Sep 17 00:00:00 2001
From: xuechunyuan <17853500702@163.com>
Date: Tue, 31 Jan 2023 14:41:09 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BD=A6=E8=BE=86=E5=88=97=E8=A1=A8=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0,=E5=8D=B8=E8=BD=BDecharts-gl?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                     |   1 +
 src/views/components/carMile.vue | 135 +++++++++++++++++++++++++++++--
 src/views/components/carWarn.vue |  57 +++++++++++--
 3 files changed, 181 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index 4cadcf1..1080554 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "vue-axios": "^3.5.2",
     "vue-fullscreen": "^2.6.1",
     "vue-router": "^3.5.1",
+    "vue-seamless-scroll": "^1.1.23",
     "vuex": "^3.6.2",
     "xlsx": "^0.18.5"
   },
diff --git a/src/views/components/carMile.vue b/src/views/components/carMile.vue
index f24327d..ad348e8 100644
--- a/src/views/components/carMile.vue
+++ b/src/views/components/carMile.vue
@@ -16,8 +16,23 @@
         </tr>
       </thead>
     </table>
-    <div style="width:100%;height:1.5rem;overflow-y:auto;">
-      <table class="table_box">
+    <div style="width:100%;height:1.5rem;">
+      <vueSeamless :data="carMile" :class-option="calssOption" class="tablebox_item_warp">
+        <div
+          :class="index == 0 ? 'tablebox_item no1' : index == 1 ? 'tablebox_item no2' : index == 2 ? 'tablebox_item no3' : 'tablebox_item'"
+          v-for="(item, index) in carMile" :key="'car' + index">
+          <div class="txt" style="width:20%;">{{ index+ 1}}</div>
+          <div class="txt" style="cursor:pointer;width:30%;" title="点击定位到该车辆位置" @click="queryMap(item)">{{
+            item.cardNo
+          }}</div>
+          <div class="txt" style="width:25%;">{{ item.mile }}</div>
+          <div style="width:25%;"><a class="btn_path"
+              :href="`https://gatewayapi.lunz.cn/api/ApiPlat/LocatInfoAllPage?imei=${item.deviceId}&KEY=${locationKey}&messkey=1`"
+              target="_blank">查询</a>
+          </div>
+        </div>
+      </vueSeamless>
+      <!-- <table class="table_box">
         <colgroup>
           <col width="20%" />
           <col width="30%" />
@@ -32,24 +47,41 @@
             <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://gatewayapi.lunz.cn/api/ApiPlat/LocatInfoAllPage?imei=${item.deviceId}&KEY=${locationKey}&messkey=1`"
+            <td>
+              <div>{{ item.mile }}</div>
+            </td>
+            <td><a class="btn_path"
+                :href="`https://gatewayapi.lunz.cn/api/ApiPlat/LocatInfoAllPage?imei=${item.deviceId}&KEY=${locationKey}&messkey=1`"
                 target="_blank">查询</a></td>
           </tr>
         </tbody>
-      </table>
+      </table> -->
     </div>
   </div>
 </template>
 
 <script>
 import { lunzApi, key, carList } from "@/api/data";
+import vueSeamless from 'vue-seamless-scroll'
 export default {
+  components: {
+    vueSeamless,
+  },
   data() {
     return {
       carList: carList,//车辆设备
       carMile: [],
-      locationKey:key
+      locationKey: key,
+      calssOption:{
+        "step": 0.2, // 数值越大速度滚动越快
+        "limitMoveNum": carList.length, // 开始无缝滚动的数据量 this.dataList.length
+        "hoverStop": true, // 是否开启鼠标悬停stop
+        "direction": 1, // 0向下 1向上 2向左 3向右
+        "openWatch": true, // 开启数据实时监控刷新dom
+        "singleHeight": 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        "singleWidth": 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        "waitTime": 1000, // 单步运动停止的时间(默认值1000ms)
+      }
     }
   },
   mounted() {
@@ -86,6 +118,94 @@ export default {
   height: 100%;
   overflow: hidden;
 
+  .tablebox_item_warp {
+    height: 1.5rem;
+    overflow: hidden;
+
+    .tablebox_item {
+      display: flex;
+      align-items: center;
+      color: #fff;
+      font-size: 0.14rem;
+      padding: 0.08rem 0;
+
+      div {
+        color: #fff;
+        font-size: 0.14rem;
+      }
+
+      &.no1 {
+        background: url(~@/assets/img/tab1.png);
+        background-size: 100% 100%;
+
+        .txt {
+          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;
+          /* 文字填充颜色变透明 */
+        }
+      }
+
+      &.no2 {
+        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;
+          /* 文字填充颜色变透明 */
+        }
+      }
+
+      &.no3 {
+        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;
+      }
+    }
+  }
+
   .table_box {
     width: 100%;
     margin-top: 0.15rem;
@@ -110,7 +230,8 @@ export default {
           color: #fff;
           font-size: 0.14rem;
           padding: 0.08rem 0;
-          div{
+
+          div {
             color: #fff;
             font-size: 0.14rem;
           }
diff --git a/src/views/components/carWarn.vue b/src/views/components/carWarn.vue
index b7da7ce..c42c9a2 100644
--- a/src/views/components/carWarn.vue
+++ b/src/views/components/carWarn.vue
@@ -14,8 +14,21 @@
         </tr>
       </thead>
     </table>
-    <div style="width:100%;height:1.5rem;overflow-y:auto;">
-      <table class="table_box">
+    <div style="width:100%;height:1.5rem;">
+      <vueSeamless :data="carWarn" :class-option="calssOption" class="tablebox_item_warp">
+        <div class="tablebox_item" v-for="(item, index) in carWarn" :key="'carWarn' + index"
+          :style="{ paddingTop: index == 0 ? '0' : '0.08rem' }">
+          <div style="width:40%;">{{ item.TimeStamp }}</div>
+          <div style="width:30%;">{{
+            item.carNo
+          }}</div>
+          <div :title="item.MESSCONTENT">{{ item.MESSTYPE }}</div>
+        </div>
+      </vueSeamless>
+      <div v-if="carWarn.length == 0" style="padding-top:0.8rem;font-size:0.14rem;color:#fff;">
+        暂无报警信息
+      </div>
+      <!-- <table class="table_box">
         <colgroup>
           <col width="40%" />
           <col width="30%" />
@@ -31,7 +44,7 @@
             <td colspan="3" style="padding-top:0.8rem;">暂无报警信息</td>
           </tr>
         </tbody>
-      </table>
+      </table> -->
     </div>
   </div>
 </template>
@@ -39,11 +52,25 @@
 <script>
 import { lunzApi, key, carList } from "@/api/data";
 import { dateFormat } from "@/util/date";
+import vueSeamless from 'vue-seamless-scroll'
 export default {
+  components: {
+    vueSeamless,
+  },
   data() {
     return {
       carList: carList,//车辆设备
       carWarn: [],
+      calssOption: {
+        "step": 0.2, // 数值越大速度滚动越快
+        "limitMoveNum": 5, // 开始无缝滚动的数据量 this.dataList.length
+        "hoverStop": true, // 是否开启鼠标悬停stop
+        "direction": 1, // 0向下 1向上 2向左 3向右
+        "openWatch": true, // 开启数据实时监控刷新dom
+        "singleHeight": 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        "singleWidth": 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        "waitTime": 1000, // 单步运动停止的时间(默认值1000ms)
+      }
     }
   },
   mounted() {
@@ -71,6 +98,7 @@ export default {
             arr.push(item);
           })
           this.carWarn = this.carWarn.concat(arr);
+          // this.classOption.limitMoveNum = this.carWarn.length;
         })
       })
 
@@ -109,11 +137,30 @@ export default {
           font-size: 0.14rem;
           padding: 0.08rem 0;
         }
-        &:nth-child(1) td{
-          padding-top:0;
+
+        &:nth-child(1) td {
+          padding-top: 0;
         }
       }
     }
   }
+
+  .tablebox_item_warp {
+    height: 1.5rem;
+    overflow: hidden;
+
+    .tablebox_item {
+      display: flex;
+      align-items: center;
+      color: #fff;
+      font-size: 0.14rem;
+      padding: 0.08rem 0;
+
+      div {
+        color: #fff;
+        font-size: 0.14rem;
+      }
+    }
+  }
 }
 </style>
\ No newline at end of file