bigDataApp/pages/disease/mls/forecastResult.vue

<template>
  <view class="bigBox">
    <u-card :show-head="false" margin="0rpx 20rpx" :show-foot="false">
      <view class="cardBox" slot="body">
        <view class="selecttimes" @click="tiemshow = !tiemshow">
          <view class="timesbox">
            <image
              :src="$imageURL+'/bigdata_app/image/prevention/1acfe2751c01d3786cdc49b83d7e505.png'"
              mode=""
            ></image>
            <p>{{ initTime ? '出苗期' : begintime }}</p>
            <p class="or">~</p>
            <p>{{ initTime ? '收获期' : end }}</p>
            <u-icon
              name="rili"
              custom-prefix="custom-icon"
              class="icon"
            ></u-icon>
          </view>
          <u-calendar
            v-model="tiemshow"
            mode="range"
            @change="tiemchange"
          ></u-calendar>
        </view>
        <view class="empty" v-if="initTime"> 请先选择出苗期和收获期 </view>
        <view class="empty" v-else-if="list.length == 0"> 数据为空 </view>
        <scroll-view scroll-top="0" scroll-x="true" class="scroll-X" v-else>
          <table class="table">
            <tr class="tr">
              <th class="th" v-for="(value, key) in param" :key="'a' + key">
                {{ value }}
              </th>
            </tr>
            <tr class="tr" v-for="(items, indexs) in list" :key="'b' + indexs">
              <td class="td" v-for="(value, key) in param">{{ items[key] }}</td>
            </tr>
          </table>
        </scroll-view>
      </view>
      <view class="" slot="foot"
        ><u-icon name="chat-fill" size="34" color="" label="30评论"></u-icon
      ></view>
    </u-card>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tiemshow: false,
      initTime: true,
      forecastId: '',
      end: '',
      begintime: '',
      list: [],
      param: {
        ciDai: '代/次',
        sTime: '本次侵染开始时间',
        eTime: '本次侵染结束时间',
        awsDeg: '本次侵染程度',
        awsFen: '本次侵染的分值',
        awsYao: '是否使用预报数据',
      },
    };
  },
  onLoad(option) {
    this.forecastId = option.id;
    this.end = parseInt(+new Date() / 1000);
    this.begintime = parseInt(this.end - 24 * 60 * 60);
  },
  methods: {
    async histprydatas() {
      //表格历史数据
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=wheat.potato.potato_time',
        data: {
          device_id: this.forecastId,
          start: this.begintime,
          end: this.end,
        },
      });
      console.log(res);
      this.list = res.data.list;
    },
    tiemchange(e) {
      console.log(e);
      this.initTime = false;
      //切换时间
      // this.begintime = parseInt(+new Date(e.startDate) / 1000);
      this.begintime = e.startDate;
      this.end = e.endDate;
      this.histprydatas();
    },
  },
};
</script>

<style scoped lang="less">
.bigBox {
  width: 100vw;
  height: calc(100vh - 80rpx);
  background: #eee;
  box-sizing: border-box;
  padding-top: 20rpx;
  overflow: hidden;

  .cardBox {
    height: 75vh;
    overflow-y: auto;
    padding-top: 20rpx;
    .empty {
      display: flex;
      justify-content: center;
      align-items: center;
      height: calc(100% - 60rpx);
    }
    .selecttimes {
      width: 90%;
      box-shadow: 0 0 10rpx #bcb9ca;
      padding: 10rpx 20rpx;
      box-sizing: border-box;
      margin: 0 auto;
      font-size: 28rpx;

      .timesbox {
        display: flex;
        justify-content: space-around;

        image {
          width: 30rpx;
          height: 30rpx;
          margin-top: 6rpx;
        }

        .icon {
          color: #949494;
          text-align: right;
          margin-left: 30rpx;
        }
      }

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

        .u-calendar__action__text {
          line-height: 25px;
        }
      }
    }

    .scroll-X {
      width: 100%;
      margin: 20rpx auto;
      height: calc(100% - 120rpx);
      overflow-y: 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;
      }
    }
  }
}
</style>