Accueil Explorer Aide
Connexion
xieshengjie
/
hb_sis_zhfx
2
0
Fork 0
Fichiers Tickets 0 Pull Requests 0 Wiki
Parcourir la source

白色版本初版提交

Koishi il y a 3 ans
Parent
38edd326d1
commit
6a3b8b1b2f
32 fichiers modifiés avec 2839 ajouts et 925 suppressions
Vue séparée Afficher les stats Diff
  1. 13 0
      README.md
  2. 1 0
      package.json
  3. 1 1
      public/index.html
  4. 18 0
      public/static/js/less.min.js
  5. 23 0
      public/static/stylesheet/color.less
  6. 62 4
      src/App.vue
  7. 23 0
      src/assets/styles/common/common.less
  8. 278 0
      src/assets/styles/theme/dark/dark-jsc.less
  9. 6 0
      src/assets/styles/theme/dark/setting.less
  10. 166 0
      src/assets/styles/theme/light/light-jjyx.less
  11. 404 0
      src/assets/styles/theme/light/light-jsc.less
  12. 30 0
      src/assets/styles/theme/light/light-qt.less
  13. 140 0
      src/assets/styles/theme/light/light-sp.less
  14. 6 0
      src/assets/styles/theme/light/setting.less
  15. 21 8
      src/components/chart/bar/list-bar-chart2.vue
  16. 44 7
      src/components/chart/bar/multiple-bar-chart.vue
  17. 21 4
      src/components/chart/bar/percent-bar.vue
  18. 25 7
      src/components/chart/line/double-line-chart.vue
  19. 448 431
      src/components/chart/line/multiple-y-line-chart-normal.vue
  20. 45 12
      src/components/chart/pie/dash-pie-chart.vue
  21. 16 5
      src/components/chart/pie/radar-pie-chart.vue
  22. 1 1
      src/components/coms/table/group-table.vue
  23. 234 198
      src/components/other/healthReport/index.vue
  24. 4 1
      src/store/index.js
  25. 23 58
      src/views/Home/Home.vue
  26. 446 64
      src/views/Home/components/map/svg-map-nx.vue
  27. 0 1
      src/views/Home/components/weather.vue
  28. 63 11
      src/views/NewPages/power-benchmarking.vue
  29. 149 50
      src/views/Others/index.vue
  30. 4 5
      src/views/SandTable/SandTable.vue
  31. 107 45
      src/views/layout/Header.vue
  32. 17 12
      src/views/layout/Menu.vue

+ 13 - 0
README.md
Voir le fichier 

@@ -1,6 +1,19 @@
 
 # 三区综合分析系统[sis_zhfx]
 
 
 * 注：需创建自己的 GIT 分支进行代码开发，开发完调试完毕后再自行合并至主干分支。
 
+* 关于主题样式的开发，应遵循以下开发提规章：
 
+- 通过增加样式的 id class 标签名 来提升权重实现样式替换。
 
+即：避免使用 !important 修饰符来提升权重(本身需覆盖的样式就有 !important 的除外)
 
+
 
+- 个人所负责的模块内的所有样式个人处理解决完。
 
+包括但不限于模块内所使用但还没进行样式切换修改的组件、工具、弹窗、第三方UI库等。
 
+
 
+- 理论上来说只需要亮色主题样式。
 
+但是部分模块可能还需要再写一份暗色的样式避免切换后亮色主题的部分样式残留问题。如需写两套，所分配任务的个人承担。
 
+
 
+- 遵循一个模块一个 less 文件的原则，文件顶部写明当前文件所属模块的名称。
 
+
 
