rt-sim-training-client/src/views/newMap/newMapdraft/mapoperate/checkboxDraft.vue

<template>
  <div class="view-control">
    <div class="content-box">
      <div v-for="item in modelList" :key="item.type" class="content-box-list">
        <div class="title-box">{{ item.name }}</div>
        <div class="list-box">
          <div v-for="nor in item.list" :key="nor.code" class="list-content" @mouseenter="mouseenter(nor)" @mouseleave="mouseleave(nor)">
            <div class="name">{{ nor.name }}</div>
            <div class="close" @click="delList(nor, item.list)"><i class="el-icon-close" /></div>
          </div>
        </div>
      </div>
      <div class="select-box">
        <el-select v-model="stationCode" filterable size="mini">
          <el-option
            v-for="item in stationList"
            :key="item.code"
            :label="item.name + item.code"
            :value="item.code"
          />
        </el-select>
      </div>
      <div class="button-box">
        <el-button type="primary" size="mini" @click="handleScetionStationCode">{{ $t('map.setStationCode') }}</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { deepAssign } from '@/utils/index';

export default {
    name: 'CheckboxDraft',
    components: {
    },
    props: {
        selected: {
            type: Object,
            default: function () {
                return null;
            }
        }
    },
    data() {
        return {
            stationCode: '',
            modelList: [
                {
                    type: 'Section',
                    name: '区段列表',
                    list: []
                },
                {
                    type: 'Switch',
                    name: '道岔列表',
                    list: []
                }
            ]
        };
    },
    computed: {
        ...mapGetters('map', [
            'seclectDeviceList',
            'stationList'
        ])
    },
    watch: {
        selected: function (val, oldVal) {
            this.deviceSelect(val);
        }
    },
    mounted() {
    },
    methods: {
        deviceChange(code) {
            this.$emit('setCenter', code);
            this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
        },
        deviceSelect(selected) {
            if (selected && selected._type.toUpperCase() == 'CheckBox'.toUpperCase()) {
                this.clearModelList();
                this.seclectDeviceList.forEach(item => {
                    if (item._type == 'Section') {
                        this.modelList[0].list.push(item);
                    } else if (item._type == 'Switch') {
                        this.modelList[1].list.push(item);
                    }
                });
            }
        },
        clearModelList() {
            this.modelList.forEach(item => {
                item.list = [];
            });
        },
        // 删除当前选中
        delList(model, list) {
            list.forEach((nor, index) => {
                if (nor.code == model.code) {
                    list.splice(index, 1);
                }
            });
            this.seclectDeviceList.forEach((item, index) => {
                if (item.code == model.code) {
                    this.seclectDeviceList.splice(index, 1);
                }
            });
        },
        // 多选区段设置集中站
        handleScetionStationCode() {
            if (this.stationCode && this.seclectDeviceList) {
                const models = [];
                this.seclectDeviceList.forEach(model => {
                    const Model = deepAssign({}, this.$store.getters['map/getDeviceByCode'](model.code));
                    Model.stationCode = this.stationCode;
                    models.push(Model);
                });
                this.$emit('updateMapModel', models);
                this.$message.success('设置设备集中站成功');
                this.stationCode = '';
            }
        },
        mouseenter(model) {
            if (model._type == 'Section') {
                model.instance.mouseout();
            }
        },
        mouseleave(model) {
            if (model._type == 'Section') {
                model.instance.mouseover();
            }
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";
	.view-control{
		height: 100%;

        .content-box{
            padding-bottom: 20px;
            font-size: 13px;
            padding-top: 2px;
            &-list{
                padding: 10px;
                margin: 10px;
                margin-top: 0;
                box-shadow: 1px 1px 4px #ccc;
            }
        }

        .select-box{
            margin-bottom: 10px;
            padding-left: 10px;
        }
        .button-box{
            padding-left: 10px;
        }

        .list-box{
            overflow: hidden;
            .list-content{
                float: left;
                background: #e2e2e2;
                margin: 5px;
                border-radius: 5px;
                height: 30px;
                line-height: 30px;
                padding-left: 10px;
                padding-right: 3px;
                cursor: pointer;

                &:hover{
                    background: #ccc;
                }
                .name{
                    float: left;
                    margin-right: 20px;
                }
                .close{
                    float: left;
                    width: 23px;
                    cursor: pointer;
                }
            }
        }

        .title-box{
            padding-left: 10px;
            border-left: 4px solid red;
            margin-bottom: 10px;
        }
	}
</style>