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

<template>
  <div class="hgxsc">
    <!-- <div class="site-title">
      选址范围
      <span>导入</span>
      <span>绘制</span>
    </div> -->
    <div class="rangDiv">
      <div class="block-title">选址范围</div>
      <range :keys="['hx', 'sc']" class="range" ref="range" />
    </div>
    <el-form
      :model="ruleForm"
      ref="ruleForm"
      label-width="100px"
      :rules="rules"
    >
      <div class="block-title">基本信息</div>
      <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-form-item>
      <el-form-item label="用地面积" required>
        <el-col :span="11">
          <el-form-item prop="ydmjs">
            <el-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 v-model="ruleForm.ydmje" size="mini"></el-input>
          </el-form-item>
        </el-col>
      </el-form-item>
    </el-form>
    <div class="site-title">
      <div class="site_Icon"></div>
      影响因子
      <!-- <span @click="yzpz">配置</span> -->
      <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 :dialogVisible="dialogVisible" :tableData="tableData"></yxyzPop>
  </div>
</template>

<script>
import yxyzPop from "./yxyzPop.vue"; ///mapview/range
import range from "@/components/mapview/range.vue"; ///mapview/range

export default {
  components: {
    yxyzPop,
    range,
  },
  props: {
    activeTabs: {
      type: String,
    },
    loading: {
      type: Boolean,
    },
  },

  data() {
    return {
      xz: [],
      ruleForm: {
        xmmc: "",
        jsdw: "",
        xmlx: "",
        ydlx: "",
        ydmjs: "", //用地面积开始
        ydmje: "", //用地面积结束
        sjy: "国土空间总体规划", //数据源
      },
      rules: {
        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",
        },
      ],
    };
  },
  computed: {},
  mounted() {},
  methods: {
    submitData() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {

          // this.activeTabs = 'lsju'
          this.$emit('updateParent','activeTabs','lsju')
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    reset() {
      (this.ruleForm = {
        xmmc: "",
        jsdw: "",
        xmlx: "",
        ydlx: "",
        ydmjs: "", //用地面积开始
        ydmje: "", //用地面积结束
        sjy: "国土空间总体规划", //数据源
      }),
        this.$refs.ruleForm.resetFields();
    },

    // 影响因子条件展示
    yztj(val) {
      // switch (val) {
      //   case 'C':
      //     return ''
      //     break;

      //   default:
      //     break;
      // }
      if (val == "C") {
        return "范围内";
      } else if (val == "N") {
        return "范围外";
      } else if (val == "A") {
        return "距离包含";
      } else if (val == "B") {
        return "距离不包含";
      } else if (val == "F") {
        return "分析";
      }
    },
    yzpz() {
      this.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;
  }

  .treeDiv {
    width: 100%;
    height: calc(100% - 400px);
    // padding: 7px;
    margin-bottom: 10px;
    overflow-y: auto;
    /deep/ .el-table {
      background-color: transparent !important;
      // border: none;
      color: #CDDEEB;
    }
    /deep/ .el-table--border {
      border-radius: 5px;
    }
    /deep/ .el-table tr {
      background-color: transparent !important;
      color: #CDDEEB;
      height: 43px ;
    }
    /deep/ .el-table .el-table__cell {
      background-color: transparent !important;
      padding: 0 !important;
    }

    /deeep/ .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
  border-bottom: 1px solid #667e8f7c !important;
}

    // 设置表头的颜色
    /deep/.el-table thead tr > th {
      width: 100%;
      background-color: #0a2450;
      color: #CDDEEB;
      border: none;
    }
    // 去除每行的边框
    /deep/.el-table tbody tr > td {
      // background-color: rgb(26,28,119);
      color: #CDDEEB;
      border: none;
    }
    /deep/ .el-table thead {
      background-color: #0a2450 !important;
    }
    // 设置行的背景颜色
    // /deep/ .el-table tr:nth-child(even) {
    //   background-color: transparent !important;
    // }
    // /deep/ .el-table tr:nth-child(odd) {
    //   background-color: transparent !important;
    // }
  }
}
/deep/ .el-input .el-input--mini .el-input--suffix {
  width: 278px !important;
}
/deep/ .el-select {
  width: 278px !important;
}
/deep/ .el-form-item__error {
  top: 32px !important;
}

</style>