real3d-portalsite/src/views/siteselection/components/fzxz.vue

<template>
  <div class="hgxsc">
    <el-form
      :model="ruleForm"
      ref="ruleForm"
      label-width="100px"
      :rules="rules"
    >
      <!-- <div class="block-title">基本信息</div> -->
      <el-form-item label="选址范围:" prop="xzmj">
        <range type="hgxfx" :keys="['hx', 'sc']" class="range" ref="range" />
      </el-form-item>
      <el-form-item label="项目名称:" prop="xmmc">
        <el-input
          v-model="ruleForm.xmmc"
          size="mini"
          placeholder="请输入项目名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="项目类型:" prop="xmlx">
        <el-input
          v-model="ruleForm.xmlx"
          size="mini"
          placeholder="请输入项目类型"
        ></el-input>
      </el-form-item>
      <el-form-item label="建设单位:" prop="jsdw">
        <el-input
          v-model="ruleForm.jsdw"
          size="mini"
          placeholder="请输入建设单位"
        ></el-input>
      </el-form-item>
      <el-form-item label="数据源:" prop="sjy">
        <el-select
          v-model="ruleForm.sjy"
          placeholder="请选择数据源"
          size="mini"
          :popper-append-to-body="false"
        >
          <el-option
            v-for="item in options"
            :key="item.fzbs"
            :label="item.sjymc"
            :value="item.sjymc"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="用地类型:" prop="ydlx">
        <!-- <el-input
          v-model="ruleForm.ydlx"
          size="mini"
          placeholder="请输入用地类型"
        ></el-input> -->

        <el-cascader
          v-model="ruleForm.ydlx"
          :options="cascaderOptions"
          :props="{ expandTrigger: 'hover', checkStrictly: true }"
          @change="handleChange"
          :show-all-levels="false"
          size="mini"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="用地面积" required>
        <el-col :span="11">
          <el-form-item prop="ydmjs">
            <el-input
              Onkeyup="this.value=this.value.replace(/[^\d^\.]+/g,'').replace(/^0+(\d)/,'$1').replace(/^\./,'0.').match(/\d+.?\d{0,2}/);this.dispatchEvent(new Event('input'))"
              v-model="ruleForm.ydmjs"
              size="mini"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-form-item prop="ydmje">
            <el-input
              Onkeyup="this.value=this.value.replace(/[^\d^\.]+/g,'').replace(/^0+(\d)/,'$1').replace(/^\./,'0.').match(/\d+.?\d{0,2}/);this.dispatchEvent(new Event('input'))"
              v-model="ruleForm.ydmje"
              size="mini"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-form-item>
    </el-form>
    <div class="site-title">
      <div class="siteCon">
        <div class="site_Icon"></div>
        <span>影响因子</span>
      </div>
      <el-button size="mini" @click="yzpz">配置</el-button>
    </div>
    <div class="treeDiv">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="因子名称" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="条件" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ yztj(scope.row.condition) }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="value" label="值" show-overflow-tooltip>
        </el-table-column>
      </el-table>
    </div>
    <div class="bottomBtns">
      <span class="clearBtn" @click="reset">取消</span>
      <span class="sureBtn" @click="submitData">确定</span>
    </div>
    <yxyzPop :tableData="tableData" ref="yxyzPop"></yxyzPop>
  </div>
</template>

