SmartCommunity/operationSupport/src/views/newWorkBench/template/leftAssembly.vue

<template>
    <div class="leftAssembly">
        <el-select v-model="componentsValue" @change="changeSelect" class="saveColumn-select">
            <el-option v-for="(item, index) in componentsSelect" :key="index" :label="item.lable" :value="item.model_id"></el-option>
        </el-select>
        <div class="componentsBlock">
            <div
                class="moveBlock"
                :data-id="item.data_id"
                v-for="(item, index) in putCompArr"
                :key="index"
                draggable
                @dragstart="dragstart($event, item)"
                @dragend="dragend($event)"
                @drag="drag($event)"
            >
                <div class="moveBlock_titles">{{ item.title }}</div>
                <div class="moveBlock_img">
                    <img :src="item.imgPng" :alt="item.title" />
                </div>
                <div class="moveBlock_icon">
                    <img :src="item.imgIcon" :alt="item.title" />
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            componentsSelect: [
                {
                    model_id: 0,
                    lable: '全部'
                },
                {
                    model_id: 1,
                    lable: '房产管理'
                },
                {
                    model_id: 2,
                    lable: '住户管理'
                },
                {
                    model_id: 3,
                    lable: '收费管理'
                },
                {
                    model_id: 4,
                    lable: '设备管理'
                },
                {
                    model_id: 5,
                    lable: '告警管理'
                },
                {
                    model_id: 6,
                    lable: '运维工单'
                },
                {
                    model_id: 7,
                    lable: '设备巡检'
                },
                {
                    model_id: 8,
                    lable: '安保巡更'
                },
                {
                    model_id: 9,
                    lable: '客服服务'
                },
                {
                    model_id: 10,
                    lable: '商业管理'
                },
                {
                    model_id: 11,
                    lable: '社区运营'
                },
                {
                    model_id: 12,
                    lable: '绩效管理'
                },
                {
                    model_id: 13,
                    lable: '流程管理'
                }
            ],
            componentsArrar: [
                {
                    data_id: 1,
                    title: '高德地图',
                    type: 0,
                    imgPng: require('@assets/img/formulation/img_ditu@2x.png'),
                    imgIcon: require('@assets/img/formulation/tag_4x@2x.png')
                },
                {
                    data_id: 2,
                    type: 9,
                    title: '投诉建议',
                    imgPng: require('@assets/img/formulation/img_bingzhuangtu@2x.png'),
                    imgIcon: require('@assets/img/formulation/tag_1x@2x.png')
                },
                {
                    data_id: 3,
                    type: 0,
                    title: '常用功能',
                    imgPng: require('@assets/img/formulation/img_changyonggongneng@2x.png'),
                    imgIcon: require('@assets/img/formulation/tag_1x@2x.png')
                },
                {
                    data_id: 4,
                    title: '服务满意度趋势',
                    type: 9,
                    imgPng: require('@assets/img/formulation/img_zhuzhuangtu@2x.png'),
                    imgIcon: require('@assets/img/formulation/tag_2x@2x.png')
                },
                {
                    data_id: 5,
                    title: '设备告警趋势',
                    type: 5,
                    imgPng: require('@assets/img/formulation/img_zhexiantu@2x.png'),
                    imgIcon: require('@assets/img/formulation/tag_2x@2x.png')
                },
                {
                    data_id: 6,
                    title: '房屋租售率',
                    type: 10,
                    imgPng: require('@assets/img/formulation/img_bing+baifenbi@2x.png'),
                    imgIcon: require('@assets/img/formulation/tag_1x@2x.png')
                },
                {
                    data_id: 7,
                    title: '收款率分析',
                    type: 3,
                    imgPng: require('@assets/img/formulation/img_bing+baifenbi@2x.png'),
                    imgIcon: require('@assets/img/formulation/tag_1x@2x.png')
                },

                {
                    data_id: 8,
                    title: '住户性别占比',
                    type: 2,
                    imgPng: require('@assets/img/formulation/img_bingzhuangtu@2x.png'),
                    imgIcon: require('@assets/img/formulation/tag_1x@2x.png')
                },
                {
                    data_id: 9,
                    title: '住户身份占比',
                    type: 2,
                    imgPng: require('@assets/img/formulation/img_bingzhuangtu@2x.png'),
                    imgIcon: require('@assets/img/formulation/tag_1x@2x.png')
                },
                {
                    data_id: 10,
                    title: '设备设施统计',
                    type: 4,
                    imgPng: require('@assets/img/formulation/img_zhuzhuangtu@2x.png'),
                    imgIcon: require('@assets/img/formulation/tag_2x@2x.png')
                },
                {
                    data_id: 11,
                    title: '业主审批',
                    type: 2,
                    imgPng: require('@assets/img/formulation/img_liebiao@2x.png'),
                    imgIcon: require('@assets/img/formulation/tag_2x@2x.png')
                },
                {
                    data_id: 12,
                    title: '待处理投诉',
                    type: 9,
                    imgPng: require('@assets/img/formulation/img_liebiao@2x.png'),
                    imgIcon: require('@assets/img/formulation/tag_2x@2x.png')
                },
                {
                    data_id: 13,
                    title: '投诉建议数量趋势',
                    type: 9,
                    imgPng: require('@assets/img/formulation/img_zhexiantu@2x.png'),
                    imgIcon: require('@assets/img/formulation/tag_2x@2x.png')
                },
                {
                    data_id: 14,
                    title: '巡更人员任务执行时长',
                    type: 8,
                    imgPng: require('@assets/img/formulation/img_zhuzhuangtu@2x.png'),
                    imgIcon: require('@assets/img/formulation/tag_2x@2x.png')
                },
                {
                    data_id: 15,
                    title: '社区公告',
                    type: 9,
                    imgPng: require('@assets/img/formulation/img_liebiao@2x.png'),
                    imgIcon: require('@assets/img/formulation/tag_2x@2x.png')
                }
            ],
            componentsValue: 0
        };
    },
    computed: {
        putCompArr() {
            let newArr = [];
            if (this.componentsValue == 0) {
                return this.componentsArrar;
            } else {
                this.componentsArrar.map((item) => {
                    if (this.componentsValue == item.type) {
                        newArr.push(item);
                    }
                });
            }
            return newArr;
        }
    },
    watch: {},
    methods: {
        dragstart(e, item) {
            //拖拽开始时将item存入vuex
            this.$store.commit('setDragItem', item);
        },
        drag(e) {
            //拖拽中执行的事件
            // console.log('drag',e)s
        },
        dragend(e) {
            //拖拽结束执行的事件
            // console.log('dragend', e);
        }
    },
    destroyed() {},
    created() {}
};
</script>
<style lang="scss" scoped>
@import '@assets/css/public-style.scss';
$BackColor: #171f32;

