bigdata_WX/pages/cb/shuifeizsFirst/history.vue

<template>
  <view class="history-container">
    <custom-card>
      <block slot="backText">{{ title }}</block>
    </custom-card>
    <view class="calendar" @click="handleCalendarClick">
      <view class="calendar__label">选择日期</view>
      <view class="calendar__content">
        <text>{{ startTime }}</text>
        <text class="separate">-</text>
        <text>{{ endTime }} </text>
      </view>
      <view class="calendar__link">
        <u-icon name="arrow-right" color="#4e5969"></u-icon>
      </view>
    </view>
    <view class="history-form-container">
      <view class="form-header">
        <view class="form-header__title">设备名称</view>
        <view class="form-header__title">操作内容</view>
        <view class="form-header__title">操作人</view>
        <view class="form-header__title">操作时间</view>
      </view>
      <view class="scroll-container">
        <scroll-view
          class="main__right"
          v-if="historyList.length !== 0"
          scroll-y="true"
          style="height: 100%"
          @scrolltolower="scrolltolower"
          :show-scrollbar="true"
        >
          <view
            class="form-content"
            v-for="(item, index) in historyList"
            :key="index"
          >
            <view class="form-content__item form-content__item--text">{{
              item.oprecdName
            }}</view>
            <view class="form-content__item">
              <view class="item-open" v-if="item.oprecdContent == '打开'"
                >打开</view
              >
              <view class="item-close" v-else>{{ item.oprecdContent }}</view>
            </view>
            <view class="form-content__item">{{ item.oprcdCreatorName }}</view>
            <view class="form-content__item">
              <view class="item-time">{{
                getTopTime(item.oprcdCreateddate)
              }}</view>
              <view class="item-date">{{
                getYearTime(item.oprcdCreateddate)
              }}</view>
            </view>
          </view>
        </scroll-view>
        <u-empty v-else style="height: 80%"
      /></view>
    </view>
    <u-calendar
      v-model="show"
      mode="range"
      @change="handleConfirm"
    ></u-calendar>
    <!-- <wu-calendar
      ref="calendar"
      mode="range"
      :insert="false"
      :maskClick="true"
      :rangeSameDay="true"
      :itemHeight="55"
      @confirm="handleConfirm"
    ></wu-calendar> -->
  </view>
</template>
<script>
import solenoidValve from './assets/solenoidValve.png';
export default {
  name: 'actionHistory',
  data() {
    return {
      title: '操作记录',
      devBid: '',
      pageSize: 20,
      pageNum: 1,
      show: false,
      // 获取当前日期向前3个月
      startTime: this.formartDate(3),
      endTime: this.formartDate(),
      historyList: [],
      total: 0,
    };
  },
  computed: {
    hasMore() {
      return this.total > 0 && this.total > this.pageNum * this.pageSize;
    },
  },
  methods: {
    getTopTime(date) {
      return date.split(' ')[1];
    },
    getYearTime(date) {
      return date.split(' ')[0];
    },
    async getHistory() {
      const res = await this.$myRequest({
        url: '/api/v2/iot/mobile/device/sf/op/record/list/',
        method: 'post',
        header: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        data: {
          pageSize: this.pageSize,
          pageNum: this.pageNum,
          startTime: this.startTime + ' 00:00:00',
          endTime: this.endTime + ' 23:59:59',
          devBid: this.devBid,
        },
        sfType: true,
      });
      this.historyList = this.historyList.concat(res.data);
      this.total = res.total;
    },
    formartDate(month = 0) {
      const time = month * 30 * 24 * 60 * 60 * 1000;
      const timeStamp = new Date(new Date().getTime() - time);
      const year = timeStamp.getFullYear();
      const monthDate = timeStamp.getMonth() + 1;
      const monthStr = monthDate < 10 ? `0${monthDate}` : monthDate;
      const day = new Date().getDate();
      const dayStr = day < 10 ? `0${day}` : day;
      return `${year}-${monthStr}-${dayStr}`;
    },
    handleCalendarClick() {
      this.show = true;
      // this.$refs.calendar.open();
    },
    handleClose() {
      this.show = false;
    },
    scrolltolower() {
      if (this.hasMore) {
        this.pageNum++;
        this.getHistory();
      }
    },
    handleConfirm(e) {
      const startDate = e.startDate;
      const endDate = e.endDate;
      this.pageNum = 1;
      this.historyList = [];
      this.startTime = startDate;
      this.endTime = endDate;
      this.getHistory();
    },
  },
  onLoad(options) {
    const { devBid } = options;
    this.devBid = devBid;
    this.getHistory();
  },
};
</script>
<style scoped lang="scss">
uni-page-body {
  position: relative;
  height: 100%;
}
::v-deep .u-calendar__action {
  display: flex;
  justify-content: center;
  align-items: center;
}
::v-deep .u-hover-class {
  opacity: 0.6;
}
.scroll-container {
  height: calc(100vh - 420rpx);
}
.history-container {
  background: linear-gradient(180deg, #ffffff00 0%, #fff 23.64%, #fff 100%),
    linear-gradient(102deg, #bfeadd 6.77%, #b8f1e7 40.15%, #b9eef5 84.02%);
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  .calendar {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 32rpx;
    line-height: 64rpx;
    border-radius: 16rpx;
    background-color: #fff;
    margin: 0 32rpx;
    &__icon {
      margin-right: 12rpx;
    }

    &__label {
      font-size: 28rpx;
      color: #666;
      margin-right: 10rpx;
    }

    &__content {
      font-size: 28rpx;
      color: #666;
      margin-left: 64rpx;
      .separate {
        margin: 0 6rpx;
      }
    }

    &__link {
      position: absolute;
      right: 20rpx;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .history-form-container {
    width: calc(100% - 64rpx);
    height: calc(100vh - 300rpx);
    margin: 32rpx;
    border-radius: 16rpx;
    background: #fff;
    overflow: hidden;
    .form-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 80rpx;
      width: 100%;
      border-bottom: 2rpx solid #e4e7ed;
      &__title {
        width: 25%;
        text-align: center;
        font-size: 28rpx;
        color: #042118;
        font-family: 'Source Han Sans CN VF';
        font-style: normal;
        font-weight: 400;
        line-height: normal;
      }
    }
    .form-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 96rpx;
      width: 100%;
      border-bottom: 2rpx solid #e4e7ed;
      &__item {
        width: 25%;
        text-align: center;
        font-size: 28rpx;
        font-family: 'Source Han Sans CN VF';
        font-style: normal;
        color: #042118;
        .item-open {
          display: inline-flex;
          height: 40rpx;
          padding: 4rpx 16rpx;
          justify-content: center;
          align-items: center;
          border-radius: 20rpx;
          background: #14a47824;
          color: #14a478;
          font-family: 'Source Han Sans CN VF';
          font-size: 24rpx;
          font-weight: 400;
        }
        .item-close {
          display: inline-flex;
          height: 40rpx;
          padding: 4rpx 16rpx;
          justify-content: center;
          align-items: center;
          border-radius: 20rpx;
          background: #7a82911a;
          color: #7a8291;
          font-family: 'Source Han Sans CN VF';
          font-size: 24rpx;
          font-weight: 400;
        }
        .item-time {
          color: #042118;
          font-family: 'Source Han Sans CN VF';
          font-size: 28rpx;
          font-weight: 400;
        }
        .item-date {
          color: #042118;
          font-family: 'Source Han Sans CN VF';
          font-size: 24rpx;
          font-weight: 400;
        }
      }
      &__item--text {
        width: 20%;
        margin-left: 5%;
        // 超出隐藏
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: left;
      }
    }
  }
}
</style>