FlowActuarial/ruoyi-ui/src/views/analysis/water-time/index.vue

<template>
  <div class="hum-page-container">
    <div class="hum-page-title">水位时间</div>
    <div class="hum-page-section hum-page-section-search">
      <div class="hum-page-search">
        <el-form :model="queryParams" size="large" ref="queryForm" label-position="top">
          <el-row :gutter="30">
            <el-col :span="6">
              <el-form-item label="选择站点">
                <SiteSelector @change="id => queryParams.siteId = id" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="选择类型">
                <el-select :value="queryParams.type" placeholder="请选择类型" @change="typeChangeHandler">
                  <el-option
                    v-for="item in typeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="选择日期">
                <el-date-picker
                  v-model="dateRange"
                  @change="dateRangeChangeHandler"
                  value-format="yyyy-MM-dd hh:mm:ss"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :clearable="false"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item class="hum-page-search-action">
                <el-button type="primary" @click="handleQuery">查询</el-button>
                <el-button @click="resetQuery">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="hum-page-title" style="margin-top: 30px">
      <span>数据图</span>
      <div class="data-actions">
        <el-radio-group v-model="mode" size="mini" class="data-actions-radio">
          <el-radio-button label="chart">图标</el-radio-button>
          <el-radio-button label="table">表格</el-radio-button>
        </el-radio-group>
        <el-button type="primary" size="mini" @click="handleExport">导出</el-button>
      </div>
    </div>
    <div class="hum-page-section">
      <Chart ref="chart" v-if="mode === 'chart'" :queryParams="queryParams" />
      <Table ref="table" v-if="mode === 'table'" :queryParams="queryParams" />
    </div>
  </div>
</template>

<script>
import { parseTime } from '@/utils/ruoyi'
import SiteSelector from '@/components/SiteSelector';
import Chart from './chart'
import Table from './table'

const initDateRangeByType = (type) => {
  const start = new Date();
  const end = new Date();
  switch (type) {
    case 1:
      start.setDate(start.getDate() - 1);
      return [parseTime(start), parseTime(end)];
    case 2:
      start.setDate(start.getDate() - 2);
      return [parseTime(start), parseTime(end)];
    case 3:
      start.setDate(start.getDate() - 3);
      return [parseTime(start), parseTime(end)];
    case 4:
      start.setDate(start.getDate() - 4);
      return [parseTime(start), parseTime(end)];
    case 5:
      start.setMonth(start.getMonth() - 1);
      return [parseTime(start), parseTime(end)];
    case 6:
      start.setMonth(start.getMonth() - 3);
      return [parseTime(start), parseTime(end)];
    case 7:
      start.setFullYear(start.getFullYear() - 1);
      return [parseTime(start), parseTime(end)];
  }
}

export default {
  components: {
    SiteSelector,
    Chart,
    Table,
  },
  data() {
    const dateRange = initDateRangeByType(1);
    return {
      dateRange: dateRange,
      queryParams: {
        siteId: 0,
        type: 1,
        startTime: dateRange[0],
        endTime: dateRange[1],
      },
      mode: 'chart',
      loading: true,
      typeOptions: [
        { value: 1, label: '5分钟' },
        { value: 2, label: '10分钟' },
        { value: 3, label: '30分钟' },
        { value: 4, label: '小时' },
        { value: 5, label: '天' },
        { value: 6, label: '周' },
        { value: 7, label: '月' },
      ]
    }
  },
  methods: {
    handleQuery() {
      if (this.mode === 'chart') {
        this.$refs.chart.setOptions()
      } else {
        this.$refs.table.getList()
      }
    },
    resetQuery() {
      const dateRange = initDateRangeByType(1);
      this.dateRange = dateRange
      this.queryParams.type = 1
      this.queryParams.startTime = dateRange[0]
      this.queryParams.endTime = dateRange[1]
    },
    dateRangeChangeHandler(dateRange) {
      this.queryParams.startTime = dateRange[0];
      this.queryParams.endTime = dateRange[1];
    },
    typeChangeHandler(type) {
      const dateRange = initDateRangeByType(type);
      this.dateRange = dateRange;
      this.queryParams.type = type;
      this.queryParams.startTime = dateRange[0];
      this.queryParams.endTime = dateRange[1];
    },
    handleExport() {
      window.open(`${process.env.VUE_APP_BASE_API}/achievement/downWaterLevel?siteId=${this.queryParams.siteId}&type=${this.queryParams.type}&startTime=${this.queryParams.startTime}&endTime=${this.queryParams.endTime}`, '_blank')
    }
  }
}
</script>

<style scoped>
.hum-page-section-search {
  padding-bottom: 0;
}
.hum-page-search {
  border-bottom: 0;
}
.data-actions {
  display: flex;
  align-items: center;
}
.data-actions-radio {
  margin-right: 20px;
}
.data-actions-radio /deep/ .el-radio-button__orig-radio:checked + .el-radio-button__inner {
  color: #06A3B5;
  background: #FFFFFF;
  border: 1px solid #DCDFE6;
  box-shadow: none;
}
</style>