Bjjs-Cloud/ruoyi-ui/src/views/water/dontaipingjia.vue

<template>
  <div class="dtpj-index">
  <el-form ref="dtpjFormRef" :model="dtpjForm" :inline="true" size="small" class="dtpj-form">
    <el-form-item label="时间选择：">
      <el-select v-model="dtpjForm.timeType" placeholder="请选择..." style="width: 60px;">
        <el-option 
          v-for="(item) in timeTypeList"
          :key="item.value"
          :label="item.label" 
          :value="item.value" 
        />
      </el-select>
    </el-form-item>
    <el-form-item label="月份：" v-if="dtpjForm.timeType == 'month'">
      <el-date-picker
        v-model="dtpjForm.monthrange"
        value-format="YYYY-DD"
        type="monthrange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      />
    </el-form-item>
    <el-form-item label="年份：" v-if="dtpjForm.timeType == 'year'">
      <el-col :span="10">
        <el-date-picker
          v-model="dtpjForm.startYear"
          value-format="YYYY"
          type="year"
          placeholder="开始时间"
          style="width: 90px"
        />
      </el-col>
      <el-col class="text-center" :span="1" style="margin: 0 0.5rem">-</el-col>
      <el-col :span="10">
        <el-date-picker
          v-model="dtpjForm.endYear"
          value-format="YYYY"
          type="year"
          placeholder="结束时间"
          style="width: 90px"
        />
      </el-col>
    </el-form-item>
    <el-form-item label="流域：" style="width: 10%;">
      <el-select v-model="dtpjForm.liuyu" placeholder="请选择...">
        <el-option 
          v-for="(item) in liuYuList"
          :key="item.value"
          :label="item.label" 
          :value="item.value" 
        />
      </el-select>
    </el-form-item>
    <el-form-item label="省份：" style="width: 10%;">
      <el-select v-model="dtpjForm.province" placeholder="请选择...">
        <el-option 
          v-for="(item) in provinceList"
          :key="item.value"
          :label="item.label" 
          :value="item.value" 
        />
      </el-select>
    </el-form-item>
    <el-form-item label="水功能区：" style="width: 10%;">
      <el-select v-model="dtpjForm.waterFunc" placeholder="请选择...">
        <el-option 
          v-for="(item) in waterFuncList"
          :key="item.value"
          :label="item.label" 
          :value="item.value" 
        />
      </el-select>
    </el-form-item>
    <el-form-item label="评价方法：" style="width: 10%;">
      <el-select v-model="dtpjForm.evaluation" placeholder="请选择...">
        <el-option 
          v-for="(item) in evaluationList"
          :key="item.value"
          :label="item.label" 
          :value="item.value" 
        />
      </el-select>
    </el-form-item>
    <el-form-item label="关键字：" style="width: 8%;">
      <el-input v-model="dtpjForm.keyword" placeholder="关键字"/>
    </el-form-item>
    </el-form>
    <div class="dtpj-content">
      <div class="content-btns">
        <el-button type="primary" size="small" @click="handleRefresh">刷新</el-button>
        <el-button type="primary" size="small" @click="handleSearch">查询</el-button>
        <el-button type="primary" size="small" @click="handleReset">重置</el-button>
        <el-button type="primary" size="small" @click="handleAutoEva">自动评价</el-button>
      </div>
      <el-table 
        :data="dtpjData" 
        border 
        stripe
        style="width: 100%;" 
        :height="heightAll" 
        :header-cell-style="{
          background: '#d2eafa !important',
          fontSize: '12px'
        }"
      >
        <el-table-column type="index" width="50"/>
        <el-table-column prop="tm" label="名称" width="220"/>
        <el-table-column prop="tm" label="所属流域" align="center" width="120"/>
        <el-table-column prop="tm" label="起始断面" width="120"/>
        <el-table-column prop="tm" label="终止断面" width="120"/>
        <el-table-column prop="tm" label="水质目标" align="center" width="120"/>
        <el-table-column prop="tm" label="评价时段" align="center" width="120"/>
        <el-table-column prop="tm" label="评价日期" align="center" width="120"/>
        <el-table-column prop="tm" label="评价结果" align="center" width="120"/>
        <el-table-column prop="tm" label="达标情况" align="center" width="120"/>
        <el-table-column prop="tm" label="超标项目及倍数"/>
      </el-table>
      <el-pagination
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :size="pagination.size"
        :total="pagination.totalCount"
        :disabled=false
        background
        layout="total, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
const dtpjForm = ref({
  timeType:"month",
  monthrange:[],
  startYear:"",
  endYear:"",
  liuyu:"",
  province:"",
  evaluation:"",
  keyword:""
});
const timeTypeList =[
  {label:"月",value:"month"},
  {label:"年",value:"year"},
];
const liuYuList = ref([]);
const provinceList = ref([]);
const waterFuncList = ref([]);
const evaluationList = ref([]);
const heightAll = 82 + 'vh';
const dtpjData = ref([]);
const pagination = ref({
  currentPage: 1,
  pageSize: 10,
  totalCount: 0,
});

const handleRefresh = () => {};
const handleSearch = () => {};
const handleReset = () => {};
const handleAutoEva = () => {};

const handleSizeChange = (val) => {
  pagination.value.pageSize = val;
}
const handleCurrentChange = (val) => {
  pagination.value.currentPage = val;
}
</script>

<style scoped lang="scss">
.dtpj-index{
  width: 99%;
  height: 100%;
  margin: auto;
  .dtpj-form{
    width: 100%;
    padding: 5px 0;
    .el-form-item{
        margin-bottom: 0 !important;
    }
  }
  .dtpj-content{
    width: 100%;
    border: 1px solid #DCDFE6;
    .content-btns{
      width: 99%;
      margin: 5px auto;
      position: relative;
    }
  }
}
</style>