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

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

@@ -13,6 +13,11 @@
         background-color: #606266;
     }
 
+    .el-input-group__prepend {
+        background-color: #606266;
+        color: #fff;
+    }
+
 }
 
 input {

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

@@ -4,6 +4,14 @@
             background: rgba(83, 89, 104, 0.3);
         }
 
+        .el-table__body-wrapper {
+            background-color: #040c0b;
+        }
+
+        .el-loading-mask {
+            background-color: #606266;
+        }
+
         &.el-table--striped .el-table__body tr.el-table__row--striped td {
             background-color: #161415;
         }
@@ -22,6 +30,18 @@
                 color: #fff !important;
             }
 
+            .el-input {
+                .el-input__wrapper {
+                    background-color: #606266;
+                }
+
+                .el-input-group__prepend {
+                    background-color: #606266;
+                    color: #fff;
+                }
+
+            }
+
             &.isConfirm {
                 &:hover {
                     td {
@@ -38,5 +58,9 @@
                 }
             }
         }
+
+        .el-table__empty-block {
+            background: #040c0b;
+        }
     }
 }

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

@@ -1,27 +1,29 @@
 <template>
-    <div class="dataAnalysisAgcAna">
-        <p>AGC曲线偏差分析</p>
-        <search-cop @submit="funSubmit">
-        </search-cop>
-        <div class="main">
-            <div class="tableDataMain">
-                <el-tabs v-model="activeTab">
-                    <el-tab-pane label="表格数据" name="1">
-                    </el-tab-pane>
-                    <el-tab-pane label="图表展示" name="2">
-                    </el-tab-pane>
-                    <table-cop v-show="activeTab === '1'" :data="tableData" :loading="tableLoading"
-                        :column="tableColumn" :height="tableHeight" :tableId="tableShowId" :tableName="tableName">
-                    </table-cop>
-                    <div v-show="activeTab === '2'"
-                        :style="{ height: typeof tableHeight === 'string' ? tableHeight : tableHeight + 'px' }"
-                        class="p-[10px]">
-                        <CurrentScatterChart ref="chartRef" width="100%" :height="`calc( ${tableHeight} - 20px )`"
-                            :chartTitle="''" :xAxisData="xAxisData" :yAxisData="{ splitLine: { show: false } }"
-                            :seriesData="seriesData" :showLegend="true" :brushSelected="false" :dataSet="dataSet"
-                            @getSelected="funChartSelect" />
-                    </div>
-                </el-tabs>
+    <div class="dataAnalysisAgcAna" :class="!theme ? 'themeDark' : 'themeLight'">
+        <div class="dataAnalysisAgcAnaMain">
+            <p>AGC曲线偏差分析</p>
+            <search-cop @submit="funSubmit">
+            </search-cop>
+            <div class="main">
+                <div class="tableDataMain">
+                    <el-tabs v-model="activeTab">
+                        <el-tab-pane label="表格数据" name="1">
+                        </el-tab-pane>
+                        <el-tab-pane label="图表展示" name="2">
+                        </el-tab-pane>
+                        <table-cop v-show="activeTab === '1'" :data="tableData" :loading="tableLoading"
+                            :column="tableColumn" :height="tableHeight" :tableId="tableShowId" :tableName="tableName">
+                        </table-cop>
+                        <div v-show="activeTab === '2'"
+                            :style="{ height: typeof tableHeight === 'string' ? tableHeight : tableHeight + 'px' }"
+                            class="p-[10px]">
+                            <CurrentScatterChart ref="chartRef" width="100%" :height="`calc( ${tableHeight} - 20px )`"
+                                :chartTitle="''" :xAxisData="xAxisData" :yAxisData="{ splitLine: { show: false } }"
+                                :seriesData="seriesData" :showLegend="true" :brushSelected="false" :dataSet="dataSet"
+                                @getSelected="funChartSelect" />
+                        </div>
+                    </el-tabs>
+                </div>
             </div>
         </div>
     </div>
@@ -35,13 +37,17 @@
     import {
         onMounted,
         ref,
-        onActivated
+        onActivated,
+        watch
     } from 'vue'
+    import {
+        useStore
+    } from 'vuex';
     import CurrentScatterChart from './components/current-scatter-chart.vue'
     import httpRequest from '@/utils/request.js'
     import dayjs from 'dayjs';
     /**配置参数 */
-    const tableHeight = ref(window.innerHeight - 314 + 'px')
+    const tableHeight = ref(window.innerHeight - 270 + 'px')
     const treeHeight = ref(window.innerHeight - 260 + 'px') //tree高度
     const excelHeight = ref(window.innerHeight - 260 + 'px') //excel高度
     /**excel 开始 */
@@ -281,13 +287,25 @@
     }
     /**created */
     // funGetTree()
+    const theme = ref(null)
+    const echartsTheme = ref('')
+    const store = useStore()
+    watch(() => store.state.theme, (newVal, oldVal) => {
+        theme.value = newVal
+        echartsTheme.value = !newVal ? 'dark' : ''
+        funSubmit()
+    }, {
+        deep: true
+    })
     /**mounted */
     onMounted(() => {
-        tableHeight.value = window.innerHeight - 314 + 'px'
+        theme.value = store.state.theme
+        echartsTheme.value = !theme.value ? 'dark' : ''
+        tableHeight.value = window.innerHeight - 270 + 'px'
         excelHeight.value = window.innerHeight - 260 + 'px'
         treeHeight.value = window.innerHeight - 260 + 'px'
         window.addEventListener('resize', () => {
-            tableHeight.value = window.innerHeight - 314 + 'px'
+            tableHeight.value = window.innerHeight - 270 + 'px'
             excelHeight.value = window.innerHeight - 260 + 'px'
             treeHeight.value = window.innerHeight - 260 + 'px'
         })
@@ -304,8 +322,8 @@
 
         p {
             font-size: 16px;
-            color: #fff;
             margin-left: 20px;
+            margin-bottom: 10px;
         }
 
         .main {
@@ -315,7 +333,6 @@
             width: 100%;
 
             .tableDataMain {
-                background: #161f1e;
                 padding: 10px;
                 border-radius: 10px;
                 width: calc(100% - 20px);
@@ -330,4 +347,39 @@
 
         }
     }
+
+    .themeDark {
+
+        p {
+            color: #fff;
+        }
+
+        .treeDataMain,
+        .excelDataMain,
+        .tableDataMain {
+            background: #161f1e;
+        }
+
+    }
+
+    .themeLight {
+        padding: 0;
+
+        p {
+            color: #000;
+        }
+
+        .treeDataMain,
+        .excelDataMain,
+        .tableDataMain {
+            background: #edeffb;
+        }
+
+        .dataAnalysisAgcAnaMain {
+            padding: 20px 0;
+            border-radius: 10px;
+            background: #fff;
+        }
+
+    }
 </style>

src/views/generatingCapacity/dataAnalysis/angleAnalysis/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("grayl") : "#000",
+                            color: that.echartsTheme === "dark" ? partten.getColor("grayl") : "#000",
                         },
                     },
                     // backgroundColor:
@@ -199,7 +207,7 @@
                     ],
                     textStyle: {
                         fontSize: util.vh(16),
-                        color: that.theme === "dark" ? "#fff" : "#000",
+                        color: that.echartsTheme === "dark" ? "#fff" : "#000",
                     },
                     //图例-每一条数据的名字
                     legend: {
@@ -210,10 +218,10 @@
                         top: "5",
                         // icon: "circle",
                         itemWidth: 6,
-                        inactiveColor: that.theme === "dark" ?
+                        inactiveColor: that.echartsTheme === "dark" ?
                             partten.getColor("gray") : "#000",
                         textStyle: {
-                            color: that.theme === "dark" ?
+                            color: that.echartsTheme === "dark" ?
                                 partten.getColor("grayl") : "#000",
                             fontSize: 12,
                         },
@@ -242,7 +250,7 @@
                         },
                         smooth: true,
                         textStyle: {
-                            color: that.theme === "dark" ?
+                            color: that.echartsTheme === "dark" ?
                                 partten.getColor("gray") : "#000",
                         },
                     }, ],

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

@@ -1,19 +1,24 @@
 <template>
-    <div class="dataAnalysisAngleAna">
-        <p>浆距角分析</p>
-        <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 class="px-[10px] shadow rounded-[6px] shadow-blue-500 ">
-                    <CurrentScatterChart ref="chartRef" width="100%" :height="`calc( ${tableHeight})`" :chartTitle="''"
-                        :xAxisData="xAxisData" :yAxisData="{ splitLine: { show: false } }" :seriesData="seriesData"
-                        :showLegend="true" :brushSelected="false" :dataSet="dataSet" @getSelected="funChartSelect" />
+    <div class="dataAnalysisAngleAna" :class="!theme ? 'themeDark' : 'themeLight'">
+        <div class="dataAnalysisAngleAnaMain">
+            <p>浆距角分析</p>
+            <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" :theme="theme" @excelChange="funExcelChange">
+                    </excel-cop>
+                </div>
+                <div class="tableDataMain">
+                    <div class="px-[10px] shadow rounded-[6px] shadow-blue-500 ">
+                        <CurrentScatterChart ref="chartRef" width="100%" :height="`calc( ${tableHeight})`"
+                            :chartTitle="''" :xAxisData="xAxisData" :yAxisData="{ splitLine: { show: false } }"
+                            :seriesData="seriesData" :showLegend="true" :brushSelected="false" :dataSet="dataSet"
+                            :theme="theme" :echartsTheme="echartsTheme" @getSelected="funChartSelect" />
+                    </div>
                 </div>
             </div>
         </div>
@@ -28,8 +33,12 @@
     import {
         onMounted,
         ref,
-        onActivated
+        onActivated,
+        watch
     } from 'vue'
+    import {
+        useStore
+    } from 'vuex';
     import CurrentScatterChart from './components/current-scatter-chart.vue'
     import httpRequest from '@/utils/request.js'
     /**配置参数 */
@@ -170,10 +179,21 @@
     }
     /**created */
     // funGetTree()
+    const theme = ref(null)
+    const echartsTheme = ref('')
+    const store = useStore()
+    watch(() => store.state.theme, (newVal, oldVal) => {
+        theme.value = newVal
+        echartsTheme.value = !newVal ? 'dark' : ''
+        funGetTree()
+    }, {
+        deep: true
+    })
     /**mounted */
     onMounted(() => {
         funGetTree()
-
+        theme.value = store.state.theme
+        echartsTheme.value = !theme.value ? 'dark' : ''
         tableHeight.value = window.innerHeight - 160 + 'px'
         excelHeight.value = window.innerHeight - 160 + 'px'
         treeHeight.value = window.innerHeight - 160 + 'px'
@@ -195,8 +215,8 @@
 
         p {
             font-size: 16px;
-            color: #fff;
             margin-left: 20px;
+            margin-bottom: 10px;
         }
 
         .main {
@@ -208,7 +228,6 @@
             .treeDataMain,
             .excelDataMain,
             .tableDataMain {
-                background: #161f1e;
                 padding: 10px;
                 border-radius: 10px;
             }
@@ -216,17 +235,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 {
@@ -246,4 +254,39 @@
 
         }
     }
+
+    .themeDark {
+
+        p {
+            color: #fff;
+        }
+
+        .treeDataMain,
+        .excelDataMain,
+        .tableDataMain {
+            background: #161f1e;
+        }
+
+    }
+
+    .themeLight {
+        padding: 0;
+
+        p {
+            color: #000;
+        }
+
+        .treeDataMain,
+        .excelDataMain,
+        .tableDataMain {
+            background: #edeffb;
+        }
+
+        .dataAnalysisAngleAnaMain {
+            padding: 20px 0;
+            border-radius: 10px;
+            background: #fff;
+        }
+
+    }
 </style>

src/views/generatingCapacity/dataAnalysis/hotAnalysis/components/barChart.vue

@@ -57,7 +57,15 @@
             type: Boolean,
             required: false,
             default: false
-        }
+        },
+        theme: {
+            type: Boolean,
+            default: false,
+        },
+        echartsTheme: {
+            type: String,
+            default: '',
+        },
     })
 
     /**定义option */
