rt-sim-training-client/src/views/newMap/newMapdraft/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">
      <div style="height: calc(100% - 46px);">
        <el-scrollbar wrap-class="scrollbar-wrapper">
          <config-list ref="form" :form="form" :form-model="editModel" :rules="rules" />
        </el-scrollbar>
      </div>
      <el-button-group class="map-draft-group">
        <el-button type="primary" size="small" @click="edit">{{ $t('map.updateObj') }}</el-button>
        <el-button type="danger" size="small" @click="deleteObj">{{ $t('map.deleteObj') }}</el-button>
      </el-button-group>
    </el-tab-pane>
    <el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second" :lazy="lazy">
      <div style="height: calc(100% - 46px);">
        <el-scrollbar wrap-class="scrollbar-wrapper">
          <el-form ref="make" label-width="120px" :model="addModel" size="mini" :rules="makeRules">
            <el-form-item :label="$t('map.lineType')" prop="type">
              <el-select v-model="addModel.type" filterable>
                <el-option
                  v-for="item in LineTypeList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('map.lineWidth')" prop="width">
              <el-input-number v-model="addModel.width" :min="1" />px
            </el-form-item>
            <el-form-item :label="$t('map.lineColor')" prop="lineColor">
              <el-color-picker v-model="addModel.lineColor" show-alpha />
            </el-form-item>
            <el-form-item :label="$t('map.showConditions')" prop="showConditions">
              <el-radio-group v-model="addModel.showConditions">
                <el-radio v-for="each in showConditionsList" :key="each.value" :label="each.value">{{ each.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <div class="coordinate">
              <span class="title">{{ $t('map.linePoint') }}</span>
              <div class="point-section">
                <template v-for="(point, index) in addModel.points">
                  <div :key="index" style="overflow: hidden;">
                    <el-form-item
                      label=""
                      :prop="'points[' + index + '].x'"
                      style="display: table; float: left;"
                      label-width="0px"
                    >
                      <el-input-number v-model="point.x" />
                    </el-form-item>
                    <span style="display: table; margin-left: 8px; float: left; line-height: 28px;">
                      , </span>
                    <el-form-item
                      label=""
                      :prop="'points[' + index + '].y'"
                      style="display: table; float: left; margin-right: 5px;"
                      label-width="10px"
                    >
                      <el-input-number v-model="point.y" />
                    </el-form-item>
                    <el-button
                      icon="el-icon-plus"
                      circle
                      class="point-button"
                      @click="addPointAddModel(index)"
                    />
                    <el-button
                      icon="el-icon-minus"
                      :disabled="index == 0 || index == addModel.points.length - 1"
                      circle
                      class="point-button"
                      @click="delPointAddModel(index)"
                    />
                  </div>
                </template>
              </div>
            </div>
          </el-form>
        </el-scrollbar>
      </div>
      <el-button-group class="map-draft-group">
        <el-button type="primary" size="small" @click="create">{{ $t('map.create') }}</el-button>
      </el-button-group>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import ConstConfig from '@/scripts/ConstConfig';
import Cookies from 'js-cookie';
import { mapGetters } from 'vuex';
import { getUID } from '@/jmapNew/utils/Uid';
import ConfigList from './config/list';
import { deepAssign } from '@/utils/index';

export default {
    name: 'StationStandDraft',
    components: {
        ConfigList
    },
    props: {
        selected: {
            type: Object,
            default: function () {
                return null;
            }
        }
    },
    data() {
        return {
            activeName: 'first',
            lazy: true,
            LineTypeList: [],
            editModel: {
                code: '',
                type: '',
                width: 1,
                lineColor: '',
                showConditions: '01',
                points: []
            },
            addModel: {
                type: '',
                width: 1,
                showConditions: '01',
                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: 'blur' }
                ],
                width: [
                    { required: true, message: this.$t('rules.pleaseSelectLineWidth'), trigger: 'blur' }
                ]
            },
            makeRules: {
                code: [
                    { required: true, message: this.$t('rules.pleaseSelectLine'), trigger: 'blur' }
                ],
                type: [
                    { required: true, message: this.$t('rules.pleaseSelectLineType'), trigger: 'blur' }
                ],
                width: [
                    { required: true, message: this.$t('rules.pleaseSelectLineWidth'), trigger: 'blur' }
                ]
            }
        };
    },
    computed: {
        ...mapGetters('map', [
            'lineList',
            'stationList',
            'lineCode'
        ]),
        showConditionsList() {
            const showConditionsList = ConstConfig.ConstSelect.showConditionsList;
            return Cookies.get('user_lang') == 'en'
                ? showConditionsList.map(elem => { return { value: elem.value, label: elem.enlabel }; })
                : showConditionsList.map(elem => { return { value: elem.value, label: elem.label }; });
        },
        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, change: true, 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: 'width', label: this.$t('map.lineWidth'), type: 'number', min: 1, placeholder: 'px' },
                            { prop: 'showConditions', label: this.$t('map.showConditions'), type: 'radio', optionLabel: 'label', optionValue:'value', radioList: this.showConditionsList},
                            { 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;
        },
        isPointsShow() {
            return this.editModel.points.length > 0;
        }
    },
    watch: {
        // selected(val, oldVal) {
        //     this.deviceSelect(val);
        // }
    },
    mounted() {
        this.$Dictionary.lineType().then(list => {
            this.LineTypeList = list;
        });
    },
    methods: {
        deviceChange(code) {
            this.$emit('setCenter', code);
            this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
        },
        deviceSelect(selected) {
            if (selected && selected._type.toUpperCase() === 'Line'.toUpperCase()) {
                this.$refs.form && this.$refs.form.resetFields();
                this.$refs.make && this.$refs.make.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() {
            this.$refs['make'].validate((valid) => {
                if (valid) {
                    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,
                            showConditions: this.addModel.showConditions,
                            lineColor: this.addModel.lineColor,
                            points: JSON.parse(pointArr)
                        };
                        this.$emit('updateMapModel', model);
                        this.$refs.make && this.$refs.make.resetFields();
                    } else {
                        this.$message.console.error(this.$t('tip.cannotCoincide'));

                    }
                }
            });
        },
        // 修改对象
        edit() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    const data = Object.assign({_type: 'Line'}, this.editModel);
                    this.$emit('updateMapModel', data);
                }
            });
        },
        // 删除对象
        deleteObj() {
            const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
            if (selected && selected._type.toUpperCase() === 'Line'.toUpperCase()) {
                this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
                    confirmButtonText: this.$t('tip.confirm'),
                    cancelButtonText: this.$t('tip.cancel'),
                    type: 'warning'
                }).then(() => {
                    this.$emit('updateMapModel', {...selected, _dispose: true});
                    this.$refs.form && this.$refs.form.resetFields();
                }).catch(() => {
                    this.$message.info(this.$t('tip.cancelledDelete'));
                });
            }
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";
	.view-control{
		height: 100%;
		overflow-y: auto;
	}
	.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>