fj-dc-ui/.svn/pristine/e3/e33ad0a5ed1cabd41dd604639291a76b8ee9583b.svn-base

<template>
  <div v-loading="tableLoading">
    <el-container>
      <el-header id="dcdxHeader" style="height:120px;padding:10px 0px;">
        <el-row :gutter="10" style="margin-top: 5px;margin-bottom: 5px;">
          <el-col :span="6">
            <el-tag size="small" style="width: 175px;text-align: center;">
              <i class="el-icon-info"></i>
              <span style="margin-left: 5px">{{this.adName + " " + '暗访村个数总计：'}}</span>
              <span style="font-weight: 700;margin-left: 5px">{{this.totalt}}</span>
            </el-tag>
          </el-col>
          <el-col :span="18" style="text-align:right;"></el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form :inline="true" size="mini" class="demo-form-inline" style="padding-left: 10px;">

            <el-form-item label="行政区名称">
              <el-input v-model="searchObj.adNm" clearable placeholder="行政区名称"></el-input>
            </el-form-item>

            <el-form-item label="检查单位">
              <el-select v-model="searchObj.chkComId" clearable placeholder="检查单位">
                  <el-option v-for="item in lyjg1" :key="item.id" :label="item.nm" :value="item.id"></el-option>
              </el-select>
            </el-form-item>

          </el-form>
          </el-col>
          <el-col :span="24">
            <el-form :inline="true" size="mini" class="demo-form-inline" style="padding-left: 10px;">


            <el-form-item label="所在组">
              <el-autocomplete v-model="groupName" clearable value-key='nm' :fetch-suggestions="querySearchAsync" placeholder="请输入内容"
                @select="handleSelect"></el-autocomplete>
            </el-form-item>
            <el-form-item label="督查时间">
              <div style="display: flex;">
                <el-date-picker v-model="searchObj.startDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"></el-date-picker>
                <p style="padding-left: 10px;padding-right: 10px;">至</p>
                <el-date-picker v-model="searchObj.endDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"></el-date-picker>
              </div>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>

          </el-form>
          </el-col>
        </el-row>
      </el-header>
      <el-main
        style="overflow-x: hidden;padding:5px 0px;margin-bottom: 0px;"
        :style="{'height':dxdcMainHeight+'px'}"
      >
        <el-row style="margin-bottom: 0px;">
          <!-- <el-col :span="12"> -->
          <el-table border :data="tableData" tooltip-effect="dark" style="width: 100%">
            <el-table-column align="center" show-overflow-tooltip prop="province" label="省"  v-if="isXj" min-width="100"></el-table-column>
            <el-table-column align="center" show-overflow-tooltip prop="city" :label="ownAdName" min-width="100"></el-table-column>
            <el-table-column align="center" show-overflow-tooltip prop="county" label="县(区)" min-width="100"></el-table-column>
            <el-table-column align="center" show-overflow-tooltip prop="town" label="乡(镇)" min-width="100"></el-table-column>
            <el-table-column
              align="center"
              show-overflow-tooltip
              prop="adNm"
              label="行政村名(县*乡*镇*村)"
              min-width="160"
            ></el-table-column>
            <el-table-column align="center" show-overflow-tooltip prop="chkCom" label="检查单位" min-width="120"></el-table-column>
            <el-table-column align="center" show-overflow-tooltip prop="groupNm" label="所在组" min-width="100"></el-table-column>
            <el-table-column
              align="center"
              show-overflow-tooltip
              prop="isPoverty"
              label="是否贫困村"
              min-width="80"
            >
              <template slot-scope="scope">
                <span>{{formatRadio(scope.row.isPoverty)}}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              show-overflow-tooltip
              prop="isFluexc"
              label="是否氟超标地区"
              min-width="110"
            >
              <template slot-scope="scope">
                <span>{{formatRadio(scope.row.isFluexc)}}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              show-overflow-tooltip
              prop="isMtarea"
              label="是否山区"
              min-width="70"
            >
              <template slot-scope="scope">
                <span>{{formatRadio(scope.row.isMtarea)}}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              show-overflow-tooltip
              prop="isCenwtSupply"
              label="是否集中供水村"
              min-width="110"
            >
              <template slot-scope="scope">
                <span>{{formatRadio(scope.row.isCenwtSupply)}}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              show-overflow-tooltip
              prop="watersupplyPer"
              label="集中供水人口比例"
              min-width="120"
            >
              <template slot-scope="scope">
                <span>{{scope.row.watersupplyPer ? scope.row.watersupplyPer * 100 + '%' : ''}}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              sortable
              show-overflow-tooltip
              prop="visitDate"
              label="暗访日期"
              min-width="100"
            ></el-table-column>
            <!-- <el-table-column
              align="center"
              show-overflow-tooltip
              label="操作"
              min-width="100"
              fixed="right"
            >
              <template slot-scope="scope">
                <el-button type="primary" plain @click="showQus(scope.row)">问题</el-button>
              </template>
            </el-table-column> -->
          </el-table>
        </el-row>
      </el-main>
      <el-footer id="dxdcFooter" style="height: 35px;">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          :pager-count="5"
          :current-page.sync="pageNum"
          :page-size="pageSize"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          layout="sizes, total, prev, pager, next, jumper"
          :total="totalt"
        ></el-pagination>
      </el-footer>
    </el-container>
    <yshQueDialogShow
        v-if="yshQueDialogShowItem"
        :currentObjectRgstrId="currentObjectRgstrId"
        :currentObjectId="currentObjectId"
        :villageCode="currentVillageCode"
        :currentObjectName="currentResName"
        :villType="1"
        :objType="2"
        @cancelHandler="cancelHandler"
        @addShuiKuSuccess="addShuiKuSuccess"
      ></yshQueDialogShow>
  </div>