@@ -194,16 +202,24 @@
 
     onMounted(() => {
         nextTick(() => {
-            echarts.registerTheme('chartTheme', chartTheme)
-            const echartIns = echarts.init(document.getElementById(chartId), 'dark')
-            chartIns.value = echartIns
-            echartIns.setOption(option.value)
-            funBrushChange(props.brush)
-            window.addEventListener('resize', () => {
-                echartIns.resize()
-            })
+            init()
         })
     })
+
+    watch(() => props.echartsTheme, (newVal, oldVal) => init())
+
+    const init = () => {
+        echarts.registerTheme('chartTheme', chartTheme)
+        const echartIns = echarts.init(document.getElementById(chartId), props.echartsTheme)
+        document.getElementById(chartId).removeAttribute("_echarts_instance_") ? document.getElementById(chartId)
+            .removeAttribute("_echarts_instance_") : ''
+        chartIns.value = echartIns
+        echartIns.setOption(option.value)
+        funBrushChange(props.brush)
+        window.addEventListener('resize', () => {
+            echartIns.resize()
+        })
+    }
 </script>
 <template>
     <div :id="chartId" :style="{ height: props.height, width: props.width }"></div>

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

@@ -61,6 +61,14 @@
                 type: Boolean,
                 default: false,
             },
+            theme: {
+                type: Boolean,
+                default: false,
+            },
+            echartsTheme: {
+                type: String,
+                default: '',
+            },
         },
         data() {
             return {
@@ -75,7 +83,6 @@
                     "#c531c7",
                     "#bd3338",
                 ],
-                theme: 'dark'
             };
         },
         computed: {
@@ -95,18 +102,21 @@
                         this.chart.resize()
                     }, 300)
                 }
-            }
+            },
+
         },
         methods: {
             resize() {},
             initChart() {
                 const that = this;
                 echarts.registerTheme('chartTheme', chartTheme)
-                let myChart = echarts.init(document.getElementById(this.id), 'dark');
+                let myChart = echarts.init(document.getElementById(this.id), that.echartsTheme);
+                document.getElementById(that.id).removeAttribute("_echarts_instance_") ? document.getElementById(
+                        that.id)
+                    .removeAttribute("_echarts_instance_") : ''
                 that.chart = myChart
                 //指定图表的配置项和数据
-                const option = {
-                    backgroundColor: '',
+                let option = {
                     //标题
                     title: {
                         text: that.chartTitle,
@@ -114,7 +124,7 @@
                         top: 4,
                         textStyle: {
                             fontSize: 14,
-                            color: that.theme === "dark" ? partten.getColor("grayl") : "#000",
+                            color: that.echartsTheme === "dark" ? partten.getColor("grayl") : "#000",
                         },
                     },
                     // backgroundColor:
@@ -199,7 +209,7 @@
                     ],
                     textStyle: {
                         fontSize: util.vh(16),
-                        color: that.theme === "dark" ? "#fff" : "#000",
+                        color: that.echartsTheme === "dark" ? "#fff" : "#000",
                     },
                     //图例-每一条数据的名字
                     legend: {
@@ -209,10 +219,10 @@
                         top: "5",
                         // icon: "circle",
                         itemWidth: 6,
-                        inactiveColor: that.theme === "dark" ?
+                        inactiveColor: that.echartsTheme === "dark" ?
                             partten.getColor("gray") : "#838383",
                         textStyle: {
-                            color: that.theme === "dark" ?
+                            color: that.echartsTheme === "dark" ?
                                 partten.getColor("grayl") : "#838383",
                             fontSize: 12,
                         },
@@ -265,7 +275,7 @@
                             show: false,
                         },
                         textStyle: {
-                            color: that.theme === "dark" ?
+                            color: that.echartsTheme === "dark" ?
                                 partten.getColor("gray") : "#000",
                         },
                     }, ],
@@ -292,6 +302,9 @@
                     //数据-data是最终要显示的数据
                     series: that.seriesData,
                 };
+                if (!that.theme) {
+                    option.backgroundColor = ''
+                }
 
                 that.resize = function () {
                     myChart.resize();
@@ -356,7 +369,7 @@
         },
         updated() {
             // console.log('update')
-            let myChart = echarts.init(document.getElementById(this.id));
+            let myChart = echarts.init(document.getElementById(this.id), this.echartsTheme);
             myChart.dispose();
             this.$nextTick(() => {
                 this.initChart();

src/views/generatingCapacity/dataAnalysis/hotAnalysis/components/lineChart.vue

@@ -57,7 +57,15 @@
             type: Boolean,
             required: false,
             default: false
-        }
+        },
+        theme: {
+            type: Boolean,
+            default: false,
+        },
+        echartsTheme: {
+            type: String,
+            default: '',
+        },
     })
 
     /**定义option */
@@ -195,16 +203,24 @@
 
     onMounted(() => {
         nextTick(() => {
-            echarts.registerTheme('chartTheme', chartTheme)
-            const echartIns = echarts.init(document.getElementById(chartId), 'dark')
-            chartIns.value = echartIns
-            echartIns.setOption(option.value)
-            funBrushChange(props.brush)
-            window.addEventListener('resize', () => {
-                echartIns.resize()
-            })
+            init()
         })
     })
+
+    watch(() => props.echartsTheme, (newVal, oldVal) => init())
+
+    const init = () => {
+        echarts.registerTheme('chartTheme', chartTheme)
+        const echartIns = echarts.init(document.getElementById(chartId), props.echartsTheme)
+        document.getElementById(chartId).removeAttribute("_echarts_instance_") ? document.getElementById(chartId)
+            .removeAttribute("_echarts_instance_") : ''
+        chartIns.value = echartIns
+        echartIns.setOption(option.value)
+        funBrushChange(props.brush)
+        window.addEventListener('resize', () => {
+            echartIns.resize()
+        })
+    }
 </script>
 <template>
     <div :id="chartId" :style="{ height: props.height, width: props.width }"></div>

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

@@ -1,56 +1,60 @@
 <template>
-    <div class="dataAnalysisHotAns">
-        <!-- <search-cop class="mb-[20px]  shadow rounded-[6px] shadow-blue-500" @submit="funSubmit">
-		</search-cop> -->
-        <p>温度与功率分析</p>
-
-        <div class="main">
+    <div class="dataAnalysisHotAns" :class="!theme ? 'themeDark' : 'themeLight'">
+        <div class="dataAnalysisHotAnsMain">
+            <p>温度与功率分析</p>
             <div class="main">
-                <div class="treeDataMain">
-                    <tree-cop :data="processTreeData" :height="treeHeight" @currentChange="funProcessCurrentChange"
-                        @refresh="funGetProcessTree"></tree-cop>
-                </div>
-                <div class="excelDataMain">
-                    <excel-cop :data="excelList" :height="excelHeight" @excelChange="funExcelChange">
-                    </excel-cop>
-                </div>
-                <div class="tableDataMain">
-                    <div class="">
-                        <el-tabs v-model="activeTab">
-                            <el-tab-pane label="温度与功率" name="1">
-                            </el-tab-pane>
-                            <el-tab-pane label="温度曲线" name="2">
-                            </el-tab-pane>
-                            <div v-show="activeTab === '1'" :style="{ height: tableHeight }">
-                                <div style="height:49%">
-                                    <el-icon class="chartIcon" size="18"
-                                        @click="funActCop({xAxis:barxAxis, yAxis:baryAxis, series: barSeries}, 'barChartCop')">
-                                        <ZoomIn />
-                                    </el-icon>
-                                    <bar-chart-cop width="100%" height="100%" :subtext="`平均功率-额定功率 ${powerproduction}`"
-                                        :xAxis="barxAxis" :yAxis="baryAxis" :series="barSeries"></bar-chart-cop>
+                <div class="main">
+                    <div class="treeDataMain">
+                        <tree-cop :data="processTreeData" :height="treeHeight" @currentChange="funProcessCurrentChange"
+                            @refresh="funGetProcessTree"></tree-cop>
+                    </div>
+                    <div class="excelDataMain">
+                        <excel-cop :data="excelList" :height="excelHeight" @excelChange="funExcelChange" :theme="theme">
+                        </excel-cop>
+                    </div>
+                    <div class="tableDataMain">
+                        <div class="">
+                            <el-tabs v-model="activeTab">
+                                <el-tab-pane label="温度与功率" name="1">
+                                </el-tab-pane>
+                                <el-tab-pane label="温度曲线" name="2">
+                                </el-tab-pane>
+                                <div v-show="activeTab === '1'" :style="{ height: tableHeight }">
+                                    <div style="height:49%">
+                                        <el-icon :style="!theme ? 'color: #fff' : ''" class="chartIcon" size="18"
+                                            @click="funActCop({xAxis:barxAxis, yAxis:baryAxis, series: barSeries}, 'barChartCop')">
+                                            <ZoomIn />
+                                        </el-icon>
+                                        <bar-chart-cop width="100%" height="100%"
+                                            :subtext="`平均功率-额定功率 ${powerproduction}`" :xAxis="barxAxis" :theme="theme"
+                                            :echartsTheme="echartsTheme" :yAxis="baryAxis" :series="barSeries">
+                                        </bar-chart-cop>
+                                    </div>
+                                    <div style="height:49%">
+                                        <el-icon :style="!theme ? 'color: #fff' : ''" class="chartIcon" size="18"
+                                            @click="funActCop({xAxis:linexAxis, yAxis:lineyAxis, series: lineSeries}, 'lineChartCop')">
+                                            <ZoomIn />
+                                        </el-icon>
+                                        <line-chart-cop class="" height="100%" width="100%" :xAxis="linexAxis"
+                                            :yAxis="lineyAxis" :series="lineSeries" :theme="theme"
+                                            :echartsTheme="echartsTheme" :subtext="`额定功率温度分析 ${powerproduction}`"
+                                            :dataset="lineDataSet">
+                                        </line-chart-cop>
+                                    </div>
                                 </div>
-                                <div style="height:49%">
-                                    <el-icon class="chartIcon" size="18"
-                                        @click="funActCop({xAxis:linexAxis, yAxis:lineyAxis, series: lineSeries}, 'lineChartCop')">
-                                        <ZoomIn />
-                                    </el-icon>
-                                    <line-chart-cop class="" height="100%" width="100%" :xAxis="linexAxis"
-                                        :yAxis="lineyAxis" :series="lineSeries" :subtext="`额定功率温度分析 ${powerproduction}`"
-                                        :dataset="lineDataSet"></line-chart-cop>
+                                <div v-if="activeTab === '2'"
+                                    :style="{ height: typeof tableHeight === 'string' ? tableHeight : tableHeight + 'px' }"
+                                    class="p-[10px]">
+                                    <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="false"
+                                        :theme="theme" :echartsTheme="echartsTheme" :dataSet="dataSet"
+                                        @getSelected="funhotChartSelect" />
                                 </div>
-                            </div>
-                            <div v-if="activeTab === '2'"
-                                :style="{ height: typeof tableHeight === 'string' ? tableHeight : tableHeight + 'px' }"
-                                class="p-[10px]">
-                                <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="false"
-                                    :dataSet="dataSet" @getSelected="funhotChartSelect" />
-                            </div>
-                        </el-tabs>
+                            </el-tabs>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -113,8 +117,12 @@
         nextTick,
         onActivated,
         onMounted,
-        reactive
+        reactive,
+        watch
     } from 'vue'
