scd_project/src/views/dashboard/index.vue

<template>
    <div class="container-bg">
        <el-container class="main-layout">
            <el-aside class="left-plate"><tree-list /></el-aside>
            <el-container class="right-plate">
                <el-header class="main-top">Header</el-header>
                <el-main class="main-cont">
                    <div>
                        home
                        <button @click="detailsModal = true">测试打开模态框</button>
                        <!-- 详细信息 -->
                        <div>
                            <el-dialog :visible.sync="detailsModal" width="98%" top="1vh" :height="ceshi">
                                <div class="detailsTittle">
                                    <span>xxx-详细信息</span>
                                </div>
                                <div class="inDetailsBox">
                                    <div class="inBoxLeft">
                                        <el-input style="width: 300px;margin-top: 10px;" v-model="searchFast"
                                            placeholder="快速查找"></el-input>
                                        <template v-for="(item, index) in modelLeftList">
                                            <div class="leftMes" @click="insideBox(item)">
                                                <span class="leftMesSpan">{{ item.ied_name }}</span>
                                                <span>{{ item.desc }}</span>
                                            </div>
                                        </template>

                                    </div>
                                    <div class="inBoxRight">
                                        <!-- 导航栏 -->
                                        <div class="navigationBox">
                                            <template v-for="(item, index) in modalList">
                                                <p :class="['tabCard', { active: selectedIndex === index }]"
                                                    @click="goUrl(item, index)">
                                                    {{ item.name }}
                                                </p>
                                            </template>
                                        </div>
                                    </div>
                                </div>
                                <!-- <span slot="footer" class="dialog-footer">
                    <el-button @click="detailsModal = false">取 消</el-button>
                    <el-button type="primary" @click="detailsModal = false">确 定</el-button>
                </span> -->
                            </el-dialog>
                        </div>
                    </div>
                </el-main>
            </el-container>
        </el-container>
        <!-- 测试弹窗 注释掉即可隐藏弹窗 -->
        <!-- <BulletBox :windowWidth="'150rem'" :windowHeight="'72rem'"></BulletBox> -->
    </div>
</template>

<script>
import { getscdlist, getiedmse } from "@/api/ied/ied"
import { forGround } from "@/api/basic/basic"
export default {
    name: 'ScdProjectIndex',
    data() {
        return {
            detailsModal: false,
            searchFast: "",//详情模态框内快速搜索
            modalList: [
                {
                    name: "装置关联关系",
                    url: "1"
                },
                {
                    name: "输入输出控制块",
                    url: "2"
                },
                {
                    name: "虚端子关系",
                    url: "3"
                },
                {
                    name: "基础信息",
                    url: "4",
                },
                {
                    name: "定值条目",
                    url: "5"
                },
                {
                    name: "信息点表",
                    url: "6"
                },
                {
                    name: "源文件",
                    url: '7'
                }
            ],
            selectedIndex: 0,//选中的背景
            ceshi: "500px",
            modelLeftList: [],//模态框内列表
            stationCid: "",
        };
    },

    mounted() {

    },
    created() {
        this.forMesTo()
        this.getAllIedLink()
    },
    methods: {
        goUrl(item, index) {
            this.selectedIndex = index;
            // 执行你的跳转逻辑
        },
        // 拿到首页左侧站点
        async forMesTo() {
            let res = await forGround({ pid: "0" })
            this.modelLeftList = res.data
        },
        // 根据站点id拿到站点信息
        async getAllIedLink() {
            let res = await getscdlist({ ischeckinscd: '1', stationid: "888", pageno: "1" })
            this.stationCid = res.data[0].id
            this.getIdBy()
        },
        // 根据站点id拿到站点下列表
        async getIdBy() {
            let res = await getiedmse({ scd_id: this.stationCid })
            this.modelLeftList = res.data
        },
        // 切换盒子
        insideBox(row) {
            console.log(row, 'row');
        }
    },
}
</script>

<style scoped>
/* 模态框内左侧盒子 */
.inBoxLeft {
    width: 320px;
    height: 530px;
    background-color: #F3F5FA;
    text-align: center;
    overflow-y: auto;
}

.inDetailsBox {
    margin-top: 10px;
    display: flex;
    justify-content: space-around;
}

/* 模态框内表头 */
.detailsTittle {
    width: 1400px;
    height: 50px;
    border-bottom: 1px solid blue;
    margin: 0 auto;
    text-align: center;
}

/* 名称和信息 */
.leftMes {
    margin: 5px 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;

}

.leftMes span {
    display: block;
    text-align: center;
}

.leftMes span:nth-child(1) {
    width: 65px;
    margin-right: 20px;
}

.leftMes span:nth-child(2) {
    width: 220px;
}

/* 内导航栏 */
.tabCard {
    width: 100px;
    height: 25px;
    margin: 20px 0;
    cursor: pointer;
}

.tabCard:hover {
    color: skyblue;
}

.active {
    width: 100px;
    height: 25px;
    background-color: blue;
    color: white;
    border-radius: 20px;
}

/* 内导航栏盒子 */
.navigationBox {
    width: 850px;
    height: 30px;
    border: 1px solid blue;
    text-align: center;
    line-height: 30px;
    border-radius: 20px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
</style>