simulation-front/src/views/mainPage.vue

<template>
    <div class="mainPagePanel">
        <div class="myTabsBox">
            <el-tabs 
                v-bind:class="{ tabPaneA: tabsList.length <= 1 }"
                v-model="activeName" type="card" @tab-click="pageControl">
                <!--
                <el-tab-pane label="系统监控" name="1"></el-tab-pane>
                <el-tab-pane label="系统概览" name="2"></el-tab-pane>
                -->
                <el-tab-pane v-for="(item, i) in tabsList" :label="item.label" :name="item.name" :key="i"></el-tab-pane>
            </el-tabs>
        </div>

        <div v-show="activeName === '1'" class="tabBox">
            <div class="boxContent">
                <div class="titlePanel">
                    <div class="titlePanelBor">硬件监控</div>
                </div>
                <ul class="listPanel">
                    <li class="shadowBox colorA">
                        <span></span>
                        <b>服务器数量</b>
                        <i>{{ hardware.serverNumber || 0 }}</i>
                    </li>
                    <li class="shadowBox colorB">
                        <span></span>
                        <b>内存使用率</b>
                        <i>{{ hardware.memoryUsage || 0 }}</i>
                    </li>
                    <li class="shadowBox colorC">
                        <span></span>
                        <b>磁盘占用率</b>
                        <i>{{ hardware.diskUsage || 0 }}</i>
                    </li>
                    <li class="shadowBox colorD">
                        <span></span>
                        <b>CPU使用率</b>
                        <i>{{ hardware.cpuUsage || 0 }}</i>
                    </li>
                    <li class="shadowBox colorE">
                        <span></span>
                        <b>GPU使用率</b>
                        <i>{{ hardware.gpuUsage || 0 }}</i>
                    </li>
                </ul>
            </div>

            <div class="boxContent">
                <div class="titlePanel">
                    <div class="titlePanelBor">服务监控</div>
                </div>
                <ul class="listPanel listPanelB">
                    <li class="shadowBox">
                        <b>用户数量</b>
                        <i>{{ serviceData.userNumber || 0 }}</i>
                    </li>
                    <li class="shadowBox">
                        <b>当前在线人数</b>
                        <i>{{ serviceData.onlineNumber || 0 }}</i>
                    </li>
                    <li class="shadowBox">
                        <b>仿真节点数量</b>
                        <i>{{ serviceData.simulationNodeNumber || 0 }}</i>
                    </li>
                    <li class="shadowBox">
                        <b>仿真软件license占用数量</b>
                        <i>{{ serviceData.simulationLicenseNumber || 0 }}</i>
                    </li>
                    <li class="shadowBox">
                        <b>动力学软件license占用数量</b>
                        <i>{{ serviceData.dynamicsLicenseNumber || 0 }}</i>
                    </li>
                </ul>
            </div>

            <div class="boxContent">
                <div class="titlePanel">
                    <div class="titlePanelBor">日访问人数</div>
                </div>
                <div class="chartABox shadowBox">
                    <line-chart-main-page
                        :dataList="dateAccessList"
                        id="dateAccessList"
                    >
                    </line-chart-main-page>
                </div>
            </div>

            <div class="boxContent padTop20">
                <div class="titlePanel">
                    <div class="titlePanelBor">服务器监控</div>
                </div>
                <div>
                    <tableList
                        :columns="columns"
                        :getDataWay="getDataWay"
                        :pagination="pagination"
                        index
                    >
                    </tableList>
                </div>
            </div>
        </div>

        <div v-show="activeName === '2'" class="tabBox">
            <div class="boxContent padBot10">
                <div class="titlePanel">
                    <div class="titlePanelBor">数据概览</div>
                </div>
                <ul class="listPanel listPanelB">
                    <li class="shadowBox">
                        <b>场景数量(公有)</b>
                        <i>{{ dataOverview.GySceneNum || 0 }}</i>
                    </li>
                    <li class="shadowBox">
                        <b>场景数量(私有)</b>
                        <i>{{ dataOverview.SySceneNum || 0 }}</i>
                    </li>
                    <li class="shadowBox">
                        <b>车辆配置数量</b>
                        <i>{{ dataOverview.ConfigTotal || 0 }}</i>
                    </li>
                    <li class="shadowBox">
                        <b>算法文件数量</b>
                        <i>{{ dataOverview.fileNum || 0 }}</i>
                    </li>
                    <li class="shadowBox">
                        <b>算法地址数量</b>
                        <i>{{ dataOverview.pathNum || 0 }}</i>
                    </li>
                    <li class="shadowBox">
                        <b>最大并发数量</b>
                        <i>{{ dataOverview.maxConcurrency || 0 }}</i>
                    </li>
                    <li class="shadowBox">
                        <b>当前并发数量</b>
                        <i>{{ dataOverview.currentConcurrency || 0 }}</i>
                    </li>
                </ul>
            </div>

            <div class="boxContent">
                <div>
                    <el-tabs
                        v-model="activitedPageNumA"
                        @tab-click="pageControlA"
                        class="tabsA"
                    >
                        <el-tab-pane label="运行项目" name="1">
                            <div class="chartBBox shadowBox">
                                <line-chart-main-page-a
                                    id="runProjectLine"
                                    :dataList="runProjectList"
                                ></line-chart-main-page-a>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="运行任务" name="2">
                            <div class="chartBBox shadowBox">
                                <line-chart-main-page-a
                                    id="runTaskLine"
                                    :dataList="runTaskList"
                                ></line-chart-main-page-a>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>

            <div class="boxContent boxContentB">
                <div class="titlePanel">
                    <div class="titlePanelBor">状态统计</div>
                </div>
                <div class="piesBox">
                    <div class="shadowBox">
                        <div class="title">项目运行状态统计</div>
                        <div class="pieBox">
                            <pie-chart-main-page
                                id="mainPagePieA"
                                :dataList="dataListA"
                                stateName="nowRunState"
                                seriesName="项目运行状态统计"
                            ></pie-chart-main-page>
                        </div>
                    </div>
                    <div class="shadowBox shadowBoxB">
                        <div class="title">任务运行状态统计</div>
                        <div class="pieBox">
                            <pie-chart-main-page
                                id="mainPagePieB"
                                :dataList="dataListB"
                                stateName="runState"
                                seriesName="任务运行状态统计"
                            ></pie-chart-main-page>
                        </div>
                    </div>
                    <div class="shadowBox">
                        <div class="title">评测等级分布</div>
                        <div class="pieBox">
                            <pie-chart-main-page
                                id="mainPagePieC"
                                :dataList="dataListC"
                                stateName="evaluationLevel"
                                seriesName="评测等级分布"
                            ></pie-chart-main-page>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import toolbarTab from "@/components/toolbar/toolbarTab";
