فهرست منبع

高亮 合并

rui.jiang 3 ماه پیش
والد
کامیت
2818db20c4

+ 0 - 85
aa.html

@@ -1,85 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>3D Scatter Plot</title>
-    <!-- 使用备用 CDN 加载 Plotly.js -->
-    <script src="https://cdn.bootcdn.net/ajax/libs/plotly.js/2.35.3/plotly.min.js"></script>
-  </head>
-  <body>
-    <div id="plotly-3d-chart" style="width: 100%; height: 600px"></div>
-
-    <script>
-      // 原始数据
-      const xData = [5.1, 4.9, 4.7, 4.6, 5.0, 5.4, 4.6, 5.0, 4.4, 4.9]; // sepal_length
-      const yData = [3.5, 3.0, 3.2, 3.1, 3.6, 3.9, 3.4, 3.4, 2.9, 3.1]; // sepal_width
-      const zData = [0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.2]; // petal_width
-      const species = [
-        "setosa",
-        "setosa",
-        "setosa",
-        "setosa",
-        "setosa",
-        "versicolor",
-        "versicolor",
-        "versicolor",
-        "virginica",
-        "virginica",
-      ];
-
-      // 创建 trace 数组
-      const data = [
-        {
-          type: "scatter3d",
-          mode: "markers",
-          x: xData.slice(0, 5), // Setosa
-          y: yData.slice(0, 5),
-          z: zData.slice(0, 5),
-          marker: {
-            color: ["red", "red", "red", "red", "red"], // 为 Setosa 设置颜色
-            size: 10,
-          },
-          name: "Setosa", // 图例中的名称
-        },
-        {
-          type: "scatter3d",
-          mode: "markers",
-          x: xData.slice(5, 8), // Versicolor
-          y: yData.slice(5, 8),
-          z: zData.slice(5, 8),
-          marker: {
-            color: ["green", "green", "green"], // 为 Versicolor 设置颜色
-            size: 10,
-          },
-          name: "Versicolor", // 图例中的名称
-        },
-        {
-          type: "scatter3d",
-          mode: "markers",
-          x: xData.slice(8), // Virginica
-          y: yData.slice(8),
-          z: zData.slice(8),
-          marker: {
-            color: ["blue", "blue"], // 为 Virginica 设置颜色
-            size: 10,
-          },
-          name: "Virginica", // 图例中的名称
-        },
-      ];
-
-      const layout = {
-        title: "3D Scatter Plot of Iris Dataset",
-        scene: {
-          xaxis: { title: "Sepal Length" },
-          yaxis: { title: "Sepal Width" },
-          zaxis: { title: "Petal Width" },
-        },
-        showlegend: true, // 显示图例
-      };
-
-      // 使用 Plotly 绘制图表
-      Plotly.newPlot("plotly-3d-chart", data, layout);
-    </script>
-  </body>
-</html>

+ 0 - 0
sever/index.js → server/index.js


+ 0 - 0
sever/package.json → server/package.json


+ 51 - 0
src/components/HeaderCom.vue

@@ -65,6 +65,35 @@
             </el-select>
           </div>
           <el-divider></el-divider>
+          <div class="cursor-pointer boxmini">
+            <p>图表主题:</p>
+            <el-select
+              size="mini"
+              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)" -->
+                <span
+                  v-for="color in scheme.colors.slice(0, 8)"
+                  :style="{
+                    background: color,
+                    width: '20px',
+                    height: '20px',
+                    display: 'inline-block',
+                  }"
+                ></span>
+              </el-option>
+            </el-select>
+          </div>
+          <el-divider></el-divider>
           <div class="cursor-pointer boxmini" @click="skip(1)">
             <p class="logout">退出登录</p>
           </div>
@@ -76,9 +105,14 @@
 
 <script>
 import { userLogout } from "@/api/system";
