整合框架，功率预测，发电能力分析，报表项目合并；开发黑色版本与白色版本

src/App.vue

@@ -329,16 +329,18 @@
 
     @import "./assets/css/main.css";
     @import "./assets/css/eleCss/index.less";
+    @import "./assets/css/eleCss/el-popper.less";
 
     .themeDark {
         @import "./assets/css/eleCss/el-dialogB.less";
         @import "./assets/css/eleCss/el-tableB.less";
+        @import "./assets/css/eleCss/el-inputB.less";
+        @import "./assets/css/eleCss/el-treeB.less";
     }
 
     .themeLight {
         @import "./assets/css/eleCss/el-dialogW.less";
-        @import "./assets/css/eleCss/el-tableW.less";
-
+        @import "./assets/css/eleCss/el-treeW.less";
     }
 
 

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

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

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

@@ -0,0 +1,88 @@
+.el-select {
+    .el-input {
+        .el-input__wrapper {
+            background-color: #606266;
+        }
+
+    }
+
+}
+
+.el-input {
+    .el-input__wrapper {
+        background-color: #606266;
+    }
+
+}
+
+input {
+    color: #fff;
+}
+
+input::-webkit-input-placeholder {
+    /*WebKit browsers*/
+    color: #fff;
+}
+
+input::-moz-input-placeholder {
+    /*Mozilla Firefox*/
+    color: #fff;
+}
+
+input::-ms-input-placeholder {
+    /*Internet Explorer*/
+    color: #fff;
+}
+
+.el-date-editor--datetimerange {
+    background-color: #606266;
+    color: #fff;
+    border: 1px solid #fff;
+    height: 33px;
+    padding: 0 8px;
+    width: 369px;
+
+    .el-range-separator {
+        color: #fff;
+        line-height: 33px;
+    }
+
+    .el-range-input {
+        flex-basis: 145px;
+        line-height: 33px;
+        background: transparent;
+        color: #fff;
+
+        &::placeholder {
+            text-align: center;
+            color: #fff;
+        }
+    }
+}
+
+.el-date-editor {
+    background-color: #606266;
+
+    .el-input__wrapper {
+        background-color: #606266;
+    }
+}
+
+// 数字组件
+.el-input-number {
+
+    .el-input-number__decrease,
+    .el-input-number__increase {
+        line-height: 15px;
+        color: @gray-l;
+        background: fade(@gray, 40);
+
+    }
+
+    .el-input {
+        .el-input__wrapper {
+            background-color: #606266;
+        }
+
+    }
+}

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

