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>
        <!-- :class="!fixed ? 'menuBs' : ''" v-if="isShowMenu" -->
        <div class="menu-body" @mouseenter="showMenu" v-if="isShowMenu" @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" v-if="menu.children">
                        <!-- <el-tooltip class="item" effect="dark" :content="menu.name" placement="right"
                            :enterable="false">
                            <img :src="menu.img" alt="">
                        </el-tooltip> -->
                        <el-popover placement="right-end" :width="200" trigger="hover" effect="dark">
                            <template #reference>
                                <img :src="menu.img" alt="">
                            </template>
                            <div class="menuChildren">
                                <p v-for="(it, index) in menu.children" :key="index"
                                    @click="openReportDetail(it.index, it.nameEn)">{{it.name}}</p>
                            </div>
                        </el-popover>
                    </router-link>
                    <router-link :to="menu.index" v-else>
                        <el-tooltip class="item" effect="dark" :content="menu.name" placement="right"
                            :enterable="false">
                            <!-- <component :is="menu.icon">
                            </component> -->
                            <!-- <img :src="menu.chImg ? menu.imgEn : menu.img" @mouseenter="imgEnter(menu)" @mouseleave="imgLeave(menu)" alt="" > -->
                            <img :src="menu.img" alt="">
                        </el-tooltip>
                    </router-link>
                </li>
                <!-- <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 class="lockpage" @click="handleClickFixed">
                    <img :src="proJie" v-if="fixed" alt="">
                    <img :src="proSuo" v-else alt="">
                </li> -->
            </ul>
        </div>
        <!-- :style="{ paddingLeft: fixed ? '65px' : 0 }" -->
        <div :style="{ paddingLeft: isShowMenu ? '65px' : 0 }">
            <router-view />
        </div>

    </div>
</template>

