yiliangyiyun-pc-jj/src/views/home/left-bottom.vue

<!--
 * @Author: daidai
 * @Date: 2022-03-01 09:43:37
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-05-07 11:36:18
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-bottom.vue
-->
<template>
  <div
    v-if="pageflag"
    class="left_boottom_wrap beautify-scroll-def"
    :class="{ 'overflow-y-auto': !sbtxSwiperFlag }"
  >
    <component :is="components" :data="list" :class-option="defaultOption">
      <ul class="left_boottom">
        <li class="left_boottom_item" v-for="(item, i) in list" :key="i">
          <!-- <span class="orderNum doudong">{{ i + 1 }}</span> -->
          <div class="inner_right">
            <div class="dibu"></div>
            <div class="flex">
              <div class="info">
                <span class="labels">车牌号：</span>
                <span class="contents zhuyao doudong wangguan">
                  {{ item.carNo }}</span
                >
              </div>
              <div class="info">
                <span class="labels">装车时间：</span>
                <span class="contents " style="font-size: 12px">
                  {{ item.createDate }}</span
                >
              </div>
            </div>

              <span
                class="types doudong typeRed"
               
                >{{ item.tranTaskInfos.weight }}吨</span
              >

            <div class="info addresswrap">
              <span class="labels">始发地：</span>
              <span class="contents ciyao" style="font-size: 12px">
                {{ addressHandle(item,0) }}</span
              >
            </div>
            <div class="info addresswrap">
              <span class="labels">目的地：</span>
              <span class="contents ciyao" style="font-size: 12px">
                {{ addressHandle(item,1) }}</span
              >
            </div>
            
          </div>
        </li>
      </ul>
    </component>
  </div>

  <Reacquire v-else @onclick="getData" style="line-height: 200px" />
</template>