@@ -1,13 +1,193 @@
-.el-popper {
-    .el-menu--vertical {
-        background: #161f1e;
-
-        .el-menu {
-            .el-menu-item {
-                height: 30px;
-                line-height: 30px;
+.el-select__popper {
+    background: #606769 !important;
+
+    .el-select-dropdown {
+        background: #606769;
+
+        .el-scrollbar {
+            .el-select-dropdown__wrap {
+                .el-select-dropdown__list {
+                    .el-select-dropdown__item {
+                        background: #606769;
+                        color: #B3BDC0;
+                    }
+
+                    .selected {
+                        background: #606769;
+                    }
+
+                    .hover {
+                        background: #504bb5;
+                    }
+                }
+            }
+        }
+    }
+
+}
+
+.el-picker__popper {
+    background: #606769 !important;
+
+    .el-picker-panel {
+
+        // el datetimerange  picker Start
+        &.el-date-range-picker {
+            color: @gray-l;
+            background: transparent;
+
+            .el-date-range-picker__time-header {
+                border-color: @gray;
+
+                .el-icon-arrow-right {
+                    color: @gray-l;
+                }
+
+                .el-input__wapper {
+                    background: #606266;
+
+                    .el-input__inner {
+                        color: @gray-l;
+                        border-color: @gray;
+                    }
+                }
+
+
+                .el-date-range-picker__time-picker-wrap {
+                    .el-time-panel {
+                        background-color: @picker-bg-color;
+
+                        // .el-time-spinner__item.active:not(.disabled) {
+                        //     color: @green;
+                        // }
+
+                        // .el-time-spinner__item:hover:not(.disabled):not(.active) {
+                        //     background: transparent;
+                        //     color: @green;
+                        // }
+                    }
+
+                    // .el-time-panel__btn.confirm {
+                    //     color: @green;
+                    // }
+
+                    .el-time-panel__btn.cancel {
+                        color: @gray;
+                    }
+                }
+            }
+
+            .el-date-range-picker__content {
+                border-color: @gray;
+
+                .el-date-table {
+                    th {
+                        color: @gray-l;
+                    }
+
+                    td {
+                        //     &.available:hover {
+                        //         color: @green;
+                        //     }
+
+                        &.in-range div,
+                        &.in-range div:hover {
+                            background: fade(@gray, 40);
+                        }
+
+                        //     &.end-date span,
+                        //     &.start-date span {
+                        //         background: @green;
+                        //     }
+
+                        // &.today {
+                        //     span {
+                        //         color: @green;
+                        //     }
+
+                        //     &.end-date span,
+                        //     &.start-date span {
+                        //         color: @white;
+                        //     }
+                        // }
+
+                        //     &.next-month,
+                        //     &.prev-month {
+                        //         color: @gray;
+                        //     }
+                    }
+                }
+            }
+        }
+
+        // el datetimerange  picker End
+
+        .el-picker-panel__body {
+            border-color: @gray;
+        }
+
+        .el-picker-panel__footer {
+            background: transparent;
+            border-color: @gray;
+
+            // .el-button--text {
+            //     color: @gray;
+            // }
+
+            // .el-button.is-plain {
+            //     background: transparent;
+            //     border-color: @green;
+            //     color: @green;
+            // }
+        }
+
+        // .el-time-panel__btn.confirm {
+        //     color: @green;
+        // }
+
+        // .el-time-panel__btn.cancel {
+        //     color: @gray;
+        // }
+    }
+}
+
+.el-picker__popper {
+    background: #606769 !important;
+
+    .el-picker-panel {
+        background: #606769 !important;
+
+        .el-picker-panel__body-wrapper {
+            .el-picker-panel__body {
                 color: #fff;
+
+                .el-date-picker__header {
+
+                    .el-date-picker__prev-btn,
+                    .el-date-picker__next-btn {
+                        .el-picker-panel__icon-btn {
+                            color: @gray-l;
+                        }
+                    }
+
+                    .el-date-picker__header-label,
+                    .el-date-picker__header-label {
+                        color: @gray-l;
+                    }
+                }
+
+                .el-picker-panel__content {
+                    border-color: @gray;
+
+                    .el-date-table {
+                        th {
+                            color: @gray-l;
+                        }
+
+                    }
+                }
             }
+
         }
     }
 }

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

@@ -1,30 +0,0 @@
-.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/el-treeB.less

@@ -0,0 +1,13 @@
+.el-tree {
+    .el-tree-node {
+        .el-tree-node__content {
+            .el-dropdown:hover {
+                color: #fff;
+            }
+        }
+    }
+
+    .el-tree-node__content:hover {
+        background-color: transparent;
+    }
+}

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

@@ -0,0 +1,5 @@
+.el-tree {
+    .el-tree-node {
+        background: #edeffb;
+    }
+}

src/assets/css/eleCss/index.less

@@ -7,7 +7,6 @@
 @gray: #606769;
 @gray-l: #B3BDC0;
 @black: #000000;
-@write: #ffffff;
 @ligntRed: #ff7a7f;
 @red: #BA3237;
 @darkRed: #710f14;
@@ -17,6 +16,8 @@
 @pink: #c531c7;
 @picker-bg-color: fade(#121d1c, 95);
 
+@windBlue: #504bb5;
+
 // @import "./el-card.less";
 // @import "./el-pagination.less";
 // @import "./el-input.less";

src/components/generatingCapacityComponent/excel.vue

@@ -10,7 +10,8 @@
                     @click.stop="funExcelChange(item)">
                     <el-icon>
                         <Document />
-                    </el-icon>{{ item.name }}
+                    </el-icon>
+                    <span :style="theme ? 'color:#606266': ''">{{ item.name }}</span>
                 </span>
             </el-checkbox>
         </el-checkbox-group>
@@ -19,7 +20,7 @@
                 :class="{'!bg-[rgb(236,245,255)]': currentId === item.id}" @click="funExcelChange(item)">
                 <el-icon>
                     <Document />
-                </el-icon>{{ item.name }}
+                </el-icon><span :style="theme ? 'color:#606266': ''">{{ item.name }}</span>
             </div>
         </div>
     </div>
@@ -52,6 +53,12 @@
                     return [];
                 },
             },
+            theme: {
+                type: Boolean,
+                default: () => {
+                    return false;
+                },
+            },
         },
         data() {
             return {

src/components/generatingCapacityComponent/table.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="warn-table" ref="tableRef" :style="{ height: typeof height === 'string' ? height : height + 'px' }">
         <div class="tableData_tit">
-            <p>{{tableName}}</p>
+            <p :style="theme? 'color:#606266':'color:#fff'">{{tableName}}</p>
             <!-- <el-button size="small" type="primary" @click="funExport" :disabled="!tableId">数据导出</el-button> -->
         </div>
         <el-table :data="data" size="small" v-loading="loading" :max-height="tableHeight" :style="{ width: '100%'}">
@@ -49,6 +49,12 @@
                     return '';
                 },
             },
+            theme: {
+                type: Boolean,
+                default: () => {
+                    return false;
+                },
+            },
         },
         data() {
             return {
@@ -65,7 +71,6 @@
                 font-size: 16px;
                 font-weight: bold;
                 margin: 10px;
-                color: #fff;
             }
         }
     }