+    import {
+        useStore
+    } from 'vuex';
     import httpRequest from '@/utils/request.js'
     import tools from '@tools/htmlToPdf.js'
     import {
@@ -123,9 +131,9 @@
     import util from "@tools/util";
     import CurrentScatterChart from './components/current-scatter-chart.vue'
     /**配置参数 */
-    const treeHeight = ref(window.innerHeight - 150 + 'px') //tree高度
-    const excelHeight = ref(window.innerHeight - 150 + 'px') //excel高度
-    const tableHeight = ref(window.innerHeight - 204 + 'px')
+    const treeHeight = ref(window.innerHeight - 160 + 'px') //tree高度
+    const excelHeight = ref(window.innerHeight - 160 + 'px') //excel高度
+    const tableHeight = ref(window.innerHeight - 214 + 'px')
     /** 额定功率 */
     const powerproduction = ref("")
     /**excel 开始 */
@@ -893,17 +901,28 @@
     const activeTab = ref('1')
     /**created */
     // funGetProcessTree()
+    const theme = ref(null)
+    const echartsTheme = ref('')
+    const store = useStore()
+    watch(() => store.state.theme, (newVal, oldVal) => {
+        theme.value = newVal
+        echartsTheme.value = !newVal ? 'dark' : ''
+        funGetProcessTree()
+    }, {
+        deep: true
+    })
     /**mounted */
     onMounted(() => {
         funGetProcessTree()
-
-        tableHeight.value = window.innerHeight - 204 + 'px'
-        excelHeight.value = (window.innerHeight - 150) + 'px'
-        treeHeight.value = (window.innerHeight - 150) + 'px'
+        theme.value = store.state.theme
+        echartsTheme.value = !theme.value ? 'dark' : ''
+        tableHeight.value = window.innerHeight - 214 + 'px'
+        excelHeight.value = (window.innerHeight - 160) + 'px'
+        treeHeight.value = (window.innerHeight - 160) + 'px'
         window.addEventListener('resize', () => {
-            tableHeight.value = window.innerHeight - 204 + 'px'
-            excelHeight.value = (window.innerHeight - 150) + 'px'
-            treeHeight.value = (window.innerHeight - 150) + 'px'
+            tableHeight.value = window.innerHeight - 214 + 'px'
+            excelHeight.value = (window.innerHeight - 160) + 'px'
+            treeHeight.value = (window.innerHeight - 160) + 'px'
         })
         /**test */
         // funExcelChange({
@@ -924,8 +943,8 @@
 
         p {
             font-size: 16px;
-            color: #fff;
             margin-left: 20px;
+            margin-bottom: 10px;
         }
 
         .main {
@@ -937,7 +956,6 @@
             .treeDataMain,
             .excelDataMain,
             .tableDataMain {
-                background: #161f1e;
                 padding: 10px;
                 border-radius: 10px;
             }
@@ -945,17 +963,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 {
@@ -967,7 +974,6 @@
                 position: relative;
 
                 .chartIcon {
-                    color: #fff;
                     cursor: pointer;
                 }
 
@@ -980,4 +986,39 @@
 
         }
     }
+
+    .themeDark {
+
+        p {
+            color: #fff;
+        }
+
+        .treeDataMain,
+        .excelDataMain,
+        .tableDataMain {
+            background: #161f1e;
+        }
+
+    }
+
+    .themeLight {
+        padding: 0;
+
+        p {
+            color: #000;
+        }
+
+        .treeDataMain,
+        .excelDataMain,
+        .tableDataMain {
+            background: #edeffb;
+        }
+
+        .dataAnalysisHotAnsMain {
+            padding: 20px 0;
+            border-radius: 10px;
+            background: #fff;
+        }
+
+    }
 </style>

src/views/generatingCapacity/dataAnalysis/lineAnalysis/components/barChart.vue

@@ -1,190 +1,206 @@
 <script setup>
-import util from "@tools/util";
-import chartTheme from './barChart.json'
-import { ref, toRaw, computed, onMounted, watch, nextTick } from 'vue';
-import * as echarts from 'echarts'
-const chartId = 'chart-' + util.newGUID(); //chartId
-const chartIns = ref(null)  //chart 实例
-const emits = defineEmits(['getSelected'])
-const props = defineProps({
-	xAxis: {
-		type: Object,
-		required: true,
-		default: () => ({})
-	},
-	yAxis: {
-		type: Array,
-		required: false
-	},
-	colors: {
-		type: Array,
-		default: () => []
-	},
-	series: {
-		type: Array,
-		required: true
-	},
-	dataset: {
-		type: Array,
-		required: false,
-		default: () => ([])
-	},
-	height: {
-		type: String,
-		required: false,
-		default: '500px'
-	},
-	width: {
-		type: String,
-		required: false,
-		default: '500px'
-	},
-	title: {
-		type: String,
-		required: false
-	},
-	subtext: {
-		type: String,
-		required: false
-	},
-	brush: {
-		type: Boolean,
-		required: false,
-		default: false
-	}
-})
+    import util from "@tools/util";
+    import chartTheme from './barChart.json'
+    import {
+        ref,
+        toRaw,
+        computed,
+        onMounted,
+        watch,
+        nextTick
+    } from 'vue';
+    import * as echarts from 'echarts'
+    const chartId = 'chart-' + util.newGUID(); //chartId
+    const chartIns = ref(null) //chart 实例
+    const emits = defineEmits(['getSelected'])
+    const props = defineProps({
+        xAxis: {
+            type: Object,
+            required: true,
+            default: () => ({})
+        },
+        yAxis: {
+            type: Array,
+            required: false
+        },
+        colors: {
+            type: Array,
+            default: () => []
+        },
+        series: {
+            type: Array,
+            required: true
+        },
+        dataset: {
+            type: Array,
+            required: false,
+            default: () => ([])
+        },
+        height: {
+            type: String,
+            required: false,
+            default: '500px'
+        },
+        width: {
+            type: String,
+            required: false,
+            default: '500px'
+        },
+        title: {
+            type: String,
+            required: false
+        },
+        subtext: {
+            type: String,
+            required: false
+        },
+        brush: {
+            type: Boolean,
+            required: false,
+            default: false
+        },
+        theme: {
+            type: Boolean,
+            default: false,
+        },
+        echartsTheme: {
+            type: String,
+            default: '',
+        },
+    })
 
-/**定义option */
-const option = computed({
-	get() {
-		return {
-			color: props.colors.length? props.colors: [
-				"rgb(50,93,171)",
-				"rgb(222,132,82)",
-				"rgb(105,188,80)",
-				"rgb(197,78,82)",
-				"rgb(129,114,181)",
-				"#005eaa",
-				"#cda819",
-				"#32a487"
-			],
-			title: {
-				text: props.title || '',
-				subtext: props.subtext || '',
-				top: 6,
-				left: '5%',
-			},
-			xAxis: props.xAxis || {},
-			yAxis: props.yAxis || {},
-			brush: {
-          seriesIndex: [1],
-          yAxisIndex: 0,
-          transformable: true,
-          throttleType: "debounce",
-          throttleDelay: 1000,
-          removeOnClick: true,
-          brushType: props.brush? "polygon" : false,
-          brushMode: "multiple",
-          brushStyle: {
-            borderWidth: 1,
-            borderColor: "#ff2424",
-          },
+    /**定义option */
+    const option = computed({
+        get() {
+            return {
+                color: props.colors.length ? props.colors : [
+                    "rgb(50,93,171)",
+                    "rgb(222,132,82)",
+                    "rgb(105,188,80)",
+                    "rgb(197,78,82)",
+                    "rgb(129,114,181)",
+                    "#005eaa",
+                    "#cda819",
+                    "#32a487"
+                ],
+                title: {
+                    text: props.title || '',
+                    subtext: props.subtext || '',
+                    top: 6,
+                    left: '5%',
+                },
+                xAxis: props.xAxis || {},
+                yAxis: props.yAxis || {},
+                brush: {
+                    seriesIndex: [1],
+                    yAxisIndex: 0,
+                    transformable: true,
+                    throttleType: "debounce",
+                    throttleDelay: 1000,
+                    removeOnClick: true,
+                    brushType: props.brush ? "polygon" : false,
+                    brushMode: "multiple",
+                    brushStyle: {
+                        borderWidth: 1,
+                        borderColor: "#ff2424",
+                    },
+                },
+                toolbox: {
+                    show: props.brush,
+                },
+                tooltip: {
+                    confine: true,
+                    trigger: "axis",
+                },
+                dataset: props.dataset || [],
+                series: props.series || [],
+                legend: {
+                    right: "120",
+                    top: "5",
+                    itemWidth: 6,
+                },
+                grid: {
+                    top: 80,
+                    left: 40,
+                    right: 40,
+                    bottom: 40,
+                },
+                dataZoom: [{
+                        type: "inside", //图表下方的伸缩条
+                        show: false, //是否显示
+                        realtime: true, //拖动时，是否实时更新系列的视图
+                        start: 0, //伸缩条开始位置（1-100），可以随时更改
+                        end: 100, //伸缩条结束位置（1-100），可以随时更改
+                    },
+                    {
+                        type: "slider", //图表下方的伸缩条
+                        show: false, //是否显示
+                        realtime: true, //拖动时，是否实时更新系列的视图
+                        start: 0, //伸缩条开始位置（1-100），可以随时更改
+                        end: 100, //伸缩条结束位置（1-100），可以随时更改
+                    },
+                ],
+            }
         },
-			toolbox:{
-				show: props.brush,
-			},
-			tooltip: {
-				confine: true,
-				trigger: "axis",
-			},
-			dataset: props.dataset || [],
-			series: props.series || [],
-			legend: {
-				right: "120",
-				top: "5",
-				itemWidth: 6,
-			},
-			grid: {
-				top: 80,
-				left: 40,
-				right: 40,
-				bottom: 40,
-			},
-			dataZoom: [
-          {
-            type: "inside", //图表下方的伸缩条
-            show: false, //是否显示
-            realtime: true, //拖动时，是否实时更新系列的视图
-            start: 0, //伸缩条开始位置（1-100），可以随时更改
-            end: 100, //伸缩条结束位置（1-100），可以随时更改
-          },
-          {
-            type: "slider", //图表下方的伸缩条
-            show: false, //是否显示
-            realtime: true, //拖动时，是否实时更新系列的视图
-            start: 0, //伸缩条开始位置（1-100），可以随时更改
-            end: 100, //伸缩条结束位置（1-100），可以随时更改
-          },
-        ],
-		}
-	},
-	set(val) { }
-})
-watch(() => option, (newVal, oldVal) => {
-	if (chartIns.value) {
-		const echartIns = toRaw(chartIns.value)
-		echartIns.setOption(toRaw(newVal.value))
-	}
-}, { deep: true })
+        set(val) {}
+    })
+    watch(() => option, (newVal, oldVal) => {
+        if (chartIns.value) {
+            const echartIns = toRaw(chartIns.value)
+            echartIns.setOption(toRaw(newVal.value))
+        }
+    }, {
+        deep: true
+    })
 
-watch([() => props.width, () => props.height],(newVal, oldVal) => {
-	if(chartIns.value){
-		const echartIns = toRaw(chartIns.value)
-		nextTick(() => echartIns.resize())
-	}
-})
-const funBrushChange = (flag) => {
-	const echartIns = toRaw(chartIns.value)
-	echartIns.dispatchAction({
-			type: "takeGlobalCursor",
-			// 如果想变为“可刷选状态”，必须设置。不设置则会关闭“可刷选状态”。
-			key: "brush",
-			brushOption: {
-				seriesIndex: [1],
-				yAxisIndex: 0,
-				transformable: true,
-				throttleType: "debounce",
-				throttleDelay: 1000,
-				removeOnClick: true,
-				brushType: flag? "polygon" : false,
-				brushMode: "multiple",
-				brushStyle: {
-					borderWidth: 1,
-					color: "rgba(255,36,36,0.2)",
-					borderColor: "#ff2424",
-				},
-			},
-		});
-	echartIns.off("brushSelected");
-	echartIns.on("brushSelected", (params) => {
-		emits("getSelected", params.batch || []);
-	});
-}
-watch(() => props.brush, (newVal, oldVal) => funBrushChange(newVal))
+    watch([() => props.width, () => props.height], (newVal, oldVal) => {
+        if (chartIns.value) {
+            const echartIns = toRaw(chartIns.value)
+            nextTick(() => echartIns.resize())
+        }
+    })
+    const funBrushChange = (flag) => {
+        const echartIns = toRaw(chartIns.value)
+        echartIns.dispatchAction({
+            type: "takeGlobalCursor",
+            // 如果想变为“可刷选状态”，必须设置。不设置则会关闭“可刷选状态”。
+            key: "brush",
+            brushOption: {
+                seriesIndex: [1],
+                yAxisIndex: 0,
+                transformable: true,
+                throttleType: "debounce",
+                throttleDelay: 1000,
+                removeOnClick: true,
+                brushType: flag ? "polygon" : false,
+                brushMode: "multiple",
+                brushStyle: {
+                    borderWidth: 1,
+                    color: "rgba(255,36,36,0.2)",
+                    borderColor: "#ff2424",
+                },
+            },
+        });
+        echartIns.off("brushSelected");
+        echartIns.on("brushSelected", (params) => {
+            emits("getSelected", params.batch || []);
+        });
+    }
+    watch(() => props.brush, (newVal, oldVal) => funBrushChange(newVal))
 
-onMounted(() => {
-	nextTick(() => {
-		echarts.registerTheme('chartTheme', chartTheme)
-		const echartIns =	echarts.init(document.getElementById(chartId),'chartTheme') 
-		chartIns.value = echartIns
-		echartIns.setOption(option.value)
-		funBrushChange(props.brush)
-		window.addEventListener('resize', () => {
-			echartIns.resize()
-		})
-	})
-})
+    onMounted(() => {
+        nextTick(() => {
+            echarts.registerTheme('chartTheme', chartTheme)
+            const echartIns = echarts.init(document.getElementById(chartId), props.echartsTheme)
+            chartIns.value = echartIns
+            echartIns.setOption(option.value)
+            funBrushChange(props.brush)
+            window.addEventListener('resize', () => {
+                echartIns.resize()
+            })
+        })
+    })
 </script>
 <template>
-	<div :id="chartId" :style="{ height: props.height, width: props.width }"></div>
+    <div :id="chartId" :style="{ height: props.height, width: props.width }"></div>
 </template>

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

@@ -61,6 +61,14 @@
                 type: Boolean,
                 default: false,
             },
+            theme: {
+                type: Boolean,
+                default: false,
+            },
+            echartsTheme: {
+                type: String,
+                default: '',
+            },
         },
         data() {
             return {
@@ -102,11 +110,10 @@
             initChart() {
                 const that = this;
                 // echarts.registerTheme('chartTheme', chartTheme)
-                let myChart = echarts.init(document.getElementById(this.id), 'dark');
+                let myChart = echarts.init(document.getElementById(this.id), that.echartsTheme);
                 that.chart = myChart
                 //指定图表的配置项和数据
                 const option = {
-                    backgroundColor: '',
                     //标题
                     title: {
                         text: that.chartTitle,
@@ -114,7 +121,7 @@
                         top: 4,
                         textStyle: {
                             fontSize: 14,
-                            color: that.theme === "dark" ? partten.getColor("grayl") : "#000",
+                            color: that.echartsTheme === "dark" ? partten.getColor("grayl") : "#000",
                         },
                     },
                     // backgroundColor:
@@ -199,7 +206,7 @@
                     ],
                     textStyle: {
                         fontSize: util.vh(16),
-                        color: that.theme === "dark" ? "#fff" : "#000",
+                        color: that.echartsTheme === "dark" ? "#fff" : "#000",
                     },
                     //图例-每一条数据的名字
                     legend: {
@@ -210,10 +217,10 @@
                         top: "5",
                         // icon: "circle",
                         itemWidth: 6,
-                        inactiveColor: that.theme === "dark" ?
+                        inactiveColor: that.echartsTheme === "dark" ?
                             "#fff" : "#000",
                         textStyle: {
-                            color: that.theme === "dark" ?
+                            color: that.echartsTheme === "dark" ?
                                 "#fff" : "#000",
                             fontSize: 12,
                         },
@@ -245,7 +252,7 @@
                         },
                         smooth: true,
                         textStyle: {
-                            color: that.theme === "dark" ?
+                            color: that.echartsTheme === "dark" ?
                                 "#fff" : "#000",
                         },
                     }, ],
@@ -266,6 +273,9 @@
                     //数据-data是最终要显示的数据
                     series: that.seriesData,
                 };
+                if (that.echartsTheme === 'dark') {
+                    option.backgroundColor = ''
+                }
 
                 that.resize = function () {
                     myChart.resize();
@@ -329,7 +339,7 @@
         },
         updated() {
             // console.log('update')
-            let myChart = echarts.init(document.getElementById(this.id), 'dark');
+            let myChart = echarts.init(document.getElementById(this.id), this.echartsTheme);
             myChart.dispose();
             this.$nextTick(() => {
                 this.initChart();

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

@@ -1,35 +1,38 @@
 <template>
-    <div class="dataAnalysisLineAna">
-        <p>曲线偏差率分析</p>
-        <div class="main">
-            <div class="treeDataMain">
-                <tree-cop ref="treeCopRef" :data="treeData" @checkChange="funTreeCheckChange" :show-checkbox="true"
-                    :height="treeHeight" @currentChange="funCurrentChange" @refresh="funGetTree"></tree-cop>
-            </div>
-            <div class="excelDataMain">
-                <excel-cop :checkIds="excelCheckIds" :showCheckbox="excelCheckboxShow" :data="excelList"
-                    :height="excelHeight" @excelChange="funExcelChange" @checkChange="funExcelCheckChange">
-                </excel-cop>
-            </div>
-            <div class="tableDataMain">
-                <div class="px-[10px] shadow rounded-[6px] shadow-blue-500">
-                    <SubmitBtn class="absolute right-[196px] top-[6px] z-10" desc="区域划分" @click="funChartArea">
-                    </SubmitBtn>
-                    <SubmitBtn class="absolute right-[106px] top-[6px] z-10" desc="时间占比" @click="funTimeArea">
-                    </SubmitBtn>
-                    <SubmitBtn class="absolute right-[16px] top-[6px] z-10" desc="额定功率" @click="funPower">
-                    </SubmitBtn>
-                    <div :style="{
-                height:
-                  typeof tableHeight === 'string'
-                    ? tableHeight
-                    : tableHeight + 'px',
-								overflow: 'hidden'
-              }" class="p-[10px]">
-                        <CurrentScatterChart ref="chartRef" width="100%" :height="`calc( ${tableHeight} - 40px )`"
-                            chartTitle="" :xAxisData="xAxisData" :yAxisData="{ splitLine: { show: false } }"
-                            :seriesData="seriesData" :showLegend="true" :brushSelected="!isChartArea" :dataSet="dataSet"
-                            @getSelected="funChartSelect" />
+    <div class="dataAnalysisLineAna" :class="!theme ? 'themeDark' : 'themeLight'">
+        <div class="dataAnalysisLineAnaMain">
+            <p>曲线偏差率分析</p>
+            <div class="main">
+                <div class="treeDataMain">
+                    <tree-cop ref="treeCopRef" :data="treeData" @checkChange="funTreeCheckChange" :show-checkbox="true"
+                        :height="treeHeight" @currentChange="funCurrentChange" @refresh="funGetTree"></tree-cop>
+                </div>
+                <div class="excelDataMain">
+                    <excel-cop :checkIds="excelCheckIds" :showCheckbox="excelCheckboxShow" :data="excelList"
+                        :height="excelHeight" @excelChange="funExcelChange" @checkChange="funExcelCheckChange">
+                    </excel-cop>
+                </div>
+                <div class="tableDataMain">
+                    <div class="px-[10px] shadow rounded-[6px] shadow-blue-500">
+                        <SubmitBtn class="absolute right-[196px] top-[6px] z-10" desc="区域划分" @click="funChartArea">
+                        </SubmitBtn>
+                        <SubmitBtn class="absolute right-[106px] top-[6px] z-10" desc="时间占比" @click="funTimeArea">
+                        </SubmitBtn>
+                        <SubmitBtn class="absolute right-[16px] top-[6px] z-10" desc="额定功率" @click="funPower">
+                        </SubmitBtn>
+                        <div :style="{
+                    height:
+                    typeof tableHeight === 'string'
+                        ? tableHeight
+                        : tableHeight + 'px',
+                                    overflow: 'hidden'
+                }" class="p-[10px]">
+                            <CurrentScatterChart ref="chartRef" width="100%" :height="`calc( ${tableHeight} - 40px )`"
+                                chartTitle="" :xAxisData="xAxisData" :yAxisData="{ splitLine: { show: false } }"
+                                :seriesData="seriesData" :showLegend="true" :brushSelected="!isChartArea"
+                                :dataSet="dataSet" @getSelected="funChartSelect" :theme="theme"
+                                :echartsTheme="echartsTheme" />
+                        </div>
                     </div>
                 </div>
             </div>
@@ -79,7 +82,11 @@
         onActivated,
         onMounted,
         reactive,
+        watch
     } from 'vue'
+    import {
+        useStore
+    } from 'vuex';
     import httpRequest from '@/utils/request.js'
     import {
         ElMessage
@@ -90,9 +97,9 @@
     // import tableRes from '@/data/table.json'
     // import areaDataRes from '@/data/areaData.json'
     /**配置参数 */
-    const treeHeight = ref(window.innerHeight - 160 + 'px') //tree高度
-    const excelHeight = ref(window.innerHeight - 160 + 'px') //excel高度
-    const tableHeight = ref(window.innerHeight - 160 + 'px')
+    const treeHeight = ref(window.innerHeight - 190 + 'px') //tree高度
+    const excelHeight = ref(window.innerHeight - 190 + 'px') //excel高度
+    const tableHeight = ref(window.innerHeight - 190 + 'px')
     /**excel 开始 */
     const excelCheckboxShow = ref(false)
     const excelCheckIds = ref([])
@@ -625,16 +632,28 @@
     /**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()
+    }, {
+        deep: true
+    })
     /**mounted */
     onMounted(() => {
         funGetTree()
-        tableHeight.value = window.innerHeight - 160 + 'px'
-        excelHeight.value = window.innerHeight - 160 + 'px'
-        treeHeight.value = window.innerHeight - 160 + 'px'
+        theme.value = store.state.theme
+        echartsTheme.value = !theme.value ? 'dark' : ''
+        tableHeight.value = window.innerHeight - 190 + 'px'
+        excelHeight.value = window.innerHeight - 190 + 'px'
+        treeHeight.value = window.innerHeight - 190 + 'px'
         window.addEventListener('resize', () => {
-            tableHeight.value = window.innerHeight - 160 + 'px'
-            excelHeight.value = window.innerHeight - 160 + 'px'
-            treeHeight.value = window.innerHeight - 160 + 'px'
+            tableHeight.value = window.innerHeight - 190 + 'px'
+            excelHeight.value = window.innerHeight - 190 + 'px'
+            treeHeight.value = window.innerHeight - 190 + 'px'
         })
         /**test */
         // funExcelChange({
@@ -655,7 +674,7 @@
 
         p {
             font-size: 16px;
-            color: #fff;
+            margin-bottom: 10px;
             margin-left: 20px;
         }
 
@@ -668,7 +687,6 @@
             .treeDataMain,
             .excelDataMain,
             .tableDataMain {
-                background: #161f1e;
                 padding: 10px;
                 border-radius: 10px;
             }
@@ -676,17 +694,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 {
@@ -706,4 +713,39 @@
 
         }
     }
+
+    .themeDark {
+
+        p {
+            color: #fff;
+        }
+
+        .treeDataMain,
+        .excelDataMain,
+        .tableDataMain {
+            background: #161f1e;
+        }
+
+    }
+
+    .themeLight {
+        padding: 0;
+
+        p {
+            color: #000;
+        }
+
+        .treeDataMain,
+        .excelDataMain,
+        .tableDataMain {
+            background: #edeffb;
+        }
+
+        .dataAnalysisLineAnaMain {
+            padding: 20px 0;
+            border-radius: 10px;
+            background: #fff;
+        }
+
+    }
 </style>

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

@@ -1,29 +1,32 @@
 <template>
-    <div class="dataAnalysisPosAnal">
-        <p>微观选址分析</p>
-        <div class="main">
-            <div class="treeDataMain">
-                <tree-cop ref="treeCopRef" :data="treeData" @checkChange="funTreeCheckChange" :show-checkbox="false"
-                    :height="treeHeight" @currentChange="funCurrentChange" @refresh="funGetTree"></tree-cop>
-            </div>
-            <div class="excelDataMain">
-                <excel-cop :checkIds="excelCheckIds" :showCheckbox="excelCheckboxShow" :data="excelList"
-                    :height="excelHeight" @excelChange="funExcelChange" @checkChange="funExcelCheckChange"></excel-cop>
-            </div>
-            <div class="tableDataMain">
-                <div class="shadow rounded-[6px] shadow-blue-500 overflow-hidden">
-                    <div :style="{
-                height:
-                  typeof tableHeight === 'string'
-                    ? tableHeight
-                    : tableHeight + 'px',
-                overflow: 'hidden',
-              }">
-                        <posChart @mapDone="funMapDone" @rightClick="funRightClick" :height="tableHeight"
-                            :windList="windList" v-if="showOnlineMap" />
-                        <!-- v-if="showOnlineMap" -->
-                        <kMap :parentId="treeId" :ids="excelCheckIds" @mapDone="funMapDone" @rightClick="funRightClick"
-                            v-else />
+    <div class="dataAnalysisPosAnal" :class="!theme ? 'themeDark' : 'themeLight'">
+        <div class="dataAnalysisPosAnalMain">
+            <p>微观选址分析</p>
+            <div class="main">
+                <div class="treeDataMain">
+                    <tree-cop ref="treeCopRef" :data="treeData" @checkChange="funTreeCheckChange" :show-checkbox="false"
+                        :height="treeHeight" @currentChange="funCurrentChange" @refresh="funGetTree"></tree-cop>
+                </div>
+                <div class="excelDataMain">
+                    <excel-cop :checkIds="excelCheckIds" :showCheckbox="excelCheckboxShow" :data="excelList"
+                        :height="excelHeight" @excelChange="funExcelChange" @checkChange="funExcelCheckChange">
+                    </excel-cop>
+                </div>
+                <div class="tableDataMain">
+                    <div class="shadow rounded-[6px] shadow-blue-500 overflow-hidden">
+                        <div :style="{
+                    height:
+                    typeof tableHeight === 'string'
+                        ? tableHeight
+                        : tableHeight + 'px',
+                    overflow: 'hidden',
+                }">
+                            <posChart @mapDone="funMapDone" @rightClick="funRightClick" :height="tableHeight"
+                                :windList="windList" v-if="showOnlineMap" />
+                            <!-- v-if="showOnlineMap" -->
+                            <kMap :parentId="treeId" :ids="excelCheckIds" @mapDone="funMapDone"
+                                @rightClick="funRightClick" v-else />
+                        </div>
                     </div>
                 </div>
             </div>
@@ -173,9 +176,9 @@
     import httpRequest from '@/utils/request.js'
     const router = useRouter();
     /**配置参数 */
-    const treeHeight = ref(window.innerHeight - 160 + "px"); //tree高度
-    const excelHeight = ref(window.innerHeight - 160 + "px"); //excel高度
-    const tableHeight = ref(window.innerHeight - 160 + "px");
+    const treeHeight = ref(window.innerHeight - 170 + "px"); //tree高度
+    const excelHeight = ref(window.innerHeight - 170 + "px"); //excel高度
+    const tableHeight = ref(window.innerHeight - 170 + "px");
     /**excel 开始 */
     const excelCheckboxShow = ref(false);
     const excelCheckIds = ref([]);
@@ -1192,17 +1195,28 @@
         }
     };
 
