bigdata_WX/pages/cb/shuifeiL/history.vue

<template>
  <view>
    <view class="realtime">
      <scroll-view scroll-top="0" scroll-x="true" class="scroll-X">
        <table class="table">
          <tr class="tr" style="width: 2100rpx;">
            <th class="th" v-for="(item, index) in thdata" :key="'a' + index">{{ item }}</th>
          </tr>
          <tr class="tr" style="width: 2100rpx;" v-for="(items, indexs) in statusList" :key="items.device_id" v-if="statusList.length > 0">
            <td class="td">{{ items.device_name }}</td>
            <td class="td">{{ items.device_id }}</td>
            <td class="td">{{ items.name }}</td>
            <td class="td">{{ items.slave_index }}</td>
            <td class="td">{{ items.slave_name }}</td>
            <td class="td">{{ items.upltime | timeFormat() }}</td>
            <td class="td">
              <view v-if="type == 1">
                {{ items.values == 1 ? '开' : '关' }}
              </view>
              <view v-else>
                {{ items.values }}
              </view>
            </td>
          </tr>
          <tr class="tr" v-else>
            <td class="td" v-for="item in 7">暂无数据</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>
</template>

<script>
export default {
  data() {
    return {
      device_id: {},
      pagesum:1,
      page:1,
      type: '',
      statusList: [],
      thdata: [
        '设备名称',
        '设备ID',
        '变量名称',
        '从机序号',
        '从机名称',
        '时间',
        '值',
      ]
    }
  },
  methods: {
			prev() { //上一页
				if (this.page > 1) {
					this.page--
					this.geDetail()
				}
			},
			next() { //下一页
				if (this.page < this.pagesum) {
					this.page++
					this.geDetail()
				}
			},
    async geDetail() {
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=irrigation_system.waterfertilizer.water_fer_history_data',
        data: {
          dataPointId: this.device_id,
          page: this.page,
          page_size: 10,
        }
      })
      this.pagesum = Math.ceil(res.data.nums / 10) || 1
      if (res.data.length > 0) {
        this.statusList = res.data
      }
    },
  },
  onLoad(option) {
    this.device_id = option.device_id;
    this.type = option.type;
    this.geDetail()
  },
}
</script>

<style lang='less'>
page {
  padding: 20rpx;
  box-sizing: border-box;

  .realtime {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    box-shadow: 0 0 10rpx #bcb9ca;
    margin: 20rpx auto 30rpx;

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

      .tr {
        display: flex;
        overflow: hidden;

        .th,
        .td {
          display: inline-block;
          padding: 5rpx;
          width: 300rpx;
          text-align: center;
          height: 52rpx;
          line-height: 52rpx;
          border: 2rpx solid #f1f1f1;
        }
      }

      .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;
			}
		}

  }
}

.btn-box {
  text-align: center;
  padding: 20rpx 30rpx;
}

/deep/.u-calendar__action {
  display: flex;
  justify-content: space-around;

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