src/components/powerPredictionComponent/homePageAssembly/globalDialogPage.vue

@@ -694,6 +694,7 @@
                     }
 
                     .themeDark {
+
                         .main_top {
                             .main_top_left {
                                 .exceed {

src/main.js

@@ -19,6 +19,27 @@ import * as echarts from 'echarts'
 
 import './permission' // permission control
 
+const debounce = (fn, delay) => {
+    let timer = null;
+    return function () {
+      let context = this;
+      let args = arguments;
+      clearTimeout(timer);
+      timer = setTimeout(function () {
+        fn.apply(context, args);
+      }, delay);
+    }
+  }
+   
+  const _ResizeObserver = window.ResizeObserver;
+  window.ResizeObserver = class ResizeObserver extends _ResizeObserver{
+    constructor(callback) {
+      callback = debounce(callback, 16);
+      super(callback);
+    }
+  }
+
+
 const app = createApp(App)
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
     app.component(key, component)

src/utils/request.js

@@ -41,7 +41,6 @@ service.interceptors.request.use(config => {
 // 响应拦截器
 service.interceptors.response.use(
     res => {
-        debugger
     // 未设置状态码则默认成功状态
         const code = res.data.code || 200;
     // 获取错误信息
@@ -51,7 +50,6 @@ service.interceptors.response.use(
       return res.data
     }
     if (code === 401) {
-        debugger
         ElMessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录','系统提示', {
             confirmButtonText: '重新登录',
             cancelButtonText: '取消',

src/views/generatingCapacity/dataAnalysis/combine/components/current-scatter-chart.vue

@@ -61,6 +61,14 @@
                 type: Boolean,
                 default: false,
             },
+            theme: {
+                type: Boolean,
+                default: false,
+            },
+            echartsTheme: {
+                type: String,
+                default: '',
+            },
         },
         data() {
             return {
@@ -114,7 +122,7 @@
                         top: 4,
                         textStyle: {
                             fontSize: 14,
-                            color: that.theme === "dark" ? partten.getColor("white") : "#000",
+                            color: that.echartsTheme === "dark" ? partten.getColor("white") : "#000",
                         },
                     },
                     // backgroundColor:
@@ -163,9 +171,14 @@
                             color: "#fff",
                         },
                         formatter(params) {
-                            return params.value.x ?
-                                `${params.seriesName}<br />风速：${params.value.x} m/s<br />功率：${params.value.y} kW` :
-                                `${params.name}`;
+                            let str = ''
+                            if (params.value && params.value.x) {
+                                str =
+                                    `${params.seriesName}<br />风速：${params.value.x} m/s<br />功率：${params.value.y} kW`
+                            } else {
+                                str = `${params.name}`
+                            }
+                            return str
                         },
                     },
                     brush: {
@@ -199,7 +212,7 @@
                     ],
                     textStyle: {
                         fontSize: util.vh(16),
-                        color: that.theme === "dark" ? "#fff" : "#000",
+                        color: that.echartsTheme === "dark" ? "#fff" : "#000",
                     },
                     //图例-每一条数据的名字
                     legend: {
@@ -209,10 +222,10 @@
                         top: "5",
                         // icon: "circle",
                         itemWidth: 6,
-                        inactiveColor: that.theme === "dark" ?
+                        inactiveColor: that.echartsTheme === "dark" ?
                             partten.getColor("white") : "#000",
                         textStyle: {
-                            color: that.theme === "dark" ?
+                            color: that.echartsTheme === "dark" ?
                                 partten.getColor("white") : "#000",
                             fontSize: 12,
                         },
@@ -243,7 +256,7 @@
                             show: false,
                         },
                         textStyle: {
-                            color: that.theme === "dark" ?
+                            color: that.echartsTheme === "dark" ?
                                 partten.getColor("gray") : "#000",
                         },
                     }, ],

src/views/generatingCapacity/dataAnalysis/combine/index.vue

@@ -1,48 +1,55 @@
 <template>
-    <div class="dataAnalysisCom">
-        <p>风电数据处理</p>
-        <search-cop @submit="funSubmit">
-        </search-cop>
-        <div class="main">
-            <div class="treeDataMain">
-                <tree-cop :data="treeData" @checkChange="funTreeCheckChange" :show-checkbox="true" :height="treeHeight"
-                    @currentChange="funCurrentChange" @refresh="funGetTree">
-                </tree-cop>
-                <tree-cop :dropdownMenu="['export','delete','save']" :data="processTreeData" :height="treeHeight"
-                    @currentChange="funProcessCurrentChange" @refresh="funGetProcessTree">
-                </tree-cop>
-            </div>
-            <div class="excelDataMain">
-                <div class="excelDataMain_top">
-                    <excel-cop :checkIds="excelCheckIds" :showCheckbox="excelCheckboxShow" :data="excelList"
-                        :height="excelHeight" @excelChange="funExcelChange" @checkChange="funExcelCheckChange">
-                    </excel-cop>
+    <div class="dataAnalysisCom" :class="!theme ? 'themeDark' : 'themeLight'">
+        <div class="dataAnalysisComMain">
+            <p>风电数据处理</p>
+            <search-cop @submit="funSubmit">
+            </search-cop>
+            <div class="main">
+                <div class="treeDataMain">
+                    <tree-cop :data="treeData" @checkChange="funTreeCheckChange" :show-checkbox="true"
+                        :height="treeHeight" @currentChange="funCurrentChange" @refresh="funGetTree">
+                    </tree-cop>
+                    <tree-cop :dropdownMenu="['export','delete','save']" :data="processTreeData" :height="treeHeight"
+                        @currentChange="funProcessCurrentChange" @refresh="funGetProcessTree">
+                    </tree-cop>
                 </div>
-                <div class="excelDataMain_bot">
-                    <excel-cop :data="excelFitList" :height="excelHeight" @excelChange="funExcelChange">
-                    </excel-cop>
+                <div class="excelDataMain">
+                    <div class="excelDataMain_top">
+                        <excel-cop :checkIds="excelCheckIds" :showCheckbox="excelCheckboxShow" :data="excelList"
+                            :theme="theme" :height="excelHeight" @excelChange="funExcelChange"
+                            @checkChange="funExcelCheckChange">
+                        </excel-cop>
+                    </div>
+                    <div class="excelDataMain_bot">
+                        <excel-cop :data="excelFitList" :height="excelHeight" :theme="theme"
+                            @excelChange="funExcelChange">
+                        </excel-cop>
+                    </div>
+                </div>
+                <div class="tableDataMain">
+                    <SubmitBtn class="butten_com" desc="区域划分" v-if="activeTab === '2' && excelType === 'fitting'"
+                        @click="funChartArea">
+                    </SubmitBtn>
+                    <el-tabs v-model="activeTab" @tab-click="handleClick">
+                        <el-tab-pane label="表格数据" name="1">
+                            <table-cop :data="tableData" :column="tableColumn" :theme="theme" :loading="tableLoading"
+                                :height="tableHeight" :tableId="tableShowId" :tableName="tableName">
+                            </table-cop>
+                        </el-tab-pane>
+                        <el-tab-pane label="图表展示" name="2">
+                            <div
+                                :style="{ height: typeof tableHeight === 'string' ? tableHeight : tableHeight + 'px' }">
+                                <CurrentScatterChart ref="chartRef" width="100%"
+                                    :height="`calc( ${tableHeight} - 20px )`"
+                                    :chartTitle="avgObj.title+ '&nbsp;&nbsp;' +'平均Cp值：'+avgObj.cpavg+'； 静风频率：'+avgObj.frequency+'%； 曲线偏差率：'+avgObj.pcratio+'%'"
+                                    :xAxisData="xAxisData" :yAxisData="{ splitLine: { show: false } }"
+                                    :seriesData="seriesData" :showLegend="true" :brushSelected="!isChartArea"
+                                    :theme="theme" :echartsTheme="echartsTheme" :dataSet="dataSet"
+                                    @getSelected="funChartSelect" />
+                            </div>
+                        </el-tab-pane>
+                    </el-tabs>
                 </div>
-            </div>
-            <div class="tableDataMain">
-                <SubmitBtn class="butten_com" desc="区域划分" v-if="activeTab === '2' && excelType === 'fitting'"
-                    @click="funChartArea">
-                </SubmitBtn>
-                <el-tabs v-model="activeTab" @tab-click="handleClick">
-                    <el-tab-pane label="表格数据" name="1">
-                        <table-cop :data="tableData" :column="tableColumn" :loading="tableLoading" :height="tableHeight"
-                            :tableId="tableShowId" :tableName="tableName">
-                        </table-cop>
-                    </el-tab-pane>
-                    <el-tab-pane label="图表展示" name="2">
-                        <div :style="{ height: typeof tableHeight === 'string' ? tableHeight : tableHeight + 'px' }">
-                            <CurrentScatterChart ref="chartRef" width="100%" :height="`calc( ${tableHeight} - 20px )`"
-                                :chartTitle="avgObj.title+ '&nbsp;&nbsp;' +'平均Cp值：'+avgObj.cpavg+'； 静风频率：'+avgObj.frequency+'%； 曲线偏差率：'+avgObj.pcratio+'%'"
-                                :xAxisData="xAxisData" :yAxisData="{ splitLine: { show: false } }"
-                                :seriesData="seriesData" :showLegend="true" :brushSelected="!isChartArea"
-                                :dataSet="dataSet" @getSelected="funChartSelect" />
-                        </div>
-                    </el-tab-pane>
-                </el-tabs>
             </div>
         </div>
         <el-dialog v-model="wtDialog" draggable title="风机功率点位">
@@ -99,8 +106,12 @@
         nextTick,
         onActivated,
         onMounted,
-        reactive
+        reactive,
+        watch
     } from 'vue'
+    import {
+        useStore
+    } from 'vuex';
     import httpRequest from '@/utils/request.js'
     import {
         ElMessage
@@ -668,10 +679,23 @@
     /**created */
     // funGetTree()
     // funGetProcessTree()
+    const theme = ref(null)
+    const echartsTheme = ref('')
+    const store = useStore()
+    watch(() => store.state.theme, (newVal, oldVal) => {
+        theme.value = newVal
+        echartsTheme.value = !newVal ? 'dark' : ''
+        funGetTree()
+        funGetProcessTree()
+    }, {
+        deep: true
+    })
     /**mounted */
     onMounted(() => {
         funGetTree()
         funGetProcessTree()
+        theme.value = store.state.theme
+        echartsTheme.value = !theme.value ? 'dark' : ''
         dataRadom.value = (new Date().getTime()).toString()
         tableHeight.value = window.innerHeight - 260 + 'px'
         excelHeight.value = (window.innerHeight - 220) / 2 + 'px'
@@ -697,7 +721,6 @@
 
         p {
             font-size: 16px;
-            color: #fff;
             margin-left: 20px;
         }
 
@@ -710,7 +733,6 @@
             .treeDataMain,
             .excelDataMain,
             .tableDataMain {
-                background: #161f1e;
                 padding: 10px;
                 border-radius: 10px;
             }
@@ -718,17 +740,6 @@
             .treeDataMain {
                 width: calc(20% - 20px);
 
-                .el-tree-node {
-                    .el-tree-node__content {
-                        .el-dropdown:hover {
-                            color: #fff;
-                        }
-                    }
-                }
-
-                .el-tree-node__content:hover {
-                    background-color: transparent;
-                }
             }
 
             .excelDataMain {
@@ -756,4 +767,39 @@
 
         }
     }
+
+    .themeDark {
+
+        p {
+            color: #fff;
+        }
+
+        .treeDataMain,
+        .excelDataMain,
+        .tableDataMain {
+            background: #161f1e;
+        }
+
+    }
+
+    .themeLight {
+        padding: 0;
+
+        p {
+            color: #000;
+        }
+
+        .treeDataMain,
+        .excelDataMain,
+        .tableDataMain {
+            background: #edeffb;
+        }
+
+        .dataAnalysisComMain {
+            padding: 20px 0;
+            border-radius: 10px;
+            background: #fff;
+        }
+
+    }
 </style>

src/views/generatingCapacity/dataFilter/prepare/index.vue

@@ -1,21 +1,26 @@
 <template>
-    <div class="dataFilePrepare">
-        <p>风电数据准备</p>
-        <search-cop @submit="funSubmit">
-        </search-cop>
-        <div class="main">
-            <div class="treeDataMain">
-                <tree-cop :data="treeData" :height="treeHeight" @currentChange="funCurrentChange" @refresh="funGetTree">
-                </tree-cop>
-            </div>
-            <div class="excelDataMain">
-                <excel-cop :data="excelList" :height="excelHeight" @excelChange="funExcelChange"></excel-cop>
-            </div>
-            <div class="tableDataMain">
-                <div>
-                    <table-cop class="" :data="tableData" :column="tableColumn" :loading="tableLoading"
-                        :height="tableHeight" :tableId="tableShowId" :tableName="tableName" @export="funExport">
-                    </table-cop>
+    <div class="dataFilePrepare" :class="!theme ? 'themeDark' : 'themeLight'">
+        <div class="dataFilePrepareMain">
+            <p>风电数据准备</p>
+            <search-cop @submit="funSubmit">
+            </search-cop>
+            <div class="main">
+                <div class="treeDataMain">
+                    <tree-cop :data="treeData" :height="treeHeight" @currentChange="funCurrentChange"
+                        @refresh="funGetTree">
+                    </tree-cop>
+                </div>
+                <div class="excelDataMain">
+                    <excel-cop :data="excelList" :height="excelHeight" @excelChange="funExcelChange" :theme="theme">
+                    </excel-cop>
+                </div>
+                <div class="tableDataMain">
+                    <div>
+                        <table-cop class="" :data="tableData" :column="tableColumn" :loading="tableLoading"
+                            :theme="theme" :height="tableHeight" :tableId="tableShowId" :tableName="tableName"
+                            @export="funExport">
+                        </table-cop>
+                    </div>
                 </div>
             </div>
         </div>
@@ -35,13 +40,18 @@
     import {
         onMounted,
         ref,
-        onActivated
+        onActivated,
+        watch
     } from 'vue'
     import httpRequest from '@/utils/request.js'
+    import {
+        useStore
+    } from 'vuex';
     // import {
     //     baseURL,
     //     socketURL
     // } from '@/api/axios.js'
+
     /**配置参数 */
     const treeHeight = ref(window.innerHeight - 220 + 'px') //tree高度
     const excelHeight = ref(window.innerHeight - 220 + 'px') //excel高度
@@ -185,10 +195,20 @@
     }
     /**created */
     // funGetTree()
+    const theme = ref(null)
+    const store = useStore()
+    watch(() => store.state.theme, (newVal, oldVal) => {
+        theme.value = newVal
+        funWebSocket()
+        funGetTree()
+    }, {
+        deep: true
+    })
     /**mounted */
     onMounted(() => {
         funWebSocket()
         funGetTree()
+        theme.value = store.state.theme
         tableHeight.value = window.innerHeight - 220 + 'px'
         excelHeight.value = window.innerHeight - 220 + 'px'
         treeHeight.value = window.innerHeight - 220 + 'px'
@@ -206,12 +226,10 @@
 
 <style lang="less">
     .dataFilePrepare {
-
         padding: 20px;
 
         p {
             font-size: 16px;
-            color: #fff;
             margin-left: 20px;
         }
 
@@ -224,25 +242,12 @@
             .treeDataMain,
             .excelDataMain,
             .tableDataMain {
-                background: #161f1e;
                 padding: 10px;
                 border-radius: 10px;
             }
 
             .treeDataMain {
                 width: calc(20% - 20px);
-
-                .el-tree-node {
-                    .el-tree-node__content {
-                        .el-dropdown:hover {
-                            color: #fff;
-                        }
-                    }
-                }
-
-                .el-tree-node__content:hover {
-                    background-color: transparent;
-                }
             }
 
             .excelDataMain {
@@ -255,4 +260,39 @@
 
         }
     }
+
+    .themeDark {
+
+        p {
+            color: #fff;
+        }
+
+        .treeDataMain,
+        .excelDataMain,
+        .tableDataMain {
+            background: #161f1e;
+        }
+
+    }
+
+    .themeLight {
+        padding: 0;
+
+        p {
+            color: #000;
+        }
+
+        .treeDataMain,
+        .excelDataMain,
+        .tableDataMain {
+            background: #edeffb;
+        }
+
+        .dataFilePrepareMain {
+            padding: 20px 0;
+            border-radius: 10px;
+            background: #fff;
+        }
+
+    }
 </style>

src/views/generatingCapacity/dataFilter/process/index.vue

@@ -1,27 +1,30 @@
 <template>
-    <div class="dataFilePrepare">
-        <p>风电数据处理</p>
-        <search-cop @submit="funSubmit">
-        </search-cop>
-        <div class="main">
-            <div class="treeDataMain">
-                <tree-cop :data="treeData" :height="treeHeight" :show-checkbox="true" @currentChange="funCurrentChange"
-                    @refresh="funGetTree" @checkChange="funTreeCheckChange">
-                </tree-cop>
-                <tree-cop :data="processTreeData" :height="treeHeight" @currentChange="funProcessCurrentChange"
-                    @refresh="funGetProcessTree">
-                </tree-cop>
-            </div>
-            <div class="excelDataMain">
-                <excel-cop :data="excelList" :showCheckbox="excelCheckboxShow" :height="excelHeight"
-                    @excelChange="funExcelChange" @checkChange="funExcelCheckChange" :checkIds="excelCheckIds">
-                </excel-cop>
-            </div>
-            <div class="tableDataMain">
-                <div>
-                    <table-cop class="" :data="tableData" :column="tableColumn" :loading="tableLoading"
-                        :height="tableHeight" :tableId="tableShowId" :tableName="tableName" @export="funExport">
-                    </table-cop>
+    <div class="dataFileProcess" :class="!theme ? 'themeDark' : 'themeLight'">
+        <div class="dataFileProcessMain">
+            <p>风电数据处理</p>
+            <search-cop @submit="funSubmit">
+            </search-cop>
+            <div class="main">
+                <div class="treeDataMain">
+                    <tree-cop :data="treeData" :height="treeHeight" :show-checkbox="true"
+                        @currentChange="funCurrentChange" @refresh="funGetTree" @checkChange="funTreeCheckChange">
+                    </tree-cop>
+                    <tree-cop :data="processTreeData" :height="treeHeight" @currentChange="funProcessCurrentChange"
+                        @refresh="funGetProcessTree">
+                    </tree-cop>
+                </div>
+                <div class="excelDataMain">
+                    <excel-cop :data="excelList" :showCheckbox="excelCheckboxShow" :height="excelHeight" :theme="theme"
+                        @excelChange="funExcelChange" @checkChange="funExcelCheckChange" :checkIds="excelCheckIds">
+                    </excel-cop>
+                </div>
+                <div class="tableDataMain">
+                    <div>
+                        <table-cop class="" :data="tableData" :column="tableColumn" :loading="tableLoading"
+                            :theme="theme" :height="tableHeight" :tableId="tableShowId" :tableName="tableName"
+                            @export="funExport">
+                        </table-cop>
+                    </div>
                 </div>
             </div>
         </div>
@@ -35,8 +38,12 @@
     import {
         ref,
         onActivated,
-        onMounted
+        onMounted,
+        watch
     } from 'vue'
+    import {
+        useStore
+    } from 'vuex';
     import httpRequest from '@/utils/request.js'
     // import {
     //     baseURL
@@ -250,10 +257,20 @@
     /**created */
     // funGetTree()
     // funGetProcessTree()
+    const theme = ref(null)
+    const store = useStore()
+    watch(() => store.state.theme, async (newVal, oldVal) => {
+        theme.value = newVal
+        await funGetTree()
+        funGetProcessTree()
+    }, {
+        deep: true
+    })
     /**mounted */
     onMounted(async () => {
         await funGetTree()
         funGetProcessTree()
+        theme.value = store.state.theme
         tableHeight.value = window.innerHeight - 200 + 'px'
         excelHeight.value = window.innerHeight - 200 + 'px'
         treeHeight.value = (window.innerHeight - 210) / 2 + 'px'
@@ -271,13 +288,12 @@
 </script>
 
 <style lang="less">
-    .dataFilePrepare {
+    .dataFileProcess {
 
         padding: 20px;
 
         p {
             font-size: 16px;
-            color: #fff;
             margin-left: 20px;
         }
 
@@ -290,7 +306,6 @@
             .treeDataMain,
             .excelDataMain,
             .tableDataMain {
-                background: #161f1e;
                 padding: 10px;
                 border-radius: 10px;
             }
@@ -298,17 +313,6 @@
             .treeDataMain {
                 width: calc(20% - 20px);
 
-                .el-tree-node {
-                    .el-tree-node__content {
-                        .el-dropdown:hover {
-                            color: #fff;
-                        }
-                    }
-                }
-
-                .el-tree-node__content:hover {
-                    background-color: transparent;
-                }
             }
 
             .excelDataMain {
@@ -321,4 +325,39 @@
 
         }
     }
+
+    .themeDark {
+
+        p {
+            color: #fff;
+        }
+
+        .treeDataMain,
+        .excelDataMain,
+        .tableDataMain {
+            background: #161f1e;
+        }
+
+    }
+
+    .themeLight {
+        padding: 0;
+
+        p {
+            color: #000;
+        }
+
+        .treeDataMain,
+        .excelDataMain,
+        .tableDataMain {
+            background: #edeffb;
+        }
+
+        .dataFileProcessMain {
+            padding: 10px 0;
+            border-radius: 10px;
+            background: #fff;
+        }
+
+    }
 </style>