sk-demo-vue/src/views/scada/topo/components/topoToolbox.vue

<template>
    <el-tabs v-model="tabsActiveName" tab-position="left" class="topo-toolbox" @tab-click="handleTabsClick">
        <el-tab-pane name="1">
            <div slot="label" class="tab-item">
                <img  v-if="tabsActiveName === '1'" width="24" height="24" src="@/assets/topo-img/images/edit_basic_active.png" />
                <img class="white-icon" v-else width="24" height="24" src="@/assets/topo-img/images/edit_basic_disable.png" />
                <span class="name" :class="{ active: tabsActiveName === '1' }">{{ $t('topo.topoToolbox.250932-0') }}</span>
            </div>
            <data-panel :data="jsonBase" />
        </el-tab-pane>
        <el-tab-pane name="2">
            <div slot="label" class="tab-item">
                <img  v-if="tabsActiveName === '2'" width="24" height="24" src="@/assets/topo-img/images/edit_shape_active.png" />
                <img class="white-icon" v-else width="24" height="24" src="@/assets/topo-img/images/edit_shape_disable.png" />
                <span class="name" :class="{ active: tabsActiveName === '2' }">{{ $t('topo.topoToolbox.250932-1') }}</span>
            </div>
            <data-panel :data="jsonShape" />
        </el-tab-pane>
        <el-tab-pane name="3">
            <div slot="label" class="tab-item">
                <img v-if="tabsActiveName === '3'" width="24" height="24" src="@/assets/topo-img/images/edit_static_active.png" />
                <img class="white-icon"  v-else width="24" height="24" src="@/assets/topo-img/images/edit_static_disable.png" />
                <span class="name" :class="{ active: tabsActiveName === '3' }">{{ $t('topo.topoToolbox.250932-2') }}</span>
            </div>
            <data-panel :data="jsonChart" />
        </el-tab-pane>
        <el-tab-pane name="4">
            <div slot="label" class="tab-item">
                <img  v-if="tabsActiveName === '4'" width="24" height="24" src="@/assets/topo-img/images/edit_gallery_active.png" />
                <img class="white-icon" v-else width="24" height="24" src="@/assets/topo-img/images/edit_gallery_disable.png" />
                <span class="name" :class="{ active: tabsActiveName === '4' }">{{ $t('topo.topoToolbox.250932-3') }}</span>
            </div>
            <el-menu unique-opened @open="handleGalleryOpen">
                <el-submenu v-for="dict in dict.type.scada_gallery_type" :index="dict.value" :key="dict.value">
                    <template slot="title">
                        <span>{{ dict.label }}</span>
                    </template>
                    <data-panel v-loading="loading" element-loading-background="transparent" :data="gallerys" />
                </el-submenu>
            </el-menu>
        </el-tab-pane>
        <el-tab-pane name="5">
            <div slot="label" class="tab-item">
                <img  v-if="tabsActiveName === '5'" width="24" height="24" src="@/assets/topo-img/images/edit_chart_active.png" />
                <img class="white-icon" v-else width="24" height="24" src="@/assets/topo-img/images/edit_chart_disable.png" />
                <span class="name" :class="{ active: tabsActiveName === '5' }">{{ $t('topo.topoToolbox.250932-4') }}</span>
            </div>
            <el-menu unique-opened @open="handleEchartOpen">
                <el-submenu v-for="dict in dict.type.scada_echart_type" :index="dict.value" :key="dict.value">
                    <template slot="title">
                        <span>{{ dict.label }}</span>
                    </template>
                    <data-panel v-loading="loading" element-loading-background="transparent" :data="echarts" />
                </el-submenu>
            </el-menu>
        </el-tab-pane>
        <el-tab-pane name="6">
            <div slot="label" class="tab-item">
                <img  v-if="tabsActiveName === '6'" width="24" height="24" src="@/assets/topo-img/images/edit_more_active.png" />
                <img class="white-icon" v-else width="24" height="24" src="@/assets/topo-img/images/edit_more_disable.png" />
                <span class="name" :class="{ active: tabsActiveName === '6' }">{{ $t('topo.topoToolbox.250932-5') }}</span>
            </div>
            <data-panel v-loading="loading" element-loading-background="transparent" :data="components" />
        </el-tab-pane>
    </el-tabs>
</template>
<script>
import { mapState } from 'vuex';

import { listGallery } from '@/api/scada/gallery';
import { listEchart } from '@/api/scada/echart';
import { listComponent } from '@/api/scada/component';

import jsonIcon from './data-toolbox/icon.json';
import DataPanel from './data-panel/index';
import jsonBase from './data-toolbox/base.json';
import jsonShape from './data-toolbox/shape.json';
import jsonChart from './data-toolbox/chart.json';