+    const theme = ref(null)
+    const echartsTheme = ref('')
+    watch(() => store.state.theme, (newVal, oldVal) => {
+        theme.value = newVal
+        echartsTheme.value = !newVal ? 'dark' : ''
+        funGetTree()
+    }, {
+        deep: true
+    })
+
     /**mounted */
     onMounted(() => {
         funGetTree();
-
-        tableHeight.value = window.innerHeight - 160 + "px";
-        excelHeight.value = window.innerHeight - 160 + "px";
-        treeHeight.value = window.innerHeight - 160 + "px";
+        theme.value = store.state.theme
+        echartsTheme.value = !theme.value ? 'dark' : ''
+        tableHeight.value = window.innerHeight - 170 + "px";
+        excelHeight.value = window.innerHeight - 170 + "px";
+        treeHeight.value = window.innerHeight - 170 + "px";
         window.addEventListener("resize", () => {
-            tableHeight.value = window.innerHeight - 160 + "px";
-            excelHeight.value = window.innerHeight - 160 + "px";
-            treeHeight.value = window.innerHeight - 160 + "px";
+            tableHeight.value = window.innerHeight - 170 + "px";
+            excelHeight.value = window.innerHeight - 170 + "px";
+            treeHeight.value = window.innerHeight - 170 + "px";
         });
         /**test */
         // funExcelChange({
@@ -1229,8 +1243,8 @@
 
         p {
             font-size: 16px;
-            color: #fff;
             margin-left: 20px;
+            margin-bottom: 10px;
         }
 
         .main {
@@ -1242,7 +1256,6 @@
             .treeDataMain,
             .excelDataMain,
             .tableDataMain {
-                background: #161f1e;
                 padding: 10px;
                 border-radius: 10px;
             }
@@ -1250,17 +1263,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 {
@@ -1295,4 +1297,39 @@
             overflow: hidden;
         }
     }
+
+    .themeDark {
+
+        p {
+            color: #fff;
+        }
+
+        .treeDataMain,
+        .excelDataMain,
+        .tableDataMain {
+            background: #161f1e;
+        }
+
+    }
+
+    .themeLight {
+        padding: 0;
+
+        p {
+            color: #000;
+        }
+
+        .treeDataMain,
+        .excelDataMain,
+        .tableDataMain {
+            background: #edeffb;
+        }
+
+        .dataAnalysisPosAnalMain {
+            padding: 20px 0;
+            border-radius: 10px;
+            background: #fff;
+        }
+
+    }
 </style>

src/views/generatingCapacity/dataAnalysis/rateAnalysis/components/chart.vue

@@ -52,7 +52,15 @@
         isRadar: {
             type: Boolean,
             default: false
-        }
+        },
+        theme: {
+            type: Boolean,
+            default: false
+        },
+        echartsTheme: {
+            type: String,
+            default: ''
+        },
     })
 
     /**定义option */