+- 提交代码后如果衍生出冲突需要自行解决
 
 
 ## 项目运行
 
 ```

+ 1 - 0
package.json
Voir le fichier 

@@ -13,6 +13,7 @@
 
   "dependencies": {
 
     "@antv/x6": "^1.24.4",
 
     "@arcgis/core": "^4.19.3",
 
+    "@element-plus/icons-vue": "^0.2.4",
 
     "@open-wc/webpack-import-meta-loader": "git+https://github.com/KmjKoishi/webpack-import-meta-loader-fixed.git",
 
     "animate.css": "3.5",
 
     "axios": "^0.21.1",

+ 1 - 1
public/index.html
Voir le fichier 

@@ -32,7 +32,7 @@
 
   </title>
 
 </head>
 
 
-<body>
 
+<body id="appBody" class="dark">
 
   <div id="ie_dialog">
 
     本平台仅支持非ie浏览器使用
 
   </div>

Fichier diff supprimé car celui-ci est trop grand
+ 18 - 0
public/static/js/less.min.js


+ 23 - 0
public/static/stylesheet/color.less
Voir le fichier 

@@ -0,0 +1,23 @@
 
+@green: #05bb4c;
 
+@yellow: #edbf03;
 
+@blue: #1a93cf;
 
+@darkBlue: #4b55ae;
 
+@darkBlue2: #1529E9;
 
+@darkgray: #606769;
 
+@gray: #606769;
 
+@gray-l: #B3BDC0;
 
+@black: #000000;
 
+@write: #ffffff;
 
+@ligntRed: #ff7a7f;
 
+@red: #BA3237;
 
+@darkRed: #710f14;
 
+@purple: #4b55ae;
 
+@orange: #e17e23;
 
+@white: #ffffff;
 
+@pink: #c531c7;
 
+
 
+@greenLinearTop: linear-gradient(to top, fade(@green, 50%), fade(@green, 0));
 
+@greenLinearRight: linear-gradient(to right, fade(@green, 50%), fade(@green, 0));
 
+@redLinearRight: linear-gradient(to right, fade(@red, 50%), fade(@red, 0));
 
+
 
+@font-color: #7a8385;

+ 62 - 4
src/App.vue
Voir le fichier 

@@ -241,9 +241,60 @@ l16.229-16.229l16.229,16.229l42.867-42.867C115.034,45.228,109.133,42.189,102.956
 
       :class="{ hover: isShowMenu }"
 
       @mouseenter="showMenu"
 
       @mouseleave="hideMenu"
 
+      v-if="$store.state.themeName === 'dark'"
 
     >
 
       <Menu :root="root" />
 
     </div>
 
+    <div>
 
+      <el-menu
 
+        class="lightMenu"
 
+        :class="$store.state.themeName === 'light' ? 'show' : 'hidden'"
 
+        default-active="2"
 
+        :collapse="true"
 
+        text-color="#ffffff"
 
+        active-text-color="#6262a2"
 
+        background-color="#36348e"
 
+      >
 
+        <el-sub-menu index="1" title="菜单1">
 
+          <template #title>
 
+            <el-icon>
 
+              <SvgIcon svgid="svg-matrix" />
 
+            </el-icon>
 
+          </template>
 
+          <el-menu-item-group>
 
+            <template #title><span>Group One</span></template>
 
+            <el-menu-item index="1-1">item one</el-menu-item>
 
+            <el-menu-item index="1-2">item two</el-menu-item>
 
+          </el-menu-item-group>
 
+          <el-menu-item-group title="Group Two">
 
+            <el-menu-item index="1-3">item three</el-menu-item>
 
+          </el-menu-item-group>
 
+          <el-sub-menu index="1-4">
 
+            <template #title><span>item four</span></template>
 
+            <el-menu-item index="1-4-1">item one</el-menu-item>
 
+          </el-sub-menu>
 
+        </el-sub-menu>
 
+        <el-sub-menu index="2" title="菜单2">
 
+          <template #title>
 
+            <el-icon>
 
+              <SvgIcon svgid="svg-matrix" />
 
+            </el-icon>
 
+          </template>
 
+          <el-menu-item-group>
 
+            <template #title><span>Group One</span></template>
 
+            <el-menu-item index="2-1">item one</el-menu-item>
 
+            <el-menu-item index="2-2">item two</el-menu-item>
 
+          </el-menu-item-group>
 
+          <el-menu-item-group title="Group Two">
 
+            <el-menu-item index="2-3">item three</el-menu-item>
 
+          </el-menu-item-group>
 
+          <el-sub-menu index="2-4">
 
+            <template #title><span>item four</span></template>
 
+            <el-menu-item index="2-4-1">item one</el-menu-item>
 
+          </el-sub-menu>
 
+        </el-sub-menu>
 
+      </el-menu>
 
+    </div>
 
     <div class="main-body">
 
       <router-view />
 
     </div>
 
@@ -270,12 +321,17 @@ import { mapMutations } from "vuex";
 
 
 import LoginPage from "./views/layout/login-page.vue";
 
 import sisView from "./views/sisView/index.vue";
 
+
 
+import SvgIcon from "@com/coms/icon/svg-icon.vue";
 
+
 
+import $ from "jquery";
 
 export default {
 
   components: {
 
     Menu,
 
     Header,
 
     LoginPage,
 
     sisView,
 
+    SvgIcon,
 
   },
 
 
   data() {
 
@@ -291,6 +347,7 @@ export default {
 
 
   created() {
 
     let that = this;
 
+    $("#appBody").attr("class", that.$store.state.themeName);
 
     // that.$nextTick(() => {
 
     //   that.API.requestData({
 
     //     isMust: false, // 请求是否携带 token ，默认为 true ，可缺省
 
@@ -377,7 +434,8 @@ body {
 
   margin: 0;
 
   background: #fff;
 
   color: #fff;
 
-  background-image: url("./assets/background.png");
 
+  // background-image: url("./assets/background.png");
 
+  background: rgb(4, 12, 11);
 
   background-size: cover;
 
   font-size: @fontsize;
 
   font-family: @defalut-font-family;
 
@@ -476,10 +534,10 @@ body {
 
     border-color: #05bb4c;
 
   }
 
 }
 
-.el-tree-node__content{
 
+.el-tree-node__content {
 
   height: 40px !important;
 
 }
 
-.el-tree-node__label{
 
+.el-tree-node__label {
 
   font-size: 18px !important;
 
 }
 
-</style>
 
+</style>

+ 23 - 0
src/assets/styles/common/common.less
Voir le fichier 

@@ -1,2 +1,25 @@
 
 @import "color.less";
 
 @import "font.less";
 
+
 
+// 关于主题样式的开发，应遵循以下开发提规章：
 
+// 1. 通过增加样式的 id class 标签名 来提升权重实现样式替换。
 
+// 即：避免使用 !important 修饰符来提升权重(本身需覆盖的样式就有 !important 的除外)
 
+
 
+// 2. 个人所负责的模块内的所有样式个人处理解决完。
 
+// 包括但不限于模块内所使用但还没进行样式切换修改的组件、工具、弹窗、第三方UI库等。
 
+
 
+// 3. 理论上来说只需要亮色主题样式。
 
+// 但是部分模块可能还需要再写一份暗色的样式避免切换后亮色主题的部分样式残留问题。如需写两套，所分配任务的个人承担。
 
+
 
+// 4. 遵循一个模块一个 less 文件的原则，文件顶部写明当前文件所属模块的名称。
 
+
 
+// 5. 提交代码后如果衍生出冲突需要自行解决
 
+
 
+// 亮色主题
 
+@import "../theme/light/light-jsc.less"; // 驾驶舱
 
+@import "../theme/light/light-jjyx.less"; // 经济运行
 
+@import "../theme/light/light-sp.less"; // 沙盘
 
+@import "../theme/light/light-qt.less"; // 其他
 
+
 
+// 暗色主题
 
+@import "../theme/dark/dark-jsc.less"; // 驾驶舱

+ 278 - 0
src/assets/styles/theme/dark/dark-jsc.less
Voir le fichier 

@@ -0,0 +1,278 @@
 
+// 驾驶舱模块黑色主题样式
 
+
 
+@import "./setting.less";
 
+
 
+#appBody.dark {
 
+    transition: @transition;
 
+
 
+    .gray {
 
+        transition: @transition;
 
+    }
 
+
 
+    .green {
 
+        transition: @transition;
 
+    }
 
+
 
+    .white {
 
+        transition: @transition;
 
+    }
 
+
 
+    #app {
 
+        transition: @transition;
 
+    }
 
+
 
+    .panel-title {
 
+        transition: @transition;
 
+    }
 
+
 
+    .panel-tools {
 
+        transition: @transition;
 
+    }
 
+
 
+    .weather {
 
+        .other-info {
 
+            .text {
 
+                transition: @transition;
 
+            }
 
+
 
+            div.svg-icon svg use {
 
+                transition: @transition;
 
+            }
 
+        }
 
+    }
 
+
 
+    .security-days {
 
+        .text {
 
+            transition: @transition;
 
+        }
 
+
 
+        .num {
 
+            transition: @transition;
 
+        }
 
+    }
 
+
 
+    .tab-box {
 
+        .tab-item {
 
+            span {
 
+                svg {
 
+                    use {
 
+                        transition: @transition;
 
+                    }
 
+                }
 
+            }
 
+        }
 
+    }
 
+
 
+    .header-body {
 
+        .header-title {
 
+            svg {
 
+                g:nth-child(1) {
 
+
 
+                    path,
 
+                    polygon {
 
+                        transition: @transition;
 
+                    }
 
+                }
 
+            }
 
+        }
 
+    }
 
+
 
+    .weather-info {
 
+        span svg use {
 
+            transition: @transition;
 
+        }
 
+    }
 
+
 
+    .map .tab-box .tab-item.active {
 
+        background-image: linear-gradient(to top,
 
+                rgba(5, 187, 76, 0.5),
 
+                rgba(5, 187, 76, 0));
 
+        transition: @transition;
 
+    }
 
+
 
+    .map .tab-box .tab-item.active::after {
 
+        transition: @transition;
 
+    }
 
+
 
+    .header-menu .header-menu-list .header-menu-item.active::after {
 
+        transition: @transition;
 
+    }
 
+
 
+    .header-menu .header-menu-list .header-menu-item.active {
 
+        background: linear-gradient(to top,
 
+                rgba(5, 187, 76, 0.5),
 
+                rgba(5, 187, 76, 0));
 
+        border    : 0.093vh solid @green;
 
+        transition: color @transition ease-in-out;
 
+    }
 
+
 
+    .coulometric-analysis {
 
+        .card-1 {
 
+            .card-icon {
 
+                svg use {
 
+                    transition: @transition;
 
+                }
 
+            }
 
+        }
 
+    }
 
+
 
+    .map .compass {
 
+        svg g:nth-child(3) {
 
+            g g path {
 
+                transition: @transition;
 
+            }
 
+        }
 
+
 
+        svg g:nth-child(4) {
 
+            g g path {
 
+                transition: @transition;
 
+            }
 
+        }
 
+
 
+        &::after {
 
+            transition: @transition;
 
+        }
 
+    }
 
+
 
+    .name-box-period-label {
 
+        transition: @transition;
 
+    }
 
+
 
+    .name-box-period-value {
 
+        transition: @transition;
 
+    }
 
+
 
+    .svg-map-nx {
 
+        .item-label {
 
+            rect {
 
+                transition: @transition;
 
+            }
 
+
 
+            .mapKey {
 
+                transition: @transition;
 
+            }
 
+        }
 
+
 
+        .popup-layer-svg {
 
+            .mapKey {
 
+                transition: @transition;
 
+            }
 
+        }
 
+
 
+        #popup-box-svg rect {
 
+            transition: @transition;
 
+        }
 
+    }
 
+
 
+    .com-panel-3,
 
+    .com-panel,
 
+    .header-body {
 
+        transition: @transition;
 
+    }
 
+
 
+    .com-panel-3 .dot,
 
+    .com-panel.line:before {
 
+        transition: @transition;
 
+    }
 
+
 
+    .panel-header {
 
+        transition: @transition;
 
+    }
 
+
 
+    .fengji-icon {
 
+        svg use {
 
+            transition: @transition;
 
+        }
 
+    }
 
+
 
+    .modal.el-dialog {
 
+        transition: @transition;
 
+    }
 
+
 
+    .modal.el-dialog .el-dialog__title {
 
+        transition: @transition;
 
+    }
 
+
 
+    .situation-body {
 
+        .value span:nth-child(2) {
 
+            transition: @transition;
 
+        }
 
+    }
 
+
 
+    .coulometric-analysis .card-title {
 
+        transition: @transition;
 
+    }
 
+
 
+    .com-panel,
 
+    .panel-header,
 
+    .home .table-card,
 
+    .com-panel-3.situation,
 
+    .el-menu--collapse,
 
+    .el-sub-menu,
 
+    .el-sub-menu__title,
 
+    .el-menu--popup,
 
+    .el-menu-item {
 
+        transition: @transition;
 
+    }
 
+
 
+    .com-panel.line::before {
 
+        transition: @transition;
 
+    }
 
+
 
+    .lightMenu {
 
+        width        : 0;
 
+        height       : calc(100% - 71px);
 
+        position     : absolute;
 
+        left         : 0;
 
+        top          : 57px;
 
+        z-index      : 100;
 
+        border-radius: 20px;
 
+        border       : 0;
 
+        overflow     : hidden;
 
+        transition   : @transition;
 
+    }
 
+
 
+    .lightMenu.hidden {
 
+        width     : 0;
 
+        transition: @transition;
 
+    }
 
+
 
+    .main-body {
 
+        margin-left: 0;
 
+        transition : @transition;
 
+    }
 
+
 
+    .dot.top-left {
 
+        transition: @transition;
 
+    }
 
+
 
+    .dot.bottom-left {
 
+        transition: @transition;
 
+    }
 
+
 
+    .dot.top-rignt {
 
+        transition: @transition;
 
+    }
 
+
 
+    .dot.bottom-right {
 
+        transition: @transition;
 
+    }
 
+
 
+    .lightMenu .el-menu--collapse {
 
+        transition: @transition;
 
+    }
 
+
 
+    .lightMenu .el-menu--collapse {
 
+        height: 100%;
 
+    }
 
+
 
+    .lightMenu .el-sub-menu__title {
 
+        transition: @transition;
 
+    }
 
+
 
+    .lightMenu .el-sub-menu__title i {
 
+        transition: @transition;
 
+    }
 
+
 
+    transition: @transition;
 
+}

+ 6 - 0
src/assets/styles/theme/dark/setting.less
Voir le fichier 

@@ -0,0 +1,6 @@
 
+// 暗色样式配置
 
+
 
+@green     : #05bb4c;
 
+@deepblue  : #36348e;
 
+@transition: 0.25s;
 
+@black     : rgb(13, 30, 28);

+ 166 - 0
src/assets/styles/theme/light/light-jjyx.less
Voir le fichier 

@@ -0,0 +1,166 @@
 
+// 经济运行模块白色主题样式
 
+
 
+@import "./setting.less";
 
+
 
+#appBody.light {
 
+    .static-main {
 
+        background   : #fff;
 
+        border-color : @deepblue;
 
+        border-radius: @borderRaduis;
 
+        transition   : @transition;
 
+        flex         : 0 0 130px;
 
+        margin-right : 5px;
 
+        transition   : @transition;
 
+
 
+        .icon i {
 
+            background  : @deepblue;
 
+            border-color: rgb(128, 128, 128);
 
+            transition  : @transition;
 
+
 
+            svg use {
 
+                fill      : #fff;
 
+                transition: @transition;
 
+            }
 
+        }
 
+
 
+        .info .value {
 
+            color     : @deepblue;
 
+            transition: @transition;
 
+        }
 
+    }
 
+
 
+    .static-items {
 
+        background   : #fff;
 
+        margin-right : 4px;
 
+        border-radius: @borderRaduis;
 
+        transition   : @transition;
 
+
 
+        .static-items-title {
 
+            color      : @deepblue;
 
+            font-weight: 700;
 
+            transition : @transition;
 
+        }
 
+
 
+        .items {
 
+            .item {
 
+                margin-left  : 4px;
 
+                border-radius: @borderRaduis;
 
+                background   : rgba(128, 128, 128, 0.15);
 
+                transition   : @transition;
 
+                font-weight  : 700;
 
+
 
+                .title {
 
+                    color      : @deepblue;
 
+                    font-weight: 700;
 
+                    transition : @transition;
 
+                }
 
+            }
 
+        }
 
+    }
 
+
 
+    .power-benchmarking-page .top .top-left .top-left-header .header-right>div.active,
 
+    .power-benchmarking-page .top .top-left .top-left-header .header-right>div:hover {
 
+        background  : rgba(54, 52, 142, 0.2);
 
+        border-color: @deepblue;
 
+        color       : @deepblue;
 
+        transition  : @transition;
 
+    }
 
+
 
+    .power-benchmarking-page .top .top-right .rank-title::before {
 
+        background: linear-gradient(135deg, rgba(54, 52, 142, 0.4), transparent, transparent, transparent, rgba(54, 52, 142, 0.4));
 
+    }
 
+
 
+    .power-benchmarking-page .top .top-right .rank-title {
 
+        border-color: @deepblue;
 
+        color       : @deepblue;
 
+        transition  : @transition;
 
+    }
 
+
 
+    .power-benchmarking-page .top .top-right .rank-title .border {
 
+        border-color: @deepblue;
 
+        transition  : @transition;
 
+    }
 
+
 
+    .power-benchmarking-page .top .top-right .rank-table.el-table thead tr th {
 
+        background : rgba(54, 52, 142, 0.05);
 
+        color      : @black;
 
+        font-weight: 700;
 
+        transition : @transition;
 
+    }
 
+
 
+    .power-benchmarking-page .top .top-right .rank-block {
 
+        border-color: @deepblue;
 
+        background  : rgba(54, 52, 142, 0.2);
 
+        transition  : @transition;
 
+    }
 
+
 
+    .power-benchmarking-page .top .top-right .rank-table {
 
+        border-color: @deepblue;
 
+        transition  : @transition;
 
+    }
 
+
 
+    .top-right .el-table__body-wrapper {
 
+        background: #fff;
 
+        transition: @transition;
 
+    }
 
+
 
+    .main-body .el-table td,
 
+    .main-body .custom-table.el-table td {
 
+        color      : @black;
 
+        font-weight: 700;
 
+        transition : @transition;
 
+    }
 
+
 
+    .main-body .el-table tr:hover td,
 
+    .main-body .custom-table.el-table tr:hover td {
 
+        color      : @deepblue;
 
+        font-weight: 700;
 
+        transition : @transition;
 
+    }
 
+
 
+    .power-benchmarking-page .top .top-right .rank-table.el-table.el-table--striped .el-table__body tr.el-table__row--striped td {
 
+        background: rgba(54, 52, 142, 0.1);
 
+        transition: @transition;
 
+    }
 
+
 
+    .power-benchmarking-page .top .top-right .rank-table.el-table.el-table--striped .el-table__body tr.el-table__row--striped:hover td {
 
+        background: rgba(54, 52, 142, 0.1) !important;
 
+        transition: @transition;
 
+    }
 
+
 
+    .top-left .el-table {
 
+        // background: #fff;
 
+        // transition: @transition;
 
+
 
+        table {
 
+            background: #fff;
 
+            transition: @transition;
 
+        }
 
+
 
+        th,
 
+        td {
 
+            font-weight: bold;
 
+            font-weight: 700;
 
+        }
 
+
 
+        thead tr:first-child th {
 
+            background: rgba(128, 128, 128, 0.3);
 
+            color     : @black;
 
+            transition: @transition;
 
+        }
 
+
 
+        thead tr:last-child th {
 
+            background: rgba(128, 128, 128, 0.1);
 
+            color     : @black;
 
+            transition: @transition;
 
+        }
 
+
 
+
 
+
 
+        th.light,
 
+        td.light {
 
+            color     : @deepblue  !important;
 
+            transition: @transition;
 
+        }
 
+    }
 
+}

+ 404 - 0
src/assets/styles/theme/light/light-jsc.less
Voir le fichier 

@@ -0,0 +1,404 @@
 
+// 驾驶舱模块白色主题样式
 
+
 
+@import "./setting.less";
 
+
 
+#appBody.light {
 
+    color     : @black;
 
+    transition: @transition;
 
+
 
+    .gray {
 
+        color      : @black;
 
+        font-weight: 700;
 
+        transition : @transition;
 
+    }
 
+
 
+    .green {
 
+        color      : @deepblue;
 
+        font-weight: 700;
 
+        transition : @transition;
 
+    }
 
+
 
+    .white {
 
+        color     : @black;
 
+        transition: @transition;
 
+    }
 
+
 
+    #app {
 
+        background: rgb(220, 221, 223);
 
+        transition: @transition;
 
+    }
 
+
 
+    .panel-title {
 
+        color     : @black;
 
+        transition: @transition;
 
+    }
 
+
 
+    .panel-tools {
 
+        color     : @black;
 
+        transition: @transition;
 
+    }
 
+
 
+    .weather {
 
+        .other-info {
 
+            .text {
 
+                color     : @black;
 
+                transition: @transition;
 
+            }
 
+
 
+            div.svg-icon svg use {
 
+                fill      : @deepblue;
 
+                transition: @transition;
 
+            }
 
+        }
 
+    }
 
+
 
+    .security-days {
 
+        .text {
 
+            color     : @black;
 
+            transition: @transition;
 
+        }
 
+
 
+        .num {
 
+            color     : @deepblue;
 
+            transition: @transition;
 
+        }
 
+    }
 
+
 
+    .tab-box {
 
+        .tab-item {
 
+            span {
 
+                svg {
 
+                    use {
 
+                        fill      : @black;
 
+                        transition: @transition;
 
+                    }
 
+                }
 
+            }
 
+        }
 
+    }
 
+
 
+    .header-body {
 
+        border    : 0;
 
+        transition: @transition;
 
+
 
+        .header-title {
 
+            svg {
 
+                g:nth-child(1) {
 
+
 
+                    path,
 
+                    polygon {
 
+                        fill      : @black;
 
+                        transition: @transition;
 
+                    }
 
+                }
 
+            }
 
+        }
 
+    }
 
+
 
+    .weather-info {
 
+        span svg use {
 
+            fill      : @black;
 
+            transition: @transition;
 
+        }
 
+    }
 
+
 
+    .map .tab-box .tab-item.active {
 
+        color   : @deepblue;
 
+        position: relative;
 
+        background-image: linear-gradient(to top,
 
+                rgba(57, 54, 143, 0.5),
 
+                rgba(5, 187, 76, 0));
 
+        transition: @transition;
 
+    }
 
+
 
+    .map .tab-box .tab-item.active::after {
 
+        border    : 0.093vh solid @deepblue;
 
+        transition: @transition;
 
+    }
 
+
 
+    .header-menu .header-menu-list .header-menu-item.active::after {
 
+        border    : 0.093vh solid @deepblue;
 
+        transition: @transition;
 
+    }
 
+
 
+    .header-menu .header-menu-list .header-menu-item.active {
 
+        color   : @deepblue;
 
+        position: relative;
 
+        background: linear-gradient(to top,
 
+                rgba(57, 54, 143, 0.5),
 
+                rgba(5, 187, 76, 0));
 
+        border    : 0.093vh solid @deepblue;
 
+        transition: color @transition ease-in-out;
 
+    }
 
+
 
+    .home .table-card {
 
+        outline   : none;
 
+        transition: @transition;
 
+        overflow  : hidden;
 
+    }
 
+
 
+    .coulometric-analysis {
 
+        .card-1 {
 
+            .card-icon {
 
+                svg use {
 
+                    fill      : @deepblue;
 
+                    filter    : drop-shadow(0 0 6px @deepblue);
 
+                    transition: @transition;
 
+                }
 
+            }
 
+        }
 
+    }
 
+
 
+    .map .compass {
 
+        svg g:nth-child(3) {
 
+            g g path {
 
+                fill      : @deepblue;
 
+                transition: @transition;
 
+            }
 
+        }
 
+
 
+        svg g:nth-child(4) {
 
+            g g path {
 
+                fill      : @deepblue;
 
+                transition: @transition;
 
+            }
 
+        }
 
+
 
+        &::after {
 
+            box-shadow: inset 0px -5px 10px 0px @deepblue;
 
+            transition: @transition;
 
+        }
 
+    }
 
+
 
+    .name-box-period-label {
 
+        color     : @black;
 
+        transition: @transition;
 
+    }
 
+
 
+    .name-box-period-value {
 
+        color     : @deepblue;
 
+        transition: @transition;
 
+    }
 
+
 
+    .svg-map-nx {
 
+        .item-label {
 
+            rect {
 
+                fill      : @deepblue;
 
+                transition: @transition;
 
+            }
 
+
 
+            .mapKey {
 
+                fill      : #fff;
 
+                transition: @transition;
 
+            }
 
+        }
 
+
 
+        .popup-layer-svg {
 
+            .mapKey {
 
+                fill      : #fff;
 
+                transition: @transition;
 
+            }
 
+        }
 
+
 
+        #popup-box-svg rect {
 
+            fill      : @deepblue;
 
+            opacity   : 0.8;
 
+            transition: @transition;
 
+        }
 
+
 
+        .esp-1 {
 
+            stroke: @deepblue;
 
+        }
 
+
 
+        .esp-6 {
 
+            stroke: @deepblue;
 
+        }
 
+
 
+        .esp-c {
 
+            stroke: @deepblue;
 
+        }
 
+    }
 
+
 
+    .com-panel-3,
 
+    .com-panel,
 
+    .header-body {
 
+        background: #fff;
 
+        transition: @transition;
 
+    }
 
+
 
+    .com-panel-3 .dot,
 
+    .com-panel.line:before {
 
+        background: @black;
 
+        transition: @transition;
 
+    }
 
+
 
+    .panel-header {
 
+        background: #fff;
 
+        transition: @transition;
 
+    }
 
+
 
+    .fengji-icon {
 
+        svg use {
 
+            fill      : @deepblue;
 
+            transition: @transition;
 
+        }
 
+    }
 
+
 
+    .modal.el-dialog {
 
+        background   : rgba(255, 255, 255, 0.85);
 
+        border       : 1px solid rgba(57, 54, 143, 0.5);
 
+        box-shadow   : 0px 8px 17px 1px rgb(57, 54, 143 / 30%);
 
+        border-radius: @borderRaduis;
 
+        transition   : @transition;
 
+    }
 
+
 
+    .modal.el-dialog .el-dialog__title {
 
+        color     : rgba(0, 0, 0, 0.75);
 
+        transition: @transition;
 
+    }
 
+
 
+    .situation-body {
 
+        .value span:nth-child(2) {
 
+            font-weight: 700;
 
+            transition : @transition;
 
+        }
 
+    }
 
+
 
+    .coulometric-analysis .card-title {
 
+        color     : @black;
 
+        transition: @transition;
 
+    }
 
+
 
+    .com-panel,
 
+    .panel-header,
 
+    .home .table-card,
 
+    .com-panel-3.situation,
 
+    .el-menu--collapse,
 
+    .el-sub-menu,
 
+    .el-sub-menu__title,
 
+    .el-menu--popup,
 
+    .el-menu-item {
 
+        border-radius: @borderRaduis;
 
+        transition   : @transition;
 
+    }
 
+
 
+    .com-panel {
 
+        padding-bottom: 10px;
 
+        transition    : @transition;
 
+    }
 
+
 
+    .com-panel.line::before {
 
+        width     : 4px;
 
+        height    : 4px;
 
+        background: @black;
 
+        margin    : 0.85vh 0.556vh 0vh 0.85vh;
 
+        transition: @transition;
 
+    }
 
+
 
+    .com-panel.line {
 
+        border-left: 0;
 
+        transition : @transition;
 
+    }
 
+
 
+    .lightMenu {
 
+        width        : 0;
 
+        height       : calc(100% - 71px);
 
+        position     : absolute;
 
+        left         : 14px;
 
+        top          : 57px;
 
+        z-index      : 100;
 
+        border-radius: 20px;
 
+        border       : 0;
 
+        overflow     : hidden;
 
+        transition   : @transition;
 
+    }
 
+
 
+    .lightMenu.show {
 
+        width     : 54px;
 
+        transition: @transition;
 
+    }
 
+
 
+    .main-body {
 
+        margin-left: 66px;
 
+        max-width  : calc(100vw - 54px - 12px);
 
+        transition : @transition;
 
+    }
 
+
 
+    .dot.top-left {
 
+        top       : 0.85vh;
 
+        left      : 0.85vh;
 
+        background: @black;
 
+        transition: @transition;
 
+    }
 
+
 
+    .dot.bottom-left {
 
+        bottom    : 0.85vh;
 
+        left      : 0.85vh;
 
+        background: @black;
 
+        transition: @transition;
 
+    }
 
+
 
+    .dot.top-rignt {
 
+        top       : 0.85vh;
 
+        right     : 0.85vh;
 
+        background: @black;
 
+        transition: @transition;
 
+    }
 
+
 
+    .dot.bottom-right {
 
+        bottom    : 0.85vh;
 
+        right     : 0.85vh;
 
+        background: @black;
 
+        transition: @transition;
 
+    }
 
+
 
+    .lightMenu .el-menu--collapse {
 
+        width     : 54px;
 
+        transition: @transition;
 
+    }
 
+
 
+    .lightMenu .el-menu--collapse {
 
+        height: 100%;
 
+    }
 
+
 
+    .lightMenu .el-sub-menu__title {
 
+        text-align    : center;
 
+        vertical-align: middle;
 
+        padding       : 0 20px;
 
+        transition    : @transition;
 
+    }
 
+
 
+    .lightMenu .el-sub-menu__title i {
 
+        color     : #fff;
 
+        transition: @transition;
 
+    }
 
+
 
+    .com-panel-3 {
 
+        border    : 0;
 
+        transition: @transition;
 
+    }
 
+
 
+    .map .return {
 
+        color     : rgba(0, 0, 0, 0.8);
 
+        transition: @transition;
 
+
 
+        use {
 
+            fill      : @black;
 
+            transition: @transition;
 
+        }
 
+    }
 
+
 
+    .map .return:hover {
 
+        color       : @deepblue;
 
+        border-color: @deepblue;
 
+        transition  : @transition;
 
+
 
+        use {
 
+            fill      : @deepblue;
 
+            transition: @transition;
 
+        }
 
+    }
 
+
 
+    background: rgb(220, 221, 223);
 
+    transition: @transition;
 
+}

+ 30 - 0
src/assets/styles/theme/light/light-qt.less
Voir le fichier 

@@ -0,0 +1,30 @@
 
+// 其他模块白色主题样式
 
+
 
+@import "./setting.less";
 
+
 
+#appBody.light {
 
+
 
+    .sjcx-item {
 
+        color     : @black;
 
+        transition: @transition;
 
+    }
 
+
 
+    .sjcx-item:hover {
 
+        color     : @deepblue;
 
+        transition: @transition;
 
+    }
 
+
 
+    .imgTitle {
 
+        color     : @black;
 
+        transition: @transition;
 
+    }
 
+
 
+    .imgItem1:hover .imgTitle {
 
+        color     : @deepblue;
 
+        transition: @transition;
 
+    }
 
+
 
+    .el-carousel__item {
 
+        border-radius: @borderRaduis;
 
+    }
 
+}

+ 140 - 0
src/assets/styles/theme/light/light-sp.less
Voir le fichier 

@@ -0,0 +1,140 @@
 
+// 沙盘模块白色主题样式
 
+
 
+@import "./setting.less";
 
+
 
+#appBody.light {
 
+    .com-panel-sand {
 
+        background   : #fff;
 
+        border-top   : 1px solid transparent;
 
+        border-radius: @borderRaduis;
 
+        transition   : @transition;
 
+    }
 
+
 
+    .com-panel-sand::after {
 
+        background: transparent;
 
+        transition: @transition;
 
+    }
 
+
 
+    .com-panel-sand-header {
 
+        border-color: @deepblue;
 
+        font-weight : 700;
 
+        transition  : @transition;
 
+    }
 
+
 
+    .com-panel-sand .com-panel-sand-header::after,
 
+    .com-panel-sand .com-panel-sand-header::before {
 
+        background: @deepblue;
 
+        transition: @transition;
 
+    }
 
+
 
+    .com-panel-sand .com-panel-body .other-info {
 
+        .value {
 
+            color      : @black;
 
+            font-weight: 700;
 
+            transition : @transition;
 
+        }
 
+
 
+        .text {
 
+            color      : @black;
 
+            font-weight: 700;
 
+            transition : @transition;
 
+        }
 
+    }
 
+
 
+    .com-panel-sand .rank-table th {
 
+        color      : @black;
 
+        font-weight: 700;
 
+        transition : @transition;
 
+    }
 
+
 
+    .com-panel-sand .rank-table td {
 
+        font-weight: 700;
 
+        transition : @transition;
 
+    }
 
+
 
+    .sand-table-bottom {
 
+        .p-panel {
 
+            background   : #fff;
 
+            border-radius: @borderRaduis;
 
+        }
 
+
 
+        .p-panel-title {
 
+            color      : @black;
 
+            font-weight: 700;
 
+            transition : @transition;
 
+        }
 
+
 
+        .pp-info-data .gray-l {
 
+            color      : rgb(128, 128, 128);
 
+            font-weight: 700;
 
+            transition : @transition;
 
+        }
 
+    }
 
+
 
+    .sand-table-right .com-panel-body .com-table {
 
+        th {
 
+            color      : rgb(128, 128, 128);
 
+            font-weight: 700;
 
+            transition : @transition;
 
+        }
 
+
 
+
 
+        th.light {
 
+            color      : @deepblue  !important;
 
+            font-weight: 700;
 
+            transition : @transition;
 
+        }
 
+
 
+        td {
 
+            color      : @black;
 
+            font-weight: 700;
 
+            transition : @transition;
 
+        }
 
+
 
+        td.light {
 
+            color      : @deepblue  !important;
 
+            font-weight: 700;
 
+            transition : @transition;
 
+        }
 
+    }
 
+
 
+    .modal {
 
+        .el-dialog__body {
 
+            background: rgba(255, 255, 255, 0.8);
 
+            transition: @transition;
 
+
 
+
 
+            .el-form-item__label {
 
+                color     : @black;
 
+                transition: @transition;
 
+            }
 
+
 
+            .el-input__inner {
 
+                background   : rgba(0, 0, 0, 0.5);
 
+                border-color : rgba(0, 0, 0, 0.5);
 
+                border-radius: @borderRaduis;
 
+                transition   : @transition;
 
+            }
 
+        }
 
+    }
 
+
 
+    .weatherBox {
 
+        .r {
 
+            .el-collapse-item__content {
 
+                background : transparent;
 
+                color      : @black;
 
+                font-weight: 700;
 
+                padding    : 20px;
 
+                transition : @transition;
 
+            }
 
+
 
+            .el-collapse-item__header {
 
+                background   : transparent;
 
+                border-bottom: 1px solid #999;
 
+                color        : rgba(0, 0, 0, 0.75);
 
+                transition   : @transition;
 
+            }
 
+        }
 
+
 
+    }
 
+}

+ 6 - 0
src/assets/styles/theme/light/setting.less
Voir le fichier 

@@ -0,0 +1,6 @@
 
+// 亮色样式配置
 
+
 
+@black      : #000;
 
+@transition : 0.25s;
 
+@deepblue   : #36348e;
 
+@borderRaduis: 12px;

+ 21 - 8
src/components/chart/bar/list-bar-chart2.vue
Voir le fichier 

@@ -1,6 +1,11 @@
 
 <template>
 
   <div>
 
-    <div class="chart" v-for="index of list.length" :key="index" :id="id + index"></div>
 
+    <div
 
+      class="chart"
 
+      v-for="index of list.length"
 
+      :key="index"
 
+      :id="id + index"
 
+    ></div>
 
   </div>
 
 </template>
 
 
@@ -128,7 +133,7 @@ export default {
 
             // silent: true,
 
             itemStyle: {
 
               normal: {
 
-                color: function(params) {
 
+                color: function (params) {
 
                   return {
 
                     type: "linear",
 
                     x: 0,
 
@@ -155,11 +160,11 @@ export default {
 
               normal: {
 
                 show: true,
 
                 position: [0, util.vh("-20")],
 
-                formatter: function(param) {
 
+                formatter: function (param) {
 
                   return param.data.name;
 
                 },
 
                 textStyle: {
 
-                  color: "#7a8385",
 
+                  color: this.$store.state.themeName === "dark" ? "#7a8385" : "#000",
 
                   fontSize: 12,
 
                 },
 
               },
 
@@ -181,7 +186,7 @@ export default {
 
             itemStyle: {
 
               normal: {
 
                 borderWidth: 0,
 
-                color: function(params) {
 
+                color: function (params) {
 
                   return partten.getColor(currColor);
 
                 },
 
                 // shadowBlur: 2,
 
@@ -194,7 +199,7 @@ export default {
 
             type: "pictorialBar",
 
             itemStyle: {
 
               normal: {
 
-                color: "#20314f",
 
+                color: this.$store.state.themeName === "dark" ? "#20314f" : "#000",
 
               },
 
             },
 
             animation: this.firstAnimation,
 
@@ -229,7 +234,7 @@ export default {
 
                 },
 
                 rich: {
 
                   f: {
 
-                    color: "#ffffff",
 
+                    color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
 
                     fontSize: 14,
 
                     lineHeight: 20,
 
                     fontFamily: "Bicubik",
 
@@ -283,7 +288,7 @@ export default {
 
       chart.clear();
 
       chart.setOption(option);
 
 
-      this.resize = function() {
 
+      this.resize = function () {
 
         chart.resize();
 
       };
 
 
@@ -314,6 +319,14 @@ export default {
 
   unmounted() {
 
     window.removeEventListener("resize", this.resize);
 
   },
 
+
 
+  watch: {
 
+    "$store.state.themeName"() {
 
+      this.list.forEach((value, index) => {
 
+        this.initChart(value, index);
 
+      });
 
+    },
 
+  },
 
 };
 
 </script>

+ 44 - 7
src/components/chart/bar/multiple-bar-chart.vue
Voir le fichier 

@@ -147,7 +147,7 @@ export default {
 
       type: Boolean,
 
       default: true,
 
     },
 
-    // 颜色
 
+    // 颜色#
 
     color: {
 
       type: Array,
 
       default: () => [
 
@@ -208,11 +208,18 @@ export default {
 
             axisLabel: {
 
               formatter: "{value} ",
 
               fontSize: 12,
 
+              textStyle: {
 
+                color:
 
+                  this.$store.state.themeName === "dark"
 
+                    ? "rgb(116,124,128)"
 
+                    : "#000",
 
+              },
 
             },
 
             //分格线
 
             splitLine: {
 
               lineStyle: {
 
-                color: "#5a6162",
 
+                color:
 
+                  this.$store.state.themeName === "dark" ? "#5a6162" : "#000",
 
                 type: "dashed",
 
               },
 
             },
 
@@ -224,6 +231,12 @@ export default {
 
             axisLabel: {
 
               formatter: "{value}",
 
               fontSize: 12,
 
+              textStyle: {
 
+                color:
 
+                  this.$store.state.themeName === "dark"
 
+                    ? "rgb(116,124,128)"
 
+                    : "#000",
 
+              },
 
             },
 
             //分格线
 
             splitLine: {
 
@@ -275,10 +288,16 @@ export default {
 
         color: this.color,
 
         tooltip: {
 
           trigger: "axis",
 
-          backgroundColor: "rgba(0,0,0,0.4)",
 
-          borderColor: partten.getColor("gray"),
 
+          backgroundColor:
 
+            this.$store.state.themeName === "dark"
 
+              ? "rgba(0,0,0,0.4)"
 
+              : "rgba(255,255,255,0.5)",
 
+          borderColor:
 
+            this.$store.state.themeName === "dark"
 
+              ? partten.getColor("gray")
 
+              : "#000",
 
           textStyle: {
 
-            color: "#fff",
 
+            color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
 
             fontSize: 12,
 
           },
 
         },
 
@@ -289,10 +308,16 @@ export default {
 
           icon: "ract",
 
           itemWidth: 8,
 
           itemHeight: 8,
 
-          inactiveColor: partten.getColor("gray"),
 
+          inactiveColor:
 
+            this.$store.state.themeName === "dark"
 
+              ? partten.getColor("gray")
 
+              : "#000",
 
           textStyle: {
 
-            color: partten.getColor("grayl"),
 
             fontSize: 12,
 
+            color:
 
+              this.$store.state.themeName === "dark"
 
+                ? partten.getColor("grayl")
 
+                : "#000",
 
           },
 
         },
 
         grid: {
 
@@ -313,6 +338,12 @@ export default {
 
             axisLabel: {
 
               interval: 0,
 
               fontSize: 12,
 
+              textStyle: {
 
+                color:
 
+                  this.$store.state.themeName === "dark"
 
+                    ? "rgb(116,124,128)"
 
+                    : "#000",
 
+              },
 
             },
 
           },
 
         ],
 
@@ -351,6 +382,12 @@ export default {
 
   unmounted() {
 
     window.removeEventListener("resize", this.resize);
 
   },
 
+
 
+  watch: {
 
+    "$store.state.themeName"() {
 
+      this.initChart();
 
+    },
 
+  },
 
 };
 
 </script>

+ 21 - 4
src/components/chart/bar/percent-bar.vue
Voir le fichier 

@@ -62,7 +62,10 @@ export default {
 
               fontSize: 14,
 
               fontFamily: "Bicubik",
 
               fontWeight: "600",
 
-              color: partten.getColor(this.colors),
 
+              color:
 
+                this.$store.state.themeName === "dark"
 
+                  ? partten.getColor(this.colors)
 
+                  : "rgb(57, 54, 143)",
 
               textAlign: "center",
 
             },
 
           },
 
@@ -98,13 +101,19 @@ export default {
 
             barWidth: 60,
 
             showBackground: true,
 
             backgroundStyle: {
 
-              color: partten.getColor(this.colors) + "30",
 
+              color:
 
+                this.$store.state.themeName === "dark"
 
+                  ? partten.getColor(this.colors) + "30"
 
+                  : "#fff",
 
             },
 
             data: [this.value],
 
             coordinateSystem: "polar",
 
             itemStyle: {
 
               normal: {
 
-                color: partten.getColor(this.colors),
 
+                color:
 
+                  this.$store.state.themeName === "dark"
 
+                    ? partten.getColor(this.colors)
 
+                    : "rgb(57, 54, 143)",
 
                 //    new echarts.graphic.LinearGradient(1, 0, 0, 0, [
 
                 //     {
 
                 //       offset: 0,
 
@@ -129,7 +138,10 @@ export default {
 
                 value: 100,
 
                 name: "",
 
                 itemStyle: {
 
-                  color: partten.getColor(this.colors),
 
+                  color:
 
+                    this.$store.state.themeName === "dark"
 
+                      ? partten.getColor(this.colors)
 
+                      : "rgb(57, 54, 143)",
 
                 },
 
                 label: {
 
                   show: false,
 
@@ -182,6 +194,11 @@ export default {
 
       this.initChart();
 
     });
 
   },
 
+  watch: {
 
+    "$store.state.themeName"() {
 
+      this.initChart();
 
+    },
 
+  },
 
 };
 
 </script>

+ 25 - 7
src/components/chart/line/double-line-chart.vue
Voir le fichier 

@@ -138,6 +138,9 @@ export default {
 
       },
 
       deep: true,
 
     },
 
+    "$store.state.themeName"() {
 
+      this.initChart();
 
+    },
 
   },
 
   computed: {
 
     colorValue() {
 
@@ -211,10 +214,16 @@ export default {
 
         color: this.color,
 
         tooltip: {
 
           trigger: "axis",
 
-          backgroundColor: "rgba(0,0,0,0.4)",
 
-          borderColor: partten.getColor("gray"),
 
+          backgroundColor:
 
+            this.$store.state.themeName === "dark"
 
+              ? "rgba(0,0,0,0.4)"
 
+              : "rgba(255,255,255,0.4)",
 
+          borderColor:
 
+            this.$store.state.themeName === "dark"
 
+              ? partten.getColor("gray")
 
+              : "#000",
 
           textStyle: {
 
-            color: "#fff",
 
+            color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
 
             fontSize: util.vh(16),
 
           },
 
         },
 
@@ -224,9 +233,15 @@ export default {
 
           right: 56,
 
           icon: "circle",
 
           itemWidth: 6,
 
-          inactiveColor: partten.getColor("gray"),
 
+          inactiveColor:
 
+            this.$store.state.themeName === "dark"
 
+              ? partten.getColor("gray")
 
+              : "#000",
 
           textStyle: {
 
-            color: partten.getColor("grayl"),
 
+            color:
 
+              this.$store.state.themeName === "dark"
 
+                ? partten.getColor("grayl")
 
+                : "#000",
 
             fontSize: 12,
 
           },
 
         },
 
@@ -243,7 +258,10 @@ export default {
 
             axisLabel: {
 
               formatter: "{value}",
 
               textStyle: {
 
-                color: partten.getColor("gray"),
 
+                color:
 
+                  this.$store.state.themeName === "dark"
 
+                    ? partten.getColor("gray")
 
+                    : "#000",
 
                 fontSize: util.vh(10),
 
               },
 
             },
 
@@ -257,7 +275,7 @@ export default {
 
       chart.clear();
 
       chart.setOption(option);
 
 
-      this.resize = function() {
 
+      this.resize = function () {
 
         chart.resize();
 
       };

+ 448 - 431
src/components/chart/line/multiple-y-line-chart-normal.vue
Voir le fichier 

@@ -1,5 +1,5 @@
 
 <template>
 
-    <div class="chart" :id="id"></div>
 
+  <div class="chart" :id="id"></div>
 
 </template>
 
 
 <script>
 
@@ -8,460 +8,477 @@ import partten from "@/helper/partten.js";
 
 import * as echarts from "echarts";
 
 
 export default {
 
-    name: "multiple-y-line-chart-normal",
 
-    componentName: "multiple-y-line-chart-normal",
 
-    props: {
 
-        width: {
 
-            type: String,
 
-            default: "100%",
 
+  name: "multiple-y-line-chart-normal",
 
+  componentName: "multiple-y-line-chart-normal",
 
+  props: {
 
+    width: {
 
+      type: String,
 
+      default: "100%",
 
+    },
 
+    height: {
 
+      type: String,
 
+      default: "13.889vh",
 
+    },
 
+    // 数据
 
+    list: {
 
+      type: Array,
 
+      default: () => [
 
+        {
 
+          title: "机舱震动x方向",
 
+          yAxisIndex: 0,
 
+          value: [
 
+            {
 
+              text: "-0.003",
 
+              value: -0.003,
 
+            },
 
+            {
 
+              text: "-0.002",
 
+              value: -0.002,
 
+            },
 
+            {
 
+              text: "-0.003",
 
+              value: -0.006,
 
+            },
 
+            {
 
+              text: "-0.003",
 
+              value: -0.003,
 
+            },
 
+            {
 
+              text: "-0.002",
 
+              value: -0.002,
 
+            },
 
+            {
 
+              text: "-0.003",
 
+              value: -0.006,
 
+            },
 
+            {
 
+              text: "-0.003",
 
+              value: -0.003,
 
+            },
 
+            {
 
+              text: "-0.002",
 
+              value: -0.002,
 
+            },
 
+            {
 
+              text: "-0.003",
 
+              value: -0.006,
 
+            },
 
+          ],
 
         },
 
-        height: {
 
-            type: String,
 
-            default: "13.889vh",
 
+        {
 
+          title: "机舱震动y方向",
 
+          yAxisIndex: 1,
 
+          value: [
 
+            {
 
+              text: "-0.01",
 
+              value: -0.01,
 
+            },
 
+            {
 
+              text: "-0.005",
 
+              value: -0.005,
 
+            },
 
+            {
 
+              text: "-0.008",
 
+              value: -0.008,
 
+            },
 
+            {
 
+              text: "-0.01",
 
+              value: -0.01,
 
+            },
 
+            {
 
+              text: "-0.005",
 
+              value: -0.005,
 
+            },
 
+            {
 
+              text: "-0.008",
 
+              value: -0.008,
 
+            },
 
+            {
 
+              text: "-0.01",
 
+              value: -0.01,
 
+            },
 
+            {
 
+              text: "-0.005",
 
+              value: -0.005,
 
+            },
 
+            {
 
+              text: "-0.008",
 
+              value: -0.008,
 
+            },
 
+          ],
 
         },
 
-        // 数据
 
-        list: {
 
-            type: Array,
 
-            default: () => [
 
-                {
 
-                    title: "机舱震动x方向",
 
-                    yAxisIndex: 0,
 
-                    value: [
 
-                        {
 
-                            text: "-0.003",
 
-                            value: -0.003,
 
-                        },
 
-                        {
 
-                            text: "-0.002",
 
-                            value: -0.002,
 
-                        },
 
-                        {
 
-                            text: "-0.003",
 
-                            value: -0.006,
 
-                        },
 
-                        {
 
-                            text: "-0.003",
 
-                            value: -0.003,
 
-                        },
 
-                        {
 
-                            text: "-0.002",
 
-                            value: -0.002,
 
-                        },
 
-                        {
 
-                            text: "-0.003",
 
-                            value: -0.006,
 
-                        },
 
-                        {
 
-                            text: "-0.003",
 
-                            value: -0.003,
 
-                        },
 
-                        {
 
-                            text: "-0.002",
 
-                            value: -0.002,
 
-                        },
 
-                        {
 
-                            text: "-0.003",
 
-                            value: -0.006,
 
-                        },
 
-                    ],
 
-                },
 
-                {
 
-                    title: "机舱震动y方向",
 
-                    yAxisIndex: 1,
 
-                    value: [
 
-                        {
 
-                            text: "-0.01",
 
-                            value: -0.01,
 
-                        },
 
-                        {
 
-                            text: "-0.005",
 
-                            value: -0.005,
 
-                        },
 
-                        {
 
-                            text: "-0.008",
 
-                            value: -0.008,
 
-                        },
 
-                        {
 
-                            text: "-0.01",
 
-                            value: -0.01,
 
-                        },
 
-                        {
 
-                            text: "-0.005",
 
-                            value: -0.005,
 
-                        },
 
-                        {
 
-                            text: "-0.008",
 
-                            value: -0.008,
 
-                        },
 
-                        {
 
-                            text: "-0.01",
 
-                            value: -0.01,
 
-                        },
 
-                        {
 
-                            text: "-0.005",
 
-                            value: -0.005,
 
-                        },
 
-                        {
 
-                            text: "-0.008",
 
-                            value: -0.008,
 
-                        },
 
-                    ],
 
-                },
 
-                {
 
-                    title: "机舱震动最大偏移值",
 
-                    yAxisIndex: 2,
 
-                    value: [
 
-                        {
 
-                            text: "1",
 
-                            value: 1,
 
-                        },
 
-                        {
 
-                            text: "0.05",
 
-                            value: 0.05,
 
-                        },
 
-                        {
 
-                            text: "0.5",
 
-                            value: 0.5,
 
-                        },
 
-                        {
 
-                            text: "1",
 
-                            value: 1,
 
-                        },
 
-                        {
 
-                            text: "0.05",
 
-                            value: 0.05,
 
-                        },
 
-                        {
 
-                            text: "0.5",
 
-                            value: 0.5,
 
-                        },
 
-                        {
 
-                            text: "1",
 
-                            value: 1,
 
-                        },
 
-                        {
 
-                            text: "0.05",
 
-                            value: 0.05,
 
-                        },
 
-                        {
 
-                            text: "0.5",
 
-                            value: 0.5,
 
-                        },
 
-                    ],
 
-                },
 
-                {
 
-                    title: "风速1",
 
-                    yAxisIndex: 3,
 
-                    value: [
 
-                        {
 
-                            text: "1",
 
-                            value: 1,
 
-                        },
 
-                        {
 
-                            text: "5",
 
-                            value: 5,
 
-                        },
 
-                        {
 
-                            text: "3",
 
-                            value: 1,
 
-                        },
 
-                        {
 
-                            text: "1",
 
-                            value: 1,
 
-                        },
 
-                        {
 
-                            text: "5",
 
-                            value: 5,
 
-                        },
 
-                        {
 
-                            text: "3",
 
-                            value: 1,
 
-                        },
 
-                        {
 
-                            text: "1",
 
-                            value: 1,
 
-                        },
 
-                        {
 
-                            text: "5",
 
-                            value: 5,
 
-                        },
 
-                        {
 
-                            text: "3",
 
-                            value: 1,
 
-                        },
 
-                    ],
 
-                },
 
-                {
 
-                    title: "风速2",
 
-                    yAxisIndex: 4,
 
-                    value: [
 
-                        {
 
-                            text: "1",
 
-                            value: 1,
 
-                        },
 
-                        {
 
-                            text: "2",
 
-                            value: 2,
 
-                        },
 
-                        {
 
-                            text: "3",
 
-                            value: 1,
 
-                        },
 
-                        {
 
-                            text: "1",
 
-                            value: 1,
 
-                        },
 
-                        {
 
-                            text: "2",
 
-                            value: 2,
 
-                        },
 
-                        {
 
-                            text: "3",
 
-                            value: 1,
 
-                        },
 
-                        {
 
-                            text: "1",
 
-                            value: 1,
 
-                        },
 
-                        {
 
-                            text: "2",
 
-                            value: 2,
 
-                        },
 
-                        {
 
-                            text: "3",
 
-                            value: 1,
 
-                        },
 
-                    ],
 
-                },
 
-            ],
 
+        {
 
+          title: "机舱震动最大偏移值",
 
+          yAxisIndex: 2,
 
+          value: [
 
+            {
 
+              text: "1",
 
+              value: 1,
 
+            },
 
+            {
 
+              text: "0.05",
 
+              value: 0.05,
 
+            },
 
+            {
 
+              text: "0.5",
 
+              value: 0.5,
 
+            },
 
+            {
 
+              text: "1",
 
+              value: 1,
 
+            },
 
+            {
 
+              text: "0.05",
 
+              value: 0.05,
 
+            },
 
+            {
 
+              text: "0.5",
 
+              value: 0.5,
 
+            },
 
+            {
 
+              text: "1",
 
+              value: 1,
 
+            },
 
+            {
 
+              text: "0.05",
 
+              value: 0.05,
 
+            },
 
+            {
 
+              text: "0.5",
 
+              value: 0.5,
 
+            },
 
+          ],
 
         },
 
-        showLegend: {
 
-            type: Boolean,
 
-            default: false,
 
+        {
 
+          title: "风速1",
 
+          yAxisIndex: 3,
 
+          value: [
 
+            {
 
+              text: "1",
 
+              value: 1,
 
+            },
 
+            {
 
+              text: "5",
 
+              value: 5,
 
+            },
 
+            {
 
+              text: "3",
 
+              value: 1,
 
+            },
 
+            {
 
+              text: "1",
 
+              value: 1,
 
+            },
 
+            {
 
+              text: "5",
 
+              value: 5,
 
+            },
 
+            {
 
+              text: "3",
 
+              value: 1,
 
+            },
 
+            {
 
+              text: "1",
 
+              value: 1,
 
+            },
 
+            {
 
+              text: "5",
 
+              value: 5,
 
+            },
 
+            {
 
+              text: "3",
 
+              value: 1,
 
+            },
 
+          ],
 
         },
 
-        // 轴
 
-        yAxises: {
 
-            type: Array,
 
-            default: () => [
 
-                {
 
-                    name: '机舱震动x方向',
 
-                    min: -0.01,
 
-                    max: 0,
 
-                    unit: "",
 
-                    position: "left",
 
-                },
 
-                {
 
-                    name: '机舱震动y方向',
 
-                    min: -0.01,
 
-                    max: 0,
 
-                    unit: "",
 
-                    position: "right",
 
-                },
 
-                {
 
-                    name: '机舱震动最大偏移值',
 
-                    min: 0,
 
-                    max: 1,
 
-                    unit: "",
 
-                    position: "left",
 
-                },
 
-                {
 
-                    name: '风速1',
 
-                    min: 0,
 
-                    max: 10,
 
-                    unit: "",
 
-                    position: "right",
 
-                },
 
-                {
 
-                    name: '风速2',
 
-                    min: 0,
 
-                    max: 10,
 
-                    unit: "",
 
-                    position: "left",
 
-                },
 
-            ],
 
+        {
 
+          title: "风速2",
 
+          yAxisIndex: 4,
 
+          value: [
 
+            {
 
+              text: "1",
 
+              value: 1,
 
+            },
 
+            {
 
+              text: "2",
 
+              value: 2,
 
+            },
 
+            {
 
+              text: "3",
 
+              value: 1,
 
+            },
 
+            {
 
+              text: "1",
 
+              value: 1,
 
+            },
 
+            {
 
+              text: "2",
 
+              value: 2,
 
+            },
 
+            {
 
+              text: "3",
 
+              value: 1,
 
+            },
 
+            {
 
+              text: "1",
 
+              value: 1,
 
+            },
 
+            {
 
+              text: "2",
 
+              value: 2,
 
+            },
 
+            {
 
+              text: "3",
 
+              value: 1,
 
+            },
 
+          ],
 
         },
 
+      ],
 
     },
 
-    data() {
 
-        return {
 
-            id: "",
 
-            chart: null,
 
-            color: ["#323E6F", "#1DA0D7", "#05BB4C", "#EDB32F", "#DB5520"],
 
-        };
 
+    showLegend: {
 
+      type: Boolean,
 
+      default: false,
 
     },
 
-    computed: {
 
-        legend() {
 
-            return this.list.map((t) => {
 
-                return t.title;
 
-            });
 
+    // 轴
 
+    yAxises: {
 
+      type: Array,
 
+      default: () => [
 
+        {
 
+          name: "机舱震动x方向",
 
+          min: -0.01,
 
+          max: 0,
 
+          unit: "",
 
+          position: "left",
 
         },
 
-        xdata() {
 
-            console.log('this.list[0].value:',this.list)
 
-            return this.list[0]?.value.map((t) => {
 
-                return t.text;
 
-            });
 
+        {
 
+          name: "机舱震动y方向",
 
+          min: -0.01,
 
+          max: 0,
 
+          unit: "",
 
+          position: "right",
 
         },
 
-        yAxis() {
 
-            let result = [];
 
-            let p = {left: 0, right: 0};
 
-            this.yAxises.forEach((item, index) => {
 
-                console.log('yitem:',item)
 
-                result.push({
 
-                    type: "value",
 
-                    name: `${item.name}${item.unit}`,
 
-                    nameLocation: p[item.position] % 2 == 0 ? "end" : "start",
 
-                    nameGap: 10,
 
-                    min: item.min,
 
-                    max: item.max,
 
-                    position: item.position,
 
-                    offset: p[item.position] * 50,
 
-                    axisLabel: {
 
-                        formatter: "{value}",
 
-                        fontSize: 12,
 
-                    },
 
-                    //分格线
 
-                    splitLine: {
 
-                        lineStyle: {
 
-                            color: partten.getColor("gray"),
 
-                            type: "dashed",
 
-                        },
 
-                    },
 
-                    axisLine: {
 
-                      show: true,
 
-                    },
 
-                    axisTick: {
 
-                      show: true
 
-                    }
 
-                });
 
-                p[item.position]++;
 
-            });
 
-console.log('yResult:',result)
 
-            return result;
 
-            
+        {
 
+          name: "机舱震动最大偏移值",
 
+          min: 0,
 
+          max: 1,
 
+          unit: "",
 
+          position: "left",
 
         },
 
-        series() {
 
-            let result = [];
 
-           console.log('list:',this.list)
 
-            this.list.forEach((value, index) => {
 
-                console.log('seriesValue:',value)
 
-                console.log('seriesIndex:',index)
 
-                result.push({
 
-                    name: value.title,
 
-                    type: "line",
 
-                    smooth: true,
 
-                    zlevel: index,
 
-                    lineStyle: {
 
-                        normal: {
 
-                            color: this.color[index],
 
-                            width: 1,
 
-                        },
 
-                    },
 
-                    showSymbol: false,
 
-                    yAxisIndex: value.yAxisIndex,
 
-                    data: value.value.map((t) => {
 
-                        return t.value;
 
-                    }),
 
-                });
 
-            });
 
-
 
-            return result;
 
+        {
 
+          name: "风速1",
 
+          min: 0,
 
+          max: 10,
 
+          unit: "",
 
+          position: "right",
 
         },
 
+        {
 
+          name: "风速2",
 
+          min: 0,
 
+          max: 10,
 
+          unit: "",
 
+          position: "left",
 
+        },
 
+      ],
 
+    },
 
+  },
 
+  data() {
 
+    return {
 
+      id: "",
 
+      chart: null,
 
+      color: ["#323E6F", "#1DA0D7", "#05BB4C", "#EDB32F", "#DB5520"],
 
+    };
 
+  },
 
+  computed: {
 
+    legend() {
 
+      return this.list.map((t) => {
 
+        return t.title;
 
+      });
 
+    },
 
+    xdata() {
 
+      return this.list[0]?.value.map((t) => {
 
+        return t.text;
 
+      });
 
+    },
 
+    yAxis() {
 
+      let result = [];
 
+      let p = { left: 0, right: 0 };
 
+      this.yAxises.forEach((item, index) => {
 
+        result.push({
 
+          type: "value",
 
+          name: `${item.name}${item.unit}`,
 
+          nameLocation: p[item.position] % 2 == 0 ? "end" : "start",
 
+          nameGap: 10,
 
+          min: item.min,
 
+          max: item.max,
 
+          position: item.position,
 
+          offset: p[item.position] * 50,
 
+          axisLabel: {
 
+            formatter: "{value}",
 
+            fontSize: 12,
 
+            textStyle: {
 
+              color:
 
+                this.$store.state.themeName === "dark"
 
+                  ? "rgb(116,124,128)"
 
+                  : "#000",
 
+            },
 
+          },
 
+          //分格线
 
+          splitLine: {
 
+            lineStyle: {
 
+              color: partten.getColor("gray"),
 
+              type: "dashed",
 
+            },
 
+          },
 
+          axisLine: {
 
+            show: true,
 
+          },
 
+          axisTick: {
 
+            show: true,
 
+          },
 
+        });
 
+        p[item.position]++;
 
+      });
 
+      return result;
 
+    },
 
+    series() {
 
+      let result = [];
 
+      this.list.forEach((value, index) => {
 
+        result.push({
 
+          name: value.title,
 
+          type: "line",
 
+          smooth: true,
 
+          zlevel: index,
 
+          lineStyle: {
 
+            normal: {
 
+              color: this.color[index],
 
+              width: 1,
 
+            },
 
+          },
 
+          showSymbol: false,
 
+          yAxisIndex: value.yAxisIndex,
 
+          data: value.value.map((t) => {
 
+            return t.value;
 
+          }),
 
+        });
 
+      });
 
+
 
+      return result;
 
     },
 
-    methods: {
 
-        resize() {},
 
-        initChart() {
 
-            const chart = echarts.init(this.$el);
 
+  },
 
+  methods: {
 
+    resize() {},
 
+    initChart() {
 
+      const chart = echarts.init(this.$el);
 
+
 
+      let option = this.option();
 
+      chart.clear();
 
 
-            let option = this.option();
 
-            chart.clear();
 
-          
-            chart.setOption(option);
 
-            this.resize = function() {
 
-                chart.resize();
 
-            };
 
+      chart.setOption(option);
 
+      this.resize = function () {
 
+        chart.resize();
 
+      };
 
 
-            window.addEventListener("resize", this.resize);
 
+      window.addEventListener("resize", this.resize);
 
+    },
 
+    option: function () {
 
+      return {
 
+        color: this.color,
 
+        tooltip: {
 
+          trigger: "axis",
 
+          backgroundColor:
 
+            this.$store.state.themeName === "dark"
 
+              ? "rgba(0,0,0,0.4)"
 
+              : "rgba(255,255,255,0.5)",
 
+          borderColor:
 
+            this.$store.state.themeName === "dark"
 
+              ? partten.getColor("gray")
 
+              : "#000",
 
+          textStyle: {
 
+            color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
 
+            fontSize: 12,
 
+          },
 
         },
 
-        option: function () {
 
-            return {
 
-                color: this.color,
 
-                tooltip: {
 
-                    trigger: "axis",
 
-                    backgroundColor: "rgba(0,0,0,0.4)",
 
-                    borderColor: partten.getColor("gray"),
 
-                    textStyle: {
 
-                        color: "#fff",
 
-                        fontSize: 12,
 
-                    },
 
-                },
 
-                legend: {
 
-                    show: this.showLegend,
 
-                    data: this.legend,
 
-                    top: 'top',
 
-                    icon: "circle",
 
-                    itemWidth: 6,
 
-                    inactiveColor: partten.getColor("gray"),
 
-                    textStyle: {
 
-                        color: partten.getColor("grayl"),
 
-                        fontSize: 12,
 
-                    },
 
-                },
 
-                grid: {
 
-                    top: 27,
 
-                    left: 16,
 
-                    right: 16,
 
-                    bottom: 0,
 
-                    containLabel: true,
 
-                },
 
-                xAxis: [
 
-                    {
 
-                        type: "category",
 
-                        boundaryGap: false,
 
-                        axisLabel: {
 
-                            formatter: "{value}",
 
-                            fontSize: 12,
 
-                            textStyle: {
 
-                                color: partten.getColor("gray"),
 
-                            },
 
-                        },
 
-                        data: this.xdata,
 
-                    },
 
-                ],
 
-                yAxis: this.yAxis,
 
-                series: this.series,
 
-            };
 
+        legend: {
 
+          show: this.showLegend,
 
+          data: this.legend,
 
+          top: "top",
 
+          icon: "circle",
 
+          itemWidth: 6,
 
+          inactiveColor: partten.getColor("gray"),
 
+          textStyle: {
 
+            color:
 
+              this.$store.state.themeName === "dark"
 
+                ? partten.getColor("grayl")
 
+                : "#000",
 
+            fontSize: 12,
 
+          },
 
         },
 
-        reload: function () {
 
-            const chart = echarts.getInstanceByDom(this.$el);
 
-            chart.clear();
 
-            let option = this.option();
 
-            chart.setOption(option);
 
+        grid: {
 
+          top: 27,
 
+          left: 16,
 
+          right: 16,
 
+          bottom: 0,
 
+          containLabel: true,
 
         },
 
+        xAxis: [
 
+          {
 
+            type: "category",
 
+            boundaryGap: false,
 
+            axisLabel: {
 
+              formatter: "{value}",
 
+              fontSize: 12,
 
+              textStyle: {
 
+                color:
 
+                  this.$store.state.themeName === "dark"
 
+                    ? partten.getColor("gray")
 
+                    : "#000",
 
+              },
 
+            },
 
+            data: this.xdata,
 
+          },
 
+        ],
 
+        yAxis: this.yAxis,
 
+        series: this.series,
 
+      };
 
     },
 
-    created() {
 
-        this.id = "pie-chart-" + util.newGUID();
 
+    reload: function () {
 
+      const chart = echarts.getInstanceByDom(this.$el);
 
+      chart.clear();
 
+      let option = this.option();
 
+      chart.setOption(option);
 
     },
 
-    mounted() {
 
-        this.$nextTick(() => {
 
-            this.$el.style.width = this.width;
 
-            this.$el.style.height = this.height;
 
-            this.initChart();
 
-        });
 
-    },
 
-    updated() {
 
-        this.$nextTick(() => {
 
-            this.initChart();
 
-        });
 
-    },
 
-    unmounted() {
 
-        window.removeEventListener("resize", this.resize);
 
+  },
 
+  created() {
 
+    this.id = "pie-chart-" + util.newGUID();
 
+  },
 
+  mounted() {
 
+    this.$nextTick(() => {
 
+      this.$el.style.width = this.width;
 
+      this.$el.style.height = this.height;
 
+      this.initChart();
 
+    });
 
+  },
 
+  updated() {
 
+    this.$nextTick(() => {
 
+      this.initChart();
 
+    });
 
+  },
 
+  unmounted() {
 
+    window.removeEventListener("resize", this.resize);
 
+  },
 
+
 
+  watch: {
 
+    "$store.state.themeName"() {
 
+      this.initChart();
 
     },
 
+  },
 
 };
 
 </script>
 
 
 <style lang="less">
 
 .chart {
 
-    width: 100%;
 
-    height: 100%;
 
-    display: inline-block;
 
+  width: 100%;
 
+  height: 100%;
 
+  display: inline-block;
 
 }
 
 </style>

+ 45 - 12
src/components/chart/pie/dash-pie-chart.vue
Voir le fichier 

@@ -6,6 +6,7 @@
 
 import util from "@/helper/util.js";
 
 import partten from "@/helper/partten.js";
 
 import * as echarts from "echarts";
 
+import $ from "jquery";
 
 
 export default {
 
   name: "dsah-pie",
 
@@ -71,7 +72,9 @@ export default {
 
           z: 8,
 
           textAlign: "center",
 
           textStyle: {
 
-            color: partten.getColor("gray"),
 
+            color: $("#appBody").is(".dark")
 
+              ? partten.getColor("gray")
 
+              : "#000",
 
             fontSize: util.vh(12),
 
             fontWeight: "normal",
 
           },
 
@@ -92,11 +95,15 @@ export default {
 
                     new echarts.graphic.LinearGradient(0, 0, 1, 0, [
 
                       {
 
                         offset: 0,
 
-                        color: partten.getColor(this.color) + "01",
 
+                        color: $("#appBody").is(".dark")
 
+                          ? partten.getColor(this.color) + "01"
 
+                          : "rgb(57, 54, 143)",
 
                       },
 
                       {
 
                         offset: 1,
 
-                        color: partten.getColor(this.color) + "ff",
 
+                        color: $("#appBody").is(".dark")
 
+                          ? partten.getColor(this.color) + "ff"
 
+                          : "rgb(57, 54, 143)",
 
                       },
 
                     ]),
 
                   ],
 
@@ -155,7 +162,7 @@ export default {
 
             ],
 
             itemStyle: {
 
               normal: {
 
-                color: "#fff",
 
+                color: $("#appBody").is(".dark") ? "#fff" : "#000",
 
               },
 
             },
 
             pointer: {
 
@@ -183,7 +190,14 @@ export default {
 
               // 仪表盘刻度线
 
               lineStyle: {
 
                 width: util.vh(1),
 
-                color: [[1, partten.getColor(this.color)]],
 
+                color: [
 
+                  [
 
+                    1,
 
+                    $("#appBody").is(".dark")
 
+                      ? partten.getColor(this.color)
 
+                      : "rgb(57, 54, 143)",
 
+                  ],
 
+                ],
 
               },
 
             },
 
             //仪表盘文字
 
@@ -196,7 +210,9 @@ export default {
 
               distance: 6,
 
               splitNumber: 2,
 
               lineStyle: {
 
-                color: partten.getColor("green"), //用颜色渐变函数不起作用
 
+                color: $("#appBody").is(".dark")
 
+                  ? partten.getColor("green")
 
+                  : "rgb(57, 54, 143)", //用颜色渐变函数不起作用
 
                 width: util.vh(1),
 
               },
 
               length: util.vh(4),
 
@@ -229,10 +245,12 @@ export default {
 
                 },
 
                 label: {
 
                   normal: {
 
-                    formatter: function(params) {
 
+                    formatter: function (params) {
 
                       return params.value;
 
                     },
 
-                    color: partten.getColor(this.color),
 
+                    color: $("#appBody").is(".dark")
 
+                  ? partten.getColor(this.color)
 
+                  : "rgb(57, 54, 143)",
 
                     fontSize: util.vh(12),
 
                     fontWeight: "bold",
 
                     position: "center",
 
@@ -270,7 +288,12 @@ export default {
 
                   //     },
 
                   //   ]),
 
                   // ],
 
-                  [1, "rgba(45,230,150,0.1)"],
 
+                  [
 
+                    1,
 
+                    $("#appBody").is(".dark")
 
+                      ? "rgba(45,230,150,0.1)"
 
+                      : "rgba(57, 54, 143, 0.1)",
 
+                  ],
 
                   // [1, "rgba(45,230,150,0)"],
 
                 ],
 
                 width: 3,
 
@@ -310,9 +333,13 @@ export default {
 
                 value: 1,
 
                 itemStyle: {
 
                   color: "transparent",
 
-                  borderColor: partten.getColor(this.color),
 
+                  borderColor: $("#appBody").is(".dark")
 
+                    ? partten.getColor(this.color)
 
+                    : "rgb(57, 54, 143)",
 
                   opacity: 0.3,
 
-                  shadowColor: partten.getColor(this.color),
 
+                  shadowColor: $("#appBody").is(".dark")
 
+                    ? partten.getColor(this.color)
 
+                    : "rgb(57, 54, 143)",
 
                   shadowBlur: util.vh(20),
 
                 },
 
               },
 
@@ -324,7 +351,7 @@ export default {
 
       chart.clear();
 
       chart.setOption(option);
 
 
-      this.resize = function() {
 
+      this.resize = function () {
 
         chart.resize();
 
       };
 
 
@@ -346,6 +373,12 @@ export default {
 
   unmounted() {
 
     window.removeEventListener("resize", this.resize);
 
   },
 
+
 
+  watch: {
 
+    "$store.state.themeName"() {
 
+      this.initChart();
 
+    },
 
+  },
 
 };
 
 </script>

+ 16 - 5
src/components/chart/pie/radar-pie-chart.vue
Voir le fichier 

@@ -72,10 +72,16 @@ export default {
 
         ],
 
         tooltip: {
 
           trigger: "item",
 
-          backgroundColor: "rgba(0,0,0,0.4)",
 
-          borderColor: partten.getColor("gray"),
 
+          backgroundColor:
 
+            this.$store.state.themeName === "dark"
 
+              ? "rgba(0,0,0,0.4)"
 
+              : "rgba(255,255,255,0.4)",
 
+          borderColor:
 
+            this.$store.state.themeName === "dark"
 
+              ? partten.getColor("gray")
 
+              : "#000",
 
           textStyle: {
 
-            color: "#fff",
 
+            color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
 
             fontSize: util.vh(16),
 
           },
 
         },
 
@@ -93,7 +99,7 @@ export default {
 
           right: "0",
 
           align: "left",
 
           textStyle: {
 
-            color: "#fff",
 
+            color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
 
           },
 
           itemGap: 8,
 
         },
 
@@ -111,7 +117,7 @@ export default {
 
           axisLabel: {
 
             show: false,
 
             fontSize: 18,
 
-            color: "#fff",
 
+            color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
 
             fontStyle: "normal",
 
             fontWeight: "normal",
 
           },
 
@@ -268,6 +274,11 @@ export default {
 
   updated() {
 
     this.initChart();
 
   },
 
+  watch: {
 
+    "$store.state.themeName"() {
 
+      this.initChart();
 
+    },
 
+  },
 
 };
 
 </script>

+ 1 - 1
src/components/coms/table/group-table.vue
Voir le fichier 

@@ -1,5 +1,5 @@
 
 <template>
 
-  <el-table class="custom-table" :show-summary="summary" :class="customClass" stripe :data="data.data" :height="height" style="width: 100%" @cell-click="onClick" @header-click="onHeaderClick">
 
+  <el-table class="custom-table" :show-summary="summary" :class="customClass" stripe :data="data.data" :height="height" style="width: 100%" @cell-click="onClick" @header-click="onHeaderClick" ref="groupTable">
 
     <template v-for="(col, cIndex) in data.column" :key="col">
 
       <el-table-column v-if="col.child && col.child.length > 0" :label="col.name" :key="col">
 
         <el-table-column

+ 234 - 198
src/components/other/healthReport/index.vue
Voir le fichier 

@@ -98,7 +98,7 @@
 
               </p>
 
               <p>
 
                 统计期内故障发生{{
 
-                  Number(faultclass[0] ? faultclass[0].monthwarningnum : 0) + 
+                  Number(faultclass[0] ? faultclass[0].monthwarningnum : 0) +
 
                   Number(faultclass[1] ? faultclass[1].monthwarningnum : 0) +
 
                   Number(faultclass[2] ? faultclass[2].monthwarningnum : 0)
 
                 }}次
 
@@ -121,7 +121,9 @@
 
               <p class="info">功率对部件温度影响较高是齿轮箱、主轴</p>
 
               <p class="info">部件劣化较高是发电机、主轴</p>
 
               <p>定捡已超过三个月，近三个月无维修记录</p>
 
-              <p v-if="Number(datas.isrecommend) == 1">该机组总体运行状态不佳，可安排检修人员排查。</p>
 
+              <p v-if="Number(datas.isrecommend) == 1">
 
+                该机组总体运行状态不佳，可安排检修人员排查。
 
+              </p>
 
               <p v-else>该机组总体运行状态良好，不需要作为重点关注。</p>
 
             </div>
 
           </el-form>
 
@@ -142,7 +144,7 @@
 
           <normal-line-chart :list="qxpcls" />
 
         </el-form>
 
       </div>
 
- 
+
 
       <div class="textBox">
 
         <el-form>
 
           <el-form-item class="imp fw text-indent-2">对风偏差：</el-form-item>
 
@@ -194,7 +196,7 @@
 
           />
 
         </el-form>
 
       </div>
 
- 
+
 
       <div class="textBox">
 
         <el-form>
 
           <el-form-item class="imp fw text-indent-2">切入切出：</el-form-item>
 
@@ -227,7 +229,7 @@
 
           </el-table>
 
         </el-form>
 
       </div>
 
- 
+
 
       <div class="textBox">
 
         <el-form>
 
           <el-form-item class="imp fw text-indent-2"
 
@@ -254,14 +256,34 @@
 
             }}分钟。
 
           </el-form-item>
 
           <el-form-item class="text-indent-2" v-if="bjyhcount.length > 0">
 
-			<font v-if="bjyhcount[0].yhmx">其中以{{ bjyhcount[0].yhmx }}发生频次最高，为{{ bjyhcount[0].count }}次；</font>
 
-			<font v-if="bjyhcount[1].yhmx">{{ bjyhcount[1].yhmx }}次之，为{{ bjyhcount[1].count }}次；</font>
 
-			<font v-if="bjyhcount[2].yhmx">{{ bjyhcount[2].yhmx }}第三，为{{ bjyhcount[0].count }}次。</font>
 
+            <font v-if="bjyhcount[0].yhmx"
 
+              >其中以{{ bjyhcount[0].yhmx }}发生频次最高，为{{
 
+                bjyhcount[0].count
 
+              }}次；</font
 
+            >
 
+            <font v-if="bjyhcount[1].yhmx"
 
+              >{{ bjyhcount[1].yhmx }}次之，为{{ bjyhcount[1].count }}次；</font
 
+            >
 
+            <font v-if="bjyhcount[2].yhmx"
 
+              >{{ bjyhcount[2].yhmx }}第三，为{{ bjyhcount[0].count }}次。</font
 
+            >
 
           </el-form-item>
 
-          <el-form-item class="text-indent-2" >
 
-			<font v-if="bjyhcount[3].yhmx">其中以{{ bjyhcount[3].yhmx }}发生时长最长，为{{ bjyhcount[3].times }}分钟；</font>
 
-			<font v-if="bjyhcount[4].yhmx">{{ bjyhcount[4].yhmx }}次之，为{{ bjyhcount[4].yhmx }}分钟；</font>
 
-			<font v-if="bjyhcount[5].yhmx">{{ bjyhcount[5].yhmx }}第三，为{{ bjyhcount[5].yhmx }}分钟。</font>
 
+          <el-form-item class="text-indent-2">
 
+            <font v-if="bjyhcount[3].yhmx"
 
+              >其中以{{ bjyhcount[3].yhmx }}发生时长最长，为{{
 
+                bjyhcount[3].times
 
+              }}分钟；</font
 
+            >
 
+            <font v-if="bjyhcount[4].yhmx"
 
+              >{{ bjyhcount[4].yhmx }}次之，为{{
 
+                bjyhcount[4].yhmx
 
+              }}分钟；</font
 
+            >
 
+            <font v-if="bjyhcount[5].yhmx"
 
+              >{{ bjyhcount[5].yhmx }}第三，为{{
 
+                bjyhcount[5].yhmx
 
+              }}分钟。</font
 
+            >
 
           </el-form-item>
 
           <div class="logHead">部件隐患对比（次|分钟）</div>
 
           <el-table
 
@@ -334,7 +356,7 @@
 
           </el-table>
 
         </el-form>
 
       </div>
 
- 
+
 
       <div class="textBox">
 
         <el-form>
 
           <el-form-item class="imp fw text-indent-2">故障分类：</el-form-item>
 
@@ -388,7 +410,7 @@
 
           </el-table>
 
         </el-form>
 
       </div>
 
- 
+
 
       <div class="textBox">
 
         <el-form>
 
           <el-form-item class="imp fw text-indent-2"
 
@@ -428,7 +450,7 @@
 
           </el-table>
 
         </el-form>
 
       </div>
 
- 
+
 
       <div class="textBox">
 
         <el-form>
 
           <el-form-item class="imp fw text-indent-2"
 
@@ -459,7 +481,7 @@
 
           </el-table>
 
         </el-form>
 
       </div>
 
- 
+
 
       <div class="textBox">
 
         <el-form>
 
           <el-form-item class="imp fw text-indent-2">发电机：</el-form-item>
 
@@ -488,7 +510,7 @@
 
           </el-table>
 
         </el-form>
 
       </div>
 
- 
+
 
       <div class="textBox">
 
         <el-form>
 
           <el-form-item class="imp fw text-indent-2"
 
@@ -517,7 +539,7 @@
 
           >
 
         </el-form>
 
       </div>
 
- 
+
 
       <div class="textBox">
 
         <el-form>
 
           <el-form-item class="imp fw text-indent-2">齿轮箱：</el-form-item>
 
@@ -612,7 +634,7 @@
 
             <el-table-column prop="scz" label="实测值"></el-table-column>
 
             <el-table-column prop="df" label="得分"></el-table-column>
 
           </el-table>
 
- 
+
 
           <el-form-item class="imp fw text-indent-2">震动监测：</el-form-item>
 
           <el-form-item class="text-indent-2">时域分析分析法</el-form-item>
 
           <el-form-item class="text-indent-2"
 
@@ -638,7 +660,7 @@
 
           >
 
         </el-form>
 
       </div>
 
- 
+
 
       <div class="textBox">
 
         <el-form>
 
           <el-form-item class="imp fw text-indent-2"
 
@@ -692,7 +714,7 @@
 
           </el-table>
 
         </el-form>
 
       </div>
 
- 
+
 
       <div class="textBox">
 
         <el-form>
 
           <el-form-item class="imp fw text-indent-2"
 
@@ -739,7 +761,7 @@
 
               :label="sbklyls[0].date"
 
             ></el-table-column>
 
           </el-table>
 
- 
+
 
           <el-form-item class="imp fw text-indent-2"
 
             >2、设备可利用率</el-form-item
 
           >
 
@@ -823,7 +845,7 @@
 
           <div class="logHead">
 
             {{ datas.year }}年{{ datas.month }}月性能评价明细
 
           </div>
 
- 
+
 
           <table
 
             border="1"
 
             class="xnpjfx"
 
@@ -863,7 +885,7 @@
 
           </table>
 
         </el-form>
 
       </div>
 
- 
+
 
       <div class="textBox" v-if="Number(datas.isrecommend) == 1">
 
         <el-form>
 
           <el-form-item class="imp fw"><b>推荐检修方案</b></el-form-item>
 
@@ -875,7 +897,9 @@
 
             >中频：{{ datas.mediatefrequency }}</el-form-item
 
           >
 
           <el-form-item class="m-b-10 text-indent-4"
 
-            >低频：{{ datas.fowfrequency == 'null'?'暂无数据':datas.fowfrequency }}</el-form-item
 
+            >低频：{{
 
+              datas.fowfrequency == "null" ? "暂无数据" : datas.fowfrequency
 
+            }}</el-form-item
 
           >
 
           <el-form-item class="text-indent-2"
 
             >推荐检修理由：{{ datas.reason }}</el-form-item
 
@@ -914,7 +938,7 @@
 
           >
 
         </el-form>
 
       </div>
 
- 
+
 
       <div class="textBox">
 
         <el-form>
 
           <el-form-item class="fw" style="margin: 10px 0; text-align: center"
 
@@ -997,18 +1021,22 @@ export default {
 
         {
 
           title: "曲线偏差率",
 
           yAxisIndex: 0,
 
-          value: [{
 
+          value: [
 
+            {
 
               text: "1",
 
               value: 0,
 
-            }],
 
+            },
 
+          ],
 
         },
 
         {
 
           title: "基准值",
 
           yAxisIndex: 0,
 
-          value: [{
 
+          value: [
 
+            {
 
               text: "1",
 
               value: 0,
 
-            },],
 
+            },
 
+          ],
 
         },
 
       ],
 
       // 隐患部件频次统计
 
@@ -1108,7 +1136,7 @@ export default {
 
       xnpjmx: [],
 
       pjmxs: [],
 
       wttragetreportcharts: [],
 
- 
+
 
       zhrank: 2,
 
       // 维修换件频次
 
       wxhjpc: [
 
@@ -1607,7 +1635,7 @@ export default {
 
       reqData: {},
 
     };
 
   },
 
- 
+
 
   props: {
 
     show: {
 
       type: Boolean,
 
@@ -1619,14 +1647,13 @@ export default {
 
     },
 
   },
 
   created() {
 
-	  this.getReport();
 
+    this.getReport();
 
   },
 
   beforeUpdate() {
 
     var that = this;
 
     that.$nextTick(() => {
 
       that.others();
 
     });
 
-	
   },
 
   mounted() {
 
     this.dialogVisible = this.show;
 
@@ -1691,22 +1718,22 @@ export default {
 
         "健康评价报告概述"
 
       );
 
     },
 
- 
+
 
     // 关闭弹窗
 
     dialogClosed() {
 
       this.dialogVisible = false;
 
       this.$emit("closed", false);
 
     },
 
- 
+
 
     // 改变列颜色
 
     columnStyle({ row, column, rowIndex, columnIndex }) {
 
       if (columnIndex === 0) {
 
         return "background:rgb(204,255,255);";
 
       }
 
     },
 
- 
+
 
     // 获取报告详情
 
-    getReport(wtid,recorddate) {
 
+    getReport(wtid, recorddate) {
 
       let that = this;
 
       let reqData = this.params;
 
       that.API.requestData({
 
@@ -1715,8 +1742,8 @@ export default {
 
         baseURL: "http://10.155.32.4:8034/",
 
         subUrl: "/healthreport/healthReport",
 
         data: {
 
-    //       wtid: reqData.wtId,
 
-		  // date: reqData.recorddate,
 
+          //       wtid: reqData.wtId,
 
+          // date: reqData.recorddate,
 
           wtid: wtid,
 
           date: recorddate,
 
         }, // 请求所携带参数，默认为空，可缺省
 
@@ -1725,7 +1752,7 @@ export default {
 
             that.datas = res.data;
 
             that.healthreport = res.data.healthreport;
 
             that.randomInitDate();
 
- 
+
 
             that.qxpcls = [];
 
             // 功率曲线拟合
 
             let glqxnh = [
 
@@ -1740,22 +1767,23 @@ export default {
 
                 value: [],
 
               },
 
             ];
 
-            res.data.healthreport.nhglqxs && res.data.healthreport.nhglqxs.forEach((item) => {
 
-              if (Number(item.speed) % 1 == 0) {
 
-                glqxnh[0].value.push({
 
-                  text: item.speed,
 
-                  value: item.bzgl,
 
-                });
 
-                glqxnh[1].value.push({
 
-                  text: item.speed,
 
-                  value: item.nhgl,
 
-                });
 
-              }
 
-            });
 
+            res.data.healthreport.nhglqxs &&
 
+              res.data.healthreport.nhglqxs.forEach((item) => {
 
+                if (Number(item.speed) % 1 == 0) {
 
+                  glqxnh[0].value.push({
 
+                    text: item.speed,
 
+                    value: item.bzgl,
 
+                  });
 
+                  glqxnh[1].value.push({
 
+                    text: item.speed,
 
+                    value: item.nhgl,
 
+                  });
 
+                }
 
+              });
 
             that.glqxnh = glqxnh;
 
- 
+
 
             //曲线偏差率
 
-	        that.qxpcls = [];
 
+            that.qxpcls = [];
 
             let qxpcls = [
 
               {
 
                 title: "曲线偏差率",
 
@@ -1768,25 +1796,27 @@ export default {
 
                 value: [],
 
               },
 
             ];
 
-			console.log(11111,res.data.healthreport.qxpcls)
 
-			if(res.data.healthreport.qxpcls){
 
-				let qxpcl = res.data.healthreport.qxpcls.sort(that.compare("date"));
 
-				if (qxpcl != null && qxpcl != undefined) {
 
-				  for (var i = qxpcl.length - 1; i >= 0; i--) {
 
-				    qxpcls[0].value.push({
 
-				      text: new Date(qxpcl[i].date).formatDate("yyyy-MM-dd"),
 
-				      value: Number(qxpcl[i].qxpcl).toFixed(2),
 
-				    });
 
-				    qxpcls[1].value.push({
 
-				      text: new Date(qxpcl[i].date).formatDate("yyyy-MM-dd"),
 
-				      value: Number(qxpcl[i].jzz).toFixed(2),
 
-				    });
 
-				  }
 
-				  that.qxpcls = qxpcls;
 
-				  console.log(11111,that.qxpcls)
 
-				}
 
-			}
 
- 
+            console.log(11111, res.data.healthreport.qxpcls);
 
+            if (res.data.healthreport.qxpcls) {
 
+              let qxpcl = res.data.healthreport.qxpcls.sort(
 
+                that.compare("date")
 
+              );
 
+              if (qxpcl != null && qxpcl != undefined) {
 
+                for (var i = qxpcl.length - 1; i >= 0; i--) {
 
+                  qxpcls[0].value.push({
 
+                    text: new Date(qxpcl[i].date).formatDate("yyyy-MM-dd"),
 
+                    value: Number(qxpcl[i].qxpcl).toFixed(2),
 
+                  });
 
+                  qxpcls[1].value.push({
 
+                    text: new Date(qxpcl[i].date).formatDate("yyyy-MM-dd"),
 
+                    value: Number(qxpcl[i].jzz).toFixed(2),
 
+                  });
 
+                }
 
+                that.qxpcls = qxpcls;
 
+                console.log(11111, that.qxpcls);
 
+              }
 
+            }
 
+
 
             // 对风偏差
 
             that.dfpc = [];
 
             let dfpc = {
 
@@ -1812,29 +1842,32 @@ export default {
 
                 },
 
               ],
 
             };
 
-            res.data.healthreport.nipples && res.data.healthreport.nipples.forEach((item) => {
 
-              let obj = {
 
-                text: item.pcl,
 
-                value: item.count,
 
-              };
 
-              dfpc.nipples[0].value.push(obj);
 
-            });
 
-            res.data.healthreport.dfpclpowers && res.data.healthreport.dfpclpowers.forEach((item) => {
 
-              let obj = {
 
-                text: item.power,
 
-                value: item.dfpcl,
 
-              };
 
-              dfpc.dfpclpowers[0].value.push(obj);
 
-            });
 
-            res.data.healthreport.dfpclSpeeds && res.data.healthreport.dfpclSpeeds.forEach((item) => {
 
-              let obj = {
 
-                text: item.speed,
 
-                value: item.dfpcl,
 
-              };
 
-              dfpc.dfpclSpeeds[0].value.push(obj);
 
-            });
 
+            res.data.healthreport.nipples &&
 
+              res.data.healthreport.nipples.forEach((item) => {
 
+                let obj = {
 
+                  text: item.pcl,
 
+                  value: item.count,
 
+                };
 
+                dfpc.nipples[0].value.push(obj);
 
+              });
 
+            res.data.healthreport.dfpclpowers &&
 
+              res.data.healthreport.dfpclpowers.forEach((item) => {
 
+                let obj = {
 
+                  text: item.power,
 
+                  value: item.dfpcl,
 
+                };
 
+                dfpc.dfpclpowers[0].value.push(obj);
 
+              });
 
+            res.data.healthreport.dfpclSpeeds &&
 
+              res.data.healthreport.dfpclSpeeds.forEach((item) => {
 
+                let obj = {
 
+                  text: item.speed,
 
+                  value: item.dfpcl,
 
+                };
 
+                dfpc.dfpclSpeeds[0].value.push(obj);
 
+              });
 
             that.dfpc = dfpc;
 
- 
+
 
             // 部件隐患对比
 
             that.bjyhdbs = [];
 
             that.bjyhdbs = that.datas.healthreport.bjyhdbs;
 
@@ -1886,13 +1919,13 @@ export default {
 
                 }
 
                 if (that.yhmxdbs2.length == 3) break;
 
               }
 
- 
+
 
               // 部件隐患数据频次时长统计
 
               let ybmxdj1 = Object.assign([], ybmxdj);
 
               let ybmxdj2 = Object.assign([], ybmxdj);
 
               let array1 = ybmxdj1.sort(that.compare("count"));
 
               let array2 = ybmxdj2.sort(that.compare("times"));
 
-              if (array1.length > 0 && array2.length > 0){
 
+              if (array1.length > 0 && array2.length > 0) {
 
                 that.bjyhcount = [];
 
                 that.bjyhcount.push(array1[0]);
 
                 that.bjyhcount.push(array1[1]);
 
@@ -1904,14 +1937,15 @@ export default {
 
             }
 
             //切入切出对比
 
             that.qrqcs = [];
 
-            res.data.healthreport.qrqcs && res.data.healthreport.qrqcs.forEach((item) => {
 
-              item.xfqr = item.xfqr == null ? 0 : item.xfqr.toFixed(2);
 
-              item.xfqc = item.xfqc == null ? 0 : item.xfqc.toFixed(2);
 
-              item.dfqr = item.dfqr == null ? 0 : item.dfqr.toFixed(2);
 
-              item.dfqc = item.dfqc == null ? 0 : item.dfqc.toFixed(2);
 
-              that.qrqcs.push(item);
 
-            });
 
- 
+            res.data.healthreport.qrqcs &&
 
+              res.data.healthreport.qrqcs.forEach((item) => {
 
+                item.xfqr = item.xfqr == null ? 0 : item.xfqr.toFixed(2);
 
+                item.xfqc = item.xfqc == null ? 0 : item.xfqc.toFixed(2);
 
+                item.dfqr = item.dfqr == null ? 0 : item.dfqr.toFixed(2);
 
+                item.dfqc = item.dfqc == null ? 0 : item.dfqc.toFixed(2);
 
+                that.qrqcs.push(item);
 
+              });
 
+
 
             //设备可利用率
 
             let sbklyls = that.datas.healthreport.sbklyls;
 
             that.sbklyls = sbklyls;
 
@@ -1967,7 +2001,7 @@ export default {
 
               that.sbklyls2.push(sbklyls5);
 
               that.sbklyls2.push(sbklyls6);
 
               that.sbklyls2.push(sbklyls7);
 
- 
+
 
               // 风能利用率
 
               let fnlyl = that.datas.healthreport.fnlyls;
 
               let fnlyl1 = {
 
@@ -2034,55 +2068,56 @@ export default {
 
               that.fnlyls.push(fnlyl8);
 
               that.fnlyls.push(fnlyl9);
 
             }
 
- 
+
 
             // 故障分类
 
             that.faultclass = that.datas.healthreport.faultclass.sort(
 
               that.compare("monthwarningnum")
 
             );
 
- 
+
 
             // 功率对部件温度影响
 
             that.partwds = [];
 
             let partwds = that.datas.healthreport.partwds;
 
             let partwd = [];
 
-            partwds && partwds.forEach((item, i) => {
 
-              let bj = "";
 
-              if (item.part == "zk") {
 
-                bj = "主控";
 
-              } else if (item.part == "fdj") {
 
-                bj = "发电机";
 
-              } else if (item.part == "clx") {
 
-                bj = "齿轮箱";
 
-              } else if (item.part == "bj") {
 
-                bj = "变桨";
 
-              } else if (item.part.indexOf("ph")) {
 
-                bj = "偏航";
 
-              } else if (item.part == "bj") {
 
-                bj = "变桨";
 
-              } else if (item.part.indexOf("yy")) {
 
-                bj = "液压";
 
-              } else if (item.part.indexOf("cdl")) {
 
-                bj = "传动链";
 
-              } else if (item.part.indexOf("cf")) {
 
-                bj = "测风系统";
 
-              }
 
- 
-              partwd.push({
 
-                bj: bj,
 
-                wdcd: item.type,
 
-                min0: item.power == "0kw-150kw" ? item.value : 0,
 
-                min150: item.power == "150kw-300kw" ? item.value : 0,
 
-                min300: item.power == "300kw-450kw" ? item.value : 0,
 
-                min450: item.power == "450kw-600kw" ? item.value : 0,
 
-                min600: item.power == "600kw-750kw" ? item.value : 0,
 
-                min750: item.power == "750kw-900kw" ? item.value : 0,
 
-                min900: item.power == "900kw-1050kw" ? item.value : 0,
 
-                min1050: item.power == "1050kw-1200kw" ? item.value : 0,
 
-                min1200: item.power == "1200kw-1350kw" ? item.value : 0,
 
-                min1350: item.power == "1350kw-1500kw" ? item.value : 0,
 
+            partwds &&
 
+              partwds.forEach((item, i) => {
 
+                let bj = "";
 
+                if (item.part == "zk") {
 
+                  bj = "主控";
 
+                } else if (item.part == "fdj") {
 
+                  bj = "发电机";
 
+                } else if (item.part == "clx") {
 
+                  bj = "齿轮箱";
 
+                } else if (item.part == "bj") {
 
+                  bj = "变桨";
 
+                } else if (item.part.indexOf("ph")) {
 
+                  bj = "偏航";
 
+                } else if (item.part == "bj") {
 
+                  bj = "变桨";
 
+                } else if (item.part.indexOf("yy")) {
 
+                  bj = "液压";
 
+                } else if (item.part.indexOf("cdl")) {
 
+                  bj = "传动链";
 
+                } else if (item.part.indexOf("cf")) {
 
+                  bj = "测风系统";
 
+                }
 
+
 
+                partwd.push({
 
+                  bj: bj,
 
+                  wdcd: item.type,
 
+                  min0: item.power == "0kw-150kw" ? item.value : 0,
 
+                  min150: item.power == "150kw-300kw" ? item.value : 0,
 
+                  min300: item.power == "300kw-450kw" ? item.value : 0,
 
+                  min450: item.power == "450kw-600kw" ? item.value : 0,
 
+                  min600: item.power == "600kw-750kw" ? item.value : 0,
 
+                  min750: item.power == "750kw-900kw" ? item.value : 0,
 
+                  min900: item.power == "900kw-1050kw" ? item.value : 0,
 
+                  min1050: item.power == "1050kw-1200kw" ? item.value : 0,
 
+                  min1200: item.power == "1200kw-1350kw" ? item.value : 0,
 
+                  min1350: item.power == "1350kw-1500kw" ? item.value : 0,
 
+                });
 
               });
 
-            });
 
             that.partwds = partwd;
 
- 
+
 
             // 性能评价结果
 
             that.xnpjjg = [];
 
             let pjmxs = that.datas.healthreport.pjjgs;
 
@@ -2115,7 +2150,7 @@ export default {
 
                 that.xnpjjg.push(xnpj3);
 
               }
 
             }
 
- 
+
 
             // 评价结果明细
 
             that.xnpjmx = [];
 
             let pjmx = that.datas.healthreport.pjmxs[0];
 
@@ -2315,7 +2350,7 @@ export default {
 
                 ],
 
               },
 
             ];
 
- 
+
 
             // 部件劣化状态4张图表
 
             let fdj = [
 
                 {
 
@@ -2345,33 +2380,34 @@ export default {
 
                   value: [],
 
                 },
 
               ];
 
- 
-            res.data.healthreport.wttragetreportcharts && res.data.healthreport.wttragetreportcharts.forEach((item) => {
 
-              var recorddate = new Date(item.recorddate).formatDate(
 
-                "yyyy-MM-dd hh:mm"
 
-              );
 
-              if (item.partid === "fdj") {
 
-                fdj[0].value.push({
 
-                  text: recorddate,
 
-                  value: item.value,
 
-                });
 
-              } else if (item.partid == "clx") {
 
-                clx[0].value.push({
 
-                  text: recorddate,
 
-                  value: item.value,
 
-                });
 
-              } else if (item.partid == "zk") {
 
-                zk[0].value.push({
 
-                  text: recorddate,
 
-                  value: item.value,
 
-                });
 
-              } else if (item.partid == "bj") {
 
-                bj[0].value.push({
 
-                  text: recorddate,
 
-                  value: item.value,
 
-                });
 
-              }
 
-            });
 
+
 
+            res.data.healthreport.wttragetreportcharts &&
 
+              res.data.healthreport.wttragetreportcharts.forEach((item) => {
 
+                var recorddate = new Date(item.recorddate).formatDate(
 
+                  "yyyy-MM-dd hh:mm"
 
+                );
 
+                if (item.partid === "fdj") {
 
+                  fdj[0].value.push({
 
+                    text: recorddate,
 
+                    value: item.value,
 
+                  });
 
+                } else if (item.partid == "clx") {
 
+                  clx[0].value.push({
 
+                    text: recorddate,
 
+                    value: item.value,
 
+                  });
 
+                } else if (item.partid == "zk") {
 
+                  zk[0].value.push({
 
+                    text: recorddate,
 
+                    value: item.value,
 
+                  });
 
+                } else if (item.partid == "bj") {
 
+                  bj[0].value.push({
 
+                    text: recorddate,
 
+                    value: item.value,
 
+                  });
 
+                }
 
+              });
 
             that.wttragetreportcharts = {
 
               fdj: fdj,
 
               clx: clx,
 
@@ -2501,11 +2537,11 @@ export default {
 
       this.bjzb.push(obj14);
 
     },
 
   },
 
- 
+
 
   watch: {
 
     show(value) {
 
       this.dialogVisible = value;
 
-	  // console.log(value)
 
+      // console.log(value)
 
       // if (value) {
 
       //   this.datas();
 
       // }
 
@@ -2520,62 +2556,62 @@ export default {
 
 <style lang="less" scoped>
 
 .cDialog {
 
   position: relative;
 
- 
+
 
   .pdfDom {
 
     padding: 30px 50px;
 
   }
 
- 
+
 
   .title {
 
     text-align: center;
 
     font-size: 24px;
 
     font-weight: 700;
 
   }
 
- 
+
 
   .tableBox {
 
     width: 100%;
 
     display: flex;
 
     justify-content: space-between;
 
     align-items: center;
 
- 
+
 
     .l,
 
     .r {
 
       width: 49%;
 
       align-self: flex-start;
 
     }
 
- 
+
 
     .fw {
 
       font-weight: 700;
 
     }
 
   }
 
- 
+
 
   .infoBox {
 
     margin-top: 10px;
 
     font-size: 16px;
 
- 
+
 
     .red {
 
       color: #f25656;
 
     }
 
- 
+
 
     .purple {
 
       color: rgb(112, 88, 209);
 
     }
 
- 
+
 
     .info {
 
       color: #1595fa;
 
     }
 
- 
+
 
     p {
 
       text-indent: 2em;
 
     }
 
   }
 
- 
+
 
   .textBox {
 
     width: 100%;
 
     margin-top: 10px;
 
     font-size: 16px;
 
   }
 
 }
 
- 
+
 
 .logHead {
 
   display: flex;
 
   width: 100%;
 
@@ -2586,23 +2622,23 @@ export default {
 
   justify-content: center;
 
   margin-top: 15px;
 
 }
 
- 
+
 
 .border-b {
 
   border-bottom: 1px solid #c0ccda;
 
 }
 
- 
+
 
 .p-5 {
 
   padding: 5px;
 
 }
 
- 
+
 
 .m-b-10 {
 
   margin-bottom: 10px;
 
 }
 
- 
+
 
 .text-indent-2 {
 
   text-indent: 2em;
 
 }
 
- 
+
 
 .text-indent-4 {
 
   text-indent: 4em;
 
 }
 
@@ -2613,23 +2649,23 @@ export default {
 
   .cell {
 
     text-align: center;
 
   }
 
- 
+
 
   .el-dialog__body {
 
     max-height: 850px;
 
     overflow-y: scroll;
 
     padding: 0;
 
   }
 
- 
+
 
   .el-form-item.imp {
 
     .el-form-item__content {
 
       font-size: 24px;
 
     }
 
   }
 
- 
+
 
   .el-form-item {
 
     margin-bottom: 0;
 
   }
 
- 
+
 
   .el-table td {
 
     color: black;
 
   }

+ 4 - 1
src/store/index.js
Voir le fichier 

@@ -8,7 +8,7 @@ const debug = process.env.NODE_ENV !== 'production';
 
 const state = {
 
   websocketTimeSec: 1000,
 
   loading: false, //全局 - 加载中....
 
-  themeName: "light", // 主题
 
+  themeName: localStorage.getItem("authToken") || "dark", // 主题
 
   windturbineMap: {},
 
 };
 
 
@@ -29,6 +29,9 @@ const actions = {
 
   getupdate(context, newData) {
 
     context.commit("update", newData);
 
   },
 
+  changeTheme(context, str) {
 
+    context.commit("changeTheme", str)
 
+  }
 
 };
 
 
 const getters = {

+ 23 - 58
src/views/Home/Home.vue
Voir le fichier 

@@ -5,7 +5,7 @@
 
         <Row type="flex" class="weather">
 
           <Col :span="24">
 
             <com-panel
 
-              :title="tqmap.name || 'yc'"
 
+              :title="tqmap.name || '---'"
 
               :sub-title="nowTime + ' 实况'"
 
               icon="fa fa-map-marker"
 
             >
 
@@ -92,22 +92,6 @@
 
               : '日发电量'
 
           "
 
         >
 
-          <!-- <template v-slot:tools>
 
-            <div class="tools">
 
-              <div class="tool-block">
 
-                <div class="legend bg-green"></div>
 
-                <div class="legend-text">日发电量(单位:万kWh)</div>
 
-              </div>
 
-              <div class="tool-block">
 
-                <div class="legend bg-purple"></div>
 
-                <div class="legend-text">上网电量（单位：万kWh）</div>
 
-              </div>
 
-              <div class="tool-block">
 
-                <div class="legend bg-orange"></div>
 
-                <div class="legend-text">购网电量（单位：万kWh）</div>
 
-              </div>
 
-            </div>
 
-          </template> -->
 
           <template v-slot:default>
 
             <!-- 日发电量 -->
 
             <multiple-bar-chart
 
@@ -128,24 +112,6 @@
 
       </Col>
 
       <Col :span="12">
 
         <toolbar-panel title="72小时功率趋势图">
 
-          <!-- <template v-slot:tools>
 
-          <div class="tools">
 
-            <div class="tools">
 
-              <div class="tool-block">
 
-                <div class="legend long bg-green"></div>
 
-                <div class="legend-text">应发功率</div>
 
-              </div>
 
-              <div class="tool-block">
 
-                <div class="legend long bg-yellow"></div>
 
-                <div class="legend-text">实发功率</div>
 
-              </div>
 
-              <div class="tool-block">
 
-                <div class="legend long bg-purple"></div>
 
-                <div class="legend-text">理论功率</div>
 
-              </div>
 
-            </div>
 
-          </div>
 
-        </template> -->
 
           <template v-slot:default>
 
             <multiple-y-line-chart-normal
 
               height="100%"
 
@@ -174,7 +140,7 @@
 
               <table class="table-card">
 
                 <tr class="">
 
                   <td class="text gray">装机容量</td>
 
-                  <td class="value green">{{ Number(jczbmap.zjrl)}}</td>
 
+                  <td class="value green">{{ Number(jczbmap.zjrl) }}</td>
 
                   <td class="unit gray">MW</td>
 
                 </tr>
 
                 <tr class="">
 
@@ -187,12 +153,8 @@
 
                     {{ wpId === "0" ? "减排二氧化硫" : "年运行小时" }}
 
                   </td>
 
                   <td class="value green">
 
-                     <!-- {{ wpId === "0" ? jczbmap.jpeyhl  : gxkmap.nyxxs }} -->
 
                     {{ wpId === "0" ? jczbmap.jpeyhl : gxkmap.nyxxs }}
 
                   </td>
 
-                  <!-- <td class="unit gray">
 
-                    {{ wpId === "0" ? "万吨" : "小时" }}
 
-                  </td> -->
 
                   <td class="unit gray">
 
                     {{ wpId === "0" ? "吨" : "小时" }}
 
                   </td>
 
@@ -202,10 +164,8 @@
 
                     {{ wpId === "0" ? "减排二氧化碳" : "年等效科利用系数" }}
 
                   </td>
 
                   <td class="value green">
 
-                    <!-- {{ wpId === "0" ? jczbmap.jpeyht  : gxkmap.ndxkyss }} -->
 
-                     {{ wpId === "0" ? jczbmap.jpeyht : gxkmap.ndxkyss }}
 
+                    {{ wpId === "0" ? jczbmap.jpeyht : gxkmap.ndxkyss }}
 
                   </td>
 
-                  <!-- <td class="unit gray">{{ wpId === "0" ? "万吨" : "%" }}</td> -->
 
                   <td class="unit gray">{{ wpId === "0" ? "吨" : "%" }}</td>
 
                 </tr>
 
                 <tr class="">
 
@@ -213,12 +173,8 @@
 
                     {{ wpId === "0" ? "节约用水" : "年故障小时" }}
 
                   </td>
 
                   <td class="value green">
 
-                    <!-- {{ wpId === "0" ? jczbmap.jys  : gxkmap.ngzxs }} -->
 
-                     {{ wpId === "0" ? jczbmap.jys : gxkmap.ngzxs }}
 
+                    {{ wpId === "0" ? jczbmap.jys : gxkmap.ngzxs }}
 
                   </td>
 
-                  <!-- <td class="unit gray">
 
-                    {{ wpId === "0" ? "万吨" : "小时" }}
 
-                  </td> -->
 
                   <td class="unit gray">
 
                     {{ wpId === "0" ? "吨" : "小时" }}
 
                   </td>
 
@@ -228,12 +184,8 @@
 
                     {{ wpId === "0" ? "节约标煤" : "年待机小时" }}
 
                   </td>
 
                   <td class="value green">
 
-                    <!-- {{ wpId === "0" ? jczbmap.jybm  : gxkmap.ndjxs }} -->
 
-                      {{ wpId === "0" ? jczbmap.jybm : gxkmap.ndjxs }}
 
+                    {{ wpId === "0" ? jczbmap.jybm : gxkmap.ndjxs }}
 
                   </td>
 
-                  <!-- <td class="unit gray">
 
-                    {{ wpId === "0" ? "万吨" : "小时" }}
 
-                  </td> -->
 
                   <td class="unit gray">
 
                     {{ wpId === "0" ? "吨" : "小时" }}
 
                   </td>
 
@@ -832,6 +784,8 @@ import DoubleLineChart from "@com/chart/line/double-line-chart.vue";
 
 
 import Table from "./dialog/table.vue";
 
 
+import $ from "jquery";
 
+
 
 export default {
 
   name: "Home",
 
   components: {
 
@@ -1005,7 +959,6 @@ export default {
 
           id: that.wpId,
 
         },
 
         success(res) {
 
-          // console.log('basicData:',res)
 
           that.powerData = [
 
             {
 
               title: "风速",
 
@@ -1058,25 +1011,37 @@ export default {
 
               name: "当日预测电量",
 
               value: res.data.jczbmap.rycfdl,
 
               // total: res.data.jczbmap.rfdlsx,
 
-              total: res.data.jczbmap.rycfdl >= res.data.jczbmap.rfdl ? res.data.jczbmap.rycfdl + 100 : res.data.jczbmap.rfdl + 100,
 
+              total:
 
+                res.data.jczbmap.rycfdl >= res.data.jczbmap.rfdl
 
+                  ? res.data.jczbmap.rycfdl + 100
 
+                  : res.data.jczbmap.rfdl + 100,
 
             },
 
             {
 
               name: "实际发电量",
 
               value: res.data.jczbmap.rfdl,
 
               // total: res.data.jczbmap.rfdlsx,
 
-              total: res.data.jczbmap.rycfdl >= res.data.jczbmap.rfdl ? res.data.jczbmap.rycfdl + 100 : res.data.jczbmap.rfdl + 100,
 
+              total:
 
+                res.data.jczbmap.rycfdl >= res.data.jczbmap.rfdl
 
+                  ? res.data.jczbmap.rycfdl + 100
 
+                  : res.data.jczbmap.rfdl + 100,
 
             },
 
             {
 
               name: "当月预测电量",
 
               value: res.data.jczbmap.yycfdl,
 
               // total: res.data.jczbmap.yfdlsx,
 
-              total: res.data.jczbmap.yycfdl >= res.data.jczbmap.yfdl ? res.data.jczbmap.yycfdl + 200 : res.data.jczbmap.yfdl + 200,
 
+              total:
 
+                res.data.jczbmap.yycfdl >= res.data.jczbmap.yfdl
 
+                  ? res.data.jczbmap.yycfdl + 200
 
+                  : res.data.jczbmap.yfdl + 200,
 
             },
 
             {
 
               name: "实际发电量",
 
               value: res.data.jczbmap.yfdl,
 
               // total: res.data.jczbmap.yfdlsx,
 
-              total: res.data.jczbmap.yycfdl >= res.data.jczbmap.yfdl ? res.data.jczbmap.yycfdl + 200 : res.data.jczbmap.yfdl + 200,
 
+              total:
 
+                res.data.jczbmap.yycfdl >= res.data.jczbmap.yfdl
 
+                  ? res.data.jczbmap.yycfdl + 200
 
+                  : res.data.jczbmap.yfdl + 200,
 
             },
 
           ];

Fichier diff supprimé car celui-ci est trop grand
+ 446 - 64
src/views/Home/components/map/svg-map-nx.vue


+ 0 - 1
src/views/Home/components/weather.vue
Voir le fichier 

@@ -1,4 +1,3 @@
 
-// 天气分析
 
 <template>
 
   <div class="weather">
 
     <div class="weather-info">

+ 63 - 11
src/views/NewPages/power-benchmarking.vue
Voir le fichier 

@@ -17,7 +17,14 @@
 
           <div class="unit">万kWh</div>
 
         </div>
 
       </div>
 
-      <div class="static-items" style="flex: 0 0 860px">
 
+      <div
 
+        class="static-items"
 
+        :style="
 
+          $store.state.themeName === 'dark'
 
+            ? 'flex: 0 0 860px;transition: 0.2s;'
 
+            : ''
 
+        "
 
+      >
 
         <div class="static-items-title">
 
           <i class="svg-icon svg-icon-green">
 
             <svg-icon :svgid="'svg-flash'" />
 
@@ -84,7 +91,14 @@
 
           </div>
 
         </div>
 
       </div>
 
-      <div class="static-items" style="flex: 0 0 430px">
 
+      <div
 
+        class="static-items"
 
+        :style="
 
+          $store.state.themeName === 'dark'
 
+            ? 'flex: 0 0 430px;transition: 0.2s;'
 
+            : ''
 
+        "
 
+      >
 
         <div class="static-items-title">
 
           <i class="svg-icon svg-icon-green">
 
             <svg-icon :svgid="'svg-flash'" />
 
@@ -151,7 +165,14 @@
 
           </div>
 
         </div>
 
       </div>
 
-      <div class="static-items" style="flex: 0 0 430px">
 
+      <div
 
+        class="static-items"
 
+        :style="
 
+          $store.state.themeName === 'dark'
 
+            ? 'flex: 0 0 430px;transition: 0.2s;'
 
+            : ''
 
+        "
 
+      >
 
         <div class="static-items-title">
 
           <i class="svg-icon svg-icon-green">
 
             <svg-icon :svgid="'svg-flash'" />
 
@@ -285,6 +306,7 @@
 
           :height="'370px'"
 
           :elPaggingProps="null"
 
           @headerClick="headerClick"
 
+          ref="jjyxTableRef"
 
         ></group-table>
 
       </div>
 
       <div class="top-right">
 
@@ -427,37 +449,37 @@ export default {
 
               {
 
                 name: "风能利用率(%)",
 
                 field: "windenergy",
 
-                width: 55,
 
+                width: this.$store.state.themeName === "dark" ? 55 : 50,
 
               },
 
               {
 
                 name: "限电损失率(%)",
 
                 field: "powerlossrate",
 
-                width: 55,
 
+                width: this.$store.state.themeName === "dark" ? 55 : 50,
 
               },
 
               {
 
                 name: "性能损失率(%)",
 
                 field: "performancelossrate",
 
-                width: 55,
 
+                width: this.$store.state.themeName === "dark" ? 55 : 50,
 
               },
 
               {
 
                 name: "综合厂用电率(%)",
 
                 field: "comprehensiverate",
 
-                width: 55,
 
+                width: this.$store.state.themeName === "dark" ? 55 : 50,
 
               },
 
               {
 
                 name: "设备利用小时(小时)",
 
                 field: "utilizationhours",
 
-                width: 55,
 
+                width: this.$store.state.themeName === "dark" ? 55 : 50,
 
               },
 
               {
 
                 name: "风功率预测准确率(%)",
 
                 field: "windpoweraccuracy",
 
-                width: 55,
 
+                width: this.$store.state.themeName === "dark" ? 55 : 50,
 
               },
 
               {
 
                 name: "AGC曲线跟随率(%)",
 
                 field: "agccurvefollowing",
 
-                width: 55,
 
+                width: this.$store.state.themeName === "dark" ? 55 : 50,
 
               },
 
             ],
 
           },
 
@@ -529,6 +551,7 @@ export default {
 
         ],
 
         data: [],
 
       },
 
+      eltableDataBackup: {},
 
       greenTable: {
 
         column: [
 
           {
 
@@ -563,6 +586,13 @@ export default {
 
     this.requestDataTable("月");
 
     this.requestDataTop("月");
 
   },
 
+
 
+  mounted() {
 
+    this.$nextTick(() => {
 
+      this.eltableDataBackup = this.BASE.deepCopy(this.eltableData);
 
+      this.resetTableSize(this.$store.state.themeName);
 
+    });
 
+  },
 
   methods: {
 
     selectionClick(index) {
 
       this.selecttionIndex = index;
 
@@ -960,10 +990,28 @@ export default {
 
         item.expect = this.filter(shiji[key] - jizhun[key]);
 
       }
 
     },
 
-    // 保留小数位
 
+    // 保留小数位l
 
     filter(num) {
 
       return num % 1 === 0 ? num : num.toFixed(1);
 
     },
 
+    resetTableSize(themeName) {
 
+      this.$nextTick(() => {
 
+        this.eltableData.column.forEach((pEle, pIndex) => {
 
+          pEle.child.forEach((cEle, cIndex) => {
 
+            const width =
 
+              this.eltableDataBackup.column[pIndex].child[cIndex].width;
 
+            cEle.width = themeName === "dark" ? width : width - 1;
 
+          });
 
+        });
 
+        this.$refs?.jjyxTableRef?.$refs?.groupTable?.doLayout();
 
+      });
 
+    },
 
+  },
 
+
 
+  watch: {
 
+    "$store.state.themeName"(themeName) {
 
+      this.resetTableSize(themeName);
 
+    },
 
   },
 
 };
 
 </script>
 
@@ -1251,6 +1299,10 @@ export default {
 
       }
 
 
       .table {
 
+        .el-table__body table,
 
+        .el-table__header-wrapper table {
 
+          width: 100%;
 
+        }
 
         &.el-table thead tr:first-child th {
 
           background: fade(@gray, 40);
 
           border-bottom: 1px solid #0b1010;

+ 149 - 50
src/views/Others/index.vue
Voir le fichier 

@@ -1,16 +1,31 @@
 
 <template>
 
   <div class="swiperBox">
 
-    <el-carousel style="width: 100%; margin: 5vh 0" trigger="click" type="card" height="80vh" :autoplay="false" indicator-position="none" :initial-index="1" arrow="none" @change="changeSwiper">
 
+    <el-carousel
 
+      style="width: 100%; margin: 5vh 0"
 
+      trigger="click"
 
+      type="card"
 
+      height="80vh"
 
+      :autoplay="false"
 
+      indicator-position="none"
 
+      :initial-index="1"
 
+      arrow="none"
 
+      @change="changeSwiper"
 
+    >
 
       <!-- card-1 -->
 
-      <el-carousel-item style="padding: 20px; background: rgb(4, 12, 11)">
 
+      <el-carousel-item :style="$store.state.themeName === 'dark' ? 'padding: 20px; background: rgb(4, 12, 11)' : 'padding: 20px; background: #fff'">
 
         <div class="itemBox">
 
-          <p class="itemTitle">
 
-            记录查询
 
-          </p>
 
+          <p class="itemTitle">记录查询</p>
 
           <div class="df-table">
 
-            <div class="sjcx-item" v-for="item in earlyAlarmColumn" :key="item" @click="jumpUrl(item.url)">
 
-              <div class="sjcx-name">{{item.name}}</div>
 
-              <div class="sjcx-value">{{earlyAlarmData[item.key] || '0'}}</div>
 
+            <div
 
+              class="sjcx-item"
 
+              v-for="item in earlyAlarmColumn"
 
+              :key="item"
 
+              @click="jumpUrl(item.url)"
 
+            >
 
+              <div class="sjcx-name">{{ item.name }}</div>
 
+              <div class="sjcx-value">
 
+                {{ earlyAlarmData[item.key] || "0" }}
 
+              </div>
 
             </div>
 
           </div>
 
         </div>
 
@@ -18,7 +33,7 @@
 
 
       <!-- card-2 -->
 
 
-      <el-carousel-item style="padding: 20px; background: rgb(4, 12, 11)">
 
+      <el-carousel-item :style="$store.state.themeName === 'dark' ? 'padding: 20px; background: rgb(4, 12, 11)' : 'padding: 20px; background: #fff'">
 
         <div class="itemBox">
 
           <p class="itemTitle">
 
             报表管理
 
@@ -26,42 +41,68 @@
 
           </p>
 
           <div class="imageBox1">
 
             <div class="imgItem1" @click="jumpUrl('/others/tjfx')">
 
-              <el-image class="img1" src="./static/img/o统计分析.png" fit="fill" />
 
+              <el-image
 
+                class="img1"
 
+                src="./static/img/o统计分析.png"
 
+                fit="fill"
 
+              />
 
               <p class="imgTitle">统计分析</p>
 
             </div>
 
             <div class="imgItem1" @click="jumpUrl('/others/bdzcx')">
 
-              <el-image class="img1" src="./static/img/o表底值查询.png" fit="fill" />
 
+              <el-image
 
+                class="img1"
 
+                src="./static/img/o表底值查询.png"
 
+                fit="fill"
 
+              />
 
               <p class="imgTitle">表底值查询</p>
 
             </div>
 
             <div class="imgItem1" @click="jumpUrl('/others/xnyrb')">
 
-              <el-image class="img1" src="./static/img/o新能源日报.png" fit="fill" />
 
+              <el-image
 
+                class="img1"
 
+                src="./static/img/o新能源日报.png"
 
+                fit="fill"
 
+              />
 
               <p class="imgTitle">新能源日报</p>
 
             </div>
 
             <div class="imgItem1" @click="jumpUrl('/others/xnyfdscyb')">
 
-              <el-image class="img1" src="./static/img/o新能源月报.png" fit="fill" />
 
+              <el-image
 
+                class="img1"
 
+                src="./static/img/o新能源月报.png"
 
+                fit="fill"
 
+              />
 
               <p class="imgTitle">新能源风电生产月报</p>
 
             </div>
 
             <div class="imgItem1" @click="jumpUrl('/others/fdczzdy')">
 
-              <el-image class="img1" src="./static/img/o风场自定义.png" fit="fill" />
 
+              <el-image
 
+                class="img1"
 
+                src="./static/img/o风场自定义.png"
 
+                fit="fill"
 
+              />
 
               <p class="imgTitle">风电场站自定义</p>
 
             </div>
 
             <div class="imgItem1" @click="jumpUrl('/others/fdxmzdy')">
 
-              <el-image class="img1" src="./static/img/o风电自定义.png" fit="fill" />
 
+              <el-image
 
+                class="img1"
 
+                src="./static/img/o风电自定义.png"
 
+                fit="fill"
 
+              />
 
               <p class="imgTitle">风电项目自定义</p>
 
             </div>
 
           </div>
 
         </div>
 
       </el-carousel-item>
 
       <!-- card-3 -->
 
-      <el-carousel-item style="padding: 20px; background: rgb(4, 12, 11)">
 
+      <el-carousel-item :style="$store.state.themeName === 'dark' ? 'padding: 20px; background: rgb(4, 12, 11)' : 'padding: 20px; background: #fff'">
 
         <div class="itemBox">
 
-          <p class="itemTitle">
 
-            数据查询
 
-          </p>
 
+          <p class="itemTitle">数据查询</p>
 
           <div class="df-table" @click="jumpUrl('/others/realSearch')">
 
-            <div class="sjcx-item" v-for="(value, key) in wppointColumn" :key="key">
 
-              <div class="sjcx-name">{{value}}</div>
 
-              <div class="sjcx-value">{{wppointnum[key]}}</div>
 
+            <div
 
+              class="sjcx-item"
 
+              v-for="(value, key) in wppointColumn"
 
+              :key="key"
 
+            >
 
+              <div class="sjcx-name">{{ value }}</div>
 
+              <div class="sjcx-value">{{ wppointnum[key] }}</div>
 
             </div>
 
           </div>
 
         </div>
 
@@ -92,35 +133,74 @@
 
           </div>
 
         </div>
 
       </el-carousel-item> -->
 
-      <el-carousel-item style="padding: 20px; background: rgb(4, 12, 11)">
 
+      <el-carousel-item :style="$store.state.themeName === 'dark' ? 'padding: 20px; background: rgb(4, 12, 11)' : 'padding: 20px; background: #fff'">
 
         <div class="itemBox">
 
           <p class="itemTitle">
 
             专家知识
 
             <!-- <i class="itemMoreBtn el-icon-more" @click="jumpUrl('/realSearch')"></i> -->
 
           </p>
 
           <div class="imageBox1">
 
-            <div class="imgItem1" @click="jumpUrl('/others/knowledge/knowledge')">
 
-              <el-image class="img1" src="./static/img/o故障体系.png" fit="fill" />
 
+            <div
 
+              class="imgItem1"
 
+              @click="jumpUrl('/others/knowledge/knowledge')"
 
+            >
 
+              <el-image
 
+                class="img1"
 
+                src="./static/img/o故障体系.png"
 
+                fit="fill"
 
+              />
 
               <p class="imgTitle">故障体系</p>
 
             </div>
 
-            <div class="imgItem1" @click="jumpUrl('/others/knowledge/knowledge7')">
 
-              <el-image class="img1" src="./static/img/o预警知识.png" fit="fill" />
 
+            <div
 
+              class="imgItem1"
 
+              @click="jumpUrl('/others/knowledge/knowledge7')"
 
+            >
 
+              <el-image
 
+                class="img1"
 
+                src="./static/img/o预警知识.png"
 
+                fit="fill"
 
+              />
 
               <p class="imgTitle">预警知识</p>
 
             </div>
 
-            <div class="imgItem1" @click="jumpUrl('/others/knowledge/knowledge5')">
 
-              <el-image class="img1" src="./static/img/o特征参数.png" fit="fill" />
 
+            <div
 
+              class="imgItem1"
 
+              @click="jumpUrl('/others/knowledge/knowledge5')"
 
+            >
 
+              <el-image
 
+                class="img1"
 
+                src="./static/img/o特征参数.png"
 
+                fit="fill"
 
+              />
 
               <p class="imgTitle">特征参数</p>
 
             </div>
 
-            <div class="imgItem1" @click="jumpUrl('/others/knowledge/knowledge6')">
 
-              <el-image class="img1" src="./static/img/o检修方案.png" fit="fill" />
 
+            <div
 
+              class="imgItem1"
 
+              @click="jumpUrl('/others/knowledge/knowledge6')"
 
+            >
 
+              <el-image
 
+                class="img1"
 
+                src="./static/img/o检修方案.png"
 
+                fit="fill"
 
+              />
 
               <p class="imgTitle">排查、检修方案</p>
 
             </div>
 
-            <div class="imgItem1" @click="jumpUrl('/health/gzzd/malfunctionDiagnose')">
 
-              <el-image class="img1" src="./static/img/o评价体系.png" fit="fill" />
 
+            <div
 
+              class="imgItem1"
 
+              @click="jumpUrl('/health/gzzd/malfunctionDiagnose')"
 
+            >
 
+              <el-image
 
+                class="img1"
 
+                src="./static/img/o评价体系.png"
 
+                fit="fill"
 
+              />
 
               <p class="imgTitle">评价体系</p>
 
             </div>
 
             <div class="imgItem1" @click="jumpUrl('/health/frist')">
 
-              <el-image class="img1" src="./static/img/o人工智能.png" fit="fill" />
 
+              <el-image
 
+                class="img1"
 
+                src="./static/img/o人工智能.png"
 
+                fit="fill"
 
+              />
 
               <p class="imgTitle">人工智能</p>
 
             </div>
 
           </div>
 
@@ -183,7 +263,7 @@ export default {
 
           url: "/others/alarmCenter/alarmcenter",
 
         },
 
         { name: "操作记录", key: "cz", url: "/others/alarmCenter/czjl" },
 
-		{ name: "光伏告警", key: "gfgj", url: "/others/alarmCenter/gfgj" },
 
+        { name: "光伏告警", key: "gfgj", url: "/others/alarmCenter/gfgj" },
 
       ],
 
       tableData1: {
 
         column: [
 
@@ -289,6 +369,7 @@ export default {
 
         ],
 
         data: [],
 
       },
 
+      swiperIndex: 1,
 
     };
 
   },
 
 
@@ -297,22 +378,32 @@ export default {
 
     // 切换走马灯，并重新渲染样式
 
     changeSwiper(index) {
 
       this.$nextTick(() => {
 
+        const themeName = this.$store.state.themeName;
 
         const swiperDom = $(".swiperBox .el-carousel__item");
 
-        swiperDom
 
-          .eq(index)
 
-          .css({ background: "rgb(4, 12, 11)", border: "1px solid #05bb4c" });
 
+        swiperDom.eq(index).css({
 
+          background: themeName === "dark" ? "rgb(4, 12, 11)" : "#fff",
 
+          border:
 
+            themeName === "dark" ? "1px solid #05bb4c" : "1px solid #36348e",
 
+        });
 
         for (let i = 0; i < swiperDom.length; i++) {
 
           if (i !== index) {
 
-            swiperDom.eq(i).find(".el-carousel__mask").css({
 
-              background: "rgb(4, 12, 11)",
 
-            });
 
+            swiperDom
 
+              .eq(i)
 
+              .find(".el-carousel__mask")
 
+              .css({
 
+                background: themeName === "dark" ? "rgb(4, 12, 11)" : "#fff",
 
+              });
 
             swiperDom.eq(i).css({
 
-              background: "rgb(4, 12, 11)",
 
-              border: "1px solid rgba(5, 187, 76, 0.5)",
 
+              background: themeName === "dark" ? "rgb(4, 12, 11)" : "#fff",
 
+              border:
 
+                themeName === "dark"
 
+                  ? "1px solid rgba(5, 187, 76, 0.5)"
 
+                  : "1px solid rgba(57, 54, 143, 0.5)",
 
             });
 
           }
 
         }
 
       });
 
+      this.swiperIndex = index;
 
     },
 
 
     // 页面跳转
 
@@ -360,7 +451,6 @@ export default {
 
         },
 
       ];
 
       that.tableData1.data = tableArr1;
 
-      console.log("tableData1:", that.tableData1);
 
 
       let tableArr2 = [
 
         {
 
@@ -393,7 +483,6 @@ export default {
 
         },
 
       ];
 
       that.tableData2.data = tableArr2;
 
-      console.log("tableData2:", that.tableData2);
 
 
       let tableArr3 = [
 
         {
 
@@ -433,7 +522,6 @@ export default {
 
         },
 
       ];
 
       that.tableData3.data = tableArr3;
 
-      console.log("tableData3:", that.tableData3);
 
 
       let tableArr4 = [
 
         {
 
@@ -458,7 +546,6 @@ export default {
 
         },
 
       ];
 
       that.tableData4.data = tableArr4;
 
-      console.log("tableData4:", that.tableData4);
 
     },
 
     getWppointnum() {
 
       const that = this;
 
@@ -487,14 +574,26 @@ export default {
 
   mounted() {
 
     let that = this;
 
     this.$nextTick(() => {
 
-      this.changeSwiper(1);
 
+      setTimeout(() => {
 
+        this.changeSwiper(1);
 
+      }, 200);
 
     });
 
     that.getTableData();
 
-    this.getWppointnum();
 
-    this.getEarlyAlarmData();
 
+    that.getWppointnum();
 
+    that.getEarlyAlarmData();
 
   },
 
 
   unmounted() {},
 
+
 
+  watch: {
 
+    "$store.state.themeName"() {
 
+      this.$nextTick(() => {
 
+        setTimeout(() => {
 
+          this.changeSwiper(this.swiperIndex, 222);
 
+        }, 200);
 
+      });
 
+    },
 
+  },
 
 };
 
 </script>

+ 4 - 5
src/views/SandTable/SandTable.vue
Voir le fichier 

@@ -140,7 +140,7 @@
 
         </template>
 
       </PanelSandToolbar>
 
     </div>
 
-    <div class="sand-table-bottom" v-if="showPanel">
 
+    <div class="sand-table-bottom" :style="$store.state.themeName === 'dark' ? 'right: calc(50vw - 545px);' : 'right: calc(50vw - 590px);'" v-if="showPanel">
 
       <Ppanel
 
         title="利用小时"
 
         :data="riseNumber(gxkmap.bg_dxkyss)"
 
@@ -1137,8 +1137,7 @@ export default {
 
 </script>
 
 
 <style lang="less">
 
-
 
- .sand-table {
 
+.sand-table {
 
   width: 100%;
 
   height: 91.667vh;
 
   position: relative;
 
@@ -1192,10 +1191,10 @@ export default {
 
 
   .sand-table-bottom {
 
     position: absolute;
 
-    right: calc(50vw - 545px);
 
     bottom: 0;
 
     z-index: 2;
 
     display: flex;
 
+    transform: 0.2s;
 
 
     .stb-p {
 
       margin-left: 0.926vh;
 
@@ -1213,10 +1212,10 @@ export default {
 
 
     .sand-table-bottom {
 
       position: absolute;
 
-      right: calc(50vw - 545px);
 
       bottom: 0;
 
       z-index: 2;
 
       display: flex;
 
+      transition: 0.2s;
 
     }
 
 
     .mask {

+ 107 - 45
src/views/layout/Header.vue
Voir le fichier 

@@ -1,11 +1,13 @@
 
 <template>
 
   <div class="header-menu">
 
     <ul class="header-menu-list">
 
-      <li class="header-menu-item"
 
-          v-for="(menu, index) of menus"
 
-          :key="menu"
 
-          @click="click(index, menu)"
 
-          :class="{ active: activeIndex == index }">
 
+      <li
 
+        class="header-menu-item"
 
+        v-for="(menu, index) of menus"
 
+        :key="menu"
 
+        @click="click(index, menu)"
 
+        :class="{ active: activeIndex == index }"
 
+      >
 
         {{ menu.text }}
 
       </li>
 
     </ul>
 
@@ -18,33 +20,64 @@
 
       </ul>
 
     </ul> -->
 
     <ul class="header-menu-user">
 
-      <li class="header-menu-user-title"><i class="fa fa-user"></i>白玉杰</li>
 
+      <li class="header-menu-user-title">
 
+        <span class="el-dropdown-link"> <i class="fa fa-user"></i>白玉杰 </span>
 
+        <el-dropdown
 
+          size="small"
 
+          trigger="hover"
 
+          :hide-on-click="true"
 
+          v-if="false"
 
+        >
 
+          <span class="el-dropdown-link">
 
+            <i class="fa fa-user"></i>白玉杰
 
+          </span>
 
+          <template #dropdown>
 
+            <el-dropdown-menu :class="$store.state.themeName + ' curDropdown'">
 
+              <el-dropdown-item>
 
+                <el-switch
 
+                  size="small"
 
+                  active-color="rgb(57, 54, 143)"
 
+                  inactive-color="#05bb4c"
 
+                  active-text="亮色主题"
 
+                  inactive-text="暗色主题"
 
+                  v-model="themeName"
 
+                  @change="changeTheme()"
 
+                />
 
+              </el-dropdown-item>
 
+            </el-dropdown-menu>
 
+          </template>
 
+        </el-dropdown>
 
+      </li>
 
     </ul>
 
   </div>
 
 </template>
 
 <script>
 
+import $ from "jquery";
 
+// import store from '@store/index';
 
+
 
 export default {
 
   data() {
 
     return {
 
+      themeName: false,
 
       menus: [
 
         {
 
-          id: 'monitor',
 
-          text: '驾驶舱',
 
-          path: '/monitor/home',
 
-          isActive: true
 
+          id: "monitor",
 
+          text: "驾驶舱",
 
+          path: "/monitor/home",
 
+          isActive: true,
 
         },
 
         {
 
-          id: 'decision',
 
-          text: '经济运行',
 
-          path: '/decision/pb',
 
-          isActive: false
 
+          id: "decision",
 
+          text: "经济运行",
 
+          path: "/decision/pb",
 
+          isActive: false,
 
         },
 
         {
 
-          id: 'health',
 
-          text: '智慧检修',
 
+          id: "health",
 
+          text: "智慧检修",
 
           // path: '/sandtable',
 
-          path: '/health/sandtable',
 
-          isActive: false
 
+          path: "/health/sandtable",
 
+          isActive: false,
 
         },
 
         // {
 
         //   id: "decision",
 
@@ -53,10 +86,10 @@ export default {
 
         //   isActive: false,
 
         // },
 
         {
 
-          id: 'save',
 
-          text: '安全管控',
 
-          path: '/save',
 
-          isActive: false
 
+          id: "save",
 
+          text: "安全管控",
 
+          path: "/save",
 
+          isActive: false,
 
         },
 
         // {
 
         //   id: "znbb",
 
@@ -65,13 +98,13 @@ export default {
 
         //   isActive: false,
 
         // },
 
         {
 
-          id: 'others',
 
-          text: '其他',
 
-          path: '/others',
 
-          isActive: false
 
-        }
 
+          id: "others",
 
+          text: "其他",
 
+          path: "/others",
 
+          isActive: false,
 
+        },
 
       ],
 
-      activeIndex: 0
 
+      activeIndex: 0,
 
       // menusDropdown: [
 
       //   {
 
       //     text: "子菜单1",
 
@@ -87,39 +120,68 @@ export default {
 
       //   },
 
       // ],
 
       // dropdown: false,
 
-    }
 
+      firsttime: 0,
 
+    };
 
+  },
 
+  mounted() {
 
+    let that = this;
 
+    $(document).keydown((event) => {
 
+      if (event.keyCode == 67) { // c
 
+        let firstDate = new Date();
 
+        if (that.firsttime == 0) {
 
+          that.firsttime = firstDate.getTime();
 
+        } else {
 
+          var lastDate = new Date();
 
+          var lastTime = lastDate.getTime();
 
+          if (lastTime - that.firsttime < 1000) {
 
+            that.changeTheme();
 
+            that.firsttime = 0;
 
+          }
 
+        }
 
+      }
 
+    });
 
   },
 
   methods: {
 
     click(index, data) {
 
-      this.activeIndex = index
 
-      this.$router.push(data.path)
 
+      this.activeIndex = index;
 
+      this.$router.push(data.path);
 
     },
 
     clickSubMenu(index, code) {
 
-      console.log(index, code)
 
+      console.log(index, code);
 
     },
 
     clickMenu() {
 
-      this.dropdown = !this.dropdown
 
-    }
 
+      this.dropdown = !this.dropdown;
 
+    },
 
+    changeTheme() {
 
+      $("#appBody").toggleClass("dark light");
 
+      this.$store.dispatch("changeTheme", $("#appBody").attr("class"));
 
+      console.log(111111, $("#appBody").attr("class"));
 
+      console.log(222222, this.$store.state.themeName);
 
+      this.$store.state.themeName === "dark"
 
+        ? (this.themeName = false)
 
+        : (this.themeName = true);
 
+      localStorage.setItem("authToken", this.$store.state.themeName);
 
+    },
 
   },
 
   computed: {
 
     activeClass(data) {
 
-      return data.isActive ? 'active' : ''
 
-    }
 
+      return data.isActive ? "active" : "";
 
+    },
 
   },
 
   watch: {
 
     $route: {
 
-      handler: function(val, oldVal) {
 
+      handler: function (val, oldVal) {
 
         this.menus.some((t, index) => {
 
           if (val.path.includes(t.id)) {
 
-            this.activeIndex = index
 
+            this.activeIndex = index;
 
           }
 
-        })
 
+        });
 
       },
 
       //深度观察监听
 
-      deep: true
 
-    }
 
-  }
 
-}
 
+      deep: true,
 
+    },
 
+  },
 
+};
 
 </script>
 
 
 <style lang="less">
 
@@ -156,7 +218,7 @@ export default {
 
         transition: color 0.2s ease-in-out;
 
 
         &::after {
 
-          content: '';
 
+          content: "";
 
           position: absolute;
 
           width: 100%;
 
           height: 0.463vh;
 
@@ -213,7 +275,7 @@ export default {
 
         background-color: fade(@write, 5%);
 
 
         &::after {
 
-          content: '';
 
+          content: "";
 
           position: absolute;
 
           width: 100%;
 
           height: 0.463vh;

+ 17 - 12
src/views/layout/Menu.vue
Voir le fichier 

@@ -35,7 +35,12 @@
 
       </li>
 
     </ul>
 
   </div>
 
-  <div class="sub-menu" v-show="isShowSubMenu" @mouseleave="subMenuHide">
 
+  <div
 
+    class="sub-menu"
 
+    v-show="isShowSubMenu"
 
+    @mouseleave="subMenuHide"
 
+    v-if="$store.state.themeName === 'dark'"
 
+  >
 
     <ul class="menu-list">
 
       <li
 
         class="menu-item"
 
@@ -396,7 +401,7 @@ export default {
 
                   text: "自组合评级",
 
                   icon: "svg-wind-site",
 
                   path: "/health/assess/selfEvaluate",
 
-                }
 
+                },
 
               ],
 
             },
 
             {
 
@@ -414,16 +419,16 @@ export default {
 
                   icon: "svg-wind-site",
 
                   path: "/health/gzzd/malfunctionRecall",
 
                 },
 
-				{
 
-				  text: "故障分类",
 
-				  icon: "svg-wind-site",
 
-				  path: "/health/gzzd/gzfl",
 
-				},
 
-				{
 
-				  text: "预警分类",
 
-				  icon: "svg-wind-site",
 
-				  path: "/health/gzzd/yjfl",
 
-				},
 
+                {
 
+                  text: "故障分类",
 
+                  icon: "svg-wind-site",
 
+                  path: "/health/gzzd/gzfl",
 
+                },
 
+                {
 
+                  text: "预警分类",
 
+                  icon: "svg-wind-site",
 
+                  path: "/health/gzzd/yjfl",
 
+                },
 
               ],
 
             },
 
             {