fj-dc-ui/.svn/pristine/c8/c8a1ec15afff2b8f022eb269289bd4bf85e83b8a.svn-base

<template>
  <div>
    <el-container v-if="formIsShow" style="height:49vh;">
      <el-main style="border:1px solid #d5d5ff;margin-left:5px;padding:0px;">
        <p style="font-weight:bolder;background-color:#d5d5ff;padding:3px;">信息填报</p>
        <el-form :model="formObj" :label-width="formLabelWidth" ref="projectFrom">
          <p style="margin-top:10px;margin-bottom: 10px">
            <i class="el-icon-caret-right"></i>
            <span style="width:120px;padding-left: 10px">基础信息</span>
            <span class="hrs"></span>
            <el-button type="warning" style="float: right;" @click="recentAppearance">近期面貌</el-button>
            <el-button type="warning" style="float: right;margin-right: 10px;" @click="imageClick">影像</el-button>
          </p>
          <el-form-item label="水源地代码">
            <el-input disabled v-model="formObj.swhsCode" autocomplete="off" style="width:70%;"></el-input>
          </el-form-item>
          <el-form-item label="水源地名称">
            <el-input disabled v-model="formObj.swhsName" autocomplete="off" style="width:70%;"></el-input>
          </el-form-item>
          <el-form-item label="管理单位名称">
            <el-input v-model="formObj.insName" autocomplete="off" style="width:70%;"></el-input>
          </el-form-item>
          <el-form-item label="管理单位联系人">
            <el-input v-model="formObj.insPers" autocomplete="off" style="width:70%;"></el-input>
          </el-form-item>
          <el-form-item label="管理单位电话">
            <el-input v-model="formObj.insTel" autocomplete="off" style="width:70%;"></el-input>
          </el-form-item>
          <el-form-item label="水行政主管部门名称">
            <el-input v-model="formObj.insWaterUnit" autocomplete="off" style="width:70%;"></el-input>
          </el-form-item>
          <el-form-item label="水行政主管部门联系人">
            <el-input v-model="formObj.insWaterPers" autocomplete="off" style="width:70%;"></el-input>
          </el-form-item>
          <el-form-item label="水行政主管部门电话">
            <el-input v-model="formObj.insWaterTel" autocomplete="off" style="width:70%;"></el-input>
          </el-form-item>
          <el-form-item label="行政区划">
            <el-input
              v-model="formObj.adName"
              autocomplete="off"
              @focus="showMenuTree = true"
              auto-complete="off"
              readonly
              style="width:70%;"
            ></el-input>
            <provTreeList
              style="max-height:20vh;"
              v-if="showMenuTree"
              :rootCode="rootCode"
              :rootType="rootType"
              @provTreeSelectChange="provTreeSelectChangeHandler"
            ></provTreeList>
          </el-form-item>
          <el-form-item label="所在位置">
            <el-input v-model="formObj.swhsLoc" style="width:70%;"></el-input>&#x3000;
          </el-form-item>
          <el-form-item label="经度">
            <el-input clearable v-model="formObj.gdX" style="width:70%;"></el-input>
          </el-form-item>
          <el-form-item label="纬度">
            <el-input clearable v-model="formObj.gdY" style="width:70%;"></el-input>
          </el-form-item>
          <el-form-item label=" 取水水源类型">
            <el-select v-model="formObj.wainWasoType" clearable placeholder="请选择">
              <el-option
                v-for="item in wainWasoType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="水面面积">
            <el-input clearable v-model="formObj.watArea" style="width:70%;">
              <template slot="append">k㎡</template>
            </el-input>
          </el-form-item>
          <el-form-item label="取水口数量">
            <el-input clearable v-model="formObj.wainNum" style="width:70%;">
            </el-input>
          </el-form-item>
          <el-form-item label=" 主要取水用途">
            <el-select v-model="formObj.wainUse" clearable placeholder="请选择">
              <el-option
                v-for="item in wainUse"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label=" 供水对象类型">
            <el-select v-model="formObj.wasuObjType" clearable placeholder="请选择">
              <el-option
                v-for="item in wasuObjType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设计年取水量">
            <el-input clearable v-model="formObj.desAnnWain" style="width:70%;">
              <template slot="append">万m³</template>
            </el-input>
          </el-form-item>
          <el-form-item label="设计年供水人口">
            <el-input clearable v-model="formObj.desAnnWasuPop" style="width:70%;">
              <template slot="append">万人</template>
            </el-input>
          </el-form-item>
          <el-form-item label=" 水质目标">
            <el-select v-model="formObj.waquGoal" clearable placeholder="请选择">
              <el-option
                v-for="item in waquGoal"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="水源地水质是否监测">
            <el-select v-model="formObj.ifMonWqua" clearable placeholder="请选择">
              <el-option
                v-for="item in whether"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="水源地水质是否达标">
            <el-select v-model="formObj.ifWquaUptoSta" clearable placeholder="请选择">
              <el-option
                v-for="item in whether"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label=" 水源地现状">
            <el-select v-model="formObj.wquaCat" clearable placeholder="请选择">
              <el-option
                v-for="item in wquaCat"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label>
            <el-button style="padding:7px 15px" type="primary" @click="addHandler">保 存</el-button>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
    <div v-if="!formIsShow" class="popupContentClass" :style="{'height':testHeight1+'px'}">
        <el-row class="rowClass">
          <el-col :span="6" class="nameClass">地表水水源地名称：</el-col>
          <el-col :span="6" class="valueClass" :style="{'height':testHeight+'px'}">{{formObj.swhsName}}</el-col>
          <el-col :span="6" class="nameClass">地表水水源地代码：</el-col>
          <el-col :span="6" class="valueClass" :style="{'height':testHeight+'px'}">{{formObj.swhsCode}}</el-col>
        </el-row>
        <el-row class="rowClass">
          <el-col :span="6" class="nameClass">管理单位名称：</el-col>
          <el-col :span="6" class="valueClass" :style="{'height':testHeight+'px'}">{{formObj.insName}}</el-col>
          <el-col :span="6" class="nameClass">管理单位联系人：</el-col>
          <el-col :span="6" class="valueClass" :style="{'height':testHeight+'px'}">{{formObj.insPers}}</el-col>
        </el-row>
        <el-row class="rowClass">
          <el-col :span="6" class="nameClass">管理单位电话：</el-col>
          <el-col :span="6" class="valueClass" :style="{'height':testHeight+'px'}">{{formObj.insTel}}</el-col>
          <el-col :span="6" class="nameClass">水行政主管部门名称：</el-col>
          <el-col :span="6" class="valueClass" :style="{'height':testHeight+'px'}">{{formObj.insWaterUnit}}</el-col>
        </el-row>
        <el-row class="rowClass">
          <el-col :span="6" class="nameClass">水行政主管部门联系人：</el-col>
          <el-col :span="6" class="valueClass" :style="{'height':testHeight+'px'}">{{formObj.insWaterPers}}</el-col>
          <el-col :span="6" class="nameClass">水行政主管部门电话：</el-col>
          <el-col :span="6" class="valueClass" :style="{'height':testHeight+'px'}">{{formObj.insWaterTel}}</el-col>
        </el-row>
        <el-row class="rowClass">
          <el-col :span="6" class="nameClass">行政区划：</el-col>
          <el-col :span="6" class="valueClass" :style="{'height':testHeight+'px'}">{{formObj.adName}}</el-col>
          <el-col :span="6" class="nameClass">所在位置：</el-col>
          <el-col :span="6" class="valueClass" :style="{'height':testHeight+'px'}">{{formObj.swhsLoc}}</el-col>
        </el-row>
        <el-row class="rowClass">
          <el-col :span="6" class="nameClass">取水水源类型：</el-col>
          <el-col :span="6" class="valueClass" :style="{'height':testHeight+'px'}">{{formObj.wainWasoType == "1" ? "水库" :formObj.wainWasoType == "2" ? "湖泊" :formObj.wainWasoType == "3" ? "河流" :formObj.wainWasoType == "9" ? "其他" : ""}}</el-col>
          <el-col :span="6" class="nameClass">水面面积：</el-col>
          <el-col :span="6" class="valueClass" :style="{'height':testHeight+'px'}">{{formObj.watArea ? formObj.watArea + 'k㎡' : ''}}</el-col>
        </el-row>
        <el-row class="rowClass">
          <el-col :span="6" class="nameClass">取水口数量：</el-col>
          <el-col :span="6" class="valueClass" :style="{'height':testHeight+'px'}">{{formObj.wainNum}}</el-col>
          <el-col :span="6" class="nameClass">主要取水用途：</el-col>
          <el-col :span="6" class="valueClass" :style="{'height':testHeight+'px'}">{{formObj.wainUse == "1" ? "城乡生活" : formObj.wainUse == "2" ? "城镇生活" : formObj.wainUse == "3" ? "乡村生活" : ''}}</el-col>
        </el-row>
        <el-row class="rowClass">
          <el-col :span="6" class="nameClass">供水对象类型：</el-col>
          <el-col :span="6" class="valueClass" :style="{'height':testHeight+'px'}">{{formObj.wasuObjType == "1" ? "工业" : formObj.wainUse == "2" ? "生活" : formObj.wainUse == "3" ? "公共" : formObj.wainUse == "4" ? "混合" : formObj.wainUse == "9" ? "其他" : ''}}</el-col>
          <el-col :span="6" class="nameClass">设计年取水量：</el-col>
          <el-col :span="6" class="valueClass" :style="{'height':testHeight+'px'}">{{formObj.desAnnWain ? formObj.desAnnWain + "万m³" : ""}}</el-col>
        </el-row>
        <el-row class="rowClass">
          <el-col :span="6" class="nameClass">设计年供水人口：</el-col>
          <el-col :span="6" class="valueClass" :style="{'height':testHeight+'px'}">{{formObj.desAnnWasuPop ? formObj.desAnnWasuPop + "万人" : ""}}</el-col>
          <el-col :span="6" class="nameClass">水质目标：</el-col>
          <el-col :span="6" class="valueClass" :style="{'height':testHeight+'px'}">{{formObj.waquGoal == "1" ? "表示Ⅰ类水质目标" : formObj.waquGoal == "2" ? "表示Ⅱ类水质目标" : formObj.waquGoal == "3" ? "表示Ⅲ类水质目标" : formObj.waquGoal == "4" ? "表示Ⅳ类水质目标" : formObj.waquGoal == "5" ? "表示Ⅴ类水质目标" : formObj.waquGoal == "6" ? "表示劣Ⅴ类水质目标" : ''}}</el-col>
        </el-row>
        <el-row class="rowClass">
          <el-col :span="6" class="nameClass">水源地水质是否监测：</el-col>
          <el-col :span="6" class="valueClass" :style="{'height':testHeight+'px'}">{{formObj.ifMonWqua == "1" ? "是": formObj.ifMonWqua == "2" ? "否" : ""}}</el-col>
          <el-col :span="6" class="nameClass">水源地水质是否达标：</el-col>
          <el-col :span="6" class="valueClass" :style="{'height':testHeight+'px'}">{{formObj.ifWquaUptoSta == "1" ? "是": formObj.ifWquaUptoSta == "2" ? "否" : ""}}</el-col>
        </el-row>
        <el-row class="rowClass">
          <el-col :span="6" class="nameClass">水源地现状：</el-col>
          <el-col :span="6" class="valueClass" :style="{'height':testHeight+'px'}">{{formObj.wquaCat == "1" ? "表示Ⅰ类水质目标" : formObj.wquaCat == "2" ? "表示Ⅱ类水质目标" : formObj.wquaCat == "3" ? "表示Ⅲ类水质目标" : formObj.wquaCat == "4" ? "表示Ⅳ类水质目标" : formObj.wquaCat == "5" ? "表示Ⅴ类水质目标" : ''}}</el-col>
          <el-col :span="6" class="nameClass">经度：</el-col>
          <el-col :span="6" class="valueClass" :style="{'height':testHeight+'px'}">{{formObj.gdX}}</el-col>
        </el-row>
        <el-row class="rowClass">
        <el-col :span="6" class="nameClass">纬度：</el-col>
        <el-col :span="6" class="valueClass" :style="{'height':testHeight+'px'}">{{formObj.gdY}}</el-col>
        </el-row>
    </div>

    <theRecentAppearance v-if="jqmmShow" @jqmmDialogClose="jqmmDialog" :jqmmShow="jqmmShow" :jqmmEngId="currentObjectRgstrId" :dialogTitle="currentObjectName + '近期面貌'"></theRecentAppearance>
    <!--影像弹窗-->
    <el-dialog :title="currentObjectName + '影像'" :visible.sync="imageShow" append-to-body :close-on-click-modal="false" width="60%">
      <div style="height: 60vh;">
        <mapLocation ref="mapRef" v-if="imageShow" :gdX="formObj.centerX" :gdY="formObj.centerY"></mapLocation>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import inputWith from "../../widgets/inuptWith.vue";
