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" v-if="selectIndex == 0 || ourNum == 0">
                    <LineTree @listBack="listBack" @volBack="volBack" @lineBack="lineBack" :selectIndex="selectIndex">
                    </LineTree>
                    <!--<ModuleTree v-if="selectIndex == 1 && ourNum == 1"  @mtBack="mtBack"></ModuleTree>-->
                </div>
                <!-- 切换box -->
                <div class="changeBox" :style="selectIndex == 1 && ourNum == 1 ? 'width:96%' : ''" v-loading="loading">
                    <LitLine v-if="selectIndex == 0" :fuckList="fuckList"></LitLine>
                    <InsideModule v-if="selectIndex == 1 && ourNum == 1" :tfType="tfType" :insideNeed="insideNeed"
                        :lineId="lineId" :setName="setName" :setId="setId" @closeDraw="closeDraw"></InsideModule>
                    <SetModule v-if="selectIndex == 1 && ourNum == 0" @backNum="backNum" :linkstyleid="lineId"
                        :volId="volId" :fuckList="fuckList"></SetModule>
                </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 SetModule from './components/SetModule.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
        let ourNum = ref(0)//决定编辑图像的数字，0为不显示1为显示
        let tfType = ref(null)//判断画图状态
        let insideNeed = ref({})//画图返回数据
        let lineId = ref('')//linetree返回id
        let volId = ref('')
        let setName = ref('')//setmodule返回name
        let setId = ref('')
        let loading = ref(false)//加载动画
        function tagChange(row, num) {//标签切换
            selectIndex.value = num
            if (num == 1) {
                ourNum.value = 0
            }
            // 将当前点击的标签设为选中状态，其他标签设为非选中
            tagList.value.forEach((tag) => {
                tag.isSelected = tag.id === row.id;
            });
        }
        function listBack(data, id) {
            setTimeout(() => {
                fuckList.value = data
                lineId.value = id
            }, 1000)
        }
        function volBack(data, id) {
            setTimeout(() => {
                fuckList.value = data
                volId.value = id
            }, 1000)
        }
        function backNum(data, name, row) {
            ourNum.value = data
            setName.value = name
            setId.value = row
        }
        function mtBack(data, row) {
            insideNeed.value = row
            tfType.value = data
        }
        function closeDraw() {
            selectIndex.value = 1
            ourNum.value = 0
        }
        function lineBack(data) {
            loading.value = data
            setTimeout(() => {
                loading.value = false
            }, 1500)
        }
        onMounted(() => {

        })
        return {
            tagChange,//标签选择
            tagList,//标签列表
            listBack,
            volBack,
            closeDraw,
            fuckList,
            selectIndex,
            ourNum,
            backNum,
            tfType,
            mtBack,
            insideNeed,
            lineId,
            volId,
            setName,
            setId,
            loading,//加载动画
            lineBack,//lineTree.vue返回加载状态
        }
    },
    components: {
        LitLine,
        LineTree,
        InsideModule,
        ModuleTree,
        SetModule
    }
}
</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 #ededed;
    background-color: #F7F8FB;
}

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