scd_tools_ui/src/pages/system/SystemPage.vue

<template>
    <div>
        <div class="bigBox">
            <!-- 标签 -->
            <div class="tagBox">
                <template v-for="(item, index) in tagList">
                    <span class="tagLit" @click="tagChange(item, index)" :style="{
                        background: `url(${item.isSelected ? item.isImg : item.noImg})`,
                        color: item.isSelected ? 'white' : 'black',
                    }">{{ item.name }}</span>
                </template>
            </div>
            <!-- 设置盒子 -->
            <div class="setBox">

                <!-- 公共组件box -->
                <div class="traBox">
                    <LineTree v-if="selectIndex == 0" @listBack="listBack"></LineTree>
                    <ModuleTree v-if="selectIndex == 1"></ModuleTree>
                </div>
                <!-- 切换box -->
                <div class="changeBox">
                    <LitLine v-if="selectIndex == 0" :fuckList="fuckList"></LitLine>
                    <InsideModule v-if="selectIndex == 1"></InsideModule>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import LitLine from './components/LitLine.vue'
import LineTree from './components/LineTree.vue'
import InsideModule from './components/InsideModule.vue';
import ModuleTree from './components/ModuleTree.vue';
import blueBtn from '@/assets/image/btn_blue.png'
import grayBtn from '@/assets/image/btn_gray.png'
export default {
    setup() {
        let selectIndex = ref(0)
        let tagList = ref([
            {
                name: "接线方式维护",
                id: 1,
                noImg: grayBtn,
                isImg: blueBtn,
                isSelected: true, // 初始状态未选中
            },
            {
                name: "内置模型管理",
                id: 2,
                noImg: grayBtn,
                isImg: blueBtn,
                isSelected: false, // 初始状态未选中
            },
        ])
        let fuckList = ref([])//公共list
        function tagChange(row, num) {
            selectIndex.value = num
            // 将当前点击的标签设为选中状态，其他标签设为非选中
            tagList.value.forEach((tag) => {
                tag.isSelected = tag.id === row.id;
            });
        }
        function listBack(data) {
            fuckList.value = data
            console.log(fuckList.value, 'fuck');
        }
        onMounted(() => {

        })
        return {
            tagChange,//标签选择
            tagList,//标签列表
            listBack,
            fuckList,
            selectIndex,
        }
    },
    components: {
        LitLine,
        LineTree,
        InsideModule,
        ModuleTree,
    }
}
</script>

<style  scoped>
.bigBox {
    width: 98%;
    height: 100%;
    margin-left: 10px;
    margin-top: 5px;
}

.tagLit {
    display: inline-block;
    width: 112px;
    height: 40px;
    /* border: 1px solid red; */
    text-align: center;
    line-height: 40px;
    margin-left: 10px;
    margin-top: 5px;
    font-size: 12px;
}

.setBox {
    width: 100%;
    height: calc(100vh - 150px);
    /* border: 1px solid saddlebrown; */
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 10px;
}

.traBox {
    width: 15%;
    height: calc(100vh - 150px);
    /* border: 1px solid green; */
    background-color: #F7F8FB;
}

.changeBox {
    width: 80%;
    height: calc(100vh - 150px);
    /* border: 1px solid red; */
}
</style>