251 lines
6.5 KiB
Vue
251 lines
6.5 KiB
Vue
|
<template>
|
||
|
|
<!-- <transition name="fade"> -->
|
||
|
|
<el-dialog
|
||
|
|
:title="$t('map.layerDisplay')"
|
||
|
|
:visible.sync="dialogTableVisible"
|
||
|
|
class="view_box"
|
||
|
|
width="460px"
|
||
|
|
:before-close="doClose"
|
||
|
|
:modal-append-to-body="false"
|
||
|
|
>
|
||
|
|
<!-- <div class="dialog-box"> -->
|
||
|
|
<!-- <div class="title">
|
||
|
|
<div class="fl-title">{{ $t('map.layerDisplay') }}</div>
|
||
|
|
<div class="fr-title" @click="doClose">
|
||
|
|
<i class="el-icon-close" />
|
||
|
|
</div>
|
||
|
|
</div> -->
|
||
|
|
<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>
|
||
|
|
<!-- </div> -->
|
||
|
|
</el-dialog>
|
||
|
|
<!-- </transition> -->
|
||
|
|
</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>
|