合并代码

src/components/commonHeaders.vue

@@ -20,11 +20,7 @@
           </div>
           <div class="proSet">
             <div class="settingStop">
-              <el-switch
-                v-model="switchTheme"
-                @change="changSwith"
-                v-if="false"
-              >
+              <el-switch v-model="switchTheme" @change="changSwith">
                 <template #active-action>
                   <!-- <span class="custom-active-action">T</span> -->
                   <img :src="moon_B" alt="" v-if="!switchTheme" />
@@ -104,7 +100,6 @@ export default {
     };
   },
   created() {
-    this.changSwith(false);
     this.headerReportUrl = this.baseReportUrl;
     this.menuData = [
       {
@@ -119,7 +114,7 @@ export default {
         name: "发电能力分析",
       },
       {
-        index: "/integratedAlarm",
+        index: "/integratedAlarm/realwarning",
         icon: "Histogram",
         name: "综合报警",
       },
@@ -137,9 +132,10 @@ export default {
   },
   mounted() {
     let that = this;
-    // this.switchTheme = JSON.parse(window.sessionStorage.getItem("theme"));
-    // this.$store.state.theme = this.switchTheme;
-    // this.$emit("swichFn", this.switchTheme);
+    this.switchTheme = JSON.parse(window.sessionStorage.getItem("theme"));
+    this.$store.commit("changeTheme", this.switchTheme);
+    this.$emit("swichFn", this.switchTheme);
+    this.getThemeClass(this.switchTheme);
     let userMes = JSON.parse(window.sessionStorage.getItem("userMessage"));
     that.userName = userMes ? userMes.role : "administrator";
     if (this.$route.query.markKey) {
@@ -159,10 +155,24 @@ export default {
     },
   },
   methods: {
-    changSwith(val) {
-      this.$emit("swichFn", val);
-      window.sessionStorage.setItem("theme", JSON.stringify(val));
-      this.$store.commit("changeTheme", val);
+    changSwith(bool) {
+      this.getThemeClass(bool);
+      this.$emit("swichFn", bool);
+      window.sessionStorage.setItem("theme", JSON.stringify(bool));
+      this.$store.commit("changeTheme", bool);
+    },
+    getThemeClass(bool) {
+      if (bool) {
+        document.body.classList.remove("nsfStyle");
+        if (!document.body.classList.contains("blueStyle")) {
+          document.body.classList.add("blueStyle");
+        }
+      } else {
+        document.body.classList.remove("blueStyle");
+        if (!document.body.classList.contains("nsfStyle")) {
+          document.body.classList.add("nsfStyle");
+        }
+      }
     },
     showHeader(route) {
       this.menuData.forEach((it) => {

src/components/generatingCapacityComponent/table.vue

@@ -170,6 +170,9 @@ export default {
     data(value) {
       this.tableData = value || [];
     },
+    theme(bool) {
+      console.log(1111, bool);
+    },
   },
 };
 </script>

src/main.js

@@ -34,6 +34,7 @@ import "@/lib/global-import.js";
 import './permission' // permission control
 
 import "./themeDark.less";
+import "./themeBlue.less";
 
 const debounce = (fn, delay) => {
   let timer = null;

src/router/index.js

@@ -172,6 +172,14 @@ const routes = [
         component: () => import("../views/intelligentReporting/yxdtjb/index.vue"),
     },
     {
+        path: "/intelligentReport/jhdltb",
+        name: "intelligentReportjhdltb",
+        meta: {
+            title: "计划电量填报",
+        },
+        component: () => import("../views/intelligentReporting/jhdltb/index.vue"),
+    },
+    {
         path: "/intelligentReport/zhbb",
         name: "intelligentReportzhbb",
         meta: {
@@ -340,15 +348,15 @@ const routes = [
             import("../views/generatingCapacity/jjyxReport/index.vue"),
     },
     // 综合报警
-    {
-        path: "/integratedAlarm",
-        name: "integratedAlarm",
-        meta: {
-            title: "综合报警",
-        },
-        component: () =>
-            import("../views/IntegratedAlarm/index.vue"),
-    },
+    // {
+    //     path: "/integratedAlarm",
+    //     name: "integratedAlarm",
+    //     meta: {
+    //         title: "综合报警",
+    //     },
+    //     component: () =>
+    //         import("../views/IntegratedAlarm/index.vue"),
+    // },
     {
         path: "/integratedAlarm/realwarning",
         name: "realwarning",

src/themeBlue.less

@@ -0,0 +1,541 @@
+// 主色
+@mc1: #09172b;
+@mc2: #142446;
+@mc3: #2169c3;
+
+// 辅助色
+@fzs1: #2999a0;
+@fzs2: #1890ff;
+@fzs3: #ff6271;
+
+// 文字颜色
+@fc1 : #a6b8dd;
+@fc2 : #f9fbff;
+@fc3 : #c3e1ff;
+@fc4 : #4d72b8;
+@fc5 : #94e5ff;
+@fc6 : #7a8385;
+@fc7 : #e4ecff;
+
+// 渐变色
+@jbs1: linear-gradient(to right, #16a4dc, #142446);
+@jbs2: linear-gradient(to right, #175dd2, #70d0f4);
+@jbs3: linear-gradient(to right, #42bf54, #cff4d8);
+@jbs4: linear-gradient(to right, #f5d023, #fff7cb);
+@jbs5: linear-gradient(to right, #f1880c, #ffd179);
+@jbs6: linear-gradient(to right, #ff293d, #ff9ea7);
+
+@green          : #05bb4c;
+@gray           : #606769;
+@gray-l         : #000;
+@picker-bg-color: fade(rgb(3, 7, 19), 95);
+
+@primary-color    : #2568c4;
+@border-color     : transparent;
+@text-color       : #fff;
+@placeholder-color: #c0c4cc;
+@disabled-color   : #c0c4cc;
+@disabled-bg      : #000;
+
+.blueStyle {
+    #app {
+        #screen {
+
+            // /generatingCap/dataAnalysis/jjyxReport
+            .analysisReport {
+                .main_top {
+                    background: #fff;
+
+                    .seach {
+                        .el-form-item {
+                            .el-form-item__label {
+                                color: #000;
+                            }
+
+                            .el-input__wrapper {
+                                background: #fff;
+
+                                .el-icon {
+                                    color: #000;
+                                }
+
+                                .el-input__inner {
+                                    color: #000;
+                                }
+                            }
+                        }
+                    }
+                }
+
+                .infoBox {
+                    background: #fff;
+
+                    p {
+                        color: #000;
+
+                        span {
+                            color: #000;
+                        }
+                    }
+                }
+            }
+
+            .warn-table,
+            .df-table {
+
+                .tableData_tit p {
+                    color: #000 !important;
+                }
+
+                .el-table,
+                .custom-table.el-table {
+                    background: rgb(3, 7, 19);
+                    border    : 1px solid rgba(33, 105, 195, 0.5) !important; // 包裹表格父元素边框
+
+                    .el-table__row {
+                        background: transparent; // 表格底色，因表格上层有其他颜色遮挡所以视觉效果看起来仿佛是表格边框
+
+                        & .el-table__cell {
+                            border-bottom: 1px solid rgb(31, 83, 177) !important; // 表格单元格底部边框颜色
+
+                            .el-button {
+                                color: #fff !important;
+
+                                &:active {
+                                    color: #70d0f4 !important;
+                                }
+                            }
+                        }
+
+                        &:hover .cell {
+                            color: rgb(71, 174, 231) !important;
+                        }
+                    }
+
+                    .cell {
+                        .el-table__column-filter-trigger {
+                            svg {
+                                color: #bcd2ff;
+                            }
+                        }
+                    }
+
+                    &.el-table--border::after,
+                    &.el-table--group::after,
+                    &::before {
+                        background-color: transparent;
+                    }
+
+                    tr {
+                        td {
+                            color           : #000;
+                            background-color: #fff; // 表格基数行背景颜色
+                        }
+
+                        &:hover td {
+                            color           : #1890ff; // 表格基数行 hover 文字颜色
+                            background-color: #fff !important; // 表格基数行 hover 背景颜色
+                        }
+                    }
+
+                    td {
+                        border     : 0px; // 表格内部除了最后一行底部以外的上下左右边框
+                        padding    : 0;
+                        height     : 37px;
+                        line-height: 37px;
+                        color      : rgb(194, 225, 255);
+
+                        &.light,
+                        &.always-light {
+                            color: #1890ff !important;
+                        }
+                    }
+
+                    th {
+                        border     : 0px;
+                        padding    : 0px;
+                        height     : 37px;
+                        line-height: 37px;
+                        font-weight: normal;
+                        text-align : center;
+                        color      : rgb(85, 113, 166);
+                        cursor     : pointer;
+
+                        &.is-leaf {
+                            border: 0px;
+                        }
+
+                        &.light,
+                        &.always-light {
+                            color: #1890ff !important;
+                        }
+                    }
+
+                    th,
+                    tr {
+                        background-color: transparent;
+                        border          : 0px;
+                    }
+
+                    thead {
+                        color      : @gray-l;
+                        font-weight: 500;
+                        font-size  : 14px;
+                        border     : 0px;
+
+                        th,
+                        &.is-group th {
+                            &.el-table__cell {
+                                background  : rgb(31, 83, 177) !important;
+                                border-color: transparent !important;
+                                color       : #fff;
+                            }
+                        }
+                    }
+
+                    .el-table__body {
+                        border   : 0px; // 表格最外侧除右边以外边框
+                        font-size: 14px;
+                    }
+
+                    &.el-table--striped .el-table__body tr.el-table__row--striped {
+                        td {
+                            background-color: rgb(250, 250, 250) !important; // 表格偶数行背景颜色
+                        }
+
+                        &:hover td {
+                            color           : #1890ff;
+                            background-color: rgb(250, 250, 250) !important; // 表格偶数行 hover 背景颜色
+                        }
+
+
+                    }
+
+                    &.el-table--border,
+                    &.el-table--group {
+                        border: none;
+                    }
+
+                    .ascending .sort-caret.ascending {
+                        border-bottom-color: rgb(31, 83, 177);
+                    }
+
+                    .descending .sort-caret.descending {
+                        border-top-color: rgb(31, 83, 177);
+                    }
+
+                    .el-table__empty-block {
+                        background: #fff;
+                    }
+                }
+
+                .el-table__expanded-cell {
+                    background: transparent;
+                }
+
+                .el-table__footer-wrapper tbody td {
+                    background: #1a1f2fcc;
+                }
+            }
+
+            .el-table,
+            .custom-table.el-table {
+                background: #fff;
+                border    : 1px solid rgba(33, 105, 195, 0.5) !important; // 包裹表格父元素边框
+
+                .el-table__row {
+                    background: transparent; // 表格底色，因表格上层有其他颜色遮挡所以视觉效果看起来仿佛是表格边框
+
+                    & .el-table__cell {
+                        border-bottom: 1px solid rgb(31, 83, 177) !important; // 表格单元格底部边框颜色
+
+                        .el-button {
+                            color: #fff !important;
+
+                            &:active {
+                                color: #70d0f4 !important;
+                            }
+                        }
+                    }
+
+                    &:hover .cell {
+                        color: rgb(71, 174, 231) !important;
+                    }
+                }
+
+                &.el-table--border::after,
+                &.el-table--group::after,
+                &::before {
+                    background-color: transparent;
+                }
+
+                tr {
+                    td {
+                        color           : #000;
+                        background-color: #fff; // 表格基数行背景颜色
+                    }
+
+                    &:hover td {
+                        color           : #1890ff; // 表格基数行 hover 文字颜色
+                        background-color: #fff !important; // 表格基数行 hover 背景颜色
+                    }
+                }
+
+                td {
+                    border     : 0px; // 表格内部除了最后一行底部以外的上下左右边框
+                    padding    : 0;
+                    height     : 37px;
+                    line-height: 37px;
+                    color      : rgb(194, 225, 255);
+
+                    &.light,
+                    &.always-light {
+                        color: #1890ff !important;
+                    }
+                }
+
+                th {
+                    border     : 0px;
+                    padding    : 0px;
+                    height     : 37px;
+                    line-height: 37px;
+                    font-weight: normal;
+                    text-align : center;
+                    color      : rgb(85, 113, 166);
+                    cursor     : pointer;
+
+                    &.is-leaf {
+                        border: 0px;
+                    }
+
+                    &.light,
+                    &.always-light {
+                        color: #1890ff !important;
+                    }
+                }
+
+                th,
+                tr {
+                    background-color: transparent;
+                    border          : 0px;
+                }
+
+                thead {
+                    color      : @gray-l;
+                    font-weight: 500;
+                    font-size  : 14px;
+                    border     : 0px;
+
+                    th,
+                    &.is-group th {
+                        &.el-table__cell {
+                            background  : rgb(31, 83, 177) !important;
+                            border-color: transparent !important;
+                            color       : #fff;
+                        }
+                    }
+                }
+
+                .el-table__body {
+                    border   : 0px; // 表格最外侧除右边以外边框
+                    font-size: 14px;
+                }
+
+                &.el-table--striped .el-table__body tr.el-table__row--striped {
+                    td {
+                        background-color: rgb(250, 250, 250) !important; // 表格偶数行背景颜色
+                    }
+
+                    &:hover td {
+                        color           : #1890ff;
+                        background-color: rgb(250, 250, 250) !important; // 表格偶数行 hover 背景颜色
+                    }
+
+
+                }
+
+                &.el-table--border,
+                &.el-table--group {
+                    border: none;
+                }
+
+                .ascending .sort-caret.ascending {
+                    border-bottom-color: rgb(31, 83, 177);
+                }
+
+                .descending .sort-caret.descending {
+                    border-top-color: rgb(31, 83, 177);
+                }
+
+                .el-table__empty-block {
+                    background: #fff;
+                }
+            }
+
+            .el-table__expanded-cell {
+                background: transparent;
+            }
+
+            .el-table__footer-wrapper tbody td {
+                background: #1a1f2fcc;
+            }
+        }
+
+        // el-dialog
+        .el-dialog.windLifeDialog,
+        .el-dialog {
+            background: #fff;
+            border    : 1px solid rgba(31, 83, 177, 0.5);
+            box-shadow: 0px 8px 17px 1px rgba(31, 83, 177, 0.3);
+
+            .dialog-title {
+                color: #fff;
+
+                .title {
+                    color: #000;
+                }
+            }
+        }
+
+        .reportDia {
+            #pdfDom {
+                p {
+                    color: #000;
+
+                    span {
+                        color: #000;
+                    }
+                }
+            }
+        }
+
+        .safe {
+            background: #fff;
+
+            .card {
+                background: #fff;
+
+                .safeCom_head {
+                    color: #000;
+                }
+            }
+        }
+
+
+        .history-warning,
+        .custom-warning,
+        .stopQueryBox,
+        .data-search {
+            background: #fff;
+        }
+
+        .pageSty {
+            background: #fff;
+        }
+
+        .data-search {
+
+            .cardleft,
+            .cardright,
+            .card-right {
+                background: rgb(21, 50, 127) !important;
+            }
+        }
+
+        .search-wrapper {
+            .search-item {
+                .label {
+                    color: #000;
+                }
+            }
+        }
+
+        .device-config {
+
+            .box-card-tree,
+            .box-card {
+                background: rgb(21, 50, 127) !important;
+            }
+        }
+
+        .el-tabs {
+            .el-tabs__item {
+                color: #000 !important;
+
+                &.is-active {
+                    color: #1890ff !important;
+                }
+            }
+        }
+
+        .baseInfoTabs {
+            .el-tabs__item {
+                color: #fff !important;
+
+                &.is-active {
+                    color: #1890ff !important;
+                }
+            }
+        }
+
+        .sand-table {
+
+            .com-panel-sand,
+            .p-panel {
+                background: rgba(21, 50, 127, 0.75);
+            }
+
+            .p-panel {
+                .pp-info {
+
+                    .gray,
+                    .gray-l {
+                        color: #fff;
+                    }
+                }
+
+            }
+
+            .sand-table-bottom {
+                right: calc(50% - 527px) !important;
+            }
+        }
+
+        .trees {
+            .el-tree-node__content {
+                color: #000;
+            }
+        }
+
+        .baseInfoBox {
+            .el-form {
+                .el-form-item__label {
+                    color: #fff;
+                }
+            }
+        }
+
+        .el-pagination {
+
+            button.is-disabled,
+            button:disabled {
+                background: transparent;
+
+            }
+
+            .el-pager .number {
+                background: transparent;
+            }
+        }
+
+        .point-popover {
+            .el-popper__arrow {
+                &:before {
+                    border-color      : var(--el-popover-border-color) !important;
+                    border-right-color: transparent !important;
+                    border-top-color  : transparent !important;
+                }
+            }
+        }
+    }
+}

src/themeDark.less

@@ -653,7 +653,7 @@
 
     }
 
-    // el-dialogv
+    // el-dialog
     .el-dialog.currentDialog,
     .el-dialog[custom-class="windLifeDialog"] {
         background: rgba(3, 7, 19, 0.95);
@@ -940,13 +940,23 @@
     .el-pagination {
 
         button.is-disabled,
-        button:disabled {
+        button:disabled,
+        button.btn-next {
             background: transparent;
 
         }
 
         .el-pager .number {
+            color     : #fff;
             background: transparent;
+
+            &:hover {
+                color: #1890ff;
+            }
+        }
+
+        button.btn-next {
+            color: #fff;
         }
     }
 
@@ -959,4 +969,22 @@
             }
         }
     }
+
+    .sand-table-bottom {
+        right: calc(50% - 527px) !important;
+    }
+
+    .currentFilter {
+        background: #030713;
+
+        .el-checkbox__label {
+            color: #fff;
+        }
+
+        .el-table-filter__bottom {
+            button:not(.is-disabled) {
+                color: #fff;
+            }
+        }
+    }
 }

src/views/IntegratedAlarm/alarmConfig/customConfig/index.vue

@@ -179,7 +179,9 @@
           <template #default="scope">
             <el-button
               type="text"
-              style="color: #05bb4c"
+              :style="`color: ${
+                $store.state.theme ? '#1890ff' : '#47aee7'
+              } !important`"
               size="mini"
               @click="handleEditClick(scope.row)"
               >编辑</el-button
@@ -2121,7 +2123,7 @@ const enabledConvert = (val) => {
   }
 }
 
-.pagination{
+.pagination {
   margin-top: 15px;
 }
 </style>

src/views/IntegratedAlarm/alarmConfig/historyConfig/index.vue

@@ -136,7 +136,9 @@
           <template #default="scope">
             <el-button
               type="text"
-              style="color: #05bb4c"
+              :style="`color: ${
+                $store.state.theme ? '#1890ff' : '#47aee7'
+              } !important`"
               size="mini"
               @click="handleEditClick(scope.row)"
             >
@@ -1232,7 +1234,7 @@ const relatePartConvert = (val) => {
   }
 }
 
-.pagination{
+.pagination {
   margin-top: 15px;
 }
 

src/views/IntegratedAlarm/deviceConfig/components/custom.vue

@@ -186,7 +186,9 @@
       <el-table-column label="操作" align="center" width="80">
         <template #default="scope">
           <el-button
-            style="color: #05bb4c"
+            :style="`color: ${
+              $store.state.theme ? '#1890ff' : '#47aee7'
+            } !important`"
             type="text"
             icon="el-icon-lx-edit"
             :disabled="scope.row.range == 1"

src/views/IntegratedAlarm/deviceConfig/components/faultmode.vue

@@ -65,13 +65,15 @@
         <template #default="scope">
           <el-button
             type="text"
-            style="color: #05bb4c"
+            :style="`color: ${
+              $store.state.theme ? '#1890ff' : '#47aee7'
+            } !important`"
             @click="handleEdit(scope.row)"
             >编辑</el-button
           >
           <el-button
             type="text"
-            style="color: red"
+            :style="`color: #f25656 !important`"
             @click="handleDelete(scope.row)"
             >删除</el-button
           >

src/views/IntegratedAlarm/deviceConfig/components/message.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="width: 50%">
+  <div style="width: 50%" class="baseInfoBox">
     <el-form :model="desc" label-width="100px">
       <el-form-item label="结构编码">
         <el-input v-model="desc.code"></el-input>
@@ -40,15 +40,21 @@
         <div style="height: 100%; display: flex; align-items: center">
           <el-switch
             v-model="desc.enabled"
-            :active-color="$store.state.moreSty === 'greenSty' ? '#13ce66' : '#2169c3'"
+            :active-color="
+              $store.state.moreSty === 'greenSty' ? '#13ce66' : '#2169c3'
+            "
             inactive-color="#ff4949"
           />
         </div>
       </el-form-item>
     </el-form>
     <el-button
-      style="float: right;border: none"
-      :style="$store.state.moreSty === 'greenSty' ? 'background: #05bb4c;' : 'background: #2169c3;'"
+      style="float: right; border: none"
+      :style="
+        $store.state.moreSty === 'greenSty'
+          ? 'background: #05bb4c;'
+          : 'background: #2169c3;'
+      "
       @click="savedesc"
       :disabled="desc.code == ''"
       >保存</el-button

src/views/IntegratedAlarm/deviceConfig/components/windturbine.vue

@@ -120,7 +120,9 @@
           <template #default="scope">
             <el-button
               type="text"
-              style="color: #05bb4c"
+              :style="`color: ${
+                $store.state.theme ? '#1890ff' : '#47aee7'
+              } !important`"
               icon="el-icon-lx-edit"
               @click="handleEditClick(scope.row)"
             >

src/views/IntegratedAlarm/deviceConfig/components/ycpoint.vue

@@ -86,9 +86,14 @@
             trigger="click"
           >
             <template #reference>
-              <el-button type="text" style="color: #05bb4c" size="small">{{
-                scope.row.name
-              }}</el-button>
+              <el-button
+                type="text"
+                :style="`color: ${
+                  $store.state.theme ? '#1890ff' : '#47aee7'
+                } !important`"
+                size="small"
+                >{{ scope.row.name }}</el-button
+              >
             </template>
             <el-table
               size="mini"
@@ -129,13 +134,15 @@
         <template #default="scope">
           <el-button
             type="text"
-            style="color: #05bb4c"
+            :style="`color: ${
+              $store.state.theme ? '#1890ff' : '#47aee7'
+            } !important`"
             @click="handleEdit(scope.row)"
             >编辑</el-button
           >
           <el-button
             type="text"
-            style="color: red"
+            :style="`color: #f25656 !important`"
             @click="handleDelete(scope.row)"
             >删除</el-button
           >
@@ -898,7 +905,7 @@ const export2Excel = async () => {
   height: calc(100% - 39px);
 }
 
-.pagination{
+.pagination {
   margin-top: 15px;
 }
 </style>

src/views/IntegratedAlarm/deviceConfig/components/yxpoint.vue

@@ -60,7 +60,9 @@
             <template #reference>
               <el-button
                 type="text"
-                style="color: #05bb4c"
+                :style="`color: ${
+                  $store.state.theme ? '#1890ff' : '#47aee7'
+                } !important`"
                 size="small"
                 @click="handleClick(scope)"
                 >{{ scope.row.name }}</el-button
@@ -104,13 +106,15 @@
         <template #default="scope">
           <el-button
             type="text"
-            style="color: #05bb4c"
+            :style="`color: ${
+              $store.state.theme ? '#1890ff' : '#47aee7'
+            } !important`"
             @click="handleEdit(scope.row)"
             >编辑</el-button
           >
           <el-button
             type="text"
-            style="color: red"
+            :style="`color: #f25656 !important`"
             @click="handleDelete(scope.row)"
             >删除</el-button
           >

src/views/IntegratedAlarm/deviceConfig/index.vue

@@ -30,7 +30,7 @@
           />
         </div>
       </div>
-      <div class="box-card">
+      <div class="box-card baseInfoTabs">
         <el-tabs type="card">
           <el-tab-pane label="遥测点">
             <ycpoint />

src/views/IntegratedAlarm/reliability/customAnalyse/index.vue

@@ -732,6 +732,7 @@ const compare = function (property) {
       font-weight: 400;
       color: #b3b3b3;
       margin-bottom: 10px;
+      margin-left: 20px;
       .search-item {
         display: flex;
         margin-right: 10px;

src/views/IntegratedAlarm/reliability/historyAnalyse/index.vue

@@ -733,6 +733,7 @@ const compare = function (property) {
       font-weight: 400;
       color: #b3b3b3;
       margin-bottom: 10px;
+      margin-left: 20px;
       .search-item {
         display: flex;
         margin-right: 10px;

src/views/IntegratedAlarm/safe/customWarning/index.vue

@@ -230,7 +230,9 @@
           >
             <template #default="scope">
               <el-button
-                style="color: #05bb4c"
+                :style="`color: ${
+                  $store.state.theme ? '#1890ff' : '#47aee7'
+                } !important`"
                 type="text"
                 @click="confirmItem([scope.row])"
                 >确认本条</el-button
@@ -732,7 +734,7 @@ p {
   margin: 0;
 }
 .custom-warning {
-  height: calc(100% - 40px);;
+  height: calc(100% - 40px);
   padding: 0 20px;
   padding-bottom: 10px;
   .form-wrapper ::v-deep {

src/views/IntegratedAlarm/safe/dataSearch/index.vue

@@ -116,11 +116,13 @@
               {{ scope.row.unitNameCn ? `(${scope.row.unitNameCn})` : "--" }}
             </template>
           </el-table-column>
-          <el-table-column width="100" align="center">
+          <el-table-column label="操作" width="100" align="center">
             <template #default="scope">
               <el-button
                 type="text"
-                style="color: #05bb4c"
+                :style="`color: ${
+                  $store.state.theme ? '#1890ff' : '#47aee7'
+                } !important`"
                 size="mini"
                 @click="handleSearch(scope.row)"
                 >历史数据</el-button

src/views/IntegratedAlarm/safe/historyWarning/index.vue

@@ -227,7 +227,9 @@
             <template #default="scope">
               <el-button
                 type="text"
-                style="color: #05bb4c"
+                :style="`color: ${
+                  $store.state.theme ? '#1890ff' : '#47aee7'
+                } !important`"
                 @click="confirmItem([scope.row])"
                 >确认本条</el-button
               >

src/views/generatingCapacity/dataAnalysis/agcAnalysis/components/current-scatter-chart.json

@@ -1,398 +1,387 @@
-
 {
-	"color": [
-			"#1C99FF",
-			"#FF8700",
-			"#e6b600d9",
-			"#0098d9",
-			"#3D54BE",
-			"#005eaa",
-			"#cda819",
-			"#32a487"
-	],
 	"textStyle": {},
 	"title": {
-			"textStyle": {
-					"color": "#333333"
-			},
-			"subtextStyle": {
-					"color": "#aaaaaa"
-			}
+		"textStyle": {
+			"color": "#333333"
+		},
+		"subtextStyle": {
+			"color": "#aaaaaa"
+		}
 	},
 	"line": {
-			"itemStyle": {
-					"borderWidth": 1
-			},
-			"lineStyle": {
-					"width": 2
-			},
-			"symbolSize": 4,
-			"symbol": "emptyCircle",
-			"smooth": false
+		"itemStyle": {
+			"borderWidth": 1
+		},
+		"lineStyle": {
+			"width": 2
+		},
+		"symbolSize": 4,
+		"symbol": "emptyCircle",
+		"smooth": false
 	},
 	"radar": {
-			"itemStyle": {
-					"borderWidth": 1
-			},
-			"lineStyle": {
-					"width": 2
-			},
-			"symbolSize": 4,
-			"symbol": "emptyCircle",
-			"smooth": false
+		"itemStyle": {
+			"borderWidth": 1
+		},
+		"lineStyle": {
+			"width": 2
+		},
+		"symbolSize": 4,
+		"symbol": "emptyCircle",
+		"smooth": false
 	},
 	"bar": {
-			"itemStyle": {
-					"barBorderWidth": 0,
-					"barBorderColor": "#ccc"
-			}
+		"itemStyle": {
+			"barBorderWidth": 0,
+			"barBorderColor": "#ccc"
+		}
 	},
 	"pie": {
-			"itemStyle": {
-					"borderWidth": 0,
-					"borderColor": "#ccc"
-			}
+		"itemStyle": {
+			"borderWidth": 0,
+			"borderColor": "#ccc"
+		}
 	},
 	"scatter": {
-			"itemStyle": {
-					"borderWidth": 0,
-					"borderColor": "#ccc"
-			}
+		"itemStyle": {
+			"borderWidth": 0,
+			"borderColor": "#ccc"
+		}
 	},
 	"boxplot": {
-			"itemStyle": {
-					"borderWidth": 0,
-					"borderColor": "#ccc"
-			}
+		"itemStyle": {
+			"borderWidth": 0,
+			"borderColor": "#ccc"
+		}
 	},
 	"parallel": {
-			"itemStyle": {
-					"borderWidth": 0,
-					"borderColor": "#ccc"
-			}
+		"itemStyle": {
+			"borderWidth": 0,
+			"borderColor": "#ccc"
+		}
 	},
 	"sankey": {
-			"itemStyle": {
-					"borderWidth": 0,
-					"borderColor": "#ccc"
-			}
+		"itemStyle": {
+			"borderWidth": 0,
+			"borderColor": "#ccc"
+		}
 	},
 	"funnel": {
-			"itemStyle": {
-					"borderWidth": 0,
-					"borderColor": "#ccc"
-			}
+		"itemStyle": {
+			"borderWidth": 0,
+			"borderColor": "#ccc"
+		}
 	},
 	"gauge": {
-			"itemStyle": {
-					"borderWidth": 0,
-					"borderColor": "#ccc"
-			}
+		"itemStyle": {
+			"borderWidth": 0,
+			"borderColor": "#ccc"
+		}
 	},
 	"candlestick": {
-			"itemStyle": {
-					"color": "#c12e34",
-					"color0": "#2b821d",
-					"borderColor": "#c12e34",
-					"borderColor0": "#2b821d",
-					"borderWidth": 1
-			}
+		"itemStyle": {
+			"color": "#c12e34",
+			"color0": "#2b821d",
+			"borderColor": "#c12e34",
+			"borderColor0": "#2b821d",
+			"borderWidth": 1
+		}
 	},
 	"graph": {
-			"itemStyle": {
-					"borderWidth": 0,
-					"borderColor": "#ccc"
-			},
-			"lineStyle": {
-					"width": 1,
-					"color": "#aaaaaa"
-			},
-			"symbolSize": 4,
-			"symbol": "emptyCircle",
-			"smooth": false,
-			"color": [
-					"#c12e34",
-					"#e6b600",
-					"#0098d9",
-					"#50ec39",
-					"#005eaa",
-					"#339ca8",
-					"#cda819",
-					"#32a487"
-			],
-			"label": {
-					"color": "#eeeeee"
-			}
+		"itemStyle": {
+			"borderWidth": 0,
+			"borderColor": "#ccc"
+		},
+		"lineStyle": {
+			"width": 1,
+			"color": "#aaaaaa"
+		},
+		"symbolSize": 4,
+		"symbol": "emptyCircle",
+		"smooth": false,
+		"color": [
+			"#c12e34",
+			"#e6b600",
+			"#0098d9",
+			"#50ec39",
+			"#005eaa",
+			"#339ca8",
+			"#cda819",
+			"#32a487"
+		],
+		"label": {
+			"color": "#eeeeee"
+		}
 	},
 	"map": {
+		"itemStyle": {
+			"areaColor": "#ddd",
+			"borderColor": "#eee",
+			"borderWidth": 0.5
+		},
+		"label": {
+			"color": "#c12e34"
+		},
+		"emphasis": {
 			"itemStyle": {
-					"areaColor": "#ddd",
-					"borderColor": "#eee",
-					"borderWidth": 0.5
+				"areaColor": "#e6b600",
+				"borderColor": "#ddd",
+				"borderWidth": 1
 			},
 			"label": {
-					"color": "#c12e34"
-			},
-			"emphasis": {
-					"itemStyle": {
-							"areaColor": "#e6b600",
-							"borderColor": "#ddd",
-							"borderWidth": 1
-					},
-					"label": {
-							"color": "#c12e34"
-					}
+				"color": "#c12e34"
 			}
+		}
 	},
 	"geo": {
+		"itemStyle": {
+			"areaColor": "#ddd",
+			"borderColor": "#eee",
+			"borderWidth": 0.5
+		},
+		"label": {
+			"color": "#c12e34"
+		},
+		"emphasis": {
 			"itemStyle": {
-					"areaColor": "#ddd",
-					"borderColor": "#eee",
-					"borderWidth": 0.5
+				"areaColor": "#e6b600",
+				"borderColor": "#ddd",
+				"borderWidth": 1
 			},
 			"label": {
-					"color": "#c12e34"
-			},
-			"emphasis": {
-					"itemStyle": {
-							"areaColor": "#e6b600",
-							"borderColor": "#ddd",
-							"borderWidth": 1
-					},
-					"label": {
-							"color": "#c12e34"
-					}
+				"color": "#c12e34"
 			}
+		}
 	},
 	"categoryAxis": {
-			"axisLine": {
-					"show": true,
-					"lineStyle": {
-							"color": "#838383"
-					}
-			},
-			"axisTick": {
-					"show": true,
-					"lineStyle": {
-							"color": "#838383"
-					}
-			},
-			"axisLabel": {
-					"show": true,
-					"color": "#838383"
-			},
-			"splitLine": {
-					"show": false,
-					"lineStyle": {
-							"color": [
-									"#838383"
-							]
-					}
-			},
-			"splitArea": {
-					"show": false,
-					"areaStyle": {
-							"color": [
-									"rgba(250,250,250,0.3)",
-									"rgba(200,200,200,0.3)"
-							]
-					}
+		"axisLine": {
+			"show": true,
+			"lineStyle": {
+				"color": "#838383"
+			}
+		},
+		"axisTick": {
+			"show": true,
+			"lineStyle": {
+				"color": "#838383"
+			}
+		},
+		"axisLabel": {
+			"show": true,
+			"color": "#838383"
+		},
+		"splitLine": {
+			"show": false,
+			"lineStyle": {
+				"color": [
+					"#838383"
+				]
 			}
+		},
+		"splitArea": {
+			"show": false,
+			"areaStyle": {
+				"color": [
+					"rgba(250,250,250,0.3)",
+					"rgba(200,200,200,0.3)"
+				]
+			}
+		}
 	},
 	"valueAxis": {
-			"axisLine": {
-					"show": true,
-					"lineStyle": {
-							"color": "#838383"
-					}
-			},
-			"axisTick": {
-					"show": true,
-					"lineStyle": {
-							"color": "#838383"
-					}
-			},
-			"axisLabel": {
-					"show": true,
-					"color": "#838383"
-			},
-			"splitLine": {
-					"show": true,
-					"lineStyle": {
-							"color": [
-									"#ccc"
-							]
-					}
-			},
-			"splitArea": {
-					"show": false,
-					"areaStyle": {
-							"color": [
-									"rgba(250,250,250,0.3)",
-									"rgba(200,200,200,0.3)"
-							]
-					}
+		"axisLine": {
+			"show": true,
+			"lineStyle": {
+				"color": "#838383"
+			}
+		},
+		"axisTick": {
+			"show": true,
+			"lineStyle": {
+				"color": "#838383"
+			}
+		},
+		"axisLabel": {
+			"show": true,
+			"color": "#838383"
+		},
+		"splitLine": {
+			"show": true,
+			"lineStyle": {
+				"color": [
+					"#ccc"
+				]
+			}
+		},
+		"splitArea": {
+			"show": false,
+			"areaStyle": {
+				"color": [
+					"rgba(250,250,250,0.3)",
+					"rgba(200,200,200,0.3)"
+				]
 			}
+		}
 	},
 	"logAxis": {
-			"axisLine": {
-					"show": true,
-					"lineStyle": {
-							"color": "#333"
-					}
-			},
-			"axisTick": {
-					"show": true,
-					"lineStyle": {
-							"color": "#333"
-					}
-			},
-			"axisLabel": {
-					"show": true,
-					"color": "#333"
-			},
-			"splitLine": {
-					"show": true,
-					"lineStyle": {
-							"color": [
-									"#ccc"
-							]
-					}
-			},
-			"splitArea": {
-					"show": false,
-					"areaStyle": {
-							"color": [
-									"rgba(250,250,250,0.3)",
-									"rgba(200,200,200,0.3)"
-							]
-					}
+		"axisLine": {
+			"show": true,
+			"lineStyle": {
+				"color": "#333"
+			}
+		},
+		"axisTick": {
+			"show": true,
+			"lineStyle": {
+				"color": "#333"
+			}
+		},
+		"axisLabel": {
+			"show": true,
+			"color": "#333"
+		},
+		"splitLine": {
+			"show": true,
+			"lineStyle": {
+				"color": [
+					"#ccc"
+				]
 			}
+		},
+		"splitArea": {
+			"show": false,
+			"areaStyle": {
+				"color": [
+					"rgba(250,250,250,0.3)",
+					"rgba(200,200,200,0.3)"
+				]
+			}
+		}
 	},
 	"timeAxis": {
-			"axisLine": {
-					"show": true,
-					"lineStyle": {
-							"color": "#838383"
-					}
-			},
-			"axisTick": {
-					"show": true,
-					"lineStyle": {
-							"color": "#838383"
-					}
-			},
-			"axisLabel": {
-					"show": true,
-					"color": "#838383"
-			},
-			"splitLine": {
-					"show": true,
-					"lineStyle": {
-							"color": [
-									"#838383"
-							]
-					}
-			},
-			"splitArea": {
-					"show": false,
-					"areaStyle": {
-							"color": [
-									"rgba(250,250,250,0.3)",
-									"rgba(200,200,200,0.3)"
-							]
-					}
+		"axisLine": {
+			"show": true,
+			"lineStyle": {
+				"color": "#838383"
+			}
+		},
+		"axisTick": {
+			"show": true,
+			"lineStyle": {
+				"color": "#838383"
+			}
+		},
+		"axisLabel": {
+			"show": true,
+			"color": "#838383"
+		},
+		"splitLine": {
+			"show": true,
+			"lineStyle": {
+				"color": [
+					"#838383"
+				]
+			}
+		},
+		"splitArea": {
+			"show": false,
+			"areaStyle": {
+				"color": [
+					"rgba(250,250,250,0.3)",
+					"rgba(200,200,200,0.3)"
+				]
 			}
+		}
 	},
 	"toolbox": {
+		"iconStyle": {
+			"borderColor": "#06467c"
+		},
+		"emphasis": {
 			"iconStyle": {
-					"borderColor": "#06467c"
-			},
-			"emphasis": {
-					"iconStyle": {
-							"borderColor": "#4187c2"
-					}
-			},
-			"textStyle": {
-				"color": "#838383"
+				"borderColor": "#4187c2"
 			}
+		},
+		"textStyle": {
+			"color": "#838383"
+		}
 	},
 	"legend": {
-			"textStyle": {
-					"color": "#838383"
-			}
+		"textStyle": {
+			"color": "#838383"
+		}
 	},
 	"tooltip": {
-			"axisPointer": {
-					"lineStyle": {
-							"color": "#cccccc",
-							"width": 1
-					},
-					"crossStyle": {
-							"color": "#cccccc",
-							"width": 1
-					}
+		"axisPointer": {
+			"lineStyle": {
+				"color": "#cccccc",
+				"width": 1
+			},
+			"crossStyle": {
+				"color": "#cccccc",
+				"width": 1
 			}
+		}
 	},
 	"timeline": {
-			"lineStyle": {
-					"color": "#005eaa",
-					"width": 1
-			},
+		"lineStyle": {
+			"color": "#005eaa",
+			"width": 1
+		},
+		"itemStyle": {
+			"color": "#005eaa",
+			"borderWidth": 1
+		},
+		"controlStyle": {
+			"color": "#005eaa",
+			"borderColor": "#005eaa",
+			"borderWidth": 0.5
+		},
+		"checkpointStyle": {
+			"color": "#005eaa",
+			"borderColor": "#316bc2"
+		},
+		"label": {
+			"color": "#005eaa"
+		},
+		"emphasis": {
 			"itemStyle": {
-					"color": "#005eaa",
-					"borderWidth": 1
+				"color": "#005eaa"
 			},
 			"controlStyle": {
-					"color": "#005eaa",
-					"borderColor": "#005eaa",
-					"borderWidth": 0.5
-			},
-			"checkpointStyle": {
-					"color": "#005eaa",
-					"borderColor": "#316bc2"
+				"color": "#005eaa",
+				"borderColor": "#005eaa",
+				"borderWidth": 0.5
 			},
 			"label": {
-					"color": "#005eaa"
-			},
-			"emphasis": {
-					"itemStyle": {
-							"color": "#005eaa"
-					},
-					"controlStyle": {
-							"color": "#005eaa",
-							"borderColor": "#005eaa",
-							"borderWidth": 0.5
-					},
-					"label": {
-							"color": "#005eaa"
-					}
+				"color": "#005eaa"
 			}
+		}
 	},
 	"visualMap": {
-			"color": [
-					"#1790cf",
-					"#a2d4e6"
-			]
+		"color": [
+			"#1790cf",
+			"#a2d4e6"
+		]
 	},
 	"dataZoom": {
-			"backgroundColor": "rgba(47,69,84,0)",
-			"dataBackgroundColor": "rgba(47,69,84,0.3)",
-			"fillerColor": "rgba(167,183,204,0.4)",
-			"handleColor": "#a7b7cc",
-			"handleSize": "100%",
-			"textStyle": {
-					"color": "#333333"
-			}
+		"backgroundColor": "rgba(47,69,84,0)",
+		"dataBackgroundColor": "rgba(47,69,84,0.3)",
+		"fillerColor": "rgba(167,183,204,0.4)",
+		"handleColor": "#a7b7cc",
+		"handleSize": "100%",
+		"textStyle": {
+			"color": "#333333"
+		}
 	},
 	"markPoint": {
+		"label": {
+			"color": "#eeeeee"
+		},
+		"emphasis": {
 			"label": {
-					"color": "#eeeeee"
-			},
-			"emphasis": {
-					"label": {
-							"color": "#eeeeee"
-					}
+				"color": "#eeeeee"
 			}
+		}
 	}
-}
+}

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

@@ -1,349 +1,475 @@
 <template>
-    <div class="chart" :id="id"></div>
+  <div class="chart" :id="id" :style="`width:${width}; height:${height}`"></div>
 </template>
 
 <script>
-    import util from "@tools/util";
-    import partten from "@tools/partten";
-    import * as echarts from "echarts";
-    import chartTheme from './current-scatter-chart.json'
+import util from "@tools/util";
+import partten from "@tools/partten";
+import * as echarts from "echarts";
+import chartTheme from "./current-scatter-chart.json";
 
-    export default {
-        name: 'currentScatterChart',
-        props: {
-            // 图表宽度
-            width: {
-                type: String,
-                default: "100%",
+export default {
+  name: "currentScatterChart",
+  props: {
+    // 图表宽度
+    width: {
+      type: String,
+      default: "100%",
+    },
+    // 图表高度
+    height: {
+      type: String,
+      default: "350px",
+    },
+    // 图表主标题
+    chartTitle: {
+      type: String,
+      default: "自定义图表组件",
+    },
+    // X 轴配置项
+    xAxisData: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    // Y 轴配置项
+    yAxisData: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    dataSet: {
+      type: String,
+      default: "",
+    },
+    // 图表核心数据
+    seriesData: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    // 是否显示图表图例
+    showLegend: {
+      type: Boolean,
+      default: true,
+    },
+    // 是否默认采用笔刷模式
+    brushSelected: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+      theme: "light",
+      color: [],
+      linearGradientColor: [],
+      chartData: [],
+      markItem: {},
+    };
+  },
+  computed: {
+    collapse() {
+      return this.$store.state.collapse;
+    },
+  },
+  watch: {
+    height() {
+      if (this.chart) {
+        this.chart.resize();
+      }
+    },
+    collapse(val) {
+      if (this.chart) {
+        setTimeout(() => {
+          this.chart.resize();
+        }, 300);
+      }
+    },
+  },
+  methods: {
+    resize() {},
+    initChart(markItem = {}) {
+      const that = this;
+      document.getElementById(this.id).removeAttribute("_echarts_instance_");
+      that.chart = null;
+      const theme = sessionStorage.getItem("theme") === "true" ? true : false;
+
+      this.$nextTick(() => {
+        that.chartData.forEach((ele) => {
+          if (ele.name === "偏差上限") {
+            ele.areaStyle = that.linearGradientColor[0];
+          } else if (ele.name === "偏差下限") {
+            ele.areaStyle = that.linearGradientColor[1];
+          }
+          if (ele.name === "实发有功" && markItem.res) {
+            this.markItem = markItem;
+            ele.markPoint = {
+              symbolSize: 36,
+              itemStyle: {
+                color: "#f60", // 特殊颜色
+              },
+              emphasis: {
+                itemStyle: {
+                  color: "#fff",
+                },
+              },
+              blur: {
+                itemStyle: {
+                  opacity: 1,
+                },
+              },
+              data: [
+                {
+                  name: `${markItem.date} 异常点`,
+                  value: ele.data[markItem.dataIndex],
+                  xAxis: markItem.dataIndex, // 使用索引作为 x 坐标
+                  yAxis: ele.data[markItem.dataIndex], // 使用实际值作为 y 坐标
+                  label: {
+                    formatter: markItem.res,
+                    position: "top",
+                  },
+                },
+              ],
+            };
+          }
+        });
+        let myChart = echarts.init(document.getElementById(this.id));
+        that.chart = myChart;
+        //指定图表的配置项和数据
+        const option = {
+          //标题
+          title: {
+            text: that.chartTitle,
+            right: 440,
+            top: 4,
+            textStyle: {
+              fontSize: 14,
+              color: theme ? "#000" : "#fff",
             },
-            // 图表高度
-            height: {
-                type: String,
-                default: "350px",
+          },
+          //工具箱
+          toolbox: {
+            show: false,
+            x: "right",
+            position: [10, 10],
+            // backgroundColor:'rgba(0,0,0,0.4)',
+            borderColor: theme ? "#000" : "#fff",
+            textStyle: {
+              fontSize: util.vh(16),
+              color: theme ? "#000" : "#fff",
             },
-            // 图表主标题
-            chartTitle: {
-                type: String,
-                default: "自定义图表组件",
+            iconStyle: {
+              borderColor: theme ? "#000" : "#fff",
             },
-            // X 轴配置项
-            xAxisData: {
-                type: Array,
-                default: () => {
-                    return [];
-                },
+            emphasis: {
+              iconStyle: {
+                borderColor: theme ? "#000" : "#fff",
+              },
             },
-            // Y 轴配置项
-            yAxisData: {
-                type: Array,
-                default: () => {
-                    return [];
-                },
+          },
+          tooltip: {
+            trigger: "axis",
+            axisPointer: {
+              type: "cross",
             },
-            dataSet: {
-                type: String,
-                default: ''
+            formatter(data) {
+              let label = ``;
+              data.forEach((ele, index) => {
+                label += `<p>
+                              <span style="background:${
+                                that.color[index]
+                              };margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:50%;over-flow:hidden;"></span>
+                              <span>${
+                                ele.seriesName
+                              }:<span style="font-weight: 700;margin-left:10px">${
+                  ele.value || 0
+                }</span></span>
+                            </p>`;
+              });
+              return label;
             },
-            // 图表核心数据
-            seriesData: {
-                type: Array,
-                default: () => {
-                    return [];
-                },
+          },
+          brush: {
+            seriesIndex: [2, 3],
+            yAxisIndex: 0,
+            transformable: true,
+            throttleType: "debounce",
+            throttleDelay: 1000,
+            removeOnClick: true,
+            brushType: "polygon",
+            brushMode: "multiple",
+            brushStyle: {
+              borderWidth: 1,
+              borderColor: "#ff2424",
             },
-            // 是否显示图表图例
-            showLegend: {
-                type: Boolean,
-                default: true,
+          },
+          dataZoom: [
+            {
+              type: "inside", //图表下方的伸缩条
+              show: false, //是否显示
+              realtime: true, //拖动时，是否实时更新系列的视图
+              start: 0, //伸缩条开始位置（1-100），可以随时更改
+              end: 100, //伸缩条结束位置（1-100），可以随时更改
             },
-            // 是否默认采用笔刷模式
-            brushSelected: {
-                type: Boolean,
-                default: false,
+            {
+              type: "slider", //图表下方的伸缩条
+              show: false, //是否显示
+              realtime: true, //拖动时，是否实时更新系列的视图
+              start: 0, //伸缩条开始位置（1-100），可以随时更改
+              end: 100, //伸缩条结束位置（1-100），可以随时更改
             },
-        },
-        data() {
-            return {
-                id: "",
-                chart: null,
-                color: [
-                    "#05bb4c",
-                    "#4b55ae",
-                    "#fa8c16",
-                    "#f8de5b",
-                    "#1a93cf",
-                    "#c531c7",
-                    "#bd3338",
-                ],
-                theme: 'light'
-            };
-        },
-        computed: {
-            collapse() {
-                return this.$store.state.collapse
-            }
-        },
-        watch: {
-            height() {
-                if (this.chart) {
-                    this.chart.resize()
-                }
+          ],
+          textStyle: {
+            fontSize: util.vh(16),
+            color: theme ? "#fff" : "#000",
+          },
+          //图例-每一条数据的名字
+          legend: {
+            show: that.showLegend,
+            // right: 170,
+            right: 70,
+            type: "scroll",
+            top: "5",
+            // icon: "circle",
+            itemWidth: 6,
+            inactiveColor: theme ? "#000" : "#fff",
+            textStyle: {
+              color: theme ? "#000" : "#fff",
+              fontSize: 12,
             },
-            collapse(val) {
-                if (this.chart) {
-                    setTimeout(() => {
-                        this.chart.resize()
-                    }, 300)
-                }
-            }
-        },
-        methods: {
-            resize() {},
-            initChart() {
-                const that = this;
-                echarts.registerTheme('chartTheme', chartTheme)
-                let myChart = echarts.init(document.getElementById(this.id), 'chartTheme');
-                that.chart = myChart
-                //指定图表的配置项和数据
-                const option = {
-                    //标题
-                    title: {
-                        text: that.chartTitle,
-                        right: 440,
-                        top: 4,
-                        textStyle: {
-                            fontSize: 14,
-                            color: that.theme === "dark" ? partten.getColor("grayl") : "#000",
-                        },
-                    },
-                    // backgroundColor:
-                    //   that.theme === "dark"
-                    //     ? "rgba(0,0,0,0.4)"
-                    //     : "rgba(255,255,255,0.5)",
-                    //工具箱
-                    color: [
-                        "#0098d9",
-                        "rgb(255,0,0)",
-                        "#0a4468",
-                        "#a9e3f199",
-                        "#a9e3f199",
-                        "#005eaa",
-                        "#cda819",
-                        "#32a487"
-                    ],
-                    toolbox: {
-                        show: false,
-                        x: "right",
-                        position: [10, 10],
-                        // backgroundColor:'rgba(0,0,0,0.4)',
-                        borderColor: partten.getColor("gray"),
-                        textStyle: {
-                            fontSize: util.vh(16),
-                            color: partten.getColor("gray")
-                        },
-                        iconStyle: {
-                            borderColor: partten.getColor("gray")
-                        },
-                        emphasis: {
-                            iconStyle: {
-                                borderColor: partten.getColor("gray")
-                            },
-                        },
-                    },
-                    tooltip: {
-                        trigger: "axis",
-                        axisPointer: {
-                            type: "cross",
-                        },
-                        // backgroundColor: "rgba(0,0,0,0.4)",
-                        // borderColor: partten.getColor("gray"),
-                        // textStyle: {
-                        //   fontSize: util.vh(16),
-                        //   color: partten.getColor("gray"),
-                        // },
-                        // formatter(params) {
-                        //   return params.value?.x
-                        //     ? `${params.seriesName}<br />风速：${params.value.x}m/s<br />功率：${params.value.y}kW`
-                        //     : `${params.name}`;
-                        // },
-                    },
-                    brush: {
-                        seriesIndex: [2, 3],
-                        yAxisIndex: 0,
-                        transformable: true,
-                        throttleType: "debounce",
-                        throttleDelay: 1000,
-                        removeOnClick: true,
-                        brushType: "polygon",
-                        brushMode: "multiple",
-                        brushStyle: {
-                            borderWidth: 1,
-                            borderColor: "#ff2424",
-                        },
-                    },
-                    dataZoom: [{
-                            type: "inside", //图表下方的伸缩条
-                            show: false, //是否显示
-                            realtime: true, //拖动时，是否实时更新系列的视图
-                            start: 0, //伸缩条开始位置（1-100），可以随时更改
-                            end: 100, //伸缩条结束位置（1-100），可以随时更改
-                        },
-                        {
-                            type: "slider", //图表下方的伸缩条
-                            show: false, //是否显示
-                            realtime: true, //拖动时，是否实时更新系列的视图
-                            start: 0, //伸缩条开始位置（1-100），可以随时更改
-                            end: 100, //伸缩条结束位置（1-100），可以随时更改
-                        },
-                    ],
-                    textStyle: {
-                        fontSize: util.vh(16),
-                        color: that.theme === "dark" ? "#fff" : "#000",
-                    },
-                    //图例-每一条数据的名字
-                    legend: {
-                        show: that.showLegend,
-                        // data: [ "拟合功率", "保证功率","无用点", "有用点", "Cp值"],
-                        right: 170,
-                        type: 'scroll',
-                        top: "5",
-                        // icon: "circle",
-                        itemWidth: 6,
-                        inactiveColor: that.theme === "dark" ?
-                            partten.getColor("gray") :
-                            "#000",
-                        textStyle: {
-                            color: that.theme === "dark" ?
-                                partten.getColor("grayl") :
-                                "#000",
-                            fontSize: 12,
-                        },
+          },
+          grid: {
+            top: 58,
+            left: 40,
+            right: 48,
+            bottom: 24,
+          },
+          //x轴
+          xAxis: [
+            {
+              name: "时间",
+              nameTextStyle: {
+                color: theme ? "#000" : "#fff",
+              },
+              type: "category",
+              boundaryGap: true,
+              data: that.xAxisData || [],
+              axisLabel: {
+                formatter: "{value}",
+                color: theme ? "#000" : "#fff",
+              },
+              splitLine: {
+                show: false,
+              },
+              smooth: true,
+              textStyle: {
+                color: theme ? "#000" : "#fff",
+              },
+            },
+          ],
+          //y轴没有显式设置，根据值自动生成y轴
+          yAxis: [
+            {
+              splitLine: {
+                show: false,
+              },
+              position: "left",
+              min: 0,
+              name: "MW",
+              nameTextStyle: {
+                color: theme ? "#000" : "#fff",
+              },
+              axisLabel: {
+                color: theme ? "#000" : "#fff",
+              },
+            },
+          ],
+          animation: true,
+          dataset: that.dataSet.length ? JSON.parse(that.dataSet) : [],
+          //数据-data是最终要显示的数据
+          series: that.chartData,
+        };
 
-                    },
-                    grid: {
-                        top: 58,
-                        left: 40,
-                        right: 48,
-                        bottom: 24,
-                    },
-                    //x轴
-                    xAxis: [{
-                        name: '时间',
-                        nameTextStyle: {
-                            color: '#838383'
-                        },
-                        type: "category",
-                        boundaryGap: true,
-                        data: that.xAxisData || [],
-                        axisLabel: {
-                            formatter: "{value}",
-                        },
-                        splitLine: {
-                            show: false,
-                        },
-                        smooth: true,
-                        textStyle: {
-                            color: that.theme === "dark" ?
-                                partten.getColor("gray") :
-                                "#000",
-                        },
-                    }, ],
-                    //y轴没有显式设置，根据值自动生成y轴
-                    yAxis: [{
-                        splitLine: {
-                            show: false
-                        },
-                        position: 'left',
-                        min: 0,
-                        name: 'MW',
-                        nameTextStyle: {
-                            color: '#838383'
-                        },
-                    }],
-                    animation: true,
-                    dataset: that.dataSet.length ? JSON.parse(that.dataSet) : [],
-                    //数据-data是最终要显示的数据
-                    series: that.seriesData,
-                };
+        that.resize = function () {
+          myChart.resize();
+        };
 
-                that.resize = function () {
-                    myChart.resize();
-                };
+        window.addEventListener("resize", that.resize);
 
-                window.addEventListener("resize", that.resize);
+        if (markItem.res) {
+          option.dataZoom = that.handleRowClick(markItem);
+        }
 
-                myChart.setOption(option);
-                // if (that.brushSelected) {
-                //   myChart.dispatchAction({
-                //     type: "takeGlobalCursor",
-                //     // 如果想变为“可刷选状态”，必须设置。不设置则会关闭“可刷选状态”。
-                //     key: "brush",
-                //     brushOption: {
-                //       seriesIndex: [2,3],
-                //       yAxisIndex: 0,
-                //       transformable: true,
-                //       throttleType: "debounce",
-                //       throttleDelay: 1000,
-                //       removeOnClick: true,
-                //       brushType: "polygon",
-                //       brushMode: "multiple",
-                //       brushStyle: {
-                //         borderWidth: 1,
-                //         color: "rgba(255,36,36,0.2)",
-                //         borderColor: "#ff2424",
-                //       },
-                //     },
-                //   });
-                // }
-                myChart.off("brushSelected");
-                myChart.on("brushSelected", (params) => {
-                    that.$emit("getSelected", params.batch || []);
-                });
-                myChart.off('click')
-                myChart.on('click', params => {
-                    // if(params.componentType === 'markArea'){
-                    //   myChart.dispatchAction({
-                    //     type: 'brush',
-                    //     areas: [
-                    //       {
-                    //         xAxisIndex: 0,
-                    //         brushType: 'lineX',
-                    //         coordRange: [params.data.coord[0][0], params.data.coord[1][0]]
-                    //       },
-                    //     ]
-                    //   });
-                    // }
-                })
-            },
-        },
-        created() {
-            this.id = "chart-" + util.newGUID();
-        },
-        mounted() {
-            // this.$nextTick(() => {
-            this.$el.style.width = this.width;
-            this.$el.style.height = this.height;
-            this.initChart();
-            // });
-        },
-        updated() {
-            // console.log('update')
-            let myChart = echarts.init(document.getElementById(this.id));
-            myChart.dispose();
-            this.$nextTick(() => {
-                this.initChart();
-            });
-        },
-        unmounted() {
-            window.removeEventListener("resize", this.resize);
+        myChart.setOption(option);
+
+        myChart.off("brushSelected");
+        myChart.on("brushSelected", (params) => {
+          that.$emit("getSelected", params.batch || []);
+        });
+        myChart.off("click");
+      });
+    },
+
+    changeColor() {
+      if (this.$store.state.theme) {
+        this.color = [
+          "#67c23a",
+          "rgb(242.5, 208.5, 157.5)",
+          "#f56c6c",
+          "rgb(135, 0, 157)",
+          "rgb(116, 21, 219)",
+        ];
+
+        this.linearGradientColor = [
+          {
+            opacity: 0.5,
+            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+              {
+                offset: 0,
+                color: "rgb(255, 0, 135)",
+              },
+              {
+                offset: 1,
+                color: "rgb(135, 0, 157)",
+              },
+            ]),
+          },
+          // {
+          //   opacity: 0.5,
+          //   color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+          //     {
+          //       offset: 0,
+          //       color: "rgb(55, 162, 255)",
+          //     },
+          //     {
+          //       offset: 1,
+          //       color: "rgb(116, 21, 219)",
+          //     },
+          //   ]),
+          // },
+          {
+            opacity: 1,
+            color: "#fff",
+          },
+        ];
+      } else {
+        this.color = [
+          "#67c23a",
+          "rgb(242.5, 208.5, 157.5)",
+          "#f56c6c",
+          "rgb(77, 119, 255)",
+          "rgb(1, 191, 236)",
+        ];
+        this.linearGradientColor = [
+          {
+            opacity: 0.5,
+            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+              {
+                offset: 0,
+                color: "rgb(0, 221, 255)",
+              },
+              {
+                offset: 1,
+                color: "rgb(77, 119, 255)",
+              },
+            ]),
+          },
+          // {
+          //   opacity: 0.5,
+          //   color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+          //     {
+          //       offset: 0,
+          //       color: "rgb(128, 255, 165)",
+          //     },
+          //     {
+          //       offset: 1,
+          //       color: "rgb(1, 191, 236)",
+          //     },
+          //   ]),
+          // },
+          {
+            opacity: 1,
+            color: "rgb(33,34,35)",
+          },
+        ];
+      }
+    },
+
+    // 处理表格行点击事件
+    handleRowClick(row) {
+      const that = this;
+      const index = row.dataIndex;
+      const totalDataLength = that.chartData[1].data.length;
+
+      // 计算点击点周围的缩放范围
+      let zoomRange = 300; // 可视区域包含的数据点数量
+      // let startIndex = Math.max(index - Math.floor(zoomRange / 2), 0);
+      // let endIndex = Math.min(startIndex + zoomRange, totalDataLength);
+      let startIndex = index - zoomRange / 2 < 0 ? 0 : index - zoomRange / 2;
+      let endIndex =
+        index + zoomRange / 2 > totalDataLength
+          ? totalDataLength
+          : index + zoomRange / 2;
+
+      // 将百分比转换为相对于数据集的百分比
+      let startPercent = parseInt((startIndex / totalDataLength) * 100);
+      let endPercent = parseInt((endIndex / totalDataLength) * 100);
+      return [
+        {
+          // type: "slider",
+          type: "inside",
+          show: false,
+          realtime: true, //拖动时，是否实时更新系列的视图
+          start: startPercent,
+          end: endPercent,
         },
-    };
+      ];
+    },
+  },
+  created() {
+    this.id = "chart-" + util.newGUID();
+    this.changeColor();
+    this.chartData = JSON.parse(JSON.stringify(this.seriesData));
+  },
+  mounted() {
+    this.$el.style.width = this.width;
+    this.$el.style.height = this.height;
+    this.initChart();
+  },
+  updated() {
+    let myChart = echarts.init(document.getElementById(this.id));
+    myChart.dispose();
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  unmounted() {
+    this.markItem = {};
+    window.removeEventListener("resize", this.resize);
+  },
+
+  watch: {
+    "$store.state.theme"() {
+      this.changeColor();
+      this.initChart(this.markItem);
+    },
+    seriesData(data) {
+      this.chartData = JSON.parse(JSON.stringify(this.seriesData));
+    },
+  },
+};
 </script>
 
 <style lang="less">
-    .chart {
-        width: 100%;
-        height: 100%;
-        display: inline-block;
-    }
+.chart {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+}
 </style>

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

@@ -7,43 +7,110 @@
       </div>
       <div class="main">
         <div class="tableDataMain">
-          <el-tabs v-model="activeTab">
-            <el-tab-pane label="表格数据" name="1"> </el-tab-pane>
-            <el-tab-pane label="图表展示" name="2"> </el-tab-pane>
-            <table-cop
-              v-show="activeTab === '1'"
-              :data="tableData"
-              :loading="tableLoading"
-              :column="tableColumn"
-              :height="tableHeight"
-              :tableId="tableShowId"
-              :tableName="tableName"
+          <el-tabs v-model="activeTab" style="width: 100%">
+            <el-tab-pane label="图表展示" name="2">
+              <div
+                :style="{
+                  height:
+                    typeof tableHeight === 'string'
+                      ? 'calc(' + tableHeight + ' + ' + paginationHeight + 'px)'
+                      : tableHeight + paginationHeight + 'px',
+                  width: '100%',
+                }"
+                class="p-[10px]"
+              >
+                <CurrentScatterChart
+                  ref="chartRef"
+                  :width="tableWidth"
+                  :height="`calc( ${tableHeight} + ${paginationHeight}px - 20px)`"
+                  :chartTitle="''"
+                  :xAxisData="xAxisData"
+                  :yAxisData="{ splitLine: { show: false } }"
+                  :seriesData="seriesData"
+                  :showLegend="true"
+                  :brushSelected="false"
+                  :dataSet="dataSet"
+                  @getSelected="funChartSelect"
+                />
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="表格数据" name="1">
+              <table-cop
+                :data="tableData"
+                :loading="tableLoading"
+                :column="tableColumn"
+                :height="tableHeight"
+                :tableId="tableShowId"
+                :tableName="tableName"
+              >
+              </table-cop>
+              <el-pagination layout="prev, pager, next" :total="50" />
+            </el-tab-pane>
+            <el-tab-pane
+              :label="`超限测点 (${abnormalPoint.length}个)`"
+              name="3"
             >
-            </table-cop>
-            <div
-              v-show="activeTab === '2'"
-              :style="{
-                height:
-                  typeof tableHeight === 'string'
-                    ? tableHeight
-                    : tableHeight + 'px',
-              }"
-              class="p-[10px]"
-            >
-              <CurrentScatterChart
-                ref="chartRef"
-                width="100%"
-                :height="`calc( ${tableHeight} - 20px )`"
-                :chartTitle="''"
-                :xAxisData="xAxisData"
-                :yAxisData="{ splitLine: { show: false } }"
-                :seriesData="seriesData"
-                :showLegend="true"
-                :brushSelected="false"
-                :dataSet="dataSet"
-                @getSelected="funChartSelect"
-              />
-            </div>
+              <el-table
+                :data="abnormalPoint"
+                style="width: 100%"
+                :max-height="tableHeight"
+              >
+                <el-table-column
+                  prop="date"
+                  label="时间"
+                  width="180"
+                  align="center"
+                />
+                <el-table-column
+                  filter-class-name="currentFilter"
+                  prop="name"
+                  label="超限原因 (点击定位至图表位置)"
+                  width="400"
+                  align="center"
+                  :filters="[
+                    { text: '低于下限', value: '低于下限' },
+                    { text: '高于上限', value: '高于上限' },
+                  ]"
+                  :filter-method="tableFilterMethod"
+                >
+                  <template #default="scoped">
+                    <p style="cursor: pointer" @click="createMark(scoped.row)">
+                      <span
+                        :style="`color:${scoped.row.color}; margin-right: 8px;`"
+                      >
+                        {{ scoped.row.res }}
+                      </span>
+                      <el-icon
+                        ><component
+                          :is="scoped.row.icon"
+                          :color="scoped.row.color"
+                      /></el-icon>
+                    </p>
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  prop="value"
+                  label="测点值"
+                  width="180"
+                  align="center"
+                />
+                <el-table-column
+                  prop="jud"
+                  label="限值"
+                  width="180"
+                  align="center"
+                />
+              </el-table>
+              <!-- <el-pagination
+                layout="total, sizes, prev, pager, next, jumper"
+                v-model:current-page="paginationCurrentPage"
+                v-model:page-size="paginationPageSize"
+                :total="paginationTotal"
+                :page-sizes="[50, 100, 200, 500, 1000]"
+                @size-change="paginationSizeChange"
+                @current-change="paginationCurrentChange"
+              /> -->
+            </el-tab-pane>
           </el-tabs>
         </div>
       </div>
@@ -60,10 +127,28 @@ import CurrentScatterChart from "./components/current-scatter-chart.vue";
 import httpRequest from "@/utils/request.js";
 import dayjs from "dayjs";
 import agcJson from "./agcJson.json";
+import * as echarts from "echarts";
 import jsonData from "./components/data.json";
 
+const tableDataSource = ref([]);
+const paginationCurrentPage = ref(1);
+const paginationPageSize = ref(100);
+const paginationTotal = ref(0);
+
+const paginationSizeChange = (size) => {};
+
+const paginationCurrentChange = (page) => {};
+
+const tableFilterMethod = (value, row) => {
+  return row.res === value;
+};
+
 /**配置参数 */
-const tableHeight = ref(window.innerHeight - 170 + "px");
+const paginationHeight = ref(10);
+const tableWidth = ref(window.innerWidth - 200 + "px");
+const tableHeight = ref(
+  window.innerHeight - 170 - paginationHeight.value + "px"
+);
 const treeHeight = ref(window.innerHeight - 170 + "px"); //tree高度
 const excelHeight = ref(window.innerHeight - 170 + "px"); //excel高度
 /**excel 开始 */
@@ -152,6 +237,11 @@ const dataSet = ref("");
 const funChartSelect = async (batch) => {
   return false;
 };
+
+const createMark = (markInfo) => {
+  activeTab.value = "2";
+  chartRef.value.initChart(markInfo);
+};
 /**submit */
 const funSubmit = async (params) => {
   activeTab.value = "2";
@@ -247,6 +337,8 @@ const funSubmit = async (params) => {
       smooth: false, //这个是把线变成曲线
       data: ygsdxz,
       xAxisIndex: 0,
+      lineStyle: { color: "#67c23a" },
+      large: true,
     },
     {
       name: "实发有功",
@@ -256,6 +348,25 @@ const funSubmit = async (params) => {
       smooth: false, //这个是把线变成曲线
       data: sfyg,
       xAxisIndex: 0,
+      lineStyle: { color: "rgb(242.5, 208.5, 157.5)" },
+      large: true,
+      markPoint: {
+        symbolSize: 36,
+        itemStyle: {
+          color: "#f60", // 特殊颜色
+        },
+        emphasis: {
+          itemStyle: {
+            color: "#fff",
+          },
+        },
+        blur: {
+          itemStyle: {
+            opacity: 1,
+          },
+        },
+        data: [],
+      },
     },
     {
       name: "理论功率",
@@ -265,6 +376,8 @@ const funSubmit = async (params) => {
       smooth: false, //这个是把线变成曲线
       data: llgl,
       xAxisIndex: 0,
+      lineStyle: { color: "#f56c6c" },
+      large: true,
     },
     {
       name: "偏差上限",
@@ -274,13 +387,9 @@ const funSubmit = async (params) => {
       smooth: false, //这个是把线变成曲线
       data: pcsx,
       xAxisIndex: 0,
-      lineStyle: {
-        opacity: 0,
-      },
-      areaStyle: {
-        color: "#ccc",
-      },
+      lineStyle: { color: "#64b5f6", opacity: 0 },
       symbol: "none",
+      large: true,
     },
     {
       name: "偏差下限",
@@ -290,20 +399,41 @@ const funSubmit = async (params) => {
       smooth: false, //这个是把线变成曲线
       data: pcxx,
       xAxisIndex: 0,
-      lineStyle: {
-        opacity: 0,
-      },
-      areaStyle: {
-        color: "#fff",
-        opacity: 1,
-      },
+      lineStyle: { color: "#ffb74d", opacity: 0 },
       symbol: "none",
+      large: true,
     },
   ];
   tableData.value = tableArr;
   tableLoading.value = false;
   tableShowId.value = "1";
 
+  let abnormalPointTemp = [];
+  seriesData.value[1].data.forEach((ele, index) => {
+    if (parseFloat(ele) > parseFloat(seriesData.value[3].data[index])) {
+      abnormalPointTemp.push({
+        date: tsArr[index],
+        value: parseFloat(ele),
+        jud: seriesData.value[3].data[index],
+        res: "高于上限",
+        color: "#f25656",
+        icon: "Top",
+        dataIndex: index,
+      });
+    } else if (parseFloat(ele) < parseFloat(seriesData.value[4].data[index])) {
+      abnormalPointTemp.push({
+        date: tsArr[index],
+        value: parseFloat(ele),
+        jud: seriesData.value[4].data[index],
+        res: "低于下限",
+        color: "#1890ff",
+        icon: "Bottom",
+        dataIndex: index,
+      });
+    }
+  });
+  abnormalPoint.value = abnormalPointTemp;
+
   // if (res.code === 200) {
   // if(res.data.sjgl?.length){
   // 	for(const wtObj of res.data.sjgl){
@@ -339,6 +469,7 @@ watch(
     deep: true,
   }
 );
+const abnormalPoint = ref([]);
 const initPageData = () => {
   activeTab.value = "2";
   tableShowId.value = "";
@@ -431,6 +562,8 @@ const initPageData = () => {
       smooth: false, //这个是把线变成曲线
       data: ygsdxz,
       xAxisIndex: 0,
+      lineStyle: { color: "#67c23a" },
+      large: true,
     },
     {
       name: "实发有功",
@@ -440,6 +573,25 @@ const initPageData = () => {
       smooth: false, //这个是把线变成曲线
       data: sfyg,
       xAxisIndex: 0,
+      lineStyle: { color: "rgb(242.5, 208.5, 157.5)" },
+      large: true,
+      markPoint: {
+        symbolSize: 36,
+        itemStyle: {
+          color: "#f60", // 特殊颜色
+        },
+        emphasis: {
+          itemStyle: {
+            color: "#fff",
+          },
+        },
+        blur: {
+          itemStyle: {
+            opacity: 1,
+          },
+        },
+        data: [],
+      },
     },
     {
       name: "理论功率",
@@ -449,6 +601,8 @@ const initPageData = () => {
       smooth: false, //这个是把线变成曲线
       data: llgl,
       xAxisIndex: 0,
+      lineStyle: { color: "#f56c6c" },
+      large: true,
     },
     {
       name: "偏差上限",
@@ -458,13 +612,9 @@ const initPageData = () => {
       smooth: false, //这个是把线变成曲线
       data: pcsx,
       xAxisIndex: 0,
-      lineStyle: {
-        opacity: 0,
-      },
-      areaStyle: {
-        color: "#ccc",
-      },
+      lineStyle: { color: "#64b5f6", opacity: 0 },
       symbol: "none",
+      large: true,
     },
     {
       name: "偏差下限",
@@ -474,19 +624,40 @@ const initPageData = () => {
       smooth: false, //这个是把线变成曲线
       data: pcxx,
       xAxisIndex: 0,
-      lineStyle: {
-        opacity: 0,
-      },
-      areaStyle: {
-        color: "#fff",
-        opacity: 1,
-      },
+      lineStyle: { color: "#ffb74d", opacity: 0 },
       symbol: "none",
+      large: true,
     },
   ];
   tableData.value = tableArr;
   tableLoading.value = false;
   tableShowId.value = "1";
+
+  let abnormalPointTemp = [];
+  seriesData.value[1].data.forEach((ele, index) => {
+    if (parseFloat(ele) > parseFloat(seriesData.value[3].data[index])) {
+      abnormalPointTemp.push({
+        date: tsArr[index],
+        value: parseFloat(ele),
+        jud: seriesData.value[3].data[index],
+        res: "高于上限",
+        color: "#f25656",
+        icon: "Top",
+        dataIndex: index,
+      });
+    } else if (parseFloat(ele) < parseFloat(seriesData.value[4].data[index])) {
+      abnormalPointTemp.push({
+        date: tsArr[index],
+        value: parseFloat(ele),
+        jud: seriesData.value[4].data[index],
+        res: "低于下限",
+        color: "#1890ff",
+        icon: "Bottom",
+        dataIndex: index,
+      });
+    }
+  });
+  abnormalPoint.value = abnormalPointTemp;
 };
 
 /**mounted */
@@ -495,11 +666,14 @@ onMounted(() => {
   // funSubmit();
   theme.value = store.state.theme;
   echartsTheme.value = !theme.value ? "dark" : "";
-  tableHeight.value = window.innerHeight - 170 + "px";
+  tableWidth.value = window.innerWidth - 200 + "px";
+  tableHeight.value = window.innerHeight - 170 - paginationHeight.value + "px";
   excelHeight.value = window.innerHeight - 170 + "px";
   treeHeight.value = window.innerHeight - 170 + "px";
   window.addEventListener("resize", () => {
-    tableHeight.value = window.innerHeight - 170 + "px";
+    tableWidth.value = window.innerWidth - 200 + "px";
+    tableHeight.value =
+      window.innerHeight - 170 - paginationHeight.value + "px";
     excelHeight.value = window.innerHeight - 170 + "px";
     treeHeight.value = window.innerHeight - 170 + "px";
   });
@@ -549,6 +723,11 @@ onActivated(() => {
         width: calc(100% - 20px);
         position: relative;
 
+        .el-tabs__content,
+        .el-tab-pane {
+          width: 100%;
+        }
+
         .butten_com {
           position: absolute;
           right: 20px;

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

@@ -481,7 +481,7 @@ const initPageData = () => {
 /**mounted */
 onMounted(() => {
   initPageData();
-  // funGetTree();
+  funGetTree();
   theme.value = store.state.theme;
   echartsTheme.value = !theme.value ? "dark" : "";
   tableHeight.value = window.innerHeight - 170 + "px";

src/views/generatingCapacity/dataAnalysis/combine/components/data.json

@@ -17661,7 +17661,7 @@
                                             "station": "GJNY_SXGS_JSL_FDC_STA",
                                             "windturbineId": "GJNY_SXGS_JSL_F_WT_0001_EQ",
                                             "time": "2024年07月01日-2024年07月31日",
-                                            "path": "/home/gyee/power/data/fitting/GJNY_SXGS_JSL_FDC_STA_A01未满发_2024-08-02生成.csv",
+                                            "path": "/home/gyee/power/data/fitting/GJNY_SXGS_JSL_FDC_STA_A01未满发样板机_2024-08-02生成.csv",
                                             "type": "fitting",
                                             "interval": "十分钟",
                                             "processid": "1268886457150341120",

src/views/generatingCapacity/dataAnalysis/combine/components/search.vue

@@ -12,7 +12,7 @@
         <el-input-number
           v-model="queryForm.mins"
           class="!w-[130px]"
-          :min="0"
+          :min="3"
         ></el-input-number>
       </el-form-item>
       <el-form-item label="最大功率" class="!mb-0">
@@ -71,7 +71,7 @@ export default {
     return {
       queryForm: {
         maxs: 25,
-        mins: 0,
+        mins: 3,
         maxp: 2500,
         minp: 0,
         dimension: 10, //拟合维度

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

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

src/views/generatingCapacity/dataAnalysis/windAnalysis/components/barLineChart.vue

@@ -1,360 +1,385 @@
 <template>
-    <div class="chart" :id="id"></div>
+  <div class="chart" :id="id"></div>
 </template>
 
 <script>
-    import util from "@/helper/util.js";
-    import partten from "@/helper/partten.js";
-    import * as echarts from "echarts";
+import util from "@/helper/util.js";
+import partten from "@/helper/partten.js";
+import * as echarts from "echarts";
 
-    export default {
-        name: "multiple-bar-chart",
-        componentName: "multiple-bar-chart",
-        props: {
-            width: {
-                type: String,
-                default: "100%",
+export default {
+  name: "multiple-bar-chart",
+  componentName: "multiple-bar-chart",
+  props: {
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "800px",
+    },
+    // 传入数据
+    bardata: {
+      type: Object,
+      default: () => {
+        return {
+          area: [
+            "风场1",
+            "风场2",
+            "风场3",
+            "风场4",
+            "风场5",
+            "风场6",
+            "风场7",
+            "风场8",
+            "风场9",
+          ],
+          legend: [
+            "实际电量",
+            "计划检修损失",
+            "非计划检修损失",
+            "限电损失",
+            "受累损失",
+            "性能损失",
+            "理论发电量",
+          ],
+          data: [
+            [1320, 1302, 901, 634, 1390, 1330, 1320, 1000, 500],
+            [320, 302, 301, 334, 390, 330, 320, 100, 50],
+            [320, 302, 301, 334, 390, 330, 320, 100, 50],
+            [1320, 1302, 901, 634, 1390, 1330, 1320, 1000, 500],
+            [320, 302, 301, 334, 390, 330, 320, 100, 50],
+            [320, 302, 301, 334, 390, 330, 320, 100, 50],
+            [1320, 1302, 901, 634, 1390, 1330, 1320, 1000, 500],
+            [320, 302, 301, 334, 390, 330, 320, 100, 50],
+          ],
+        };
+      },
+    },
+    lineData: {
+      type: Array,
+      default: () => [200, 350, 400, 500, 600, 700, 800, 900, 1200],
+    },
+    lineName: {
+      type: String,
+      default: "损失电量",
+    },
+    // 单位
+    units: {
+      type: Array,
+      default: () => ["(万KWh)", "(风速)"],
+    },
+    // 显示 legend
+    showLegend: {
+      type: Boolean,
+      default: true,
+    },
+    // 颜色
+    color: {
+      type: Array,
+      default: () => [
+        "#323E6F",
+        "#e17e23",
+        "#ba3237",
+        "#c531c7",
+        "#ffffff",
+        "#EDEB2F",
+      ],
+    },
+    // 每页显示个数
+    pageSize: {
+      type: Number,
+      default: 20,
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+      themeName: "light",
+      areaData: [],
+    };
+  },
+  methods: {
+    initChart() {
+      const theme = sessionStorage.getItem("theme") === "true" ? true : false;
+      let chart = echarts.init(this.$el);
+      this.chart = chart;
+      let option = {
+        color: this.color,
+        grid: {
+          left: 40,
+          right: 40,
+          bottom: 16,
+          top: 16,
+          containLabel: true,
+        },
+        legend: {
+          show: this.showLegend,
+          data: this.bardata.legend,
+          right: 56,
+          // icon: "ract",
+          itemWidth: 8,
+          itemHeight: 8,
+          inactiveColor: theme ? "#000" : "#fff",
+          textStyle: {
+            color: theme ? "#000" : "#fff",
+            fontSize: 12,
+          },
+        },
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: true
+            ? "rgba(255,255,255,0.9)"
+            : "rgba(255,255,255,0.9)",
+          borderColor:
+            this.themeName === "dark" ? partten.getColor("gray") : "#838383",
+          textStyle: {
+            color: this.themeName === "dark" ? "#fff" : "#838383",
+            fontSize: util.vh(16),
+          },
+        },
+        dataZoom: [
+          {
+            type: "inside",
+            start: 0,
+            end: this.end,
+            yAxisIndex: [0],
+          },
+          {
+            start: 0,
+            end: this.end,
+            top: 20,
+            bottom: 40,
+            yAxisIndex: [0],
+            backgroundColor: "transparent",
+            // handleIcon: "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
+            handleStyle: {
+              color:
+                this.themeName === "dark"
+                  ? partten.getColor("green")
+                  : partten.getColor("blue"),
             },
-            height: {
-                type: String,
-                default: "800px",
+            moveHandleSize: 0,
+            // dataBackground: {
+            //   lineStyle: {
+            //     color: partten.getColor("gray"),
+            //   },
+            //   areaStyle: {
+            //     color: partten.getColor("gray"),
+            //   },
+            // },
+            // selectedDataBackground: {
+            //   lineStyle: {
+            //     color: partten.getColor("yellow"),
+            //   },
+            //   areaStyle: {
+            //     color: partten.getColor("yellow"),
+            //   },
+            // },
+            fillerColor: "transparent",
+            textStyle: {
+              color:
+                this.themeName === "dark"
+                  ? partten.getColor("grayl")
+                  : "#838383",
             },
-            // 传入数据
-            bardata: {
-                type: Object,
-                default: () => {
-                    return {
-                        area: [
-                            "风场1",
-                            "风场2",
-                            "风场3",
-                            "风场4",
-                            "风场5",
-                            "风场6",
-                            "风场7",
-                            "风场8",
-                            "风场9",
-                        ],
-                        legend: [
-                            "实际电量",
-                            "计划检修损失",
-                            "非计划检修损失",
-                            "限电损失",
-                            "受累损失",
-                            "性能损失",
-                            "理论发电量"
-                        ],
-                        data: [
-                            [1320, 1302, 901, 634, 1390, 1330, 1320, 1000, 500],
-                            [320, 302, 301, 334, 390, 330, 320, 100, 50],
-                            [320, 302, 301, 334, 390, 330, 320, 100, 50],
-                            [1320, 1302, 901, 634, 1390, 1330, 1320, 1000, 500],
-                            [320, 302, 301, 334, 390, 330, 320, 100, 50],
-                            [320, 302, 301, 334, 390, 330, 320, 100, 50],
-                            [1320, 1302, 901, 634, 1390, 1330, 1320, 1000, 500],
-                            [320, 302, 301, 334, 390, 330, 320, 100, 50],
-                        ],
-                    };
-                },
+            borderColor:
+              this.themeName === "dark" ? partten.getColor("gray") : "#838383",
+            brushSelect: false,
+          },
+        ],
+        yAxis: [
+          {
+            type: "category",
+            axisLabel: {
+              color:
+                this.themeName === "dark"
+                  ? partten.getColor("gray")
+                  : "#838383",
             },
-            lineData: {
-                type: Array,
-                default: () => [200, 350, 400, 500, 600, 700, 800, 900, 1200],
+            inverse: true,
+            // minInterval: 10,
+            // maxInterval: 10,
+            axisLine: {
+              show: false,
             },
-            lineName: {
-                type: String,
-                default: "损失电量",
+            axisTick: {
+              show: false,
             },
-            // 单位
-            units: {
-                type: Array,
-                default: () => ["(万KWh)", "(风速)"],
+            data: this.areaData,
+          },
+        ],
+        xAxis: [
+          {
+            type: "value",
+            name: "万kWh",
+            axisLabel: {
+              color:
+                this.themeName === "dark"
+                  ? partten.getColor("gray")
+                  : "#838383",
+              // formatter: "{value}万kWh",
             },
-            // 显示 legend
-            showLegend: {
-                type: Boolean,
-                default: true,
+            axisLine: {
+              type: "dashed",
+              lineStyle: {
+                color:
+                  this.themeName === "dark"
+                    ? partten.getColor("gray")
+                    : "#838383",
+              },
+              width: 5,
             },
-            // 颜色
-            color: {
-                type: Array,
-                default: () => ["#323E6F", "#e17e23", "#ba3237", "#c531c7", "#ffffff", "#EDEB2F"],
+            axisTick: {
+              show: false,
             },
-            // 每页显示个数
-            pageSize: {
-                type: Number,
-                default: 20,
+            splitLine: {
+              lineStyle: {
+                type: "dashed",
+                dashOffset: 10,
+                color: this.themeName === "dark" ? "#5a6162" : "#838383" + 80,
+              },
             },
-        },
-        data() {
-            return {
-                id: "",
-                chart: null,
-                themeName: 'light',
-                areaData: [],
-            };
-        },
-        methods: {
-            initChart() {
-                let chart = echarts.init(this.$el);
-                this.chart = chart
-                let option = {
-                    color: this.color,
-                    grid: {
-                        left: 40,
-                        right: 40,
-                        bottom: 16,
-                        top: 16,
-                        containLabel: true,
-                    },
-                    legend: {
-                        show: this.showLegend,
-                        data: this.bardata.legend,
-                        right: 56,
-                        // icon: "ract",
-                        itemWidth: 8,
-                        itemHeight: 8,
-                        inactiveColor: this.themeName === "dark" ?
-                            partten.getColor("gray") : "#838383",
-                        textStyle: {
-                            color: this.themeName === "dark" ?
-                                partten.getColor("grayl") : "#838383",
-                            fontSize: 12,
-                        },
-                    },
-                    tooltip: {
-                        trigger: "axis",
-                        backgroundColor: true ?
-                            "rgba(255,255,255,0.9)" : "rgba(255,255,255,0.9)",
-                        borderColor: this.themeName === "dark" ?
-                            partten.getColor("gray") : "#838383",
-                        textStyle: {
-                            color: this.themeName === "dark" ? "#fff" : "#838383",
-                            fontSize: util.vh(16),
-                        },
-                    },
-                    dataZoom: [{
-                            type: "inside",
-                            start: 0,
-                            end: this.end,
-                            yAxisIndex: [0],
-                        },
-                        {
-                            start: 0,
-                            end: this.end,
-                            top: 20,
-                            bottom: 40,
-                            yAxisIndex: [0],
-                            backgroundColor: "transparent",
-                            // handleIcon: "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
-                            handleStyle: {
-                                color: this.themeName === "dark" ?
-                                    partten.getColor("green") : partten.getColor("blue"),
-                            },
-                            moveHandleSize: 0,
-                            // dataBackground: {
-                            //   lineStyle: {
-                            //     color: partten.getColor("gray"),
-                            //   },
-                            //   areaStyle: {
-                            //     color: partten.getColor("gray"),
-                            //   },
-                            // },
-                            // selectedDataBackground: {
-                            //   lineStyle: {
-                            //     color: partten.getColor("yellow"),
-                            //   },
-                            //   areaStyle: {
-                            //     color: partten.getColor("yellow"),
-                            //   },
-                            // },
-                            fillerColor: "transparent",
-                            textStyle: {
-                                color: this.themeName === "dark" ?
-                                    partten.getColor("grayl") : "#838383",
-                            },
-                            borderColor: this.themeName === "dark" ?
-                                partten.getColor("gray") : "#838383",
-                            brushSelect: false,
-                        },
-                    ],
-                    yAxis: [{
-                        type: "category",
-                        axisLabel: {
-                            color: this.themeName === "dark" ?
-                                partten.getColor("gray") : "#838383",
-                        },
-                        inverse: true,
-                        // minInterval: 10,
-                        // maxInterval: 10,
-                        axisLine: {
-                            show: false,
-                        },
-                        axisTick: {
-                            show: false,
-                        },
-                        data: this.areaData,
-                    }, ],
-                    xAxis: [{
-                            type: "value",
-                            name: '万kWh',
-                            axisLabel: {
-                                color: this.themeName === "dark" ?
-                                    partten.getColor("gray") : "#838383",
-                                // formatter: "{value}万kWh",
-                            },
-                            axisLine: {
-                                type: "dashed",
-                                lineStyle: {
-                                    color: this.themeName === "dark" ?
-                                        partten.getColor("gray") : "#838383",
-                                },
-                                width: 5,
-                            },
-                            axisTick: {
-                                show: false,
-                            },
-                            splitLine: {
-                                lineStyle: {
-                                    type: "dashed",
-                                    dashOffset: 10,
-                                    color: this.themeName === "dark" ? "#5a6162" : "#838383" + 80,
-                                },
-                            },
-                        },
-                        {
-                            type: "value",
-                            name: "",
-                            axisLabel: {
-                                show: false,
-                                // formatter: "{value}万kWh",
-                                // color: partten.getColor("gray"),
-                            },
-                            axisLine: {
-                                show: false,
-                            },
-                            axisTick: {
-                                show: false,
-                            },
-                            splitLine: {
-                                show: false,
-                            },
-                        },
-                    ],
-                    series: [],
-                };
-
-                if (this.bardata && this.bardata.legend)
-                    // bar data
-                    for (var i = 0; i < this.bardata.legend.length; i++) {
-                        option.series.push({
-                            name: this.bardata.legend[i].name,
-                            type: "bar",
-                            stack: "总量",
-                            barWidth: 16,
-                            label: {
-                                show: false,
-                                position: "insideRight",
-                            },
-                            data: this.bardata.data[i],
-                        });
-                    }
-
-                // line data
-                if (this.lineData.length > 0) {
-                    option.series.push({
-                        name: "理论发电量",
-                        type: "line",
-                        data: this.lineData,
-                        smooth: false, //平滑展示
-                        xAxisIndex: 1,
-                        lineStyle: {
-                            color: this.themeName === "dark" ?
-                                partten.getColor("green") : partten.getColor("blue"),
-                        },
-                        itemStyle: {
-                            color: this.themeName === "dark" ?
-                                partten.getColor("green") : partten.getColor("blue"),
-                        },
-                    });
-                }
-                chart.setOption(option);
-                chart.resize()
+          },
+          {
+            type: "value",
+            name: "",
+            axisLabel: {
+              show: false,
+              // formatter: "{value}万kWh",
+              // color: partten.getColor("gray"),
             },
-        },
-        created() {
-            this.id = "pie-chart-" + util.newGUID();
-            if (this.bardata.area && this.bardata.area.length < this.pageSize) {
-                this.areaData = this.bardata.area;
-                for (let i = this.bardata.area.length; i <= this.pageSize; i++) {
-                    this.areaData.push("");
-                }
-            }
-        },
-        mounted() {
-            this.$nextTick(() => {
-                this.$el.style.width = this.width;
-                this.$el.style.height = this.height;
-                this.initChart();
-            });
-        },
-        updated() {
-            this.$nextTick(() => {
-                this.initChart();
-            });
-        },
-        beforeUpdate() {
-            this.areaData = this.bardata.area;
-        },
-        beforeUpdate() {
-            this.areaData = this.bardata.area;
-        },
-        activated() {
-            this.$nextTick(() => {
-                this.$el.style.width = this.width;
-                this.$el.style.height = this.height;
-                this.initChart();
-            });
-        },
-        computed: {
-            collapse() {
-                return this.$store.state.collapse
+            axisLine: {
+              show: false,
             },
-            legend() {
-                return this.bardata.legend;
+            axisTick: {
+              show: false,
             },
-            end() {
-                var result = 20;
-                if (this.areaData) {
-                    result = parseInt((this.pageSize / this.areaData.length) * 100);
-                }
-                return result;
+            splitLine: {
+              show: false,
             },
-        },
-        watch: {
-            collapse(val) {
-                if (this.chart) {
-                    setTimeout(() => {
-                        this.chart.resize()
-                    }, 300)
-                }
-            },
-            bardata(val) {
-                if (val.area && val.area.length < this.pageSize) {
-                    this.areaData = val.area;
-                    for (let i = val.area.length; i <= this.pageSize; i++) {
-                        this.areaData.push("");
-                    }
-                }
+          },
+        ],
+        series: [],
+      };
+
+      if (this.bardata && this.bardata.legend)
+        // bar data
+        for (var i = 0; i < this.bardata.legend.length; i++) {
+          option.series.push({
+            name: this.bardata.legend[i].name,
+            type: "bar",
+            stack: "总量",
+            barWidth: 16,
+            label: {
+              show: false,
+              position: "insideRight",
             },
-        },
-    };
+            data: this.bardata.data[i],
+          });
+        }
+
+      // line data
+      if (this.lineData.length > 0) {
+        option.series.push({
+          name: "理论发电量",
+          type: "line",
+          data: this.lineData,
+          smooth: false, //平滑展示
+          xAxisIndex: 1,
+          lineStyle: {
+            color:
+              this.themeName === "dark"
+                ? partten.getColor("green")
+                : partten.getColor("blue"),
+          },
+          itemStyle: {
+            color:
+              this.themeName === "dark"
+                ? partten.getColor("green")
+                : partten.getColor("blue"),
+          },
+        });
+      }
+      chart.setOption(option);
+      chart.resize();
+    },
+  },
+  created() {
+    this.id = "pie-chart-" + util.newGUID();
+    if (this.bardata.area && this.bardata.area.length < this.pageSize) {
+      this.areaData = this.bardata.area;
+      for (let i = this.bardata.area.length; i <= this.pageSize; i++) {
+        this.areaData.push("");
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.$el.style.width = this.width;
+      this.$el.style.height = this.height;
+      this.initChart();
+    });
+  },
+  updated() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  beforeUpdate() {
+    this.areaData = this.bardata.area;
+  },
+  beforeUpdate() {
+    this.areaData = this.bardata.area;
+  },
+  activated() {
+    this.$nextTick(() => {
+      this.$el.style.width = this.width;
+      this.$el.style.height = this.height;
+      this.initChart();
+    });
+  },
+  computed: {
+    collapse() {
+      return this.$store.state.collapse;
+    },
+    legend() {
+      return this.bardata.legend;
+    },
+    end() {
+      var result = 20;
+      if (this.areaData) {
+        result = parseInt((this.pageSize / this.areaData.length) * 100);
+      }
+      return result;
+    },
+  },
+  watch: {
+    collapse(val) {
+      if (this.chart) {
+        setTimeout(() => {
+          this.chart.resize();
+        }, 300);
+      }
+    },
+    bardata(val) {
+      if (val.area && val.area.length < this.pageSize) {
+        this.areaData = val.area;
+        for (let i = val.area.length; i <= this.pageSize; i++) {
+          this.areaData.push("");
+        }
+      }
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
-    .chart {
-        width: 100%;
-        height: 100%;
-        display: inline-block;
-    }
+.chart {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+}
 </style>

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

@@ -525,7 +525,7 @@ const initPageData = () => {
 /**mounted */
 onMounted(() => {
   initPageData();
-  //   funGetTree();
+  funGetTree();
   theme.value = store.state.theme;
   echartsTheme.value = !theme.value ? "dark" : "";
   tableHeight.value = window.innerHeight - 175 + "px";

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

@@ -12,7 +12,7 @@
         <el-input-number
           v-model="queryForm.mins"
           class="!w-[130px]"
-          :min="0"
+          :min="3"
         ></el-input-number>
       </el-form-item>
       <el-form-item label="最大功率" class="!mb-0">
@@ -34,6 +34,7 @@
         <el-checkbox v-model="queryForm.isbw">并网后10分钟</el-checkbox>
         <el-checkbox v-model="queryForm.istj">停机前10分钟</el-checkbox>
         <el-checkbox v-model="queryForm.isglpc">功率曲线偏差</el-checkbox>
+        <el-checkbox v-model="queryForm.xd">限电</el-checkbox>
       </el-form-item>
       <el-form-item class="!mb-0">
         <el-button type="primary" @click="funSubmit">预处理</el-button>
@@ -57,7 +58,7 @@ export default {
     return {
       queryForm: {
         maxs: 25,
-        mins: 0,
+        mins: 3,
         maxp: 2500,
         minp: 0,
         isfbw: true,
@@ -65,6 +66,7 @@ export default {
         isbw: true,
         istj: true,
         isglpc: true,
+        xd: true,
       },
     };
   },

src/views/home/index.vue

@@ -680,7 +680,7 @@
     <el-dialog
       class="currentDialog"
       v-model="yfdlDialogShow"
-      title="月发电量"
+      :title="`月发电量${getWpName()}`"
       width="90%"
       align-center
       destroy-on-close
@@ -700,7 +700,7 @@
     <el-dialog
       class="currentDialog"
       v-model="jhdlDialogShow"
-      title="计划电量完成情况"
+      :title="`计划电量完成情况${getWpName()}`"
       width="90%"
       align-center
       destroy-on-close
@@ -713,7 +713,7 @@
         border
         stripe
       >
-        <el-table-column type="index" label="序号" align="center" />
+        <el-table-column type="index" label="月份" align="center" />
         <el-table-column prop="fdl" label="发电量(万kWh)" align="center" />
         <el-table-column prop="jhdl" label="计划电量(万kWh)" align="center" />
         <el-table-column prop="wcl" label="完成率(%)" align="center" />
@@ -723,7 +723,7 @@
     <el-dialog
       class="currentDialog"
       v-model="stHourDialogShow"
-      title="14天功率曲线"
+      :title="`14天功率曲线${getWpName()}`"
       width="90%"
       align-center
       destroy-on-close
@@ -923,6 +923,15 @@ export default {
   },
 
   methods: {
+    getWpName() {
+      if (this.mainData === "获取中...") {
+        return "";
+      } else if (this.mainData === "") {
+        return " (公司)";
+      } else {
+        return ` (${this.mainData})`;
+      }
+    },
     showWeaterDialog() {
       this.tqycDialogShow = true;
       this.renderWeatherDialogChart();
@@ -1340,9 +1349,9 @@ export default {
 
       return [
         "合计",
-        `${fdl} 万kWh`,
-        `${jhdl} 万kWh`,
-        `${((fdl / jhdl) * 100).toFixed(2)} %`,
+        `${ fdl.toFixed(2) } 万kWh`,
+        `${ jhdl.toFixed(2) } 万kWh`,
+        `${ ((fdl / jhdl) * 100).toFixed(2) } %`,
       ];
     },
 
@@ -1717,17 +1726,29 @@ export default {
               data: [],
               barGap: "0",
               type: "bar",
+              label: {
+                show: true, // 显示标签
+                position: "top", // 标签位置
+                formatter: "{c}", // 使用默认的数据值作为标签内容
+                color: theme ? "#1850B3" : "#fff",
+              },
             },
             {
               name: "月利用小时",
               data: [],
               type: "bar",
+              label: {
+                show: true, // 显示标签
+                position: "top", // 标签位置
+                formatter: "{c}", // 使用默认的数据值作为标签内容
+                color: theme ? "#000" : "#fff",
+              },
             },
           ];
           let xAxis = [];
           res.data.yllxs?.forEach((ele) => {
             nameMap[ele.wpid.split("")[0]] = ele.wpid;
-            xAxis.push(ele.wpid.split("")[0]);
+            xAxis.push(ele.wpid);
             series[0].data.push(ele.swdl);
             series[1].data.push(ele.bzgl);
           });
@@ -1748,22 +1769,22 @@ export default {
               axisPointer: {
                 type: "shadow",
               },
-              formatter(data) {  
-                let label = `<p>${nameMap[data[0].name]}</p>`;
-                data.forEach((ele, index) => {
-                  label += `<p>
-                              <span style="background:${
-                                ele.color
-                              };margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:50%;over-flow:hidden;"></span>
-                              <span>${
-                                ele.seriesName
-                              }:<span style="font-weight: 700;margin-left:10px">${
-                    ele.value || 0
-                  }</span></span>
-                            </p>`;
-                });
-                return label;
-              },
+              // formatter(data) {
+              //   let label = `<p>${nameMap[data[0].name]}</p>`;
+              //   data.forEach((ele, index) => {
+              //     label += `<p>
+              //                 <span style="background:${
+              //                   ele.color
+              //                 };margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:50%;over-flow:hidden;"></span>
+              //                 <span>${
+              //                   ele.seriesName
+              //                 }:<span style="font-weight: 700;margin-left:10px">${
+              //       ele.value || 0
+              //     }</span></span>
+              //               </p>`;
+              //   });
+              //   return label;
+              // },
             },
             grid: {
               top: "32%",
@@ -1803,7 +1824,7 @@ export default {
                 splitNumber: 3.5,
                 splitLine: {
                   lineStyle: {
-                    color: ["#ccc"],
+                    color: "transparent",
                   },
                 },
                 name: "单位：小时",

src/views/intelligentReporting/jhdltb/index.vue

@@ -0,0 +1,33 @@
+<template>
+  <div :style="pageHeight">
+    <iframe
+      :src="url"
+      width="100%"
+      height="100%"
+      frameborder="0"
+      scrolling="auto"
+    ></iframe>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      url: null,
+    };
+  },
+  computed: {
+    pageHeight() {
+      return {
+        height: document.documentElement.clientHeight - 80 + "px",
+      };
+    },
+  },
+
+  created() {
+    this.url = `${
+      this.reportBaseUrl || "http://172.16.12.101:8083"
+    }/rbi/ebibase/showreport.do?resid=EANA$2$2$1$bd71f31ba69443b5b3f3997965927c41$253c7920243347aaab6b4e14c559a1d6`;
+  },
+};
+</script>