fj-dc-ui/.svn/pristine/40/40c36c958d0b50de2a9737dc0d8253dd56af71b1.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">
          <p style="margin-top:10px;margin-bottom: 10px;overflow: hidden;">
            <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.gateName" autocomplete="off" style="width:70%;"></el-input>
          </el-form-item>

          <el-form-item label="水闸类型" prop="gateType">
            <el-select v-model="formObj.gateType" placeholder="请选择">
              <el-option
                v-for="item in gateTypeArray"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="工程规模" prop="engScal">
            <el-select v-model="formObj.engScal" placeholder="请选择">
              <el-option
                v-for="item in gongchengguimo"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="过闸流量(m³/s)">
            <el-input v-model="formObj.gateFlow" autocomplete="off" style="width:70%;"></el-input>
          </el-form-item>
          <el-form-item label="建设情况" prop="engSta">
            <el-select v-model="formObj.engSta" placeholder="请选择">
              <el-option
                v-for="item in jiansheInfo"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="this.formObj.engSta === '2' || this.formObj.engSta === null ? true:false" label="开工年月">
            <el-date-picker
            @change="startTimeToform"
            value-format="yyyy-MM"
            v-model="begTime"
            type="month"
            placeholder="选择月">
          </el-date-picker>
          </el-form-item>
          <el-form-item v-if="this.formObj.engSta === '1' ? true:false" label="建成年月">
            <el-date-picker
             @change="bulidTimeToform"
             value-format="yyyy-MM"
            v-model="endTime"
            type="month"
            placeholder="选择月">
          </el-date-picker>
          </el-form-item>
          <el-form-item label="管理单位">
            <el-input v-model="formObj.gateAdmName" autocomplete="off" style="width:70%;"></el-input>
          </el-form-item>
<!--          <el-form-item label="主管部门" clearable>-->
<!--            <el-input v-model="formObj.gateAdmDep" autocomplete="off" style="width:70%;"></el-input>-->
<!--          </el-form-item>-->
          <el-form-item label="行政区划">
            <br/>
            <p  v-if="isShow" style="line-height: 40px;">名称:
              <el-input
              v-model="adName"
              autocomplete="off"
              auto-complete="off"
              readonly
              style="width:70%;"
              ></el-input>
            </p>
            <p style="line-height: 40px;">代码:
              <el-input
              v-model="formObj.adCode"
              autocomplete="off"
              @focus="showMenuTree = true"
              auto-complete="off"
              readonly
              style="width:70%;"
              ></el-input>
            </p>
            <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.location" 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="添加注册登记照片">
               <span style="color:#40aae7;cursor:pointer;" @click="addPicReg">添加</span>
          </el-form-item>
          <el-form-item label>
            <!-- <el-button @click="cancelHandler">取 消</el-button> -->
            <el-button style="padding:7px 15px" type="primary" @click="addHandler" v-if="openType">保 存</el-button>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
    <addPic v-if="jqmmDialogShow" :dialogTitle="'登记照片'" :type="'bxzzqlaq'"  @jqmmDialogClose="jqmmDialogClose" :jqmmEngId="id" :openType="openType"></addPic>
    <theRecentAppearance v-if="jqmmShow" @jqmmDialogClose="jqmmDialog" :jqmmShow="jqmmShow" :jqmmEngId="currentObjectRgstrId" :openType="openType" :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="gdX" :gdY="gdY"></mapLocation>
      </div>
    </el-dialog>
  </div>
</template>

<script>
    import inputWith from "@widget/inuptWith.vue"
    import request from "@util/gw_ajax_request.js"
    import theRecentAppearance from '../../duChaDuiXiang/theRecentAppearance'
    import unlimitDatePicker from '@baseWidget/unLimitdatePicker.vue'
    import provTreeList from "../../../widgets/provTreeList";
    import mapLocation from '../mapLocation'
    import addPic from './addPic'
    import {
        getSzjcBxzz
    } from "@api/duChaTianBao.js"
