cbsl-app/pages/simpleResviror/ysqxx/ssyl.vue

<template>
  <view class="sssw-box">
    <view class="time-ranger">
      <uni-datetime-picker type="datetimerange" v-model="tm" @change="handleRanger" @open="onPickerOpen" hide-second
        :clear-icon="false" rangeSeparator="至"></uni-datetime-picker>
      <view class="select-bar">
        <uni-data-select v-model="value" :localdata="list" @change="change" :clear="false">
        </uni-data-select>
      </view>
    </view>
    <view class="realWater-content">
      <qiun-data-charts canvasId="myChart1" type="line" :chartData="chartData.chartData" :echartsApp="true"
        :eopts="chartData.eopts" />
    </view>
    <div class="tableHead">
      <div class="td t1">序号</div>
      <div class="td t2">时间</div>
      <div class="td t3">实时雨量(mm)</div>
    </div>
    <div class="tableBody">
      <div v-for="(item, index) in yllist" class="tableRow">
        <div class="td t1">{{ index + 1 }}</div>
        <div class="td t2">{{ item.tm ? item.tm.slice(0,16) : "" }}</div>
        <div class="td t3">{{ item.drp === null ? '-' : item.drp }}</div>
      </div>
      <div :style="{ height: '80px' }">
      </div>
    </div>
  </view>
</template>

<script>
import moment from "moment"
import waterOptions from './ylOption'
import { sw } from './mock'
const stm = moment().subtract(1, 'days').set({ minute: 0, second: 0 }).format("YYYY-MM-DD HH:00:00");
const etm = moment().set({ minute: 0, second: 0 }).format("YYYY-MM-DD HH:00:00");
export default {
  props: {
    stcd: String,
    resCode: String,
  },
  data() {
    return {
      tm: [stm, etm],
      list: [],
      value: "",
      chartData: waterOptions(),
      yllist: sw,
      chartOpts: {
        tooltip: {
          show: true
        },
      },
    }
  },
  methods: {
    onPickerOpen() {
      this.chartOpts.tooltip.show = false
    },
    handleRanger(e) {
      this.tm = [...e]
    },
    change(e) {
      this.value = e;
      this.chartOpts.tooltip.show = false
    }
  },
  mounted() {

  }
}
</script>
<style lang="scss" scoped>
.sssw-box {
  .time-ranger {
    margin: 10px 0;
  }

  .select-bar {
    margin: 10px 0;
  }

  .realWater-content {
    height: 320px;
  }

  .tableHead {
    width: 100%;
    margin-top: 5px;
    height: 50px;
    background-color: #e4f2fe;
    display: flex;
    color: #208FEE;
  }

  .tableBody {
    width: 100%;
    height: calc(100vh - 214px);
    background-color: #f7f7f7; //#ffffff;
    overflow-y: scroll;
  }

  .tableRow {
    width: 100%;
    height: 46px;
    display: flex;
    border-bottom: 1px solid #eee;
    background-color: #ffffff;
  }

  .td {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
  }

  .t1 {
    width: 25%;
  }

  .t2 {
    width: 50%;
  }

  .t3 {
    width: 25%;
  }

}
</style>