.leftAssembly {
    width: 174px;
    background: $BackColor;
    border-radius: 4px;
    padding: rem(20) rem(8) rem(20) rem(20);
    .saveColumn-select {
        margin-bottom: rem(30);
        margin-right: rem(12);
        /deep/ .el-input__inner {
            background: transparent;
            color: white;
            border-color: rgba(255, 255, 255, 0.2);
        }
    }
    // 块级模块
    .componentsBlock {
        height: calc(100% - #{rem(62)});
        overflow-y: auto;
        overflow-x: hidden;
        &::-webkit-scrollbar {
            z-index: 11;
            width: rem(4);
        }
        &::-webkit-scrollbar-track,
        &::-webkit-scrollbar-corner {
            background: transparent;
        }
        &::-webkit-scrollbar-thumb {
            border-radius: 5px;
            width: rem(4);
            background: rgba(250, 250, 250, 0.09);
        }
        &::-webkit-scrollbar-track-piece {
            background: transparent;
            width: rem(4);
        }
        .moveBlock {
            font-size: 12px;
            width: rem(132);
            height: rem(132);
            background: rgba(0, 0, 0, 0.1);
            box-sizing: border-box;
            border-radius: 4px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            padding: rem(10);
            margin-bottom: rem(20);
            text-align: center;
            position: relative;
            cursor: move;
            .moveBlock_titles {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                width: 100%;
            }
            .moveBlock_img {
                width: rem(60);
                margin: auto;
                img {
                    width: 100%;
                    margin-top: rem(20);
                }
            }
            .moveBlock_icon {
                position: absolute;
                right: 0;
                bottom: 0;
                height: rem(20);
                img {
                    width: rem(28);
                    height: rem(20);
                }
            }
        }
    }
}
</style>