更换系统主题，页面样式统一

cpp-ui/src/assets/echarts_theme/dark.js

@@ -0,0 +1,420 @@
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        // AMD. Register as an anonymous module.
+        define(['exports', 'echarts'], factory);
+    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
+        // CommonJS
+        factory(exports, require('echarts'));
+    } else {
+        // Browser globals
+        factory({}, root.echarts);
+    }
+}(this, function (exports, echarts) {
+    var log = function (msg) {
+        if (typeof console !== 'undefined') {
+            console && console.error && console.error(msg);
+        }
+    };
+    if (!echarts) {
+        log('ECharts is not Loaded');
+        return;
+    }
+    echarts.registerTheme('dark', {
+        "color": [
+            "#dd6b66",
+            "#759aa0",
+            "#e69d87",
+            "#8dc1a9",
+            "#ea7e53",
+            "#eedd78",
+            "#73a373",
+            "#73b9bc",
+            "#7289ab",
+            "#91ca8c",
+            "#f49f42"
+        ],
+        "backgroundColor": "rgba(51,51,51,1)",
+        "textStyle": {},
+        "title": {
+            "textStyle": {
+                "color": "#eeeeee"
+            },
+            "subtextStyle": {
+                "color": "#aaaaaa"
+            }
+        },
+        "line": {
+            "itemStyle": {
+                "borderWidth": 1
+            },
+            "lineStyle": {
+                "width": 2
+            },
+            "symbolSize": 4,
+            "symbol": "circle",
+            "smooth": false
+        },
+        "radar": {
+            "itemStyle": {
+                "borderWidth": 1
+            },
+            "lineStyle": {
+                "width": 2
+            },
+            "symbolSize": 4,
+            "symbol": "circle",
+            "smooth": false
+        },
+        "bar": {
+            "itemStyle": {
+                "barBorderWidth": 0,
+                "barBorderColor": "#ccc"
+            }
+        },
+        "pie": {
+            "itemStyle": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        },
+        "scatter": {
+            "itemStyle": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        },
+        "boxplot": {
+            "itemStyle": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        },
+        "parallel": {
+            "itemStyle": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        },
+        "sankey": {
+            "itemStyle": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        },
+        "funnel": {
+            "itemStyle": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        },
+        "gauge": {
+            "itemStyle": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        },
+        "candlestick": {
+            "itemStyle": {
+                "color": "#fd1050",
+                "color0": "#0cf49b",
+                "borderColor": "#fd1050",
+                "borderColor0": "#0cf49b",
+                "borderWidth": 1
+            }
+        },
+        "graph": {
+            "itemStyle": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "lineStyle": {
+                "width": 1,
+                "color": "#aaa"
+            },
+            "symbolSize": 4,
+            "symbol": "circle",
+            "smooth": false,
+            "color": [
+                "#dd6b66",
+                "#759aa0",
+                "#e69d87",
+                "#8dc1a9",
+                "#ea7e53",
+                "#eedd78",
+                "#73a373",
+                "#73b9bc",
+                "#7289ab",
+                "#91ca8c",
+                "#f49f42"
+            ],
+            "label": {
+                "color": "#eee"
+            }
+        },
+        "map": {
+            "itemStyle": {
+                "areaColor": "#eee",
+                "borderColor": "#444",
+                "borderWidth": 0.5
+            },
+            "label": {
+                "color": "#000"
+            },
+            "emphasis": {
+                "itemStyle": {
+                    "areaColor": "rgba(255,215,0,0.8)",
+                    "borderColor": "#444",
+                    "borderWidth": 1
+                },
+                "label": {
+                    "color": "rgb(100,0,0)"
+                }
+            }
+        },
+        "geo": {
+            "itemStyle": {
+                "areaColor": "#eee",
+                "borderColor": "#444",
+                "borderWidth": 0.5
+            },
+            "label": {
+                "color": "#000"
+            },
+            "emphasis": {
+                "itemStyle": {
+                    "areaColor": "rgba(255,215,0,0.8)",
+                    "borderColor": "#444",
+                    "borderWidth": 1
+                },
+                "label": {
+                    "color": "rgb(100,0,0)"
+                }
+            }
+        },
+        "categoryAxis": {
+            "axisLine": {
+                "show": true,
+                "lineStyle": {
+                    "color": "#eeeeee"
+                }
+            },
+            "axisTick": {
+                "show": true,
+                "lineStyle": {
+                    "color": "#eeeeee"
+                }
+            },
+            "axisLabel": {
+                "show": true,
+                "color": "#eeeeee"
+            },
+            "splitLine": {
+                "show": false,
+                "lineStyle": {
+                    "color": [
+                        "#aaaaaa"
+                    ]
+                }
+            },
+            "splitArea": {
+                "show": false,
+                "areaStyle": {
+                    "color": [
+                        "#eeeeee"
+                    ]
+                }
+            }
+        },
+        "valueAxis": {
+            "axisLine": {
+                "show": true,
+                "lineStyle": {
+                    "color": "#eeeeee"
+                }
+            },
+            "axisTick": {
+                "show": true,
+                "lineStyle": {
+                    "color": "#eeeeee"
+                }
+            },
+            "axisLabel": {
+                "show": true,
+                "color": "#eeeeee"
+            },
+            "splitLine": {
+                "show": true,
+                "lineStyle": {
+                    "color": [
+                        "#57617B"
+                    ]
+                }
+            },
+            "splitArea": {
+                "show": false,
+                "areaStyle": {
+                    "color": [
+                        "#eeeeee"
+                    ]
+                }
+            }
+        },
+        "logAxis": {
+            "axisLine": {
+                "show": true,
+                "lineStyle": {
+                    "color": "#eeeeee"
+                }
+            },
+            "axisTick": {
+                "show": true,
+                "lineStyle": {
+                    "color": "#eeeeee"
+                }
+            },
+            "axisLabel": {
+                "show": true,
+                "color": "#eeeeee"
+            },
+            "splitLine": {
+                "show": true,
+                "lineStyle": {
+                    "color": [
+                        "#aaaaaa"
+                    ]
+                }
+            },
+            "splitArea": {
+                "show": false,
+                "areaStyle": {
+                    "color": [
+                        "#eeeeee"
+                    ]
+                }
+            }
+        },
+        "timeAxis": {
+            "axisLine": {
+                "show": true,
+                "lineStyle": {
+                    "color": "#eeeeee"
+                }
+            },
+            "axisTick": {
+                "show": true,
+                "lineStyle": {
+                    "color": "#eeeeee"
+                }
+            },
+            "axisLabel": {
+                "show": true,
+                "color": "#eeeeee"
+            },
+            "splitLine": {
+                "show": true,
+                "lineStyle": {
+                    "color": [
+                        "#aaaaaa"
+                    ]
+                }
+            },
+            "splitArea": {
+                "show": false,
+                "areaStyle": {
+                    "color": [
+                        "#eeeeee"
+                    ]
+                }
+            }
+        },
+        "toolbox": {
+            "iconStyle": {
+                "borderColor": "#999"
+            },
+            "emphasis": {
+                "iconStyle": {
+                    "borderColor": "#666"
+                }
+            }
+        },
+        "legend": {
+            "textStyle": {
+                "color": "#eeeeee"
+            }
+        },
+        "tooltip": {
+            "axisPointer": {
+                "lineStyle": {
+                    "color": "#eeeeee",
+                    "width": "1"
+                },
+                "crossStyle": {
+                    "color": "#eeeeee",
+                    "width": "1"
+                }
+            }
+        },
+        "timeline": {
+            "lineStyle": {
+                "color": "#eeeeee",
+                "width": 1
+            },
+            "itemStyle": {
+                "color": "#dd6b66",
+                "borderWidth": 1
+            },
+            "controlStyle": {
+                "color": "#eeeeee",
+                "borderColor": "#eeeeee",
+                "borderWidth": 0.5
+            },
+            "checkpointStyle": {
+                "color": "#e43c59",
+                "borderColor": "#c23531"
+            },
+            "label": {
+                "color": "#eeeeee"
+            },
+            "emphasis": {
+                "itemStyle": {
+                    "color": "#a9334c"
+                },
+                "controlStyle": {
+                    "color": "#eeeeee",
+                    "borderColor": "#eeeeee",
+                    "borderWidth": 0.5
+                },
+                "label": {
+                    "color": "#eeeeee"
+                }
+            }
+        },
+        "visualMap": {
+            "color": [
+                "#bf444c",
+                "#d88273",
+                "#f6efa6"
+            ]
+        },
+        "dataZoom": {
+            "backgroundColor": "rgba(47,69,84,0)",
+            "dataBackgroundColor": "rgba(255,255,255,0.3)",
+            "fillerColor": "rgba(167,183,204,0.4)",
+            "handleColor": "#a7b7cc",
+            "handleSize": "100%",
+            "textStyle": {
+                "color": "#eeeeee"
+            }
+        },
+        "markPoint": {
+            "label": {
+                "color": "#eee"
+            },
+            "emphasis": {
+                "label": {
+                    "color": "#eee"
+                }
+            }
+        }
+    });
+}));