@@ -152,15 +160,23 @@
 
     onMounted(() => {
         nextTick(() => {
-            echarts.registerTheme('chartTheme', chartTheme)
-            const echartIns = echarts.init(document.getElementById(chartId), 'dark')
-            chartIns.value = echartIns
-            echartIns.setOption(option.value)
-            window.addEventListener('resize', () => {
-                echartIns.resize()
-            })
+            init()
         })
     })
+
+    watch(() => props.echartsTheme, (newVal, oldVal) => init())
+
+    const init = () => {
+        echarts.registerTheme('chartTheme', chartTheme)
+        const echartIns = echarts.init(document.getElementById(chartId), props.echartsTheme)
+        document.getElementById(chartId).removeAttribute("_echarts_instance_") ? document.getElementById(chartId)
+            .removeAttribute("_echarts_instance_") : ''
+        chartIns.value = echartIns
+        echartIns.setOption(option.value)
+        window.addEventListener('resize', () => {
+            echartIns.resize()
+        })
+    }
 </script>
 <template>
     <div :id="chartId" :style="{ height: props.height, width: props.width }"></div>

src/views/generatingCapacity/dataAnalysis/rateAnalysis/components/lineChart.vue

@@ -57,7 +57,15 @@
             type: Boolean,
             required: false,
             default: false
-        }
+        },
+        theme: {
+            type: Boolean,
+            default: false
+        },
+        echartsTheme: {
+            type: String,
+            default: ''
+        },
     })
 
     /**定义option */
@@ -195,16 +203,24 @@
 
     onMounted(() => {
         nextTick(() => {
-            echarts.registerTheme('chartTheme', chartTheme)
-            const echartIns = echarts.init(document.getElementById(chartId), 'dark')
-            chartIns.value = echartIns
-            echartIns.setOption(option.value)
-            funBrushChange(props.brush)
-            window.addEventListener('resize', () => {
-                echartIns.resize()
-            })
+            init()
         })
     })
+
+    watch(() => props.echartsTheme, (newVal, oldVal) => init())
+
+    const init = () => {
+        echarts.registerTheme('chartTheme', chartTheme)
+        const echartIns = echarts.init(document.getElementById(chartId), props.echartsTheme)
+        document.getElementById(chartId).removeAttribute("_echarts_instance_") ? document.getElementById(chartId)
+            .removeAttribute("_echarts_instance_") : ''
+        chartIns.value = echartIns
+        echartIns.setOption(option.value)
+        funBrushChange(props.brush)
+        window.addEventListener('resize', () => {
+            echartIns.resize()
+        })
+    }
 </script>
 <template>
     <div :id="chartId" :style="{ height: '100%', width: props.width }"></div>

src/views/generatingCapacity/dataAnalysis/rateAnalysis/components/scatterSingleChart.vue

@@ -51,6 +51,14 @@
             required: false,
             default: '500px'
         },
+        theme: {
+            type: Boolean,
+            default: false
+        },
+        echartsTheme: {
+            type: String,
+            default: ''
+        },
     })
 
     /**定义option */
@@ -154,15 +162,23 @@
     })
     onMounted(() => {
         nextTick(() => {
-            echarts.registerTheme('chartTheme', chartTheme)
-            const echartIns = echarts.init(document.getElementById(chartId), 'dark')
-            chartIns.value = echartIns
-            echartIns.setOption(option.value)
-            window.addEventListener('resize', () => {
-                echartIns.resize()
-            })
+            init()
         })
     })
+
+    watch(() => props.echartsTheme, (newVal, oldVal) => init())
+
+    const init = () => {
+        echarts.registerTheme('chartTheme', chartTheme)
+        const echartIns = echarts.init(document.getElementById(chartId), props.echartsTheme)
+        document.getElementById(chartId).removeAttribute("_echarts_instance_") ? document.getElementById(chartId)
+            .removeAttribute("_echarts_instance_") : ''
+        chartIns.value = echartIns
+        echartIns.setOption(option.value)
+        window.addEventListener('resize', () => {
+            echartIns.resize()
+        })
+    }
 </script>
 <template>
     <div :id="chartId" :style="{ height: '100%', width: props.width }"></div>

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

@@ -1,44 +1,50 @@
 <template>
