基于风机发电量全寿命周期管控的研究与应用项目中发电能力分析系统整体UI样式整改（项目左侧菜单部分整改；风电数据准备，风电数据处理页面修改黑色版本与白色版本；）

components.d.ts

@@ -15,7 +15,6 @@ declare module 'vue' {
     ConfigurationDesign: typeof import('./src/components/powerPredictionComponent/configPage/configurationDesign.vue')['default']
     DayBatterDialog: typeof import('./src/components/powerPredictionComponent/batteryDivinerDialog/dayBatterDialog.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
-    ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElCol: typeof import('element-plus/es')['ElCol']
@@ -35,6 +34,7 @@ declare module 'vue' {
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElProgress: typeof import('element-plus/es')['ElProgress']
     ElRadio: typeof import('element-plus/es')['ElRadio']

src/App.vue

@@ -50,10 +50,14 @@
             <div class="elmenuSty" :style="!swichTheme ? 'background: #000;' : 'background: #504bb5;'"
                 v-if="isShowMenu">
                 <ul class="menu-list">
-                    <li class="menu-item" @click="isCollapseFn"><img :src="proSuo" alt=""></li>
+                    <li class="menu-item" @click="isCollapseFn">
+                        <img :src="menu_zk" alt="" v-if="isCollapse">
+                        <img :src="menu_ss" alt="" v-else>
+                    </li>
                 </ul>
                 <el-menu :default-active="$route.path" router :unique-opened="true" :collapse="isCollapse"
-                    text-color="#fff" :background-color="!swichTheme ? '#000' : '#504bb5'" active-text-color="#fff">
+                    :collapse-transition="false" text-color="#fff" :background-color="!swichTheme ? '#000' : '#504bb5'"
+                    active-text-color="#fff">
                     <!-- 引入组件 -->
                     <template v-for="menu in showMenuData">
                         <el-sub-menu :key="menu.index" :index="menu.index" v-if="menu.children"
@@ -66,7 +70,10 @@
 
                                 <!-- <span slot="title">{{menu.name}}</span> -->
                             </template>
-                            <menu-tree :menuData="menu.children"></menu-tree>
+                            <!-- <menu-tree :menuData="menu.children"></menu-tree> -->
+                            <el-menu-item-group v-for="(menuitem, index) in menu.children" :key="index">
+                                <el-menu-item :index="menuitem.index">{{menuitem.name}}</el-menu-item>
+                            </el-menu-item-group>
                         </el-sub-menu>
                         <el-menu-item :key="menu.index" :index="menu.index" :route="menu.index" v-else>
                             <!-- <i :class="menu.icon"></i> -->
@@ -126,6 +133,9 @@
     // 锁
     import pro_suo from '@/assets/menuImg/pro_suo.png'
     import pro_jie from '@/assets/menuImg/pro_jie.png'
+    //收缩展开
+    import menu_zk from '@/assets/menuImg/menu_zk.png'
+    import menu_ss from '@/assets/menuImg/menu_ss.png'
 
     export default {
         components: {
@@ -140,6 +150,8 @@
                 showMenuData: [],
                 proSuo: pro_suo,
                 proJie: pro_jie,
+                menu_zk: menu_zk,
+                menu_ss: menu_ss,
                 powerPreDatas: [{
                         index: '/powerPrediction/index',
                         icon: 'Coin',
@@ -439,8 +451,8 @@
                 ],
                 memuCloseTimeout: null,
                 fixed: false,
-                swichTheme: false,
-                // swichTheme: true // 默认白色版本
+                // swichTheme: false,
+                swichTheme: true // 默认白色版本
             }
         },
         watch: {
@@ -582,6 +594,7 @@
         .mainSty {
             display: flex;
 
+
             .menu-body {
                 position: absolute;
                 display: flex;
@@ -689,7 +702,7 @@
                 }
 
                 .el-menu {
-                    min-width: 65px;
+                    min-width: 66px;
                     border-right: transparent;
                 }
             }

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

@@ -48,6 +48,20 @@
                 }
             }
 
+            .el-checkbox__input.is-checked+.el-checkbox__label {
+                color: #fff;
+            }
+
+            .el-checkbox {
+                .el-checkbox__label {
+                    color: #C3C3C4;
+                }
+            }
+
+            .el-checkbox__input.is-checked .el-checkbox__inner {
+                background: #36C2CF;
+            }
+
             .el-button {
                 background: #36C2CF;
                 width: 60px;

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

@@ -126,4 +126,12 @@ input::-ms-input-placeholder {
             }
         }
     }
+}
+
+.generat-seach {
+    .el-form-item {
+        .el-date-editor--date {
+            width: 150px;
+        }
+    }
 }

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

@@ -1,5 +1,17 @@
 .warn-table {
     .el-table {
+
+        .el-table__header {
+            thead {
+                tr {
+                    th {
+                        background: #8F93A7 !important;
+                        color: #fff;
+                    }
+                }
+            }
+        }
+
         thead th.el-table__cell {
             background: rgba(83, 89, 104, 0.3);
         }
@@ -60,7 +72,7 @@
         }
 
         .el-table__empty-block {
-            background: #040c0b;
+            background: #212223;
         }
 
     }

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

@@ -1,13 +1,30 @@
 .el-tree {
     .el-tree-node {
+        background-color: #13171e;
+
         .el-tree-node__content {
+
             .el-dropdown:hover {
                 color: #fff;
             }
         }
+
     }
 
+
+
+    .is-current {}
+
     .el-tree-node__content:hover {
         background-color: transparent;
     }
+}
+
+.el-dropdown-link {
+    color: #C3C3C4;
+
+}
+
+.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
+    background: #0046C7 !important;
 }

