规划支撑页面搭建

src/views/siteselection/components/fzxz.vue

@@ -0,0 +1,199 @@
+<template>
+  <div class="hgxsc">
+    <div class="block-title">
+      选址范围
+      <span>导入</span>
+      <span>绘制</span>
+      <!-- <div>选址范围</div>
+      <div>
+        <span>导入</span>
+        <span>绘制</span>
+      </div> -->
+    </div>
+    <!-- <range :keys="['hx', 'sc', 'zbd']" ref="range" /> -->
+    <el-form :model="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="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-input v-model="ruleForm.ydmjs" size="mini"></el-input>
+        </el-col>
+        <el-col class="line" :span="2">-</el-col>
+        <el-col :span="11">
+          <el-input v-model="ruleForm.ydmje" size="mini"></el-input>
+        </el-col>
+      </el-form-item>
+
+      <el-form-item label="数据源:" prop="sjy">
+        <el-select
+          v-model="ruleForm.sjy"
+          placeholder="请选择数据源"
+          size="mini"
+        >
+          <el-option
+            v-for="item in options"
+            :key="item.fzbs"
+            :label="item.sjymc"
+            :value="item.sjymc"
+          >
+          </el-option>
+          <!-- <el-option label="区域一" value="shanghai"></el-option>
+          <el-option label="区域二" value="beijing"></el-option> -->
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <div class="block-title">
+      影响因子
+      <span @click="yzpz">配置</span>
+      <!-- <div
+        v-show="$store.getters.name == 'admin'"
+        class="posi-abs pointer"
+        style="right: 0; top: 1px; color: #409eff"
+        @click="updateScx"
+      >
+        关联资源目录
+      </div> -->
+    </div>
+    <div class="treeDiv">
+      <el-table :data="tableData" border style="width: 100%">
+        <el-table-column prop="yzmc" label="因子名称" show-overflow-tooltip>
+        </el-table-column>
+        <el-table-column prop="tj" label="条件" show-overflow-tooltip>
+        </el-table-column>
+        <el-table-column prop="val" label="值" show-overflow-tooltip>
+        </el-table-column>
+      </el-table>
+    </div>
+    <div class="bottomBtns">
+      <el-button round class="btn-style" @click="reset">重置</el-button>
+      <el-button type="primary" round class="btn-style" @click="submitData">
+        检查</el-button
+      >
+    </div>
+<!-- 影响因子弹窗 -->
+    <el-dialog
+      title="选址因子设置"
+      :visible.sync="dialogVisible"
+      width="50%"
+      :before-close="handleClose"
+      :modal-append-to-body="false"
+    >
+      <span>这是一段信息</span>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="dialogVisible = false"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+// import range from "@/components/mapview/range.vue"; ///mapview/range
+export default {
+  components: {
+    // 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,//选址影响因子的弹窗显隐
+    };
+  },
+  mounted() {},
+  methods: {
+    yzpz() {
+      this.dialogVisible = true
+
+    },
+    handleClose(){
+      this.dialogVisible = false
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.hgxsc {
+  height: 100%;
+
+  .treeDiv {
+    width: 100%;
+    height: calc(100% - 250px);
+    padding: 7px;
+    margin-bottom: 10px;
+    overflow-y: auto;
+  }
+}
+</style>

src/views/siteselection/ghxz.scss

@@ -0,0 +1,192 @@
+.ghzc {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+
+    .innerContainer {
+        width: 430px;
+        height: 800px; //calc(100% - 20px);
+        position: absolute;
+        top: 28px;
+        z-index: 99;
+        background-image: url("/static/images/ghzc/background.png");
+        background-size: 100% 100%;
+    }
+
+    .leftPane {
+        left: 20px;
+
+        .vl-notice-title {
+            box-sizing: border-box;
+            width: 100%;
+            height: 42px;
+            background: url("/static/images/ghzc/title.png") no-repeat !important;
+            background-size: 100% 100% !important;
+            line-height: 43px;
+            font-size: 14px;
+            padding-left: 15px;
+            display: flex;
+            position: relative;
+            overflow: hidden;
+            cursor: move;
+        }
+    }
+
+    .rightPane {
+        right: 10px;
+    }
+
+    .xz_box {
+        width: 100%;
+        height: calc(100% - 42px);
+        padding: 1rem;
+        background: transparent;
+        border-color: transparent;
+
+        // tabs样式
+        .el-tabs__header {
+            height: 40px;
+            background: transparent;
+            border-bottom: none;
+        }
+
+        .el-tabs__item {
+            height: 40px;
+            line-height: 40px;
+            border-bottom: 2px solid #fff;
+        }
+
+        .el-tabs__item.is-active {
+            background: transparent;
+            border-color: transparent;
+            border-bottom-color: #409EFF;
+        }
+
+        .el-tabs__content {
+            padding: 0px !important;
+            overflow-x: auto;
+            height: calc(100% - 40px);
+            box-sizing: border-box;
+            padding-top: 10px !important;
+
+            .el-tab-pane {
+                height: 100%;
+            }
+        }
+
+        .el-form-item {
+            margin-bottom: 0 !important;
+        }
+
+        // .el-form-item__content {
+        //     line-height: 45px;
+        // }
+
+        // .el-form-item__label {
+        //     line-height: 45px;
+        // }
+        .bottomBtns {
+            width: 70%;
+            margin-left: 15%;
+            display: flex;
+            justify-content: space-between;
+            text-align: center;
+        }
+    }
+
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+    }
+
+    input[type="number"] {
+        -moz-appearance: textfield;
+    }
+
+    .block-title {
+        color: #fff;
+        padding-left: 10px;
+
+        // &::after {
+        //   position: absolute;
+        //   content: "";
+        //   background: #3a8ee6;
+        //   left: 0;
+        //   top: 3px;
+        //   width: 5px;
+        //   height: 15px;
+        //   border-radius: 3px;
+        // }
+    }
+}
+
+.flex-box {
+    display: flex;
+
+    &.column {
+        flex-direction: column;
+    }
+
+    &.align-center {
+        align-items: center;
+    }
+
+    &.align-between {
+        align-items: space-between;
+    }
+
+    &.align-end {
+        align-items: flex-end;
+    }
+
+    &.align-around {
+        align-items: space-around;
+    }
+
+    &.justify-center {
+        justify-content: center;
+    }
+
+    &.justify-between {
+        justify-content: space-between;
+    }
+
+    &.justify-end {
+        justify-content: flex-end;
+    }
+
+    &.justify-around {
+        justify-content: space-around;
+    }
+
+    .flex-content {
+        flex: 1;
+    }
+
+    &.nowrap {
+        flex-wrap: nowrap;
+    }
+
+    &.wrap {
+        flex-wrap: wrap;
+    }
+}
+
+// 占满容器
+.max-box {
+    width: 100%;
+    height: 100%;
+}
+
+.max-width {
+    width: 100%;
+}
+
+.max-height {
+    height: 100%;
+}
+
+// ie盒模型
+.box-sizing {
+    box-sizing: border-box;
+}

src/views/siteselection/index.vue

@@ -1,45 +1,127 @@
+<!--合规性分析-->
 <template>
-    <div class="siteselection">
-      <div class="innerContainer leftPane">智能规划选址</div>
+  <div class="ghzc siteselection">
+    <div class="innerContainer leftPane">
+      <h2 class="vl-notice-title">
+        <span class="lv-title">智能规划选址</span>
+        <span class="lv-icon-maxmini"> </span>
+        <i class="icon-remove"></i>
+      </h2>
+      <el-tabs type="border-card" class="xz_box" v-model="activeTabs" stretch>
+        <el-tab-pane label="辅助选址" name="fzxz">
+          <FZXZ></FZXZ>
+           </el-tab-pane>
+        <el-tab-pane label="历史记录" name="lsju"> </el-tab-pane>
+        <!-- :disabled="activeTabs != 'scjg'" -->
+        <el-tab-pane label="选址结果" name="xzjg"> </el-tab-pane>
+      </el-tabs>
     </div>
-  </template>
-  
-  <script>
-  export default {
-    name: "siteselection",
-    data() {
-      return {};
-    },
-    created() {},
-    methods: {},
-  };
-  </script>
-  
-  <style lang="scss" scoped>
-  .siteselection {
-    width: 100%;
-    height: 100%;
-    position: absolute;
+  </div>
+</template>
+
+<script>
+import FZXZ from "./components/fzxz.vue";
+export default {
+  name: "siteselection",
+  components: {
+    FZXZ
+  },
+  data() {
+    return {
+      activeTabs: "fzxz",
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.siteselection {
+  .xz_box {
+    .title {
+      padding: 8px;
+      margin-bottom: 10px;
+      span {
+        color: #605e5e;
+        padding-left: 8px;
+        border-left: 3px solid #3a8ee6;
+      }
+      button {
+        padding: 0;
+        float: right;
+        margin-right: 5px;
+        min-height: unset;
+      }
+    }
+    .el-form-item {
+      margin-bottom: 0;
+    }
+    .xz_table {
+      height: 180px;
+      /deep/.el-table__header-wrapper {
+        height: 40px;
+      }
+      /deep/.el-table__body-wrapper {
+        height: calc(100% - 40px);
+        overflow-y: auto;
+      }
+    }
+    .xz_type {
+      margin-bottom: 10px;
+      justify-content: space-evenly;
+      div {
+        i {
+          font-size: 36px;
+        }
+      }
+    }
+    .xz-btn {
+      width: 100%;
+      // background: #efefef;
+      position: absolute;
+      height: 55px;
+      z-index: 999;
+      bottom: 0;
+      right: 0;
+      display: flex;
+      align-items: center;
+    }
+    .jg-box {
+      td {
+        padding-left: 15px;
+      }
+      .el-collapse-item__header {
+        span {
+          position: absolute;
+          right: 40px;
+        }
+      }
+      .el-collapse-item__content {
+        padding-bottom: 0;
+      }
+    }
   }
-  
-  .innerContainer {
-    width: 430px;
-    // height: calc(100% - 20px);
-    height: 800px;
+
+  .tckz {
     position: absolute;
-    background: #041024;
-    z-index: 99;
-    top: 10px;
-    background-image: url("/static/images/homepage/00-底框.png");
-    background-size: 100% 100%;
-  }
-  
-  .leftPane {
-    left: 10px;
-  }
-  
-  .rightPane {
+    left: auto;
     right: 10px;
+    bottom: 100px;
+    text-align: center;
+    // background-color: rgba(255, 255, 255, 0.85);
+    padding-top: 5px;
+    padding-bottom: 5px;
+    padding-right: 5px;
+    padding-left: 5px;
+    border-radius: 5px;
+    > div {
+      padding: 5px;
+      text-align: left;
+    }
   }
-  </style>
-  
+}
+</style>
+<style lang="scss">
+@import "ghxz";
+</style>