cpp-ui/src/assets/styles/dark.scss

@@ -0,0 +1,312 @@
+$white: #fff;
+$default-border-color:#2986ce;
+$table-border-color: #3e6b98;
+$table-header-background-color: #284266;
+
+#app {
+
+  .main-container {
+    color: white;
+    //background-color: $base-menu-background;
+    background-color: #101C38;
+    background-image: url('../images/pageBg.png');
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+
+    .el-tabs__item {
+      color: $white;
+    }
+
+    .el-tabs__item.is-active {
+      color: #1890ff;
+    }
+  }
+}
+
+.app-title-bg {
+  width: 100%;
+  background-color: #101C38;
+  background-image: url('../images/pageBg.png');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  color: white;
+
+  .titleBg {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 50px;
+    background-image: url('../images/topTitleBg.png');
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+
+    .title-text {
+      font-size: 30px;
+      font-weight: bold;
+    }
+  }
+
+  .sys-time {
+    width: 10%;
+    height: 50px;
+    font-size: 16px;
+    text-align: center;
+    position: absolute;
+    left: 0;
+    top: 1%;
+  }
+}
+
+.navbar {
+  //background-color: $base-menu-background !important;
+  background-color: transparent !important;
+  background-image: url('../images/pageBg.png');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  width: 100px;
+  position: absolute !important;
+  right: 0;
+
+  .avatar-container {
+    .avatar-wrapper {
+      .el-icon-caret-bottom {
+        color: $white;
+      }
+    }
+  }
+}
+
+.tags-view-container {
+  //background-color: $base-menu-background !important;
+  background-color: transparent !important;
+  background-image: url('../images/pageBg.png');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  border: 1px solid #fff;
+
+  .tags-view-wrapper {
+    .tags-view-item {
+      border-radius: 2px;
+    }
+  }
+}
+
+.el-breadcrumb__inner.is-link, .el-breadcrumb__inner a {
+  color: $white;
+}
+
+/*vxe表格*/
+.vxe-table--render-default.border--default .vxe-table--header-wrapper, .vxe-table--render-default.border--full .vxe-table--header-wrapper, .vxe-table--render-default.border--outer .vxe-table--header-wrapper {
+  background-color: $table-header-background-color !important;
+  color: $white;
+}
+
+.vxe-table--render-default .vxe-table--body-wrapper, .vxe-table--render-default .vxe-table--footer-wrapper {
+  background-color: transparent !important;
+  color: $white !important;
+}
+
+.vxe-pager {
+  background-color: transparent !important;
+}
+
+.vxe-pager--jump, .vxe-pager--total {
+  color: $white;
+}
+.vxe-table--render-default .vxe-body--row.row--current {
+  background-color: $base-menu-background !important;
+}
+
+.vxe-table--render-default .vxe-body--row.row--hover, .vxe-table-render-default .vxe-body--row.row--hover.row--stripe {
+  background-color: $base-menu-background !important;
+}
+
+// 边框
+.vxe-table--render-default.border--full .vxe-body--column, .vxe-table--render-default.border--full .vxe-footer--column, .vxe-table--render-default.border--full .vxe-header--column {
+  background-image: linear-gradient($table-border-color, $table-border-color), linear-gradient($table-border-color, $table-border-color) !important;
+}
+
+.vxe-table .vxe-table--header-wrapper .vxe-table--header-border-line, .vxe-table--render-default .vxe-table--border-line,.vxe-pager.is--perfect {
+  border: 1px solid $table-border-color !important;
+}
+.vxe-table--render-default.border--full .vxe-table--fixed-left-wrapper {
+  border-right: 1px solid $table-border-color !important;
+}
+/*element表格*/
+.el-table, .el-table tr {
+  background-color: transparent !important;
+  color: $white !important;
+}
+
+.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
+  background-color: transparent !important;
+}
+
+.el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th {
+  background: $table-header-background-color !important;
+  color: white !important;
+}
+
+.el-table [class*=el-table__row--level] .el-table__expand-icon {
+  color: white;
+}
+
+.el-table th.el-table__cell.is-leaf, .el-table td.el-table__cell {
+  border-bottom: 1px solid $table-border-color;
+}
+
+.el-table--border .el-table__cell {
+  border-right: 1px solid $table-border-color;
+}
+
+.el-table--group, .el-table--border {
+  border: 1px solid $table-border-color;
+}
+
+.el-table::before, .el-table--group::after, .el-table--border::after {
+  background-color: $table-border-color;
+}
+
+/*element 分頁*/
+.el-pagination__total, .el-pagination__jump {
+  color: $white !important;
+}
+
+.el-pagination .btn-prev, .el-pagination .btn-next {
+  background: transparent !important;
+  color: white !important;
+}
+
+.el-pager li {
+  background: transparent !important;
+  color: white;
+}
+
+.el-pager li:hover {
+  color: #1890ff;
+}
+
+/*element 弹窗*/
+.el-dialog__header, .el-dialog__body, .el-dialog__footer {
+  background-color: $base-menu-background !important;
+}
+
+.el-dialog__title {
+  color: $white !important;
+}
+
+.el-form-item__label {
+  color: $white !important;
+}
+
+/*element-tree*/
+.el-tree {
+  background: transparent !important;
+  color: white !important;
+  border: .5px solid white;
+}
+
+.el-tree-node__content:hover {
+  background-color: $base-menu-background;
+}
+
+/*element card*/
+.el-card {
+  border: 0.001rem solid $default-border-color;
+  background-color: transparent;
+  color: #FFFFFF;
+}
+
+/*element input*/
+.dark-el-input {
+  .el-input__inner {
+    background-color: rgba(15, 28, 49, 0.8);
+    border: 1px solid $default-border-color;
+    color: #cddef1;
+  }
+}
+
+/*element btu */
+.dark-el-button {
+  .el-button, .el-button-group .el-button {
+    background-color: transparent !important;
+    border-top: none;
+    border-bottom: none;
+    border-color: #1890ff;
+    background-image: url('../images/topRightBtuBg.png');
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+  }
+}
+
+/*element select*/
+.cpp-popper {
+  background: rgba(30, 84, 128, 0.8);
+  border: 1px solid rgba(29, 128, 218, 1);
+  box-shadow: rgba(30, 84, 128, 0.8);
+
+  //日期控件样式
+  .el-picker-panel__body-wrapper {
+    color: #cddef1 !important;
+    background: rgba(15, 28, 49, 0.65);
+  }
+
+  //日期区间选择面板分割线
+  .el-date-range-picker__content.is-left {
+    border-right: 1px solid $default-border-color;
+  }
+
+  //日期区间选择面板左右箭头图标颜色
+  .el-picker-panel__icon-btn {
+    color: #cddef1;
+  }
+
+  //不可选择字体色
+  .is-disabled {
+    color: #bbbbbb;
+  }
+
+  //星期表头字体样式
+  .el-date-table th {
+    color: #cddef1 !important;
+    border-bottom: 1px solid $default-border-color;
+  }
+
+  //日期和选中范围背景样式
+  .el-date-table td.in-range div {
+    color: #cddef1 !important;
+    background-color: rgba(23, 88, 137, 0.90);
+  }
+
+  //不可选择日期背景色
+  .el-date-table td.disabled div {
+    background-color: rgb(57, 83, 114);
+  }
+
+  // 弹出框外部尖三角样式 - 边框色
+  .popper__arrow {
+    border-bottom-color: rgba(29, 128, 218, 1) !important;
+  }
+
+  // 弹出框外部尖三角样式 - 填充色
+  .popper__arrow::after {
+    border-bottom-color: rgba(29, 128, 218, 1) !important;
+  }
+
+  //下拉列表选择项
+  .el-select-dropdown__item {
+    color: #cddef1;
+  }
+
+  //下拉列表选中项
+  .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
+    background-color: rgba(15, 28, 49, 0.65);
+  }
+}
+

