车辆列表更新,卸载echarts-gl

3 years ago · 3ce02d9f57
parent cd7cb942e9
commit 3ce02d9f57
3 changed files with 181 additions and 12 deletions
--- 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"
  },
--- 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;
          }
--- 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>