新增区段创建方式

src/views/newMap/newMapdraft/mapoperate/section.vue

@@ -14,9 +14,9 @@
       </div>
     </el-tab-pane>
     <el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second">
-      <div style="height: calc(100% - 46px)">
+      <div style="height: calc(100% - 46px);">
         <el-scrollbar>
-          <el-form ref="oprt" :model="createModel" label-width="130px" size="mini" :rules="createRules">
+          <el-form ref="oprt" :model="createModel" label-width="130px" size="mini" :rules="createRules" style="position: relative;">
             <el-form-item :label="$t('map.createModel')">
               <el-radio-group v-model="createModel.type">
                 <el-radio v-for="item in typeOptions" :key="item.value" :label="item.value" border size="mini">{{ item.label }}</el-radio>
@@ -322,12 +322,7 @@ export default {
                 length: 0,
                 leftSectionCode: '',
                 rightSectionCode: '',
-                modelList: [
+                modelList: []
-                    {
-                        sectionName: '',
-                        length: ''
-                    }
-                ]
             },
             createRules: {
                 'startPoint.x': [
@@ -654,7 +649,6 @@ export default {
             const obj = this;
             if (!this.fieldS) { // 判断是否激活选择站台
                 if (selected && selected._type.toUpperCase() === 'Section'.toUpperCase()) {
-                    console.log(selected.relevanceSectionList);
                     if (this.field === 'leftSection') {
                         if (selected.type === '01' || selected.type === '03') {
                             this.editModel.leftSectionCode = selected.code;
@@ -748,16 +742,20 @@ export default {
             this.logicSectionNums.splice(index, 1);
         },
         addModelList() {
-
+            const param = {
+                sectionName: 'T',
+                length: ''
+            };
+            this.createModel.modelList.push(param);
         },
-        // 创建区段
+        handleDelete(index, row) { // 删除创建表格元素
-        create() {
+            this.createModel.modelList.splice(index, 1);
-            const uid = getUID('T', this.sectionList);
+        },
-            const uname = 'T' + (Number(this.sectionList.length) + 1);
+        createModelParam(uid, name) {
-            const model = {
+            return {
                 _type: 'Section',
                 code: uid,
-                name: uname,
+                name: name,
                 type: '01',
                 axleShow: false,
                 isStandTrack: false,
@@ -773,8 +771,8 @@ export default {
                 isSegmentation: false,
                 segmentationPosition: { x: 0, y: 0 },
                 relSwitchCode: '',
-                rightSectionCode:'',
+                rightSectionCode: '',
-                leftSectionCode:'',
+                leftSectionCode: '',
                 kmRangeRight: '',
                 kmRangeLeft: '',
                 region: '',
@@ -795,67 +793,111 @@ export default {
                 trainWindowCode: '',
                 destinationCodePoint: { x: 0, y: 0 },
                 isCurve: false,
-                relevanceSectionList: []
+                relevanceSectionList: [],
+                points: []
             };
-            if (this.createModel.type == '01') {
+        },
-                model.points = [
+        // 创建区段
-                    { x: this.createModel.startPoint.x, y: this.createModel.startPoint.y },
+        create() {
-                    { x: this.createModel.startPoint.x + this.createModel.length, y: this.createModel.startPoint.y }
+            if (this.createModel.type == '04') {
-                ];
-                this.$emit('updateMapModel', model);
-            } else if (this.createModel.type == '02') {
-                if (!(this.createModel.leftSectionCode && this.createModel.rightSectionCode)) {
-                    return false;
-                }
-                const startModel = this.$store.getters['map/getDeviceByCode'](this.createModel.leftSectionCode);
-                const endModel = this.$store.getters['map/getDeviceByCode'](this.createModel.rightSectionCode);
-
-                const start_x = startModel.points[startModel.points.length - 1].x;
-                const end_x = endModel.points[0].x;
-                const start_y = startModel.points[startModel.points.length - 1].y;
-                const end_y = endModel.points[0].y;
-                if (this.createModel.leftSectionCode == this.createModel.rightSectionCode) {
-                    this.$messageBox('左关联区段不能和右关联区段相同');
-                    return;
-                }
-                if (start_x == end_x && start_y == end_y) {
-                    this.$messageBox('左关联区段终点不能和右关联区段起点相同');
-                    return;
-                }
-                model.points = [
-                    { x: start_x, y: start_y },
-                    { x: end_x, y: end_y }
-                ];
                 const models = [];
-                const leftSection = this.getSectionByCode(this.createModel.leftSectionCode);
+                let flag = true;
-                const rightSection = this.getSectionByCode(this.createModel.rightSectionCode);
+                let leftPointX = 0; let rightPointX = 0;
-                model.leftSectionCode = this.createModel.leftSectionCode;
+                this.createModel.modelList.forEach((item, index) => {
-                leftSection.rightSectionCode = model.code;
+                    if (item.length && item.sectionName) {
-                rightSection.leftSectionCode = model.code;
+                        const uid = getUID('T', [...this.sectionList, ...models]);
-                model.rightSectionCode = this.createModel.rightSectionCode;
+                        const startModel = this.getSectionByCode(this.createModel.leftSectionCode);
-                models.push(model);
+                        rightPointX += item.length;
-                models.push(leftSection);
+                        if (index != 0) {
-                models.push(rightSection);
+                            leftPointX += this.createModel.modelList[index - 1].length;
-                this.$emit('updateMapModel', models);
+                        }
-            } else if (this.createModel.type == '03') {
+                        const param = this.createModelParam(uid, item.sectionName);
-                if (this.createModel.leftSectionCode) {
+                        param.points = [
+                            { x: startModel.points[startModel.points.length - 1].x + leftPointX, y: startModel.points[startModel.points.length - 1].y },
+                            { x: startModel.points[startModel.points.length - 1].x + rightPointX, y: startModel.points[startModel.points.length - 1].y }
+                        ];
+                        if (index == 0) {
+                            param.leftSectionCode = this.createModel.leftSectionCode;
+                            startModel.rightSectionCode = param.code;
+                            models.push(startModel);
+                        } else {
+                            param.leftSectionCode = models[index - 1].code;
+                            models[index - 1].rightSectionCode = param.code;
+                        }
+
+                        models.push(param);
+                    } else {
+                        flag = false;
+                        this.$message('表格内容必须填写，请检查后再重新创建！');
+                    }
+                });
+                if (flag) {
+                    this.$emit('updateMapModel', models);
+                    this.createModel.modelList = [];
+                }
+            } else {
+                const uid = getUID('T', this.sectionList);
+                const uname = 'T' + (Number(this.sectionList.length) + 1);
+                const model = this.createModelParam(uid, uname);
+                if (this.createModel.type == '01') {
+                    model.points = [
+                        { x: this.createModel.startPoint.x, y: this.createModel.startPoint.y },
+                        { x: this.createModel.startPoint.x + this.createModel.length, y: this.createModel.startPoint.y }
+                    ];
+                    this.$emit('updateMapModel', model);
+                } else if (this.createModel.type == '02') {
+                    if (!(this.createModel.leftSectionCode && this.createModel.rightSectionCode)) {
+                        return false;
+                    }
                     const startModel = this.$store.getters['map/getDeviceByCode'](this.createModel.leftSectionCode);
+                    const endModel = this.$store.getters['map/getDeviceByCode'](this.createModel.rightSectionCode);
+
                     const start_x = startModel.points[startModel.points.length - 1].x;
+                    const end_x = endModel.points[0].x;
                     const start_y = startModel.points[startModel.points.length - 1].y;
+                    const end_y = endModel.points[0].y;
+                    if (this.createModel.leftSectionCode == this.createModel.rightSectionCode) {
+                        this.$messageBox('左关联区段不能和右关联区段相同');
+                        return;
+                    }
+                    if (start_x == end_x && start_y == end_y) {
+                        this.$messageBox('左关联区段终点不能和右关联区段起点相同');
+                        return;
+                    }
                     model.points = [
                         { x: start_x, y: start_y },
-                        { x: start_x + this.createModel.length, y: start_y }
+                        { x: end_x, y: end_y }
                     ];
                     const models = [];
-                    model.leftSectionCode = this.createModel.leftSectionCode;
                     const leftSection = this.getSectionByCode(this.createModel.leftSectionCode);
+                    const rightSection = this.getSectionByCode(this.createModel.rightSectionCode);
+                    model.leftSectionCode = this.createModel.leftSectionCode;
                     leftSection.rightSectionCode = model.code;
+                    rightSection.leftSectionCode = model.code;
+                    model.rightSectionCode = this.createModel.rightSectionCode;
                     models.push(model);
                     models.push(leftSection);
+                    models.push(rightSection);
                     this.$emit('updateMapModel', models);
+                } else if (this.createModel.type == '03') {
+                    if (this.createModel.leftSectionCode) {
+                        const startModel = this.$store.getters['map/getDeviceByCode'](this.createModel.leftSectionCode);
+                        const start_x = startModel.points[startModel.points.length - 1].x;
+                        const start_y = startModel.points[startModel.points.length - 1].y;
+                        model.points = [
+                            { x: start_x, y: start_y },
+                            { x: start_x + this.createModel.length, y: start_y }
+                        ];
+                        const models = [];
+                        model.leftSectionCode = this.createModel.leftSectionCode;
+                        const leftSection = this.getSectionByCode(this.createModel.leftSectionCode);
+                        leftSection.rightSectionCode = model.code;
+                        models.push(model);
+                        models.push(leftSection);
+                        this.$emit('updateMapModel', models);
+                    }
                 }
             }
-
         },
         // 修改区段属性
         edit() {