src/components/commonHeaders.vue

@@ -102,8 +102,8 @@
         mounted() {
             let that = this;
             if (!JSON.parse(window.sessionStorage.getItem('theme'))) {
-                window.sessionStorage.setItem('theme', false)
-                // window.sessionStorage.setItem('theme', true) // 默认白色版本
+                // window.sessionStorage.setItem('theme', false)
+                window.sessionStorage.setItem('theme', true) // 默认白色版本
             } else {
                 this.switchTheme = JSON.parse(window.sessionStorage.getItem('theme'))
                 this.$store.state.theme = this.switchTheme

src/components/generatingCapacityComponent/excel.vue

@@ -85,8 +85,13 @@
                     } else {
                         return 'color:#000'
                     }
+                } else {
+                    if (this.currentId === item.id) {
+                        return 'color: #fff'
+                    } else {
+                        return 'color:#C3C3C4'
+                    }
                 }
-                return ''
             },
             funExcelChange(obj) {
                 this.currentId = obj.id

src/components/generatingCapacityComponent/table.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="warn-table" ref="tableRef" :style="{ height: typeof height === 'string' ? height : height + 'px' }">
         <div class="tableData_tit">
-            <p :style="theme? 'color:#5473E8':'color:#fff'">{{tableName}}</p>
+            <p :style="theme? 'color:#5473E8':'color:#979797'">{{tableName}}</p>
             <el-divider />
             <img :src="CSV_C" alt="">
             <!-- <el-button size="small" type="primary" @click="funExport" :disabled="!tableId">数据导出</el-button> -->

src/components/generatingCapacityComponent/tree.vue

@@ -8,7 +8,8 @@
         </div>
         <div class="treeMain">
             <div class="treeMainTit">
-                <span>数据准备</span>
+                <!-- <span>{{data[0].label ? data[0].label : '数据'}}</span> -->
+                <span>数据</span>
             </div>
             <el-tree :data="data" :props="defaultProps" default-expand-all highlight-current
                 :filter-node-method="filterNode" ref="tree" @node-click="funCurrentChange" :show-checkbox="showCheckbox"
@@ -100,7 +101,7 @@
                 defaultProps: {
                     children: 'children',
                     label: 'label'
-                }
+                },
             }
         },
         watch: {

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

@@ -117,10 +117,11 @@
                     //标题
                     title: {
                         text: that.chartTitle,
-                        right: 440,
+                        right: 460,
+                        // left: 110,
                         top: 4,
                         textStyle: {
-                            fontSize: 14,
+                            fontSize: 16,
                             color: that.echartsTheme === "dark" ? partten.getColor("white") : "#000",
                         },
                     },
@@ -226,7 +227,7 @@
                         textStyle: {
                             color: that.echartsTheme === "dark" ?
                                 partten.getColor("white") : "#000",
-                            fontSize: 12,
+                            fontSize: 14,
                         },
 
                     },

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

@@ -1,9 +1,11 @@
 <template>
     <div class="dataAnalysisCom" :class="!theme ? 'themeDark' : 'themeLight'">
         <div class="dataAnalysisComMain">