export default {
    name: 'TopoToolbox',
    dicts: ['scada_gallery_type', 'scada_echart_type'],
    components: {
        DataPanel,
    },
    computed: {
        ...mapState({
            sidebar: (state) => state.app.sidebar,
        }),
    },
    data() {
        return {
            baseApi: process.env.VUE_APP_BASE_API,
            tabsActiveName: '1',
            jsonBase: jsonBase, // 基本组件
            jsonShape: jsonShape,
            jsonChart: jsonChart,
            jsonIcon: jsonIcon,
            loading: false,
            gallerys: {}, // 图库数据
            echarts: {}, // 图表数据
            components: {}, // 组件数据
        };
    },
    mounted() {},
    methods: {
        // 图片组件打开
        handleGalleryOpen(key) {
            this.getGalleryDatas(key);
        },
        // 图表组件打开
        handleEchartOpen(key) {
            this.getEchartDatas(key);
        },
        // tabs点击事件
        handleTabsClick(tab) {
            if (tab.name === '6') {
                this.getComponent('component');
            }
        },
        // 获取图库数据
        getGalleryDatas(name) {
            this.loading = true;
            const params = {
                pageNum: 1,
                pageSize: 10,
                categoryName: name,
                moduleGuid: this.$t('scada.gallery.309456-5'),
                orderByColumn: 'id',
                isAsc: 'desc',
            };
            listGallery(params).then((res) => {
                if (res.code === 200) {
                    if (res.rows.length > 0) {
                        let newJson = this.getJson(name);
                        res.rows.forEach((item) => {
                            newJson.title = item.categoryName;
                            let newJsonItem = this.getImgJsonItem();
                            newJsonItem.text = item.fileName;
                            newJsonItem.icon = this.baseApi + item.resourceUrl;
                            newJsonItem.info.style.url = this.baseApi + item.resourceUrl;
                            newJson.items.push(newJsonItem);
                        });
                        this.gallerys = newJson;
                    } else {
                        this.gallerys = {};
                    }
                }
                this.loading = false;
            });
        },
        // 获取图表数据
        getEchartDatas(name) {
            this.loading = true;
            const params = {
                pageNum: 1,
                pageSize: 10,
                echartType: name,
            };
            listEchart(params).then((res) => {
                if (res.code === 200) {
                    if (res.rows.length > 0) {
                        let newJson = this.getJson(name);
                        res.rows.forEach((item) => {
                            newJson.title = item.categoryName;
                            let newJsonItem = this.getEchartJsonItem();
                            newJsonItem.text = item.echartName;
                            newJsonItem.icon = this.baseApi + item.echartImgae;
                            newJsonItem.info.dataBind.echartOption = `echartId-${item.id}`;
                            newJson.items.push(newJsonItem);
                        });
                        this.echarts = newJson;
                    } else {
                        this.echarts = {};
                    }
                }
                this.loading = false;
            });
        },
        // 组件数据
        getComponent(type) {
            this.loading = true;
            const params = {
                pageNum: 1,
                pageSize: 9999,
            };
            listComponent(params).then((res) => {
                if (res.code === 200) {
                    if (res.rows.length > 0) {
                        let newJson = this.getJson(type);
                        res.rows.forEach((item) => {
                            newJson.title = item.categoryName;
                            let newJsonItem = this.getComponentJsonItem();
                            newJsonItem.text = item.componentName;
                            newJsonItem.icon = this.baseApi + item.componentImage;
                            newJsonItem.info.dataBind.componentId = item.id;
                            newJson.items.push(newJsonItem);
                        });
                        this.components = newJson;
                    } else {
                        this.components = {};
                    }
                }
                this.loading = false;
            });
        },
        getJson(type) {
            let newJson = {
                title: '',
                icon: type,
                opened: false,
                items: [],
            };
            return newJson;
        },
        // 生成图片json
        getImgJsonItem() {
            let newJson = {
                text: '',
                icon: '',
                type: 'service',
                info: {
                    type: 'image',
                    componentShow: ['动画', '单击', '组件颜色', '滤镜渲染', '状态开关', '参数绑定'],
                    action: [],
                    hdClassName: '',
                    dataBind: {
                        activeName: '变量状态',
                        sceneModelId: '',
                        sceneModelDeviceId: '',
                        variableType: '',
                        productId: '',
                        serialNumber: '',
                        identifier: '',
                        modelName: '',
                        modelValue: '',
                        stateList: [],
                    },
                    dataEvent: {
                        djAction: false,
                        action: '1',
                        sceneModelId: '',
                        variableType: '',
                        productId: '',
                        serialNumber: '',
                        slaveId: '',
                        identifier: '',
                        modelName: '',
                        modelValue: '',
                        redirectUrl: '',
                        ztPage: '',
                    },
                    dataAction: {
                        xyAction: false,
                        xzAction: false,
                        ssAction: false,
                        hdAction: false,
                        maAction: false,
                        sceneModelId: '',
                        sceneModelDeviceId: '',
                        variableType: '',
                        productId: '',
                        serialNumber: '',
                        identifier: '',
                        modelName: '',
                        paramJudge: '',
                        paramJudgeData: '',
                        rotationSpeed: '中',
                        duration: '',
                        translateList: [],
                    },
                    style: {
                        position: {
                            x: 200,
                            y: 200,
                            w: 100,
                            h: 100,
                        },
                        backColor: 'rgba(255,255,255,0)',
                        foreColor: 'rgba(255,255,255,0)',
                        zIndex: 1,
                        transform: 0,
                        url: '',
                        transformType: 'rotate(0deg)',
                        isFilter: true,
                    },
                },
            };
            return newJson;
        },
        // 生成图表json
        getEchartJsonItem() {
            let newJson = {
                text: '',
                icon: '',
                type: 'service',
                info: {
                    type: 'chart-wrapper',
                    componentShow: ['自定义echarts'],
                    action: [],
                    dataBind: {
                        echartOption: '',
                        echartRun: 0,
                        echartData: '',
                        httpSetting: {
                            url: '',
                            type: '',
                            time: 60,
                            unit: 's',
                            params: {},
                            body: {},
                            headers: {},
                        },
                    },
                    style: {
                        position: {
                            x: 0,
                            y: 0,
                            w: 350,
                            h: 250,
                        },
                        backColor: 'rgba(255, 255, 255, 1)',
                        foreColor: 'rgba(0, 0, 0, 1)',
                        zIndex: 1,
                        transform: 0,
                        transformType: 'rotate(0deg)',
                    },
                },
            };
            return newJson;
        },
        // 生成组件json
        getComponentJsonItem() {
            let newJson = {
                text: '',
                icon: '',
                type: 'service',
                info: {
                    type: 'component',
                    componentShow: ['动画'],
                    action: [],
                    dataBind: {},
                    dataAction: {
                        xyAction: false,
                        xzAction: false,
                        ssAction: false,
                        hdAction: false,
                        maAction: false,
                        sceneModelId: '',
                        sceneModelDeviceId: '',
                        variableType: '',
                        productId: '',
                        serialNumber: '',
                        identifier: '',
                        modelName: '',
                        paramJudge: '',
                        paramJudgeData: '',
                        rotationSpeed: '中',
                        duration: '',
                        translateList: [],
                    },
                    style: {
                        position: {
                            x: 0,
                            y: 0,
                            w: 350,
                            h: 250,
                        },
                        backColor: 'rgba(255, 255, 255, 1)',
                        foreColor: 'rgba(0, 0, 0, 1)',
                        zIndex: 1,
                        transform: 0,
                        transformType: 'rotate(0deg)',
                    },
                },
            };
            return newJson;
        },
        onDragstart(event, info) {
            var infoJson = JSON.stringify(info.info);
            event.dataTransfer.setData('my-info', infoJson);
        },
    },
};
</script>

<style lang="scss" scoped>
.topo-toolbox {
    height: 100%;
    border-right: #dcdfe6 solid 1px;

    ::v-deep .el-tabs__header {
        margin: 0;
        background: #222b3c;
        border-right: 1px solid white;

        .el-tabs__item {
            height: 88px;
            padding: 20px 16px;

            .tab-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                font-size: 14px;

                .name {
                    font-size: 14px;
                    color: white;
                    line-height: 24px;
                }
            }

            &.is-active {
                color: #486ff2;
                background: #ffffff;
            }
        }

        .el-tabs__active-bar {
            background: transparent;
        }

        .el-tabs__nav-wrap::after {
            background-color: transparent;
        }
    }

    .active {
        color: #486ff2 !important;
    }

    ::v-deep .el-tabs__content {
        height: 100%;
        overflow-y: auto;

        .el-submenu__title {
            height: 46px;
            line-height: 46px;
            font-size: 13px;
        }
    }
}
.white-icon {
  filter: brightness(0) invert(1);
}
::v-deep .el-menu {
  background: #222b3c;
  .el-submenu .el-submenu__title {
    color: white !important;
  }
  .el-submenu__title:hover {
    color: black !important;
  }
}

</style>