rt-sim-training-client/src/views/newMap/newMapdraftSystem/mapoperate/line.vue

<template>
  <el-tabs v-model="activeName" class="card">
    <el-tab-pane class="view-control" :label="$t('map.property')" name="first" :lazy="lazy">
      <operate-property
        ref="dataform"
        :form="form"
        :edit-model="editModel"
        :rules="rules"
        type="Line"
        @updateMapModel="updateMapModel"
        @clearDeviceSelect="clearDeviceSelect"
      />
    </el-tab-pane>
    <el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second" :lazy="lazy">
      <create-operate
        ref="createForm"
        :create-form="createForm"
        :add-model="addModel"
        :create-rules="rules"
        @create="create"
      />
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import { mapGetters } from 'vuex';
import { getUID } from '@/jmapNew/utils/Uid';
import OperateProperty from './components/operateProperty';
import CreateOperate from './components/createOperate';
import { deepAssign } from '@/utils/index';

export default {
    name: 'StationStandDraft',
    components: {
        OperateProperty,
        CreateOperate
    },
    props: {
        selected: {
            type: Object,
            default: function () {
                return null;
            }
        }
    },
    data() {
        return {
            activeName: 'first',
            lazy: true,
            LineTypeList: [],
            centralizedStationList: [],
            directionType: [
                { name: '左端', code: 'left' },
                { name: '右端', code: 'right' }
            ],
            editModel: {
                code: '',
                type: '',
                width: 1,
                lineColor: '',
                points: [],
                pointShow: false,
                directionPoint: 'left',
                radiusWidth: 5
            },
            addModel: {
                type: '',
                width: 1,
                lineColor: 'rgba(255, 255, 255, 1)',
                points: [
                    { x: 0, y: 0 },
                    { x: 100, y: 100 }
                ]
            },
            rules: {
                code: [
                    { required: true, message: this.$t('rules.pleaseSelectLine'), trigger: 'blur' }
                ],
                type: [
                    { required: true, message: this.$t('rules.pleaseSelectLineType'), trigger: 'change' }
                ],
                width: [
                    { required: true, message: this.$t('rules.pleaseSelectLineWidth'), trigger: 'blur' }
                ]
            }
        };
    },
    computed: {
        ...mapGetters('map', [
            'lineList',
            'stationList',
            'lineCode'
        ]),
        form() {
            const form = {
                labelWidth: '120px',
                items: {
                    code: {
                        name: '',
                        item: []
                    },
                    draw: {
                        name: this.$t('map.drawData'),
                        item: [
                            { prop: 'code', label: this.$t('map.lineCoding'), type: 'select', optionLabel: 'code', optionValue: 'code', options: this.lineList, deviceChange: this.deviceChange },
                            { prop: 'type', label: this.$t('map.lineType'), type: 'select', optionLabel: 'name', optionValue: 'code', options: this.LineTypeList },
                            { prop: 'lineColor', label: this.$t('map.lineColor') + ':', type: 'color' },
                            { prop: 'pointShow', label: '端点显示:', type: 'checkbox' },
                            { prop: 'directionPoint', label: '端点方向:', type: 'select', optionLabel: 'name', optionValue: 'code', options: this.directionType, isHidden: this.isPointShow },
                            { prop: 'radiusWidth', label: '端点半径:', type: 'number', min: 0, width: '150px', isHidden: this.isPointShow },
                            { prop: 'width', label: this.$t('map.lineWidth'), type: 'number', min: 1, placeholder: 'px' },
                            { prop: 'points', label: this.$t('map.segmentCoordinates'), type: 'points', width: '100px', isHidden: !this.isPointsShow, addPoint: this.addPoint, delPoint: this.delPoint }
                        ]
                    },
                    map: {
                        name: this.$t('map.mapData'),
                        item: [
                        ]
                    }
                }
            };
            return form;
        },
        createForm() {
            const form = {
                labelWidth: '120px',
                items:{
                    all:{
                        name:'',
                        item: [
                            { prop: 'type', label: this.$t('map.lineType'), type: 'select', optionLabel: 'name', optionValue: 'code', options: this.LineTypeList},
                            { prop: 'width', label: this.$t('map.lineWidth'), type: 'number', min:1, placeholder: 'px'},
                            { prop: 'lineColor', label: this.$t('map.lineColor'), type: 'color' },
                            { prop: 'points', label: this.$t('map.linePoint'), type: 'points', width: '100px', hiddenSpan:true, addPoint: this.addPointAddModel, delPoint: this.delPointAddModel }
                        ]
                    }
                }
            };
            return form;
        },
        isPointsShow() {
            return this.editModel.points.length > 0;
        },
        isPointShow() {
            return !this.editModel.pointShow;
        }
    },
    mounted() {
        this.$Dictionary.lineType().then(list => {
            this.LineTypeList = list;
        });
    },
    methods: {
        clearDeviceSelect() {
            this.$emit('deviceSelect', '');
        },
        handleInit() {
            if (this.stationList && this.stationList.length) {
                this.centralizedStationList = this.stationList.filter(station=> station.centralized);
            }
        },
        deviceChange(code) {
            this.$emit('setCenter', code);
            this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
        },
        deviceSelect(selected) {
            this.handleInit();
            if (selected && selected._type.toUpperCase() === 'Line'.toUpperCase()) {
                this.$refs.form && this.$refs.form.resetFields();
                this.$refs.dataform && this.$refs.dataform.resetFields();
                this.activeName = 'first';
                this.editModel = deepAssign(this.editModel, selected);
            }
        },
        addPoint(index) {
            const data = { x: 0, y: 0 };
            this.editModel.points.splice(index + 1, 0, data);
        },
        delPoint(index) {
            this.editModel.points.splice(index, 1);
        },
        addPointAddModel(index) {
            const data = { x: 0, y: 0};
            this.addModel.points.splice(index + 1, 0, data);
        },
        delPointAddModel(index) {
            this.addModel.points.splice(index, 1);
        },
        create() {
            if (JSON.stringify(this.addModel.points[0]) !== JSON.stringify(this.addModel.points[this.addModel.points.length - 1])) {
                const pointArr = JSON.stringify(this.addModel.points);
                const model = {
                    _type: 'Line',
                    code: getUID('Line', this.lineList),
                    type: this.addModel.type,
                    width: this.addModel.width,
                    lineColor: this.addModel.lineColor,
                    points: JSON.parse(pointArr)
                };
                this.$emit('updateMapModel', model);
                this.$refs.createForm.resetForm();
            } else {
                this.$message.console.error(this.$t('tip.cannotCoincide'));
            }
        },
        updateMapModel(data) {
            this.$emit('updateMapModel', data);
        },
        deleteObj() {
            this.$refs.dataform.deleteObj();
        },
        // 修改对象
        edit() {
            this.$refs.dataform.edit();
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";
	.card {
		height: 100%;
	}

    .coordinate {
        overflow: hidden;

        .title {
            text-align: right;
            font-size: 14px;
            color: #606266;
            line-height: 40px;
            padding: 0 12px 0 0;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            line-height: 28px;
            width: 120px;
            font-weight: bold;
            display: block;
            float: left;
        }
    }

    .point-section {
        /*float: left;*/
        position: absolute;
        left: 120px;
        width: calc(100% - 120px);
    }

    .point-button {
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        float: left;

        /deep/ {
            .el-icon-plus,
            .el-icon-minus {
                transform: translateY(-5px);
            }
        }
    }

    .el-input-number--mini {
        width: 110px;
    }
</style>