-    <div class="rateAnalysis">
-        <p>对风偏差分析</p>
-        <div class="main">
-            <div class="treeDataMain">
-                <tree-cop :data="treeData" @checkChange="funTreeCheckChange" :show-checkbox="false" :height="treeHeight"
-                    @currentChange="funCurrentChange" @refresh="funGetTree">
-                </tree-cop>
-            </div>
-            <div class="excelDataMain">
-                <excel-cop :checkIds="excelCheckIds" :showCheckbox="false" :data="excelList" :height="excelHeight"
-                    @excelChange="funExcelChange" @checkChange="funExcelCheckChange"></excel-cop>
-            </div>
-            <div class="tableDataMain">
-                <el-row :style="{ height: tableHeight }">
-                    <el-col :span="12" v-for="(item, index) in chartData" :key="item.id" style="height: 45%">
-                        <el-icon style="color: #fff" size="18" @click="funActCop(item, 'chartCop' + (index + 1))">
-                            <ZoomIn />
-                        </el-icon>
-                        <chart-cop class="" height="100%" width="100%" :xAxis="item.xAxis" :isRadar="item.isRadar"
-                            :subtext="item.subtext" :title="item.title" :series="item.series">
-                        </chart-cop>
-                    </el-col>
-                    <el-col :span="12" v-if="!!lineSeries.length" style="height: 50%">
-                        <el-icon style="color: #fff" size="18"
-                            @click="funActCop({ xAxis: linexAxis, yAxis: lineyAxis, series: lineSeries, dataset: lineDataSet }, 'lineChartCop')">
-                            <ZoomIn />
-                        </el-icon>
-                        <line-chart-cop class="" height="100%" width="100%" :xAxis="linexAxis" :yAxis="lineyAxis"
-                            :series="lineSeries" subtext="对风偏差分析图" :dataset="lineDataSet"></line-chart-cop>
-                    </el-col>
-                    <el-col :span="12" v-if="!!lineSeries.length" style="height: 50%">
-                        <el-icon style="color: #fff" size="18"
-                            @click="funActCop({ xAxis: scatterxData, yAxis: scatteryData, series: scatterSeries }, 'scatterSingleChartCop')">
-                            <ZoomIn />
-                        </el-icon>
-                        <scatter-single-chart-cop class="" height="95%" width="100%" :xAxis="scatterxData"
-                            :yAxis="scatteryData" :series="scatterSeries" subtext="静态偏航对风分析图">
-                        </scatter-single-chart-cop>
-                    </el-col>
-                </el-row>
+    <div class="rateAnalysis" :class="!theme ? 'themeDark' : 'themeLight'">
+        <div class="rateAnalysisMain">
+            <p class="ratetitle">对风偏差分析</p>
+            <div class="main">
+                <div class="treeDataMain">
+                    <tree-cop :data="treeData" @checkChange="funTreeCheckChange" :show-checkbox="false"
+                        :height="treeHeight" @currentChange="funCurrentChange" @refresh="funGetTree">
+                    </tree-cop>
+                </div>
+                <div class="excelDataMain">
+                    <excel-cop :checkIds="excelCheckIds" :showCheckbox="false" :data="excelList" :height="excelHeight"
+                        @excelChange="funExcelChange" @checkChange="funExcelCheckChange" :theme="theme"></excel-cop>
+                </div>
+                <div class="tableDataMain">
+                    <el-row :style="{ height: tableHeight }">
+                        <el-col :span="12" v-for="(item, index) in chartData" :key="item.id" style="height: 45%">
+                            <el-icon :style="!theme ? 'color: #fff' : ''" size="18"
+                                @click="funActCop(item, 'chartCop' + (index + 1))">
+                                <ZoomIn />
+                            </el-icon>
+                            <chart-cop class="" height="100%" width="100%" :xAxis="item.xAxis" :isRadar="item.isRadar"
+                                :theme="theme" :echartsTheme="echartsTheme" :subtext="item.subtext" :title="item.title"
+                                :series="item.series">
+                            </chart-cop>
+                        </el-col>
+                        <el-col :span="12" v-if="!!lineSeries.length" style="height: 50%">
+                            <el-icon :style="!theme ? 'color: #fff' : ''" size="18"
+                                @click="funActCop({ xAxis: linexAxis, yAxis: lineyAxis, series: lineSeries, dataset: lineDataSet }, 'lineChartCop')">
+                                <ZoomIn />
+                            </el-icon>
+                            <line-chart-cop class="" height="100%" width="100%" :xAxis="linexAxis" :yAxis="lineyAxis"
+                                :theme="theme" :echartsTheme="echartsTheme" :series="lineSeries" subtext="对风偏差分析图"
+                                :dataset="lineDataSet"></line-chart-cop>
+                        </el-col>
+                        <el-col :span="12" v-if="!!lineSeries.length" style="height: 50%">
+                            <el-icon :style="!theme ? 'color: #fff' : ''" size="18"
+                                @click="funActCop({ xAxis: scatterxData, yAxis: scatteryData, series: scatterSeries }, 'scatterSingleChartCop')">
+                                <ZoomIn />
+                            </el-icon>
+                            <scatter-single-chart-cop class="" height="95%" width="100%" :xAxis="scatterxData"
+                                :theme="theme" :echartsTheme="echartsTheme" :yAxis="scatteryData"
+                                :series="scatterSeries" subtext="静态偏航对风分析图">
+                            </scatter-single-chart-cop>
+                        </el-col>
+                    </el-row>
+                </div>
             </div>
         </div>
         <el-dialog v-model="wtDialog" draggable title="风机功率点位">
@@ -102,16 +108,20 @@
         onActivated,
         shallowRef,
         reactive,
-        nextTick
+        nextTick,
+        watch
     } from 'vue'
+    import {
+        useStore
+    } from 'vuex';
     import httpRequest from '@/utils/request.js'
     import tools from '@tools/htmlToPdf.js'
     // import flowerRes from '@/data/flower.json'
     // import lineChartRes from '@/data/lineNew.json'
     /**配置参数 */
-    const treeHeight = ref(window.innerHeight - 150 + 'px') //tree高度
-    const excelHeight = ref(window.innerHeight - 150 + 'px') //excel高度
-    const tableHeight = ref(window.innerHeight - 150 + 'px')
+    const treeHeight = ref(window.innerHeight - 160 + 'px') //tree高度
+    const excelHeight = ref(window.innerHeight - 160 + 'px') //excel高度
+    const tableHeight = ref(window.innerHeight - 160 + 'px')
     /**excel 开始 */
     const excelCheckIds = ref([])
     const excelList = ref([])
@@ -829,19 +839,31 @@
     }
     /**created */
     // funGetTree()
+    const theme = ref(null)
+    const echartsTheme = ref('')
+    const store = useStore()
+    watch(() => store.state.theme, (newVal, oldVal) => {
+        theme.value = newVal
+        echartsTheme.value = !newVal ? 'dark' : ''
+        funGetTree()
+    }, {
+        deep: true
+    })
     /**activated */
     onMounted(() => {
         funGetTree()
         //test
         // funSubmit()
         //
-        tableHeight.value = window.innerHeight - 150 + 'px'
-        excelHeight.value = (window.innerHeight - 150) + 'px'
-        treeHeight.value = (window.innerHeight - 150) + 'px'
+        theme.value = store.state.theme
+        echartsTheme.value = !theme.value ? 'dark' : ''
+        tableHeight.value = window.innerHeight - 160 + 'px'
+        excelHeight.value = (window.innerHeight - 160) + 'px'
+        treeHeight.value = (window.innerHeight - 160) + 'px'
         window.addEventListener('resize', () => {
-            tableHeight.value = window.innerHeight - 150 + 'px'
-            excelHeight.value = (window.innerHeight - 150) + 'px'
-            treeHeight.value = (window.innerHeight - 150) + 'px'
+            tableHeight.value = window.innerHeight - 160 + 'px'
+            excelHeight.value = (window.innerHeight - 160) + 'px'
+            treeHeight.value = (window.innerHeight - 160) + 'px'
         })
     })
 </script>
@@ -852,7 +874,6 @@
 
         p {
             font-size: 16px;
-            color: #fff;
         }
 
         .main {
@@ -864,7 +885,6 @@
             .treeDataMain,
             .excelDataMain,
             .tableDataMain {
-                background: #161f1e;
                 padding: 10px;
                 border-radius: 10px;
             }
@@ -872,17 +892,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 {
@@ -908,4 +917,41 @@
         }
 
     }
+
+    .themeDark {
+
+        p {
+            color: #fff;
+        }
+
+        .treeDataMain,
+        .excelDataMain,
+        .tableDataMain {
+            background: #161f1e;
+        }
+
+    }
+
+    .themeLight {
+        padding: 0;
+
+        .ratetitle {
+            color: #000;
+            margin-left: 20px;
+            margin-bottom: 10px;
+        }
+
+        .treeDataMain,
+        .excelDataMain,
+        .tableDataMain {
+            background: #edeffb;
+        }
+
+        .rateAnalysisMain {
+            padding: 20px 0;
+            border-radius: 10px;
+            background: #fff;
+        }
+
+    }
 </style>

src/views/generatingCapacity/dataAnalysis/spaceAnalysis/components/barChart.vue

@@ -57,7 +57,15 @@
             type: Boolean,
             required: false,
             default: false
-        }
+        },
+        theme: {
+            type: Boolean,
+            default: false,
+        },
+        echartsTheme: {
+            type: String,
+            default: '',
+        },
     })
 
     /**定义option */
@@ -194,16 +202,24 @@
 
     onMounted(() => {
         nextTick(() => {
-            echarts.registerTheme('chartTheme', chartTheme)
-            const echartIns = echarts.init(document.getElementById(chartId), 'dark')
-            chartIns.value = echartIns
-            echartIns.setOption(option.value)
-            funBrushChange(props.brush)
-            window.addEventListener('resize', () => {
-                echartIns.resize()
-            })
+            init()
         })
     })
+
+    watch(() => props.echartsTheme, (newVal, oldVal) => init())
+
+    const init = () => {
+        echarts.registerTheme('chartTheme', chartTheme)
+        const echartIns = echarts.init(document.getElementById(chartId), props.echartsTheme)
+        document.getElementById(chartId).removeAttribute("_echarts_instance_") ? document.getElementById(chartId)
+            .removeAttribute("_echarts_instance_") : ''
+        chartIns.value = echartIns
+        echartIns.setOption(option.value)
+        funBrushChange(props.brush)
+        window.addEventListener('resize', () => {
+            echartIns.resize()
+        })
+    }
 </script>
 <template>
     <div :id="chartId" :style="{ height: props.height, width: props.width }"></div>

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

@@ -1,33 +1,37 @@
 <template>
-    <div class="dataAnalysisSpaceAna">
-        <p>毛容量分析</p>
-        <div class="main">
-            <div class="treeDataMain">
-                <tree-cop :data="treeData" @checkChange="funTreeCheckChange" :show-checkbox="false" :height="treeHeight"
-                    @currentChange="funCurrentChange" @refresh="funGetTree">
-                </tree-cop>
-            </div>
-            <div class="excelDataMain">
-                <excel-cop :checkIds="excelCheckIds" :showCheckbox="false" :data="excelList" :height="excelHeight"
-                    @excelChange="funExcelChange" @checkChange="funExcelCheckChange"></excel-cop>
-            </div>
-            <div class="tableDataMain">
-                <div :style="{ height: tableHeight }">
-                    <div style="height: 49%">
-                        <el-icon class="chartIcon" size="18"
-                            @click="funActCop({xAxis:barxAxis, yAxis:baryAxis, series: barSeries}, 'barChartCop')">
-                            <ZoomIn />
-                        </el-icon>
-                        <bar-chart-cop width="100%" height="100%" :subtext="`${windName} 平均风速 ${avgSpeed}`"
-                            :xAxis="barxAxis" :yAxis="baryAxis" :series="barSeries"></bar-chart-cop>
-                    </div>
-                    <div style="height: 49%">
-                        <el-icon class="chartIcon" size="18"
-                            @click="funActCop({xAxis:linexAxis, yAxis:lineyAxis, series: lineSeries}, 'lineChartCop')">
-                            <ZoomIn />
-                        </el-icon>
-                        <bar-chart-cop width="100%" height="100%" :subtext="`${windName} 平均毛容量系数 ${avgMrxs}`"
-                            :xAxis="linexAxis" :yAxis="lineyAxis" :series="lineSeries"></bar-chart-cop>
+    <div class="dataAnalysisSpaceAna" :class="!theme ? 'themeDark' : 'themeLight'">
+        <div class="dataAnalysisSpaceAnaMain">
+            <p>毛容量分析</p>
+            <div class="main">
+                <div class="treeDataMain">
+                    <tree-cop :data="treeData" @checkChange="funTreeCheckChange" :show-checkbox="false"
+                        :height="treeHeight" @currentChange="funCurrentChange" @refresh="funGetTree">
+                    </tree-cop>
+                </div>
+                <div class="excelDataMain">
+                    <excel-cop :checkIds="excelCheckIds" :showCheckbox="false" :data="excelList" :height="excelHeight"
+                        :theme="theme" @excelChange="funExcelChange" @checkChange="funExcelCheckChange"></excel-cop>
+                </div>
+                <div class="tableDataMain">
+                    <div :style="{ height: tableHeight }">
+                        <div style="height: 49%">
+                            <el-icon :style="!theme ? 'color: #fff' : ''" class="chartIcon" size="18"
+                                @click="funActCop({xAxis:barxAxis, yAxis:baryAxis, series: barSeries}, 'barChartCop')">
+                                <ZoomIn />
+                            </el-icon>
+                            <bar-chart-cop width="100%" height="100%" :subtext="`${windName} 平均风速 ${avgSpeed}`"
+                                :theme="theme" :echartsTheme="echartsTheme" :xAxis="barxAxis" :yAxis="baryAxis"
+                                :series="barSeries"></bar-chart-cop>
+                        </div>
+                        <div style="height: 49%">
+                            <el-icon :style="!theme ? 'color: #fff' : ''" class="chartIcon" size="18"
+                                @click="funActCop({xAxis:linexAxis, yAxis:lineyAxis, series: lineSeries}, 'lineChartCop')">
+                                <ZoomIn />
+                            </el-icon>
+                            <bar-chart-cop width="100%" height="100%" :subtext="`${windName} 平均毛容量系数 ${avgMrxs}`"
+                                :theme="theme" :echartsTheme="echartsTheme" :xAxis="linexAxis" :yAxis="lineyAxis"
+                                :series="lineSeries"></bar-chart-cop>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -69,14 +73,18 @@
         onActivated,
         shallowRef,
         reactive,
-        nextTick
+        nextTick,
+        watch
     } from 'vue'
