样式修改

.env.development

@@ -6,8 +6,8 @@ VUE_APP_TITLE = '页面标题'
 
 # 开发环境/重写路径(公共路径)
 # 发电能力分析
-# VUE_APP_GENERAT_URL = 'http://123.60.219.66:9002'
-VUE_APP_GENERAT_URL = 'http://192.168.2.12:9002'
+VUE_APP_GENERAT_URL = 'http://123.60.219.66:9002'
+# VUE_APP_GENERAT_URL = 'http://192.168.2.12:9002'
 # 智能报表
 VUE_APP_REPORT_URL = 'http://192.168.2.16:9001'
 # 功率预测

package.json

@@ -19,7 +19,7 @@
     "xlsx-style": "^0.8.13",
     "jspdf": "^2.5.1",
     "echarts": "^5.3.2",
-    "axios": "^1.4.0",
+    "axios": "^0.21.1",
     "core-js": "^3.8.3",
     "element-plus": "^2.3.6",
     "js-cookie": "^3.0.5",

src/App.vue

@@ -327,17 +327,21 @@
         }
     }
 
-    // .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";
 
+    .themeDark {
+        @import "./assets/css/eleCss/el-dialogB.less";
+        @import "./assets/css/eleCss/el-tableB.less";
+    }
+
+    .themeLight {
+        @import "./assets/css/eleCss/el-dialogW.less";
+        @import "./assets/css/eleCss/el-tableW.less";
+
+    }
+
+
     // #app {
     //     background: #040c0b;
     // }

src/assets/css/eleCss/el-dialogB.less

@@ -0,0 +1,20 @@
+.el-overlay {
+    .el-overlay-dialog {
+        .windLifeDialog {
+            margin-top: 5vh !important;
+            background: #040c0b;
+
+            .el-dialog__header {
+                .el-dialog__title {
+                    color: #fff !important;
+                }
+            }
+
+            .el-dialog__body {
+                padding: 10px 20px;
+            }
+        }
+
+    }
+
+}

src/assets/css/eleCss/el-dialogW.less

@@ -0,0 +1,22 @@
+.el-overlay {
+    .el-overlay-dialog {
+
+        .el-dialog,
+        .windLifeDialog {
+            margin-top: 5vh !important;
+            background: #fff;
+
+            .el-dialog__header {
+                .el-dialog__title {
+                    color: #000 !important;
+                }
+            }
+
+            .el-dialog__body {
+                padding: 10px 20px;
+            }
+        }
+
+    }
+
+}

src/assets/css/eleCss/el-input.less

