bigDataApp/pages/cb/sy/history.vue

<template>
  <view>
    <view class="">
      <view class="timeandtype">
        <view class="timebox">
          <view class="firsttime" @click="timeshow = true">
            <view class="" v-if="start_time != ''">
              {{
                ((start_time == '' ? '请选择开始时间' : start_time) / 1000)
                  | timeFormat()
              }}
            </view>
            <view class="" v-else>
              {{ start_time == '' ? '请选择开始时间' : start_time }}
            </view>
          </view>
          <view class="jiange"> - </view>
          <view class="endtime" @click="timeshow = true">
            <view class="" v-if="end_time != ''">
              {{
                ((end_time == '' ? '请选择结束时间' : end_time) / 1000)
                  | timeFormat()
              }}
            </view>
            <view class="" v-else>
              {{ end_time == '' ? '请选择结束时间' : end_time }}
            </view>
          </view>
        </view>
      </view>
      <view class="refresh" @click="refresh"> 刷 新 </view>
      <view class="condition">
        <scroll-view scroll-top="0" scroll-x="true" class="scroll-X">
          <table class="table">
            <tr class="tr">
              <th class="th" v-for="(item, index) in thdata" :key="'a' + index">
                {{ item }}
              </th>
            </tr>
            <tr
              class="tr"
              v-for="(items, indexs) in historylistdata"
              :key="'b' + indexs"
              v-if="!forbidden"
            >
              <td class="td">{{ items.addtime | timeFormat() }}</td>
              <td class="td">{{ items.at == '' ? '--' : items.ah / 10 }}</td>
              <td class="td">{{ items.ah == '' ? '--' : items.at / 10 }}</td>
              <td class="td">{{ items.ds == 1 ? '开机' : '关机' }}</td>
            </tr>
            <tr class="tr" v-if="forbidden">
              <td class="td" v-for="item in 8">暂无数据</td>
            </tr>
          </table>
        </scroll-view>
        <view class="pagenumber">
          <button @click="prev">上一页</button>
          <view class="pagenumber_page"> 第 {{ page }} 页 </view>
          <view class="pagenumber_page"> 共 {{ pagesum }} 页 </view>
          <button @click="next" :disabled="forbidden">下一页</button>
        </view>
      </view>
    </view>
    <u-calendar
      v-model="timeshow"
      :mode="mode"
      @change="timechange"
      range-color="#999"
      btn-type="success"
      active-bg-color="#0BBC58"
      range-bg-color="rgba(11,188,88,0.13)"
    ></u-calendar>
  </view>
</template>

<script>
import uCharts from '../../../components/js_sdk/u-charts/u-charts/u-charts.js';
var canvaColumnA = null;
export default {
  data() {
    return {
      styles: {
        // width: "650rpx",
        height: '400rpx',
      },
      d_id: '',
      start_time: '',
      end_time: '',
      historydatas: [],
      titletext: ['24小时', '近一个月', '近半年', '近一年'],
      titleidnex: 0,
      device_id: '',
      page: 1,
      historylistdata: [],
      thdata: ['上报时间', '空气湿度(%RH)', '空气温度(°C)', '开机状态'],
      forbidden: false,
      pixelRatio: 1,
      canvastishiTF: false, //暂无数据提示
      dataloadingtf: true, //加载中提示
      pagesum: 1,
      worms: [],
      timeshow: false,
      mode: 'range',
    };
  },
  methods: {
    //forecast.worm_lamp.device_history_data历史数据列表
    async historylist() {
      //历史数据列表
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=forecast.worm_lamp.color_attract_list',
        data: {
          d_id: this.d_id,
          start_time: parseInt(this.start_time / 1000),
          end_time: parseInt(this.end_time / 1000),
          page: this.page,
          page_size: 10,
        },
      });
      this.historylistdata = res.data;
      console.log(res.data);
      this.pagesum = Math.ceil(res.counts / 10) || 1;
      if (res.data.length == 0) {
        this.forbidden = true;
      } else {
        this.forbidden = false;
      }
      console.log(this.historylistdata);
    },
    // forecast.send_control.get_device_config 获取当前时间的数据
    // async newdata() {
    // 	const res = await this.$myRequest({
    // 		url: '/api/api_gateway?method=sex_lure_nl.sex_lure.nl_device_mqtt',
    // 		data: {
    // 			d_id: this.d_id
    // 		}
    // 	})
    // 	if (res) {
    // 		uni.showToast({
    // 			title: '刷新成功',
    // 			duration: 2000,
    // 			icon: "none"
    // 		});
    // 	} else {
    // 		uni.showToast({
    // 			title: '刷新失败',
    // 			duration: 2000,
    // 			icon: "none"
    // 		});
    // 	}
    // },
    refresh() {
      //获取当前时间的数据
      this.historylist();
    },
    prev() {
      //上一页
      if (this.page > 1) {
        this.page--;
        this.historylist();
      }
    },
    next() {
      //下一页
      if (this.page < this.pagesum) {
        this.page++;
        this.historylist();
      }
    },
    clickLeft() {
      uni.navigateBack({
        delta: 1,
      });
    },
    closetime() {
      this.start_time = '';
      this.end_time = '';
      this.listpage = 1;
      this.historylist();
    },
    timechange(e) {
      console.log(e);
      this.start_time = +new Date(e.startDate);
      this.end_time = +new Date(e.endDate);
      this.listpage = 1;
      this.historylist();
    },
  },
  onLoad(option) {
    console.log(option);
    this.d_id = option.d_id;
    this.device_id = option.device_id;
  },
  onShow() {
    this.end_time = +new Date() + 1000;
    this.start_time = this.end_time - 24 * 60 * 60 * 1000;
    console.log(new Date(this.end_time), new Date(this.start_time));
    this.historylist();
  },
  onPullDownRefresh() {
    console.log('refresh');
    this.historylist();
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 1000);
  },
};
</script>

