<template>
    <div class="mainPagePanel">
        <div class="myTabsBox">
            <el-tabs 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-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>120</i>
                    </li>
                    <li class="shadowBox colorB">
                        <span></span>
                        <b>内存使用率</b>
                        <i>18%</i>
                    </li>
                    <li class="shadowBox colorC">
                        <span></span>
                        <b>磁盘占用率</b>
                        <i>24%</i>
                    </li>
                    <li class="shadowBox colorD">
                        <span></span>
                        <b>CPU使用率</b>
                        <i>36%</i>
                    </li>
                    <li class="shadowBox colorE">
                        <span></span>
                        <b>GPU使用率</b>
                        <i>63%</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>369</i>
                    </li>
                    <li class="shadowBox">
                        <b>当前在线人数</b>
                        <i>18</i>
                    </li>
                    <li class="shadowBox">
                        <b>仿真节点数量</b>
                        <i>819</i>
                    </li>
                    <li class="shadowBox">
                        <b>仿真软件license占用数量</b>
                        <i>612</i>
                    </li>
                    <li class="shadowBox">
                        <b>动力学软件license占用数量</b>
                        <i>423</i>
                    </li>
                </ul>
            </div>

            <div class="boxContent">
                <div class="titlePanel">
                    <div class="titlePanelBor">日访问人数</div>
                </div>
                <div class="chartABox shadowBox">
                    <line-chart1 id="lineA"></line-chart1>
                </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.SceneNum || 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.a || 0 }}</i>
                    </li>
                    <li class="shadowBox">
                        <b>当前并发数量</b>
                        <i>{{ dataOverview.b || 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-chartA
                                    id="runProjectLine"
                                    :dataList="runProjectList"
                                ></line-chartA>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="运行任务" name="2">
                            <div class="chartBBox shadowBox">
                                <line-chartA
                                    id="runTaskLine"
                                    :dataList="runTaskList"
                                ></line-chartA>
                            </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-chartA
                                id="mainPagePieA"
                                :dataList="dataListA"
                                stateName="nowRunState"
                                seriesName="项目运行状态统计"
                            ></pie-chartA>
                        </div>
                    </div>
                    <div class="shadowBox shadowBoxB">
                        <div class="title">任务运行状态统计</div>
                        <div class="pieBox">
                            <pie-chartA
                                id="mainPagePieB"
                                :dataList="dataListB"
                                stateName="runState"
                                seriesName="任务运行状态统计"
                            ></pie-chartA>
                        </div>
                    </div>
                    <div class="shadowBox">
                        <div class="title">评测等级分布</div>
                        <div class="pieBox">
                            <pie-chartA
                                id="mainPagePieC"
                                :dataList="dataListC"
                                stateName="evaluationLevel"
                                seriesName="评测等级分布"
                            ></pie-chartA>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import toolbarTab from "@/components/toolbar/toolbarTab";
import tableList from "@/components/grid/TableList";
import LineChart from "../components/echarts/lineChart";
import LineChart1 from "../components/echarts/lineChart1";
import lineChartA from "../components/echarts/lineChartA";
import LineChart3 from "../components/echarts/lineChart3";
import pieChart from "../components/echarts/pieChart";
import pieChartA from "../components/echarts/pieChartA";
import pieChart2 from "../components/echarts/pieChart2";

export default {
    name: "mainPage", // 首页
    components: {
        toolbarTab,
        tableList,
        LineChart,
        LineChart1,
        lineChartA,
        LineChart3,
        pieChart,
        pieChartA,
        pieChart2,
    },
    data() {
        return {
            activeName: "1",
            activitedPageNumA: "1",
            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: "id",
                },
                {
                    label: "服务器地址",
                    prop: "ktName",
                },
                {
                    label: "服务器类型",
                    prop: "jbSource",
                },
                {
                    label: "CPU使用率",
                    prop: "startDateStr",
                },
                {
                    label: "内存使用率",
                    prop: "endDateStr",
                },
                {
                    label: "可用内存",
                    prop: "projectDateStr",
                },
                {
                    label: "磁盘使用率",
                    prop: "cgInfos",
                },
                {
                    label: "剩余容量",
                    prop: "endDateStr1",
                },
                {
                    label: "执行任务数量",
                    prop: "projectDateStr1",
                },
            ],
            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",
                firstRequest: false,
                data: [
                    {
                        id: 1,
                        ktName: "127.0.0.1",
                        jbSource: "收到就好付款时",
                        startDateStr: "12%",
                        endDateStr: "32%",
                        projectDateStr: "35",
                        cgInfos: "48%",
                        endDateStr1: "50",
                        projectDateStr1: "42",
                    },
                    {
                        id: 2,
                        ktName: "127.0.0.1",
                        jbSource: "收付款时间的回复可",
                        startDateStr: "1%",
                        endDateStr: "2%",
                        projectDateStr: "3",
                        cgInfos: "24%",
                        endDateStr1: "15",
                        projectDateStr1: "6",
                    },
                    {
                        id: 3,
                        ktName: "127.0.0.1",
                        jbSource: "收间的回复可",
                        startDateStr: "12%",
                        endDateStr: "24%",
                        projectDateStr: "13",
                        cgInfos: "4%",
                        endDateStr1: "5",
                        projectDateStr1: "16",
                    },
                ],
                // data: this.$api.scientificStatistics.typeProjectStatistics,
                param: {},
            },
            // 数据概览
            dataOverview: {
                SceneNum: 0,
                ConfigTotal: 0,
                fileNum: 0,
                pathNum: 0,
                a: 0,
                b: 0,
            },
            // 运行项目
            runProjectList: [],
            // 运行任务
            runTaskList: [],
            dataListA: [],
            dataListB: [],
            dataListC: [],
        };
    },

    computed: {},

    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 || "获取信息失败");
                }
            });
        },
        getLineData() {
            this.$axios({
                method: "post",
                url: this.$api.mainPage.selectRunProjectBySy,
                data: {},
            }).then((res) => {
                if (res.code == 200 && res.info) {
                    // this.data1 = res.info;
                } else {
                    this.$message.error(res.message || "获取信息失败");
                }
            });
        },
    },

    mounted() {
        this.getData(this.$api.mainPage.queryAllNum, "dataOverview");
        this.getData(this.$api.mainPage.selectRunProjectBySy, "runProjectList");
        this.getData(this.$api.mainPage.selectRunTaskBySy, "runTaskList");
        this.getData(this.$api.mainPage.selectRunProjectByState, "dataListA");
        this.getData(this.$api.mainPage.selectRunTaskByState, "dataListB");
        this.getData(this.$api.mainPage.selectEvaluationLevel, "dataListC");
    },
};
</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%;
                }
            }
        }
    }

    .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>