adm/src/components/market/owner/contractDialog.vue

<template>
  <el-dialog title="项目及建筑信息管理" :visible.sync="mapShow" width="45%">
    <!-- <my-map style="margin-bottom:20px;"></my-map> -->
    <div v-if="!perjId">
      <el-form ref="perj" :model="perj" label-width="150px">
        <el-form-item
          label="项目本地名称："
          :rules="{ required: true, message: '项目名称不能为空', trigger: 'blur' }"
        >
          <el-input v-model="perj.infos.ProjLocalName"></el-input>
        </el-form-item>
        <div>
          <b-map type="create" @getPoint="pointChange"></b-map>
        </div>
        <el-form-item label="省市区域：">
          <span>{{Provinces | mess}}</span>
        </el-form-item>
        <el-form-item label="气候区域：">
          <span>{{ClimateZone | mess}}</span>
        </el-form-item>
        <el-form-item label="城市发展水平：">
          <span>{{UrbanDevpLev | mess}}</span>
        </el-form-item>
        <el-form-item label="海拔：">
          <span>{{perj.infos.Altitude | mess}}</span>
        </el-form-item>
        <el-form-item label="纬度：">
          <span>{{perj.infos.Latitude | mess}}</span>
        </el-form-item>
        <el-form-item label="经度：">
          <span>{{perj.infos.Longitude | mess}}</span>
        </el-form-item>
      </el-form>
      <div class="dialog_border"></div>
      <div v-if="isCreate">
        <h3 class="dialog_height">建筑信息</h3>
        <template v-for="item in buildArr">
          <build
            :buildType="buildCreate(item)"
            :buildData="item"
            :id="param.perjId"
            :buildMess="buildMess"
            :funcTypeArr="funcTypeArr"
          ></build>
        </template>
        <el-button type="text" @click="addBuild" class="create-build">添加建筑</el-button>
      </div>
      <span slot="footer" class="dialog-footer" v-if="!isCreate">
        <el-button @click="mapShow = false">取 消</el-button>
        <el-button type="primary" @click="success">{{isCreate ? "确 定" : "确认添加项目"}}</el-button>
      </span>
    </div>
    <div v-else>
      <el-form ref="perj" :model="perj" label-width="150px">
        <form-input
          :value="perj.infos.ProjLocalName"
          @change="perjChange"
          :keys="'ProjLocalName'"
          :label="'项目本地名称'"
          :isRule="false"
        ></form-input>
        <div>
          <b-map
            type="change"
            v-if="changeMap"
            :code="perj.area_code"
            :location="locations"
            @getPoint="pointChange"
          ></b-map>
        </div>
        <el-form-item label="省市区域：">
          <span>{{Provinces | mess}}</span>
        </el-form-item>
        <el-form-item label="气候区域：">
          <span>{{ClimateZone | mess}}</span>
        </el-form-item>
        <el-form-item label="城市发展水平：">
          <span>{{UrbanDevpLev | mess}}</span>
        </el-form-item>
        <el-form-item label="海拔：">
          <span>{{perj.infos.Altitude | mess}}</span>
        </el-form-item>
        <el-form-item label="纬度：">
          <span>{{perj.infos.Latitude | mess}}</span>
        </el-form-item>
        <el-form-item label="经度：">
          <span>{{perj.infos.Longitude | mess}}</span>
        </el-form-item>
      </el-form>
      <project-view v-if="projShow" :label="projLabel" :value="perj"></project-view>
      <div style="height:40px;">
        <el-button style="float:right;" v-if="!projShow" @click="projShow = true" type="text">维护详细信息</el-button>
        <el-button style="float:right;" v-if="projShow" @click="projShow = false" type="text">收起</el-button>
      </div>
      <div class="dialog_border"></div>
      <h3 class="dialog_height">建筑信息</h3>
      <template v-for="(item,index) in buildArr">
        <build
          :buildType="buildCreate(item)"
          @del="del(index)"
          @created="changeBuild(item)"
          :id="param.perjId"
          :buildData="item"
          :buildMess="buildMess"
          :funcTypeArr="funcTypeArr"
        ></build>
      </template>
      <el-button type="text" @click="addBuild" class="create-build">添加建筑</el-button>
    </div>
  </el-dialog>
</template>

<script>
import formInput from "@/components/market/owner/formInput";
import bMap from "@/components/market/owner/map";
import build from "@/components/market/owner/build";
import project from "./project"
import projectView from "./project.vue"
import tools from "@/utils/tools";