</template>

<script>
import request from "../../utils/gw_ajax_request.js";
import echartsPie from "../../widgets/echartsPie.vue";
export default {
  components: {
    echartsPie,
    yshQueDialogShow: resolve => {
      require(["./yshQueDialogShow.vue"], resolve);
    }
  },
  props: ["engIdh", "adCode", "adName",'currentNodeType','fengongxianCode','lyjg', "fenggongxianName", 'fengongxianChildren'],
  data() {
    return {
      groups:[],
      groupId:'',
      lyjg1:[],
      groupName:'',
      sttm:'',
      ettm:'',
      yshQueDialogShowItem: false,
      chartData1: {},
      chartData1All: {},
      isPKCount: "",
      isPKNotCount: "",
      searchObj: {
        pageNum: 1,
        pageSize: 10,
        adNm: "",
        adCode: this.adCode,
        persId: "",
        chkComId:'',
        chkCom:'',
        groupNm:'',
        groupId:'',
        startDate:'',
        endDate:'',
      },
      searchObjPK: {
        adNm: "",
        engId: "",
        isPoverty: "1"
      },
      searchObjNotPK: {
        engId: "",
        isPoverty: "0"
      },
      searchName: "",
      vitPeoDialogPanel: false,
      tableLoading: true,
      normalShow: true,
      adminShow: false,
      dxdcMainHeight: window.innerHeight - 327,
      pageNum: 1,
      pageSize: 10,
      totalt: 20,
      pageNumForVitPeo: 1,
      pageSizeForVitPeo: 10,
      showResultCountVitPeo: 20,
      tableData: [],
      tableData1: []
    };
  },
  mounted() {
    // this.lyjg1 = this.lyjg;
    this.searchObj.persId = this.userId;
    this.getAllGroup();
    // this.getVillageList();
    // this.getVillageListXianByNode();
  },

  watch: {
    lyjg(n,o){
      this.lyjg1 = this.lyjg;
    },
    groupName(n,o){
      if(n==''){
        this.groupId = '';
      }
    },
    fengongxianCode(newVal,oldVal){
        console.log(oldVal)
        console.log(newVal)
        if(newVal =='' || newVal ==null){
          this.tableData = []
          this.totalt = 0
          return
        }
        // if(newVal){
        //   // if(this.currentNodeType == 'node'){
        //   //   this.tableLoading = true
        //   //   this.getVillageListXianByNode()
        //   // }else{
        //   //   this.tableLoading = true
        //   //   this.getVillageListXian()
        //   // }
        //   this.tableLoading = true
        //   this.getVillageListXianByNode()
        // }

      },
      fenggongxianName(){
        this.tableLoading = true
        this.getVillageListXianByNode()
      }
  },
  computed: {
    userId: function() {
      return localStorage.getItem("userid")
        ? localStorage.getItem("userid")
        : "1098101939614724096";
    },
    guId: function() {
      return localStorage.getItem("guid")
        ? localStorage.getItem("guid")
        : "1098101939614724096";
    },
    isAdmin() {
      return localStorage.getItem("isAdmin") == 1 ? true : false;
    }
  },
  methods: {
     //获取所有的组
    getAllGroup(){
      var _self = this;
      request.get('/dc/user/getGroupByPersid',{params:{'persid':this.userId,'ptype':'2'}}).then((res)=>{
        if(res.success){
          _self.groups = res.data;
        }
      })
    },
    querySearchAsync(queryString, cb) {
      var restaurants = this.groups;
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 1500 * Math.random());
    },
    createStateFilter(queryString) {
      return (state) => {
        return (state.nm.toLowerCase().indexOf(queryString.toLowerCase()) != -1);
      };
    },
    handleSelect(item) {
      console.log(item);
      this.groupId = item.id;
    },
    onSubmit(){
      this.getVillageListXianByNode();
    },
    getVillageList() {
      request
        .post("/dc/insp/secsurveyVlg/getPageByCodeAndPerId", this.searchObj)
        .then(res => {
          if (res.success) {
            this.tableLoading = false;
            this.tableData = res.data.list;
            this.totalt = res.data.total;
          }
        });
    },
    getVillageListXian() {
      this.searchObj.engId = this.engIdh
      request
        .post("/dc/insp/secsurveyVlg/queryListByPage", this.searchObj)
        .then(res => {
          if (res.success) {
            this.tableLoading = false;
            this.tableData = res.data.list;
            this.totalt = res.data.total;
          }
        });
    },
    getVillageListXianByNode() {
     if(this.fengongxianChildren) {
       this.searchObj.nodeId = this.fengongxianCode
       this.searchObj.groupId = this.groupId
       delete this.searchObj.adNm;
       request
         .post("/dc/insp/secsurveyVlg/getPageByNodeId", this.searchObj)
         .then(res => {
           if (res.success) {
             this.tableLoading = false;
             this.tableData = res.data.list;
             this.totalt = res.data.total;
           }
         });
     }else{
       this.searchObj.nodeId = this.fengongxianCode
       this.searchObj.groupId = this.groupId
       this.searchObj.adNm = this.fenggongxianName
       request
         .post("/dc/insp/secsurveyVlg/getPageByNodeId", this.searchObj)
         .then(res => {
           if (res.success) {
             this.tableLoading = false;
             this.tableData = res.data.list;
             this.totalt = res.data.total;
           }
         });
     }
    },
    handleCurrentChange() {
      this.searchObj.pageNum = this.pageNum;
      this.getVillageListXianByNode();
    },
    handleSizeChange(val){
      this.searchObj.pageSize = val;
      this.getVillageListXianByNode();
    },
    pageIndexChangeVitPeo() {},
    visPeoDiaTableButton: function() {
      this.vitPeoDialogPanel = true;
    },
    formatRadio(val) {
      if (val == "1") {
        return "是";
      } else {
        return "否";
      }
    },
    showQus(rowId) {
      var _self = this;
      _self.currentObjectId = rowId.objId;
      _self.currentResName = rowId.villageNm;
      _self.currentVillageCode = rowId.villageCode;
      _self.currentObjectRgstrId = rowId.rgstrId;
      _self.yshQueDialogShowItem = true;
    },
    cancelHandler() {
      this.yshQueDialogShowItem = false;
    }
  }
};
</script>

<style>
#dcdxHeader {
  padding: 10px 20px;
}

#dxdcFooter {
  text-align: center;
}

#dxdcAside {
  border: 1px solid #d5d5ff;
}
.el-form-item__content {
  z-index: 1;
}
.canvasWrapper .echarts {
  /* margin: 0 auto; */
  /* width: 1200px; */
  /* height: 350px; */
}
.canvasWrapper {
  /* overflow-x: auto; */
}
</style>