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

<template>
  <el-dialog :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>