<style lang="less">
.timeandtype {
  // background-color: #F6F6FB;
  // padding: 20rpx;
  box-sizing: border-box;
  width: 90%;
  margin: 40rpx auto 0;
  .timebox {
    box-shadow: 0 0 10rpx #bcb9ca;
    display: flex;
    background-color: #fff;
    padding: 10px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;

    .jiange {
      width: 5%;
      text-align: center;
    }

    .firsttime,
    .endtime {
      width: 45%;
      text-align: center;
    }
  }

  .warntypebox {
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    padding: 10px;
    border-top: 1px solid #f6f6fb;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
  }
}
.shuju_one,
.shuju_two {
  // position: absolute;
  // top: 100px;
  // width: 90%;
  // left: 5%;
  width: 90%;
  margin: 40rpx auto;
  box-shadow: 0 0 10rpx #bcb9ca;
  padding-top: 20rpx;
  height: 550rpx;

  .canvastishi {
    font-size: 32rpx;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -64rpx;
    margin-top: -21rpx;

    .dataloading:after {
      overflow: hidden;
      display: inline-block;
      vertical-align: bottom;
      animation: ellipsis 2s infinite;
      content: '\2026';
    }

    @keyframes ellipsis {
      from {
        width: 2px;
      }

      to {
        width: 15px;
      }
    }
  }

  .shuju_one_title {
    width: 70%;
    margin: 0 auto;
    display: flex;

    .tltle_text {
      width: 25%;
      border: 2rpx solid #b2b2b2;
      color: #57c878;
      text-align: center;
      font-size: 24rpx;
      height: 50rpx;
      line-height: 50rpx;
    }

    .title_text_color {
      width: 25%;
      border: 2rpx solid #57c878;
      background-color: #57c878;
      color: #fff;
      text-align: center;
      font-size: 24rpx;
      height: 50rpx;
      line-height: 50rpx;
    }
  }
}

.refresh {
  width: 90%;
  // margin: 40rpx auto;
  margin-left: 5%;
  margin-top: 20rpx;
  width: 160rpx;
  height: 50rpx;
  background-color: #57c878;
  color: #ffffff;
  line-height: 50rpx;
  text-align: center;
}

.condition {
  width: 90%;
  margin: 40rpx auto;
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  box-shadow: 0 0 10rpx #bcb9ca;
  margin-bottom: 30rpx;

  .scroll-X {
    width: 95%;
    margin: 20rpx auto;

    .table {
      width: 100%;
    }

    .tr {
      width: 1070rpx;
      display: flex;
      overflow: hidden;

      .th,
      .td {
        display: inline-block;
        padding: 5rpx;
        width: 240rpx;
        text-align: center;
        height: 52rpx;
        line-height: 52rpx;
      }

      .th:first-child,
      .td:first-child {
        width: 350rpx;
      }
    }

    .tr:nth-child(2n-1) {
      background-color: #f5fff8;
    }

    .tr:first-child {
      background-color: #57c878;
      color: #fff;
    }
  }

  .pagenumber {
    display: flex;
    margin: 20rpx auto;
    width: 100%;
    justify-content: space-around;

    button {
      width: 150rpx;
      height: 50rpx;
      line-height: 50rpx;
      font-size: 26rpx;
      text-align: center;
      background-color: #57c878;
      color: #ffffff;
    }

    .pagenumber_page {
      // width: 100rpx;
      height: 50rpx;
      line-height: 50rpx;
      font-size: 26rpx;
      text-align: center;
    }
  }
}
::v-deep .u-calendar__action {
  display: flex;
  justify-content: space-around;

  .u-calendar__action__text {
    line-height: 25px;
  }
}
</style>