+    import {
+        useStore
+    } from 'vuex';
     import httpRequest from '@/utils/request.js'
     import tools from '@tools/htmlToPdf.js'
     /**配置参数 */
-    const treeHeight = ref(window.innerHeight - 150 + 'px') //tree高度
-    const excelHeight = ref(window.innerHeight - 150 + 'px') //excel高度
-    const tableHeight = ref(window.innerHeight - 150 + 'px')
+    const treeHeight = ref(window.innerHeight - 160 + 'px') //tree高度
+    const excelHeight = ref(window.innerHeight - 160 + 'px') //excel高度
+    const tableHeight = ref(window.innerHeight - 160 + 'px')
     /**excel 开始 */
     const excelCheckIds = ref([])
     const excelList = ref([])
@@ -204,24 +212,25 @@
                     chart.preData.sort((a, b) => {
                         return new Date(a.time).getTime() - new Date(b.time).getTime()
                     })
-                    const xAxisData = [],
+                    let xAxisData = [],
                         barData1 = [],
                         barData2 = [],
                         lineData1 = [],
                         lineData2 = []
                     let avgSpeedSum = 0,
                         avgMrxsSum = 0
-                    for (const current of chart.currentData) {
+                    chart.currentData.forEach(current => {
                         xAxisData.push(current.time)
                         barData1.push(current.avgspeed)
                         avgSpeedSum += current.avgspeed
                         avgMrxsSum += current.mrxs
                         lineData1.push((current.mrxs * 100).toFixed(2))
-                    }
-                    for (const current of chart.preData) {
+                    });
+                    chart.preData.forEach(current => {
+                        xAxisData.push(current.time)
                         barData2.push(current.avgspeed)
                         lineData2.push((current.mrxs * 100).toFixed(2))
-                    }
+                    });
                     avgSpeed.value = (avgSpeedSum / barData1.length).toFixed(2) + ' m/s'
                     avgMrxs.value = (avgMrxsSum / lineData1.length * 100).toFixed(2) + ' %'
                     windName.value = chart.wtId
@@ -609,20 +618,31 @@
     }
     /**created */
     // funGetTree()