-            <p>功率曲线拟合分析</p>
-            <search-cop @submit="funSubmit">
-            </search-cop>
+            <div class="main_top">
+                <p class="topPsty">功率曲线拟合分析</p>
+                <search-cop @submit="funSubmit">
+                </search-cop>
+            </div>
             <div class="main">
                 <div class="treeDataMain">
                     <tree-cop :data="treeData" @checkChange="funTreeCheckChange" :show-checkbox="true"
@@ -122,9 +124,9 @@
     // import tableRes from '@/data/table.json'
     // import areaDataRes from '@/data/areaData.json'
     /**配置参数 */
-    const tableHeight = ref(window.innerHeight - 260 + 'px')
-    const excelHeight = ref((window.innerHeight - 220) / 2 + 'px')
-    const treeHeight = ref((window.innerHeight - 220) / 2 + 'px')
+    const tableHeight = ref(window.innerHeight - 180 + 'px')
+    const excelHeight = ref((window.innerHeight - 150) / 2 + 'px')
+    const treeHeight = ref((window.innerHeight - 150) / 2 + 'px')
     /**excel 开始 */
     const excelCheckboxShow = ref(false)
     const excelType = ref('')
@@ -698,13 +700,13 @@
         theme.value = store.state.theme
         echartsTheme.value = !theme.value ? 'dark' : ''
         dataRadom.value = (new Date().getTime()).toString()
-        tableHeight.value = window.innerHeight - 260 + 'px'
-        excelHeight.value = (window.innerHeight - 220) / 2 + 'px'
-        treeHeight.value = (window.innerHeight - 220) / 2 + 'px'
+        tableHeight.value = window.innerHeight - 180 + 'px'
+        excelHeight.value = (window.innerHeight - 150) / 2 + 'px'
+        treeHeight.value = (window.innerHeight - 150) / 2 + 'px'
         window.addEventListener('resize', () => {
-            tableHeight.value = window.innerHeight - 260 + 'px'
-            excelHeight.value = (window.innerHeight - 220) / 2 + 'px'
-            treeHeight.value = (window.innerHeight - 220) / 2 + 'px'
+            tableHeight.value = window.innerHeight - 180 + 'px'
+            excelHeight.value = (window.innerHeight - 150) / 2 + 'px'
+            treeHeight.value = (window.innerHeight - 150) / 2 + 'px'
         })
         /**test */
         // funExcelChange({
