fj-dc-ui/.svn/pristine/33/33d65b4a8bd3ae4e3542b60f8cbc561ad2f18fe6.svn-base

<template>
  <div v-loading="tableLoading" class="nysgc">
    <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;margin-bottom: 0px;">
          <el-table border :data="tableData" height="400" tooltip-effect="dark" style="width: 100%">
            <el-table-column label="概况">
              <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="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
                fixed
                prop="pjnm"
                label="工程名称"
                align="center"
                show-overflow-tooltip
                min-width="150"
              ></el-table-column>
              <el-table-column
                prop="villageNm"
                label="所在地"
                align="center"
                show-overflow-tooltip
                min-width="150"
              ></el-table-column>
              <el-table-column prop="buildYear" align="center" label="建成年份" min-width="80"></el-table-column>
              <el-table-column
                prop="planSupplyScale"
                label="设计供水规模(m³/d)"
                min-width="150"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="supplyScale"
                label="实际供水规模（m³/d)"
                min-width="150"
                align="center"
              ></el-table-column>
              <el-table-column prop="personNum" label="覆盖人口(人)" min-width="120" align="center"></el-table-column>
              <el-table-column align="center" label="管网漏损率（%）" min-width="150">
                <template slot-scope="scope">
                  <span>{{scope.row.pipeDamagePer ? scope.row.pipeDamagePer * 100 + '%' : ''}}</span>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="projectType"
                label="工程类别"
                min-width="120"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.projectType == 1">千吨万人</span>
                  <span v-else-if="scope.row.projectType == 2">千吨万人以下工程</span>
                  <span v-else-if="scope.row.projectType == 3">分散式工程</span>
                  <span v-else>城市管网延伸</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="是否24小时不间断供水" min-width="200">
                <template slot-scope="scope">
                  <span>{{shifouRadio(scope.row.is24hSupply)}}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="水质保障">
              <el-table-column label="净化设施设备" align="center">
                <el-table-column label="是否配备" align="center">
                  <template slot-scope="scope">
                    <span>{{shifouRadio(scope.row.isHavecleanEqui)}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="是否正常运行" align="center" min-width="130">
                  <template slot-scope="scope">
                    <span>{{shifouRadio(scope.row.isCleanequiG)}}</span>
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column label="消毒设备" align="center">
                <el-table-column prop="isHavedisinfect" label="是否配备" align="center">
                  <template slot-scope="scope">
                    <span>{{shifouRadio(scope.row.isHavedisinfect)}}</span>
                  </template>
                </el-table-column>

                <el-table-column prop="disinfectType" label="消毒方式" align="center">
                  <template slot-scope="scope">
                    <span v-if="scope.row.disinfectType == 1">液氯</span>
                    <span v-else-if="scope.row.disinfectType == 2">二氧化氯</span>
                    <span v-else-if="scope.row.disinfectType == 3">次氯酸钠</span>
                    <span v-else-if="scope.row.disinfectType == 4">臭氧</span>
                    <span v-else>紫外线</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="isDisinfectGood"
                  label="是否正常运行"
                  align="center"
                  min-width="110"
                >
                  <template slot-scope="scope">
                    <span>{{shifouRadio(scope.row.isDisinfectGood)}}</span>
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column label="水质检测报告" align="center">
                <el-table-column prop="isHavereport" label="有无报告" align="center" min-width="110">
                  <template slot-scope="scope">
                    <span>{{youwuRadio(scope.row.isHavereport)}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="isQuailtyGood" label="是否达标" align="center" min-width="110">
                  <template slot-scope="scope">
                    <span>{{shifouRadio(scope.row.isQuailtyGood)}}</span>
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column label="千吨万人水厂水质化验室" align="center">
                <el-table-column prop="isHaveLab" label="是否配备" align="center">
                  <template slot-scope="scope">
                    <span>{{shifouRadio(scope.row.isHaveLab)}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="isDailyCheck" label="是否开展日检" align="center" min-width="110">
                  <template slot-scope="scope">
                    <span>{{shifouRadio(scope.row.isDailyCheck)}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="isDailycheckGood"
                  label="水质是否达标"
                  align="center"
                  min-width="110"
                >
                  <template slot-scope="scope">
                    <span>{{shifouRadio(scope.row.isDailycheckGood)}}</span>
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table-column>
            <el-table-column label="运行管理" align="center">
              <el-table-column label="有无取水许可证" align="center" min-width="130">
                <template slot-scope="scope">
                  <span>{{youwuRadio(scope.row.isInsLicence)}}</span>
                </template>
              </el-table-column>
              <el-table-column label="有无卫生许可证" align="center" min-width="130">
                <template slot-scope="scope">
                  <span>{{youwuRadio(scope.row.isSanLicence)}}</span>
                </template>
              </el-table-column>
              <el-table-column label="自动化控制系统" align="center">
                <el-table-column label="是否配备" align="center">
                  <template slot-scope="scope">
                    <span>{{shifouRadio(scope.row.isAutosystem)}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="是否正常运行" align="center" min-width="130">
                  <template slot-scope="scope">
                    <span>{{shifouRadio(scope.row.isAutosysGood)}}</span>
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column label="视频安防系统" align="center">
                <el-table-column label="是否配备" align="center" min-width="110">
                  <template slot-scope="scope">
                    <span>{{shifouRadio(scope.row.isVideoSystem)}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="是否正常运行" align="center" min-width="130">
                  <template slot-scope="scope">
                    <span>{{shifouRadio(scope.row.isVideosysGood)}}</span>
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column label="水费水价" align="center">
                <el-table-column prop="waterFee" label="执行水价（元/ m³）" align="center" min-width="140"></el-table-column>
                <el-table-column prop="waterCost" label="全成本（元/ m³）" align="center" min-width="140"></el-table-column>
                <el-table-column prop="operCost" label="运行成本（元/ m³）" align="center" min-width="140"></el-table-column>
                <el-table-column label="水费回收率（%）" align="center" min-width="140">
                  <template slot-scope="scope">
                    <span>{{scope.row.feeRecyclePer ? scope.row.feeRecyclePer * 100 + '%' : ''}}</span>
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column prop="manager" label="管理主体" align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span v-if="scope.row.manager == 1">村委会</span>
                  <span v-else-if="scope.row.manager == 2">乡镇政府或水管站</span>
                  <span v-else-if="scope.row.manager == 3">供水公司</span>
                  <span v-else>租赁承包</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="isHaveHotline"
                label="是否配备供水服务热线电话"
                align="center"
                min-width="200"
              >
                <template slot-scope="scope">
                  <span>{{shifouRadio(scope.row.isHaveHotline)}}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="填报状态" prop="status" align="center" min-width="100">
              <template slot-scope="scope">
                <span v-if="scope.row.status == 0">未填报</span>
                <span v-else>已填报</span>
              </template>
            </el-table-column>
            <!-- <el-table-column label="暗访日期" prop="visitDate" align="center" min-width="100"></el-table-column> -->
            <el-table-column label="记录人员" prop="recPers2" align="center"></el-table-column>
            <el-table-column label="记录人员电话" prop="recPersTel" align="center" min-width="150"></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>
    <ysgcQueDialogShow
      v-if="shgcQueDialogShowItem"
      :currentObjectRgstrId="currentObjectRgstrId"
      :currentObjectId="currentObjectId"
      :currentObjectName="currentShgcName"
      :objType="2"
      :villType="3"
      @cancelHandler="cancelHandler"
      @addShuiKuSuccess="addShuiKuSuccess"
    ></ysgcQueDialogShow>
  </div>
</template>

<script>
import request from "../../utils/gw_ajax_request.js";
// import echartsPie from "../../widgets/echartsPie.vue";
export default {
  components: {
    // echartsPie
    ysgcQueDialogShow: resolve => {
      require(["./ysgcQueDialogShow.vue"], resolve);
    }
  },
  props: ["engIdh", "adCode", "adName",'currentNodeType','fengongxianCode','lyjg', "fenggongxianName", 'fengongxianChildren'],

  data() {
    return {
      shgcQueDialogShowItem: false,
      gcType: [
        {
          label: "A-千吨万人",
          value: "1"
        },
        {
          label: "B-千吨万人以下工程",
          value: "2"
        },
        {
          label: "C-分散式工程",
          value: "3"
        },
        {
          label: "D-城市管网延伸",
          value: "4"
        }
      ],
      xdfs: [
        {
          label: "A-液氯",
          value: "1"
        },
        {
          label: "B-二氧化氯",
          value: "2"
        },
        {
          label: "C-次氯酸钠",
          value: "3"
        },
        {
          label: "D-臭氧",
          value: "4"
        },
        {
          label: "E-紫外线",
          value: "5"
        }
      ],
      glzt: [
        {
          label: "A-村委会",
          value: "1"
        },
        {
          label: "B-乡镇政府或水管站",
          value: "2"
        },
        {
          label: "C-供水公司",
          value: "3"
        },
        {
          label: "D-租赁承包",
          value: "4"
        }
      ],
      groups:[],
      groupId:'',
      lyjg1:[],
      groupName:'',
      sttm:'',
      ettm:'',
      chartData1: {},
      chartData2: {},
      isYZCount: "",
      isQSXKCount: "",
      isPKNotCount: "",
      searchObj: {
        pageNum: 1,
        pageSize: 10,
        adNm: "",
        adCode: "",
        persId: "",
        chkComId:'',
        chkCom:'',
        groupNm:'',
        groupId:'',
        startDate:'',
        endDate:'',
      },
      searchObjPK: {
        pjnm: "",
        engId: "",
        isDisinfectGood: "1"
      },
      searchObjQSXK: {
        pjnm: "",
        engId: "",
        isInsLicence: "1"
      },
      searchName: "",
      dxdcMainHeight: window.innerHeight - 327,
      pageNum: 1,
      pageSize: 10,
      totalt: 20,
      tableData: [],
      tableLoading: true,
    };
  },
  mounted() {
    this.searchObj.persId = this.userId;
    this.getAllGroup();
    // this.getVillageList();
    this.getVillageListXianByNode();
    // this.getChartDataPK();
  },

  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/vlgdrinkProjManage/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/vlgdrinkProjManage/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/vlgdrinkProjManage/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/vlgdrinkProjManage/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()
    },
    shifouRadio(val) {
      if (val == "1") {
        return "是";
      } else if (val == "2" || val == "0") {
        return "否";
      }
    },
    youwuRadio(val) {
      if (val == "1") {
        return "有";
      } else if (val == "2" || val == "0") {
        return "无";
      }
    },
    showQus(rowId) {
      var _self = this;
      _self.currentObjectId = rowId.cwsCode;
      _self.currentShgcName = rowId.pjnm;
      _self.currentObjectRgstrId = rowId.rgstrId;
      _self.shgcQueDialogShowItem = true;
    },
    cancelHandler() {
      this.shgcQueDialogShowItem = false;
    }
  }
};
</script>

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

#dxdcFooter {
  text-align: center;
}

#dxdcAside {
  border: 1px solid #d5d5ff;
}
.el-form-item__content {
  z-index: 1;
}
.nysgc .el-table th > .cell {
  /*font-size: 16px;*/
  font-family: MicrosoftYaHei-Bold;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
}
.nysgc .el-table--border th,
.el-table__fixed-right-patch {
  background: rgba(240, 240, 240, 1);
  box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1),
    0px 1px 0px 0px rgba(0, 0, 0, 0.1), -1px 0px 0px 0px rgba(0, 0, 0, 0.1);
}
.nysgc .el-table td.is-hidden > *,
.nysgc .el-table th.is-hidden > *,
.el-table--hidden {
  visibility: visible;
}
</style>