|
@@ -9,21 +9,19 @@
|
|
|
<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">
|
|
|
+ <!-- <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"
|
|
|
+ <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>
|
|
@@ -31,34 +29,68 @@
|
|
|
<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">
|
|
|
+ <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">
|
|
|
+ </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 />
|
|
|
+ </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="proSuo" alt=""></li>
|
|
|
+ </ul>
|
|
|
+ <el-menu :default-active="$route.path" router :unique-opened="true" :collapse="isCollapse"
|
|
|
+ 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-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'
|
|
@@ -86,6 +118,11 @@
|
|
|
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'
|
|
@@ -93,11 +130,13 @@
|
|
|
export default {
|
|
|
components: {
|
|
|
commonHeader,
|
|
|
+ MenuTree
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
showHeader: false,
|
|
|
isShowMenu: false,
|
|
|
+ isCollapse: true,
|
|
|
showMenuData: [],
|
|
|
proSuo: pro_suo,
|
|
|
proJie: pro_jie,
|
|
@@ -175,18 +214,14 @@
|
|
|
img: report_erp,
|
|
|
name: 'ERP',
|
|
|
children: [{
|
|
|
- name: '新庄风电场',
|
|
|
- nameEn: 'xinzhuang',
|
|
|
+ name: '新左风电场',
|
|
|
+ nameEn: 'xinzuo',
|
|
|
index: '/intelligentReport/erp',
|
|
|
}, {
|
|
|
name: '吉山梁风电场',
|
|
|
nameEn: 'jiliangshan',
|
|
|
index: '/intelligentReport/erp',
|
|
|
}, {
|
|
|
- name: '左庄风电场',
|
|
|
- nameEn: 'zuozhuang',
|
|
|
- index: '/intelligentReport/erp',
|
|
|
- }, {
|
|
|
name: '繁食沟风电场',
|
|
|
nameEn: 'fanshigou',
|
|
|
index: '/intelligentReport/erp',
|
|
@@ -207,6 +242,124 @@
|
|
|
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,
|
|
@@ -305,10 +458,9 @@
|
|
|
} else {
|
|
|
this.swichTheme = JSON.parse(window.sessionStorage.getItem('theme'))
|
|
|
if (!this.swichTheme) {
|
|
|
- document.getElementById('app').style.background = '#040c0b'
|
|
|
+ document.getElementById('app').style.background = '#0F0F0F'
|
|
|
} 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))'
|
|
|
+ document.getElementById('app').style.background = '#5473E8'
|
|
|
}
|
|
|
this.$emit('swichFn', this.switchTheme)
|
|
|
}
|
|
@@ -330,6 +482,18 @@
|
|
|
// }
|
|
|
},
|
|
|
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 === '功率预测') {
|
|
@@ -343,10 +507,9 @@
|
|
|
swichFn(val) {
|
|
|
this.swichTheme = val
|
|
|
if (!this.swichTheme) {
|
|
|
- document.getElementById('app').style.background = '#040c0b'
|
|
|
+ document.getElementById('app').style.background = '#0F0F0F'
|
|
|
} 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))'
|
|
|
+ document.getElementById('app').style.background = '#5473E8'
|
|
|
}
|
|
|
// this.$router.go(0);
|
|
|
},
|
|
@@ -405,9 +568,6 @@
|
|
|
.el-popover {
|
|
|
.menuChildren {
|
|
|
p {
|
|
|
- line-height: 40px;
|
|
|
- cursor: pointer;
|
|
|
-
|
|
|
// :hover {
|
|
|
// color: #4b55ae;
|
|
|
// }
|
|
@@ -419,105 +579,152 @@
|
|
|
.windLife {
|
|
|
height: 100%;
|
|
|
|
|
|
- .menu-body {
|
|
|
- position: absolute;
|
|
|
+ .mainSty {
|
|
|
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;
|
|
|
|
|
|
+ .menu-body {
|
|
|
+ position: absolute;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
|
|
|
- &:hover {
|
|
|
- opacity: 1;
|
|
|
- transition: opacity 0.2s;
|
|
|
- transition-timing-function: ease-out;
|
|
|
- transform: translate(0);
|
|
|
- }
|
|
|
+ flex: 0 0 63px;
|
|
|
+ width: 63px;
|
|
|
+ height: calc(100% - 60px);
|
|
|
+ top: 60px;
|
|
|
+ background-color: fade(#21192a, 75%);
|
|
|
+ z-index: 2002;
|
|
|
|
|
|
- .menu-list {
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
- list-style: none;
|
|
|
|
|
|
- img {
|
|
|
- width: 25px;
|
|
|
- height: 25px;
|
|
|
+ &:hover {
|
|
|
+ opacity: 1;
|
|
|
+ transition: opacity 0.2s;
|
|
|
+ transition-timing-function: ease-out;
|
|
|
+ transform: translate(0);
|
|
|
}
|
|
|
|
|
|
- .menu-item {
|
|
|
- display: flex;
|
|
|
- text-align: center;
|
|
|
- line-height: 2;
|
|
|
- padding: 12px 0;
|
|
|
- width: 25px;
|
|
|
- height: 25px;
|
|
|
+ .menu-list {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ list-style: none;
|
|
|
|
|
|
- .el-tooltip__trigger {
|
|
|
- color: #fff;
|
|
|
+ img {
|
|
|
+ width: 25px;
|
|
|
+ height: 25px;
|
|
|
}
|
|
|
|
|
|
- a {
|
|
|
+ .menu-item {
|
|
|
display: flex;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- font-size: 14px;
|
|
|
- text-decoration: unset;
|
|
|
- white-space: nowrap;
|
|
|
- }
|
|
|
+ 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;
|
|
|
+ }
|
|
|
|
|
|
- &.active {
|
|
|
- background: #323e70;
|
|
|
+ &+.menu-item {
|
|
|
+ border-top: 1px solid fade(#606769, 40);
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
+
|
|
|
+ .lockpage {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 20px;
|
|
|
+
|
|
|
+ .el-icon {
|
|
|
+ color: #fff;
|
|
|
|
|
|
- &+.menu-item {
|
|
|
- border-top: 1px solid fade(#606769, 40);
|
|
|
+ svg {
|
|
|
+ width: 25px;
|
|
|
+ height: 25px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .lockpage {
|
|
|
- position: absolute;
|
|
|
- bottom: 20px;
|
|
|
+ .elmenuSty {
|
|
|
+ height: 100vh;
|
|
|
|
|
|
- .el-icon {
|
|
|
- color: #fff;
|
|
|
+ img {
|
|
|
+ width: 25px;
|
|
|
+ height: 25px;
|
|
|
+ }
|
|
|
|
|
|
- svg {
|
|
|
- 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: 65px;
|
|
|
+ border-right: transparent;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .pageSty {
|
|
|
+ width: 100%;
|
|
|
+ height: 100vh;
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .menuBs {
|
|
|
- opacity: 0;
|
|
|
- transition: opacity 0.2s;
|
|
|
- transition-timing-function: ease-in;
|
|
|
+ .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";
|
|
|
+ @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 {
|