windLifecontrolPro/src/App.vue

<!--
 * @Date: 2023-06-18 10:09:15
 * @LastEditors: zhubj
 * @LastEditTime: 2023-06-19 17:04:11
 * @Description: 头部注释
 * @FilePath: \own-vue3-vuecli-template\src\App.vue
-->
<template>
    <div class="windLife" :class="!swichTheme ? 'themeDark' : 'themeLight'">
        <common-header v-if="showHeader" @headerName="headerName" @swichFn="swichFn"></common-header>
        <div class="menu-body" :class="!fixed ? 'menuBs' : ''" v-if="isShowMenu" @mouseenter="showMenu"
            @mouseleave="hideMenu">
            <ul class="menu-list">
                <li class="menu-item" v-for="(menu, index) in showMenuData" :key="index"
                    @click="handleNodeClick(menu.index)">
                    <router-link :to="menu.index">
                        <el-tooltip class="item" effect="dark" :content="menu.name" placement="right"
                            :enterable="false">
                            <component :is="menu.icon">
                            </component>
                        </el-tooltip>
                    </router-link>
                </li>
                <li class="lockpage" @click="handleClickFixed">
                    <el-icon v-if="fixed" style="width:25px;height:25px">
                        <Lock />
                    </el-icon>
                    <el-icon v-else style="width:25px;height:25px">
                        <Unlock />
                    </el-icon>
                </li>
            </ul>
        </div>
        <div :style="{ paddingLeft: fixed ? '65px' : 0 }">
            <router-view />
        </div>

    </div>
</template>

<script>
    import commonHeader from '@/components/commonHeaders.vue'
    export default {
        components: {
            commonHeader,
        },
        data() {
            return {
                showHeader: false,
                showHeader: false,
                loading: true,
                isShowMenu: false,
                isShowMenuDiv: false,
                isFixed: false,
                showMenuData: [],
                powerPreDatas: [{
                        index: '/powerPrediction/index',
                        icon: 'Coin',
                        name: '概要'
                    },
                    {
                        index: '/powerPrediction/panoramicPower',
                        icon: 'DataBoard',
                        name: '全景功率'
                    },
                    {
                        index: '/powerPrediction/power',
                        icon: 'DataAnalysis',
                        name: '功率预测'
                    },
                    {
                        index: '/powerPrediction/batteryDiviner',
                        icon: 'DataLine',
                        name: '电量预测'
                    },
                    {
                        index: '/powerPrediction/weather',
                        icon: 'Sunrise',
                        name: '天气预报'
                    },
                    {
                        index: '/powerPrediction/statisticalSummary',
                        icon: 'Tickets',
                        name: '统计汇总'
                    },
                ],
                intelligentReportDatas: [{
                        icon: 'ScaleToOriginal',
                        index: '/intelligentReport/gkjlb',
                        name: '关口计量表'
                    },
                    {
                        icon: 'Eleme',
                        index: '/intelligentReport/erp',
                        name: 'ERP'
                    },
                    {
                        icon: 'Memo',
                        index: '/intelligentReport/czzyb',
                        name: '场站自由报表'
                    },
                    {
                        icon: 'Finished',
                        index: '/intelligentReport/reporting',
                        name: '报表上报'
                    },
                    {
                        icon: 'Odometer',
                        index: '/intelligentReport/scriptgeneration',
                        name: '报表脚本'
                    },
                ],
                generatingCapDatas: [{
                    icon: 'Coin',
                    index: '/generatingCap/dataFilter/prepare',
                    name: '风电数据准备'
                }, {
                    icon: 'DataAnalysis',
                    index: '/generatingCap/dataFilter/process',
                    name: '风电数据处理'
                }, {
                    icon: 'Operation',
                    index: '/generatingCap/dataAnalysis/combine',
                    name: '功率曲线拟合分析'
                }, {
                    icon: 'ScaleToOriginal',
                    index: '/generatingCap/dataAnalysis/rateAnalysis',
                    name: '对风偏差分析'
                }, {
                    icon: 'DataLine',
                    index: '/generatingCap/dataAnalysis/lineAnalysis',
                    name: '曲线偏差率分析'
                }, {
                    icon: 'Odometer',
                    index: '/generatingCap/dataAnalysis/hotAnalysis',
                    name: '温度与功率分析'
                }, {
                    icon: 'Finished',
                    index: '/generatingCap/dataAnalysis/windAnalysis',
                    name: '损失电量分析'
                }, {
                    icon: 'Coordinate',
                    index: '/generatingCap/dataAnalysis/posAnalysis',
                    name: '微观选址分析'
                }, {
                    icon: 'SetUp',
                    index: '/generatingCap/dataAnalysis/spaceAnalysis',
                    name: '毛容量分析'
                }, {
                    icon: 'Suitcase',
                    index: '/generatingCap/dataAnalysis/angleAnalysis',
                    name: '浆距角分析'
                }, {
                    icon: 'Monitor',
                    index: '/generatingCap/dataAnalysis/agcAnalysis',
                    name: 'AGC曲线偏差分析'
                }, {
                    icon: 'Files',
                    index: '/generatingCap/dataAnalysis/analysisReport',
                    name: '分析报告'
                }, ],
                memuCloseTimeout: null,
                fixed: false,
                swichTheme: false
            }
        },
        watch: {
            $route: {
                handler: function (route) {
                    this.showHeader = route.path === '/login' ? false : true
                    this.isShowMenu = route.path === '/login' || route.path === '/home' ? false : true
                },
                immediate: true
            }
        },
        created() {
            debugger
        },
        mounted() {
            if (!JSON.parse(window.sessionStorage.getItem('theme'))) {
                document.getElementById('app').style.background = '#040c0b'
            } else {
                this.swichTheme = JSON.parse(window.sessionStorage.getItem('theme'))
                if (!this.swichTheme) {
                    document.getElementById('app').style.background = '#040c0b'
                } else {
                    document.getElementById('app').style.background =
                        '-webkit-gradient(linear, 0% 0%, 0% 100%, from(#373590), to(#373590), color-stop(0.2, #645fef), color-stop(0.8, #645fef))'
                }
                this.$emit('swichFn', this.switchTheme)
            }
            this.fixed = window.sessionStorage.getItem('menufixed')
            this.isShowMenu = window.sessionStorage.getItem('isShowMenu')

            // if (window.sessionStorage.getItem('headerRoute')) {
            //     let str = window.sessionStorage.getItem('headerRoute')
            let str = window.location.href
            if (str.indexOf('powerPrediction') > -1) {
                this.showMenuData = this.powerPreDatas
            } else if (str.indexOf('intelligentReport') > -1) {
                this.showMenuData = this.intelligentReportDatas
            } else if (str.indexOf('generatingCap') > -1) {
                this.showMenuData = this.generatingCapDatas
            }
            // }
        },
        methods: {
            headerName(name) {
                this.showMenuData = []
                if (name === '功率预测') {
                    this.showMenuData = this.powerPreDatas
                } else if (name === '智能报表') {
                    this.showMenuData = this.intelligentReportDatas
                } else if (name === '发电能力分析') {
                    this.showMenuData = this.generatingCapDatas
                }
            },
            swichFn(val) {
                this.swichTheme = val
                if (!this.swichTheme) {
                    document.getElementById('app').style.background = '#040c0b'
                } else {
                    document.getElementById('app').style.background =
                        '-webkit-gradient(linear, 0% 0%, 0% 100%, from(#373590), to(#373590), color-stop(0.2, #645fef), color-stop(0.8, #645fef))'
                }
                // this.$router.go(0);
            },
            showMenu() {
                if (!this.fixed) {
                    this.isShowMenu = true;
                    window.sessionStorage.setItem('isShowMenu', this.isShowMenu)
                    clearTimeout(this.memuCloseTimeout);
                    this.memuCloseTimeout = null;
                }
            },
            hideMenu() {
                if (!this.fixed) {
                    this.memuCloseTimeout = setTimeout(() => {
                        this.isShowMenu = true;
                        window.sessionStorage.setItem('isShowMenu', this.isShowMenu)
                    }, 500);
                }
            },
            handleNodeClick(index, indexPath) {
                this.$router.push({
                    path: index
                })
            },
            handleClickFixed() {
                this.fixed = !this.fixed
                window.sessionStorage.setItem('menufixed', JSON.stringify(this.fixed))
                if (this.fixed) {
                    this.isShowMenu = true
                    window.sessionStorage.setItem('isShowMenu', this.isShowMenu)
                }
            }
        }
    }