cpp-ui/src/assets/styles/index.scss

@@ -4,7 +4,7 @@
 @import './element-ui.scss';
 @import './sidebar.scss';
 @import './btn.scss';
-
+@import './dark';
 body {
   height: 100%;
   -moz-osx-font-smoothing: grayscale;

cpp-ui/src/assets/styles/sidebar.scss

@@ -1,7 +1,7 @@
 #app {
 
   .main-container {
-    height: 100%;
+    height: calc(100% - 50px);
     transition: margin-left .28s;
     margin-left: $base-sidebar-width;
     position: relative;
@@ -15,11 +15,16 @@
     -webkit-transition: width .28s;
     transition: width 0.28s;
     width: $base-sidebar-width !important;
-    background-color: $base-menu-background;
+    //background-color: $base-menu-background;
+    background-color: #101C38;
+    background-image: url('../images/navBg.png');
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
     height: 100%;
     position: fixed;
     font-size: 0px;
-    top: 0;
+    top: 50px;
     bottom: 0;
     left: 0;
     z-index: 1001;
@@ -99,7 +104,8 @@
 
     & .theme-dark .nest-menu .el-submenu>.el-submenu__title,
     & .theme-dark .el-submenu .el-menu-item {
-      background-color: $base-sub-menu-background !important;
+      //background-color: $base-sub-menu-background !important;
+      background-color: transparent !important;
 
       &:hover {
         background-color: $base-sub-menu-hover !important;

cpp-ui/src/components/Pagination/index.vue

@@ -105,7 +105,7 @@ export default {
 
 <style scoped>
 .pagination-container {
-  background: #fff;
+  //background: #fff;
   padding: 32px 16px;
 }
 .pagination-container.hidden {

cpp-ui/src/layout/components/Navbar.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="navbar">
-    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+<!--    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />-->
 
-    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>
-    <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>
+<!--    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>-->
+<!--    <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>-->
 
     <div class="right-menu">
       <template v-if="device!=='mobile'">

cpp-ui/src/layout/components/Sidebar/Logo.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
+<!--  :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }"-->
+  <div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: 'transparent' }">
     <transition name="sidebarLogoFade">
       <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
         <img v-if="logo" :src="logo" class="sidebar-logo" />

cpp-ui/src/layout/components/Sidebar/index.vue

@@ -1,11 +1,13 @@
 <template>
     <div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
-        <logo v-if="showLogo" :collapse="isCollapse" />
+<!--        <logo v-if="showLogo" :collapse="isCollapse" />-->
+<!--      :background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"-->
         <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
             <el-menu
                 :default-active="activeMenu"
                 :collapse="isCollapse"
-                :background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
+                background-color="transparent"
+
                 :text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
                 :unique-opened="true"
                 :active-text-color="settings.theme"

cpp-ui/src/layout/index.vue

@@ -1,12 +1,19 @@
 <template>
   <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
+    <div class="app-title-bg">
+      <span class="sys-time">{{sysTime}}</span>
+      <navbar/>
+      <div class="titleBg">
+        <span class="title-text">集 中 功 率 预 测</span>
+      </div>
+    </div>
     <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
     <sidebar v-if="!sidebar.hide" class="sidebar-container"/>
     <div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container">
-      <div :class="{'fixed-header':fixedHeader}">
-        <navbar/>
-        <tags-view v-if="needTagsView"/>
-      </div>
+<!--      <div :class="{'fixed-header':fixedHeader}">-->
+<!--        <navbar/>-->
+<!--        <tags-view v-if="needTagsView"/>-->
+<!--      </div>-->
       <app-main/>
       <right-panel>
         <settings/>
@@ -21,6 +28,7 @@ import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
 import ResizeMixin from './mixin/ResizeHandler'
 import { mapState } from 'vuex'
 import variables from '@/assets/styles/variables.scss'
+import {formatToDateTime} from "../utils/dateUtil";
 
 export default {
   name: 'Layout',
@@ -54,6 +62,21 @@ export default {
       return variables;
     }
   },
+  data(){
+    return{
+      sysTime:'',
+      sysInterval: null
+    }
+  },
+  mounted() {
+    const _this = this
+    this.sysInterval = setInterval(function (){
+      _this.sysTime = formatToDateTime(new Date())
+    },1000)
+  },
+  destroyed() {
+    clearInterval(this.sysInterval);
+  },
   methods: {
     handleClickOutside() {
       this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
@@ -65,7 +88,6 @@ export default {
 <style lang="scss" scoped>
   @import "~@/assets/styles/mixin.scss";
   @import "~@/assets/styles/variables.scss";
-
   .app-wrapper {
     @include clearfix;
     position: relative;

cpp-ui/src/main.js

@@ -54,6 +54,7 @@ import 'xe-utils'
 import VXETable from 'vxe-table'
 import 'vxe-table/lib/style.css'
 import echarts from 'echarts'
+import './assets/echarts_theme/dark'
 Vue.prototype.$echarts = echarts
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts

cpp-ui/src/utils/dateUtil.js

@@ -0,0 +1,10 @@
+export function formatToDateTime(timestamp) {
+  var date = new Date(timestamp);
+  var Y = date.getFullYear() + '-';
+  var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
+  var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
+  var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
+  var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
+  var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
+  return Y + M + D + h + m + s;
+}

cpp-ui/src/views/configManager/electricField/index.vue

@@ -1,24 +1,27 @@
 <template>
   <div class="app-container">
-    <el-form ref="queryForm" size="small" :inline="true">
-      <el-form-item label="场站名称">
-        <el-input v-model="stationName" maxlength="50"/>
-      </el-form-item>
-      <el-form-item label="场站类型">
-        <el-select v-model="electricFieldType" placeholder="请选择" clearable>
-          <el-option
+    <div class="dark-el-input dark-el-button">
+      <el-form ref="queryForm" size="small" :inline="true">
+        <el-form-item label="场站名称">
+          <el-input v-model="stationName" maxlength="50"/>
+        </el-form-item>
+        <el-form-item label="场站类型">
+          <el-select v-model="electricFieldType" placeholder="请选择" clearable popper-class="cpp-popper">
+            <el-option
               v-for="item in electricFieldTypeList"
               :key="item.value"
               :label="item.label"
               :value="item.value">
-          </el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" size="mini" style="margin-left: 5px" icon="el-icon-search" @click="dataQuery">查询
-        </el-button>
-      </el-form-item>
-    </el-form>
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" size="small" style="margin-left: 5px" icon="el-icon-search" @click="dataQuery">查询
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">

cpp-ui/src/views/configManager/parsingConf/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="app-container">
     <basic-container>
       <el-tabs v-model="activeName" @tab-click="handleClick">
         <el-tab-pane label="短期" name="dq">

cpp-ui/src/views/configManager/parsingType/index.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="execution">
+  <div class="execution app-container">
     <basic-container>
-      <div style="margin-bottom: .5%">
-        <el-button-group style="margin-left: 1%">
-          <el-button type="primary" icon="el-icon-search" :loading="tableLoading" @click="getList()">刷新</el-button>
-          <el-button type="primary" icon="el-icon-circle-plus-outline" @click="handleAdd()" :loading="tableLoading">添加</el-button>
-        </el-button-group>
+      <div class="dark-el-button" style="margin-bottom: .5%">
+<!--        <el-button-group style="margin-left: 1%">-->
+          <el-button type="primary" size="small" icon="el-icon-search" :loading="tableLoading" @click="getList()">刷新</el-button>
+          <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="handleAdd()" :loading="tableLoading">添加</el-button>
+<!--        </el-button-group>-->
       </div>
 
       <el-table

cpp-ui/src/views/configManager/sftpChannel/index.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="execution">
+  <div class="execution app-container">
     <basic-container>
-      <div style="margin-bottom: .5%">
-        <el-button-group style="margin-left: 1%">
-          <el-button type="primary" icon="el-icon-search" :loading="tableLoading" @click="getList()">刷新</el-button>
-          <el-button type="primary" icon="el-icon-circle-plus-outline" @click="handleAdd()" :loading="tableLoading">添加
+      <div class="dark-el-button" style="margin-bottom: .5%">
+<!--        <el-button-group style="margin-left: 1%">-->
+          <el-button type="primary" size="small" icon="el-icon-search" :loading="tableLoading" @click="getList()">刷新</el-button>
+          <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="handleAdd()" :loading="tableLoading">添加
           </el-button>
-        </el-button-group>
+<!--        </el-button-group>-->
       </div>
 
       <el-table

cpp-ui/src/views/stationDataQuery/historyforecastdata/index.vue

@@ -771,7 +771,7 @@ export default {
       })
     },
     zhDraw(wsTime, zhMap,stationType) {
-      this.zhChart = echarts.init(document.getElementById('zhCharts'))
+      this.zhChart = echarts.init(document.getElementById('zhCharts'),'dark')
       let option = {
         backgroundColor: 'transparent',
         title: {
@@ -780,7 +780,7 @@ export default {
           textStyle: {
             fontWeight: 'normal',
             fontSize: 16,
-            color: this.lineColor
+            // color: this.lineColor
           },
           left: '1%'
         },
@@ -803,7 +803,7 @@ export default {
           right: '4%',
           textStyle: {
             fontSize: 12,
-            color: this.lineColor
+            // color: this.lineColor
           },
           selected: {}
         },
@@ -814,9 +814,9 @@ export default {
           end: 100,
           left: "15%",
           right: "15%",
-          textStyle: {
-            color: this.lineColor
-          }
+          // textStyle: {
+            // color: this.lineColor
+          // }
         }, {
           type: 'inside'
         }],
@@ -830,11 +830,11 @@ export default {
         xAxis: [{
           type: 'category',
           boundaryGap: false,
-          axisLine: {
-            lineStyle: {
-              color: this.lineColor
-            }
-          },
+          // axisLine: {
+          //   lineStyle: {
+          //     color: this.lineColor
+          //   }
+          // },
           data: []
         }],
         yAxis: [{
@@ -843,16 +843,16 @@ export default {
           axisTick: {
             show: false
           },
-          axisLine: {
-            lineStyle: {
-              color: this.lineColor
-            }
-          },
+          // axisLine: {
+          //   lineStyle: {
+          //     color: this.lineColor
+          //   }
+          // },
           axisLabel: {
             margin: 10,
             textStyle: {
               fontSize: 14,
-              color: this.lineColor
+              // color: this.lineColor
             },
             formatter: '{value}',
           },
@@ -867,17 +867,17 @@ export default {
           axisTick: {
             show: false
           },
-          axisLine: {
-            lineStyle: {
-              color: this.lineColor
-            }
-          },
+          // axisLine: {
+          //   lineStyle: {
+          //     color: this.lineColor
+          //   }
+          // },
 
           axisLabel: {
             margin: 10,
             textStyle: {
               fontSize: 14,
-              color: this.lineColor
+              // color: this.lineColor
             },
             formatter: '{value}',
           },

cpp-ui/样式开发规则.md

@@ -0,0 +1,14 @@
+## 样式开发
+
+```bash
+单页面最外部class为：app-container
+搜索栏的最外层class为：dark-el-input dark-el-button
+element-ui 下拉框 日期选择器等有下拉的组件 添加 popper-class="cpp-popper"
+    eg:<el-select  popper-class="cpp-popper">.....</el-select>
+element-ui 搜索栏按钮大小为 small
+element-ui 新增 修改 删除 按钮大小为 mini
+
+
+echarts 初始化应用 dark 主题
+echarts.init(document.getElementById(id),'dark')
+```