wisdomcar_counter/src/views/Index/Index.vue

<!--
 * @Author: wally
 * @email: 18603454788@163.com
 * @Date: 2021-03-25 20:52:38
 * @LastEditors: wally
 * @LastEditTime: 2021-03-26 00:05:43
-->
<template>
  <div>
    <div class="fill-width mb-3">
      <a-card style="width: 100%; height: 100px; margin-bottom: 12px">
        <Search @getData="getData" />
      </a-card>
      <a-card style="width: 100%; height: 750px; margin-bottom: 12px" title="平车记录">
        <div v-if="list.length > 0">
          <Day :list="list" v-if="timeObj.types[0] !== 7" />
          <Weight :list="list" v-else />
        </div>
        <a-empty v-else />
      </a-card>
      <a-card style="width: 100%; height: auto">
        <Table :list="list" v-if="list && list.length > 0" />
        <a-empty v-else />
      </a-card>
    </div>
    <a-back-top />
  </div>
</template>

<script>
import { mapActions } from 'vuex';
import Day from 'components/Day/Day.vue';
import Weight from 'components/Day/Weight.vue';
import Search from 'components/Search/Search.vue';
import Table from 'components/Table/Table.vue';
import { weightList } from 'config/api';
export default {
  name: 'Index',
  components: { Day, Search, Table, Weight },
  data() {
    return {
      list: [],
      str: '',
      disProgress: true,
      timeObj: {
        carId: 2,
        startTime: '',
        endTime: '',
        types: [1, 2],
      },
      timer: null,
      timeNum: 5000,
    };
  },
  async created() {
    const startTime = this.$moment().valueOf() - 3600 * 24 * 1000;
    const endTime = this.$moment().valueOf();
    const startTimeStr = this.$moment(startTime).format('YYYY-MM-DD') + ' 00:00:00';
    const endTimeStr = this.$moment(endTime).format('YYYY-MM-DD') + ' 23:59:59';
    this.timeObj.startTime = this.$moment(startTimeStr).valueOf();
    this.timeObj.endTime = this.$moment(endTimeStr).valueOf();
    if (this.timer) {
      clearInterval(this.timer);
    }
    this.timer = null;
    await this.getData();
  },
  destoryed() {
    this.clearInterval(this.timer);
    this.timer = null;
  },
  methods: {
    // 获取默认时间 昨天的00:00:00 到今天的23:59:59
    getDefaultTime() {},
    async getData(timeData) {
      try {
        if (timeData) {
          this.timeObj.carId = timeData.carId;
          this.timeObj.startTime = timeData.startTime;
          this.timeObj.endTime = timeData.endTime;
          this.timeObj.types = timeData.types;
        }
        console.log(this.timeObj.types);
        clearInterval(this.timer);
        this.timer = null;
        if (this.timeObj.types.length > 0 && this.timeObj.types[0] === 7) {
          this.timeNum = 60000;
        } else {
          this.timeNum = 5000;
        }
        this.timer = setInterval(async () => {
          await this.getData1();
        }, this.timeNum);
        this.disProgress = true;
        const params = {
          param: {
            carId: 2,
            startTime: timeData && timeData.startTime ? timeData.startTime : this.timeObj.startTime,
            endTime: timeData && timeData.endTime ? timeData.endTime : this.timeObj.endTime,
            types: timeData && timeData.types ? timeData.types : this.timeObj.types,
          },
        };
        const res = await weightList(params);
        const { code, data, msg } = res.data;
        if (code === 200) {
          let { list } = this;
          list = data;
          this.list = [...list];
          this.$message.success('获取数据成功');
          this.disProgress = false;
        } else {
          // this.$message.error(msg);
        }
      } catch (error) {
        // this.$message.error(error);
      }
    },
    async getData1() {
      try {
        const params = {
          param: {
            carId: this.timeObj.carId,
            startTime: this.timeObj.startTime,
            endTime: this.timeObj.endTime,
            types: this.timeObj.types,
          },
        };
        const res = await weightList(params);
        const { code, data, msg } = res.data;
        if (code === 200) {
          let { list } = this;
          list = data;
          this.list = [...list];
        } else {
          this.$message.error(msg);
        }
      } catch (error) {
        this.$message.error(error);
      }
    },
  },
};
</script>

<style lang="stylus" scoped>
.weight-box {
  margin-top: 14px;
  text-align: left;
  padding-left: 10%;
  padding-top: 10px;
  font-size: 18px;
  font-weight: bold;
}

.progress {
  z-index: 1001;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  margin: 0;
  height: 8px;
}
</style>