import tableList from "@/components/grid/TableList";
import lineChartMainPage from "../components/echarts/lineChartMainPage";
import lineChartMainPageA from "../components/echarts/lineChartMainPageA";
import pieChartMainPage from "../components/echarts/pieChartMainPage";

export default {
    name: "mainPage", // 首页
    components: {
        toolbarTab,
        tableList,
        lineChartMainPage,
        lineChartMainPageA,
        pieChartMainPage,
    },
    data() {
        return {
            activeName: "1",
            activitedPageNumA: "1",
            tabsList:[
                //{label: '系统监控', name: '1'},
                //{label: '系统监控', name: '2'},
            ],
            pageBtnListA: [
                {
                    type: "primary",
                    title: "运行项目",
                    key: "all",
                    fromId: 1,
                    method: "showAllA",
                    plain: true,
                    disabled: false,
                },
                {
                    type: "primary",
                    title: "运行任务",
                    key: "notRead",
                    fromId: 2,
                    method: "showNotReadA",
                    plain: true,
                    disabled: false,
                },
            ],
            columns: [
                {
                    label: "服务器ID",
                    prop: "serverId",
                },
                {
                    label: "服务器地址",
                    prop: "serverAddress",
                },
                {
                    label: "服务器类型",
                    prop: "serverType",
                },
                {
                    label: "CPU使用率(%)",
                    prop: "cpuUsage",
                },
                {
                    label: "内存使用率(%)",
                    prop: "memoryUsage",
                },
                {
                    label: "可用内存(G)",
                    prop: "memoryAvailable",
                },
                {
                    label: "磁盘使用率(%)",
                    prop: "diskUsage",
                },
                {
                    label: "剩余容量(G)",
                    prop: "diskAvailable",
                },
                {
                    label: "执行任务数量",
                    prop: "taskNumber",
                },
            ],
            pagination: {
                //分页使用
                currentPage: 1,
                pageSize: 10,
                position: "right",
                pageSizes: [10, 30, 50, 100, 200],
                layout: "sizes, total, prev, pager, next, jumper",
            },
            getDataWay: {
                //加载表格数据
                dataType: "data",
                type: "post",
                data: [],
                param: {},
            },
            hardware: {}, // 硬件监控
            serviceData: {}, // 服务监控
            dateAccessList: [], // 日访问人数
            dataOverview: {}, // 数据概览
            runProjectList: [], // 运行项目
            runTaskList: [], // 运行任务
            // 三个饼图
            dataListA: [],
            dataListB: [],
            dataListC: [],
        };
    },

    computed: {
        roleCode(){
            return this.$store.state.roleCode
        }
    },
    watch:{
        roleCode:{
            handler(newV){
                if(newV){
                    if(newV == '0'|| newV == '1'){
                        this.tabsList=[
                            {label: '服务监控', name: '1'},
                            {label: '系统监控', name: '2'},
                        ]
                        this.activeName = '1'
                        this.init()
                    }else{
                        this.tabsList=[
                            {label: '系统监控', name: '2'},
                        ]
                        this.activeName = '2'
                        this.init2()
                    }  
                }
            },
            immediate: true
        }
    },
    methods: {
        pageControl(data) {
            this.activeName = data.name;
        },
        pageControlA(data) {
            this.activitedPageNumA = data.name;
        },
        getData(url, infoObj) {
            this.$axios({
                method: "post",
                url,
                data: {},
            }).then((res) => {
                if (res.code == 200 && res.info) {
                    this[infoObj] = res.info;
                } else {
                    this.$message.error(res.message || "获取信息失败");
                }
            });
        },
        getDataOverview() {
            this.$axios({
                method: "post",
                url: this.$api.mainPage.queryAllNum,
                data: {},
            }).then((res) => {
                if (res.code == 200 && res.info) {
                    this.dataOverview = res.info;
                } else {
                    this.$message.error(res.message || "获取信息失败");
                }
            });
        },
        init() {
            this.getData(this.$api.mainPage.selectHardware, "hardware");  //1
            this.getData(this.$api.mainPage.selectService, "serviceData");   //1
            this.getData(this.$api.mainPage.selectAccess, "dateAccessList");  //1

            this.getDataWay = {
                dataType: "url",
                type: "post",
                data: this.$api.mainPage.selectServer,
                param: {},
            };  //1

            this.getData(this.$api.mainPage.queryAllNum, "dataOverview");  //2
            this.getData(this.$api.mainPage.selectRunProjectBySy, "runProjectList");  //2
            this.getData(this.$api.mainPage.selectRunTaskBySy, "runTaskList"); //2
            this.getData(this.$api.mainPage.selectRunProjectByState, "dataListA");  //2
            this.getData(this.$api.mainPage.selectRunTaskByState, "dataListB");  //2
            this.getData(this.$api.mainPage.selectEvaluationLevel, "dataListC");  //2
        },
        init2(){
            this.getData(this.$api.mainPage.queryAllNum, "dataOverview");  //2
            this.getData(this.$api.mainPage.selectRunProjectBySy, "runProjectList");  //2
            this.getData(this.$api.mainPage.selectRunTaskBySy, "runTaskList"); //2
            this.getData(this.$api.mainPage.selectRunProjectByState, "dataListA");  //2
            this.getData(this.$api.mainPage.selectRunTaskByState, "dataListB");  //2
            this.getData(this.$api.mainPage.selectEvaluationLevel, "dataListC");  //2
        },
    },
    mounted() {
        /* if (localStorage.getItem("Authorization")) {
            //this.init();
        }else{  //如果没有Authorization
            // this.$alert('用户信息过期，请重新登陆','提示',{
            //     confirmButtonText:'确定',
            //     callback: action => {
            //         let loginUrl = window.location.origin + '/login'
            //         window.location.href = loginUrl
            //     }
            // })
        } */
    },
};
</script>

