Project-Annex/operationSupport/src/views/newWorkBench/editWorkbench.vue

<template>
    <div class="workbench">
        <div class="ComponentSave">
            <div class="saveColumn">
                <span class="title">工作台-自拟定</span>
                <el-select v-model="model" clearable @change="changeSelect" class="saveColumn-select">
                    <el-option v-for="(item, index) in modelSelect" :key="index" :label="item.lable" :value="item.model_id"></el-option>
                </el-select>
            </div>
            <div class="saveColumn-buttons">
                <el-button>取消</el-button>
                <el-button type="primary">保存并使用</el-button>
            </div>
        </div>
        <div class="operation">
            <div class="leftAssembly">
                <el-select v-model="componentsValue" clearable @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">
                    <template v-for="(item, index) in componentsArrar">
                        <div class="moveBlock" :data-id="item.data_id" @mousedown="moveBlock($event, item.data_id)" :key="index">
                            <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>
                    </template>
                </div>
            </div>
            <model-one v-if="model == 1"></model-one>
            <model-two v-if="model == 2"></model-two>
            <model-three v-if="model == 3"></model-three>
            <model-four v-if="model == 4"></model-four>
        </div>
    </div>
</template>
        
<script>
import workcommonFcuntion from './template/index.js';
export default {
    mixins: [workcommonFcuntion],
    data() {
        return {
            model: 1,
            modelSelect: [
                {
                    model_id: 1,
                    lable: '模板一'
                },
                {
                    model_id: 2,
                    lable: '模板二'
                },
                {
                    model_id: 3,
                    lable: '模板三'
                },
                {
                    model_id: 4,
                    lable: '模板四'
                }
            ],
            componentsSelect: [
                {
                    model_id: 0,
                    lable: '全部'
                }
            ],
            componentsArrar: [
                {
                    data_id: 1,
                    title: '高德地图',
                    imgPng: require('@assets/img/formulation/img_ditu@2x.png'),
                    imgIcon: require('@assets/img/formulation/tag_4x@2x.png')
                },
                {
                    data_id: 2,
                    title: '社区总体情况统计',
                    imgPng: require('@assets/img/formulation/img_tongji@2x.png'),
                    imgIcon: require('@assets/img/formulation/tag_2x@2x.png')
                },
                {
                    data_id: 3,
                    title: '常用功能',
                    imgPng: require('@assets/img/formulation/img_changyonggongneng@2x.png'),
                    imgIcon: require('@assets/img/formulation/tag_1x@2x.png')
                },
                {
                    data_id: 4,
                    title: '运维人员评分系统',
                    imgPng: require('@assets/img/formulation/img_zhuzhuangtu@2x.png'),
                    imgIcon: require('@assets/img/formulation/tag_2x@2x.png')
                },
                {
                    data_id: 5,
                    title: '巡更任务完成率',
                    imgPng: require('@assets/img/formulation/img_bingzhuangtu@2x.png'),
                    imgIcon: require('@assets/img/formulation/tag_1x@2x.png')
                },
                {
                    data_id: 6,
                    title: '设备告警趋势',
                    imgPng: require('@assets/img/formulation/img_zhexiantu@2x.png'),
                    imgIcon: require('@assets/img/formulation/tag_2x@2x.png')
                },
                {
                    data_id: 7,
                    title: '销售漏斗',
                    imgPng: require('@assets/img/formulation/img_loudou@2x.png'),
                    imgIcon: require('@assets/img/formulation/tag_1x@2x.png')
                },
                {
                    data_id: 8,
                    title: '待收款账户',
                    imgPng: require('@assets/img/formulation/img_liebiao@2x.png'),
                    imgIcon: require('@assets/img/formulation/tag_2x@2x.png')
                }
            ],
            componentsValue: 0,
            isEdit: false,
            dataId: null
        };
    },
    watch: {
        $route(to, from) {
            if (to.query.editWorkbench) {
                this.isEdit = true;
            }
        }
    },
    methods: {
        moveBlock(e, num) {
            this.dataId = num;
        },
        communityNameList() {
            this.$http.get('/sc-community/assets/community/list').then(({ data, msg, status }) => {
                if (status == 0) {
                    this.$store.commit('setAreaSelect', data);
                }
            });
        }
    },
    created() {
        this.communityNameList();
    }
};
</script>
<style lang="scss" scoped>
@import '@assets/css/public-style.scss';
$BackColor: #171f32;
.overflowHidden {
    overflow: hidden;
}
.list_border {
    border: 1px solid $BackColor;
    border-radius: 4px;
}
.mr10 {
    margin: rem(10);
}
.workbench {
    background: #2c354a;
    height: 100%;
    min-height: rem(700);
    overflow: auto;
    color: white;
    &::-webkit-scrollbar {
        display: none;
    }
    .ComponentSave {
        height: rem(60);
        min-height: 60px;
        background: $BackColor;
        border-radius: 4px;
        margin-bottom: rem(20);
        padding: 0 rem(20);
        display: flex;
        justify-content: space-between;
        .saveColumn {
            display: flex;
            align-items: center;
            .saveColumn-select {
                margin-left: rem(20);
                /deep/ .el-input__inner {
                    background: transparent;
                    color: white;
                }
            }
        }
        .saveColumn-buttons {
            display: flex;
            align-items: center;
            /deep/ .el-button {
                padding: rem(8) rem(20);
            }
            /deep/ .el-button--default {
                background: transparent;
                border-color: #0eaeff;
                color: white;
                &:active {
                    opacity: 0.8;
                }
            }
        }
    }
    .operation {
        height: rem(794);
        min-height: 794px;
        display: flex;
        justify-content: space-between;
        .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>