export default {
  components: {
    inputWith: inputWith,
    provTreeList,
    theRecentAppearance: theRecentAppearance,
    mapLocation:mapLocation,
      addPic:addPic
  },
  props: [
    "currentObjectRgstrId",
    "currentResCode",
    "currentObjectId",
    "currentGroupId",
    "currentAdcode",
    "showOrEdit",
    "currentObjectName",
    "gdX","gdY",
    "openType"
  ],

  data() {
    return {
      id:"",
      isShow:"",
      adName:"",
      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: "",
        gateAdmDep:""
      },
      dialogFormVisible: false,
      formLabelWidth: "160px",
      loading: true,
      operationType1: "",
      currentResCode1: "",
      currentObjectId1: "",
      value1: "",
      gongchengguimo: [
        {
          value: "1",
          label: "大型"
        },
        {
          value: "2",
          label: "中型"
        },
        {
          value: "3",
          label: "小型"
        }
      ],
      jiansheInfo: [

        {
          value: "2",
          label: "在建"
        },
        {
          value: "1",
          label: "已建"
        },
      ],
      gateTypeArray: [
        {
          value: "1",
          label: "分(泄)洪闸"
        },
        {
          value: "2",
          label: "节制闸"
        },
        {
          value: "3",
          label: "排(退)水闸"
        },
        {
          value: "4",
          label: "引(进)水闸"
        },
        {
          value: "5",
          label: "挡潮闸"
        },
        {
          value: "6",
          label: "船闸"
        },
        {
          value: "9",
          label: "其他"
        }
      ],
      zhubaleixing: [
        {
          value: "1",
          label: "混凝土坝"
        },
        {
          value: "2",
          label: "碾压混凝土坝"
        },
        {
          value: "3",
          label: "浆砌石坝"
        },
        {
          value: "4",
          label: "土坝"
        },
        {
          value: "5",
          label: "堆石坝"
        },
        {
          value: "6",
          label: "挡水坝"
        },
        {
          value: "7",
          label: "其他"
        }
      ],
      provList: [],
      cityList: [],
      countryList: [],
      provName: "",
      cityName: "",
      countryName: "",
      provNames: "",
      cityNames: "",
      countryNames: "",
      curSelectItem: 0,
      showLocSelect: false,
      locat: {
        location: "",
        admDiv: ""
      },
      formIsShow: true,
      jqmmButton: false,
      jqmmShow: false,
      imageShow: false,
      jqmmDialogShow:false
    };
  },
  computed: {
    recPersId() {
      return localStorage.getItem("userid")
        ? localStorage.getItem("userid")
        : "";
    }
  },
  created() {
    if (this.showOrEdit === "show") {
      this.formIsShow = false;
    } else {
      this.formIsShow = true;
    }
  },
  mounted() {
    this.currentResCode1 = this.currentResCode;
    this.currentObjectId1 = this.currentObjectId;
    this.getRgstridObj();
    this.getAreaList();
  },
  watch: {
    currentObjectRgstrId(n, o) {
      this.getRgstridObj();
    },
    showLocSelect(val) {
      if (!val) {
        this.formObj.location = this.locat.location;
        this.formObj.admDiv = this.locat.admDiv;
        this.provName = "";
        this.cityName = "";
        this.countryName = "";
      }
    }
  },
  methods: {
    jqmmDialogClose(){
       this.jqmmDialogShow = false;
    },
    addPicReg(){
       this.jqmmDialogShow = true;
    },
    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;
        getSzjcBxzz(_self.currentObjectRgstrId).then(res => {
          if (res.data) {
            _self.formObj = res.data;
            this.locat.location = res.data.location;
            this.locat.admDiv = res.data.admDiv;
            this.isShow = false;
            this.id = res.data.objCode;
            //处理开工时间和建成时间
            if(res.data.engSta ==='2'){//根据app人员截图，2是在建 所以有开工时间
              _self.begTime = res.data.staTimeYear + '-' + res.data.staTimeMon;
            }
            if(res.data.engSta ==='1'){//根据app人员截图，1是已建 所以使用
              _self.endTime = res.data.buidTimeYear + '-' + res.data.buidTimeMon;
            }
          } else {
            _self.formObj = {};
          }
        },
        err => {}
      );
    },
    addHandler() {
      var _self = this;
      // _self.formObj.compDate = _self.value1;
      // _self.formObj['compDate'] = _self.value1;
      //基础信息纠错，经纬度修改粗略校验经度纬度整数部分的范围
      if(this.formObj.gdY < 4 || this.formObj.gdY > 54){
          this.$message.error('纬度的整数范围应在4-54之间，请重新填写！');
          this.formObj.gdY = '';
          return;
      }
      if(this.formObj.gdX < 74 || this.formObj.gdX > 136){
          this.$message.error('经度的整数范围应在74-136之间，请重新填写！');
          this.formObj.gdX = '';
          return;
      }
      _self.formObj["persId"] = _self.recPersId;
      _self.formObj.objId = _self.currentObjectId1;
      _self.formObj.locationCun = _self.formObj.location;
      console.log(_self.formObj);

      try {
        this.$confirm("确认保存基础信息？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            request.post("/bis/insp/wagajs/bdg", _self.formObj).then(res => {
              if (res.success) {
                _self.$emit("addShuiKuSuccess");
                _self.showLocSelect = false;
                _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.adName = params.name;
      this.isShow = true;
    },
    //  近期面貌
    recentAppearance(){
      this.jqmmShow = true;

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

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

    }
  }
};
</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;
}
</style>