<style lang='less' scoped>
.mainPagePanel {
    padding: 20px 20px 20px 0;

    .tabBox {
        padding: 10px 30px 0;
    }

    .myTabsBox {
        /deep/ .el-tabs {
            width: auto;
            margin: 0;

            .el-tabs__nav-scroll {
                &:after {
                    width: 100%;
                }
            }

        }

        /deep/.tabPaneA.el-tabs--top.el-tabs--card>.el-tabs__header .el-tabs__item:last-child {
            padding-right: 0;
        }
    }

    .boxContent {
        padding-bottom: 20px;

        .titlePanel {
            padding-bottom: 10px;
        }

        .listPanel {
            display: flex;
            flex-wrap: nowrap;
            color: @themeColor;

            li {
                flex: 1;
                display: flex;
                height: 10vh;
                padding: 10px 1%;
                margin-right: 3%;
                justify-content: space-around;
                align-items: center;

                span,
                i,
                b {
                    display: inline-block;
                    font-weight: normal;
                    font-style: normal;
                }

                b {
                    font-size: 90%;
                }

                i {
                    font-size: 150%;
                }

                &:last-child {
                    margin-right: 0;
                }
            }

            .colorA,
            .colorB,
            .colorC,
            .colorD,
            .colorE {
                span {
                    width: 15%;
                    height: 45%;
                }
            }

            .colorA {
                color: @themeColor;

                span {
                    // width: 36px;
                    // height: 38px;
                    background: url("../assets/common/image/index/hw1.png")
                        center center no-repeat;
                    background-size: contain;
                }
            }
            .colorB {
                color: #8479ff;

                span {
                    background: url("../assets/common/image/index/hw2.png")
                        center center no-repeat;
                    background-size: contain;
                }
            }
            .colorC {
                color: #ffc935;

                span {
                    background: url("../assets/common/image/index/hw3.png")
                        center center no-repeat;
                    background-size: contain;
                }
            }
            .colorD {
                color: #bf5bff;

                span {
                    background: url("../assets/common/image/index/hw4.png")
                        center center no-repeat;
                    background-size: contain;
                }
            }
            .colorE {
                color: #ff6161;

                span {
                    background: url("../assets/common/image/index/hw5.png")
                        center center no-repeat;
                    background-size: contain;
                }
            }
        }

        .listPanelB {
            li {
                display: flex;
                flex-direction: column;

                i,
                b {
                    display: block;
                    text-align: center;
                }
            }
        }

        .piesBox {
            display: flex;

            > div {
                flex: 1;
                width: 30%;
            }

            .title {
                padding: 10px 0;
                text-align: center;
                font-size: 16px;
                line-height: 1;
                font-weight: bold;
            }

            .shadowBoxB {
                margin: 0 50px;
            }

            .shadowBox {
                padding: 0;
            }
        }
    }

    .padTop20 {
        padding-top: 20px;
    }

    .padBot10 {
        padding-bottom: 10px;
    }

    /deep/ .el-tabs__item.is-active {
        color: @themeColor;
    }

    .chartABox {
        height: calc(80vh - 260px);
    }

    .chartBBox {
        height: calc(48vh - 165px);
        overflow: hidden;
    }

    .chartABox.shadowBox,
    .chartBBox.shadowBox {
        padding: 0;
    }

    .boxContentB {
        padding-bottom: 0;
    }

    .pieBox {
        height: calc(42vh - 165px);

        .shadowBox {
            padding: 0;
        }
    }

    .tabsA /deep/ .el-tabs__nav-wrap::after {
        background-color: @themeColor;
    }

    .tabsA /deep/ .el-tabs__active-bar {
        height: 4px;
    }
}
</style>