功率预测一级页面样式修改

components.d.ts

@@ -41,6 +41,7 @@ declare module 'vue' {
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSpace: typeof import('element-plus/es')['ElSpace']
+    ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']

src/App.vue

@@ -6,22 +6,26 @@
  * @FilePath: \own-vue3-vuecli-template\src\App.vue
 -->
 <template>
-    <common-header v-if="showHeader" @headerName="headerName"></common-header>
-    <div class="menu-body" v-if="isShowMenuDiv" @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>
-        </ul>
-    </div>
-    <div :style="{ paddingLeft: fixed ? '63px' : 0 }">
-        <router-view />
+    <div class="windLife" :class="!swichTheme ? 'themeDark' : 'themeLight'">
+        <common-header v-if="showHeader" @headerName="headerName" @swichFn="swichFn"></common-header>
+        <div class="menu-body" v-if="isShowMenuDiv" @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>
+            </ul>
+        </div>
+        <div :style="{ paddingLeft: fixed ? '63px' : 0 }">
+            <router-view />
+        </div>
+
     </div>
 </template>
 
@@ -128,7 +132,8 @@
                     name: 'AGC曲线偏差分析'
                 }, ],
                 memuCloseTimeout: null,
-                fixed: false
+                fixed: false,
+                swichTheme: false
             }
         },
         watch: {
@@ -140,10 +145,19 @@
                 immediate: true
             }
         },
-        created() {
-
-        },
         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)