+    const theme = ref(null)
+    const echartsTheme = ref('')
+    const store = useStore()
+    watch(() => store.state.theme, (newVal, oldVal) => {
+        theme.value = newVal
+        echartsTheme.value = !newVal ? 'dark' : ''
+        funGetTree()
+    }, {
+        deep: true
+    })
     /**activated */
     onMounted(() => {
         //test
         // funSubmit()
         //
         funGetTree()
-
-        tableHeight.value = window.innerHeight - 150 + 'px'
-        excelHeight.value = (window.innerHeight - 150) + 'px'
-        treeHeight.value = (window.innerHeight - 150) + 'px'
+        theme.value = store.state.theme
+        echartsTheme.value = !theme.value ? 'dark' : ''
+        tableHeight.value = window.innerHeight - 160 + 'px'
+        excelHeight.value = (window.innerHeight - 160) + 'px'
+        treeHeight.value = (window.innerHeight - 160) + 'px'
         window.addEventListener('resize', () => {
-            tableHeight.value = window.innerHeight - 150 + 'px'
-            excelHeight.value = (window.innerHeight - 150) + 'px'
-            treeHeight.value = (window.innerHeight - 150) + 'px'
+            tableHeight.value = window.innerHeight - 160 + 'px'
+            excelHeight.value = (window.innerHeight - 160) + 'px'
+            treeHeight.value = (window.innerHeight - 160) + 'px'
         })
     })
     onActivated(() => {
@@ -636,8 +656,8 @@
 
         p {
             font-size: 16px;
-            color: #fff;
             margin-left: 20px;
+            margin-bottom: 10px;
         }
 
         .main {
@@ -649,7 +669,6 @@
             .treeDataMain,
             .excelDataMain,
             .tableDataMain {
-                background: #161f1e;
                 padding: 10px;
                 border-radius: 10px;
             }
@@ -657,17 +676,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 {
@@ -679,7 +687,6 @@
                 position: relative;
 
                 .chartIcon {
-                    color: #fff;
                     cursor: pointer;
                 }
 
@@ -692,4 +699,39 @@
 
         }
     }
+
+    .themeDark {
+
+        p {
+            color: #fff;
+        }
+
+        .treeDataMain,
+        .excelDataMain,
+        .tableDataMain {
+            background: #161f1e;
+        }
+
+    }
+
+    .themeLight {
+        padding: 0;
+
+        p {
+            color: #000;
+        }
+
+        .treeDataMain,
+        .excelDataMain,
+        .tableDataMain {
+            background: #edeffb;
+        }
+
+        .dataAnalysisSpaceAnaMain {
+            padding: 20px 0;
+            border-radius: 10px;
+            background: #fff;
+        }
+
+    }
 </style>

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

@@ -1,34 +1,36 @@
 <template>
-    <div class="dataAnalysisWindAna">
-        <p>损失电量分析</p>
-        <div class="main">
-            <div class="treeDataMain">
-                <tree-cop ref="treeCopRef" :data="treeData" @checkChange="funTreeCheckChange" :show-checkbox="true"
-                    :height="treeHeight" @currentChange="funCurrentChange" @refresh="funGetTree"></tree-cop>
-            </div>
-            <div class="excelDataMain">
-                <excel-cop :checkIds="excelCheckIds" :showCheckbox="excelCheckboxShow" :data="excelList"
-                    :height="excelHeight" @excelChange="funExcelChange" @checkChange="funExcelCheckChange">
-                </excel-cop>
-            </div>
-            <div class="tableDataMain">
-                <div class="px-[10px] shadow rounded-[6px] shadow-blue-500 ">
-                    <el-tabs v-model="activeTab">
-                        <el-tab-pane label="表格数据" name="1">
-                        </el-tab-pane>
-                        <el-tab-pane label="图表展示" name="2">
-                        </el-tab-pane>
-                        <table-cop class="" v-show="activeTab === '1'" :data="tableData" :showSummary="true"
-                            :summaryMethod="funSummary" :column="tableColumn" :loading="tableLoading"
-                            :height="tableHeight" :tableId="tableShowId" :tableName="tableName"></table-cop>
-                        <div v-show="activeTab === '2'"
-                            :style="{ height: typeof tableHeight === 'string' ? tableHeight : tableHeight + 'px' }"
-                            class="p-[10px]">
-                            <bar-line-chart-cop v-show="lineData.length" :height="tableHeight" :bardata="barData"
-                                :lineData="lineData" :color="barColor" lineName="理论发电量"></bar-line-chart-cop>
-                            <el-empty v-show="!lineData.length" description="请选择条件"></el-empty>
-                        </div>
-                    </el-tabs>
+    <div class="dataAnalysisWindAna" :class="!theme ? 'themeDark' : 'themeLight'">
+        <div class="dataAnalysisWindAnaMain">
+            <p>损失电量分析</p>
+            <div class="main">
+                <div class="treeDataMain">
+                    <tree-cop ref="treeCopRef" :data="treeData" @checkChange="funTreeCheckChange" :show-checkbox="true"
+                        :height="treeHeight" @currentChange="funCurrentChange" @refresh="funGetTree"></tree-cop>
+                </div>
+                <div class="excelDataMain">
+                    <excel-cop :checkIds="excelCheckIds" :showCheckbox="excelCheckboxShow" :data="excelList"
+                        :height="excelHeight" @excelChange="funExcelChange" @checkChange="funExcelCheckChange">
+                    </excel-cop>
+                </div>
+                <div class="tableDataMain">
+                    <div class="px-[10px] shadow rounded-[6px] shadow-blue-500 ">
+                        <el-tabs v-model="activeTab">
+                            <el-tab-pane label="表格数据" name="1">
+                            </el-tab-pane>
+                            <el-tab-pane label="图表展示" name="2">
+                            </el-tab-pane>
+                            <table-cop class="" v-show="activeTab === '1'" :data="tableData" :showSummary="true"
+                                :summaryMethod="funSummary" :column="tableColumn" :loading="tableLoading"
+                                :height="tableHeight" :tableId="tableShowId" :tableName="tableName"></table-cop>
+                            <div v-show="activeTab === '2'"
+                                :style="{ height: typeof tableHeight === 'string' ? tableHeight : tableHeight + 'px' }"
+                                class="p-[10px]">
+                                <bar-line-chart-cop v-show="lineData.length" :height="tableHeight" :bardata="barData"
+                                    :lineData="lineData" :color="barColor" lineName="理论发电量"></bar-line-chart-cop>
+                                <el-empty v-show="!lineData.length" description="请选择条件"></el-empty>
+                            </div>
+                        </el-tabs>
+                    </div>
                 </div>
             </div>
         </div>
@@ -45,8 +47,12 @@
     import {
         onMounted,
         ref,
-        onActivated
+        onActivated,
+        watch
     } from 'vue'
+    import {
+        useStore
+    } from 'vuex';
     import httpRequest from '@/utils/request.js'
     /**配置参数 */
     const treeHeight = ref(window.innerHeight - 160 + 'px') //tree高度
@@ -316,10 +322,21 @@
         funSubmit()
     }
     /**created */
+    const theme = ref(null)
+    const echartsTheme = ref('')
+    const store = useStore()
+    watch(() => store.state.theme, (newVal, oldVal) => {
+        theme.value = newVal
+        echartsTheme.value = !newVal ? 'dark' : ''
+        funGetTree()
+    }, {
+        deep: true
+    })
     /**mounted */
     onMounted(() => {
         funGetTree()
-
+        theme.value = store.state.theme
+        echartsTheme.value = !theme.value ? 'dark' : ''
         tableHeight.value = window.innerHeight - 214 + 'px'
         excelHeight.value = window.innerHeight - 160 + 'px'
         treeHeight.value = window.innerHeight - 160 + 'px'
@@ -340,8 +357,8 @@
 
         p {
             font-size: 16px;
-            color: #fff;
             margin-left: 20px;
+            margin-bottom: 10px;
         }
 
         .main {
@@ -353,7 +370,6 @@
             .treeDataMain,
             .excelDataMain,
             .tableDataMain {
-                background: #161f1e;
                 padding: 10px;
                 border-radius: 10px;
             }
@@ -361,17 +377,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 {
@@ -391,4 +396,39 @@
 
         }
     }
+
+    .themeDark {
+
+        p {
+            color: #fff;
+        }
+
+        .treeDataMain,
+        .excelDataMain,
+        .tableDataMain {
+            background: #161f1e;
+        }
+
+    }
+
+    .themeLight {
+        padding: 0;
+
+        p {
+            color: #000;
+        }
+
+        .treeDataMain,
+        .excelDataMain,
+        .tableDataMain {
+            background: #edeffb;
+        }
+
+        .dataAnalysisWindAnaMain {
+            padding: 20px 0;
+            border-radius: 10px;
+            background: #fff;
+        }
+
+    }
 </style>

src/views/intelligentReporting/existing.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-table :data="tableData2" highlight-current-row height="500" @current-change="handleCurrentChange"
+    <el-table :data="tableData2" highlight-current-row :height="height" @current-change="handleCurrentChange"
         ref="singleTableRef">
         <el-table-column label="已有脚本">
             <template #default="scope">
@@ -20,10 +20,19 @@
     } from "@/api/report";
 
     export default {
+        props: {
+            height: {
+                type: String,
+                default: () => {
+                    return '';
+                },
+            },
+        },
         data() {
             return {
                 tableData2: [],
-                childCurrentRow: {}
+                childCurrentRow: {},
+
             }
         },
         mounted() {

src/views/intelligentReporting/reporting/index.vue

@@ -1,68 +1,73 @@
 <template>
-    <el-row :gutter="50" justify="space-evenly">
-        <el-col :span="8">
-            <existing @getExistingData="getData" />
-        </el-col>
-        <el-col :span="2">
-            <el-space :fill="true" :size="65" direction="vertical">
-                <div />
-                <el-button type="primary" @click="onAddItem1">
-                    <el-icon class="el-icon--right">
-                        <ArrowRight />
-                    </el-icon>
-                </el-button>
-                <div />
-                <div />
-                <el-button type="primary" @click="onAddItem2">
-                    <el-icon class="el-icon--right">
-                        <ArrowRight />
-                    </el-icon>
-                </el-button>
-            </el-space>
-        </el-col>
-        <el-col :span="12">
-            <el-table :data="tableData">
-                <el-table-column type="index" width="30" />
-                <el-table-column label="脚本列表">
-                    <template #default="scope">
-                        <el-button v-if="scope.row.scriptName !==''" type="warning" round>{{ scope.row.scriptName}}
-                        </el-button>
-                    </template>
-                </el-table-column>
-                <el-table-column align="right">
-                    <template #default="scope">
-                        <el-button type="primary" @click="handleRun(scope.$index)">运行</el-button>
-                        <el-button type="danger" @click="handleDelete(scope.$index)">删除
-                        </el-button>
-                    </template>
-                </el-table-column>
-            </el-table>
+    <div class="intellReport" :class="!theme ? 'themeDark' : 'themeLight'">
+        <el-row :gutter="50" justify="space-evenly" :style="pageHeight">
+            <el-col :span="8" class="warn-table">
+                <existing @getExistingData="getData" :height="tableHeight" />
+            </el-col>
+            <el-col :span="2" style="text-align: center;">
+                <div :style="btnHeight">
+                    <el-button type="primary" @click="onAddItem1">
+                        <el-icon class="el-icon--right">
+                            <ArrowRight />
+                        </el-icon>
+                    </el-button>
+                </div>
+                <div :style="btnHeight">
+                    <el-button type="primary" @click="onAddItem2">
+                        <el-icon class="el-icon--right">
+                            <ArrowRight />
+                        </el-icon>
+                    </el-button>
+                </div>
+            </el-col>
+            <el-col :span="12">
+                <div class="listTop warn-table">
+                    <el-table :data="tableData" :height="listHeight">
+                        <el-table-column type="index" width="30" />
+                        <el-table-column label="脚本列表">
+                            <template #default="scope">
+                                <el-button v-if="scope.row.scriptName !==''" type="warning" round>
+                                    {{ scope.row.scriptName}}
+                                </el-button>
+                            </template>
+                        </el-table-column>
+                        <el-table-column align="right">
+                            <template #default="scope">
+                                <el-button type="primary" @click="handleRun(scope.$index)">运行</el-button>
+                                <el-button type="danger" @click="handleDelete(scope.$index)">删除
+                                </el-button>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                    <el-button class="run-all-script" type="primary" @click="runAllScript">运行所有脚本</el-button>
+                </div>
 
-            <el-button class="run-all-script" type="primary" @click="runAllScript">运行所有脚本</el-button>
-
-            <br><br><br><br>
-            <el-text class="mx-1" size="large" tag="b">每天运行一次</el-text>
-
-            <el-table :data="tableData4">
-                <el-table-column label="时间" width="300">
-                    <el-time-select v-model="timeValue" start="00:05" step="00:05" end="23:55" placeholder="选择时间" />
-                </el-table-column>
-                <el-table-column label="脚本名称">
-                    <template #default="scope">
-                        <el-button v-if="scope.row.scriptName !==''" type="warning" round>{{ scope.row.scriptName}}
-                        </el-button>
-                    </template>
-                </el-table-column>
-                <el-table-column align="right">
-                    <template #default="scope">
-                        <el-button type="primary" @click="handleDelete(scope.$index)">运行</el-button>
-                        <el-button type="danger" @click="handleDelete(scope.$index)">取消
-                        </el-button>
-                    </template>
-                </el-table-column>
-            </el-table>
-        </el-col>
-    </el-row>
+                <div class="listBot warn-table">
+                    <p>每天运行一次</p>
+                    <el-table :data="tableData4" :height="listHeight">
+                        <el-table-column label="时间" width="300">
+                            <el-time-select v-model="timeValue" start="00:05" step="00:05" end="23:55"
+                                placeholder="选择时间" />
+                        </el-table-column>
+                        <el-table-column label="脚本名称">
+                            <template #default="scope">
+                                <el-button v-if="scope.row.scriptName !==''" type="warning" round>
+                                    {{ scope.row.scriptName}}
+                                </el-button>
+                            </template>
+                        </el-table-column>
+                        <el-table-column align="right">
+                            <template #default="scope">
+                                <el-button type="primary" @click="handleDelete(scope.$index)">运行</el-button>
+                                <el-button type="danger" @click="handleDelete(scope.$index)">取消
+                                </el-button>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                </div>
+            </el-col>
+        </el-row>
+    </div>
 
 </template>
 <script>
@@ -79,7 +84,31 @@
                 childCurrentRow: [],
                 tableData: [],
                 tableData4: [],
-                timeValue: ''
+                timeValue: '',
+                theme: null,
+                tableHeight: document.documentElement.clientHeight - 115,
+                listHeight: (document.documentElement.clientHeight - 160) / 2,
+            }
+        },
+        watch: {
+            '$store.state.theme': {
+                handler: function (newVal, oldVal) {
+                    this.theme = newVal
+                },
+                immediate: true
+            }
+        },
+        computed: {
+            pageHeight() {
+                return {
+                    'height': document.documentElement.clientHeight - 115 + 'px'
+                }
+            },
+            btnHeight() {
+                return {
+                    'height': (document.documentElement.clientHeight - 160) / 4 + 'px',
+                    'padding-top': (document.documentElement.clientHeight - 160) / 4 + 'px'
+                }
             }
         },
         methods: {
@@ -111,8 +140,27 @@
 </script>
 
 <style scoped lang="less">
-    .run-all-script {
-        position: absolute;
-        right: 120px;
+    .intellReport {
+        .listTop {
+            margin-bottom: 20px;
+        }
+
+        .run-all-script {
+            position: absolute;
+            right: 120px;
+        }
+    }
+
+    .themeDark {
+        padding: 20px 0;
+        background: #161f1e;
+        border-radius: 10px;
+    }
+
+    .themeLight {
+        padding: 20px 0;
+        background: #edeffb;
+        border-radius: 10px;
+
     }
 </style>

src/views/intelligentReporting/scriptgeneration/index.vue

@@ -1,63 +1,68 @@
 <template>
-    <el-row :gutter="50" justify="space-evenly">
-        <el-col :span="8">
-            <el-table :data="tableData" highlight-current-row ref="singleTableRef"
-                @current-change="handleCurrentChange">
-                <el-table-column label="基本脚本">
-                    <template #default="scope">
-                        <el-input style="width: 150px" disabled>
-                            <template #prepend>{{ scope.row.before }}</template>
-                        </el-input>
-                        <el-input v-if="scope.row.behind !==''" style="width: 150px" disabled>
-                            <template #prepend>{{ scope.row.behind }}</template>
-                        </el-input>
-                    </template>
-                </el-table-column>
-            </el-table>
+    <div class="intellscriptgeneration" :class="!theme ? 'themeDark' : 'themeLight'">
+        <el-row :gutter="50" justify="space-evenly" :style="pageHeight">
+            <el-col :span="8" class="warn-table">
+                <el-table :data="tableData" :height="tableHeight" highlight-current-row ref="singleTableRef"
+                    @current-change="handleCurrentChange">
+                    <el-table-column label="基本脚本">
+                        <template #default="scope">
+                            <el-input style="width: 150px" disabled>
+                                <template #prepend>{{ scope.row.before }}</template>
+                            </el-input>
+                            <el-input v-if="scope.row.behind !==''" style="width: 150px" disabled>
+                                <template #prepend>{{ scope.row.behind }}</template>
+                            </el-input>
+                        </template>
+                    </el-table-column>
+                </el-table>
 
-            <existing ref="childRowSet" @getExistingData="getData" />
+                <existing ref="childRowSet" @getExistingData="getData" :height="tableHeight" />
 
-        </el-col>
+            </el-col>
 
-        <el-col :span="2">
-            <br><br><br><br><br>
-            <el-button type="primary" @click="onAddItem">
-                填加
-                <el-icon class="el-icon--right">
-                    <ArrowRight />
-                </el-icon>
-            </el-button>
-        </el-col>
-        <el-col :span="12">
-            <el-table :data="tableData3">
-                <el-table-column type="index" width="30" />
-                <el-table-column label="脚本步骤">
-                    <template #default="scope">
-                        <el-input v-model="scope.row.beforeText" v-if="scope.row.before && scope.row.before !==''"
-                            style="width: 419px">
-                            <template #prepend>{{ scope.row.before }}</template>
-                        </el-input>
-                        <el-input v-model="scope.row.behindText" v-if="scope.row.behind && scope.row.behind !==''"
-                            style="width: 250px">
-                            <template #prepend>{{ scope.row.behind }}</template>
-                        </el-input>
-                        <el-button v-if="scope.row.scriptName !==''" type="warning" round>{{ scope.row.scriptName}}
-                        </el-button>
-                    </template>
-                </el-table-column>
-                <el-table-column align="right" width="80">
-                    <template #default="scope">
-                        <el-button type="danger" @click="handleDelete(scope.$index)">删除
-                        </el-button>
-                    </template>
-                </el-table-column>
-            </el-table>
-            <el-input v-model="scriptname" style="width: 500px">
-                <template #prepend>输入脚本名称：</template>
-            </el-input>
-            <el-button type="primary" @click="saveJson">保存脚本</el-button>
-        </el-col>
-    </el-row>
+            <el-col :span="2">
+                <div style="text-align: center;" :style="btnHeight">
+                    <el-button type="primary" @click="onAddItem">
+                        填加
+                        <el-icon class="el-icon--right">
+                            <ArrowRight />
+                        </el-icon>
+                    </el-button>
+                </div>
+            </el-col>
+            <el-col :span="12" class="warn-table">
+                <div style="margin-bottom: 12px">
+                    <el-input v-model="scriptname" style="width: 500px">
+                        <template #prepend>输入脚本名称：</template>
+                    </el-input>
+                    <el-button type="primary" @click="saveJson" style="margin-left: 10px">保存脚本</el-button>
+                </div>
+                <el-table :data="tableData3" :height="listHeight">
+                    <el-table-column type="index" width="30" />
+                    <el-table-column label="脚本步骤">
+                        <template #default="scope">
+                            <el-input v-model="scope.row.beforeText" v-if="scope.row.before && scope.row.before !==''"
+                                style="width: 419px">
+                                <template #prepend>{{ scope.row.before }}</template>
+                            </el-input>
+                            <el-input v-model="scope.row.behindText" v-if="scope.row.behind && scope.row.behind !==''"
+                                style="width: 250px">
+                                <template #prepend>{{ scope.row.behind }}</template>
+                            </el-input>
+                            <el-button v-if="scope.row.scriptName !==''" type="warning" round>{{ scope.row.scriptName}}
+                            </el-button>
+                        </template>
+                    </el-table-column>
+                    <el-table-column align="right" width="80">
+                        <template #default="scope">
+                            <el-button type="danger" @click="handleDelete(scope.$index)">删除
+                            </el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </el-col>
+        </el-row>
+    </div>
 
 </template>
 
@@ -72,6 +77,8 @@
         },
         data() {
             return {
+                tableHeight: (document.documentElement.clientHeight - 120) / 2,
+                listHeight: document.documentElement.clientHeight - 160,
                 tableData: [{
                         id: '',
                         scriptName: '',
@@ -115,7 +122,29 @@
                 ],
                 childCurrentRow: [],
                 tableData3: [],
-                childRowSet: null
+                childRowSet: null,
+                theme: null,
+            }
+        },
+        computed: {
+            pageHeight() {
+                return {
+                    'height': document.documentElement.clientHeight - 115 + 'px'
+                }
+            },
+            btnHeight() {
+                return {
+                    'height': (document.documentElement.clientHeight - 160) + 'px',
+                    'padding-top': (document.documentElement.clientHeight - 160) / 2 + 'px'
+                }
+            }
+        },
+        watch: {
+            '$store.state.theme': {
+                handler: function (newVal, oldVal) {
+                    this.theme = newVal
+                },
+                immediate: true
             }
         },
         methods: {
@@ -154,5 +183,18 @@
 </script>
 
 <style scoped lang="less">
+    .intellscriptgeneration {}
+
+    .themeDark {
+        padding: 20px 0;
+        background: #161f1e;
+        border-radius: 10px;
+    }
 
+    .themeLight {
+        padding: 20px 0;
+        background: #edeffb;
+        border-radius: 10px;
+
+    }
 </style>