fj-dc-ui/.svn/pristine/7d/7dc44c3fd6f14e1cca1533f94944a4fcf5e62335.svn-base

<template>
  <div id="kjrmap">
    <draggable :title="title" initTop=100 initLeft=220 initWidth=790 initHeight=500 :append-to-body="true" @closeDraggable='closeModal_country_water' style="overflow: auto;z-index: 999;">
      <div class="process_line">
        <div class="item content4">
          <div class="item6">
            <span class="label">农村人口（万人）：</span>
            <span class="ml10">{{countryWaterInfo.personAmount}}</span>
          </div>
          <div class="item6">
            <span class="label">集中供水率（%）：</span>
            <span class="ml10">{{countryWaterInfo.focusSupplyPerc ? countryWaterInfo.focusSupplyPerc * 100 + '%' :
                  ''}}</span>
          </div>
          <div class="item6">
            <span class="label">自来水普及率（%）：</span>
            <span class="ml10">{{countryWaterInfo.waterSupplyPerc ? countryWaterInfo.waterSupplyPerc * 100 + '%' :
                  ''}}</span>
          </div>
          <div class="item6">
            <span class="label">地方人民政府主体责任是否明确：</span>
            <span class="ml10">{{shifouRadio(countryWaterInfo.isGovRes)}}</span>
          </div>
          <div class="item6">
            <span class="label">水利部门行业监管责任是否明确：</span>
            <span class="ml10">{{shifouRadio(countryWaterInfo.isConRes)}}</span>
          </div>
          <div class="item6">
            <span class="label">供水单位运行管理责任是否到位：</span>
            <span class="ml10">{{shifouRadio(countryWaterInfo.isDeptRes)}}</span>
          </div>
          <div class="item6">
            <span class="label">是否建立县级运行管理机构：</span>
            <span class="ml10">{{shifouRadio(countryWaterInfo.isCntyDept)}}</span>
          </div>
          <div class="item6">
            <span class="label">是否建立县级运行管理办法：</span>
            <span class="ml10">{{shifouRadio(countryWaterInfo.isCntyFunc)}}</span>
          </div>
          <div class="item6">
            <span class="label">是否落实县级运行管理经费：</span>
            <span class="ml10">{{shifouRadio(countryWaterInfo.isCntyFee)}}</span>
          </div>

          <div class="item6">
            <span class="label">是否正常开展水质巡检：</span>
            <span class="ml10">{{shifouRadio(countryWaterInfo.isQuailtyChk)}}</span>
          </div>
          <div class="item6">
            <span class="label">2018年落实运行经费（万元）：</span>
            <span class="ml10">{{countryWaterInfo.pracFee}}</span>
          </div>
        </div>
        <el-collapse v-model="activeNames_ny" @change="nyhandleChange" accordion class="nywater">
          <el-collapse-item title="农村饮水工程运行管理情况表" name="1">
            <el-table :data="tableData6" style="width: 100%">
              <el-table-column label="概况" fixed>
                <el-table-column prop="pjnm" label="工程名称" align="center" show-overflow-tooltip></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="160"-->
              <!--fixed="right"-->
              <!--&gt;-->
              <!--<template slot-scope="scope">-->
              <!--<el-button type="success" plain @click="toAddMember('编辑',scope.row)">编辑</el-button>-->
              <!--<el-button type="danger" plain @click="deleteMember(scope.row)">删除</el-button>-->
              <!--</template>-->
              <!--</el-table-column>-->
            </el-table>
          </el-collapse-item>

          <el-collapse-item title="暗访调研行政村统计表" name="2">
            <xingZhengCun :engId='YnEngId'></xingZhengCun>
          </el-collapse-item>

          <el-collapse-item title="村内农村饮水工程设施运行维护情况表" name="3">
            <gongChengWeiHu :engId='YnEngId'></gongChengWeiHu>
          </el-collapse-item>

          <el-collapse-item title="用水户情况表" name="4">
            <yongShuiQingKuang :engId='YnEngId'></yongShuiQingKuang>
          </el-collapse-item>

          <el-collapse-item title="千人以上供水工程水源地保护情况表" name="5">
            <shuiYuanDi :engId='YnEngId'></shuiYuanDi>
          </el-collapse-item>


        </el-collapse>
      </div>
    </draggable>
  </div>