<script>
import yxyzPop from "./yxyzPop.vue"; ///mapview/range
import range from "@/components/mapview/range.vue"; ///mapview/range
import { GetDldmTree } from "../../../api/ghss/ghxz.js";
import hgxfx from "../../../../static/data/ghss/data.js";
export default {
  components: {
    yxyzPop,
    range,
  },
  props: {
    activeTabs: {
      type: String,
    },
    loading: {
      type: Boolean,
    },
  },

  data() {
    return {
      xz: [],
      ruleForm: {
        xzmj: 0,
        xmmc: "",
        jsdw: "",
        xmlx: "",
        ydlx: "",
        ydmjs: "", //用地面积开始
        ydmje: "", //用地面积结束
        sjy: "国土空间总体规划", //数据源
      },
      rules: {
        xzmj: [{ required: true, message: "请填写范围的数据" }],
        // xzmj: [{ required: true, message: "请绘制选址范围" }],
        xmmc: [
          { required: true, message: "请输入项目名称", trigger: "blur" },
          { min: 3, max: 10, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        jsdw: [{ required: true, message: "请输入建设单位", trigger: "blur" }],
        xmlx: [{ required: true, message: "请输入项目类型", trigger: "blur" }],
        ydlx: [{ required: true, message: "请输入用地类型", trigger: "blur" }],
        ydmjs: [{ required: true, message: "请输入用地面积", trigger: "blur" }],
        ydmje: [{ required: true, message: "请输入用地面积", trigger: "blur" }],

        sjy: [{ required: true, message: "请选择数据源", trigger: "change" }],
      },
      options: [
        {
          bsm: "vector.XZYDYH",
          sjymc: "国土空间总体规划",
          fzbs: "YDYHFLDM",
          dmzd: "YDYHFLDM",
          mczd: "YDYHFLMC",
          xzqdmzd: "XZQDM",
          xzqmczd: "XZQMC",
        },
      ],
      tableData: [],
      dialogVisible: false, //选址影响因子的弹窗显隐
      value: [],
      kxyzList: [
        {
          bsm: "BWG",
          yxyzmc: "博物馆",
          level: 1,
          parent_bsm: "GGFWSS",
          has_yxz: true,
          spatial_type: "identity",
        },
        {
          bsm: "CZKFBJ",
          yxyzmc: "城镇开发边界",
          level: 1,
          parent_bsm: "DXGK",
          has_yxz: false,
          spatial_type: "contain",
        },
        {
          bsm: "DL",
          yxyzmc: "电力",
          level: 2,
          parent_bsm: "GX",
          has_yxz: true,
          spatial_type: "identity",
        },
        {
          bsm: "DX",
          yxyzmc: "电信",
          level: 2,
          parent_bsm: "GX",
          has_yxz: true,
          spatial_type: "identity",
        },
        {
          bsm: "DXGK",
          yxyzmc: "底线管控",
          level: 0,
          parent_bsm: null,
          has_yxz: null,
          spatial_type: null,
        },
        {
          bsm: "GGFWSS",
          yxyzmc: "公共服务设施",
          level: 0,
          parent_bsm: null,
          has_yxz: null,
          spatial_type: null,
        },
        {
          bsm: "GL",
          yxyzmc: "公路",
          level: 2,
          parent_bsm: "JT",
          has_yxz: true,
          spatial_type: "identity",
        },
        {
          bsm: "GS",
          yxyzmc: "供水",
          level: 2,
          parent_bsm: "GX",
          has_yxz: true,
          spatial_type: "identity",
        },
        {
          bsm: "GX",
          yxyzmc: "管线",
          level: 1,
          parent_bsm: "SZSS",
          has_yxz: null,
          spatial_type: null,
        },
        {
          bsm: "GY",
          yxyzmc: "公园",
          level: 1,
          parent_bsm: "GGFWSS",
          has_yxz: true,
          spatial_type: "identity",
        },
        {
          bsm: "JT",
          yxyzmc: "交通",
          level: 1,
          parent_bsm: "SZSS",
          has_yxz: null,
          spatial_type: null,
        },
        {
          bsm: "JYZ",
          yxyzmc: "加油站",
          level: 2,
          parent_bsm: "JT",
          has_yxz: true,
          spatial_type: "identity",
        },
        {
          bsm: "LD",
          yxyzmc: "绿地",
          level: 1,
          parent_bsm: "GGFWSS",
          has_yxz: true,
          spatial_type: "identity",
        },
        {
          bsm: "LJCLSS",
          yxyzmc: "垃圾处理设施",
          level: 2,
          parent_bsm: "QT",
          has_yxz: true,
          spatial_type: "identity",
        },
        {
          bsm: "PS",
          yxyzmc: "排水",
          level: 2,
          parent_bsm: "GX",
          has_yxz: true,
          spatial_type: "identity",
        },
        {
          bsm: "QT",
          yxyzmc: "其他",
          level: 1,
          parent_bsm: "SZSS",
          has_yxz: null,
          spatial_type: null,
        },
        {
          bsm: "RQ",
          yxyzmc: "燃气",
          level: 2,
          parent_bsm: "GX",
          has_yxz: true,
          spatial_type: "identity",
        },
        {
          bsm: "STBHHX",
          yxyzmc: "生态保护红线",
          level: 1,
          parent_bsm: "DXGK",
          has_yxz: false,
          spatial_type: "contain",
        },
        {
          bsm: "SY",
          yxyzmc: "输油",
          level: 2,
          parent_bsm: "GX",
          has_yxz: true,
          spatial_type: "identity",
        },
        {
          bsm: "SZSS",
          yxyzmc: "市政设施",
          level: 0,
          parent_bsm: null,
          has_yxz: null,
          spatial_type: null,
        },
        {
          bsm: "TCC",
          yxyzmc: "停车场",
          level: 2,
          parent_bsm: "JT",
          has_yxz: true,
          spatial_type: "identity",
        },
        {
          bsm: "TL",
          yxyzmc: "铁路",
          level: 2,
          parent_bsm: "JT",
          has_yxz: true,
          spatial_type: "identity",
        },
        {
          bsm: "TSG",
          yxyzmc: "图书馆",
          level: 1,
          parent_bsm: "GGFWSS",
          has_yxz: true,
          spatial_type: "identity",
        },
        {
          bsm: "TYG",
          yxyzmc: "体育馆",
          level: 1,
          parent_bsm: "GGFWSS",
          has_yxz: true,
          spatial_type: "identity",
        },
        {
          bsm: "WSCLC",
          yxyzmc: "污水处理厂",
          level: 2,
          parent_bsm: "QT",
          has_yxz: true,
          spatial_type: "identity",
        },
        {
          bsm: "XX",
          yxyzmc: "学校",
          level: 1,
          parent_bsm: "GGFWSS",
          has_yxz: true,
          spatial_type: "identity",
        },
        {
          bsm: "YJJBNT",
          yxyzmc: "永久基本农田",
          level: 1,
          parent_bsm: "DXGK",
          has_yxz: false,
          spatial_type: "identity",
        },
        {
          bsm: "YY",
          yxyzmc: "医院",
          level: 1,
          parent_bsm: "GGFWSS",
          has_yxz: true,
          spatial_type: "identity",
        },
        {
          bsm: "ZRWHBHQ",
          yxyzmc: "自然文化保护区",
          level: 1,
          parent_bsm: "DXGK",
          has_yxz: false,
          spatial_type: "identity",
        },
        {
          bsm: "ZYCRK",
          yxyzmc: "主要出入口",
          level: 2,
          parent_bsm: "JT",
          has_yxz: true,
          spatial_type: "identity",
        },
      ],
      cascaderOptions: [], //用地性质数据存储数组
    };
  },
  computed: {},
  mounted() {
    GetDldmTree({
      fzbs: "3DDLDM",
    }).then((res) => {
      //顶级树只有一个
      let childArr = res.data;
      childArr.forEach((item) => {
        let child = item.children;
        if (item.children.length < 1) {
          item.children = undefined;
        } else {
          for (var i = 0; i < child.length; i++) {
            if (child[i].children.length < 1) {
              //判断children的数组长度
              child[i].children = undefined;
            }
          }
        }
      });

      this.cascaderOptions = childArr; //为Cascader的options值
    });
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
    submitData() {
      // this.$emit("updateParent", "loading", true);
      //     setTimeout(() => {
      //       let bsm = "8979e8f6a9364828a9d6b2e459c8fd76";
      //       this.$emit("updateParent", "nowObj", this.ruleForm);
      //       this.$emit("updateParent", "rzBsm", bsm);
      //       this.$emit("updateParent", "loading", false);
      //       this.reset();
      //     }, 500);

      //更新范围
      var _temp = this.$refs.range.getRange();
      // this.ruleForm.xzfw = _temp.xzfw;
      this.ruleForm.xzmj = _temp.xzmj || hgxfx.xzmj;
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: "分析中",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
          setTimeout(() => {
            loading.close();
            this.activeTabs = "lsju";
            this.$emit("updateParent", "activeTabs", "lsju");
            this.$message({
              message: "分析成功！",
              type: "success",
            });
            this.reset();
          }, 2000);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    reset() {
      (this.ruleForm = {
        xmmc: "",
        jsdw: "",
        xmlx: "",
        ydlx: "",
        ydmjs: "", //用地面积开始
        ydmje: "", //用地面积结束
        sjy: "国土空间总体规划", //数据源
        xzmj: 0,
      }),
        (this.tableData = []);
      this.$refs.ruleForm.resetFields();
      this.$refs.range.reset();
    },
    // 影响因子条件展示
    yztj(val) {
      if (val == "identity") {
        return "范围内";
      } else if (val == "n_identity") {
        return "范围外";
      } else if (val == "contain") {
        return "距离包含";
      } else if (val == "n_contain") {
        return "距离不包含";
      }
    },
    yzpz() {
      this.$refs.yxyzPop.dialogVisible = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.hgxsc {
  height: 100%;
  line-height: 40px;
  .rangDiv {
    width: 100%;
    // height: 100px;
    display: flex;
    justify-content: space-between;
  }
  .range {
    // flex: 1;
    // width: calc(100% - 100px);
    // position: absolute;
    // left: 100px;
    flex: 1;
    width: 100%;
  }

  .treeDiv {
    width: 100%;
    height: calc(100% - 400px);
    // padding: 7px;
    margin-bottom: 10px;
    overflow-y: auto;
  }
}
/deep/ .el-input .el-input--mini .el-input--suffix {
  width: 100%;
}
/deep/ .el-select {
  width: 100%;
}
/deep/ .el-form-item__error {
  top: 32px !important;
}
</style>