<script>
    import commonHeader from '@/components/commonHeaders.vue'
    // 发电能力分析
    import gener_agcfx from '@/assets/menuImg/gener_agcfx.png'
    import gener_dfpcfx from '@/assets/menuImg/gener_dfpcfx.png'
    import gener_fdsjcl from '@/assets/menuImg/gener_fdsjcl.png'
    import gener_fdsjzb from '@/assets/menuImg/gener_fdsjzb.png'
    import gener_fxbg from '@/assets/menuImg/gener_fxbg.png'
    import gener_glqxnhfx from '@/assets/menuImg/gener_glqxnhfx.png'
    import gener_jjjfx from '@/assets/menuImg/gener_jjjfx.png'
    import gener_mrlfx from '@/assets/menuImg/gener_mrlfx.png'
    import gener_qxpclfx from '@/assets/menuImg/gener_qxpclfx.png'
    import gener_ssdlfx from '@/assets/menuImg/gener_ssdlfx.png'
    import gener_wdyglfx from '@/assets/menuImg/gener_wdyglfx.png'
    import gener_wgxzfx from '@/assets/menuImg/gener_wgxzfx.png'
    // 功率预测
    import power_dlyc from '@/assets/menuImg/power_dlyc.png'
    import power_glyc from '@/assets/menuImg/power_glyc.png'
    import power_gy from '@/assets/menuImg/power_gy.png'
    import power_qjgl from '@/assets/menuImg/power_qjgl.png'
    import power_tjhz from '@/assets/menuImg/power_tjhz.png'
    import power_tqyb from '@/assets/menuImg/power_tqyb.png'
    // 智能报表
    import report_bbjb from '@/assets/menuImg/report_bbjb.png'
    import report_bbsb from '@/assets/menuImg/report_bbsb.png'
    import report_czzybb from '@/assets/menuImg/report_czzybb.png'
    import report_erp from '@/assets/menuImg/report_erp.png'
    import report_gkjlb from '@/assets/menuImg/report_gkjlb.png'
    // 锁
    import pro_suo from '@/assets/menuImg/pro_suo.png'
    import pro_jie from '@/assets/menuImg/pro_jie.png'

    export default {
        components: {
            commonHeader,
        },
        data() {
            return {
                showHeader: false,
                isShowMenu: false,
                showMenuData: [],
                proSuo: pro_suo,
                proJie: pro_jie,
                powerPreDatas: [{
                        index: '/powerPrediction/index',
                        icon: 'Coin',
                        img: power_gy,
                        name: '概要'
                    },
                    {
                        index: '/powerPrediction/panoramicPower',
                        icon: 'DataBoard',
                        img: power_qjgl,
                        name: '全景功率'
                    },
                    {
                        index: '/powerPrediction/power',
                        icon: 'DataAnalysis',
                        img: power_glyc,
                        name: '功率预测'
                    },
                    {
                        index: '/powerPrediction/batteryDiviner',
                        icon: 'DataLine',
                        img: power_dlyc,
                        name: '电量预测'
                    },
                    {
                        index: '/powerPrediction/weather',
                        icon: 'Sunrise',
                        img: power_tqyb,
                        name: '天气预报'
                    },
                    {
                        index: '/powerPrediction/statisticalSummary',
                        icon: 'Tickets',
                        img: power_tjhz,
                        name: '统计汇总'
                    },
                ],
                intelligentReportDatas: [{
                        icon: 'ScaleToOriginal',
                        index: '/intelligentReport/gkjlb',
                        img: report_gkjlb,
                        name: '关口计量表',
                        children: [{
                            name: '新庄风电场',
                            nameEn: 'xinzhuang',
                            index: '/intelligentReport/gkjlb',
                        }, {
                            name: '吉山梁风电场',
                            nameEn: 'jiliangshan',
                            index: '/intelligentReport/gkjlb',
                        }, {
                            name: '左庄风电场',
                            nameEn: 'zuozhuang',
                            index: '/intelligentReport/gkjlb',
                        }, {
                            name: '繁食沟风电场',
                            nameEn: 'fanshigou',
                            index: '/intelligentReport/gkjlb',
                        }, {
                            name: '草山梁风电场',
                            nameEn: 'caoshanliang',
                            index: '/intelligentReport/gkjlb',
                        }, {
                            name: '雷家山风电场',
                            nameEn: 'leijiashan',
                            index: '/intelligentReport/gkjlb',
                        }]
                    },
                    {
                        icon: 'Eleme',
                        index: '/intelligentReport/erp',
                        img: report_erp,
                        name: 'ERP',
                        children: [{
                            name: '新庄风电场',
                            nameEn: 'xinzhuang',
                            index: '/intelligentReport/erp',
                        }, {
                            name: '吉山梁风电场',
                            nameEn: 'jiliangshan',
                            index: '/intelligentReport/erp',
                        }, {
                            name: '左庄风电场',
                            nameEn: 'zuozhuang',
                            index: '/intelligentReport/erp',
                        }, {
                            name: '繁食沟风电场',
                            nameEn: 'fanshigou',
                            index: '/intelligentReport/erp',
                        }, {
                            name: '草山梁风电场',
                            nameEn: 'caoshanliang',
                            index: '/intelligentReport/erp',
                        }, {
                            name: '雷家山风电场',
                            nameEn: 'leijiashan',
                            index: '/intelligentReport/erp',
                        }]
                    },
                    {
                        icon: 'Memo',
                        index: '/intelligentReport/czzyb',
                        img: report_czzybb,
                        name: '场站自由报表'
                    },
                    {
                        icon: 'Finished',
                        index: '/intelligentReport/reporting',
                        img: report_bbsb,
                        name: '报表上报'
                    },
                    {
                        icon: 'Odometer',
                        index: '/intelligentReport/scriptgeneration',
                        img: report_bbjb,
                        name: '报表脚本'
                    },
                ],
                generatingCapDatas: [{
                        icon: 'Coin',
                        index: '/generatingCap/dataFilter/prepare',
                        img: gener_fdsjzb,
                        name: '风电数据准备'
                    }, {
                        icon: 'DataAnalysis',
                        index: '/generatingCap/dataFilter/process',
                        img: gener_fdsjcl,
                        name: '风电数据处理'
                    }, {
                        icon: 'Operation',
                        index: '/generatingCap/dataAnalysis/combine',
                        img: gener_glqxnhfx,
                        name: '功率曲线拟合分析'
                    }, {
                        icon: 'ScaleToOriginal',
                        index: '/generatingCap/dataAnalysis/rateAnalysis',
                        img: gener_dfpcfx,
                        name: '对风偏差分析'
                    }, {
                        icon: 'DataLine',
                        index: '/generatingCap/dataAnalysis/lineAnalysis',
                        img: gener_qxpclfx,
                        name: '曲线偏差率分析'
                    }, {
                        icon: 'Odometer',
                        index: '/generatingCap/dataAnalysis/hotAnalysis',
                        img: gener_wdyglfx,
                        name: '温度与功率分析'
                    }, {
                        icon: 'Finished',
                        index: '/generatingCap/dataAnalysis/windAnalysis',
                        img: gener_ssdlfx,
                        name: '损失电量分析'
                    }, {
                        icon: 'Coordinate',
                        index: '/generatingCap/dataAnalysis/posAnalysis',
                        img: gener_wgxzfx,
                        name: '微观选址分析'
                    }, {
                        icon: 'SetUp',
                        index: '/generatingCap/dataAnalysis/spaceAnalysis',
                        img: gener_mrlfx,
                        name: '毛容量分析'
                    },
                    {
                        icon: 'Suitcase',
                        index: '/generatingCap/dataAnalysis/angleAnalysis',
                        img: gener_jjjfx,
                        name: '浆距角分析'
                    }, {
                        icon: 'Monitor',
                        index: '/generatingCap/dataAnalysis/agcAnalysis',
                        img: gener_agcfx,
                        name: 'AGC曲线偏差分析'
                    },
                    {
                        icon: 'Files',
                        index: '/generatingCap/dataAnalysis/analysisReport',
                        img: gener_fxbg,
                        imgEn: gener_jjjfx,
                        name: '分析报告'
                    },
                ],
                memuCloseTimeout: null,
                fixed: false,
                swichTheme: false,
                // swichTheme: true // 默认白色版本
            }
        },
        watch: {
            $route: {
                handler: function (route) {
                    this.showHeader = route.path === '/login' ? false : true
                    this.isShowMenu = route.path === '/login' || route.path === '/home' ? false : true
                },
                immediate: true
            }
        },
        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
            } else {
                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);
            },
            openReportDetail(index, name) {
                this.$router.push({
                    // path: "/home"
                    path: index,
                    query: {
                        name: name
                    }
                })
            },
            imgEnter(menu) {
                menu.chImg = false
                if (menu.imgEn) {
                    menu.chImg = true
                }
            },
            imgLeave(menu) {
                menu.chImg = false
            },
            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" scoped>
    .el-popover {
        .menuChildren {
            p {
                line-height: 40px;
                cursor: pointer;

                // :hover {
                //     color: #4b55ae;
                // }
            }
        }
    }
</style>
<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;

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

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

        .toolSty {
            .el-popper {
                width: 50% !important;
            }
        }
    }


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