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-popover placement="right-end" :width="200" trigger="hover" effect="dark">
                            <template #reference>
                                <img :src="menu.img" alt="">
                            </template>
                            <div class="menuChildren">
                                <p style="color: #e3a043">{{menu.name}}:</p>
                                <p style="color: #cacaca;cursor: pointer;line-height: 50px;"
                                    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">
                            <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> -->
        <div class="mainSty">
            <div class="elmenuSty" :style="!swichTheme ? 'background: #000;' : 'background: #504bb5;'"
                v-if="isShowMenu">
                <ul class="menu-list">
                    <li class="menu-item" @click="isCollapseFn">
                        <img :src="menu_zk" alt="" v-if="isCollapse">
                        <img :src="menu_ss" alt="" v-else>
                    </li>
                </ul>
                <el-menu :default-active="$route.path" router :unique-opened="true" :collapse="isCollapse"
                    :collapse-transition="false" text-color="#fff" :background-color="!swichTheme ? '#000' : '#504bb5'"
                    active-text-color="#fff">
                    <!-- 引入组件 -->
                    <template v-for="menu in showMenuData">
                        <el-sub-menu :key="menu.index" :index="menu.index" v-if="menu.children"
                            :disabled="menu.index === '' ? true : false">
                            <!-- <img :src="menu.img"> -->
                            <template #title>
                                <!-- <i :class="menu.icon"></i> -->
                                <img :src="menu.img">
                                <span style="margin-left: 10px">{{menu.name}}</span>

                                <!-- <span slot="title">{{menu.name}}</span> -->
                            </template>
                            <!-- <menu-tree :menuData="menu.children"></menu-tree> -->
                            <el-menu-item-group v-for="(menuitem, index) in menu.children" :key="index">
                                <el-menu-item :index="menuitem.index">{{menuitem.name}}</el-menu-item>
                            </el-menu-item-group>
                        </el-sub-menu>
                        <el-menu-item :key="menu.index" :index="menu.index" :route="menu.index" v-else>
                            <!-- <i :class="menu.icon"></i> -->
                            <img :src="menu.img" alt="">
                            <template #title>
                                <span style="margin-left: 10px">{{menu.name}}</span>
                            </template>
                            <!-- <span slot="title">{{menu.name}}</span> -->
                        </el-menu-item>
                    </template>
                </el-menu>
            </div>
            <!-- :style="{ paddingLeft: fixed ? '65px' : 0 }"  :style="{ paddingLeft: isShowMenu ? '65px' : 0 }"-->
            <!-- :style="pagestyFn()" -->
            <div class="pageSty">
                <router-view />
            </div>
        </div>

    </div>
</template>

