fj-dc-ui/.svn/pristine/04/042102925d800d9daaccde0bfd73f521cbf8d98e.svn-base

<template>
  <div id="dbsMain">
    <el-row style="margin-bottom:5px;">
      <el-col :span="24">
        <div class="grid-content bg-purple-light">
          <div style="padding:15px 5px 5px 5px;">
            <span style="font-size: 12px;margin-left: 10px;">名称：</span>
            <el-input style="width:150px;" class="kjr-input" size="mini" v-model="model_dibiaoshui_name"
                      placeholder="请输入名称查询" @keydown.enter.native="searchByName" clearable>
            </el-input>
            &nbsp;&nbsp;&nbsp;
            <el-button @click="searchByName" size="mini" type="primary">查询</el-button>
          </div>
          <div style="padding:5px;">
            <el-col :span="5">
              <div style="height: 500px;overflow: auto">
                <provTreeList :rootCode="rootCode" :rootType="rootType"
                              @provTreeSelectChange="provTreeSelectChangeHandler"
                >
                </provTreeList>
              </div>

            </el-col>
            <el-col :span="19">
              <el-table :data="tableData_dibiaoshuiList" v-loading="loading" height="500" border stripe style="width: 100%">
                <el-table-column type="index" width="50" label="序号" align="center" :index="indexMethod_country">
                </el-table-column>
                <el-table-column prop="swhsName" label="地表水水源地名称" width="150" align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="swhsLoc" label="所在位置" width="150" align="center"  show-overflow-tooltip></el-table-column>
                <el-table-column prop="tra" label="管理单位所属行业" width="200" align="center"  show-overflow-tooltip></el-table-column>
                <el-table-column prop="wainNum" label="取水口数量" width="150" align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="wainUse" label="主要取水用途" width="200" align="center"  show-overflow-tooltip>
                  <template slot-scope="scope" v-if="scope.row.wainUse">
                    <span v-if="scope.row.wainUse == '1'">城乡生活</span>
                    <span v-if="scope.row.wainUse == '2'">城镇生活</span>
                    <span v-if="scope.row.wainUse == '3'">乡村生活</span>
                  </template>
                </el-table-column>
                <el-table-column label="取水水源类型" width="110" align="center">
                  <template slot-scope="scope" v-if="scope.row.wainWasoType">
                    <span v-if="scope.row.wintType == '1'">水库</span>
                    <span v-if="scope.row.wintType == '2'">湖泊</span>
                    <span v-if="scope.row.wintType == '3'">河流</span>
                    <span v-if="scope.row.wintType == '9'">其他</span>
                  </template>
                </el-table-column>
                <el-table-column label="水质目标" width="160" align="center">
                  <template slot-scope="scope" v-if="scope.row.waquGoal">
                    <span v-if="scope.row.waquGoal == '1'">表示Ⅰ类水质目标</span>
                    <span v-if="scope.row.waquGoal == '2'">表示Ⅱ类水质目标</span>
                    <span v-if="scope.row.waquGoal == '3'">表示Ⅲ类水质目标</span>
                    <span v-if="scope.row.waquGoal == '4'">表示Ⅳ类水质目标</span>
                    <span v-if="scope.row.waquGoal == '5'">表示Ⅴ类水质目标</span>
                    <span v-if="scope.row.waquGoal == '6'">表示劣Ⅴ类水质目标</span>
                  </template>
                </el-table-column>
                <el-table-column prop="watArea" label="水面面积(k㎡)" width="100" align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="watArea1stProt" label="一级保护区水域面积(k㎡)" width="100" align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="watArea2ndProt" label="二级保护区水域面积(k㎡)" width="100" align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="wintLakeName" label="取水湖泊名称" width="200" align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="wintRsName" label="取水水库名称" width="200" align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="wintRvName" label="取水河流名称" width="200" align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column label="水源地现状-水质类别" width="160" align="center">
                  <template slot-scope="scope" v-if="scope.row.wquaCat">
                    <span v-if="scope.row.wquaCat == '1'">表示Ⅰ类水质目标</span>
                    <span v-if="scope.row.wquaCat == '2'">表示Ⅱ类水质目标</span>
                    <span v-if="scope.row.wquaCat == '3'">表示Ⅲ类水质目标</span>
                    <span v-if="scope.row.wquaCat == '4'">表示Ⅳ类水质目标</span>
                    <span v-if="scope.row.wquaCat == '5'">表示Ⅴ类水质目标</span>
                    <span v-if="scope.row.wquaCat == '6'">表示劣Ⅴ类水质目标</span>
                  </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" min-width="200" align="center">
                  <template slot-scope="scope">
                    <el-button type="text" size="small" @click="DbsInfo(scope.row,'location')">定位</el-button>
                    <el-button type="text" size="small" @click="DbsInfo(scope.row,'baseInfo')">基础信息</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div class="block">
                <el-pagination background @size-change="handleSizeChange_QuShuiKou"
                               @current-change="handleCurrentChange_QuShuiKou" :page-sizes="[10,50, 100, 200]"
                               :page-size="15" layout="total,sizes, prev, pager, next" :pager-count="5"
                               :total="recordTotal_dibiaoshui">
                </el-pagination>
              </div>
            </el-col>
          </div>

        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import provTreeList from '../../../widgets/provTreeListAndChina'
  import request from '../../../utils/gw_ajax_request.js';
  export default {
    name: "InfoSurfaceWater",
    components:{
      provTreeList
    },
    props:["dcztStatus","dcztDisabled","currentAdCode"],
    data() {
      return {

        rootCode:'000000',
        rootType:'2',
        model_dibiaoshui_name:'',
        recordTotal_dxs:'',
        tableData_dibiaoshuiList:[],
        recordTotal_dibiaoshui:0,
        pageSize_dibiaoshui: 10,
        pageIndex_dibiaoshui: 1,
        loading: false,
        adCode:'',

      }
    },
    computed: {
      recPersId() {
        return localStorage.getItem("userid") ? localStorage.getItem("userid") : ''
      }
    },
    mounted(){
       this.adCode = this.currentAdCode;
        this.rootCode = this.currentAdCode;
      let _this = this;
      _this.dczt = _this.dcztStatus;
      _this.loadTableQuShuiKou();
    },
    methods:{
      indexMethod_country(index) {
        return (index + 1) + this.pageSize_dibiaoshui * (this.pageIndex_dibiaoshui - 1)
      },
      provTreeSelectChangeHandler(params) {
        if(params.code == '000000000000'){
          this.adCode = '';
        }else{
          this.adCode = params.code;
        }
        this.$nextTick(()=>{
          this.pageSize_dibiaoshui = 10;
          this.pageIndex_dibiaoshui = 1;
          this.loadTableQuShuiKou();
        })


      },
      searchByName() {
        this.loadTableQuShuiKou();
      },
      loadTableQuShuiKou() {
        let _this = this;
        _this.loading = true;
        request.post(`/dc/att/swhs/base/queryListByPage`, {
            stnm: _this.model_dibiaoshui_name,
            pageNum: _this.pageIndex_dibiaoshui,
            pageSize: _this.pageSize_dibiaoshui,
            adCode: _this.adCode,
            displayLevel:''
            // count: false
        }).then((res) => {
          if (res.success) {
            _this.$nextTick(function () {
              _this.loading = false;
              var obj = res.data;
              _this.tableData_dibiaoshuiList = obj.list;
              _this.recordTotal_dibiaoshui = obj.total;
            })

          }
        })
      },
      handleSizeChange_QuShuiKou (pageSize) {
        this.pageSize_dibiaoshui = pageSize;
        this.loadTableQuShuiKou();

      },
      handleCurrentChange_QuShuiKou (pageNum) {
        this.pageIndex_dibiaoshui = pageNum;
        this.loadTableQuShuiKou();

      },
      bShuikuStatistic(){

      },
      DbsInfo(row,info){
        this.$emit('DbsInfo',row,info);
      },
    },
    watch:{
      currentAdCode(n,o){
        if(n == '0000000000'){
          n = '';
        }
        this.adCode = n;
        this.loadTableQuShuiKou();
      }

    }
  }
</script>

<style>
  #dbsMain .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
    background-color: #558ed0;
  }
</style>