fj-dc-ui/.svn/pristine/f2/f2880bd2eed74224dfb0cea85c31241615a40752.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;">
          <el-col :span="6">
            <el-tag size="small" style="width: 220px;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-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
              prop="villageNm"
              label="调查地点（*县*乡镇*村）"
              min-width="170"
              show-overflow-tooltip
              align="center"
            ></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
              prop="visitDate"
              sortable
              label="暗访日期"
              min-width="100"
              show-overflow-tooltip
              align="center"
            ></el-table-column>
            <el-table-column
              prop="userNm"
              label="户主姓名"
              min-width="100"
              show-overflow-tooltip
              align="center"
            ></el-table-column>
            <el-table-column
              prop="telphone"
              label="电话"
              min-width="100"
              show-overflow-tooltip
              align="center"
            ></el-table-column>

            <!--<el-table-column prop="cwsCode" label="对应工程代码" min-width="110" show-overflow-tooltip-->
            <!--align="center"></el-table-column>-->
            <!--<el-table-column prop="cwsCode" label="对应工程代码" min-width="110" show-overflow-tooltip-->
            <!--align="center"></el-table-column>-->
            <el-table-column
              prop="cwsCode"
              label="对应工程名称"
              min-width="110"
              show-overflow-tooltip
              align="center"
            ></el-table-column>
            <!--水质-->
            <el-table-column label="水质" min-width="80" show-overflow-tooltip align="center">
              <el-table-column
                prop="isQualityGood"
                label="水质是否良好"
                min-width="100"
                show-overflow-tooltip
                align="center"
              >
                <template slot-scope="scope">
                  <span>{{formatBoo(scope.row.isQualityGood)}}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="isQualityProblem"
                label="是否存在问题"
                min-width="140"
                show-overflow-tooltip
                align="center"
              >
                <template slot-scope="scope">
                  <span>{{formatBoo(scope.row.isQualityProblem)}}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <!--水量-->
            <el-table-column label="水量" min-width="100" show-overflow-tooltip align="center">
              <el-table-column
                prop="isSplyHome"
                label="是否供水入户"
                min-width="100"
                show-overflow-tooltip
                align="center"
              >
                <template slot-scope="scope">
                  <span>{{formatBoo(scope.row.isSplyHome)}}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="is24hSupply"
                label="是否24小时供水"
                min-width="130"
                show-overflow-tooltip
                align="center"
              >
                <template slot-scope="scope">
                  <span>{{formatBoo(scope.row.is24hSupply)}}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="isWaterProblem"
                label="是否存在问题"
                min-width="100"
                show-overflow-tooltip
                align="center"
              >
                <template slot-scope="scope">
                  <span>{{formatBoo(scope.row.isWaterProblem)}}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <!--水价收费-->
            <el-table-column label="水价收费" min-width="100" show-overflow-tooltip align="center">
              <el-table-column
                prop="isCalFee"
                label="是否计量收费"
                min-width="100"
                show-overflow-tooltip
                align="center"
              >
                <template slot-scope="scope">
                  <span>{{formatBoo(scope.row.isCalFee)}}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="isFeeProblem"
                label="是否存在问题"
                min-width="100"
                show-overflow-tooltip
                align="center"
              >
                <template slot-scope="scope">
                  <span>{{formatBoo(scope.row.isFeeProblem)}}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <!--供水服务-->
            <el-table-column label="供水服务" min-width="150" show-overflow-tooltip align="center">
              <el-table-column
                prop="isSplyProblem"
                label="是否存在问题"
                min-width="150"
                show-overflow-tooltip
                align="center"
              >
                <template slot-scope="scope">
                  <span>{{formatBoo(scope.row.isSplyProblem)}}</span>
                </template>
              </el-table-column>
            </el-table-column>

            <el-table-column
              prop="evaluate"
              label="总体评价"
              min-width="100"
              show-overflow-tooltip
              align="center"
            >
              <template slot-scope="scope">
                <span>{{formatEvaluate(scope.row.evaluate)}}</span>
              </template>
            </el-table-column>

            <!--<el-table-column prop="prsnWaterId" label="用水户ID" min-width="100" show-overflow-tooltip-->
            <!--align="center"></el-table-column>-->
            <!--<el-table-column prop="engId" label="农村饮水工程登记表ID" min-width="100" show-overflow-tooltip-->
            <!--align="center"></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: {
   yshQueDialogShow: resolve => {
      require(["./yshQueDialogShow.vue"], resolve);
    }
  },
  props: ["engIdh", "adCode", "adName",'currentNodeType','fengongxianCode','lyjg', "fenggongxianName", 'fengongxianChildren'],
  data() {
    return {
      groups:[],
      groupId:'',
      lyjg1:[],
      groupName:'',
      sttm:'',
      ettm:'',
      chartData1: {},
      yshQueDialogShowItem: false,
      chartData1All: {},
      isPKCount: "",
      isPKNotCount: "",
      searchObj: {
        pageNum: 1,
        pageSize: 10,
        adNm: "",
        adCode: "",
        persId: "",
        chkComId:'',
        chkCom:'',
        groupNm:'',
        groupId:'',
        startDate:'',
        endDate:'',
      },
      searchObjPK: {
        adNm: "",
        engId: "",
        isQualityGood: "1"
      },
      searchObjNotPK: {
        engId: "",
        isQualityGood: "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,
      currentObjectId: '',
      currentResName: '',
      currentObjectRgstrId: '',
      currentVillageCode: '',
      tableData: [],
      tableData1: [],
      visPeoTableData: [
        {
          peoName: "俞瑾",
          sex: "女",
          duty: "工程师",
          workNum: "HRCDC-02",
          phone: "18712469977"
        },
        {
          peoName: "俞瑾",
          sex: "女",
          duty: "工程师",
          workNum: "HRCDC-02",
          phone: "18712469977"
        },
        {
          peoName: "俞瑾",
          sex: "女",
          duty: "工程师",
          workNum: "HRCDC-02",
          phone: "18712469977"
        },
        {
          peoName: "俞瑾",
          sex: "女",
          duty: "工程师",
          workNum: "HRCDC-02",
          phone: "18712469977"
        }
      ]
    };
  },
  mounted() {
    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()
    }
    // adCode: function(n, o) {
    //   if (n == "0") {
    //     this.searchObj.adCode = "";
    //     this.searchObj.engId = "";
    //     this.tableLoading = true;
    //     this.getVillageList();
    //   } else if (n.length == 2) {
    //     this.searchObj.adCode = n;
    //     this.searchObj.engId = "";
    //     this.tableLoading = true;
    //     this.getVillageList();
    //   } else {
    //     this.searchObj.adCode = "";
    //     this.searchObj.engId = this.engIdh;
    //     this.tableLoading = true;
    //     this.getVillageListXian();
    //   }
    // }
  },
  computed: {
    userId: function() {
      return localStorage.getItem("userid")
        ? localStorage.getItem("userid")
        : "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/wateruserInfo/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/wateruserInfo/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/wateruserInfo/getPageByNodeId", this.searchObj)
          .then(res => {
            if (res.success) {
              this.tableLoading = false;
              this.tableData = res.data.list;
              this.totalt = res.data.total;
            }
          });
      }else{
        this.searchObj.adNm = this.fenggongxianName
        this.searchObj.nodeId = this.fengongxianCode
        this.searchObj.groupId = this.groupId
        request
          .post("/dc/insp/wateruserInfo/getPageByNodeId", this.searchObj)
          .then(res => {
            if (res.success) {
              this.tableLoading = false;
              this.tableData = res.data.list;
              this.totalt = res.data.total;
            }
          });
      }
    },
    // getChartDataPK() {
    //   this.chartData1 = {};
    //   var _self = this;

    // },
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;
    },
    handleCurrentChange() {
      this.searchObj.pageNum = this.pageNum;
      // this.getVillageList();
      this.getVillageListXianByNode()
    },
    handleSizeChange(val){
      this.searchObj.pageSize = val;
      // this.getVillageList();
      this.getVillageListXianByNode()
    },
    pageIndexChangeVitPeo() {},
    visPeoDiaTableButton: function() {
      this.vitPeoDialogPanel = true;
    },
    formatBoo(val) {
                if(val == '1'){
                    return '是'
                }else if(val == '0'){
                    return '否'
                }else{
                    return val
                }
            },
    formatEvaluate(value) {
      switch (value) {
        case "A":
          value = "A-能饮用";
          break;
        case "B":
          value = "B-能基本饮用";
          break;
        case "C":
          value = "C-不能饮用";
          break;
      }
      return value;
    }
  }
};
</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>