export default {
  components: {
    formInput,
    bMap,
    build,
    projectView
  },
  props: ["show", "param", "buildMess", "funcTypeArr"],
  data() {
    return {
      mapShow: true,
      perjId: false,
      perj: {
        area_code: "",
        infos: {
          ProjLocalName: "", //String，必填，项目本地名称
          ClimateZone: "", //String，气候区域
          UrbanDevpLev: "", //String，城市发展水平
          Altitude: "", //海拔
          Longitude: "", //经度
          Latitude: "" //纬度
        }
      },
      Provinces: "", //省市区
      UrbanDevpLev: "", //城市发展水平
      ClimateZone: "", //气候区域
      buildArr: [
        //项目下建筑的列表
      ],
      projShow: false,
      locations: {
        //默认经纬度
      },
      changeMap: false, //控制地图修改的显示
      isCreate: false, //是否添加建筑
      projLabel: []
    };
  },
  created() {
    if (this.param.perjId) {
      this.perjId = true;
    } else {
      this.perjId = false;
    }
    this.mapShow = this.show;
    this.perj.infos.ProjLocalName = this.param.projectName;
    //如果perjId存在，查询详情
    if (this.param.perjId) {
      this.getPerjMess();
      this.getBuildList();
    }
    this.getPorjLabel()
  },
  methods: {
    //获取项目的信息点
    getPorjLabel() {
      //   this.getJson("/server/dataplatform/infocode/complex_query?projectId=Pj1101080001&type=project&combine=true&enrich=true",
      //     {},
      //     res => {
      //       console.log(res, "res")
      //     })
      this.projLabel = tools.arrayCnt(project);
    },
    //地图获取到坐标code码
    pointChange(code, location, Provinces, type) {
      this.perj.area_code = code;
      this.perj.infos.Longitude = location.lng;
      this.perj.infos.Latitude = location.lat;
      let param = {
        area_code: code
      };
      this.Provinces = Provinces;
      //获取地域信息等信息点
      this.postJson("/server/business-os/area/query", param, res => {
        this.perj.infos.ClimateZone = res.content.ClimateZone.code;
        this.perj.infos.UrbanDevpLev = res.content.UrbanDevpLev.code;
        this.perj.infos.Altitude = Number(res.content.Altitude) || null;
        this.ClimateZone = res.content.ClimateZone.name;
        this.UrbanDevpLev = res.content.UrbanDevpLev.name;
        if (this.perj.infos.ProjID) {
          this.perjChange(type, "baiduMap");
        }
      });
    },

    //项目本地名称被修改
    perjChange(val, key) {
      this.perj.id = this.perj.infos.ProjID;
      let param = {}
      if (key == "ProjLocalName") {
        param.infos = {
          [key]: val
        }
        param.id = this.perj.id
      } else {
        if (val == "deat") {
          param = this.perj
        } else {
          return false
        }
      }
      this.postJson(
        "/server/business-os/proprietor/project/update",
        param,
        res => {
          this.$message.success("修改成功");
        }
      )
    },

    //点击添加建筑
    addBuild() {
      let buildObj = {
        projectId: this.param.perjId, //必填，项目id
        infos: {
          BuildLocalID: "", //建筑本地编码
          BuildLocalName: "", //建筑本地名称
          BuildAge: "", //建筑年代
          BuildFuncType: "" //建筑功能类型
        }
      };
      this.buildArr.push(buildObj);
    },

    //判断是否为添加建筑
    buildCreate(item) {
      if (item.id) {
        return "change";
      } else {
        return "create";
      }
    },

    //取消
    del(index) {
      this.buildArr.splice(index, 1);
    },

    changeBuild() {
      this.getBuildList();
    },

    //点击创建建筑时触发
    success() {
      let param = {};
      param.proprietorId = this.param.proprietorId;
      param.area_code = this.perj.area_code;
      param.infos = this.perj.infos;
      if (this.perj.area_code && this.perj.infos.ProjLocalName) {
        if (this.isCreate) {
          this.isCreate = true;
        } else {
          if (param.BuildFuncType && param.BuildFuncType.length > 1) {
            param.BuildFuncType =
              param.BuildFuncType[param.BuildFuncType.length - 1];
          }
          this.postJson(
            "/server/business-os/proprietor/project/create",
            param,
            res => {
              this.isCreate = true;
              this.param.perjId = res.id;
              this.perjId = res.id;
              this.getPerjMess();
              this.getBuildList();
            }
          );
        }
      } else {
        this.$message.error("请确定项目名与项目地址");
      }
    },

    //查询项目详情
    getPerjMess() {
      let params = {
        id: this.param.perjId
      };
      this.postJson(
        "/server/business-os/proprietor/project/query",
        params,
        res => {
          this.perj.infos = res.content.infos;
          this.perj.area_code = res.content.infos.UrbanZone;
          this.locations = {
            lng: res.content.infos.Longitude,
            lat: res.content.infos.Latitude
          };
          this.changeMap = true;
        }
      );
    },

    //获取项目下建筑列表
    getBuildList() {
      let param = {
        projectId: this.param.perjId //必填，项目id
      };
      this.postJson(
        "/server/business-os/proprietor/project/building/query",
        param,
        res => {
          this.buildArr = res.content;
        }
      );
    }
  },
  watch: {
    mapShow: {
      deep: true,
      handler(val, oldVal) {
        this.$emit("close");
        this.mapShow = true;
      }
    }
  },
  //过滤器
  filters: {
    //简单处理数组
    mess(val) {
      return val || "请在地图中选择项目地址";
    }
  }
};
</script>

<style lang="scss" scoped>
.dialog_height {
  line-height: 100px;
  font-size: 32px;
  text-align: center;
}
.dialog-footer {
  float: right;
}
.create-build {
  display: block;
  margin: auto;
}
</style>