</script>

<style lang="less">
    .windLife {
        height: 100%;

        .menu-body {
            position: absolute;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;

            flex: 0 0 63px;
            width: 63px;
            height: calc(100% - 60px);
            top: 60px;
            background-color: fade(#21192a, 75%);
            z-index: 2002;


            &:hover {
                opacity: 1;
                transition: opacity 0.2s;
                transition-timing-function: ease-out;
                transform: translate(0);
            }

            .menu-list {
                margin: 0;
                padding: 0;
                list-style: none;

                .menu-item {
                    display: flex;
                    text-align: center;
                    line-height: 2;
                    padding: 12px 0;
                    width: 25px;
                    height: 25px;

                    .el-tooltip__trigger {
                        color: #fff;
                    }

                    a {
                        display: flex;
                        width: 100%;
                        height: 100%;
                        font-size: 14px;
                        text-decoration: unset;
                        white-space: nowrap;
                    }

                    &.active {
                        background: #323e70;
                    }

                    &+.menu-item {
                        border-top: 1px solid fade(#606769, 40);
                    }
                }
            }

            .lockpage {
                position: absolute;
                bottom: 20px;

                .el-icon {
                    color: #fff;

                    svg {
                        width: 25px;
                        height: 25px;
                    }
                }
            }
        }

        .menuBs {
            opacity: 0;
            transition: opacity 0.2s;
            transition-timing-function: ease-in;
        }
    }

    @import "./assets/css/main.css";
    @import "./assets/css/eleCss/index.less";
    @import "./assets/css/eleCss/el-popper.less";

    .themeDark {
        @import "./assets/css/eleCss/el-dialogB.less";
        @import "./assets/css/eleCss/el-tableB.less";
        @import "./assets/css/eleCss/el-inputB.less";
        @import "./assets/css/eleCss/el-treeB.less";
    }

    .themeLight {
        @import "./assets/css/eleCss/el-dialogW.less";
        @import "./assets/css/eleCss/el-treeW.less";
    }


    // #app {
    //     background: #040c0b;
    // }
</style>