+            }
             if (this.$route.path.indexOf('powerPrediction') > -1) {
                 this.showMenuData = this.powerPreDatas
             } else if (this.$route.path.indexOf('intelligentReport') > -1) {
@@ -163,6 +177,16 @@
                     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;
@@ -197,112 +221,124 @@
 </script>
 
 <style lang="less">
-    @import "./assets/css/main.css";
-    @import "./assets/css/eleCss/index.less";
-
-    #app {
-        background: #040c0b;
-    }
-
-    .menu-body {
-        position: absolute;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: space-between;
+    .windLife {
+        height: 100%;
 
-        flex: 0 0 63px;
-        width: 63px;
-        height: calc(100% - 60px);
-        top: 60px;
-        background-color: fade(#21192a, 75%);
-        z-index: 2002;
-        opacity: 0;
-        transition: opacity 0.2s;
-        transition-timing-function: ease-in;
+        .menu-body {
+            position: absolute;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: space-between;
 
-        &:hover {
-            opacity: 1;
+            flex: 0 0 63px;
+            width: 63px;
+            height: calc(100% - 60px);
+            top: 60px;
+            background-color: fade(#21192a, 75%);
+            z-index: 2002;
+            opacity: 0;
             transition: opacity 0.2s;
-            transition-timing-function: ease-out;
-            transform: translate(0);
-        }
+            transition-timing-function: ease-in;
 
-        .menu-list {
-            margin: 0;
-            padding: 0;
-            list-style: none;
+            &: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;
-                }
-
-                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;
 
-                    .menu-icon {
+                    .el-tooltip__trigger {
+                        color: #fff;
+                    }
+
+                    a {
                         display: flex;
-                        align-items: center;
+                        width: 100%;
+                        height: 100%;
+                        font-size: 14px;
+                        text-decoration: unset;
+                        white-space: nowrap;
+
+                        .menu-icon {
+                            display: flex;
+                            align-items: center;
 
-                        svg {
-                            width: 14px;
-                            height: 14px;
+                            svg {
+                                width: 14px;
+                                height: 14px;
 
-                            use {
-                                fill: fade(#05bb4c, 75);
+                                use {
+                                    fill: fade(#05bb4c, 75);
+                                }
                             }
                         }
                     }
-                }
 
-                &.active {
-                    background: #323e70;
+                    &.active {
+                        background: #323e70;
 
-                    .menu-icon {
-                        display: flex;
+                        .menu-icon {
+                            display: flex;
 
-                        svg use {
-                            fill: fade(#fff, 75);
+                            svg use {
+                                fill: fade(#fff, 75);
+                            }
                         }
                     }
-                }
 
-                .sub-menu-text {
-                    margin-left: 10px;
-                    color: #B3BDC0;
-                }
+                    .sub-menu-text {
+                        margin-left: 10px;
+                        color: #B3BDC0;
+                    }
 
-                &+.menu-item {
-                    border-top: 1px solid fade(#606769, 40);
+                    &+.menu-item {
+                        border-top: 1px solid fade(#606769, 40);
+                    }
                 }
             }
-        }
 
-        .lockpage {
-            position: absolute;
-            bottom: 20px;
+            .lockpage {
+                position: absolute;
+                bottom: 20px;
 
-            .el-icon {
-                color: #fff;
+                .el-icon {
+                    color: #fff;
 
-                svg {
-                    width: 25px;
-                    height: 25px;
+                    svg {
+                        width: 25px;
+                        height: 25px;
+                    }
                 }
             }
         }
     }
+
+    // .themeDark {
+    //     background: #040c0b;
+    // }
+
+    // .themeLight {
+    //     background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#373590), to(#373590), color-stop(0.2, #645fef), color-stop(0.8, #645fef));
+    // }
+
+    @import "./assets/css/main.css";
+    @import "./assets/css/eleCss/index.less";
+
+    // #app {
+    //     background: #040c0b;
+    // }
 </style>

src/components/commonHeaders.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="proheader">
+    <div class="proheader" :class="!switchTheme ? 'themeDarks' : 'themeLights'">
         <el-container>
             <el-header :class="getStyle()">
                 <div class="logoSty">
@@ -15,21 +15,23 @@
                     <div class="userMsg">
                         <!-- <span style="margin-right: 10px">{{userName}}</span> -->
                         <el-tooltip class="box-item" effect="light" content="用户设置">
-                            <el-icon :size="size" :color="color" @click="changePersonRole">
+                            <el-icon :size="size" :color="color">
                                 <Avatar />
                             </el-icon>
                         </el-tooltip>
                     </div>
                     <div class="divider" style="margin: 0 20px">|</div>
                     <div class="settingStop">
-                        <!-- @click="changeSetting" -->
                         <el-tooltip class="box-item" effect="light" content="系统设置">
-                            <el-icon size="small" :color="color" @click="changeSetting">
+                            <el-icon class="Settingitem" size="small" :color="color">
                                 <Setting />
                             </el-icon>
                         </el-tooltip>
+                        <el-switch v-model="switchTheme" :active-action-icon="SunnyIcon"
+                            :inactive-action-icon="MoonIcon" @change="changSwith" />
                         <el-tooltip class="box-item" effect="light" content="退出">
-                            <el-icon :size="size" :color="color" @click="backLogin" style="margin: 0 15px">
+                            <el-icon class="outitem" :size="size" :color="color" @click="backLogin"
+                                style="margin: 0 15px">
                                 <SwitchButton />
                             </el-icon>
                         </el-tooltip>
@@ -43,6 +45,10 @@
 <script>
     import httpRequest from '@/utils/request.js'
     import {
+        Sunny,
+        Moon
+    } from '@element-plus/icons-vue'
+    import {
         apiGetpersonalInformation
     } from '@/api/api'
     import {
@@ -52,12 +58,15 @@
         name: 'headerCom',
         data() {
             return {
+                SunnyIcon: Sunny,
+                MoonIcon: Moon,
                 leftIndex: '1',
                 currentTime: '',
                 showRole: true,
                 menuData: [],
                 rainW: false,
-                userName: ''
+                userName: '',
+                switchTheme: false
             }
         },
         created() {
@@ -86,6 +95,13 @@
         },
         mounted() {
             let that = this;
+            if (!JSON.parse(window.sessionStorage.getItem('theme'))) {
+                window.sessionStorage.setItem('theme', false)
+            } else {
+                this.switchTheme = JSON.parse(window.sessionStorage.getItem('theme'))
+                this.$store.state.theme = this.switchTheme
+                this.$emit('swichFn', this.switchTheme)
+            }
             let userMes = JSON.parse(window.sessionStorage.getItem('userMessage'))
             that.userName = userMes ? userMes.role : 'administrator'
             if (this.$route.query.markKey) {
@@ -94,8 +110,6 @@
             if (userMes && userMes.role === 'ordinaryUser') {
                 that.showRole = false
             }
-            // that.getUserMes(userMes.userId)
-            debugger
             that.showHeader(that.$route)
         },
         watch: {
@@ -108,6 +122,11 @@
             }
         },
         methods: {
+            changSwith(val) {
+                this.$emit('swichFn', val)
+                window.sessionStorage.setItem('theme', JSON.stringify(this.switchTheme))
+                this.$store.state.theme = this.switchTheme
+            },
             showHeader(route) {
                 this.menuData.forEach(it => {
                     if (route.path.indexOf('powerPrediction') > -1) {
@@ -182,16 +201,6 @@
                 }
 
             },
-            changeSetting() {
-                this.$router.push({
-                    path: '/systemSettings/Overview'
-                })
-            },
-            changePersonRole() {
-                this.$router.push({
-                    path: '/personnelRole'
-                })
-            },
             getStyle() {
                 if (this.$route.path === '/weather') {
                     if (this.rainW) {
@@ -263,6 +272,7 @@
 
 <style lang="less">
     .proheader {
+        // background: #040c0b;
         // position: fixed;
         // top: 0;
         width: 100%;
@@ -297,37 +307,22 @@
             }
 
             .proMenu {
-                display: flex;
-                align-items: center;
-
-                .el-button-group {
-                    .changeBacksty {
-                        background: linear-gradient(0deg, transparent, #000);
-                    }
-
-                    .defaultBacksty {
-                        background-color: #000 !important;
-                    }
-
-                    .defaultweathersty {
-                        background-color: #0d68bc !important;
+                .settingStop {
+                    .Settingitem {
+                        margin-right: 10px;
                     }
 
-                    .defaultweatherRainsty {
-                        background-color: #4a5764 !important;
+                    .outitem {
+                        position: relative;
+                        top: 2px;
                     }
 
-                    .el-button {
-                        background-color: #373590;
-                        border-color: #8679df;
-                        padding: 0 20px;
-
-                        &:hover {
-                            background-color: #504bb5;
-                        }
+                    .el-icon {
+                        cursor: pointer;
                     }
                 }
 
+
                 .userMsg {
                     margin-left: 150px;
 
@@ -340,13 +335,114 @@
                     position: relative;
                     top: -3px;
                 }
+            }
+        }
+    }
 
-                .settingStop {
-                    .el-icon {
-                        cursor: pointer;
+    .themeDarks {
+        .proMenu {
+            display: flex;
+            align-items: center;
+
+            .el-button-group {
+                .changeBacksty {
+                    background: linear-gradient(0deg, transparent, #000);
+                }
+
+                .defaultBacksty {
+                    background-color: #000 !important;
+                }
+
+                .defaultweathersty {
+                    background-color: #0d68bc !important;
+                }
+
+                .defaultweatherRainsty {
+                    background-color: #4a5764 !important;
+                }
+
+                .el-button {
+                    background-color: #373590;
+                    border-color: #8679df;
+                    padding: 0 20px;
+
+                    &:hover {
+                        background-color: #504bb5;
                     }
                 }
             }
+
+            .el-switch {
+                position: relative;
+                top: -2px;
+
+                .el-switch__core {
+                    background: #000;
+
+                    .el-switch__action {
+                        .el-icon {
+                            background: #000;
+                            border-radius: 5px;
+                            color: #fff;
+                        }
+                    }
+                }
+            }
+
+
+        }
+    }
+
+    .themeLights {
+        .proMenu {
+            display: flex;
+            align-items: center;
+
+            .el-button-group {
+                .changeBacksty {
+                    background-color: #504bb5 !important;
+                }
+
+                .defaultBacksty {
+                    background-color: #373590 !important;
+                }
+
+                .defaultweathersty {
+                    background-color: #0d68bc !important;
+                }
+
+                .defaultweatherRainsty {
+                    background-color: #4a5764 !important;
+                }
+
+                .el-button {
+                    background-color: #373590;
+                    border-color: #8679df;
+                    padding: 0 20px;
+
+                    &:hover {
+                        background-color: #504bb5;
+                    }
+                }
+            }
+
+            .el-switch {
+                position: relative;
+                top: -2px;
+
+                .el-switch__core {
+                    background: #373590;
+
+                    .el-switch__action {
+                        .el-icon {
+                            background: #373590;
+                            border-radius: 5px;
+                            color: #fff;
+                        }
+                    }
+                }
+            }
+
         }
     }
 </style>

src/main.js

@@ -20,9 +20,39 @@ import * as echarts from 'echarts'
 import './permission' // permission control
 
 const app = createApp(App)
+const setSessionItem = function (key, newVal) {
+    // 创建 StorageEvent 事件
+    let newStorageEvent = document.createEvent("StorageEvent");
+    const storage = {
+      setItem: function (k, val) {
+        sessionStorage.setItem(k, val);
+   
+        // 初始化 StorageEvent 事件
+        newStorageEvent.initStorageEvent(
+          "setItem", // 事件别名
+          false,
+          false,
+          k,
+          null,
+          val,
+          null,
+          null
+        );
+   
+        // 派发事件
+        window.dispatchEvent(newStorageEvent);
+      },
+    };
+    return storage.setItem(key, newVal);
+}
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
     app.component(key, component)
 }
+app.directive('', {
+    mounted(el, binding) {
+        setSessionItem(el, binding);
+    },
+});
 app.config.globalProperties.$utils = utils;
 app.config.globalProperties.$echarts = echarts;
 app.config.globalProperties.$axios = axios;

src/store/index.js

@@ -9,7 +9,8 @@ import { createStore } from 'vuex'
 import user from './modules/user'
 
 export default createStore({
-  state: {
+    state: {
+        theme: false
   },
   getters: {
   },

src/utils/request.js

@@ -42,14 +42,14 @@ service.interceptors.request.use(config => {
 service.interceptors.response.use(
   res => {
     // 未设置状态码则默认成功状态
-    const code = res.data.code || 200;
+        const code = res.data.code || 200;
     // 获取错误信息
     const msg = errorCode[code] || res.data.msg || errorCode['default']
     // 二进制数据则直接返回
     if (res.request.responseType ===  'blob' || res.request.responseType ===  'arraybuffer') {
       return res.data
     }
-    if (code === 401) {
+        if (code === 401) {
       if (!isRelogin.show) {
         isRelogin.show = true;
         ElMessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录','系统提示', {
@@ -57,10 +57,8 @@ service.interceptors.response.use(
           cancelButtonText: '取消',
           type: 'warning'
         }).then(() => {
-          isRelogin.show = false;
-          store.dispatch('LogOut').then(() => {
-            location.href = '/index';
-          })
+            isRelogin.show = false;
+          this.$route.push({path: '/login'})
         }).catch(() => {
           isRelogin.show = false
         })

src/views/powerPrediction/batteryDivinerPage.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="batterDiviner">
+    <div class="batterDiviner" :class="!theme ? 'themeDark' : 'themeLight'">
         <div class="batterDiviner_wind">
             <el-row class="windStstus">
                 <el-col :span="24" class="scrollbar">
@@ -82,7 +82,19 @@
                 loading: false,
                 loadingLeft: true,
                 loadingRight: true,
-                planFiveMin: ''
+                planFiveMin: '',
+                echartsTheme: '',
+                theme: null
+            }
+        },
+        watch: {
+            '$store.state.theme': {
+                handler: function (newVal, oldVal) {
+                    this.theme = newVal
+                    this.echartsTheme = !newVal ? 'dark' : ''
+                    this.getStationData()
+                },
+                immediate: true
             }
         },
         created() {
@@ -296,9 +308,10 @@
                     }
                     this.$nextTick(() => {
                         if (type === 'year') {
-                            const myChart1 = this.$echarts.init(document.getElementById('windChart1'), 'dark')
+                            const myChart1 = this.$echarts.init(document.getElementById('windChart1'), this
+                                .echartsTheme)
                             const myChart2 = this.$echarts.init(document.getElementById('installChart1'),
-                                'dark')
+                                this.echartsTheme)
                             myChart1.dispatchAction({
                                 type: 'hideTip'
                             });
@@ -306,9 +319,10 @@
                                 type: 'hideTip'
                             });
                         } else {
-                            const myChart1 = this.$echarts.init(document.getElementById('monthChart'), 'dark')
+                            const myChart1 = this.$echarts.init(document.getElementById('monthChart'), this
+                                .echartsTheme)
                             const myChart2 = this.$echarts.init(document.getElementById('monthChartBar'),
-                                'dark')
+                                this.echartsTheme)
                             myChart1.dispatchAction({
                                 type: 'hideTip'
                             });
@@ -518,7 +532,6 @@
             },
             getPowerLine(name, title, xAxis, legend, series) {
                 let option = {
-                    backgroundColor: '',
                     title: {
                         text: title,
                         textStyle: {
@@ -552,10 +565,13 @@
                     },
                     series: series
                 };
+                if (!this.theme) {
+                    option.backgroundColor = ''
+                }
                 // 基于准备好的dom，初始化echarts实例
                 let dom = document.getElementById(name);
-                dom.removeAttribute("_echarts_instance_")
-                let myChart = this.$echarts.init(dom, 'dark');
+                dom.removeAttribute("_echarts_instance_") ? dom.removeAttribute("_echarts_instance_") : ''
+                let myChart = this.$echarts.init(dom, this.echartsTheme);
                 myChart.setOption(option);
                 myChart.on('mousemove', this.setTooltip('windChart1', 'installChart1', 2))
                 window.addEventListener("resize", function () {
@@ -563,8 +579,8 @@
                 })
             },
             setTooltip(name1, name2, num) {
-                const myChart1 = this.$echarts.init(document.getElementById(name1), 'dark')
-                const myChart2 = this.$echarts.init(document.getElementById(name2), 'dark')
+                const myChart1 = this.$echarts.init(document.getElementById(name1), this.echartsTheme)
+                const myChart2 = this.$echarts.init(document.getElementById(name2), this.echartsTheme)
                 this.$utils.setTooltip(myChart1, myChart2, num)
             },
             // 今日发电量预测
@@ -607,7 +623,6 @@
             },
             getPowerBar(name, title, xAxis, legend, series) {
                 let option = {
-                    backgroundColor: '',
                     title: {
                         text: title,
                         textStyle: {
@@ -645,10 +660,13 @@
                     }],
                     series: series
                 };
+                if (!this.theme) {
+                    option.backgroundColor = ''
+                }
                 // 基于准备好的dom，初始化echarts实例
                 let dom = document.getElementById(name);
-                dom.removeAttribute("_echarts_instance_")
-                let myChart = this.$echarts.init(dom, 'dark');
+                dom.removeAttribute("_echarts_instance_") ? dom.removeAttribute("_echarts_instance_") : ''
+                let myChart = this.$echarts.init(dom, this.echartsTheme);
                 myChart.setOption(option);
                 myChart.on('mousemove', this.setTooltip('monthChart', 'monthChartBar', 3))
                 window.addEventListener("resize", function () {
@@ -660,98 +678,39 @@
 </script>
 
 <style lang="less">
-    .batterDiviner {
+    @import '../../viewsCss/batteryDivinerPageLess.less';
+
+    .themeDark {
+
         .batterDiviner_wind {
             .windStstus {
-                display: flex;
-                justify-content: space-around;
-                align-items: center;
                 background: #040c0b;
-                margin: 0 10px;
-                border: 1px solid #7674d8;
-                border-radius: 10px 10px 0 0;
-                border-bottom: none;
-                height: 40px;
-
-                .el-col {
-                    display: flex;
-                }
-
-                .scrollbar {
-                    .scrollbarName {
-                        width: 5%;
-                        font-size: 14px;
-                        color: #fff;
-                        position: relative;
-                        top: 10px;
-                        left: 20px;
-                    }
-
-                    .el-scrollbar {
-                        width: 80%;
-
-                        .scrollbar-flex-content {
-                            display: flex;
-                            width: 50%;
-
-                            .scrollbar-demo-item {
-                                flex-shrink: 0;
-                                display: flex;
-                                align-items: center;
-                                justify-content: center;
-                                padding: 0px 15px;
-                                margin: 10px;
-                                text-align: center;
-                                border-radius: 4px;
-                                border: 1px solid #8679df;
-                                color: #fff;
-                                font-size: 14px;
-                                cursor: pointer;
-                            }
-
-                            .changeBacksty {
-                                background-color: #504bb5 !important;
-                            }
-
-                            .defaultBacksty {
-                                background-color: #373590 !important;
-                            }
-                        }
-
-                        .el-scrollbar__bar {
-                            display: block !important;
-                            --el-scrollbar-opacity: 0.8;
-                            --el-scrollbar-bg-color: #8679df;
-                            // --el-scrollbar-hover-opacity: 0.5;
-                            // --el-scrollbar-hover-bg-color: red;
-                        }
-                    }
-                }
             }
         }
 
         .lineMain {
-            width: calc(100% - 20px);
-            padding: 10px 0 10px 20px;
             background: #040c0b;
-            border-radius: 10px;
 
-            .lineStyle {
-                width: 96%;
-                border-radius: 10px;
+            .lineStyle,
+            .lineStyle1 {
                 background: #161f1e;
-                margin-bottom: 10px;
-                padding: 10px 20px 10px 10px;
-                box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2);
             }
+        }
+    }
+
+    .themeLight {
+        .batterDiviner_wind {
+            .windStstus {
+                background: linear-gradient(0deg, transparent, #373590);
+            }
+        }
+
+        .lineMain {
+            background: #edeffb;
 
+            .lineStyle,
             .lineStyle1 {
-                width: 95%;
-                border-radius: 10px;
-                background: #161f1e;
-                margin-bottom: 10px;
-                padding: 10px 20px 10px 10px;
-                box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2);
+                background: #fff;
             }
         }
     }

src/views/powerPrediction/homePageNoMap.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="homePageNoMap" :style="pageHeight">
+    <div class="homePageNoMap" :class="!theme ? 'themeDark' : 'themeLight'" :style="pageHeight">
         <div class="windStstus">
             <div class="everyOne" v-for="(item, index) in statusData" :key="index">
                 <img :src="item.img" alt="">
@@ -159,7 +159,9 @@
                 yearShow: false,
                 windShow: true,
                 sunShow: false,
-                showpowerLegend: []
+                showpowerLegend: [],
+                echartsTheme: '',
+                theme: null
             }
         },
         created() {
@@ -534,6 +536,22 @@
                 }
             }
         },
+        watch: {
+            '$store.state.theme': {
+                handler: function (newVal, oldVal) {
+                    this.theme = newVal
+                    this.echartsTheme = !newVal ? 'dark' : ''
+                    this.getPowerPrediction()
+                    this.getWindSpeed('风速')
+                    this.getCapacity()
+                    this.getAssessmentScore(0)
+                    this.getAllStationWeather()
+                    this.getWarningInfo()
+                    this.getWindStstus()
+                },
+                immediate: true
+            }
+        },
         mounted() {
             if (!this.$route.query.markKey) {
                 let that = this
@@ -1016,8 +1034,10 @@
                     this.$refs.global.windShow = this.windShow
                     this.$refs.global.init(name)
                     this.$nextTick(() => {
-                        const myChart1 = this.$echarts.init(document.getElementById('lineChart'), 'dark')
-                        const myChart2 = this.$echarts.init(document.getElementById('lineChart1'), 'dark')
+                        const myChart1 = this.$echarts.init(document.getElementById('lineChart'), this
+                            .echartsTheme)
+                        const myChart2 = this.$echarts.init(document.getElementById('lineChart1'), this
+                            .echartsTheme)
                         myChart1.dispatchAction({
                             type: 'hideTip'
                         });
@@ -1124,7 +1144,6 @@
             },
             getPowerLine(name, title, xAxis, legend, series) {
                 let option = {
-                    backgroundColor: '',
                     title: {
                         text: title,
                         textStyle: {
@@ -1233,6 +1252,9 @@
                     },
                     series: series
                 };
+                if (!this.theme) {
+                    option.backgroundColor = ''
+                }
                 if (name === 'lineChart') {
                     let hour = new Date().getHours() + 6
                     let min = new Date().getMinutes()
@@ -1278,7 +1300,7 @@
                 // 基于准备好的dom，初始化echarts实例
                 let dom = document.getElementById(name);
                 dom.removeAttribute("_echarts_instance_")
-                let myChart = this.$echarts.init(dom, 'dark');
+                let myChart = this.$echarts.init(dom, this.echartsTheme);
                 myChart.setOption(option);
                 myChart.on('mousemove', this.setTooltip('lineChart', 'lineChart1', this.windShow ? 3 : 0))
                 window.addEventListener("resize", function () {
@@ -1286,8 +1308,8 @@
                 })
             },
             setTooltip(name1, name2, num) {
-                const myChart1 = this.$echarts.init(document.getElementById(name1), 'dark')
-                const myChart2 = this.$echarts.init(document.getElementById(name2), 'dark')
+                const myChart1 = this.$echarts.init(document.getElementById(name1), this.echartsTheme)
+                const myChart2 = this.$echarts.init(document.getElementById(name2), this.echartsTheme)
                 this.$utils.setTooltip(myChart1, myChart2, num)
             },
             // 装机，并网，实时，可用电量
@@ -1392,7 +1414,6 @@
             },
             getPowerBar(name, title, xAxis, legend, series) {
                 let option = {
-                    backgroundColor: '',
                     title: {
                         text: title,
                         textStyle: {
@@ -1432,6 +1453,9 @@
                     }],
                     series: series
                 };
+                if (!this.theme) {
+                    option.backgroundColor = ''
+                }
                 if (title === '预测考核分数') {
                     option.grid.height = '70%'
                     option.legend.width = '100%'
@@ -1442,7 +1466,7 @@
                 // 基于准备好的dom，初始化echarts实例
                 let dom = document.getElementById(name);
                 dom.removeAttribute("_echarts_instance_")
-                let myChart = this.$echarts.init(dom, 'dark');
+                let myChart = this.$echarts.init(dom, this.echartsTheme);
                 myChart.setOption(option);
                 window.addEventListener("resize", function () {
                     myChart.resize()
@@ -1452,253 +1476,77 @@
     }
 </script>
 
-<style lang="less">
-    .homePageNoMap {
-        .windStstus {
-            display: flex;
-            align-items: center;
-            background: #040c0b;
-            // background: linear-gradient(0deg, transparent, #373590);
-            margin: 0 10px;
-            border: 1px solid #7674d8;
-            border-radius: 10px 10px 0 0;
-            border-bottom: none;
-            height: 40px;
-
-            .everyOne {
-                display: flex;
-                align-items: center;
+<style lang="less" scoped>
+    @import '../../viewsCss/homePageNoMapLess.less';
 
-                img {
-                    width: 21px;
-                    height: 21px;
-                    margin-left: 18px;
-                }
-
-                .statusName {
-                    margin-left: 10px;
-                    font-size: 14px;
-                }
-
-                .statusNum {
-                    padding: 0 18px;
-                    position: relative;
-                    border-right: 1px dashed #fff;
-                }
-
-                span {
-                    color: #fff;
-                }
-            }
-        }
+    .themeDark {
 
+        .windStstus,
         .homePage_main {
             background: #040c0b;
-            // background: linear-gradient(0deg, #373590, transparent);
-            border-radius: 10px;
-            display: flex;
-            justify-content: space-between;
+        }
 
-            .mainLeft {
-                width: 65%;
+        .homePage_main {
 
+            .mainLeft,
+            .mainRight {
                 .lineStyle {
-                    width: 97%;
                     background: #161f1e;
-                    border-radius: 10px;
-                    margin: 10px;
-                    padding: 10px;
-                    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2);
-
-                    .powerLegendColor {
-                        width: 11px;
-                        height: 11px;
-                        border-radius: 7px;
-                        display: inline-block;
-                        margin-top: 2px;
-                        position: relative;
-                        top: 3px;
-                    }
-
-                    .lineColor {
-                        width: 24px;
-                        height: 2px;
-                        display: inline-block;
-                        margin-top: 2px;
-                        position: relative;
-                        top: -2px;
-                        left: 17px;
-                    }
-
-                    .styleData {
-                        position: absolute;
-                        top: 10px;
-                        left: 135px;
-                        z-index: 111;
-
-                        span {
-                            color: #fff;
-                            font-weight: 600;
-                            font-size: 14px;
-                            margin-right: 5px;
-                            border: 1px solid #fff;
-                            padding: 1px 10px;
-                            display: inline-block;
-                            cursor: pointer;
-                        }
-
-                        .changeStyle {
-                            color: #f2a91f;
-                            border: 1px solid #f2a91f;
-                        }
-
-                        .defaultSty {
-                            color: #c7c7c7;
-                            border: 1px solid #c7c7c7;
-                        }
-                    }
                 }
             }
 
-            .mainRight {
-                width: 35%;
-
-                .lineStyle {
-                    width: 94%;
-                    // background: #fff;
-                    background: #161f1e;
-                    margin: 10px;
-                    border-radius: 10px;
-                    padding: 10px;
-                    position: relative;
-                    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2);
-
-                    .styleData {
-                        position: absolute;
-                        top: 10px;
-                        right: 20px;
-                        z-index: 111;
-
-                        span {
-                            color: #fff;
-                            font-weight: 600;
-                            font-size: 14px;
-                            margin-right: 5px;
-                            border: 1px solid #fff;
-                            padding: 1px 10px;
-                            display: inline-block;
-                            cursor: pointer;
-                        }
-
-                        .changeStyle {
-                            color: #f2a91f;
-                            border: 1px solid #f2a91f;
-                        }
-
-                        .defaultSty {
-                            color: #c7c7c7;
-                            border: 1px solid #c7c7c7;
-                        }
-                    }
-                }
+            .mainLeft {}
 
+            .mainRight {
                 .messageData {
-                    width: 94%;
-                    // background: #fff;
                     background: #161f1e;
-                    margin: 10px;
-                    border-radius: 10px;
-                    // padding: 10px;
-                    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2);
-                    padding: 20px 10px;
 
                     p {
                         color: #fff;
-                        font-weight: 600;
-                        line-height: 0;
                     }
 
                     .msgHeight {
-                        overflow-y: auto;
-                        height: calc(100% - 30px);
-
-                        .stationSty {
-                            margin-left: 5px;
-                            display: inline-block;
-                            width: 50px;
-                            font-weight: 600;
-                            color: #fff;
-                        }
-
-                        .titleSty {
-                            display: inline-block;
-                            // width: 60px;
-                            font-weight: 600;
-                        }
 
+                        .stationSty,
                         .msgSty {
-                            display: inline-block;
-                            width: calc(90% - 110px);
-                            overflow: hidden;
-                            text-overflow: ellipsis;
-                            white-space: nowrap;
                             color: #fff;
-                            cursor: pointer;
-
-                            &:hover {
-                                text-decoration-line: underline;
-                            }
-                        }
-
-                        .el-divider {
-                            margin: 12px 0 15px 0;
                         }
                     }
-
-                    span {
-                        font-size: 14px;
-                    }
                 }
             }
         }
+    }
 
-        .footer {
-            padding: 0 10px;
-            width: 100%;
-            height: 40px;
-            // background: #2f5eb0;
-            // border-top: 1px solid #797979;
-            position: fixed;
-            bottom: 0;
+    .themeLight {
+        .windStstus {
+            background: linear-gradient(0deg, transparent, #373590);
+        }
 
-            .exitV {
-                display: flex;
-                justify-content: space-between;
-                line-height: 40px;
+        .homePage_main {
+            background: #edeffb;
 
-                .time {
-                    margin-left: 10px;
-                    color: #fff;
+            .mainLeft,
+            .mainRight {
+                .lineStyle {
+                    background: #fff;
                 }
+            }
 
-                .earlywarning {
-                    width: 60%;
-                    margin-right: 30px;
-                    display: flex;
-                    justify-content: end;
+            .mainLeft {}
 
-                    .warningdata {
-                        margin-left: 20px;
+            .mainRight {
+                .messageData {
+                    background: #fff;
 
-                        .warningColor {
-                            width: 20px;
-                            height: 20px;
-                            line-height: 40px;
-                            display: inline-block;
-                            border-radius: 50%;
-                            margin-left: 10px;
-                            position: relative;
-                            top: 3px;
+                    p {
+                        color: #000;
+                    }
+
+                    .msgHeight {
+
+                        .stationSty,
+                        .msgSty {
+                            color: #000;
                         }
                     }
                 }

src/views/powerPrediction/panoramicPower.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="panoramicPowerPage">
+    <div class="panoramicPowerPage" :class="!theme ? 'themeDark' : 'themeLight'">
         <div class="windStstus">
             <div class="everyOne" v-for="(item, index) in statusData" :key="index">
                 <img :src="item.img" alt="">
@@ -25,8 +25,8 @@
                             <div v-for="it in item.showpowerLegend" :key="it.name">
                                 <span class="lineColor" :style="{'background': it.color}"></span>
                                 <span class="powerLegendColor" :style="{'background': it.color}"></span>
-                                <span
-                                    style="font-size: 12px;margin-left: 12px;position: relative;top: 1px;color: #fff">{{it.name}}</span>
+                                <span :style="!theme ? 'color: #fff' : ''"
+                                    style="font-size: 12px;margin-left: 12px;position: relative;top: 1px;">{{it.name}}</span>
                             </div>
                         </div>
                         <div :id="'lineChart' + Number(index+1)" :style="lineChartStyle"></div>
@@ -64,7 +64,19 @@
                 loading: false,
                 planFiveMin: '',
                 allStatus: {},
-                showpowerLegend: []
+                showpowerLegend: [],
+                echartsTheme: '',
+                theme: null
+            }
+        },
+        watch: {
+            '$store.state.theme': {
+                handler: function (newVal, oldVal) {
+                    this.theme = newVal
+                    this.echartsTheme = !newVal ? 'dark' : ''
+                    this.getChartData()
+                },
+                immediate: true
             }
         },
         created() {
@@ -344,7 +356,6 @@
             getPowerLine(name, numxc, xAxis, legend, series) {
                 let namevc = 'lineChart' + Number(numxc + 1)
                 let option = {
-                    backgroundColor: '',
                     title: {
                         text: name,
                         textStyle: {
@@ -445,10 +456,14 @@
                         ]
                     }
                 }
+                if (!this.theme) {
+                    option.backgroundColor = ''
+
+                }
                 // 基于准备好的dom，初始化echarts实例
                 let dom = document.getElementById(namevc);
-                dom.removeAttribute("_echarts_instance_")
-                let myChart = this.$echarts.init(dom, 'dark');
+                dom.removeAttribute("_echarts_instance_") ? dom.removeAttribute("_echarts_instance_") : ''
+                let myChart = this.$echarts.init(dom, this.echartsTheme);
                 myChart.setOption(option);
                 window.addEventListener("resize", function () {
                     myChart.resize()
@@ -458,104 +473,35 @@
     }
 </script>
 
-<style lang="less">
-    .panoramicPowerPage {
-        background: #040c0b;
-
-        .windStstus {
-            display: flex;
-            align-items: center;
-            background: #040c0b;
-            margin: 0 10px;
-            border: 1px solid #7674d8;
-            border-radius: 10px 10px 0 0;
-            border-bottom: none;
-            height: 40px;
-
-            .everyOne {
-                display: flex;
-                align-items: center;
-
-                img {
-                    width: 21px;
-                    height: 21px;
-                    margin-left: 18px;
-                }
-
-                .statusName {
-                    margin-left: 10px;
-                    font-size: 14px;
-                }
-
-                .statusNum {
-                    padding: 0 18px;
-                    position: relative;
-                    border-right: 1px dashed #fff;
-                }
-
-                span {
-                    color: #fff;
-                }
-            }
-
-            .windLeft {
-                display: flex;
+<style lang="less" scoped>
+    @import '../../viewsCss/panoramicPowerLess.less';
 
-                .windMsg {
-                    margin-right: 10px;
-                    font-weight: 600;
+    .themeDark {
 
-                    span {
-                        display: inline-block;
-                    }
-
-                    span:nth-of-type(1) {
-                        margin: 0 0 0 20px;
-                        font-size: 14px;
-                        color: #fff;
-                    }
-
-                    span:nth-last-child(1) {
-                        font-size: 16px;
-                        color: #fff;
-                    }
-                }
-            }
+        .windStstus,
+        .homePage_main {
+            background: #040c0b;
         }
 
         .lineMain {
-            width: calc(100% - 20px);
-            padding: 10px 0 10px 20px;
             background: #040c0b;
-            border-radius: 10px;
 
             .lineStyle {
-                width: 94%;
-                border-radius: 10px;
                 background: #161f1e;
-                margin-bottom: 15px;
-                padding: 10px;
-                box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2);
+            }
+        }
+    }
 
-                .powerLegendColor {
-                    width: 11px;
-                    height: 11px;
-                    border-radius: 7px;
-                    display: inline-block;
-                    margin-top: 2px;
-                    position: relative;
-                    top: 3px;
-                }
+    .themeLight {
+        .windStstus {
+            background: linear-gradient(0deg, transparent, #373590);
+        }
 
-                .lineColor {
-                    width: 24px;
-                    height: 2px;
-                    display: inline-block;
-                    margin-top: 2px;
-                    position: relative;
-                    top: -2px;
-                    left: 17px;
-                }
+        .lineMain {
+            background: #edeffb;
+
+            .lineStyle {
+                background: #fff;
             }
         }
     }

src/views/powerPrediction/powerPredictionPage.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="powerPredictionPage">
+    <div class="powerPredictionPage" :class="!theme ? 'themeDark' : 'themeLight'">
         <el-row class="windStstus">
             <el-col :span="11" class="scrollbar">
                 <!-- <span class="scrollbarName">场站名称：</span> -->
@@ -28,8 +28,8 @@
                             <div v-for="item in showpowerLegend" :key="item.name">
                                 <span class="lineColor" :style="{'background': item.color}"></span>
                                 <span class="powerLegendColor" :style="{'background': item.color}"></span>
-                                <span
-                                    style="font-size: 12px;margin-left: 12px;position: relative;top: 1px; color: #fff">{{item.name}}</span>
+                                <span :style="!theme ? 'color: #fff' : ''"
+                                    style="font-size: 12px;margin-left: 12px;position: relative;top: 1px;">{{item.name}}</span>
                             </div>
                         </div>
                         <div id="powerChart" :style="chartStyle"></div>
@@ -102,7 +102,29 @@
                 pickerTimeDia: [],
                 itemVal: '',
                 planFiveMin: '',
-                showpowerLegend: []
+                showpowerLegend: [],
+                echartsTheme: '',
+                theme: null
+            }
+        },
+        watch: {
+            '$store.state.theme': {
+                handler: function (newVal, oldVal) {
+                    this.theme = newVal
+                    this.echartsTheme = !newVal ? 'dark' : ''
+                    this.pickerTime = [
+                        new Date(new Date(new Date().getTime()).setHours(0, 0, 0, 0) + 900 * 1000),
+                        new Date(new Date(new Date().getTime()).setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000)
+                    ]
+                    this.pickerTimeDia = [
+                        new Date(new Date(new Date().getTime()).setHours(0, 0, 0, 0) + 900 * 1000),
+                        new Date(new Date(new Date().getTime()).setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000 -
+                            1000)
+                    ]
+                    this.getStationData()
+
+                },
+                immediate: true
             }
         },
         created() {
@@ -312,8 +334,9 @@
                 this.$refs.prediction.windTurbines = this.windTurbines
                 this.$refs.prediction.windTurbinesVal = this.itemVal
                 this.$nextTick(() => {
-                    const myChart1 = this.$echarts.init(document.getElementById('powerChart'), 'dark')
-                    const myChart2 = this.$echarts.init(document.getElementById('windChart'), 'dark')
+                    const myChart1 = this.$echarts.init(document.getElementById('powerChart'), this
+                        .echartsTheme)
+                    const myChart2 = this.$echarts.init(document.getElementById('windChart'), this.echartsTheme)
                     myChart1.dispatchAction({
                         type: 'hideTip'
                     });
@@ -612,8 +635,8 @@
                 }
                 // 基于准备好的dom，初始化echarts实例
                 let dom = document.getElementById(name);
-                dom.removeAttribute("_echarts_instance_")
-                let myChart = this.$echarts.init(dom, 'dark');
+                dom.removeAttribute("_echarts_instance_") ? dom.removeAttribute("_echarts_instance_") : ''
+                let myChart = this.$echarts.init(dom, this.echartsTheme);
                 myChart.setOption(option);
                 myChart.on('mousemove', this.setTooltip('powerChart', 'windChart', 0))
                 myChart.on('mouseover', function (params) {
@@ -624,8 +647,8 @@
                 })
             },
             setTooltip(name1, name2, num) {
-                const myChart1 = this.$echarts.init(document.getElementById(name1), 'dark')
-                const myChart2 = this.$echarts.init(document.getElementById(name2), 'dark')
+                const myChart1 = this.$echarts.init(document.getElementById(name1), this.echartsTheme)
+                const myChart2 = this.$echarts.init(document.getElementById(name2), this.echartsTheme)
                 this.$utils.setTooltip(myChart1, myChart2, num)
             },
             // 装机，并网，实时，可用电量
@@ -746,8 +769,8 @@
                 };
                 // 基于准备好的dom，初始化echarts实例
                 let dom = document.getElementById(name);
-                dom.removeAttribute("_echarts_instance_")
-                let myChart = this.$echarts.init(dom, 'dark');
+                dom.removeAttribute("_echarts_instance_") ? dom.removeAttribute("_echarts_instance_") : ''
+                let myChart = this.$echarts.init(dom, this.echartsTheme);
                 myChart.setOption(option);
                 window.addEventListener("resize", function () {
                     myChart.resize()
@@ -830,7 +853,6 @@
                     minNum = 0
                 }
                 let option = {
-                    backgroundColor: '',
                     series: [{
                         type: 'gauge',
                         min: minNum,
@@ -872,10 +894,13 @@
                         }
                     }]
                 };
+                if (!this.theme) {
+                    option.backgroundColor = ''
+                }
                 // 基于准备好的dom，初始化echarts实例
                 let dom = document.getElementById(name);
-                dom.removeAttribute("_echarts_instance_")
-                let myChart = this.$echarts.init(dom, 'dark');
+                dom.removeAttribute("_echarts_instance_") ? dom.removeAttribute("_echarts_instance_") : ''
+                let myChart = this.$echarts.init(dom, this.echartsTheme);
                 // let that = this
                 // setInterval(function () {
                 //     that.getIrradiance()
@@ -988,8 +1013,8 @@
                 }
                 // 基于准备好的dom，初始化echarts实例
                 let dom = document.getElementById('radarChart');
-                dom.removeAttribute("_echarts_instance_")
-                let myChart = this.$echarts.init(dom, 'dark');
+                dom.removeAttribute("_echarts_instance_") ? dom.removeAttribute("_echarts_instance_") : ''
+                let myChart = this.$echarts.init(dom, this.echartsTheme);
                 myChart.setOption(option);
                 window.addEventListener("resize", function () {
                     myChart.resize()
@@ -999,183 +1024,40 @@
     }
 </script>
 
-<style lang="less">
-    .powerPredictionPage {
-        .windStstus {
-            display: flex;
-            justify-content: space-around;
-            align-items: center;
-            background: #040c0b;
-            margin: 0 10px;
-            border: 1px solid #7674d8;
-            border-radius: 10px 10px 0 0;
-            border-bottom: none;
-            height: 40px;
-
-            .el-col {
-                display: flex;
-            }
-
-            .scrollbar {
-                border-right: 1px dashed #fff;
-
-                .scrollbarName {
-                    width: 10%;
-                    font-size: 14px;
-                    color: #fff;
-                    position: relative;
-                    top: 10px;
-                    left: 20px;
-                }
-
-                .el-scrollbar {
-                    width: 90%;
-
-                    .scrollbar-flex-content {
-                        display: flex;
-                        width: 50%;
-
-                        .scrollbar-demo-item {
-                            flex-shrink: 0;
-                            display: flex;
-                            align-items: center;
-                            justify-content: center;
-                            padding: 0px 15px;
-                            margin: 10px;
-                            text-align: center;
-                            border-radius: 4px;
-                            border: 1px solid #8679df;
-                            color: #fff;
-                            font-size: 14px;
-                            cursor: pointer;
-                        }
-
-                        .changeBacksty {
-                            background-color: #504bb5 !important;
-                        }
-
-                        .defaultBacksty {
-                            background-color: #373590 !important;
-                        }
-                    }
-
-                    .el-scrollbar__bar {
-                        display: block !important;
-                        --el-scrollbar-opacity: 0.8;
-                        --el-scrollbar-bg-color: #8679df;
-                        // --el-scrollbar-hover-opacity: 0.5;
-                        // --el-scrollbar-hover-bg-color: red;
-                    }
-                }
-            }
-
-            .everyOne {
-                display: flex;
-                align-items: center;
-
-                img {
-                    width: 21px;
-                    height: 21px;
-                    margin-left: 18px;
-                }
-
-                .statusName {
-                    margin-left: 10px;
-                    font-size: 14px;
-                }
-
-                .statusNum {
-                    padding: 0 18px;
-                    position: relative;
-                    border-right: 1px dashed #fff;
-                }
-
-                span {
-                    color: #fff;
-                }
-            }
-
-            .windLeft {
-                display: flex;
-
-                .windMsg {
-                    margin-right: 10px;
-                    font-weight: 600;
-
-                    span {
-                        display: inline-block;
-                    }
+<style lang="less" scoped>
+    @import '../../viewsCss/powerPredictionPageLess.less';
 
-                    span:nth-of-type(1) {
-                        margin: 0 0 0 20px;
-                        font-size: 14px;
-                        color: #fff;
-                    }
+    .themeDark {
 
-                    span:nth-last-child(1) {
-                        font-size: 16px;
-                        color: #fff;
-                    }
-                }
-            }
+        .windStstus {
+            background: #040c0b;
         }
 
         .lineMain {
-            width: calc(100% - 20px);
-            padding: 10px 0 10px 20px;
             background: #040c0b;
-            border-radius: 10px;
 
-            .lineStyle {
-                width: 98%;
-                border-radius: 10px;
+            .lineStyle,
+            .lineStyle1 {
                 background: #161f1e;
-                margin-bottom: 10px;
-                padding: 10px 0 10px 10px;
-                box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2);
+            }
+        }
 
-                .powerLegendColor {
-                    width: 11px;
-                    height: 11px;
-                    border-radius: 7px;
-                    display: inline-block;
-                    margin-top: 2px;
-                    position: relative;
-                    top: 3px;
-                }
 
-                .lineColor {
-                    width: 24px;
-                    height: 2px;
-                    display: inline-block;
-                    margin-top: 2px;
-                    position: relative;
-                    top: -2px;
-                    left: 17px;
-                }
-            }
+    }
 
-            .lineStyle1 {
-                width: 96%;
-                border-radius: 10px;
-                background: #161f1e;
-                margin-bottom: 10px;
-                padding: 10px 0 10px 10px;
-                box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2);
+    .themeLight {
+        .windStstus {
+            background: linear-gradient(0deg, transparent, #373590);
+        }
 
-                .guageMsg {
-                    position: relative;
-                    top: -35px;
-                    left: 25%;
-                    width: 50%;
-                    text-align: center;
+        .lineMain {
+            background: #edeffb;
 
-                    p {
-                        font-size: 16px;
-                        line-height: 0.5;
-                    }
-                }
+            .lineStyle,
+            .lineStyle1 {
+                background: #fff;
             }
         }
+
     }
 </style>

src/views/powerPrediction/statisticalSummaryPage.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="statisticalSummary">
+    <div class="statisticalSummary" :class="!theme ? 'themeDark' : 'themeLight'">
         <div class="statistical_wind">
             <el-row class="windStstus">
                 <el-col :span="24" class="scrollbar">
@@ -26,7 +26,8 @@
                         <el-row style="width: 100%;text-align: center;">
                             <el-col :span="3" v-for="item in showpieColor" :key="item.name">
                                 <span class="pieColorLine" :style="{'background': item.value}"></span>
-                                <span style="font-size: 12px;margin-left: 8px;color: #fff">{{item.name}}</span>
+                                <span :style="!theme ? 'color: #fff' : ''"
+                                    style="font-size: 12px;margin-left: 8px;">{{item.name}}</span>
                             </el-col>
                         </el-row>
                         <div style="display:flex">
@@ -80,7 +81,19 @@
                 pieColor: [],
                 showpieColor: [],
                 tableColumn: [],
-                loading: false
+                loading: false,
+                echartsTheme: '',
+                theme: null
+            }
+        },
+        watch: {
+            '$store.state.theme': {
+                handler: function (newVal, oldVal) {
+                    this.theme = newVal
+                    this.echartsTheme = !newVal ? 'dark' : ''
+                    this.getStationData()
+                },
+                immediate: true
             }
         },
         created() {
@@ -530,7 +543,6 @@
             },
             getPowerBar(name, title, xAxis, legend, series) {
                 let option = {
-                    backgroundColor: '',
                     title: {
                         text: this.windTurbinesName + title,
                         textStyle: {
@@ -568,8 +580,15 @@
                     }],
                     series: series
                 };
+                debugger
+                if (!this.theme) {
+                    option.backgroundColor = ''
+
+                }
                 // 基于准备好的dom，初始化echarts实例
-                let myChart = this.$echarts.init(document.getElementById(name), 'dark')
+                let dom = document.getElementById(name);
+                dom.removeAttribute("_echarts_instance_") ? dom.removeAttribute("_echarts_instance_") : ''
+                let myChart = this.$echarts.init(dom, this.echartsTheme)
                 myChart.setOption(option);
                 window.addEventListener("resize", function () {
                     myChart.resize()
@@ -585,7 +604,6 @@
                     })
                 }
                 let option = {
-                    backgroundColor: '',
                     title: {
                         text: title,
                         bottom: 10,
@@ -632,8 +650,14 @@
                         }
                     }]
                 };
+                if (!this.theme) {
+                    option.backgroundColor = ''
+
+                }
                 // 基于准备好的dom，初始化echarts实例
-                let myChart = this.$echarts.init(document.getElementById(name), 'dark')
+                let dom = document.getElementById(name);
+                dom.removeAttribute("_echarts_instance_") ? dom.removeAttribute("_echarts_instance_") : ''
+                let myChart = this.$echarts.init(dom, this.echartsTheme)
                 myChart.setOption(option);
                 let op = myChart.getOption()
                 if (name === 'pieChartS') {
@@ -659,117 +683,41 @@
 </script>
 
 <style lang="less">
-    .statisticalSummary {
+    @import '../../viewsCss/statisticalSummarypageLess.less';
+
+    .themeDark {
         .statistical_wind {
             .windStstus {
-                display: flex;
-                justify-content: space-around;
-                align-items: center;
                 background: #040c0b;
-                margin: 0 10px;
-                border: 1px solid #7674d8;
-                border-radius: 10px 10px 0 0;
-                border-bottom: none;
-                height: 40px;
-
-                .el-col {
-                    display: flex;
-                }
-
-                .scrollbar {
-                    .scrollbarName {
-                        width: 5%;
-                        font-size: 14px;
-                        color: #fff;
-                        position: relative;
-                        top: 10px;
-                        left: 20px;
-                    }
+            }
 
-                    .el-scrollbar {
-                        width: 80%;
 
-                        .scrollbar-flex-content {
-                            display: flex;
-                            width: 50%;
+        }
 
-                            .scrollbar-demo-item {
-                                flex-shrink: 0;
-                                display: flex;
-                                align-items: center;
-                                justify-content: center;
-                                padding: 0px 15px;
-                                margin: 10px;
-                                text-align: center;
-                                border-radius: 4px;
-                                border: 1px solid #8679df;
-                                color: #fff;
-                                font-size: 14px;
-                                cursor: pointer;
-                            }
+        .lineMain {
+            background: #040c0b;
 
-                            .changeBacksty {
-                                background-color: #504bb5 !important;
-                            }
+            .lineStyle1 {
+                background: #161f1e;
+            }
+        }
 
-                            .defaultBacksty {
-                                background-color: #373590 !important;
-                            }
-                        }
+    }
 
-                        .el-scrollbar__bar {
-                            display: block !important;
-                            --el-scrollbar-opacity: 0.8;
-                            --el-scrollbar-bg-color: #8679df;
-                            // --el-scrollbar-hover-opacity: 0.5;
-                            // --el-scrollbar-hover-bg-color: red;
-                        }
-                    }
-                }
+    .themeLight {
+        .statistical_wind {
+            .windStstus {
+                background: linear-gradient(0deg, transparent, #373590);
             }
-        }
 
-        .el-button {
-            height: 30px;
-            line-height: 5px;
+
         }
 
         .lineMain {
-            width: calc(100% - 20px);
-            padding: 10px;
-            background: #040c0b;
-            border-radius: 10px;
+            background: #edeffb;
 
             .lineStyle1 {
-                border-radius: 10px;
-                background: #161f1e;
-                margin-bottom: 10px;
-                padding: 10px;
-                box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2);
-
-                .pieColorLine {
-                    width: 25px;
-                    height: 14px;
-                    border-radius: 3px;
-                    display: inline-block;
-                    margin-top: 2px;
-                    position: relative;
-                    top: 3px;
-                }
-
-                .tablestyle {
-                    .el-table {
-                        .el-table__inner-wrapper {
-                            .el-table__body-wrapper {
-                                .el-table__body {
-                                    .el-table__row {
-                                        height: 40px;
-                                    }
-                                }
-                            }
-                        }
-                    }
-                }
+                background: #fff;
             }
         }
     }

src/viewsCss/batteryDivinerPageLess.less

@@ -0,0 +1,91 @@
+.batterDiviner {
+    .batterDiviner_wind {
+        .windStstus {
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+            margin: 0 10px;
+            border: 1px solid #7674d8;
+            border-radius: 10px 10px 0 0;
+            border-bottom: none;
+            height: 40px;
+
+            .el-col {
+                display: flex;
+            }
+
+            .scrollbar {
+                .scrollbarName {
+                    width: 5%;
+                    font-size: 14px;
+                    color: #fff;
+                    position: relative;
+                    top: 10px;
+                    left: 20px;
+                }
+
+                .el-scrollbar {
+                    width: 80%;
+
+                    .scrollbar-flex-content {
+                        display: flex;
+                        width: 50%;
+
+                        .scrollbar-demo-item {
+                            flex-shrink: 0;
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                            padding: 0px 15px;
+                            margin: 10px;
+                            text-align: center;
+                            border-radius: 4px;
+                            border: 1px solid #8679df;
+                            color: #fff;
+                            font-size: 14px;
+                            cursor: pointer;
+                        }
+
+                        .changeBacksty {
+                            background-color: #504bb5 !important;
+                        }
+
+                        .defaultBacksty {
+                            background-color: #373590 !important;
+                        }
+                    }
+
+                    .el-scrollbar__bar {
+                        display: block !important;
+                        --el-scrollbar-opacity: 0.8;
+                        --el-scrollbar-bg-color: #8679df;
+                        // --el-scrollbar-hover-opacity: 0.5;
+                        // --el-scrollbar-hover-bg-color: red;
+                    }
+                }
+            }
+        }
+    }
+
+    .lineMain {
+        width: calc(100% - 20px);
+        padding: 10px 0 10px 20px;
+        border-radius: 10px;
+
+        .lineStyle {
+            width: 96%;
+            border-radius: 10px;
+            margin-bottom: 10px;
+            padding: 10px 20px 10px 10px;
+            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2);
+        }
+
+        .lineStyle1 {
+            width: 95%;
+            border-radius: 10px;
+            margin-bottom: 10px;
+            padding: 10px 20px 10px 10px;
+            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2);
+        }
+    }
+}

src/viewsCss/homePageNoMapLess.less

@@ -0,0 +1,241 @@
+.homePageNoMap {
+    .windStstus {
+        display: flex;
+        align-items: center;
+        margin: 0 10px;
+        border: 1px solid #7674d8;
+        border-radius: 10px 10px 0 0;
+        border-bottom: none;
+        height: 40px;
+
+        .everyOne {
+            display: flex;
+            align-items: center;
+
+            img {
+                width: 21px;
+                height: 21px;
+                margin-left: 18px;
+            }
+
+            .statusName {
+                margin-left: 10px;
+                font-size: 14px;
+            }
+
+            .statusNum {
+                padding: 0 18px;
+                position: relative;
+                border-right: 1px dashed #fff;
+            }
+
+            span {
+                color: #fff;
+            }
+        }
+    }
+
+    .homePage_main {
+        border-radius: 10px;
+        display: flex;
+        justify-content: space-between;
+
+        .mainLeft {
+            width: 65%;
+
+            .lineStyle {
+                width: 97%;
+                border-radius: 10px;
+                margin: 10px;
+                padding: 10px;
+                box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2);
+
+                .powerLegendColor {
+                    width: 11px;
+                    height: 11px;
+                    border-radius: 7px;
+                    display: inline-block;
+                    margin-top: 2px;
+                    position: relative;
+                    top: 3px;
+                }
+
+                .lineColor {
+                    width: 24px;
+                    height: 2px;
+                    display: inline-block;
+                    margin-top: 2px;
+                    position: relative;
+                    top: -2px;
+                    left: 17px;
+                }
+
+                .styleData {
+                    position: absolute;
+                    top: 10px;
+                    left: 135px;
+                    z-index: 111;
+
+                    span {
+                        color: #fff;
+                        font-weight: 600;
+                        font-size: 14px;
+                        margin-right: 5px;
+                        border: 1px solid #fff;
+                        padding: 1px 10px;
+                        display: inline-block;
+                        cursor: pointer;
+                    }
+
+                    .changeStyle {
+                        color: #f2a91f;
+                        border: 1px solid #f2a91f;
+                    }
+
+                    .defaultSty {
+                        color: #c7c7c7;
+                        border: 1px solid #c7c7c7;
+                    }
+                }
+            }
+        }
+
+        .mainRight {
+            width: 35%;
+
+            .lineStyle {
+                width: 94%;
+                margin: 10px;
+                border-radius: 10px;
+                padding: 10px;
+                position: relative;
+                box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2);
+
+                .styleData {
+                    position: absolute;
+                    top: 10px;
+                    right: 20px;
+                    z-index: 111;
+
+                    span {
+                        color: #fff;
+                        font-weight: 600;
+                        font-size: 14px;
+                        margin-right: 5px;
+                        border: 1px solid #fff;
+                        padding: 1px 10px;
+                        display: inline-block;
+                        cursor: pointer;
+                    }
+
+                    .changeStyle {
+                        color: #f2a91f;
+                        border: 1px solid #f2a91f;
+                    }
+
+                    .defaultSty {
+                        color: #c7c7c7;
+                        border: 1px solid #c7c7c7;
+                    }
+                }
+            }
+
+            .messageData {
+                width: 94%;
+                margin: 10px;
+                border-radius: 10px;
+                // padding: 10px;
+                box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2);
+                padding: 20px 10px;
+
+                p {
+
+                    font-weight: 600;
+                    line-height: 0;
+                }
+
+                .msgHeight {
+                    overflow-y: auto;
+                    height: calc(100% - 30px);
+
+                    .stationSty {
+                        margin-left: 5px;
+                        display: inline-block;
+                        width: 50px;
+                        font-weight: 600;
+                    }
+
+                    .titleSty {
+                        display: inline-block;
+                        // width: 60px;
+                        font-weight: 600;
+                    }
+
+                    .msgSty {
+                        display: inline-block;
+                        width: calc(90% - 110px);
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                        cursor: pointer;
+
+                        &:hover {
+                            text-decoration-line: underline;
+                        }
+                    }
+
+                    .el-divider {
+                        margin: 12px 0 15px 0;
+                    }
+                }
+
+                span {
+                    font-size: 14px;
+                }
+            }
+        }
+    }
+
+    .footer {
+        padding: 0 10px;
+        width: 100%;
+        height: 40px;
+        // background: #2f5eb0;
+        // border-top: 1px solid #797979;
+        position: fixed;
+        bottom: 0;
+
+        .exitV {
+            display: flex;
+            justify-content: space-between;
+            line-height: 40px;
+
+            .time {
+                margin-left: 10px;
+                color: #fff;
+            }
+
+            .earlywarning {
+                width: 60%;
+                margin-right: 30px;
+                display: flex;
+                justify-content: end;
+
+                .warningdata {
+                    margin-left: 20px;
+
+                    .warningColor {
+                        width: 20px;
+                        height: 20px;
+                        line-height: 40px;
+                        display: inline-block;
+                        border-radius: 50%;
+                        margin-left: 10px;
+                        position: relative;
+                        top: 3px;
+                    }
+                }
+            }
+        }
+    }
+}

src/viewsCss/panoramicPowerLess.less

@@ -0,0 +1,96 @@
+.panoramicPowerPage {
+
+    .windStstus {
+        display: flex;
+        align-items: center;
+        margin: 0 10px;
+        border: 1px solid #7674d8;
+        border-radius: 10px 10px 0 0;
+        border-bottom: none;
+        height: 40px;
+
+        .everyOne {
+            display: flex;
+            align-items: center;
+
+            img {
+                width: 21px;
+                height: 21px;
+                margin-left: 18px;
+            }
+
+            .statusName {
+                margin-left: 10px;
+                font-size: 14px;
+            }
+
+            .statusNum {
+                padding: 0 18px;
+                position: relative;
+                border-right: 1px dashed #fff;
+            }
+
+            span {
+                color: #fff;
+            }
+        }
+
+        .windLeft {
+            display: flex;
+
+            .windMsg {
+                margin-right: 10px;
+                font-weight: 600;
+
+                span {
+                    display: inline-block;
+                }
+
+                span:nth-of-type(1) {
+                    margin: 0 0 0 20px;
+                    font-size: 14px;
+                    color: #fff;
+                }
+
+                span:nth-last-child(1) {
+                    font-size: 16px;
+                    color: #fff;
+                }
+            }
+        }
+    }
+
+    .lineMain {
+        width: calc(100% - 20px);
+        padding: 10px 0 10px 20px;
+        border-radius: 10px;
+
+        .lineStyle {
+            width: 94%;
+            border-radius: 10px;
+            margin-bottom: 15px;
+            padding: 10px;
+            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2);
+
+            .powerLegendColor {
+                width: 11px;
+                height: 11px;
+                border-radius: 7px;
+                display: inline-block;
+                margin-top: 2px;
+                position: relative;
+                top: 3px;
+            }
+
+            .lineColor {
+                width: 24px;
+                height: 2px;
+                display: inline-block;
+                margin-top: 2px;
+                position: relative;
+                top: -2px;
+                left: 17px;
+            }
+        }
+    }
+}

src/viewsCss/powerPredictionPageLess.less

@@ -0,0 +1,174 @@
+.powerPredictionPage {
+    .windStstus {
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        margin: 0 10px;
+        border: 1px solid #7674d8;
+        border-radius: 10px 10px 0 0;
+        border-bottom: none;
+        height: 40px;
+
+        .el-col {
+            display: flex;
+        }
+
+        .scrollbar {
+            border-right: 1px dashed #fff;
+
+            .scrollbarName {
+                width: 10%;
+                font-size: 14px;
+                color: #fff;
+                position: relative;
+                top: 10px;
+                left: 20px;
+            }
+
+            .el-scrollbar {
+                width: 90%;
+
+                .scrollbar-flex-content {
+                    display: flex;
+                    width: 50%;
+
+                    .scrollbar-demo-item {
+                        flex-shrink: 0;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        padding: 0px 15px;
+                        margin: 10px;
+                        text-align: center;
+                        border-radius: 4px;
+                        border: 1px solid #8679df;
+                        color: #fff;
+                        font-size: 14px;
+                        cursor: pointer;
+                    }
+
+                    .changeBacksty {
+                        background-color: #504bb5 !important;
+                    }
+
+                    .defaultBacksty {
+                        background-color: #373590 !important;
+                    }
+                }
+
+                .el-scrollbar__bar {
+                    display: block !important;
+                    --el-scrollbar-opacity: 0.8;
+                    --el-scrollbar-bg-color: #8679df;
+                    // --el-scrollbar-hover-opacity: 0.5;
+                    // --el-scrollbar-hover-bg-color: red;
+                }
+            }
+        }
+
+        .everyOne {
+            display: flex;
+            align-items: center;
+
+            img {
+                width: 21px;
+                height: 21px;
+                margin-left: 18px;
+            }
+
+            .statusName {
+                margin-left: 10px;
+                font-size: 14px;
+            }
+
+            .statusNum {
+                padding: 0 18px;
+                position: relative;
+                border-right: 1px dashed #fff;
+            }
+
+            span {
+                color: #fff;
+            }
+        }
+
+        .windLeft {
+            display: flex;
+
+            .windMsg {
+                margin-right: 10px;
+                font-weight: 600;
+
+                span {
+                    display: inline-block;
+                }
+
+                span:nth-of-type(1) {
+                    margin: 0 0 0 20px;
+                    font-size: 14px;
+                    color: #fff;
+                }
+
+                span:nth-last-child(1) {
+                    font-size: 16px;
+                    color: #fff;
+                }
+            }
+        }
+    }
+
+    .lineMain {
+        width: calc(100% - 20px);
+        padding: 10px 0 10px 20px;
+        border-radius: 10px;
+
+        .lineStyle {
+            width: 98%;
+            border-radius: 10px;
+            margin-bottom: 10px;
+            padding: 10px 0 10px 10px;
+            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2);
+
+            .powerLegendColor {
+                width: 11px;
+                height: 11px;
+                border-radius: 7px;
+                display: inline-block;
+                margin-top: 2px;
+                position: relative;
+                top: 3px;
+            }
+
+            .lineColor {
+                width: 24px;
+                height: 2px;
+                display: inline-block;
+                margin-top: 2px;
+                position: relative;
+                top: -2px;
+                left: 17px;
+            }
+        }
+
+        .lineStyle1 {
+            width: 96%;
+            border-radius: 10px;
+            margin-bottom: 10px;
+            padding: 10px 0 10px 10px;
+            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2);
+
+            .guageMsg {
+                position: relative;
+                top: -35px;
+                left: 25%;
+                width: 50%;
+                text-align: center;
+
+                p {
+                    font-size: 16px;
+                    line-height: 0.5;
+                }
+            }
+        }
+    }
+}

src/viewsCss/statisticalSummaryPageLess.less

@@ -0,0 +1,111 @@
+.statisticalSummary {
+    .statistical_wind {
+        .windStstus {
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+            margin: 0 10px;
+            border: 1px solid #7674d8;
+            border-radius: 10px 10px 0 0;
+            border-bottom: none;
+            height: 40px;
+
+            .el-col {
+                display: flex;
+            }
+
+            .scrollbar {
+                .scrollbarName {
+                    width: 5%;
+                    font-size: 14px;
+                    color: #fff;
+                    position: relative;
+                    top: 10px;
+                    left: 20px;
+                }
+
+                .el-scrollbar {
+                    width: 80%;
+
+                    .scrollbar-flex-content {
+                        display: flex;
+                        width: 50%;
+
+                        .scrollbar-demo-item {
+                            flex-shrink: 0;
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                            padding: 0px 15px;
+                            margin: 10px;
+                            text-align: center;
+                            border-radius: 4px;
+                            border: 1px solid #8679df;
+                            color: #fff;
+                            font-size: 14px;
+                            cursor: pointer;
+                        }
+
+                        .changeBacksty {
+                            background-color: #504bb5 !important;
+                        }
+
+                        .defaultBacksty {
+                            background-color: #373590 !important;
+                        }
+                    }
+
+                    .el-scrollbar__bar {
+                        display: block !important;
+                        --el-scrollbar-opacity: 0.8;
+                        --el-scrollbar-bg-color: #8679df;
+                        // --el-scrollbar-hover-opacity: 0.5;
+                        // --el-scrollbar-hover-bg-color: red;
+                    }
+                }
+            }
+        }
+    }
+
+    .el-button {
+        height: 30px;
+        line-height: 5px;
+    }
+
+    .lineMain {
+        width: calc(100% - 20px);
+        padding: 10px;
+        border-radius: 10px;
+
+        .lineStyle1 {
+            border-radius: 10px;
+            margin-bottom: 10px;
+            padding: 10px;
+            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2);
+
+            .pieColorLine {
+                width: 25px;
+                height: 14px;
+                border-radius: 3px;
+                display: inline-block;
+                margin-top: 2px;
+                position: relative;
+                top: 3px;
+            }
+
+            .tablestyle {
+                .el-table {
+                    .el-table__inner-wrapper {
+                        .el-table__body-wrapper {
+                            .el-table__body {
+                                .el-table__row {
+                                    height: 40px;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}