|
|
@@ -0,0 +1,427 @@
|
|
|
+<template>
|
|
|
+ <div class="dialog">
|
|
|
+ <el-dialog title="自定义模型" :visible.sync="dialogVisible" width="40%" :before-close="close"
|
|
|
+ :modal-append-to-body="false" :close-on-click-modal="false">
|
|
|
+ <div class="modelTitle">
|
|
|
+ <div class="siteCon">
|
|
|
+ <span>分析模型名称:</span>
|
|
|
+ </div>
|
|
|
+ <el-input v-model="fxmxmc" size="mini" placeholder="请输入项目名称"></el-input>
|
|
|
+ </div>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="11">
|
|
|
+ <div class="yztitle">请选择分析数据</div>
|
|
|
+ <el-scrollbar class="left-tree">
|
|
|
+ <el-input placeholder="输入查询内容" v-model="filterText" clearable>
|
|
|
+ </el-input>
|
|
|
+ <el-tree :data="options" :props="defaultProps" highlight-current show-checkbox node-key="id" ref="tree"
|
|
|
+ :default-checked-keys="defaultArr" :filter-node-method="filterNode"></el-tree>
|
|
|
+ </el-scrollbar>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="2">
|
|
|
+ <div class="grid-content bg_purple">
|
|
|
+ <el-button icon="el-icon-d-arrow-right" @click="turnLeftToRight"></el-button>
|
|
|
+ <el-button icon="el-icon-d-arrow-left" @click="turnRightToLeft"></el-button>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="11">
|
|
|
+ <div class="yztitle">已选数据</div>
|
|
|
+ <el-table :data="dialogData" border class="right-table scroll-style" size="small" style="width: 100%"
|
|
|
+ @selection-change="handleSelectionChange">
|
|
|
+ <el-table-column type="selection" width="55" align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="name" label="数据名称"> </el-table-column>
|
|
|
+ <!-- <el-table-column prop="conditionInfo" label="条件" width="150">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-select v-model="scope.row.conditionInfo.default" placeholder="请选择" class="input-style">
|
|
|
+ <el-option v-for="item in scope.row.conditionInfo.items" :key="item.key" :label="item.name"
|
|
|
+ :value="item.key">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="defaultValue" label="约束值(m/°)" width="120">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <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.number="scope.row.conditionInfo.defaultValue" placeholder="距离" class="input-style font-14"
|
|
|
+ :disabled="!scope.row.conditionInfo.hasValue" type="number"
|
|
|
+ @input="testInput(scope.row.conditionInfo.defaultValue)"></el-input>
|
|
|
+ </template>
|
|
|
+ </el-table-column> -->
|
|
|
+ </el-table>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <!-- <span class="clearBtn" @click="submit(true)">保存至模板</span> -->
|
|
|
+ <el-button @click="reset">重置</el-button>
|
|
|
+ <el-button type="primary" @click="submit(false)">确 定</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {
|
|
|
+ GetFactorList,
|
|
|
+ AddTemplate,
|
|
|
+ DelTemplate,
|
|
|
+} from "../../../api/ghss/ghxz.js";
|
|
|
+export default {
|
|
|
+ components: {},
|
|
|
+ props: {
|
|
|
+ tableData: {
|
|
|
+ type: Array,
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ fxmxmc: "", //分析模型名称
|
|
|
+ filterText: "", //树结构搜索关键字
|
|
|
+ defaultProps: {
|
|
|
+ children: "children",
|
|
|
+ label: "name",
|
|
|
+ },
|
|
|
+ dialogVisible: false,
|
|
|
+ options: [],
|
|
|
+ kxyzList: [],
|
|
|
+ tempList: [],
|
|
|
+ optionsTemp: [],
|
|
|
+ selectdialogData: [],
|
|
|
+ dialogData: [],
|
|
|
+ defaultArr: [], //用地类型选中后可选因子默认勾选的值
|
|
|
+ yzTableData: [], //用地类型选中后影响因子对应的值
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ mounted() {
|
|
|
+ this.GetFactorList();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //树结构过滤
|
|
|
+ filterNode(value, data) {
|
|
|
+ if (!value) return true;
|
|
|
+ return data.name.indexOf(value) !== -1;
|
|
|
+ },
|
|
|
+ save(factors) {
|
|
|
+ AddTemplate({ landTypeCode: this.$parent.ydlxBSM, factors }).then(
|
|
|
+ (res) => {
|
|
|
+ if (res.success) {
|
|
|
+ this.$message.success(res.message);
|
|
|
+ this.$parent.GetTemplateFactorList(this.$parent.ydlxBSM);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ );
|
|
|
+ },
|
|
|
+ reset() {
|
|
|
+ // DelTemplate({ landTypeCode: this.$parent.ydlxBSM }).then((res) => {
|
|
|
+ // if (res.success) {
|
|
|
+ // this.$parent.GetTemplateFactorList(this.$parent.ydlxBSM);
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+
|
|
|
+ this.dialogData = [];//清空已选数据表单
|
|
|
+ this.filterText = "";//还原分析数据搜索框
|
|
|
+ this.fxmxmc = ''//清空分析模型名称输入框
|
|
|
+ this.getTreeList();//重新获取分析数据
|
|
|
+ },
|
|
|
+ testInput(val) {
|
|
|
+ val = Number(val);
|
|
|
+ },
|
|
|
+ close() {
|
|
|
+ this.dialogVisible = false;
|
|
|
+ },
|
|
|
+ GetFactorList() {
|
|
|
+ GetFactorList().then((res) => {
|
|
|
+ this.kxyzList = res.data;
|
|
|
+ this.tempList = JSON.parse(JSON.stringify(res.data));
|
|
|
+ this.getTreeList();
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ getTreeList() {
|
|
|
+ function arrayToTreeLoop(nodes) {
|
|
|
+ const map = {};
|
|
|
+ const tree = [];
|
|
|
+ for (const node of nodes) {
|
|
|
+ map[node.id] = { ...node, children: [] };
|
|
|
+ }
|
|
|
+ for (const node of Object.values(map)) {
|
|
|
+ if (node.parent_id == "") {
|
|
|
+ tree.push(node);
|
|
|
+ } else {
|
|
|
+ map[node.parent_id].children.push(node);
|
|
|
+ map[node.parent_id].parentNode = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return tree;
|
|
|
+ }
|
|
|
+ this.options = arrayToTreeLoop(this.kxyzList);
|
|
|
+ this.optionsTemp = JSON.parse(JSON.stringify(this.options));
|
|
|
+ },
|
|
|
+
|
|
|
+ setTable(selectdata) {
|
|
|
+ let tableList = [];
|
|
|
+ selectdata.forEach((item) => {
|
|
|
+ let JSONItem = JSON.parse(item.conditionInfo);
|
|
|
+ tableList.push({
|
|
|
+ id: item.id,
|
|
|
+ name: item.name,
|
|
|
+ bsm: item.bsm,
|
|
|
+ conditionInfo: JSONItem,
|
|
|
+ });
|
|
|
+ });
|
|
|
+ tableList.forEach((item) => {
|
|
|
+ this.resetTree(this.options, item);
|
|
|
+ });
|
|
|
+ this.removeChildrenZero(this.options);
|
|
|
+ return tableList;
|
|
|
+ },
|
|
|
+ resetTree(data, item1) {
|
|
|
+ data.forEach((item, index) => {
|
|
|
+ if (item.id == item1.id) {
|
|
|
+ data.splice(index, 1);
|
|
|
+ }
|
|
|
+ if (item.children != undefined && item.children.length != 0) {
|
|
|
+ this.resetTree(item.children, item1);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ removeChildrenZero(data) {
|
|
|
+ data.forEach((item, index) => {
|
|
|
+ if (item.children != undefined && item.children.length == 0) {
|
|
|
+ if (item.parentNode) {
|
|
|
+ item.disabled = true;
|
|
|
+ if (this.$refs.tree) {
|
|
|
+ //用地类型绑定后易出现找不到tree的情况
|
|
|
+ this.$refs.tree.setCheckedKeys([]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (item.children != undefined && item.children.length > 0) {
|
|
|
+ this.removeChildrenZero(item.children);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ turnLeftToRight() {
|
|
|
+ if (this.$refs.tree.getCheckedNodes().length == 0) {
|
|
|
+ this.$message.warning("请勾选可选因子");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ // this.dialogData = [];
|
|
|
+ let list = this.$refs.tree.getCheckedNodes().filter((item) => {
|
|
|
+ return item.children == undefined || item.children.length == 0;
|
|
|
+ });
|
|
|
+ list = this.setTable(list);
|
|
|
+ this.dialogData = [...this.dialogData, ...list];
|
|
|
+ },
|
|
|
+ turnRightToLeft() {
|
|
|
+ if (this.selectdialogData.length == 0) {
|
|
|
+ this.$message.warning("请勾选已选因子");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ let list = this.dialogData;
|
|
|
+ this.selectdialogData.forEach((item) => {
|
|
|
+ list = list.filter((item1) => {
|
|
|
+ return item.id != item1.id;
|
|
|
+ });
|
|
|
+ });
|
|
|
+ this.dialogData = list; //去掉勾选元素
|
|
|
+
|
|
|
+ this.options = JSON.parse(JSON.stringify(this.optionsTemp));
|
|
|
+ list.forEach((item) => {
|
|
|
+ this.resetTree(this.options, item);
|
|
|
+ });
|
|
|
+ if (this.$refs.tree) this.$refs.tree.setCheckedKeys([]);
|
|
|
+ },
|
|
|
+ handleSelectionChange(val) {
|
|
|
+ this.selectdialogData = val;
|
|
|
+ },
|
|
|
+ submit(issave) {
|
|
|
+ this.$parent.tableData = this.dialogData;
|
|
|
+ this.dialogVisible = false;
|
|
|
+ },
|
|
|
+ setData(data) {
|
|
|
+ data.filter((item) => {
|
|
|
+ this.clearitem(item);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ clearitem(item) {
|
|
|
+ this.options[0].children = this.options[0].children.filter((item1) => {
|
|
|
+ return item.id != "";
|
|
|
+ });
|
|
|
+ this.options[1].children = this.options[1].children.filter((item1) => {
|
|
|
+ return item.id != ""; //item1.defaultValue
|
|
|
+ });
|
|
|
+ this.options[0].children.length == 0
|
|
|
+ ? (this.options[0].disabled = true)
|
|
|
+ : (this.options[0].disabled = false);
|
|
|
+ this.options[1].children.length == 0
|
|
|
+ ? (this.options[1].disabled = true)
|
|
|
+ : (this.options[1].disabled = false);
|
|
|
+ },
|
|
|
+ resetDialogData() {
|
|
|
+ this.reset()
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ //监听树结构过滤的关键字
|
|
|
+ filterText(val) {
|
|
|
+ this.$refs.tree.filter(val);
|
|
|
+ },
|
|
|
+ dialogVisible(oldVal, newVal) {
|
|
|
+ if (newVal) this.resetDialogData();
|
|
|
+ },
|
|
|
+ yzTableData(oldVal, newVal) {
|
|
|
+ let idArr = [];
|
|
|
+ this.yzTableData.forEach((item) => {
|
|
|
+ idArr.push(item.id);
|
|
|
+ });
|
|
|
+ this.defaultArr = idArr;
|
|
|
+ this.resetDialogData();
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.hgxsc {
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.yztitle {
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog {
|
|
|
+ /deep/.el-dialog__body {
|
|
|
+ color: #fff !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .left-tree {
|
|
|
+ height: 400px;
|
|
|
+ overflow-y: auto;
|
|
|
+ margin-top: 10px;
|
|
|
+ border: 1px solid #ddd;
|
|
|
+
|
|
|
+ .el-tree {
|
|
|
+ margin-top: 10px;
|
|
|
+
|
|
|
+ .el-tree-node__content {
|
|
|
+ height: 35px;
|
|
|
+ line-height: 35px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.el-dialog__body {
|
|
|
+ padding: 10px 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bg_purple {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 400px;
|
|
|
+
|
|
|
+ .el-button+.el-button {
|
|
|
+ margin-left: 0;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-table {
|
|
|
+ margin-top: 10px;
|
|
|
+ height: 400px;
|
|
|
+ overflow: hidden;
|
|
|
+ overflow-y: auto;
|
|
|
+
|
|
|
+ /deep/ .el-table__inner-wrapper {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.el-table__header-wrapper,
|
|
|
+ .el-table__header {
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.el-table__body-wrapper {
|
|
|
+ height: calc(100% - 40px);
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/deep/.el-dialog__body {
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* 去除Element UI中el-input数字类型的样式 */
|
|
|
+/deep/ .el-input__inner[type="number"] {
|
|
|
+ -webkit-appearance: none;
|
|
|
+ /* 移除系统默认的外观样式 */
|
|
|
+}
|
|
|
+
|
|
|
+/* 去除增加/减少数字按钮的样式 */
|
|
|
+/deep/ .el-input__inner[type="number"]::-webkit-inner-spin-button,
|
|
|
+.el-input__inner[type="number"]::-webkit-outer-spin-button {
|
|
|
+ -webkit-appearance: none;
|
|
|
+ /* 移除输入框两侧的上下箭头 */
|
|
|
+ margin: 0;
|
|
|
+ /* 移除上下箭头与文本之间的间隔 */
|
|
|
+}
|
|
|
+
|
|
|
+/* 去除Firefox浏览器中的一些特定样式 */
|
|
|
+/deep/ .el-input__inner[type="number"]::-moz-inner-spin-button {
|
|
|
+ -moz-appearance: none;
|
|
|
+ /* 移除Firefox中的上下箭头 */
|
|
|
+}
|
|
|
+
|
|
|
+.clearBtn {
|
|
|
+ padding: 12px 20px;
|
|
|
+ border-radius: 4px;
|
|
|
+ cursor: pointer;
|
|
|
+ width: 30%;
|
|
|
+ background-color: #3f94f53f;
|
|
|
+ border: 1px solid #3f93f5;
|
|
|
+ color: #b6e0ff;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.modelTitle {
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ /deep/ .el-input__inner {
|
|
|
+ max-width: 100%;
|
|
|
+ color: #fff;
|
|
|
+ background: #041c3273 !important;
|
|
|
+ border: 1px dashed #0f7ac8 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 16px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .siteCon {
|
|
|
+ width: 140px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
