drp-ui/src/views/business/as/afterAalesProblemAnalysis/index.vue

<template>
  <div class="afterAalesProblemAnalysis">
    <el-row :gutter="10">
      <el-col :span="6">
        <el-form ref="form" :model="queryParams" label-width="80px">
          <el-form-item label="项目/医院">
            <el-autocomplete
              v-model="queryParams.projectSource"
              :fetch-suggestions="querySearchAsync"
              placeholder="请输入内容"
              @select="handleSelect"
              clearable
            ></el-autocomplete>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" plain @click="dayBtn">近7天</el-button>
        <el-button type="primary" plain @click="weekBtn">近7周</el-button>
        <el-button type="primary" plain @click="monthBtn">近7月</el-button>
      </el-col>
      <el-col :span="6">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="queryBtn">搜索</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-table
        :data="dataList"
        style="width: 100%;margin-top: 20px"
        :height="tableHeight"
        :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}"
        border
      >
        <el-table-column
          prop="date"
          label="序号"
          width="90">
          <template #default="scope">
            {{scope.$index+1}}
          </template>
        </el-table-column>
        <el-table-column
          prop="projectSource"
          label="项目/医院"
          width="230">
        </el-table-column>
        <el-table-column
          prop="address"
          label="总问题(已解决/未解决)"
          width="230">
          <template #default="scope">
            <a>{{scope.row.solvedProblem+'/'+scope.row.unsolvedProblem}}</a>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="软件问题(已解决/未解决)"
          width="230">
          <template #default="scope">
            <a>{{scope.row.typeOneSolvedProblem+'/'+scope.row.typeOneUnsolvedProblem}}</a>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="服务问题(已解决/未解决)"
          width="230">
          <template #default="scope">
            <a>{{scope.row.typeThreeSolvedProblem+'/'+scope.row.typeThreeUnsolvedProblem}}</a>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="硬件问题(已解决/未解决)"
          width="230">
          <template #default="scope">
            <a>{{scope.row.typeTwoSolvedProblem+'/'+scope.row.typeTwoUnsolvedProblem}}</a>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="其他问题(已解决/未解决)"
          width="230">
          <template #default="scope">
            <a>{{scope.row.typeFourSolvedProblem+'/'+scope.row.typeFourUnsolvedProblem}}</a>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page=this.queryParams.pageNum
      :page-sizes="[10,20,50,100]"
      :page-size=this.queryParams.pageSize
      layout="total, sizes, prev, pager, next, jumper"
      :total=this.total>
    </el-pagination>
  </div>
</template>

<script>
import {getAnalysisResult} from "@/api/business/as/afterAalesProblemAnalysis";
import {getHospitalAndProcessor} from "@/api/business/as/problemInfo";

export default {
  created() {
    this.queryBtn()
    this.getTableHeight()
    getHospitalAndProcessor().then(res =>{
      if(res.code == 200){
        this.restaurants = res.data
      }
    })
  },
  methods:{
    //计算table高度(动态设置table高度)
    getTableHeight() {
      let tableH = 120; //距离页面下方的高度
      let tableHeightDetil = window.innerHeight - tableH;
      if (tableHeightDetil <= 300) {
        this.tableHeight = 300;
      } else {
        this.tableHeight = window.innerHeight - tableH;
      }
    },
    querySearchAsync(queryString, cb) {
      this.restaurants.forEach((item) =>{
        item.value=item.projectSource
      })
      var restaurants = this.restaurants
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
      cb(results)
    },
    createStateFilter(queryString) {
      return (item) => {
        return item.projectSource.match(queryString);
      };
    },
    handleSelect(item) {
      this.queryParams.projectSource=item.projectSource
    },
    handleSizeChange(val) {
      this.queryParams.pageSize = val
      this.queryBtn()
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val
      this.queryBtn()
    },
    dayBtn(){
      this.queryParams.dayRange=7
      this.queryBtn()
      this.queryParams.dayRange=''
    },
    weekBtn(){
      this.queryParams.weekRange=7
      this.queryBtn()
      this.queryParams.weekRange=''
    },
    monthBtn(){
      this.queryParams.monthRange=7
      this.queryBtn()
      this.queryParams.monthRange=''
    },
    queryBtn(){
      if(this.dateRange && this.dateRange.length>0){
        this.queryParams.startTime = this.dateRange[0]
        this.queryParams.endTime = this.dateRange[1]
      }else {
        this.queryParams.startTime = ''
        this.queryParams.endTime = ''
      }
      getAnalysisResult(this.queryParams).then(res =>{
        if(res.code ==200){
          this.dataList=res.rows
          this.total=res.total
        }
      })
    }
  },
  data(){
    return {
      tableHeight:'',
      total:'',
      dataList:[],
      dateRange:[],
      queryParams:{
        pageNum:1,
        pageSize:10,
        projectSource:'',
        startTime:'',
        endTime:'',
        dayRange:'',
        weekRange:'',
        monthRange:''
      }
    }
  }
}
</script>

<style>

</style>