import request from "../../utils/gw_ajax_request.js";
import { getSydjc,getInfo_syd } from "../../api/duChaTianBao.js";
import { dateFormat } from "../../utils/gw_date.js";
import provTreeList from "../../widgets/provTreeList";
import theRecentAppearance from  '../duChaDuiXiang/theRecentAppearance'
import mapLocation from '../../views/duChaTianBao/mapLocation'
import unlimitDatePicker from '@baseWidget/unLimitdatePicker.vue'
export default {
  components: {
    inputWith: inputWith,
    provTreeList,
    theRecentAppearance: theRecentAppearance,
    mapLocation:mapLocation,
    unlimitDatePicker:unlimitDatePicker
  },
  props: [
    "currentObjectRgstrId",
    "currentResCode",
    "currentObjectId",
    "currentGroupId",
    "currentAdcode",
    "showOrEdit",
    "currentObjectName",
    "baseForm"
  ],

  data() {
    return {
      testHeight:(window.innerHeight * 0.5 - 114) / 6,
      testHeight1:window.innerHeight * 0.6,
      rootCode: "000000",
      rootType: "2",
      showMenuTree: false,
        begTime:'',
        endTime:'',
      formObj: {
        buidTimeMon:'',
        buidTimeYear:'',
        staTimeMon:'',
        staTimeYear:'',
        adCode: this.currentAdcode,
        gateName: "",
        gateType: "",
        rsAdmName: "",
        rsLoc: "",
        gateFlow: "",
        engSta: "",
        intm: "",
        engScal: "",
        totCap: "",
        damMaxHigh: "",
        damTypeStr: "",
        damType: "",
        rsType: "",
        regCode: "",
        rsvrLong: "",
        rsvrLat: "",
        compDate: "",
        location: "",
        admDiv: "",
        locationCun: ""
      },
      dialogFormVisible: false,
      formLabelWidth: "300px",
      loading: true,
      operationType1: "",
      currentResCode1: "",
      currentObjectId1: "",
      value1: "",
      provList: [],
      cityList: [],
      countryList: [],
      provName: "",
      cityName: "",
      countryName: "",
      provNames: "",
      cityNames: "",
      countryNames: "",
      curSelectItem: 0,
      formIsShow: true,
      jqmmButton: false,
      jqmmShow: false,
      imageShow: false,
      //水质目标
      waquGoal: [
        {
          value: '1',
          label: '表示Ⅰ类水质目标'
        },
        {
          value: '2',
          label: '表示Ⅱ类水质目标'
        },
        {
          value: '3',
          label: '表示Ⅲ类水质目标'
        },
        {
          value: '4',
          label: '表示Ⅳ类水质目标'
        },
        {
          value: '5',
          label: '表示Ⅴ类水质目标'
        },
        {
          value: '6',
          label: '表示劣Ⅴ类水质目标'
        },
      ],
      wquaCat:[
        {
          value: '1',
          label: '表示Ⅰ类水质目标'
        },
        {
          value: '2',
          label: '表示Ⅱ类水质目标'
        },
        {
          value: '3',
          label: '表示Ⅲ类水质目标'
        },
        {
          value: '4',
          label: '表示Ⅳ类水质目标'
        },
        {
          value: '5',
          label: '表示Ⅴ类水质目标'
        }
      ],
      //是否
      whether: [
        {
          value: "1",
          label: "是"
        },
        {
          value: "2",
          label: "否"
        }
      ],
      //主要取水用途
      wainUse: [
        {
          value:'1',
          label:'城乡生活'

        },
        {
          value:'2',
          label:'城镇生活'

        },
        {
          value:'3',
          label:'乡村生活'

        }
      ],
      wasuObjType:[
        {
          value:'1',
          label:'工业'

        },
        {
          value:'2',
          label:'生活'

        },
        {
          value:'3',
          label:'公共'

        },
        {
          value:'4',
          label:'混合'

        },
        {
          value:'9',
          label:'其他'

        }
      ],
      // 取水水源类型
      wainWasoType:[
        {value:'1',label:'水库'},
        {value:'2',label:'湖泊'},
        {value:'3',label:'河流'},
        {value:'9',label:'其他'},
      ]
    };
  },
  computed: {
    recPersId() {
      return localStorage.getItem("userid")
        ? localStorage.getItem("userid")
        : "";
    }
  },
  created() {
    if (this.showOrEdit == "show") {
      this.formIsShow = false;
    } else {
      this.formIsShow = true;
    }
    // this.getRgstridObj();
  },
  mounted() {
    this.currentResCode1 = this.currentResCode;
    this.currentObjectId1 = this.currentObjectId;
    this.$nextTick(()=>{
      this.getRgstridObj();
      this.getAreaList();
    })

  },
  watch: {
    currentObjectRgstrId(n, o) {
      this.getRgstridObj();
    }
  },
  methods: {

    startTimeToform(val){
      console.log(val);
      this.formObj.staTimeYear = val.split('-')[0];
      this.formObj.staTimeMon = val.split('-')[1];
    },
    bulidTimeToform(val){
      console.log(val);
      this.formObj.buidTimeYear = val.split('-')[0];
      this.formObj.buidTimeMon = val.split('-')[1];
    },
    getRgstridObj() {
      var _self = this;
      // getSydjc(_self.currentResCode1, _self.recPersId).then(res => {
      //     if (res.data) {
      //       _self.formObj = res.data;
      //     } else {
      //       _self.formObj = {};
      //     }
      //   },
      //   err => {}
      // );
      // 获取登记表信息即可
      getInfo_syd(_self.currentObjectRgstrId).then(res => {
          if (res.data) {
            _self.formObj = res.data;
          } else {
            _self.formObj = {};
          }
        },
        err => {}
      );
    },
    addHandler() {
      this.$refs.projectFrom.validate(valid => {
        if (valid) {
          var _self = this;
          // if(this.formObj.centerY < 4 || this.formObj.centerY > 54){
          //   this.$message.error('纬度的整数范围应在4-54之间，请重新填写！');
          //   this.formObj.gdY = '';
          //   return;
          // }
          // if(this.formObj.centerX < 74 || this.formObj.centerX > 136){
          //   this.$message.error('经度的整数范围应在74-136之间，请重新填写！');
          //   this.formObj.gdX = '';
          //   return;
          // }
          _self.formObj["persId"] = _self.recPersId;
          _self.formObj["id"] = _self.currentObjectRgstrId;
          console.log(_self.formObj);
          try {
            this.$confirm("确认保存基础信息？", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(() => {
                // request.post("/att/swhs/base/crrct", _self.formObj).then(res => {
                //   if (res.success) {
                //     _self.$emit("addShuiKuSuccess");
                //     _self.getRgstridObj();
                //     _self.$message.success("修改成功");
                //   } else {
                //     _self.$emit("cancelHandler");
                //   }
                // });
                // 修改登记表即可
                request.post("/bis/insp/swhs/rgstr", _self.formObj).then(res => {
                  if (res.success) {
                    _self.$emit("addShuiKuSuccess");
                    _self.getRgstridObj();
                    _self.$message.success("修改成功");
                  } else {
                    _self.$emit("cancelHandler");
                  }
                });
              })
              .catch(() => {});
          } catch (e) {}
        }
      })

    },
    cancelHandler() {
      this.$emit("cancelHandler");
    },
    formatRadio(val) {
      if (val == "1") {
        return "是";
      } else if (val == "0") {
        return "否";
      } else {
        return val;
      }
    },
    getAreaList(val) {
      let areaParams = {
        adName: "",
        id: this.dczId,
        pageNum: 1,
        pageSize: 10000
      };
      let adCode = "";
      if (!val) {
        adCode = "000000000000";
      } else {
        adCode = val;
      }
      request
        .get("/dc/ad/base/getAdData", { params: { adCode: adCode } })
        .then(res => {
          if (res.success) {
            if (this.curSelectItem == 1) {
              this.cityList = res.data;
            } else if (this.curSelectItem == 2) {
              this.countryList = res.data;
            } else {
              this.provList = res.data;
            }
          }
        });
    },
    provChange(val) {
      this.curSelectItem = 1;
      this.cityName = "";
      this.countryName = "";
      this.formObj.admDiv = val;
      this.provList.forEach(ele => {
        if (ele.adCode == this.provName) {
          this.provNames = ele.adName;
        }
      });
      this.formObj.locationCun = this.provNames;
      this.getAreaList(val);
    },
    cityChange(val) {
      this.curSelectItem = 2;
      if (val && val != "") {
        this.formObj.admDiv = val;
        this.countryName = "";
        this.cityList.forEach(ele => {
          if (ele.adCode == this.cityName) {
            this.cityNames = ele.adName;
          }
        });
        this.formObj.locationCun = this.provNames + this.cityNames;
        this.getAreaList(val);
      }
    },
    countryChange(val) {
      if (val && val != "") {
        this.formObj.admDiv = val;
        this.countryList.forEach(ele => {
          if (ele.adCode == this.countryName) {
            this.countryNames = ele.adName;
          }
        });
        this.formObj.locationCun =
          this.provNames + this.cityNames + this.countryNames;
      }
    },
    provTreeSelectChangeHandler: function(params) {
      this.formObj.adCode = params.code;
      this.formObj.adName = params.name;
      this.showMenuTree = false;
    },
    //  近期面貌
    recentAppearance(){
      this.jqmmShow = true;

    },
    jqmmDialog(){
      this.jqmmShow = false;
    },

    //  影像
    imageClick(){
      if(!this.formObj.centerX && !this.formObj.centerY){
        this.$message.warning('暂无经纬度信息！');
        return false;
      }
      this.imageShow = true;

    }
  },
  filters:{

  }
};
</script>

<style lang="scss" scoped>

#dcdxHeader {
  padding: 15px 20px;
}

#dxdcFooter {
  text-align: center;
}

#dxdcAside {
  border: 1px solid #d5d5ff;
}

.el-dialog__wrapper .el-treeWhite {
  /* max-height: 260px !important; */
}

.gcsthyxglqk .el-button--mini {
  padding: 0px 15px;
}
.nameClass{
  text-align:right;
  font-size:13px;
  font-family:PingFangSC-Medium;
  font-weight:500;
  color:rgba(51,51,51,1)
}
.valueClass{
  text-align:left;
  align-items: center;
  display: flex;
  font-size:13px;
  font-family:MicrosoftYaHei;
  color:rgba(51,51,51,1);
}
.rowClass{
  align-items: center;
  display: flex;
  border-bottom: 1px dashed #C5C6C8;
}
.rowClass1{
  align-items: center;
  display: flex;
}
.popupContentClass{
  overflow: auto;
}
</style>