rt-sim-training-client/src/views/mapdraft/configMap.vue

<template>
  <el-dialog v-dialogDrag :title="$t('map.layerDisplay')" :visible.sync="dialogTableVisible" class="view_box" width="460px" :before-close="doClose" :modal-append-to-body="false">
    <el-row type="flex" justify="center" class="content_box">
      <el-form label-width="80px" class="demo-ruleForm">
        <el-form-item :label="$t('map.viewShows')">
          <el-checkbox-group v-model="viewSelect" :min="1" @change="handleSelectView">
            <el-checkbox :label="ViewMode.LOGIC">{{ $t('map.logicalView') }}</el-checkbox>
            <el-checkbox :label="ViewMode.PHYSICAL">{{ $t('map.physicalView') }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item :label="$t('map.contentShows')">
          <el-row v-if="ViewMode.LOGIC === viewSelect[0] && viewSelect.length == 1" class="logical-view" type="flex" justify="center" style="width: 100%;">
            <el-checkbox-group v-model="logicalLevelsSelect" @change="handleSelectLogicalView">
              <el-checkbox v-for="view in LogicalViewTypeList" :key="view.code" :label="view.code" size="mini">
                {{ view.name }}</el-checkbox>
            </el-checkbox-group>
          </el-row>
          <el-row v-if="ViewMode.PHYSICAL === viewSelect[0] && viewSelect.length == 1" class="physical-view" type="flex" justify="center" style="width: 100%;">
            <el-checkbox-group v-model="physicalLevelsSelect" @change="handleSelectPhysicalView">
              <el-checkbox v-for="view in PhysicalViewTypeList" :key="view.code" :label="view.code">
                {{ view.name }}</el-checkbox>
            </el-checkbox-group>
          </el-row>
          <el-row v-if=" viewSelect.length == 2" class="physical-view" type="flex" justify="center" style="width: 100%;">
            <el-checkbox-group v-model="hybridLevelsSelect" @change="handleSelectHybridView">
              <el-checkbox v-for="view in HybridViewTypeList" :key="view.code" :label="view.code">
                {{ view.name }}</el-checkbox>
            </el-checkbox-group>
          </el-row>
        </el-form-item>
      </el-form>
    </el-row>
  </el-dialog>
</template>

<script>
import { ViewMode } from '@/scripts/ConstDic';

export default {
    name: 'ConfigMap',
    data () {
        return {
            ViewMode: ViewMode,
            dialogTableVisible: false,
            viewSelect: [ViewMode.LOGIC, ViewMode.PHYSICAL],
            LogicalViewTypeList: [
                { code: 'Link', name: this.$t('map.link') }
            ],
            PhysicalViewTypeList: [
                { code: 'Section', name: this.$t('map.section') },
                { code: 'Signal', name: this.$t('map.signal') },
                { code: 'Switch', name: this.$t('map.switch') }
            ],
            HybridViewTypeList: [],

            defaultLogicalSelect: [],
            defaultPhysicalSelect: [],
            defaultHybridSelect: [],

            logicalLevelsSelect: [],
            physicalLevelsSelect: [],
            hybridLevelsSelect: []		// 混合图层
        };
    },
    watch: {
        '$store.state.map.mapDataLoadedCount': function (val) {
            this.handleSelectView(this.viewSelect);
        }
    },
    mounted() {
        this.initPage();
    },
    methods: {
        doShow() {
            this.dialogTableVisible = true;
        },
        doClose() {
            this.dialogTableVisible = false;
        },
        initPage() {
            this.$Dictionary.logicalViewType().then(list => {
                this.LogicalViewTypeList = list;
                list.forEach(v => {
                    this.HybridViewTypeList.push(v);
                    this.hybridLevelsSelect.push(v.code);
                    this.defaultHybridSelect.push(v.code);
                });
                this.LogicalViewTypeList.forEach(elem => {
                    this.logicalLevelsSelect.push(elem.code);
                    this.defaultLogicalSelect.push(elem.code);
                });
            });
            this.$Dictionary.physicalViewType().then(list => {
                this.PhysicalViewTypeList = list;
                list.forEach(v => {
                    this.HybridViewTypeList.push(v);
                    this.hybridLevelsSelect.push(v.code);
                    this.defaultHybridSelect.push(v.code);
                });
                this.PhysicalViewTypeList.forEach(elem => {
                    this.physicalLevelsSelect.push(elem.code);
                    this.defaultPhysicalSelect.push(elem.code);
                });
            });
        },
        handleSelectView(value) {
            if (value.length == 2) {
                this.$emit('handleSelectView', '03');
                this.hybridLevelsSelect = this.copyList(this.defaultHybridSelect);
            } else {
                this.$emit('handleSelectView', value);
                if (this.viewSelect[0] == this.ViewMode.LOGIC) {
                    this.logicalLevelsSelect = this.copyList(this.defaultLogicalSelect);
                } else {
                    this.physicalLevelsSelect = this.copyList(this.defaultPhysicalSelect);
                }
            }
        },
        handleSelectLogicalView(handle) {
            this.$emit('handleSelectLogicalView', handle);
        },
        handleSelectPhysicalView(handle) {
            this.$emit('handleSelectPhysicalView', handle);
        },
        handleSelectHybridView(handle) {
            this.$emit('handleSelectHybridView', handle);
        },
        copyList(list) {
            return JSON.parse(JSON.stringify(list));
        }
    }
};

</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.demo-ruleForm{
	width: 100%;

	/deep/{
		.el-form-item__label{
			text-align: left;
			height: 30px;
			line-height: 30px;
		}
		.el-checkbox-group{
			width: 100%;
			display: flex;
			flex-wrap: wrap;
		}
	}
}

.view_box{
	/deep/ {
		.el-dialog{
			position: absolute;
			right: 26px;
			left: auto;
			top: 7px;
		}

		.el-dialog__body{
			padding: 0 15px;
		}

		.el-dialog__header{
			padding: 10px 20px
		}

		.el-checkbox{
			margin-right: 10px;
			width: 75px;
			height: 30px;
			display: flex;
			align-items: center;
		}

		.el-form-item{
			margin-bottom: 6px;
		}

		// ckect框选中颜色
		.content_box .el-checkbox__input.is-checked .el-checkbox__inner,
		.content_box .el-checkbox__input.is-indeterminate .el-checkbox__inner {
			background-color: #85bef9;
			border-color: #85bef9;
		}
		// 文字选中颜色
		.content_box .el-checkbox__input.is-checked+.el-checkbox__label {
			color: #3c93ec;
		}
	}
}
.dialog-box{
	background-color: #fff;
	width: 460px;
	box-shadow: 2px 2px 4px #c5c5c5;
	position: absolute;
	left: auto;
	right: 24px;
	top: 43px;
	z-index: 10;

	.title{
		overflow: hidden;
		border-bottom: 1px solid #ccc;
		padding: 8px 15px;
		.fl-title{
			float: left;
		}
		.fr-title{
			float: right;
			cursor: pointer;
		}
	}

	.content_box{
		padding: 15px;
		padding-top: 4px;
	}

}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}

</style>