<script>
// import { currentGET } from "api";
import vueSeamlessScroll from 'vue-seamless-scroll'; // vue2引入方式
import Kong from '../../components/kong.vue';
export default {
  props:['ztxxlistData'],
  components: { vueSeamlessScroll, Kong },
  data() {
    return {
      list: [],
      pageflag: true,
      components: vueSeamlessScroll,
      defaultOption: {
        step: 0.5, // 数值越大速度滚动越快
            hoverStop: true, // 是否开启鼠标悬停stop
            openWatch: true, // 开启数据实时监控刷新dom
            direction: 1, // 0向下 1向上 2向左 3向右
            limitMoveNum: 4, // 开始无缝滚动的数据量 this.dataList.length
            singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
            singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
            waitTime: 5000 // 单步运动停止的时间(默认值1000ms)
      },
    };
  },
  watch:{
    ztxxlistData(res){
      console.log('leftbottom')
      console.log(res)
      this.list = res
        }
    },
  computed: {
    sbtxSwiperFlag() {
      let sbtxSwiper = true;
      if (sbtxSwiper) {
        this.components = vueSeamlessScroll;
      } else {
        this.components = Kong;
      }
      return sbtxSwiper;
    },
  },
  created() {
    // this.getData();
  },

  mounted() {},
  methods: {
    addressHandle(item,type) {
      let name;
      if(type==0){
         name = item.tranTaskInfos.startPrivate;
      if (item.tranTaskInfos.startCity) {
        name += '/' + item.tranTaskInfos.startCity;
        if (item.tranTaskInfos.startArea) {
          name += '/' + item.tranTaskInfos.startArea;
        }
      }
      }else{
         name = item.tranTaskInfos.endPrivate;
      if (item.tranTaskInfos.endCity) {
        name += '/' + item.tranTaskInfos.endCity;
        if (item.tranTaskInfos.endArea) {
          name += '/' + item.tranTaskInfos.endArea;
        }
      }
      }
      return name;
    },
    getData() {
      // this.pageflag = true;
      // this.pageflag =false
      // currentGET("big3", { limitNum: 20 }).then((res) => {
      //   console.log("设备提醒", res);
      //   if (res.success) {
      //     this.countUserNumData = res.data;
      //     this.list = res.data.list;
      //     let timer = setTimeout(() => {
      //       clearTimeout(timer);
      //       this.defaultOption.step =
      //         this.$store.state.setting.defaultOption.step;
      //     }, this.$store.state.setting.defaultOption.waitTime);
      //   } else {
      //     this.pageflag = false;
      //     this.$Message({
      //       text: res.msg,
      //       type: "warning",
      //     });
      //   }
      // });
      //   this.countUserNumData = {
      //   list: [
      //   {
      //     cityName: '营口市',
      //     countyName: '千山区',
      //     createTime: '2021-05-15 08:27:26',
      //     deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
      //     gatewayno: '辽H12345',
      //     onlineState: 0,
      //     provinceName: '福建省',
      //   },
      //   {
      //     cityName: '营口市',
      //     countyName: '千山区',
      //     createTime: '2021-05-15 08:27:26',
      //     deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
      //     gatewayno: '辽H12345',
      //     onlineState: 0,
      //     provinceName: '福建省',
      //   },
      //   {
      //     cityName: '营口市',
      //     countyName: '千山区',
      //     createTime: '2021-05-15 08:27:26',
      //     deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
      //     gatewayno: '辽H12345',
      //     onlineState: 0,
      //     provinceName: '福建省',
      //   },
      //   {
      //     cityName: '营口市',
      //     countyName: '千山区',
      //     createTime: '2021-05-15 08:27:26',
      //     deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
      //     gatewayno: '辽H12345',
      //     onlineState: 0,
      //     provinceName: '福建省',
      //   },
      //   {
      //     cityName: '营口市',
      //     countyName: '千山区',
      //     createTime: '2021-05-15 08:27:26',
      //     deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
      //     gatewayno: '辽H12345',
      //     onlineState: 0,
      //     provinceName: '福建省',
      //   },
      //   {
      //     cityName: '营口市',
      //     countyName: '千山区',
      //     createTime: '2021-05-15 08:27:26',
      //     deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
      //     gatewayno: '辽H12345',
      //     onlineState: 0,
      //     provinceName: '福建省',
      //   },
      //   {
      //     cityName: '营口市',
      //     countyName: '千山区',
      //     createTime: '2021-05-15 08:27:26',
      //     deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
      //     gatewayno: '辽H12345',
      //     onlineState: 0,
      //     provinceName: '福建省',
      //   },
      //   {
      //     cityName: '营口市',
      //     countyName: '千山区',
      //     createTime: '2021-05-15 08:27:26',
      //     deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
      //     gatewayno: '辽H12345',
      //     onlineState: 0,
      //     provinceName: '福建省',
      //   },
      //   {
      //     cityName: '营口市',
      //     countyName: '千山区',
      //     createTime: '2021-05-15 08:27:26',
      //     deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
      //     gatewayno: '辽H12345',
      //     onlineState: 0,
      //     provinceName: '福建省',
      //   },
      //   {
      //     cityName: '营口市',
      //     countyName: '千山区',
      //     createTime: '2021-05-15 08:27:26',
      //     deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
      //     gatewayno: '辽H12345',
      //     onlineState: 0,
      //     provinceName: '福建省',
      //   },
      //   {
      //     cityName: '营口市',
      //     countyName: '千山区',
      //     createTime: '2021-05-15 08:27:26',
      //     deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
      //     gatewayno: '辽H12345',
      //     onlineState: 0,
      //     provinceName: '福建省',
      //   },
      //   {
      //     cityName: '营口市',
      //     countyName: '千山区',
      //     createTime: '2021-05-15 08:27:26',
      //     deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
      //     gatewayno: '辽H12345',
      //     onlineState: 0,
      //     provinceName: '福建省',
      //   },
      //   {
      //     cityName: '营口市1',
      //     countyName: '千山区1',
      //     createTime: '2021-05-15 08:27:26',
      //     deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
      //     gatewayno: '辽H12345',
      //     onlineState: 0,
      //     provinceName: '福建省1',
      //   },
      //   ],
      // }
     
      // let that = this
      // let timer = setTimeout(() => {
      //   clearTimeout(timer)
      //   that.defaultOption.step = 0.5
      // }, 5000)
    },
  },
};
</script>
<style lang='scss' scoped>
.left_boottom_wrap {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.doudong {
  //  vertical-align:middle;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
}

.overflow-y-auto {
  overflow-y: auto;
}

.left_boottom {
  width: 100%;
  height: 100%;
  padding-left: 0;

  .left_boottom_item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    font-size: 14px;
    margin: 10px 0;
    .orderNum {
      margin: 0 16px 0 -20px;
    }

    .info {
      margin-right: 10px;
      display: flex;
      align-items: center;
      color: #fff;

      .labels {
        flex-shrink: 0;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.6);
      }

      .zhuyao {
        color: red;
        font-size: 15px;
      }

      .ciyao {
        color: rgba(255, 255, 255, 0.8);
      }

      .warning {
        color: #e6a23c;
        font-size: 15px;
      }
    }

    .inner_right {
      position: relative;
      height: 100%;
      width: 380px;
      flex-shrink: 0;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      .dibu {
        position: absolute;
        height: 2px;
        width: 104%;
        background-image: url("../../assets/images/zuo_xuxian.png");
        bottom: -10px;
        left: -2%;
        background-size: cover;
      }
      .addresswrap {
        width: 100%;
        display: flex;
        margin-top: 8px;
      }
    }

    .wangguan {
      color: #1890ff;
      font-weight: 900;
      font-size: 15px;
      width: 80px;
      flex-shrink: 0;
    }


    .time {
      font-size: 12px;
      // color: rgba(211, 210, 210,.8);
      color: #fff;
    }

    .address {
      font-size: 12px;
      cursor: pointer;
      // @include text-overflow(1);
    }

    .types {
      width: 60px;
      text-align: center;
      flex-shrink: 0;
    }

    .typeRed {
      color: #fc1a1a;
    }

    .typeGreen {
      color: #29fc29;
    }
  }
}
</style>