@@ -1,22 +1,3 @@
-@green: #05bb4c;
-@yellow: #edbf03;
-@blue: #1a93cf;
-@darkBlue: #4b55ae;
-@darkBlue2: #1529E9;
-@darkgray: #606769;
-@gray: #606769;
-@gray-l: #B3BDC0;
-@black: #000000;
-@write: #ffffff;
-@ligntRed: #ff7a7f;
-@red: #BA3237;
-@darkRed: #710f14;
-@purple: #4b55ae;
-@orange: #e17e23;
-@white: #ffffff;
-@pink: #c531c7;
-@picker-bg-color: fade(#121d1c, 95);
-
 body {
     .generat-seach {
         .el-form-item {

src/assets/css/eleCss/el-table.less

@@ -1,144 +0,0 @@
-.main-body,
-.warn-table,
-.df-table {
-
-    .el-table,
-    .custom-table.el-table {
-        background: transparent;
-        border: 0px;
-
-        &.el-table--border::after,
-        &.el-table--group::after,
-        &::before {
-            background-color: transparent;
-        }
-
-        tr {
-            &:hover {
-                td {
-                    color: @green;
-                    background-color: transparent !important;
-                }
-            }
-        }
-
-        td {
-            border: 0px;
-            padding: 0;
-            height: 37px;
-            line-height: 37px;
-            color: #b3bdc0;
-
-            &.light,
-            &.always-light {
-                color: @green !important;
-            }
-        }
-
-        th {
-            border: 0px;
-            padding: 0px;
-            height: 37px;
-            line-height: 37px;
-            font-weight: normal;
-            text-align: center;
-            color: @gray-l;
-            cursor: pointer;
-
-            &.is-leaf {
-                border: 0px;
-            }
-
-            &.light,
-            &.always-light {
-                color: @green !important;
-            }
-        }
-
-        th,
-        tr {
-            background-color: transparent;
-            border: 0px;
-        }
-
-        thead {
-            color: @gray-l;
-            font-weight: 500;
-            font-size: 14px;
-            border: 0px;
-
-            th,
-            &.is-group th {
-                &.el-table__cell {
-                    background: #282f31;
-                }
-            }
-        }
-
-        .el-table__body {
-            border: 0px;
-            font-size: 14px;
-        }
-
-        &.el-table--striped .el-table__body tr.el-table__row--striped {
-            &:hover td {
-                background-color: fade(@gray, 20) !important;
-            }
-
-            td {
-                background-color: fade(@gray, 20);
-            }
-        }
-
-        &.el-table--border,
-        &.el-table--group {
-            border: none;
-        }
-
-        .ascending .sort-caret.ascending {
-            border-bottom-color: @green;
-        }
-
-        .descending .sort-caret.descending {
-            border-top-color: @green;
-        }
-    }
-
-    .el-table__expanded-cell {
-        background: transparent;
-    }
-
-    .el-table__footer-wrapper tbody td {
-        background: #1a1f2fcc;
-    }
-}
-
-.warn-table {
-    .el-table {
-        thead th.el-table__cell {
-            background: rgba(83, 89, 104, 0.3);
-        }
-
-        &.el-table--striped .el-table__body tr.el-table__row--striped td {
-            background-color: #161415;
-        }
-
-        tr {
-            &.isConfirm {
-                &:hover {
-                    td {
-                        color: #05bb4c !important;
-                        background-color: transparent !important;
-                    }
-                }
-            }
-
-            &:hover {
-                td {
-                    color: #d35400 !important;
-                    background-color: transparent !important;
-                }
-            }
-        }
-    }
-}

src/assets/css/eleCss/el-tableB.less

@@ -0,0 +1,42 @@
+.warn-table {
+    .el-table {
+        thead th.el-table__cell {
+            background: rgba(83, 89, 104, 0.3);
+        }
+
+        &.el-table--striped .el-table__body tr.el-table__row--striped td {
+            background-color: #161415;
+        }
+
+        th {
+            background-color: #161f1e !important;
+            color: #fff;
+            height: 40px;
+        }
+
+        tr {
+            height: 40px;
+            background: #161f1e !important;
+
+            td {
+                color: #fff !important;
+            }
+
+            &.isConfirm {
+                &:hover {
+                    td {
+                        color: #05bb4c !important;
+                        background-color: transparent !important;
+                    }
+                }
+            }
+
+            &:hover {
+                td {
+                    color: #d35400 !important;
+                    background-color: transparent !important;
+                }
+            }
+        }
+    }
+}

src/assets/css/eleCss/el-tableW.less

@@ -0,0 +1,30 @@
+.warn-table {
+    .el-table {
+        thead th.el-table__cell {
+            background-color: transparent !important;
+            color: #000;
+        }
+
+        &.el-table--striped .el-table__body tr.el-table__row--striped td {
+            // background-color: #161415;
+        }
+
+        // tr {
+        //     &.isConfirm {
+        //         &:hover {
+        //             td {
+        //                 color: #05bb4c !important;
+        //                 background-color: transparent !important;
+        //             }
+        //         }
+        //     }
+
+        //     &:hover {
+        //         td {
+        //             color: #d35400 !important;
+        //             background-color: transparent !important;
+        //         }
+        //     }
+        // }
+    }
+}

src/assets/css/eleCss/index.less

@@ -1,6 +1,24 @@
-@import "./el-card.less";
-@import "./el-pagination.less";
-@import "./el-pagination.less";
-@import "./el-input.less";
-@import "./el-table.less";
-@import "./el-popper.less";
+@green: #05bb4c;
+@yellow: #edbf03;
+@blue: #1a93cf;
+@darkBlue: #4b55ae;
+@darkBlue2: #1529E9;
+@darkgray: #606769;
+@gray: #606769;
+@gray-l: #B3BDC0;
+@black: #000000;
+@write: #ffffff;
+@ligntRed: #ff7a7f;
+@red: #BA3237;
+@darkRed: #710f14;
+@purple: #4b55ae;
+@orange: #e17e23;
+@white: #ffffff;
+@pink: #c531c7;
+@picker-bg-color: fade(#121d1c, 95);
+
+// @import "./el-card.less";
+// @import "./el-pagination.less";
+// @import "./el-input.less";
+// @import "./el-table.less";
+// @import "./el-popper.less";

src/assets/css/main.css

@@ -44,24 +44,6 @@ a {
     margin: 10px 0;
 }
 
-.el-table th {
-    background-color: #161f1e !important;
-    color: #fff;
-    height: 40px;
-}
-.el-table tr {
-    height: 40px;
-}
-.el-table tr{
-    background: #161f1e !important;
-}
-.el-table tr td{
-    color: #fff !important;
-}
-.el-table tr:hover {
-    background: #161f1e;
-}
-
 /* 滚动条的宽度 */
 
 ::-webkit-scrollbar {

src/components/powerPredictionComponent/homePageAssembly/globalDialogPage.vue

@@ -1,8 +1,8 @@
 <template>
-    <el-dialog custom-class="globalDiaWhite" :title="title" v-model="dialogVisible" width="90%"
+    <el-dialog custom-class="windLifeDialog" :title="title" v-model="dialogVisible" width="90%"
         :close-on-click-modal="false" @close="closeDialog">
         <!-- :class="from === 'index'? 'globalDia' : 'globalDiaWhite'" -->
-        <div class="globalDiaMain">
+        <div class="globalDiaMain" :class="!theme ? 'themeDark' : 'themeLight'">
             <div class="main_top">
                 <div class="main_top_left">
                     <div class="exceed">
@@ -140,7 +140,19 @@
                 default: () => {
                     return [];
                 },
-            }
+            },
+            echartsTheme: {
+                type: String,
+                default: () => {
+                    return '';
+                },
+            },
+            theme: {
+                type: Boolean,
+                default: () => {
+                    return false;
+                },
+            },
         },
         data() {
             return {
@@ -390,8 +402,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()
@@ -598,10 +610,7 @@
 <style lang="less">
     .el-overlay {
         .el-overlay-dialog {
-            .globalDiaWhite {
-                margin-top: 5vh !important;
-                background: #040c0b;
-
+            .windLifeDialog {
                 .el-dialog__header {
                     .el-dialog__title {
                         color: #fff !important;
@@ -621,7 +630,7 @@
                                 display: flex;
 
                                 .exceed {
-                                    color: #fff;
+
 
                                     span {
                                         font-size: 14px;
@@ -683,6 +692,26 @@
                             }
                         }
                     }
+
+                    .themeDark {
+                        .main_top {
+                            .main_top_left {
+                                .exceed {
+                                    color: #fff;
+                                }
+                            }
+                        }
+                    }
+
+                    .themeLight {
+                        .main_top {
+                            .main_top_left {
+                                .exceed {
+                                    color: #000;
+                                }
+                            }
+                        }
+                    }
                 }
             }
 

src/main.js

@@ -20,39 +20,9 @@ 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/utils/request.js

@@ -17,9 +17,9 @@ export let isRelogin = { show: false };
 axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
 // 创建axios实例
 const service = axios.create({
-  // axios中请求配置有baseURL选项，表示请求URL公共部分
-  baseURL: process.env.VUE_APP_BASE_URL,
-  // 超时
+    // axios中请求配置有baseURL选项，表示请求URL公共部分
+    baseURL: process.env.VUE_APP_BASE_URL,
+    // 超时
     timeout: 3000,
     headers: {
         // 设置后端需要的传参类型
@@ -40,7 +40,8 @@ service.interceptors.request.use(config => {
 
 // 响应拦截器
 service.interceptors.response.use(
-  res => {
+    res => {
+        debugger
     // 未设置状态码则默认成功状态
         const code = res.data.code || 200;
     // 获取错误信息
@@ -49,21 +50,29 @@ service.interceptors.response.use(
     if (res.request.responseType ===  'blob' || res.request.responseType ===  'arraybuffer') {
       return res.data
     }
-        if (code === 401) {
-      if (!isRelogin.show) {
-        isRelogin.show = true;
+    if (code === 401) {
+        debugger
         ElMessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录','系统提示', {
-          confirmButtonText: '重新登录',
-          cancelButtonText: '取消',
-          type: 'warning'
+            confirmButtonText: '重新登录',
+            cancelButtonText: '取消',
+            type: 'warning'
         }).then(() => {
-            isRelogin.show = false;
-          this.$route.push({path: '/login'})
-        }).catch(() => {
-          isRelogin.show = false
+            this.$route.replace({path: '/login'})
         })
-      }
-      return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
+    //   if (!isRelogin.show) {
+    //     isRelogin.show = true;
+    //     ElMessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录','系统提示', {
+    //       confirmButtonText: '重新登录',
+    //       cancelButtonText: '取消',
+    //       type: 'warning'
+    //     }).then(() => {
+    //         isRelogin.show = false;
+    //       this.$route.push({path: '/login'})
+    //     }).catch(() => {
+    //       isRelogin.show = false
+    //     })
+    //   }
+    //   return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
     } else if (code === 500) {
       ElMessage({ message: msg, type: 'error' })
       return Promise.reject(new Error(msg))

src/views/powerPrediction/homePageNoMap.vue

@@ -14,8 +14,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="lineChart" :style="lineChartStyle"></div>
@@ -72,8 +72,8 @@
                 </div>
             </div>
         </div>
-        <global-dialog ref="global" from="index" @notReload="notReload" :ExceedTimeList="ExceedTimeList"
-            :stationData="stationData"></global-dialog>
+        <global-dialog ref="global" from="index" :echartsTheme="echartsTheme" :theme="theme" @notReload="notReload"
+            :ExceedTimeList="ExceedTimeList" :stationData="stationData"></global-dialog>
         <weather-detail ref="weatherDetail"></weather-detail>
     </div>
 </template>