分析类型修改展示

src/icons/svg/themes2.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1740377160625" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1637" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M298.35 84.69h427.3a213.65 213.65 0 0 1 213.66 213.66v427.3a213.65 213.65 0 0 1-213.66 213.66H298.34A213.65 213.65 0 0 1 84.69 725.66V298.35A213.66 213.66 0 0 1 298.35 84.69z" fill="#E8E7E6" p-id="1638"></path><path d="M792 504.56l-1.34 0.05C777.09 368.79 662.9 262.74 524 262.74c-144.77 0-262.71 115.19-267.82 259.21h23.91l-24 0.81c-3.76 125 67.29 236.09 201.55 273s112.74-61.85 100.78-69.09-20.39-26.83-9.83-49.35 19.64-21.31 68.82-22.21C750.85 657.28 782.39 562 789.75 522h2.06c-0.12-3.29-0.31-6.57-0.54-9.83 0.58-4.83 0.73-7.61 0.73-7.61z m-434 29.65a48.1 48.1 0 1 1 47.84-48.1 48 48 0 0 1-47.84 48.1z m88.6-116.07a48 48 0 1 1 47.95-48 48 48 0 0 1-47.93 48z m150 2.53a48.1 48.1 0 1 1 47.85-48.1 48 48 0 0 1-47.85 48.1z m93.26 113.54a48.1 48.1 0 1 1 47.95-48.1 48 48 0 0 1-47.95 48.1z" fill="#DD4F47" p-id="1639"></path></svg>

src/store/themes.js

@@ -1,24 +1,34 @@
+import { theme } from "tailwindcss/stubs/defaultConfig.stub";
+
 /*
  * @Author: your name
  * @Date: 2024-05-27 15:09:27
- * @LastEditTime: 2024-06-04 09:23:28
+ * @LastEditTime: 2025-02-24 15:24:11
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/store/themes.js
  */
 export default {
+  namespaced: true,
   state: {
     theme: localStorage.getItem("theme") || "green",
+    themeColor: [],
   },
   mutations: {
     setTheme(state, theme) {
       state.theme = theme;
       localStorage.setItem("theme", theme);
     },
+    setThemeColor(state, theme) {
+      state.themeColor = theme;
+    },
   },
   actions: {
     switchTheme({ commit }, theme) {
       commit("setTheme", theme);
     },
+    themeChange({ commit }, theme) {
+      commit("setThemeColor", theme);
+    },
   },
 };

src/views/overview/components/min_pitch/index.vue

@@ -36,7 +36,7 @@
       <VirtualList
         :list="diagramRelationsDatas"
         keyField="fieldEngineCode"
-        :itemSize="452"
+        :itemSize="500"
         v-slot="{ item, index }"
       >
         <TwoDMarkersChart

src/views/overview/components/pitch_tsr_cp/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-09 18:09:55
- * @LastEditTime: 2025-02-19 15:24:51
+ * @LastEditTime: 2025-02-24 13:38:25
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/pitch_tsr_cp/index.vue
@@ -34,7 +34,7 @@
       <VirtualList
         :list="diagramRelationsDatas"
         keyField="fileAddr"
-        :itemSize="452"
+        :itemSize="500"
         v-slot="{ item, index }"
       >
         <TwoDMarkersChart

src/views/overview/components/speed_torque/index.vue

@@ -52,14 +52,6 @@
           :ref="item.fieldEngineCode"
           :fileAddr="item.fileAddr"
         ></powerMarkers2DCharts>
-        <!-- <TwoDMarkersChart
-          v-if="getFileTypeFromUrl(item.fileAddr) === 'speed_torque'"
-          :index="index + 'TwoDMarkersChart'"
-          :key="item.fieldEngineCode + 'TwoDMarkersChart'"
-          :ref="item.fieldEngineCode"
-          :fileAddr="item.fileAddr"
-        >
-        </TwoDMarkersChart> -->
         <Time3DChart
           v-if="getFileTypeFromUrl(item.fileAddr) === '3D'"
           :key="item.fieldEngineCode + 'Time3DChart'"

src/views/overview/components/tsr_cp_power_scatter/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-10 09:22:59
- * @LastEditTime: 2025-02-10 14:54:08
+ * @LastEditTime: 2025-02-24 16:55:24
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/index.vue
@@ -35,16 +35,16 @@
       <VirtualList
         :list="diagramRelationsDatas"
         keyField="fieldEngineCode"
-        :itemSize="452"
+        :itemSize="500"
         v-slot="{ item, index }"
       >
-        <NoColourBandTwoDMarkerChart
+        <TwoDMarkersChart
           :key="item.fieldEngineCode"
           :index="`${new Date().getTime()}` + index"
           :ref="item.fieldEngineCode"
           :fileAddr="item.fileAddr"
         >
-        </NoColourBandTwoDMarkerChart>
+        </TwoDMarkersChart>
       </VirtualList>
       <el-dialog
         v-if="isShowDescription"
@@ -95,7 +95,7 @@
 <script>
 import DicCard from "@/views/overview/components/dicCard/index.vue";
 import FilterChart from "@/views/overview/components/filterChart/index.vue";
