fj-dc-ui/.svn/pristine/3c/3c39cf70e19a043d497091b60d8b15cd18a16b2b.svn-base

<template>
  <el-main class="history_project">
    <el-card>
      <div>
        <el-form ref="form" :inline="true" label-width="84px">
          <el-form-item label="年度" prop="planYr">
            <el-date-picker
              v-model="year"
              type="year"
              value-format="yyyy"
              placeholder="选择年">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="地市">
            <el-select v-model="adCode" clearable>
              <el-option :label="item.nm" :value="item.id" v-for="(item,index) in addvList"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="工程名称">
            <el-input v-model="objName" clearable autocomplete="off" style="width: 160px"></el-input>
          </el-form-item>
          <el-form-item label="问题名称">
            <el-input v-model="pblmNm" clearable autocomplete="off" style="width: 160px"></el-input>
          </el-form-item>
          <el-form-item label="单位名称">
            <el-input v-model="subjectNames" clearable autocomplete="off" style="width: 160px"></el-input>
          </el-form-item>
          <el-form-item label="严重程度">
            <el-select v-model="pblmPasi" clearable placeholder="请选择" style="width: 90px">
              <el-option
                v-for="item in problemType"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
            <el-button style="margin-left:0;padding:7px 10px;" type="primary" @click="getProblemList()">查询</el-button>
        </el-form>
      </div>
      <div>
        <el-table
          :data="tableData"
          border
          stripe
          v-loading='loading'
          :height="tableHeight"
          style="width: 100%">
          <el-table-column align="center" label="序号" min-width="20">
            <template slot-scope="scope">{{ (pageIndex - 1) * pageSize + (scope.$index + 1) }}</template>
          </el-table-column>
          <el-table-column
            prop="objName"
            label="工程名称"
            show-overflow-tooltip
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="location"
            label="所属区域"
            show-overflow-tooltip
            min-width="60">
          </el-table-column>
          <el-table-column
            prop="pblmNm"
            label="问题名称"
            show-overflow-tooltip
            min-width="120">
          </el-table-column>
          <el-table-column
            prop="pblmDesc"
            show-overflow-tooltip
            label="问题阐述"
            show-overflow-tooltip
            min-width="200">
          </el-table-column>
          <el-table-column
            prop="pblmPasi"
            min-width="40"
            label="严重程度">
            <template slot-scope="scope">
              <p v-if="scope.row.pblmPasi == 0"><span class="inspPblmCate"
                                                      style="background: #27C19F;">一般</span></p>
              <p v-if="scope.row.pblmPasi == 1"><span class="inspPblmCate"
                                                      style="background: #E6A23C;">较重</span></p>
              <p v-if="scope.row.pblmPasi == 2"><span class="inspPblmCate"
                                                      style="background: #F56C6C;">严重</span></p>
            </template>
          </el-table-column>
          <el-table-column
            prop="pblmReason"
            show-overflow-tooltip
            min-width="160"
            label="主要原因分析">
          </el-table-column>
          <el-table-column
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="toCheckDetail(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="margin: 10px auto;overflow: auto;">
        <el-pagination
          style="float:left;"
          background
          @size-change="handleSizeChange"
          @current-change="pageIndexChange"
          :current-page.sync="pageNum"
          :page-sizes="[10, 20, 300, 40]"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
      <problem-detail-com v-if="showFileVisiual" :problemId="problemId"
                          @dialogClose="dialogClose"></problem-detail-com>
    </el-card>
  </el-main>
</template>
<script>

  import request from "@util/gw_ajax_request"
  import ProblemDetailCom from './dialogCom/ProblemDetails1.vue'

  export default {
    data() {
      return {
        problemType: [
          {label: '一般', value: '0'},
          {label: '较重', value: '1'},
          {label: '严重', value: '2'}
        ],
        year: "",
        adCode: "",
        objName: "",
        addvList: [],
        pblmPasi: '',  //严重程度
        pblmNm: '',
        showFileVisiual: false,
        subjectNames: '',  //单位名称，多个单位逗号拼接字符串
        tableData: [],
        problemId: '',
        pageIndex: 1,
        pageSize: 20,
        total: 0,
        loading: false,
        tableHeight: window.innerHeight - 300,
      }
    },
    components: {
      ProblemDetailCom
    },
    computed: {
      persId() {
        return localStorage.getItem("userid") ? localStorage.getItem("userid") : "1098101939614724096";
      },
      organCode() {
        return localStorage.getItem('currentRlcode') ? localStorage.getItem('currentRlcode') : ''
      },
    },
    created() {
      this.getCityAddvcd();
    },
    mounted() {
      if(this.$route.query.date){
          this.year = this.$route.query.date;
          this.adCode = this.$route.query.adCode;
      }
      this.getProblemList();
    },
    activated() {
    },
    methods: {
      //获取地市级行政区划
      getCityAddvcd() {
        var _self = this;
        request.get(`/dc/att/adXBase/getAdTreeByAdCd`, {
          params: {
            'adCd': this.organCode,
            'level': "2",
          }
        }).then(res => {
          if (res.success) {
            _self.addvList = res.data.children;
          }
        })
      },
      getProblemList() {
        this.loading = true;
        let paramsObj = {
          year: this.year,
          adCode: this.adCode,
          objName: this.objName,
          pblmNm: this.pblmNm,
          subjectNames: this.subjectNames,
          pblmPasi: this.pblmPasi,
          pageNum: this.pageIndex,
          pageSize: this.pageSize
        };
        request.post(`tac/province/pblm/info/finalResults`, paramsObj).then(res => {
          if (res.success) {
            this.loading = false;
            this.tableData = res.data.list;
            this.total = res.data.total
          } else {
            this.loading = false
            this.$message.error(res.message)
          }
        }).catch(err => {
          this.$message.error(err)
        })
      },
      pageIndexChange(val) {
        this.pageIndex = val;
        this.getProblemList();
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.getProblemList();
      },
      dialogClose() {
        this.showFileVisiual = false
        this.getProblemList()
      },
      // 查看问题详情
      toCheckDetail(row) {
        this.problemId = row.id
        this.showFileVisiual = true
      }
    },
    watch: {}
  }
</script>
<style lang="scss">
  .history_project {
    width: 100%;
    height: 100%;
    padding: 0;
    .inspPblmCate {
      padding: 2px 10px;
      border-radius: 10px;
      color: #ffffff;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
    }

    .el-select {
      width: 8vw;
    }
  }
</style>