<script>
    import MenuTree from '@/components/menuTreeconfig.vue'
    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 report_zhbb from '@/assets/menuImg/report_zhbb.png'
    import report_yxqk from '@/assets/menuImg/report_yxqk.png'
    import report_fyfsdl from '@/assets/menuImg/report_fyfsdl.png'
    import report_fdscqk from '@/assets/menuImg/report_fdscqk.png'
    import report_pjfs from '@/assets/menuImg/report_pjfs.png'
    // 锁
    import pro_suo from '@/assets/menuImg/pro_suo.png'
    import pro_jie from '@/assets/menuImg/pro_jie.png'
    //收缩展开
    import menu_zk from '@/assets/menuImg/menu_zk.png'
    import menu_ss from '@/assets/menuImg/menu_ss.png'

    export default {
        components: {
            commonHeader,
            MenuTree
        },
        data() {
            return {
                showHeader: false,
                isShowMenu: false,
                isCollapse: true,
                showMenuData: [],
                proSuo: pro_suo,
                proJie: pro_jie,
                menu_zk: menu_zk,
                menu_ss: menu_ss,
                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: 'xinzuo',
                            index: '/intelligentReport/erp',
                        }, {
                            name: '吉山梁风电场',
                            nameEn: 'jiliangshan',
                            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: 'Memo',
                        index: '/intelligentReport/zhbb',
                        img: report_zhbb,
                        name: '国能陕西新能源公司综合报表'
                    },
                    {
                        icon: 'Eleme',
                        index: '/intelligentReport/yxqk',
                        img: report_yxqk,
                        name: '运行情况日报表',
                        children: [{
                            name: '左庄一期',
                            nameEn: 'zuozhuangyiqi',
                            index: '/intelligentReport/yxqk',
                        }, {
                            name: '左庄二期',
                            nameEn: 'zuozhuangerqi',
                            index: '/intelligentReport/yxqk',
                        }, {
                            name: '新庄一期',
                            nameEn: 'xinzhuangyiqi',
                            index: '/intelligentReport/yxqk',
                        }, {
                            name: '新庄二期',
                            nameEn: 'xinzhuangerqi',
                            index: '/intelligentReport/yxqk',
                        }]
                    },
                    {
                        icon: 'Eleme',
                        index: '/intelligentReport/fyfsdl',
                        img: report_fyfsdl,
                        name: '分月分时电量统计',
                        children: [{
                            name: '新庄风电场',
                            nameEn: 'xinzhuang',
                            index: '/intelligentReport/fyfsdl',
                        }, {
                            name: '吉山梁风电场',
                            nameEn: 'jiliangshan',
                            index: '/intelligentReport/fyfsdl',
                        }, {
                            name: '左庄风电场',
                            nameEn: 'zuozhuang',
                            index: '/intelligentReport/fyfsdl',
                        }, {
                            name: '繁食沟风电场',
                            nameEn: 'fanshigou',
                            index: '/intelligentReport/fyfsdl',
                        }, {
                            name: '草山梁风电场',
                            nameEn: 'caoshanliang',
                            index: '/intelligentReport/fyfsdl',
                        }, {
                            name: '雷家山风电场',
                            nameEn: 'leijiashan',
                            index: '/intelligentReport/fyfsdl',
                        }]
                    },
                    {
                        icon: 'Eleme',
                        index: '/intelligentReport/fdscqk',
                        img: report_fdscqk,
                        name: '发电生产情况快报表',
                        children: [{
                            name: '新左风电场',
                            nameEn: 'xinzuo',
                            index: '/intelligentReport/fdscqk',
                        }, {
                            name: '吉山梁风电场',
                            nameEn: 'jiliangshan',
                            index: '/intelligentReport/fdscqk',
                        }, {
                            name: '繁食沟风电场',
                            nameEn: 'fanshigou',
                            index: '/intelligentReport/fdscqk',
                        }, {
                            name: '草山梁风电场',
                            nameEn: 'caoshanliang',
                            index: '/intelligentReport/fdscqk',
                        }, {
                            name: '雷家山风电场',
                            nameEn: 'leijiashan',
                            index: '/intelligentReport/fdscqk',
                        }]
                    },
                    {
                        icon: 'Eleme',
                        index: '/intelligentReport/pjfs',
                        img: report_pjfs,
                        name: '集控中心日平均风速统计表',
                        children: [{
                            name: '新庄风电场',
                            nameEn: 'xinzhuang',
                            index: '/intelligentReport/pjfs',
                        }, {
                            name: '吉山梁风电场',
                            nameEn: 'jiliangshan',
                            index: '/intelligentReport/pjfs',
                        }, {
                            name: '左庄风电场',
                            nameEn: 'zuozhuang',
                            index: '/intelligentReport/pjfs',
                        }, {
                            name: '繁食沟风电场',
                            nameEn: 'fanshigou',
                            index: '/intelligentReport/pjfs',
                        }, {
                            name: '草山梁风电场',
                            nameEn: 'caoshanliang',
                            index: '/intelligentReport/pjfs',
                        }, {
                            name: '雷家山风电场',
                            nameEn: 'leijiashan',
                            index: '/intelligentReport/pjfs',
                        }]
                    },
                    {
                        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 = '#0F0F0F'
                } else {
                    document.getElementById('app').style.background = '#5473E8'
                }
                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: {
            isCollapseFn() {
                this.isCollapse = !this.isCollapse
            },
            pagestyFn() {
                let str = ''
                if (this.isCollapse) {
                    str = 'width: 96.5%;padding-left: 3.5%'
                } else {
                    str = 'width: 90%;padding-left: 10%'
                }
                return str
            },
            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 = '#0F0F0F'
                } else {
                    document.getElementById('app').style.background = '#5473E8'
                }
                // 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 {
                // :hover {
                //     color: #4b55ae;
                // }
            }
        }
    }
</style>
<style lang="less">
    .windLife {
        height: 100%;

        .mainSty {
            display: flex;


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

            .elmenuSty {
                height: 100vh;

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

                .menu-list {
                    width: 100%;
                    height: 40px;
                    line-height: 40px;

                    .menu-item {
                        height: 40px;
                        line-height: 40px;
                        display: flex;
                        justify-content: center;
                        align-items: center;


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

                .el-menu {
                    min-width: 66px;
                    border-right: transparent;
                }
            }

            .pageSty {
                width: 100%;
                height: 100vh;
            }

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

    }


    @import "./assets/css/main.css";
    @import "./assets/css/eleCss/index.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";
        @import "./assets/css/eleCss/el-popper.less";

    }

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

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


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