-import NoColourBandTwoDMarkerChart from "@/views/performance/components/chartsCom/NoColourBandTwoDMarkerChart.vue";
+import TwoDMarkersChart from "@/views/performance/components/chartsCom/TwoDMarkersChart.vue";
 import TinymceEditor from "@/components/Tinymce.vue";
 import {
   analysisDetail,
@@ -108,7 +108,7 @@ export default {
   components: {
     DicCard,
     FilterChart,
-    NoColourBandTwoDMarkerChart,
+    TwoDMarkersChart,
     TinymceEditor,
   },
   props: {

src/views/overview/index.vue

@@ -22,7 +22,6 @@
           </el-dropdown-menu>
         </el-dropdown>
       </div>
-
       <el-tree
         class="filter-tree"
         :data="data"
@@ -88,19 +87,19 @@
         </template>
       </el-menu>
       <!-- 动态渲染组件 -->
-      <keep-alive>
-        <component
-          :ref="analysisTypeCode"
-          :is="currentComponent"
-          :initBatchCode="initBatchCode"
-          :analysisTypeCode="analysisTypeCode"
-          :batchCodeList="batchCodeList"
-          @setInitBathCode="setInitBathCode"
-          @setIsShow="setIsShow"
-          :isShow="isShow"
-          :isShowTinymceEditorCom="true"
-        ></component>
-      </keep-alive>
+      <!-- <keep-alive> -->
+      <component
+        :ref="analysisTypeCode"
+        :is="currentComponent"
+        :initBatchCode="initBatchCode"
+        :analysisTypeCode="analysisTypeCode"
+        :batchCodeList="batchCodeList"
+        @setInitBathCode="setInitBathCode"
+        @setIsShow="setIsShow"
+        :isShow="isShow"
+        :isShowTinymceEditorCom="true"
+      ></component>
+      <!-- </keep-alive> -->
     </div>
     <div
       class="tousutiwen_box"
@@ -118,7 +117,44 @@
         </div>
       </el-tooltip>
     </div>
-
+    <div class="tousutiwen_box1">
+      <el-tooltip
+        class="item"
+        effect="dark"
+        content="图表主题设置"
+        placement="right"
+      >
+        <div class="tousutiwen_icon">
+          <el-popover placement="right" width="220" trigger="click">
+            <div style="margin-right: 20px; display: flex; align-items: center">
+              <el-select
+                size="small"
+                v-model="color1"
+                @change="updateChartColor"
+                placeholder="选择配色方案"
+                style="width: 200px"
+              >
+                <el-option
+                  v-for="(scheme, index) in colorSchemes"
+                  :key="index"
+                  :label="scheme.label"
+                  :value="scheme.colors"
+                  :style="getOptionStyle(scheme.colors)"
+                ></el-option>
+              </el-select>
+              <!-- <span style="margin-left: 10px">图表主题设置</span> -->
+            </div>
+            <template>
+              <svg-icon
+                icon-class="themes"
+                slot="reference"
+                style="width: 40px; height: 40px"
+              />
+            </template>
+          </el-popover>
+        </div>
+      </el-tooltip>
+    </div>
     <el-dialog
       :title="'分析主题：' + batchTitle"
       :visible="isShowComment"
@@ -148,12 +184,17 @@
 <script>
 import { queryAllAnalysisType } from "@/api/performance";
 import { getAnalysisCodeInfo } from "@/api/overview";
+import { colorSchemes } from "@/views/overview/js/colors";
+import { mapActions } from "vuex";
 export default {
   data() {
     return {
       loading: false,
       filterText: "",
       data: [],
+      color1: colorSchemes[0].colors, // 默认颜色
+      // 配色方案列表（每个方案是一个颜色数组）
+      colorSchemes: [...colorSchemes],
       isShow: false, //控制评论框是否显示
       isShowComment: false, //控制上一条、下一条是否显示
       // 用于控制是否展开/收起
@@ -208,6 +249,23 @@ export default {
   },
 
   methods: {
+    ...mapActions("themes", ["themeChange"]),
+    updateChartColor() {
+      // console.log("this.color1", this.color1);
+      this.themeChange(this.color1);
+    },
+    // 根据配色方案设置每个选项的样式
+    getOptionStyle(scheme) {
+      return {
+        background: `linear-gradient(to right, ${scheme
+          .slice(0, 8)
+          .join(", ")})`,
+        color: "#fff",
+        height: "30px",
+        lineHeight: "30px",
+        borderRadius: "0px",
+      };
+    },
     setIsShow() {
       this.isShow = false;
     },
@@ -458,7 +516,22 @@ export default {
     align-items: center;
     justify-content: center;
   }
-  .tousutiwen_box:hover {
+  .tousutiwen_box1 {
+    position: fixed;
+    right: 80px;
+    bottom: 25%;
+    background: rgb(255, 255, 255);
+    border-radius: 50%;
+    width: 50px;
+    height: 50px;
+    color: rgb(132, 145, 165);
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .tousutiwen_box:hover,
+  .tousutiwen_box1:hover {
     background: rgb(196, 199, 206);
   }
   .el-menu-demo {

src/views/performance/components/PlotlyCharts.vue

@@ -32,17 +32,23 @@
     <div
       v-if="comType === 'generalDrawing'"
       :id="`power-curve-plot${inds}`"
+      :ref="`power-curve-plot${inds}`"
       style="width: 100%; height: 550px"
     ></div>
     <!-- 分图组件  -->
     <template v-else-if="comType === 'graph'">
-      <div :id="`chart-${inds}`" style="width: 100%; height: 550px"></div>
+      <div
+        :ref="`chart-${inds}`"
+        :id="`chart-${inds}`"
+        style="width: 100%; height: 550px"
+      ></div>
     </template>
   </div>
 </template>
 <script>
 import Plotly from "plotly.js-dist";
-import { colorSchemesLine } from "@/views/overview/js/colors";
+import { colorSchemes } from "@/views/overview/js/colors";
+import { mapState } from "vuex";
 export default {
   props: {
     lineMarkerData: Object,
@@ -56,7 +62,7 @@ export default {
       graphData: [], //分图数据length data
       color1: [], // 默认颜色
       // 配色方案列表（每个方案是一个颜色数组）
-      colorSchemes: [...colorSchemesLine],
+      colorSchemes: [...colorSchemes],
       config: {
         powerConfig: {
           mode: "lines+markers",
@@ -95,7 +101,7 @@ export default {
             y: -0.2,
           },
         },
-        colors: [...colorSchemesLine[0].colors],
+        colors: [...colorSchemes[0].colors],
       },
       powerCurveData: {
         turbines: [],
@@ -104,8 +110,14 @@ export default {
     };
   },
   mounted() {
+    this.color1 = this.themeColor;
     this.updateCharts(); // 初次渲染
   },
+  computed: {
+    ...mapState("themes", {
+      themeColor: "themeColor",
+    }),
+  },
   watch: {
     lineMarkerData: {
       deep: true,
@@ -113,6 +125,13 @@ export default {
         this.updateCharts(); // 数据变化时更新
       },
     },
+    themeColor: {
+      handler() {
+        this.color1 = this.themeColor;
+        this.updateChartColor();
+      },
+      deep: true,
+    },
     comType(newType, oldType) {
       if (newType !== oldType) {
         this.updateCharts(); // 类型变化时更新
@@ -121,7 +140,6 @@ export default {
   },
   methods: {
     updateCharts() {
-      // console.log(this.lineMarkerData, "this.lineMarkerData");
       this.powerCurveData.turbines =
         this.lineMarkerData.data?.filter(
           (item) => item.enginName !== "合同功率曲线"
@@ -141,6 +159,9 @@ export default {
       }
     },
     renderPlot() {
+      if (!this.$refs[`power-curve-plot${this.inds}`]) {
+        return false;
+      }
       const data = [];
       this.powerCurveData.turbines.forEach((turbine, index) => {
         data.push({
@@ -168,7 +189,6 @@ export default {
         marker: this.config.powerConfig.marker,
         hovertemplate: `风速: %{x} m/s<br>合同功率: %{y} kW<br><extra></extra>`, // 设置 hovertemplate
       });
-      // console.log(this.powerCurveData, "this.powerCurveData");
       const layout = {
         title: "有功功率曲线分析" + this.lineMarkerData.engineTypeName,
         plot_bgcolor: this.config.lableConfig.plot_bgcolor,
@@ -180,12 +200,13 @@ export default {
     },
     //初始化分图
     initializeEngineCharts() {
+      if (!this.$refs[`chart-${this.inds}`]) {
+        return false;
+      }
       const fentuCharts = this.powerCurveData.turbines.filter(
         (item) =>
           item.enginCode === this.lineMarkerData?.formInfoFieldEngineCode
       );
-      // console.log(this.powerCurveData.turbines, "this.powerCurveData.turbines");
-      // console.log(fentuCharts, "fentuCharts");
       if (fentuCharts[0]?.enginName || fentuCharts[0]?.enginCode) {
         const highlightedData = [];
         const nonHighlightedData = [];
@@ -255,11 +276,13 @@ export default {
     // 根据配色方案设置每个选项的样式
     getOptionStyle(scheme) {
       return {
-        background: `linear-gradient(to right, ${scheme.join(", ")})`,
+        background: `linear-gradient(to right, ${scheme
+          .slice(0, 8)
+          .join(", ")})`,
         color: "#fff",
         height: "30px",
         lineHeight: "30px",
-        borderRadius: "4px",
+        borderRadius: "0px",
       };
     },
   },

src/views/performance/components/analysisEvent.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2024-05-29 09:13:51
- * @LastEditTime: 2025-02-18 09:50:52
+ * @LastEditTime: 2025-02-25 14:36:02
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/analysisEvent.vue
@@ -275,7 +275,7 @@
             </el-col>
           </el-row>
         </el-collapse-item>
-        <el-collapse-item
+        <!-- <el-collapse-item
           title="图像坐标系设置："
           name="3"
           v-if="checkedCities.find((item) => item === '图像设置')"
@@ -546,15 +546,22 @@
               </el-form-item>
             </el-col>
           </el-row>
-        </el-collapse-item>
+        </el-collapse-item> -->
       </el-collapse>
     </el-form>
     <el-card shadow="always" class="box-card">
       <el-row>
-        <div class="filedView">风场信息概览</div>
+        <div class="filedView">
+          <span></span>
+          <span>风场信息概览</span>
+
+          <el-button type="primary" size="small" @click="handleBtn"
+            >切换{{ disableMsg }}</el-button
+          >
+        </div>
       </el-row>
       <el-row>
-        <el-col :span="12">
+        <el-col :span="24" v-if="disableMsg === '地图'">
           <div class="left">
             <el-table :data="batchList" border>
               <el-table-column prop="engineName" label="风机名称">
@@ -583,7 +590,7 @@
             </div>
           </div>
         </el-col>
-        <el-col :span="12" v-loading="htmlLoading">
+        <el-col :span="24" v-loading="htmlLoading" v-else>
           <div class="right">
             <Map></Map>
           </div>
@@ -625,7 +632,7 @@
                 </el-row>
               </div>
 
-              <el-checkbox label="图像设置" key="图像设置"></el-checkbox>
+              <!-- <el-checkbox label="图像设置" key="图像设置"></el-checkbox>
               <div class="checkFromRow">
                 <el-row>
                   <el-col :span="12">发电机转矩坐标系</el-col>
@@ -634,7 +641,7 @@
                   <el-col :span="12">有功功率坐标系</el-col>
                   <el-col :span="12">发电机转矩坐标系</el-col>
                 </el-row>
-              </div>
+              </div> -->
             </el-checkbox-group>
           </div></el-col
         >
@@ -683,6 +690,7 @@ export default {
   },
   data() {
     return {
+      disableMsg: "表格",
       formInline: {
         pageNum: 1,
         pageSize: 10,
@@ -770,6 +778,10 @@ export default {
     });
   },
   methods: {
+    //切换风机信息展示
+    handleBtn() {
+      this.disableMsg = this.disableMsg == "表格" ? "地图" : "表格";
+    },
     getTimeList() {
       let scada = [];
       if (this.form.scada) {
@@ -1075,13 +1087,16 @@ export default {
   height: 100%;
   .filedView {
     height: 60px;
-    line-height: 60px;
+    // line-height: 60px;
     background-color: #fff;
     color: #303133;
     cursor: pointer;
     border-bottom: 1px solid #ebeef5;
     font-size: 16px;
     text-align: center;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     font-weight: 500;
     margin-bottom: 10px;
   }

src/views/performance/components/chartsCom/3DDrawingChart.vue

@@ -57,7 +57,7 @@ import Plotly from "plotly.js-dist";
 import axios from "axios";
 import { myMixin } from "@/mixins/chartRequestMixin";
 import { colorSchemes } from "@/views/overview/js/colors";
-
+import { mapState } from "vuex";
 export default {
   props: {
     fileAddr: {
@@ -97,8 +97,22 @@ export default {
   mixins: [myMixin],
   async mounted() {
     this.getData();
+    this.color1 = this.themeColor;
+  },
+  computed: {
+    ...mapState("themes", {
+      themeColor: "themeColor",
+    }),
+  },
+  watch: {
+    themeColor: {
+      handler() {
+        this.color1 = this.themeColor;
+        this.updateChartColor();
+      },
+      deep: true,
+    },
   },
-
   methods: {
     async getData() {
       if (this.fileAddr !== "") {
@@ -146,11 +160,13 @@ export default {
     // 获取配色选项样式
     getOptionStyle(scheme) {
       return {
-        background: `linear-gradient(to right, ${scheme.join(", ")})`,
+        background: `linear-gradient(to right, ${scheme
+          .slice(0, 8)
+          .join(", ")})`,
         color: "#fff",
         height: "30px",
         lineHeight: "30px",
-        borderRadius: "4px",
+        borderRadius: "0px",
       };
     },
 

src/views/performance/components/chartsCom/BoxMarkersCharts.vue

@@ -135,8 +135,32 @@ export default {
           marker: {
             color: group.color,
           },
-          boxpoints: false,
-          boxmean: false,
+          boxpoints: false, // 是否显示异常值
+          boxmean: true, // 是否显示均值
+          hovertemplate: (data) => {
+            // 获取箱线图的统计数据
+            const max = data.max; // 最大值
+            const min = data.min; // 最小值
+            const q1 = data.q1; // 下四分位数
+            const q3 = data.q3; // 上四分位数
+            const median = data.median; // 中位数
+            const mean = data.mean; // 均值
+            const iqr = q3 - q1; // 四分位距（IQR）
+            const outliers = data.outliers || "无"; // 异常值（如果没有异常值，则显示“无”）
+
+            return (
+              `${xaixs}: %{x}<br>` + // 显示类别
+              `<b>最大值</b>: ${max}<br>` + // 最大值
+              `<b>最小值</b>: ${min}<br>` + // 最小值
+              `<b>上四分位数 (Q3)</b>: ${q3}<br>` + // 上四分位数
+              `<b>中位数 (Median)</b>: ${median}<br>` + // 中位数
+              `<b>下四分位数 (Q1)</b>: ${q1}<br>` + // 下四分位数
+              `<b>四分位距 (IQR)</b>: ${iqr}<br>` + // 四分位距
+              `<b>均值 (Mean)</b>: ${mean}<br>` + // 均值
+              `<b>异常值</b>: ${outliers}<br>` + // 异常值
+              "<extra></extra>" // 额外的文本（可以留空）
+            );
+          },
         });
 
         // 如果有中位点数据且中位点数据不为空，添加中位点
@@ -151,6 +175,7 @@ export default {
             },
             name: `${group.title} - 中位点`,
             type: "scatter",
+            hovertemplate: `${xaixs}: %{x} <br> ${yaixs}: %{y} <br><b>中位点</b>: %{y}<br><extra></extra>`,
           });
         }
       });

src/views/performance/components/chartsCom/GeneratorTemperature.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-21 11:18:49
- * @LastEditTime: 2025-02-21 17:24:54
+ * @LastEditTime: 2025-02-24 17:37:36
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/chartsCom/GeneratorTemperature.vue
@@ -50,9 +50,9 @@
 import { nextTick } from "vue"; // 导入 nextTick
 import Plotly from "plotly.js-dist";
 import axios from "axios";
-import { colorSchemesLine } from "@/views/overview/js/colors";
+import { colorSchemes } from "@/views/overview/js/colors";
 import { myMixin } from "@/mixins/chartRequestMixin"; // 假设你需要的 mixin
-
+import { mapState } from "vuex";
 export default {
   props: {
     fileAddr: {
@@ -72,18 +72,33 @@ export default {
       chartData: {},
       color1: [], // 默认颜色
       // 配色方案列表（每个方案是一个颜色数组）
-      colorSchemes: [...colorSchemesLine],
+      colorSchemes: [...colorSchemes],
       chartType: "line", // 默认图表类型是折线图
 
       loading: false,
       isError: false,
-      colors: [...colorSchemesLine[0].colors],
+      colors: [...colorSchemes[0].colors],
       typeLine: ["solid", "dot", "dash", "longdash", "dashdot", "longdashdot"],
     };
   },
+  computed: {
+    ...mapState("themes", {
+      themeColor: "themeColor",
+    }),
+  },
+  watch: {
+    themeColor: {
+      handler() {
+        this.color1 = this.themeColor;
+        this.updateChartColor();
+      },
+      deep: true,
+    },
+  },
   mounted() {
     if (this.fileAddr) {
       this.getData();
+      this.color1 = this.themeColor;
     }
   },
   methods: {
@@ -186,11 +201,13 @@ export default {
     // 根据配色方案设置每个选项的样式
     getOptionStyle(scheme) {
       return {
-        background: `linear-gradient(to right, ${scheme.join(", ")})`,
+        background: `linear-gradient(to right, ${scheme
+          .slice(0, 8)
+          .join(", ")})`,
         color: "#fff",
         height: "30px",
         lineHeight: "30px",
-        borderRadius: "4px",
+        borderRadius: "0px",
       };
     },
   },

src/views/performance/components/chartsCom/HeatmapCharts.vue

@@ -8,7 +8,8 @@
 import { nextTick } from "vue"; // 导入 nextTick
 import Plotly from "plotly.js-dist";
 import axios from "axios";
-
+import { colorSchemes } from "@/views/overview/js/colors";
+import { mapState } from "vuex";
 export default {
   props: {
     inds: {
@@ -22,9 +23,13 @@ export default {
       default: "",
     },
   },
+
   data() {
     return {
       chartData: {},
+      color1: colorSchemes[0].colors, // 默认颜色
+      // 配色方案列表（每个方案是一个颜色数组）
+      colorSchemes: [...colorSchemes],
       initData: [
         {
           z: [],
@@ -45,9 +50,24 @@ export default {
       ],
     };
   },
+  computed: {
+    ...mapState("themes", {
+      themeColor: "themeColor",
+    }),
+  },
+  watch: {
+    themeColor: {
+      handler() {
+        this.color1 = this.themeColor;
+        this.initcharts();
+      },
+      deep: true,
+    },
+  },
   mounted() {
     if (this.fileAddr) {
       this.getData();
+      this.color1 = this.themeColor;
     }
   },
 
@@ -60,7 +80,6 @@ export default {
           const resultChartsData = await axios.get(this.fileAddr, {
             cancelToken: this.cancelToken.token,
           });
-          console.log(resultChartsData.data, "resultChartsData");
           this.chartData = resultChartsData.data;
           this.initData[0].x = this.chartData.data[0].xData;
           this.initData[0].y = this.chartData.data[0].yData;
@@ -84,7 +103,14 @@ export default {
         x: this.initData[0].x,
         y: this.initData[0].y,
         z: this.initData[0].z,
-        colorscale: this.initData[0].colorscale, // 使用新的颜色范围
+        colorscale: [
+          [0, this.color1[0]], // 0% - 50%
+          [0.5, this.color1[0]], // 50%
+          [0.5, this.color1[4]], // 50% - 85%
+          [0.85, this.color1[4]], // 85%
+          [0.85, this.color1[8]], // 85% - 100%
+          [1, this.color1[8]], // 100%
+        ], // 使用新的颜色范围
         text: this.initData[0].z.map((row) =>
           row.map((value) => value.toString())
         ),

src/views/performance/components/chartsCom/NoColourBandTwoDMarkerChart.vue

@@ -1,401 +0,0 @@
-<!--
- * @Author: your name
- * @Date: 2025-01-17 17:22:04
- * @LastEditTime: 2025-02-24 09:19:53
- * @LastEditors: bogon
- * @Description: In User Settings Edit
- * @FilePath: /performance-test/src/views/performance/components/chartsCom/NoColourBandTwoDMarkerChart.vue
--->
-<template>
-  <div style="height: 400px">
-    <!-- 2D散点图 没色带 -->
-    <template>
-      <div style="display: flex; align-items: center; margin-top: 20px">
-        <div style="margin-right: 20px; display: flex; align-items: center">
-          <!-- <el-color-picker
-            size="small"
-            v-model="color1"
-            show-alpha
-            @change="updateChartColor"
-          ></el-color-picker>
-          <span style="margin-left: 10px">自定义颜色</span> -->
-          <el-select
-            size="small"
-            v-model="color1"
-            @change="updateChartColor"
-            placeholder="选择配色方案"
-            style="width: 200px"
-          >
-            <el-option
-              v-for="(scheme, index) in colorSchemes"
-              :key="index"
-              :label="scheme.label"
-              :value="scheme.colors"
-              :style="getOptionStyle(scheme.colors)"
-            ></el-option>
-          </el-select>
-        </div>
-        <!-- 图表类型切换按钮 -->
-        <!-- <div>
-          <el-button size="small" @click="setChartType('scatter')"
-            >散点图</el-button
-          >
-          <el-button size="small" @click="setChartType('line')"
-            >折线图</el-button
-          >
-        </div> -->
-      </div>
-      <!-- 点大小控制 -->
-      <div style="display: flex; align-items: center">
-        <!-- <span style="margin-right: 10px">点大小</span> -->
-        <el-slider
-          v-model="pointSize"
-          :min="1"
-          :max="15"
-          :step="1"
-          label="点的大小"
-          show-stops
-          style="width: 150px"
-          @change="updateChartColor"
-        ></el-slider>
-      </div>
-      <div v-loading="loading" ref="plotlyChart" style="height: 400px">
-        <el-empty v-if="isError" description="请求失败"></el-empty>
-      </div>
-    </template>
-  </div>
-</template>
-
-<script>
-import Plotly from "plotly.js-dist";
-import axios from "axios";
-import { colorSchemes } from "@/views/overview/js/colors";
-import { myMixin } from "@/mixins/chartRequestMixin";
-
-export default {
-  mixins: [myMixin],
-  props: {
-    fileAddr: {
-      default: "",
-      type: String,
-    },
-    index: {
-      type: String,
-    },
-  },
-  data() {
-    return {
-      pointSize: 5, // 默认点大小
-      color1: colorSchemes[0].colors, // 默认颜色
-      // 配色方案列表（每个方案是一个颜色数组）
-      colorSchemes: [...colorSchemes],
-      chartData: {},
-      chartType: "scatter", // 初始化为散点图 (scatter)
-
-      selectedPoints: [],
-      originalColors: [],
-      originalSizes: [],
-    };
-  },
-  async mounted() {
-    this.getData();
-  },
-  methods: {
-    // 根据配色方案设置每个选项的样式
-    getOptionStyle(scheme) {
-      return {
-        background: `linear-gradient(to right, ${scheme.join(", ")})`,
-        color: "#fff",
-        height: "30px",
-        lineHeight: "30px",
-        borderRadius: "4px",
-      };
-    },
-    async getData() {
-      if (this.fileAddr !== "") {
-        try {
-          this.loading = true;
-          this.cancelToken = axios.CancelToken.source();
-          console.log(this.cancelToken);
-          const resultChartsData = await axios.get(this.fileAddr, {
-            cancelToken: this.cancelToken.token,
-          });
-          this.chartData = resultChartsData.data;
-          this.drawChart();
-          this.isError = false;
-          this.loading = false;
-        } catch (error) {
-          this.isError = true;
-          this.loading = false;
-        }
-      }
-    },
-    drawChart() {
-      const data = this.chartData.data && this.chartData.data[0];
-      let trace = {};
-      // 保存原始颜色和大小
-      this.originalColors = [...data.yData];
-      this.originalSizes = new Array(data.xData.length).fill(6); // 初始点大小
-      if (this.chartType === "scatter") {
-        // 绘制 2D 散点图
-        console.log("重新绘制图表", this.color1);
-        trace = {
-          x: data.xData,
-          y: data.yData,
-          mode: "markers",
-          type: "scattergl", // 这里改为 scattergl
-          text: data.engineName, // 提示文本
-          marker: {
-            color: data.yData, // 根据 yData 的值设置颜色
-            // colorscale: "Viridis", // 使用的颜色区间
-            colorscale: this.color1
-              ? [
-                  [0, "#F9FDD2"], // 颜色从 this.color1 开始
-                  [1, this.color1], // 结束颜色为其他颜色
-                ]
-              : [
-                  [0, "#F9FDD2"],
-                  [0.15, "#E9F6BD"],
-                  [0.3, "#C2E3B9"],
-                  [0.45, "#8AC8BE"],
-                  [0.6, "#5CA8BF"],
-                  [0.75, "#407DB3"],
-                  [0.9, "#2E4C9A"],
-                  [1, "#1B2973"],
-                ],
-            // colorbar: {
-            //   title: data.colorbartitle, // 色标标题
-            // },
-            size: new Array(data.xData.length).fill(this.pointSize), // 初始点大小
-          },
-          hovertemplate:
-            `${this.chartData.xaixs}:` +
-            ` %{x} <br> ` +
-            `${this.chartData.yaixs}:` +
-            "%{y} <br> <extra></extra>", // 在 hover 中显示格式化后的时间
-          // customdata: data.colorbar || data.color, // 将格式化后的时间存入 customdata
-        };
-      } else if (this.chartType === "line") {
-        // 折线图
-        trace = {
-          x: data.xData,
-          y: data.yData,
-          mode: "lines",
-          type: "scattergl", // 折线图
-          text: data.engineName,
-          line: {
-            color: this.color1, // 使用自定义颜色
-          },
-        };
-      } else if (this.chartType === "bar") {
-        // 柱状图
-        trace = {
-          x: data.xData,
-          y: data.yData,
-          type: "bar", // 柱状图
-          marker: {
-            color: this.color1, // 使用自定义颜色
-          },
-        };
-      }
-      // 图表布局;
-      const layout = {
-        title: data.title,
-        xaxis: {
-          title: this.chartData.xaixs,
-          showline: false, // 隐藏x轴轴线
-          zeroline: false, // 隐藏零轴
-          gridcolor: "#fff", // 设置x轴网格线颜色
-          gridcolor: "rgb(255,255,255)", // 网格线颜色
-          tickcolor: "rgb(255,255,255)",
-          backgroundcolor: "#e5ecf6",
-          showbackground: true, // 显示背景
-        },
-        yaxis: {
-          showline: false, // 隐藏x轴轴线
-          zeroline: false, // 隐藏零轴
-          gridcolor: "#fff", // 设置x轴网格线颜色
-          title: this.chartData.yaixs,
-          line: {
-            show: false,
-          },
-          gridcolor: "rgb(255,255,255)", // 网格线颜色
-          tickcolor: "rgb(255,255,255)",
-          backgroundcolor: "#e5ecf6",
-          showbackground: true, // 显示背景
-        },
-        showlegend: false,
-        plot_bgcolor: "#e5ecf6",
-        gridcolor: "#fff", // 设置网格线颜色
-      };
-      const config = {
-        modeBarButtonsToAdd: [
-          {
-            name: "选择",
-            icon: Plotly.Icons.pencil,
-            click: (gd) => this.handleSelectClick(gd),
-          },
-          {
-            name: "清除选中",
-            icon: Plotly.Icons.undo,
-            click: (gd) => this.handleClearSelect(gd),
-          },
-          {
-            name: "下载CSV文件",
-            icon: Plotly.Icons.disk,
-            click: (gd) => this.handleDownloadCSV(gd),
-          },
-        ],
-        modeBarButtonsToRemove: [
-          // 移除不需要的工具按钮
-          "lasso2d",
-        ],
-        displaylogo: false,
-        editable: true,
-        scrollZoom: false,
-      };
-      // 使用 Plotly 绘制图表
-      Plotly.react(this.$refs.plotlyChart, [trace], layout, config).then(() => {
-        // 确保在图表加载完成后设置工具栏按钮
-        const plotElement = this.$refs.plotlyChart;
-        Plotly.relayout(plotElement, layout); // 使用 relayout 来确保自定义按钮应用
-      });
-    },
-    handleSelectClick(gd) {
-      // 绑定 plotly_click 事件
-      gd.on("plotly_click", (data) => {
-        const pointIndex = data.points[0].pointIndex;
-        const xClick = data.points[0].x;
-        const yClick = data.points[0].y;
-
-        // 将点击的点添加到选中的点数组
-        this.selectedPoints.push({
-          x: xClick, // 点击点的 x 坐标
-          y: yClick, // 点击点的 y 坐标
-          index: pointIndex, // 点击点的索引
-          time: data.points[0].text, // 点击点的时间信息
-        });
-
-        // 初始化颜色和大小数组
-        let newColors = [...this.originalColors];
-        let newSize = [...this.originalSizes];
-
-        // 如果选中的点数大于等于3，进行多边形选择区域的处理
-        if (this.selectedPoints.length >= 3) {
-          const xv = this.selectedPoints.map((p) => p.x);
-          const yv = this.selectedPoints.map((p) => p.y);
-
-          // 判断点是否在多边形内
-          function inPolygon(x, y, xv, yv) {
-            let inside = false;
-            for (let i = 0, j = xv.length - 1; i < xv.length; j = i++) {
-              const intersect =
-                yv[i] > y !== yv[j] > y &&
-                x < ((xv[j] - xv[i]) * (y - yv[i])) / (yv[j] - yv[i]) + xv[i];
-              if (intersect) inside = !inside;
-            }
-            return inside;
-          }
-
-          // 用于跟踪已添加的 (x, y) 组合
-          const addedPoints = {};
-
-          // 遍历图表数据中的所有点，检查是否在多边形内
-          gd.data[0].x.forEach((xVal, i) => {
-            const yVal = gd.data[0].y[i];
-            if (inPolygon(xVal, yVal, xv, yv)) {
-              const pointKey = `${xVal}-${yVal}`;
-              if (!addedPoints[pointKey]) {
-                this.selectedPoints.push({
-                  x: gd.data[0].x[i],
-                  y: gd.data[0].y[i],
-                  time: gd.data[0].text[i],
-                });
-
-                newColors[i] = "red"; // 高亮选择的点
-                newSize[i] = 10; // 设置点的大小
-                addedPoints[pointKey] = true;
-              }
-            }
-          });
-        }
-
-        // 更新选中点的颜色和大小
-        this.selectedPoints.forEach((point) => {
-          newColors[point.index] = "red";
-          newSize[point.index] = 10;
-        });
-
-        // 使用 Plotly.restyle 更新颜色和大小
-        Plotly.restyle(gd, {
-          "marker.color": [newColors],
-          "marker.size": [newSize],
-        });
-
-        // 处理选中的数据
-        this.getSelectData(this.selectedPoints, gd.layout);
-      });
-    },
-
-    handleClearSelect(gd) {
-      this.selectedPoints = [];
-      Plotly.restyle(gd, {
-        "marker.color": [this.originalColors],
-        "marker.size": [this.originalSizes],
-      });
-    },
-    getSelectData(selectedPoints, layout) {
-      // 在这里处理选中的数据，您可以将其展示或导出等
-      console.log("选中的点数据：", selectedPoints);
-      console.log("布局信息：", layout);
-    },
-    handleDownloadCSV(gd) {
-      if (this.selectedPoints.length === 0) {
-        alert("没有选中的数据");
-        return;
-      }
-      this.downloadCSV();
-    },
-
-    downloadCSV() {
-      const headers = [this.chartData.xaixs, this.chartData.yaixs];
-      const csvRows = [headers]; // 保存标头
-      // 使用 Set 或 Map 去重
-      const uniquePoints = [];
-      this.selectedPoints.forEach((point) => {
-        if (!uniquePoints.some((p) => p.x === point.x && p.y === point.y)) {
-          uniquePoints.push(point);
-        }
-      });
-
-      // 将去重后的点加入 CSV 数据
-      uniquePoints.forEach((point) => {
-        csvRows.push(`${point.x},${point.y}`);
-      });
-
-      const csvString = csvRows.join("\n");
-      const blob = new Blob([csvString], { type: "text/csv; charset=utf-8" });
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement("a");
-      a.href = url;
-      a.download = "selected_data.csv";
-      a.click();
-      URL.revokeObjectURL(url);
-    },
-    setChartType(type) {
-      // 切换图表类型
-      this.chartType = type;
-      this.drawChart(); // 重新绘制图表
-    },
-
-    updateChartColor(color) {
-      // 更新图表颜色
-      // this.color1 = color;
-      console.log(this.color1, "this.color1");
-      this.drawChart();
-    },
-  },
-};
-</script>
-
-<style scoped></style>

src/views/performance/components/chartsCom/Time3DChart.vue

@@ -49,7 +49,7 @@ import Plotly from "plotly.js-dist";
 import axios from "axios";
 import { myMixin } from "@/mixins/chartRequestMixin";
 import { colorSchemes } from "@/views/overview/js/colors";
-
+import { mapState } from "vuex";
 export default {
   props: {
     fileAddr: {
@@ -87,8 +87,23 @@ export default {
     };
   },
   mixins: [myMixin],
+  computed: {
+    ...mapState("themes", {
+      themeColor: "themeColor",
+    }),
+  },
+  watch: {
+    themeColor: {
+      handler() {
+        this.color1 = this.themeColor;
+        this.updateChartColor();
+      },
+      deep: true,
+    },
+  },
   async mounted() {
     this.getData();
+    this.color1 = this.themeColor;
   },
 
   methods: {
@@ -232,11 +247,13 @@ export default {
     // 获取配色选项样式
     getOptionStyle(scheme) {
       return {
-        background: `linear-gradient(to right, ${scheme.join(", ")})`,
+        background: `linear-gradient(to right, ${scheme
+          .slice(0, 8)
+          .join(", ")})`,
         color: "#fff",
         height: "30px",
         lineHeight: "30px",
-        borderRadius: "4px",
+        borderRadius: "0px",
       };
     },
   },

src/views/performance/components/chartsCom/TwoDMarkersChart.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="width: 100%; height: 500px">
+  <div style="width: 100%; height: 450px">
     <!-- 2D散点图 -->
     <div style="display: flex; align-items: center; padding-top: 20px">
       <div style="margin-right: 20px; display: flex; align-items: center">
@@ -57,6 +57,7 @@ import Plotly from "plotly.js-dist";
 import axios from "axios";
 import { myMixin } from "@/mixins/chartRequestMixin";
 import { colorSchemes } from "@/views/overview/js/colors";
+import { mapState } from "vuex";
 export default {
   props: {
     fileAddr: {
@@ -81,19 +82,36 @@ export default {
       originalSizes: [],
     };
   },
+  computed: {
+    ...mapState("themes", {
+      themeColor: "themeColor",
+    }),
+  },
+  watch: {
+    themeColor: {
+      handler() {
+        this.color1 = this.themeColor;
+        this.updateChartColor();
+      },
+      deep: true,
+    },
+  },
   mixins: [myMixin],
   async mounted() {
     this.getData();
+    this.color1 = this.themeColor;
   },
   methods: {
     // 根据配色方案设置每个选项的样式
     getOptionStyle(scheme) {
       return {
-        background: `linear-gradient(to right, ${scheme.join(", ")})`,
+        background: `linear-gradient(to right, ${scheme
+          .slice(0, 8)
+          .join(", ")})`,
         color: "#fff",
         height: "30px",
         lineHeight: "30px",
-        borderRadius: "4px",
+        borderRadius: "0px",
       };
     },
     async getData() {
@@ -141,23 +159,53 @@ export default {
       // 保存原始颜色和大小
       this.originalColors = [...data.yData];
       this.originalSizes = new Array(data.xData.length).fill(6); // 初始点大小
+
       if (this.chartType === "scatter") {
+        // 如果有 colorbar 数据
+        const uniqueTimeLabels =
+          data.colorbar && data.colorbar.length === data.xData.length
+            ? [...new Set(data.colorbar)] // 从 colorbar 中提取唯一的标签
+            : [...new Set(data.yData)]; // 如果没有 colorbar，使用 data.color
+
+        const ticktext = uniqueTimeLabels.map((dateStr) => dateStr); // 格式化为标签
+        const tickvals = uniqueTimeLabels.map((label, index) => index + 1); // 设置 tick 值
+        const timeMapping = uniqueTimeLabels.reduce((acc, curr, index) => {
+          acc[curr] = index + 1;
+          return acc;
+        }, {});
+        // 获取 colorbar 的最小值和最大值来计算比例值
+        const minValue = Math.min(...tickvals);
+        const maxValue = Math.max(...tickvals);
+
+        // 创建颜色比例映射
+        const colors = ticktext.map((item, ind) => {
+          const proportion = ind / (ticktext.length - 1); // 0 到 1 的比例值，取决于 ticktext 的位置
+          const colorIndex = Math.floor(proportion * (this.color1.length - 1)); // 计算颜色池索引
+          const defaultColor = this.color1[colorIndex]; // 获取对应的颜色
+          return [
+            proportion, // 比例值
+            defaultColor, // 对应颜色池中的颜色
+          ];
+        });
+
+        // 将时间字符串映射为数字
+        let colorValues = [];
+        if (data.colorbar && data.colorbar.length === data.xData.length) {
+          colorValues = data.colorbar.map((date) => timeMapping[date]);
+        } else {
+          colorValues = data.yData.map((date) => timeMapping[date]);
+        }
         // 绘制 2D 散点图
-        console.log("重新绘制图表", this.color1);
         trace = {
           x: data.xData,
           y: data.yData,
           mode: "markers",
-          type: "scattergl", // 这里改为 scattergl
+          type: "scattergl", // 使用 scattergl 提高性能
           text: data.engineName, // 提示文本
           marker: {
-            color: data.yData, // 根据 yData 的值设置颜色
-            // colorscale: "Viridis", // 使用的颜色区间
+            color: colorValues, // 根据 colorbar 映射的数字设置颜色
             colorscale: this.color1
-              ? [
-                  [0, "#F9FDD2"], // 颜色从 this.color1 开始
-                  [1, this.color1], // 结束颜色为其他颜色
-                ]
+              ? colors // 如果有 color1 使用自定义颜色比例
               : [
                   [0, "#F9FDD2"],
                   [0.15, "#E9F6BD"],
@@ -167,10 +215,10 @@ export default {
                   [0.75, "#407DB3"],
                   [0.9, "#2E4C9A"],
                   [1, "#1B2973"],
-                ],
-            colorbar: {
-              title: data.colorbartitle, // 色标标题
-            },
+                ], // 默认颜色渐变
+            colorbar: data.colorbar
+              ? { title: data.colorbartitle || "Color Legend" }
+              : undefined, // 如果有 colorbar 显示，否则不显示
             size: new Array(data.xData.length).fill(this.pointSize), // 点的大小
           },
           hovertemplate:
@@ -178,7 +226,6 @@ export default {
             ` %{x} <br> ` +
             `${this.chartData.yaixs}:` +
             "%{y} <br> <extra></extra>",
-          // customdata: data.colorbar || data.color, // 将格式化后的时间存入 customdata
         };
       } else if (this.chartType === "line") {
         // 折线图
@@ -186,10 +233,10 @@ export default {
           x: data.xData,
           y: data.yData,
           mode: "lines",
-          type: "scattergl", // 折线图
+          type: "scattergl", // 使用 scattergl 提高性能
           text: data.engineName,
           line: {
-            color: this.color1, // 使用自定义颜色
+            color: this.color1 || "#FF5733", // 使用自定义颜色
           },
         };
       } else if (this.chartType === "bar") {
@@ -199,12 +246,13 @@ export default {
           y: data.yData,
           type: "bar", // 柱状图
           marker: {
-            color: this.color1, // 使用自定义颜色
+            color: this.color1 || "#FF5733", // 使用自定义颜色
           },
         };
       }
-      // 图表布局;
-      const layout = {
+
+      // 图表布局
+      let layout = {
         title: data.title,
         xaxis: {
           title: this.chartData.xaixs,
@@ -223,9 +271,13 @@ export default {
         showlegend: false,
         plot_bgcolor: "#e5ecf6",
         gridcolor: "#fff", // 设置网格线颜色
-        // plot_bgcolor: "rad",
-        // gridcolor: "#d3d3d3", // 设置网格线颜色
       };
+
+      if (this.chartData.xaixs === "时间") {
+        layout.xaxis.type = "date";
+        layout.xaxis.tickformat = "%Y-%m-%d";
+      }
+
       const config = {
         modeBarButtonsToAdd: [
           {
@@ -252,6 +304,7 @@ export default {
         editable: true,
         scrollZoom: false,
       };
+
       // 使用 Plotly 绘制图表
       Plotly.react(
         this.$refs[`plotlyChart-${this.index}`],
@@ -265,6 +318,10 @@ export default {
       });
     },
 
+    generateHSLColor(index, total) {
+      const hue = (index / total) * 360; // 色相值从 0 到 360
+      return `hsl(${hue}, 100%, 50%)`; // 饱和度和亮度设置为固定值，生成多样的颜色
+    },
     handleSelectClick(gd) {
       // 绑定 plotly_click 事件
       gd.on("plotly_click", (data) => {
@@ -394,8 +451,6 @@ export default {
 
     updateChartColor(color) {
       // 更新图表颜色
-      // this.color1 = color;
-      console.log(this.color1, "this.color1");
       this.drawChart();
     },
   },

src/views/performance/components/chartsCom/WindRoseChart.vue

@@ -14,6 +14,8 @@
 import Plotly from "plotly.js-dist";
 import axios from "axios";
 import { myMixin } from "@/mixins/chartRequestMixin";
+import { colorSchemes } from "@/views/overview/js/colors";
+import { mapState } from "vuex";
 
 export default {
   props: {
@@ -32,8 +34,16 @@ export default {
     return {
       // 数据结构
       chartData: {},
+      color1: colorSchemes[0].colors, // 默认颜色
+      // 配色方案列表（每个方案是一个颜色数组）
+      colorSchemes: [...colorSchemes],
     };
   },
+  computed: {
+    ...mapState("themes", {
+      themeColor: "themeColor",
+    }),
+  },
   watch: {
     chartData: {
       deep: true,
@@ -43,9 +53,17 @@ export default {
         }
       },
     },
+    themeColor: {
+      handler() {
+        this.color1 = this.themeColor;
+        this.renderChart();
+      },
+      deep: true,
+    },
   },
   mounted() {
     this.getData();
+    this.color1 = this.themeColor;
   },
   methods: {
     async getData() {
@@ -78,15 +96,7 @@ export default {
         });
       });
       const speedLabels = Array.from(windSpeedRanges).sort(); // 动态范围值
-      const colors = [
-        "#FBFDD4",
-        "#C0E2BA",
-        "#57A3BF",
-        "#1A2971",
-        "#FF6F61",
-        "#FFC300",
-        "#6A0572",
-      ]; // 可扩展颜色列表
+      const colors = [...this.color1]; // 可扩展颜色列表
       const colorscale = {};
       speedLabels.forEach((label, index) => {
         colorscale[label] = colors[index % colors.length];

src/views/performance/components/chartsCom/YewErrorBarChart.vue

@@ -2,7 +2,7 @@
   <div>
     <!-- 图表控制面板 -->
     <div style="display: flex; align-items: center">
-      <div style="margin-right: 20px; display: flex; align-items: center">
+      <!-- <div style="margin-right: 20px; display: flex; align-items: center">
         <el-color-picker
           size="small"
           v-model="color1"
@@ -10,7 +10,7 @@
           @change="updateChartColor"
         ></el-color-picker>
         <span style="margin-left: 10px">自定义颜色</span>
-      </div>
+      </div> -->
       <div>
         <el-button size="small" @click="toggleChartType">
           切换为{{ chartType === "bar" ? "折线图" : "柱状图" }}

src/views/performance/components/chartsCom/lineAndChildLine.vue

@@ -28,6 +28,7 @@
     <div
       v-loading="loading"
       :id="`bar-chart${index}`"
+      :ref="`bar-chart${index}`"
       style="width: 100%; height: 400px"
     >
       <el-empty v-if="isError" description="请求失败"></el-empty>
@@ -39,9 +40,9 @@
 import { nextTick } from "vue"; // 导入 nextTick
 import Plotly from "plotly.js-dist";
 import axios from "axios";
-import { colorSchemesLine } from "@/views/overview/js/colors";
+import { colorSchemes } from "@/views/overview/js/colors";
 import { myMixin } from "@/mixins/chartRequestMixin"; // 假设你需要的 mixin
-
+import { mapState } from "vuex";
 export default {
   props: {
     fileAddr: {
@@ -62,14 +63,29 @@ export default {
       chartType: "line", // 默认图表类型是折线图
       color1: [], // 默认颜色
       // 配色方案列表（每个方案是一个颜色数组）
-      colorSchemes: [...colorSchemesLine],
+      colorSchemes: [...colorSchemes],
       loading: false,
       isError: false,
-      colors: [...colorSchemesLine[0].colors],
+      colors: [...colorSchemes[0].colors],
     };
   },
+  computed: {
+    ...mapState("themes", {
+      themeColor: "themeColor",
+    }),
+  },
+  watch: {
+    themeColor: {
+      handler() {
+        this.color1 = this.themeColor;
+        this.updateChartColor();
+      },
+      deep: true,
+    },
+  },
   mounted() {
     if (this.fileAddr) {
+      this.color1 = this.themeColor;
       this.getData();
     }
   },
@@ -100,6 +116,9 @@ export default {
     },
     // 绘制图表
     drawChart() {
+      if (!this.$refs[`bar-chart${this.index}`]) {
+        return false;
+      }
       const data = [];
       console.log(this.chartData, "this.chartData");
       this.chartData &&
@@ -192,11 +211,13 @@ export default {
     // 根据配色方案设置每个选项的样式
     getOptionStyle(scheme) {
       return {
-        background: `linear-gradient(to right, ${scheme.join(", ")})`,
+        background: `linear-gradient(to right, ${scheme
+          .slice(0, 8)
+          .join(", ")})`,
         color: "#fff",
         height: "30px",
         lineHeight: "30px",
-        borderRadius: "4px",
+        borderRadius: "0px",
       };
     },
   },

src/views/performance/components/chartsCom/powerMarkers2DCharts.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2024-09-11 14:32:12
- * @LastEditTime: 2025-02-21 09:46:55
+ * @LastEditTime: 2025-02-25 09:06:27
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/chartsCom/powerMarkers2DCharts.vue
@@ -64,6 +64,7 @@ import Plotly from "plotly.js-dist";
 import axios from "axios";
 import { myMixin } from "@/mixins/chartRequestMixin";
 import { colorSchemes } from "@/views/overview/js/colors";
+import { mapState } from "vuex";
 export default {
   mixins: [myMixin],
   props: {
@@ -88,20 +89,36 @@ export default {
       colorSchemes: [...colorSchemes],
     };
   },
+  computed: {
+    ...mapState("themes", {
+      themeColor: "themeColor",
+    }),
+  },
+  watch: {
+    themeColor: {
+      handler() {
+        this.color1 = this.themeColor;
+        this.updateChartColor();
+      },
+      deep: true,
+    },
+  },
   async mounted() {
     this.getData();
-    this.color1 = colorSchemes[0].colors;
+    this.color1 = this.themeColor;
     // console.log(this.color1, colorSchemes[0].colors, "color1");
   },
   methods: {
     // 根据配色方案设置每个选项的样式
     getOptionStyle(scheme) {
       return {
-        background: `linear-gradient(to right, ${scheme.join(", ")})`,
+        background: `linear-gradient(to right, ${scheme
+          .slice(0, 8)
+          .join(", ")})`,
         color: "#fff",
         height: "30px",
         lineHeight: "30px",
-        borderRadius: "4px",
+        borderRadius: "0px",
       };
     },
     async getData() {

src/views/performance/components/chartsCom/yawErrorBarSum.vue

@@ -2,7 +2,7 @@
   <div>
     <!-- 图表控制面板 -->
     <div style="display: flex; align-items: center">
-      <div style="margin-right: 20px; display: flex; align-items: center">
+      <!-- <div style="margin-right: 20px; display: flex; align-items: center">
         <el-color-picker
           size="small"
           v-model="color1"
@@ -10,7 +10,7 @@
           @change="updateChartColor"
         ></el-color-picker>
         <span style="margin-left: 10px">自定义颜色</span>
-      </div>
+      </div> -->
       <div>
         <el-button size="small" @click="toggleChartType">
           切换为{{ chartType === "bar" ? "折线图" : "柱状图" }}

src/views/performance/components/chartsCom/yawErrorLine.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-22 09:42:59
- * @LastEditTime: 2025-02-24 09:45:46
+ * @LastEditTime: 2025-02-24 17:36:01
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/chartsCom/yawErrorLine.vue
@@ -52,6 +52,7 @@ import Plotly from "plotly.js-dist";
 import axios from "axios";
 import { myMixin } from "@/mixins/chartRequestMixin"; // 假设你需要的 mixin
 import { colorSchemes } from "@/views/overview/js/colors";
+import { mapState } from "vuex";
 export default {
   props: {
     fileAddr: {
@@ -78,9 +79,24 @@ export default {
       colors: [...colorSchemes[0].colors],
     };
   },
+  computed: {
+    ...mapState("themes", {
+      themeColor: "themeColor",
+    }),
+  },
+  watch: {
+    themeColor: {
+      handler() {
+        this.color1 = this.themeColor;
+        this.updateChartColor();
+      },
+      deep: true,
+    },
+  },
   mounted() {
     if (this.fileAddr) {
       this.getData();
+      this.color1 = this.themeColor;
     }
   },
   methods: {
@@ -204,11 +220,13 @@ export default {
     // 根据配色方案设置每个选项的样式
     getOptionStyle(scheme) {
       return {
-        background: `linear-gradient(to right, ${scheme.join(", ")})`,
+        background: `linear-gradient(to right, ${scheme
+          .slice(0, 8)
+          .join(", ")})`,
         color: "#fff",
         height: "30px",
         lineHeight: "30px",
-        borderRadius: "4px",
+        borderRadius: "0px",
       };
     },
   },

vue.config.js

@@ -66,8 +66,8 @@ module.exports = {
         // target: "http://192.168.5.4:16200", // 石月
         // target: "http://192.168.50.235:16200", // 内网
         // target: "http://192.168.5.15:16200",
-        // target: "http://192.168.50.235:16500", //演示环境
-        target: "http://106.120.102.238:26500", //外网演示环境
+        target: "http://192.168.50.235:16500", //演示环境
+        // target: "http://106.120.102.238:26500", //外网演示环境
         // target: "http://106.120.102.238:16700", // 外网16700  生产16600
         // target: "http://10.96.137.5",
         changeOrigin: true,