+import { mapActions } from "vuex";
+import { colorSchemes } from "@/views/overview/js/colors";
 export default {
   data() {
     return {
+      color1: [], // 默认颜色
+      // 配色方案列表(每个方案是一个颜色数组)
+      colorSchemes: [...colorSchemes],
       currentDate: "",
       currentTheme: this.$store.state.themes.theme,
       colorData: [
@@ -105,6 +139,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",
+      };
+    },
     changeTheme(theme) {
       this.$store.dispatch("switchTheme", theme);
     },

+ 127 - 29
src/views/admin/cockpitManage/component/leftdata.vue

@@ -5,7 +5,8 @@
       <div class="BOXsan">
         <div class="YC02" @click="getwgl">
           <strong class="texyellow">
-            {{ onrelevance ? onrelevance : 0 }}</strong>
+            {{ onrelevance ? onrelevance : 0 }}</strong
+          >
           <span>待分析任务</span>
         </div>
         <div class="YC02" @click="getwfx">
@@ -23,13 +24,29 @@
         <!-- 外部容器设置最大高度和滚动条 -->
         <div style="max-height: 400px; overflow-y: auto">
           <el-table :data="glData" style="width: 100%">
-            <el-table-column prop="fieldName" label="风场名称" width="180"></el-table-column>
-            <el-table-column prop="analysisName" label="分析名称"></el-table-column>
-            <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
+            <el-table-column
+              prop="fieldName"
+              label="风场名称"
+              width="180"
+            ></el-table-column>
+            <el-table-column
+              prop="analysisName"
+              label="分析名称"
+            ></el-table-column>
+            <el-table-column
+              prop="createTime"
+              label="创建时间"
+              width="180"
+            ></el-table-column>
 
             <el-table-column fixed="right" label="操作" width="100">
               <template slot-scope="scope">
-                <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
+                <el-button
+                  @click="handleClick(scope.row)"
+                  type="text"
+                  size="small"
+                  >编辑</el-button
+                >
               </template>
             </el-table-column>
           </el-table>
@@ -47,7 +64,12 @@
             </el-table-column>
             <el-table-column fixed="right" label="操作" width="100">
               <template slot-scope="scope">
-                <el-button @click="YChandleClick(scope.row)" type="text" size="small">编辑</el-button>
+                <el-button
+                  @click="YChandleClick(scope.row)"
+                  type="text"
+                  size="small"
+                  >编辑</el-button
+                >
               </template>
             </el-table-column>
           </el-table>
@@ -65,7 +87,9 @@
             </el-table-column>
             <el-table-column fixed="right" label="操作" width="100">
               <template slot-scope="scope">
-                <el-button @click="PDClick(scope.row)" type="text" size="small">编辑</el-button>
+                <el-button @click="PDClick(scope.row)" type="text" size="small"
+                  >编辑</el-button
+                >
               </template>
             </el-table-column>
           </el-table>
@@ -86,8 +110,13 @@
       </h3>
       <div>
         <p class="titleYC"><span>风场名称</span><span>入库时间</span></p>
-        <tabroll :table-data="tableData" :shujuloading="shujuloading" :columns="YCtableColumns"
-          :column-widths="YCcolumnWidths" :max-height="140"></tabroll>
+        <tabroll
+          :table-data="tableData"
+          :shujuloading="shujuloading"
+          :columns="YCtableColumns"
+          :column-widths="YCcolumnWidths"
+          :max-height="140"
+        ></tabroll>
 
         <!-- <el-table
           :data="tableData"
@@ -116,13 +145,27 @@
       </div>
     </div>
 
-    <el-dialog title="实时数据采集统计" :visible.sync="lineShow" width="1340px" :before-close="handleClose">
+    <el-dialog
+      title="实时数据采集统计"
+      :visible.sync="lineShow"
+      width="1340px"
+      :before-close="handleClose"
+    >
       <el-container>
         <el-aside width="300px">
           <h1>当日实时数据</h1>
-          <el-input placeholder="请输入内容" size="small" v-model="searchvalue" prefix-icon="el-icon-search"></el-input>
+          <el-input
+            placeholder="请输入内容"
+            size="small"
+            v-model="searchvalue"
+            prefix-icon="el-icon-search"
+          ></el-input>
           <div class="windbox">
-            <div class="windlist" v-for="(item, index) in windList" :key="index">
+            <div
+              class="windlist"
+              v-for="(item, index) in windList"
+              :key="index"
+            >
               <h3>{{ item.fieldName }}</h3>
               <p>数据类型:{{ item.dataType }}</p>
               <p>采集次数:{{ item.collectCount }} 次</p>
@@ -135,21 +178,37 @@
             <p>
               风场名称:
               <el-select v-model="windvalue" placeholder="请选择" size="small">
-                <el-option v-for="item in windoptions" :key="item.value" :label="item.label" :value="item.value">
+                <el-option
+                  v-for="item in windoptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
                 </el-option>
               </el-select>
             </p>
             <p>
               转换类型:
               <el-select v-model="typevalue" placeholder="请选择" size="small">
-                <el-option v-for="item in typeoptions" :key="item.value" :label="item.label" :value="item.value">
+                <el-option
+                  v-for="item in typeoptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
                 </el-option>
               </el-select>
             </p>
             <p>
               时间范围:
-              <el-date-picker size="small" v-model="value1" type="daterange" range-separator="至"
-                start-placeholder="开始日期" end-placeholder="结束日期">
+              <el-date-picker
+                size="small"
+                v-model="value1"
+                type="daterange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+              >
               </el-date-picker>
             </p>
             <div>
@@ -158,13 +217,27 @@
             </div>
           </div>
 
-          <el-table :data="ListtableData" style="width: 100%" class="custom-table">
+          <el-table
+            :data="ListtableData"
+            style="width: 100%"
+            class="custom-table"
+          >
             <el-table-column prop="name" label="风场名称"> </el-table-column>
             <el-table-column prop="type" label="类型" align="center">
             </el-table-column>
-            <el-table-column prop="address" label="采集总天数" align="center" width="150">
+            <el-table-column
+              prop="address"
+              label="采集总天数"
+              align="center"
+              width="150"
+            >
             </el-table-column>
-            <el-table-column prop="count" label="采集总条数" align="center" width="180">
+            <el-table-column
+              prop="count"
+              label="采集总条数"
+              align="center"
+              width="180"
+            >
             </el-table-column>
             <el-table-column prop="daytime" label="最近采集时间" align="center">
             </el-table-column>
@@ -178,12 +251,37 @@
     <el-dialog title="入库信息" width="70%" :visible.sync="dialogTableVisible">
       <el-button size="small" @click="importdata">导入数据</el-button>
       <el-table :data="gridData" style="max-height: 400px; overflow: auto">
-        <el-table-column property="windFarmName" label="风场名称" show-overflow-tooltip width="150px"></el-table-column>
-        <el-table-column property="minuteTimeAreaList" label="SCADA分钟级" show-overflow-tooltip></el-table-column>
-        <el-table-column property="secondTimeAreaList" label="SCADA秒级" show-overflow-tooltip></el-table-column>
-        <el-table-column property="faultTimeAreaList" label="故障数据" show-overflow-tooltip></el-table-column>
-        <el-table-column property="warnTimeAreaList" label="报警数据" show-overflow-tooltip></el-table-column>
-        <el-table-column property="vibrationTimeAreaList" label="振动数据" show-overflow-tooltip></el-table-column>
+        <el-table-column
+          property="windFarmName"
+          label="风场名称"
+          show-overflow-tooltip
+          width="150px"
+        ></el-table-column>
+        <el-table-column
+          property="minuteTimeAreaList"
+          label="SCADA分钟级"
+          show-overflow-tooltip
+        ></el-table-column>
+        <el-table-column
+          property="secondTimeAreaList"
+          label="SCADA秒级"
+          show-overflow-tooltip
+        ></el-table-column>
+        <el-table-column
+          property="faultTimeAreaList"
+          label="故障数据"
+          show-overflow-tooltip
+        ></el-table-column>
+        <el-table-column
+          property="warnTimeAreaList"
+          label="报警数据"
+          show-overflow-tooltip
+        ></el-table-column>
+        <el-table-column
+          property="vibrationTimeAreaList"
+          label="振动数据"
+          show-overflow-tooltip
+        ></el-table-column>
       </el-table>
     </el-dialog>
   </div>
@@ -363,7 +461,7 @@ export default {
     this.getbacklog();
     this.ruku();
   },
-  mounted() { },
+  mounted() {},
   methods: {
     getbacklog() {
       queryWaitTask().then((res) => {
@@ -375,7 +473,7 @@ export default {
     getwgl() {
       const arr = {
         pageSize: 999,
-        analysisState: -1,
+        analysisState: "-1",
       };
       analysisResultList(arr).then((res) => {
         this.glData = res.data.list;
@@ -419,7 +517,7 @@ export default {
 
     handleClick(row) {
       const fieldName = row.fieldName; // 获取当前行的 fieldName 数据
-      const analysisState = -1;
+      const analysisState = "-1";
       // 打开新窗口
       const newWindow = window.open(
         "/home/performance/assetssMag?id=195",
@@ -434,7 +532,7 @@ export default {
     YChandleClick(row) {
       const fieldName = row.fieldName; // 获取当前行的 fieldName 数据
       const errState = 1;
-      const analysisState = 30;
+      const analysisState = "30";
       // 打开新窗口
       const newWindow = window.open(
         "/home/performance/assetssMag?id=195",

+ 2 - 1
src/views/overview/components/analysis_information/index.vue

@@ -48,7 +48,8 @@
           <span class="headerMessage">{{ fieldInfo.latitude }} </span>°
         </div>
         <div>
-          该风电场由{{ fieldInfo.companyName }}管理,风场总容量为
+          <!-- 该风电场由{{ fieldInfo.companyName }}管理, -->
+          风场总容量为
           <span class="headerMessage"
             >{{ fieldInfo.ratedCapacityNumber }} MW
           </span>

+ 2 - 2
src/views/overview/components/cp/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-09 18:05:58
- * @LastEditTime: 2025-02-26 10:39:16
+ * @LastEditTime: 2025-02-27 15:37:36
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/cp/index.vue
@@ -316,7 +316,7 @@ export default {
     //获取选中风机list
     getEnfineList(data, setUpImg) {
       this.fieldEngineCodes = data;
-      this.setUpImgData = setUpImg;
+      this.setUpImgData = [...setUpImg];
       this.getAnalysisDetail();
     },
     //下一条

+ 12 - 15
src/views/overview/components/filterChart/index.vue

@@ -1,11 +1,3 @@
-<!--
- * @Author: your name
- * @Date: 2025-01-13 14:53:21
- * @LastEditTime: 2025-02-26 14:10:27
- * @LastEditors: bogon
- * @Description: In User Settings Edit
- * @FilePath: /performance-test/src/views/overview/components/filterChart/index.vue
--->
 <template>
   <div class="filterChart">
     <h3>图像设置:</h3>
@@ -143,7 +135,11 @@ export default {
           },
           {
             label: "发电机转速",
-            text: ["发电机转速(r/min)", "发电机转速(r/min)"],
+            text: [
+              "发电机转速(r/min)",
+              "发电机转速(r/min)",
+              "发电机转速(r/min)",
+            ],
             dtick: null, //步长
             min: null, //最小值
             max: null, //最大值
@@ -162,19 +158,20 @@ export default {
   },
   created() {
     // 确保 this.form.dgeneratorSpeed 和 this.setUpimg 都已经初始化
-    if (
-      Array.isArray(this.form.dgeneratorSpeed) &&
-      Array.isArray(this.setUpimg)
-    ) {
+    // 保证只有在通过事件传递数据时才更新
+    if (this.setUpimg.length > 0) {
       this.form.dgeneratorSpeed = this.form.dgeneratorSpeed.filter(
-        (item) => this.setUpimg.includes(item.label) // 过滤出 label  setUpimg 中的项
+        (item) => this.setUpimg.includes(item.label) // 过滤出label在setUpimg中的项
       );
+    } else {
+      this.form.dgeneratorSpeed = [];
     }
   },
 
   methods: {
     onSearch() {
-      this.$emit("getEnfineList", this.form.value2, this.form.dgeneratorSpeed);
+      const data = JSON.parse(JSON.stringify(this.form.dgeneratorSpeed));
+      this.$emit("getEnfineList", this.form.value2, data);
     },
     onSubmit(type) {
       if (type === "handlePrevious") {

+ 2 - 2
src/views/overview/components/power_scatter_2D/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-09 18:10:35
- * @LastEditTime: 2025-02-26 11:19:41
+ * @LastEditTime: 2025-02-28 11:07:08
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/power_scatter_2D/index.vue
@@ -37,7 +37,7 @@
       <VirtualList
         :list="diagramRelationsDatas"
         keyField="fieldEngineCode"
-        :itemSize="452"
+        :itemSize="500"
         v-slot="{ item, index }"
       >
         <powerMarkers2DCharts

+ 1 - 60
src/views/overview/index.vue

@@ -117,44 +117,7 @@
         </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"
@@ -184,17 +147,12 @@
 <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, //控制上一条、下一条是否显示
       // 用于控制是否展开/收起
@@ -249,23 +207,6 @@ 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;
     },

+ 2 - 3
src/views/performance/assetssMag.vue

@@ -836,9 +836,8 @@ export default {
       this.getQueryCodeNumList();
     },
     examine() {
-      this.$router.push({
-        path: "/transition",
-      });
+      const targetUrl = this.$router.resolve({ name: "transition" }).href;
+      window.open(targetUrl, "_blank");
     },
   },
   mounted() {

+ 79 - 15
src/views/performance/components/chartsCom/3DDrawingChart.vue

@@ -35,16 +35,12 @@
     </div>
 
     <!-- 图表展示区域 -->
-    <div style="height: 600px">
-      <div
-        :id="`plotly-3d-chart-` + index"
-        style="width: 100%; height: 600px"
-      ></div>
+    <div style="height: 500px">
       <div
         v-loading="loading"
         :id="`plotly-3d-chart-` + index"
         ref="plotlyChart"
-        style="height: 600px"
+        style="height: 500px; background-color: #e5ecf6"
       >
         <el-empty v-if="isError" description="请求失败"></el-empty>
       </div>
@@ -227,8 +223,11 @@ export default {
           },
           yaxis: {
             title: this.chartData.yaixs,
+            tickvals: [...new Set(this.chartData.data[0].yData)],
+            ticktext: [...new Set(this.chartData.data[0].yData)],
             gridcolor: "rgb(255,255,255)",
             tickcolor: "rgb(255,255,255)",
+
             backgroundcolor: "#e5ecf6",
             showbackground: true,
           },
@@ -239,18 +238,44 @@ export default {
             backgroundcolor: "#e5ecf6",
             showbackground: true,
           },
-          // aspectratio: {
-          //   x: 1,
-          //   y: 3,
-          //   z: 1,
-          // },
+          aspectratio: {
+            x: 3,
+            y: 1.5,
+            z: 1,
+          },
           plot_bgcolor: "#e5ecf6",
           gridcolor: "#fff",
+          bgcolor: "#e5ecf6", // 设置背景颜色
           // camera: {
-          //   center: { x: 0, y: 0, z: 0 },
-          //   eye: { x: 0, y: 0, z: 2.5 },
-          //   up: { x: 0, y: 0, z: 1 },
+          //   //原始1
+          //   center: { x: -0.233946, y: -0.319396, z: 0.483055 },
+          //   eye: { x: -1.729102, y: -3.506569, z: -1.296184 },
+          //   up: { x: 0.12359, y: 0.43886022, z: -0.89001518 },
+          //   projection: {
+          //     type: "perspective",
+          //   },
           // },
+          camera: {
+            //原始3
+            center: {
+              x: -0.375472972541404,
+              y: -0.5585992748989729,
+              z: -0.02739771471583052,
+            },
+            eye: {
+              x: -0.5046744702181177,
+              y: -3.1376489494672195,
+              z: 1.7379514809127419,
+            },
+            up: {
+              x: 0.036764743754523974,
+              y: 0.5632076795906327,
+              z: 0.8254971007016315,
+            },
+            projection: {
+              type: "perspective",
+            },
+          },
         },
         margin: { t: 50, b: 50, l: 50, r: 50 },
         staticPlot: false,
@@ -265,6 +290,7 @@ export default {
       const getChartSetUp = (axisTitle) => {
         return this.setUpImgData.find((item) => item.text.includes(axisTitle));
       };
+
       // 更新x轴和y轴的范围与步长
       const xChartSetUp = getChartSetUp(layout.scene.xaxis.title);
       if (xChartSetUp) {
@@ -281,13 +307,51 @@ export default {
         layout.scene.zaxis.dtick = zChartSetUp.dtick;
         layout.scene.zaxis.range = [zChartSetUp.min, zChartSetUp.max];
       }
-      Plotly.newPlot(`plotly-3d-chart-` + this.index, traces, layout);
+
+      try {
+        // 假设这里是 WebGL 的相关初始化代码
+        Plotly.react(`plotly-3d-chart-` + this.index, traces, layout).catch(
+          (err) => {
+            console.error("WebGL 错误: ", err);
+            // 你可以根据错误类型做更多处理
+            if (err.message.includes("shaderSource")) {
+              // alert("着色器编译失败!");
+            }
+          }
+        );
+        // 监听图表的 relayout 事件,获取并输出相机视角
+        const plotElement = document.getElementById(
+          `plotly-3d-chart-` + this.index
+        );
+
+        plotElement.on("plotly_relayout", function (eventData) {
+          // 在每次布局变更时,打印当前相机视角
+          if (eventData["scene.camera"]) {
+            console.log(
+              "当前相机视角:",
+              eventData["scene.camera"],
+              eventData["scene.aspectratio"]
+            );
+          }
+        });
+      } catch (e) {
+        console.error("捕获到 WebGL 错误:", e);
+        // alert("图表渲染失败!");
+      }
+      // Plotly.newPlot(`plotly-3d-chart-` + this.index, traces, layout);
     },
   },
 };
 </script>
 
 <style scoped>
+/* #scene {
+  background: #e5ecf6 !important;
+}
+.js-plotly-plot .plotly,
+.js-plotly-plot .plotly div {
+  background: #e5ecf6 !important;
+} */
 /* 样式可以根据需求自定义 */
 #plotly-3d-chart {
   width: 100%;

+ 9 - 2
src/views/performance/components/chartsCom/BarChart.vue

@@ -1,8 +1,8 @@
 <!--
  * @Author: your name
  * @Date: 2024-09-11 14:30:17
- * @LastEditTime: 2025-02-21 15:18:51
- * @LastEditors: bogon
+ * @LastEditTime: 2025-02-28 09:23:52
+ * @LastEditors: milo-MacBook-Pro.local
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/chartsCom/BarChart.vue
 -->
@@ -144,6 +144,13 @@ export default {
         },
         autosize: true, // 开启自适应
       };
+      if (
+        this.chartData.xaixs === "机组" ||
+        this.chartData.xaixs === "机组名称"
+      ) {
+        layout.xaxis.tickvals = this.chartData.data[0].xData;
+        layout.xaxis.ticktext = this.chartData.data[0].xData;
+      }
 
       // 渲染图表
       Plotly.newPlot(

+ 8 - 0
src/views/performance/components/chartsCom/BoxLineCharts.vue

@@ -168,6 +168,7 @@ export default {
         boxpoints: false,
         boxmean: false,
         name: filteredData.title,
+        fillcolor: "#406DAB", // 设置箱线图填充颜色,带透明度
         hovertemplate:
           `${this.chartData.xaixs}:` +
           ` %{x} <br> ` +
@@ -199,6 +200,13 @@ export default {
         yaxis: { title: this.chartData.yaixs },
         showlegend: true,
       };
+      if (
+        this.chartData.xaixs === "机组" ||
+        this.chartData.xaixs === "机组名称"
+      ) {
+        layout.xaxis.tickvals = [...new Set(filteredData.xData)];
+        layout.xaxis.ticktext = [...new Set(filteredData.xData)];
+      }
 
       const getChartSetUp = (axisTitle) => {
         return this.setUpImgData.find((item) => item.text.includes(axisTitle));

+ 1 - 1
src/views/performance/components/chartsCom/BoxMarkersCharts.vue

@@ -71,7 +71,6 @@ export default {
         try {
           this.loading = true;
           this.cancelToken = axios.CancelToken.source();
-
           const resultChartsData = await axios.get(this.fileAddr, {
             cancelToken: this.cancelToken.token,
           });
@@ -147,6 +146,7 @@ export default {
           marker: {
             color: group.color,
           },
+          fillcolor: "#406DAB", // 设置箱线图填充颜色,带透明度
           boxpoints: false, // 是否显示异常值
           boxmean: true, // 是否显示均值
           hovertemplate: (data) => {

+ 28 - 1
src/views/performance/components/chartsCom/Radar.vue

@@ -109,7 +109,8 @@ export default {
         this.chartData.Thi,
         this.chartData.Ws,
       ];
-
+      // 将中位值存入 window,确保 tooltip 访问
+      window.medianValues = this.medianValues;
       // 雷达图的指示器,使用最大值、最小值和中位值来动态设置
       const indicators = [
         {
@@ -137,8 +138,34 @@ export default {
           text: this.chartData.wind_turbine_name + "机组指标",
           left: "center",
         },
+
         tooltip: {
           trigger: "item",
+          formatter: (params) => {
+            const indicators = [
+              "风机能量利用率",
+              "风机可利用率",
+              "平均风速",
+              "利用小时",
+              "功率曲线一致性系数",
+            ];
+            // 获取当前鼠标悬停的数据
+            const values = params.value;
+            const medianValues = window.medianValues || [];
+            let content = `<strong>${params.seriesName}</strong><br/>`;
+            console.log("aa");
+            for (let i = 0; i < indicators.length; i++) {
+              // 判断是否是当前鼠标悬停的指标
+              if (params.encode && params.encode[`indicator_${i}`]) {
+                // 判断当前悬停的值是否与该指标匹配
+
+                // if (params.encode[`indicator_${i}`][0] === params.dataIndex) {
+                content += `${indicators[i]}: ${values[i]}<br/>中位值: ${medianValues[i]}<br/><br/>`;
+                // }
+              }
+            }
+            return content;
+          },
         },
         radar: {
           indicator: indicators,

+ 59 - 13
src/views/performance/components/chartsCom/Time3DChart.vue

@@ -37,10 +37,8 @@
       v-loading="loading"
       :id="`plotly-3d-chart-` + index"
       ref="plotlyChart"
-      style="height: 600px"
-    >
-      <el-empty v-if="isError" description="请求失败"></el-empty>
-    </div>
+      style="height: 500px; background-color: #e5ecf6"
+    ></div>
   </div>
 </template>
 
@@ -224,18 +222,46 @@ export default {
             backgroundcolor: "#e5ecf6",
             showbackground: true,
           },
-          // aspectratio: {
-          //   x: 1,
-          //   y: 3,
-          //   z: 1,
-          // },
+          bgcolor: "#e5ecf6", // 设置背景颜色
+
+          aspectratio: {
+            x: 3,
+            y: 1.5,
+            z: 1,
+          },
           plot_bgcolor: "#e5ecf6",
           gridcolor: "#fff",
+          backgroundcolor: "#e5ecf6", // 设置背景颜色为白色
+
           // camera: {
-          //   center: { x: 0, y: 0, z: 0 },
-          //   eye: { x: 0, y: 0, z: 2.5 },
-          //   up: { x: 0, y: 0, z: 1 },
+          //   center: { x: -0.233946, y: -0.319396, z: 0.483055 },
+          //   eye: { x: -1.729102, y: -3.506569, z: -1.296184 },
+          //   up: { x: 0.12359, y: 0.43886022, z: -0.89001518 },
+          //   projection: {
+          //     type: "perspective",
+          //   },
           // },
+          camera: {
+            //原始3
+            center: {
+              x: -0.375472972541404,
+              y: -0.5585992748989729,
+              z: -0.02739771471583052,
+            },
+            eye: {
+              x: -0.5046744702181177,
+              y: -3.1376489494672195,
+              z: 1.7379514809127419,
+            },
+            up: {
+              x: 0.036764743754523974,
+              y: 0.5632076795906327,
+              z: 0.8254971007016315,
+            },
+            projection: {
+              type: "perspective",
+            },
+          },
         },
         margin: { t: 50, b: 50, l: 50, r: 50 },
         staticPlot: false,
@@ -266,8 +292,21 @@ export default {
         layout.scene.zaxis.dtick = zChartSetUp.dtick;
         layout.scene.zaxis.range = [zChartSetUp.min, zChartSetUp.max];
       }
-      console.log(zChartSetUp, yChartSetUp, xChartSetUp, "xChartSetUp");
       Plotly.newPlot(`plotly-3d-chart-` + this.index, traces, layout);
+      // 监听图表的 relayout 事件,获取并输出相机视角
+      const plotElement = document.getElementById(
+        `plotly-3d-chart-` + this.index
+      );
+      plotElement.on("plotly_relayout", function (eventData) {
+        // 在每次布局变更时,打印当前相机视角
+        if (eventData["scene.camera"]) {
+          console.log(
+            "当前相机视角:",
+            eventData["scene.camera"],
+            eventData["scene.aspectratio"]
+          );
+        }
+      });
     },
 
     updateChartColor() {
@@ -300,4 +339,11 @@ export default {
 ::v-deep canvas {
   /* height: 400px !important; */
 }
+/* .js-plotly-plot .plotly,
+.js-plotly-plot .plotly div {
+  background: #e5ecf6 !important;
+}
+#scene {
+  background: #e5ecf6 !important;
+} */
 </style>

+ 20 - 3
src/views/performance/components/chartsCom/TwoDMarkersChart.vue

@@ -420,11 +420,29 @@ export default {
           "marker.size": [newSize],
         });
 
+        // 确保选中的点在最上面
+        const scatterTrace = gd.data[0]; // 原来的散点数据
+        const selectedTrace = {
+          x: this.selectedPoints.map((p) => p.x),
+          y: this.selectedPoints.map((p) => p.y),
+          mode: "markers",
+          type: "scattergl",
+          marker: {
+            color: "red", // 选中点颜色
+            size: 10,
+          },
+        };
+
+        // 合并数据,并保证选中点在最后
+        const updatedTraces = [scatterTrace, selectedTrace]; // 选中的点 `selectedTrace` 放在最后
+
+        // 更新图表
+        Plotly.react(gd, updatedTraces, gd.layout);
+
         // 处理选中的数据
         this.getSelectData(this.selectedPoints, gd.layout);
       });
     },
-
     handleClearSelect(gd) {
       this.selectedPoints = [];
       Plotly.restyle(gd, {
@@ -435,11 +453,10 @@ export default {
     getSelectData(selectedPoints, layout) {
       // 在这里处理选中的数据,您可以将其展示或导出等
       console.log("选中的点数据:", selectedPoints);
-      console.log("布局信息:", layout);
     },
     handleDownloadCSV(gd) {
       if (this.selectedPoints.length === 0) {
-        alert("没有选中的数据");
+        alert("没有选中的数据,请选择数据后进行文件下载。");
         return;
       }
       this.downloadCSV();

+ 23 - 9
src/views/performance/components/chartsCom/powerMarkers2DCharts.vue

@@ -1,16 +1,13 @@
 <!--
  * @Author: your name
  * @Date: 2024-09-11 14:32:12
- * @LastEditTime: 2025-02-26 15:01:26
+ * @LastEditTime: 2025-02-28 11:13:02
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/chartsCom/powerMarkers2DCharts.vue
 -->
-<!-- <template>
-  <div> -->
-<!-- powerMarkers2DCharts
-    <h1>逐月有功功率散点2D分析</h1> -->
-<!-- <h1>偏航控制策略异常检测 2D</h1>  目前没找到这个分析模型-->
+<!-- <h1>逐月有功功率散点2D分析</h1> 
+ <h1>偏航控制策略异常检测 2D</h1>  目前没找到这个分析模型-->
 <template>
   <div style="min-height: 300px">
     <!-- 2D散点图 -->
@@ -345,7 +342,6 @@ export default {
         });
       });
     },
-
     handleSelectClick(gd) {
       // 绑定 plotly_click 事件
       gd.on("plotly_click", (data) => {
@@ -417,11 +413,29 @@ export default {
           "marker.size": [newSize],
         });
 
+        // 确保选中的点在最上面
+        const scatterTrace = gd.data[0]; // 原来的散点数据
+        const selectedTrace = {
+          x: this.selectedPoints.map((p) => p.x),
+          y: this.selectedPoints.map((p) => p.y),
+          mode: "markers",
+          type: "scattergl",
+          marker: {
+            color: "red", // 选中点颜色
+            size: 10,
+          },
+        };
+
+        // 合并数据,并保证选中点在最后
+        const updatedTraces = [scatterTrace, selectedTrace]; // 选中的点 `selectedTrace` 放在最后
+
+        // 更新图表
+        Plotly.react(gd, updatedTraces, gd.layout);
+
         // 处理选中的数据
         this.getSelectData(this.selectedPoints, gd.layout);
       });
     },
-
     handleClearSelect(gd) {
       this.selectedPoints = [];
       Plotly.restyle(gd, {
@@ -436,7 +450,7 @@ export default {
     },
     handleDownloadCSV(gd) {
       if (this.selectedPoints.length === 0) {
-        alert("没有选中的数据");
+        alert("没有选中的数据,请选择数据后进行文件下载。");
         return;
       }
       this.downloadCSV();