@@ -718,67 +720,102 @@
 <style lang="less">
     .dataAnalysisCom {
 
-        padding: 20px;
+        height: 100%;
 
-        p {
-            font-size: 16px;
-            margin-left: 20px;
-        }
+        .dataAnalysisComMain {
+            height: 100%;
 
-        .main {
-            display: flex;
-            justify-content: space-between;
-            // width: calc(100% - 40px);
-            width: 100%;
-
-            .treeDataMain,
-            .excelDataMain,
-            .tableDataMain {
-                padding: 10px;
-                border-radius: 10px;
+            .main_top {
+                height: 40px;
+                display: flex;
+                align-items: center;
+
+                .topPsty {
+                    position: relative;
+                    top: 5px;
+                    padding: 7px 20px;
+                    font-size: 12px;
+                    font-weight: 600;
+                    margin-left: 10px;
+                    border-radius: 3px;
+                }
             }
 
-            .treeDataMain {
-                width: calc(20% - 20px);
+            .main {
+                display: flex;
+                justify-content: space-between;
+                // width: calc(100% - 40px);
+                width: 100%;
 
-            }
+                .treeDataMain,
+                .excelDataMain,
+                .tableDataMain {
+                    padding: 10px;
+                    border-radius: 10px;
+                }
 
-            .excelDataMain {
-                width: calc(13% - 20px);
+                .treeDataMain {
+                    width: calc(20% - 20px);
 
-                .excelDataMain_top {
-                    padding: 5px 0;
                 }
 
-                .excelDataMain_bot {
-                    padding: 5px 0;
+                .excelDataMain {
+                    width: calc(13% - 20px);
+
+                    .excelDataMain_top {
+                        padding: 5px 0;
+                    }
+
+                    .excelDataMain_bot {
+                        padding: 5px 0;
+                    }
                 }
-            }
 
-            .tableDataMain {
-                width: calc(66% - 20px);
-                position: relative;
+                .tableDataMain {
+                    width: calc(66% - 20px);
+                    position: relative;
 
-                .butten_com {
-                    position: absolute;
-                    right: 20px;
-                    z-index: 111111;
+                    .butten_com {
+                        position: absolute;
+                        right: 20px;
+                        z-index: 111111;
+                    }
                 }
-            }
 
+            }
         }
+
+
     }
 
     .themeDark {
 
-        p {
-            color: #fff;
-        }
+        .dataAnalysisComMain {
+            .main_top {
+
+                .topPsty {
+                    color: #1C99FF;
+                    background: #1E2126;
+                }
+            }
+
+            .main {
+                background: #13171e;
+
+                .treeDataMain {
+                    background: transparent;
+                }
+
+                .excelDataMain {
+                    background: #313233;
+                }
+
+                .tableDataMain {
+                    margin-top: 5px;
+                    background: #212223;
+                }
+            }
 
-        .treeDataMain,
-        .excelDataMain,
-        .tableDataMain {
-            background: #161f1e;
         }
 
     }
@@ -786,20 +823,31 @@
     .themeLight {
         padding: 0;
 
-        p {
-            color: #000;
-        }
+        .dataAnalysisComMain {
+            .main_top {
 
-        .treeDataMain,
-        .excelDataMain,
-        .tableDataMain {
-            background: #edeffb;
-        }
+                .topPsty {
+                    color: #2778FF;
+                    background: #FFFFFF;
+                }
+            }
 
-        .dataAnalysisComMain {
-            padding: 20px 0;
-            border-radius: 10px;
-            background: #fff;
+            .main {
+                background: #E6E8F2;
+
+                .treeDataMain {
+                    background: transparent;
+                }
+
+                .excelDataMain {
+                    background: #F4F6FB;
+                }
+
+                .tableDataMain {
+                    background: #fff;
+                    margin-top: 5px;
+                }
+            }
         }
 
     }

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

@@ -1,7 +1,9 @@
 <template>
     <div class="rateAnalysis" :class="!theme ? 'themeDark' : 'themeLight'">
         <div class="rateAnalysisMain">
-            <p class="ratetitle">对风偏差分析</p>
+            <div class="main_top">
+                <p class="topPsty">对风偏差分析</p>
+            </div>
             <div class="main">
                 <div class="treeDataMain">
                     <tree-cop :data="treeData" @checkChange="funTreeCheckChange" :show-checkbox="false"
@@ -119,9 +121,9 @@
     // import flowerRes from '@/data/flower.json'
     // import lineChartRes from '@/data/lineNew.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 - 125 + 'px') //tree高度
+    const excelHeight = ref(window.innerHeight - 125 + 'px') //excel高度
+    const tableHeight = ref(window.innerHeight - 125 + 'px')
     /**excel 开始 */
     const excelCheckIds = ref([])
     const excelList = ref([])
@@ -857,77 +859,113 @@
         //
         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'
+        tableHeight.value = window.innerHeight - 125 + 'px'
+        excelHeight.value = (window.innerHeight - 125) + 'px'
+        treeHeight.value = (window.innerHeight - 125) + '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 - 125 + 'px'
+            excelHeight.value = (window.innerHeight - 125) + 'px'
+            treeHeight.value = (window.innerHeight - 125) + 'px'
         })
     })
 </script>
 
 <style lang="less">
     .rateAnalysis {
-        padding: 20px;
+        height: 100%;
 
-        p {
-            font-size: 16px;
-        }
+        .rateAnalysisMain {
+            height: 100%;
 
-        .main {
-            display: flex;
-            justify-content: space-between;
-            // width: calc(100% - 40px);
-            width: 100%;
-
-            .treeDataMain,
-            .excelDataMain,
-            .tableDataMain {
-                padding: 10px;
-                border-radius: 10px;
+            .main_top {
+                height: 40px;
+                display: flex;
+                align-items: center;
+
+                .topPsty {
+                    position: relative;
+                    top: 5px;
+                    padding: 7px 20px;
+                    font-size: 12px;
+                    font-weight: 600;
+                    margin-left: 10px;
+                    border-radius: 3px;
+                }
             }
 
-            .treeDataMain {
-                width: calc(20% - 20px);
+            .main {
+                display: flex;
+                justify-content: space-between;
+                // width: calc(100% - 40px);
+                width: 100%;
 
-            }
+                .treeDataMain,
+                .excelDataMain,
+                .tableDataMain {
+                    padding: 10px;
+                    border-radius: 10px;
+                }
 
-            .excelDataMain {
-                width: calc(13% - 20px);
+                .treeDataMain {
+                    width: calc(20% - 20px);
 
-                .excelDataMain_top {
-                    padding: 5px 0;
                 }
 
-                .excelDataMain_bot {
-                    padding: 5px 0;
+                .excelDataMain {
+                    width: calc(13% - 20px);
+
+                    .excelDataMain_top {
+                        padding: 5px 0;
+                    }
+
+                    .excelDataMain_bot {
+                        padding: 5px 0;
+                    }
                 }
-            }
 
-            .tableDataMain {
-                width: calc(66% - 20px);
+                .tableDataMain {
+                    width: calc(66% - 20px);
 
-                .chartRowTop {
-                    display: flex;
-                    justify-content: space-between;
+                    .chartRowTop {
+                        display: flex;
+                        justify-content: space-between;
+                    }
                 }
             }
         }
 
+
+
     }
 
     .themeDark {
 
-        p {
-            color: #fff;
-        }
+        .rateAnalysisMain {
+            .main_top {
+
+                .topPsty {
+                    color: #1C99FF;
+                    background: #1E2126;
+                }
+            }
+
+            .main {
+                background: #13171e;
+
+                .treeDataMain {
+                    background: transparent;
+                }
+
+                .excelDataMain {
+                    background: #313233;
+                }
+
+                .tableDataMain {
+                    margin-top: 5px;
+                    background: #212223;
+                }
+            }
 
-        .treeDataMain,
-        .excelDataMain,
-        .tableDataMain {
-            background: #161f1e;
         }
 
     }
@@ -935,22 +973,31 @@
     .themeLight {
         padding: 0;
 
-        .ratetitle {
-            color: #000;
-            margin-left: 20px;
-            margin-bottom: 10px;
-        }
+        .rateAnalysisMain {
+            .main_top {
 
-        .treeDataMain,
-        .excelDataMain,
-        .tableDataMain {
-            background: #edeffb;
-        }
+                .topPsty {
+                    color: #2778FF;
+                    background: #FFFFFF;
+                }
+            }
 
-        .rateAnalysisMain {
-            padding: 20px 0;
-            border-radius: 10px;
-            background: #fff;
+            .main {
+                background: #E6E8F2;
+
+                .treeDataMain {
+                    background: transparent;
+                }
+
+                .excelDataMain {
+                    background: #F4F6FB;
+                }
+
+                .tableDataMain {
+                    background: #fff;
+                    margin-top: 5px;
+                }
+            }
         }
 
     }

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

@@ -108,7 +108,7 @@
         actTreeNode.value = null
         // const res = await httpRequest.get("/power/prepare/tree")
         const res = await apiGetpowerpreparetree()
-        treeData.value = funRepeatMap(res.data[0].children)
+        treeData.value = funRepeatMap(res.data)
         excelList.value = []
         if (actTreeNode.value) {
             funCurrentChange({
@@ -284,20 +284,35 @@
 
     .themeDark {
 
-        .main_top {
+        .dataFilePrepareMain {
+            .main_top {
 
-            .topPsty {
-                color: #1C99FF;
-                background: #1E2126;
+                .topPsty {
+                    color: #1C99FF;
+                    background: #1E2126;
+                }
+            }
+
+            .main {
+                background: #13171e;
+
+                .treeDataMain {
+                    background: transparent;
+                }
+
+                .excelDataMain {
+                    background: #313233;
+                }
+
+                .tableDataMain {
+                    margin-top: 5px;
+                    background: #212223;
+                }
             }
-        }
 
-        .treeDataMain,
-        .excelDataMain,
-        .tableDataMain {
-            background: #161f1e;
         }
 
+
     }
 
     .themeLight {

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

@@ -1,9 +1,11 @@
 <template>
     <div class="dataFileProcess" :class="!theme ? 'themeDark' : 'themeLight'">
         <div class="dataFileProcessMain">
-            <p>风电数据处理</p>
-            <search-cop @submit="funSubmit">
-            </search-cop>
+            <div class="main_top">
+                <p class="topPsty">风电数据处理</p>
+                <search-cop @submit="funSubmit">
+                </search-cop>
+            </div>
             <div class="main">
                 <div class="treeDataMain">
                     <tree-cop :data="treeData" :height="treeHeight" :show-checkbox="true"
@@ -52,9 +54,9 @@
         ElMessage
     } from 'element-plus'
     /**配置参数 */
-    const treeHeight = ref((window.innerHeight - 210) / 2 + 'px') //tree高度
-    const excelHeight = ref(window.innerHeight - 200 + 'px') //excel高度
-    const tableHeight = ref(window.innerHeight - 200 + 'px')
+    const treeHeight = ref((window.innerHeight - 135) / 2 + 'px') //tree高度
+    const excelHeight = ref(window.innerHeight - 125 + 'px') //excel高度
+    const tableHeight = ref(window.innerHeight - 125 + 'px')
     /**excel 开始 */
     const excelCheckboxShow = ref(false)
     const excelCheckIds = ref([])
@@ -272,13 +274,13 @@
         await funGetTree()
         funGetProcessTree()
         theme.value = store.state.theme
-        tableHeight.value = window.innerHeight - 200 + 'px'
-        excelHeight.value = window.innerHeight - 200 + 'px'
-        treeHeight.value = (window.innerHeight - 210) / 2 + 'px'
+        tableHeight.value = window.innerHeight - 125 + 'px'
+        excelHeight.value = window.innerHeight - 125 + 'px'
+        treeHeight.value = (window.innerHeight - 135) / 2 + 'px'
         window.addEventListener('resize', () => {
-            tableHeight.value = window.innerHeight - 200 + 'px'
-            excelHeight.value = window.innerHeight - 200 + 'px'
-            treeHeight.value = (window.innerHeight - 210) / 2 + 'px'
+            tableHeight.value = window.innerHeight - 125 + 'px'
+            excelHeight.value = window.innerHeight - 125 + 'px'
+            treeHeight.value = (window.innerHeight - 135) / 2 + 'px'
         })
     })
     /**activated */
@@ -290,53 +292,87 @@
 
 <style lang="less">
     .dataFileProcess {
+        height: 100%;
 
-        padding: 20px;
+        .dataFileProcessMain {
+            height: 100%;
 
-        p {
-            font-size: 16px;
-            margin-left: 20px;
-        }
+            .main_top {
+                height: 40px;
+                display: flex;
+                align-items: center;
 
-        .main {
-            display: flex;
-            justify-content: space-between;
-            // width: calc(100% - 40px);
-            width: 100%;
-
-            .treeDataMain,
-            .excelDataMain,
-            .tableDataMain {
-                padding: 10px;
-                border-radius: 10px;
+                .topPsty {
+                    position: relative;
+                    top: 5px;
+                    padding: 7px 20px;
+                    font-size: 12px;
+                    font-weight: 600;
+                    margin-left: 10px;
+                    border-radius: 3px;
+                }
             }
 
-            .treeDataMain {
-                width: calc(20% - 20px);
+            .main {
+                display: flex;
+                justify-content: space-between;
+                // width: calc(100% - 40px);
+                width: 100%;
 
-            }
+                .treeDataMain,
+                .excelDataMain,
+                .tableDataMain {
+                    padding: 10px;
+                    border-radius: 10px;
+                }
 
-            .excelDataMain {
-                width: calc(13% - 20px);
-            }
+                .treeDataMain {
+                    width: calc(20% - 20px);
 
-            .tableDataMain {
-                width: calc(66% - 20px);
-            }
+                }
+
+                .excelDataMain {
+                    width: calc(13% - 20px);
+                }
 
+                .tableDataMain {
+                    width: calc(66% - 20px);
+                }
+
+            }
         }
+
+
     }
 
     .themeDark {
 
-        p {
-            color: #fff;
-        }
+        .dataFileProcessMain {
+            .main_top {
+
+                .topPsty {
+                    color: #1C99FF;
+                    background: #1E2126;
+                }
+            }
+
+            .main {
+                background: #13171e;
+
+                .treeDataMain {
+                    background: transparent;
+                }
+
+                .excelDataMain {
+                    background: #313233;
+                }
+
+                .tableDataMain {
+                    margin-top: 5px;
+                    background: #212223;
+                }
+            }
 
-        .treeDataMain,
-        .excelDataMain,
-        .tableDataMain {
-            background: #161f1e;
         }
 
     }
@@ -344,20 +380,31 @@
     .themeLight {
         padding: 0;
 
-        p {
-            color: #000;
-        }
+        .dataFileProcessMain {
+            .main_top {
 
-        .treeDataMain,
-        .excelDataMain,
-        .tableDataMain {
-            background: #edeffb;
-        }
+                .topPsty {
+                    color: #2778FF;
+                    background: #FFFFFF;
+                }
+            }
 
-        .dataFileProcessMain {
-            padding: 10px 0;
-            border-radius: 10px;
-            background: #fff;
+            .main {
+                background: #E6E8F2;
+
+                .treeDataMain {
+                    background: transparent;
+                }
+
+                .excelDataMain {
+                    background: #F4F6FB;
+                }
+
+                .tableDataMain {
+                    background: #fff;
+                    margin-top: 5px;
+                }
+            }
         }
 
     }