</template>

<script>
  import request from "../../../utils/gw_ajax_request"
  import xingZhengCun from '../../zonghexinxi/zhxx_xingzhengcun'
  import gongChengWeiHu from '../../zonghexinxi/zhxx_gongchengweihu'
  import yongShuiQingKuang from '../../zonghexinxi/ysqk_wiuStatusTable'
  import shuiYuanDi from '../../zonghexinxi/shuiyuandi'
  import draggable from './draggable'
  import {
    getTableId_ny
  } from "../../../api/duChaTianBao.js"
    export default {
        name: "renyinProject",
        components: {
          // gwd,
          xingZhengCun,
          gongChengWeiHu,
          yongShuiQingKuang,
          shuiYuanDi,
          draggable,
        },
        props:['ryEngid',"ryInfoContent",'ryTitle','ryObjId'],
        mounted() {
          this.title = this.ryTitle;
          this.getRyData();
        },
        data() {
          return {
            countryWaterInfo:{},
            activeNames_ny: ['0'],
            tableData6: [],
            pageIndex: 1,
            pageSize: 20,
            title:''

          }
        },

        computed: {
          recPersId() {
            return localStorage.getItem("userid") ? localStorage.getItem("userid") : ''
          }
        },

        methods:{
          // 人饮关闭
          closeModal_country_water() {
            // this.processLineShow_country_water = false;
            this.$emit('closeModal','dcryDialog')
          },
          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 "无";
            }
          },
          nyhandleChange(val) {
            if (val == '1') {
              this.getNysgcData()

            }
          },
          getRyData() {
            getTableId_ny(this.ryObjId, this.recPersId).then((res) => {
              this.ryEngid = res.data.engId;
              this.getRygcData();
            })
          },
          getRygcData() {
            let getObj = {
              engId: this.ryEngid
            };
            this.countryWaterInfo = {};
            request.post(`/dc/insp/manageResponsibility/queryListByPage`, getObj).then((res) => {
              if (res.data.list.length) {
                this.countryWaterInfo = res.data.list[0];
              }
            }).catch(function (error) {
              console.log(error);
            });
          },
          getNysgcData() {
            request.post(`/dc/insp/vlgdrinkProjManage/queryListByPage`, {
              pageNum: this.pageIndex,
              pageSize: this.pageSize,
              engId: this.ryEngid
            })
              .then(res => {
                if (res.success) {
                  var obj = res.data;
                  this.tableData6 = obj.list;
                }
              })
              .catch(function (error) {
                console.log(error);
              });
          },
        },
        watch:{
          ryObjId(n){
            this.getRyData();
          }
        }
    }
</script>

<style>
  #kjrmap .process_line .content4 {
    display: inline-block;
    width: 100%;
    overflow-y: auto;
    padding-bottom: 8px;
  }
  #kjrmap .process_line .item5,
  #kjrmap .process_line .item6 {
    /* margin: 20px 30px; */
    margin-top: 10px;
    width: 49%;
    display: inline-block;
  }

  #kjrmap .process_line .item5 .label {
    width: 160px !important;
  }

  #kjrmap .process_line .item6 .label {
    width: 260px !important;
  }

  #kjrmap .process_line .item2 .label2 {
    /*text-decoration: underline;*/
  }

  #kjrmap .process_line .item .label5 {
    display: inline-block;
    width: 100px;
    text-align: right;
    /*font-size: 14px;*/
    /*font-family: PingFang-SC-Bold;*/
    /*font-weight: bold;*/
    font-size: 14px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
  }

  #kjrmap .process_line .item .label {
    display: inline-block;
    width: 80px;
    text-align: right;
    font-size: 14px;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    color: #333;
  }
  #kjrmap .el-collapse-item__header {
    text-indent: 25px;
    background: #f6f8fb;
    box-shadow: 0 -1px 0 0 rgba(0,0,0,.1);
  }

#kjrmap .el-collapse-item__header, #kjrmap .el-table th>.cell {
  font-size: 14px;
  font-family: MicrosoftYaHei-Bold;
  font-weight: 700;
  color: #333;
  }
  #kjrmap .ml10 {
    margin-left: 10px;
    font-size: 12px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: #333;
  }
</style>