添加需求时序图时间展示及时间过滤

src/api/performance.js

@@ -1,12 +1,20 @@
 /*
  * @Author: your name
  * @Date: 2024-06-03 09:29:50
- * @LastEditTime: 2025-01-20 18:58:23
+ * @LastEditTime: 2025-02-12 17:32:36
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/api/performance。.js
  */
 import request from "@/utils/request";
+//插队接口
+export function editPriority(data) {
+  return request({
+    url: "/energy-manage-service/analysisPriority/editPriority",
+    method: "post",
+    data,
+  });
+}
 //分析选择某个图表类型
 export function queryAnalysisTypeConfig(data) {
   return request({

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-09 18:06:09
- * @LastEditTime: 2025-02-12 15:14:15
+ * @LastEditTime: 2025-02-14 13:34:00
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/cp_trend/index.vue
@@ -37,13 +37,13 @@
       <VirtualList
         :list="diagramRelationsDatas"
         keyField="fieldEngineCode"
-        :itemSize="452"
+        :itemSize="500"
         v-slot="{ item, index }"
       >
         <BoxLineCharts
-          :key="`${new Date().getTime()}` + item.fieldEngineCode + index"
-          :index="`${new Date().getTime()}` + index"
-          :ref="`${new Date().getTime()}` + item.fieldEngineCode"
+          :key="item.fieldEngineCode + index"
+          :index="index + item.fieldEngineCode"
+          :ref="item.fieldEngineCode"
           :fileAddr="item.fileAddr"
         ></BoxLineCharts>
       </VirtualList>

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-09 18:10:08
- * @LastEditTime: 2025-02-12 16:17:41
+ * @LastEditTime: 2025-02-13 11:21:00
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/power_curve/index.vue
@@ -47,7 +47,7 @@
                       powerCurveDom && powerCurveDom.powerCurveTableData
                     )
                   "
-                  >导出表格数据</el-button
+                  >导出功率曲线数据</el-button
                 >
                 <!-- <el-table
                   :data="powerCurveDom.powerCurveTableData"

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-10 09:10:11
- * @LastEditTime: 2025-02-12 17:04:37
+ * @LastEditTime: 2025-02-13 10:36:07
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/tsr/index.vue
@@ -63,7 +63,12 @@
         >
         </lineChartsFen>
       </div>
-
+      <el-empty
+        description="暂无分析记录"
+        v-if="
+          generalFilesDatas.length === 0 && diagramRelationsDatas.length === 0
+        "
+      ></el-empty>
       <el-dialog
         v-if="isShowDescription"
         title="添加评论"

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-10 09:10:24
- * @LastEditTime: 2025-02-10 14:54:01
+ * @LastEditTime: 2025-02-13 10:39:33
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/tsr_cp_power/index.vue
@@ -64,6 +64,12 @@
         >
         </lineChartsFen>
       </div>
+      <el-empty
+        description="暂无分析记录"
+        v-if="
+          generalFilesDatas.length === 0 && diagramRelationsDatas.length === 0
+        "
+      ></el-empty>
       <el-dialog
         v-if="isShowDescription"
         title="添加评论"

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-10 09:10:39
- * @LastEditTime: 2025-02-10 14:34:30
+ * @LastEditTime: 2025-02-14 13:34:29
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/tsr_trend/index.vue
@@ -34,7 +34,7 @@
       <VirtualList
         :list="diagramRelationsDatas"
         keyField="fieldEngineCode"
-        :itemSize="452"
+        :itemSize="500"
         v-slot="{ item, index }"
       >
         <BoxMarkersCharts

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

@@ -1,8 +1,8 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-10 09:10:59
- * @LastEditTime: 2025-02-10 14:54:20
- * @LastEditors: bogon
+ * @LastEditTime: 2025-02-13 10:37:52
+ * @LastEditors: milo-MacBook-Pro.local
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/tsr_windspeed/index.vue
 -->
@@ -63,7 +63,12 @@
         >
         </lineChartsFen>
       </div>
-
+      <el-empty
+        description="暂无分析记录"
+        v-if="
+          generalFilesDatas.length === 0 && diagramRelationsDatas.length === 0
+        "
+      ></el-empty>
       <el-dialog
         v-if="isShowDescription"
         title="添加评论"

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-10 09:11:23
- * @LastEditTime: 2025-02-12 16:52:55
+ * @LastEditTime: 2025-02-13 09:48:29
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/wind_spee/index.vue
@@ -39,12 +39,19 @@
         :itemSize="452"
         v-slot="{ item, index }"
       >
-        <BarChart
+        <!-- {{ item.fileAddr }} -->
+        <!-- <BarChart
           :key="`${new Date().getTime()}` + item.batchCode + index"
-          :inds="`${new Date().getTime()}` + index + 'barChart'"
+          :inds="`${new Date().getTime()}` + index"
           :ref="`${new Date().getTime()}` + item.batchCode"
           :fileAddr="item.fileAddr"
-        ></BarChart>
+        ></BarChart> -->
+        <!-- <BarChart
+          :key="item.batchCode + index"
+          :inds="index + 'barChart'"
+          :ref="item.batchCode"
+          :fileAddr="item.fileAddr"
+        ></BarChart> -->
       </VirtualList>
       <el-dialog
         v-if="isShowDescription"

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-10 09:26:12
- * @LastEditTime: 2025-02-12 17:14:59
+ * @LastEditTime: 2025-02-13 11:08:01
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/yaw_error_density/index.vue
@@ -36,13 +36,20 @@
         :itemSize="452"
         v-slot="{ item, index }"
       >
-        <TwoDMarkersChart
+        <!-- <TwoDMarkersChart
           :index="index + item.fieldEngineCode"
           :key="item.fieldEngineCode"
           :ref="item.fieldEngineCode"
           :fileAddr="item.fileAddr"
         >
-        </TwoDMarkersChart>
+        </TwoDMarkersChart> -->
+        <YawErrorDensityChart
+          :index="index + item.fieldEngineCode"
+          :key="item.fieldEngineCode"
+          :ref="item.fieldEngineCode"
+          :fileAddr="item.fileAddr"
+        >
+        </YawErrorDensityChart>
       </VirtualList>
       <!-- <div class="charts" v-if="diagramRelationsDatas">
         <RecycleScroller class="scroller" :items="diagramRelationsDatas" :item-size="452" 
@@ -102,6 +109,7 @@
 import DicCard from "@/views/overview/components/dicCard/index.vue";
 import FilterChart from "@/views/overview/components/filterChart/index.vue";
 import TwoDMarkersChart from "@/views/performance/components/chartsCom/TwoDMarkersChart.vue";
+import YawErrorDensityChart from "@/views/performance/components/chartsCom/YawErrorDensityChart.vue";
 import TinymceEditor from "@/components/Tinymce.vue";
 import {
   analysisDetail,
@@ -114,6 +122,7 @@ export default {
     DicCard,
     FilterChart,
     TwoDMarkersChart,
+    YawErrorDensityChart,
     TinymceEditor,
   },
   props: {

src/views/overview/index.vue

@@ -120,7 +120,7 @@
     </div>
 
     <el-dialog
-      :title="dialogInitBatchCode"
+      :title="'分析主题：' + batchTitle"
       :visible="isShowComment"
       width="40%"
       v-dialogDrag
@@ -160,6 +160,8 @@ export default {
       isExpanded: false,
       expandedKeys: [], //默认展开的节点
       batchCodeList: [], //批次数组用于切换上一条、下一条
+      batchList: [], //批次列表
+      batchTitle: "", //浮窗title
       initBatchCode: "", // 初始化分析编号
       dialogInitBatchCode: "",
       analysisTypeCode: "", // 当前选中的分析类型
@@ -271,6 +273,10 @@ export default {
                       this.initBatchCode = bc.batchCode; // 初始化选中的节点
                     }
                     this.batchCodeList.push(bc.batchCode);
+                    this.batchList.push({
+                      batchCode: bc.batchCode,
+                      batchName: bc.analysisName,
+                    });
                     return {
                       //三级
                       fieldOrCompanyName: bc.analysisName,
@@ -318,6 +324,11 @@ export default {
       // this.initBatchCode = val;
       this.isShowComment = true;
       this.dialogInitBatchCode = val;
+      const batchObj = this.batchList.find((item) =>
+        item.batchCode === val ? item.batchName : ""
+      );
+      this.batchTitle = batchObj.batchName;
+      console.log(this.batchTitle, "this.batchTitle");
     },
 
     // 关闭上一条、下一条弹窗展示组件设置

src/views/performance/assetssMag.vue

@@ -315,10 +315,11 @@
               >异常描述</el-button
             >
             <el-button
+              v-if="scope.row.analysisState == 10"
               @click="insertQueue(scope.row)"
               type="text"
               size="small"
-              >{{ scope.row.onOffCall === 0 ? "插队" : "取消插队" }}</el-button
+              >插队</el-button
             >
             <!-- <el-button
               @click="HandleOnOffAuto(scope.row)"
@@ -447,6 +448,7 @@ import {
   analysisResultList,
   addAnalysisResult,
   queryCodeNum,
+  editPriority,
 } from "@/api/performance";
 import { from } from "plotly.js-dist";
 import { disable } from "ol/rotationconstraint";
@@ -613,17 +615,24 @@ export default {
     },
     //插队接口
     async insertQueue(row) {
-      this.$confirm(
-        `确认${row.onOffCall === 0 ? "开启" : "关闭"}插队？`,
-        "提示",
-        {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning",
-        }
-      )
-        .then(() => {
-          navigateToDetails();
+      this.$confirm(`确认插队？`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(async () => {
+          const formData = new FormData();
+          formData.append("batchCode", row.batchCode);
+          formData.append("priority", 1);
+          const result = await editPriority(formData);
+          console.log(result, "插队结果");
+          if (result.code === 200) {
+            this.$message({
+              type: "success",
+              message: "插队成功",
+            });
+            await this.fetchData();
+          }
         })
         .catch(() => {});
     },

src/views/performance/components/analysisEvent.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2024-05-29 09:13:51
- * @LastEditTime: 2025-02-11 11:16:24
+ * @LastEditTime: 2025-02-13 14:53:10
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/analysisEvent.vue
@@ -84,7 +84,7 @@
                     v-for="(item, indsanal) in analysisTypeList"
                     :key="item.typeCode + indsanal + 'analysisTypeList'"
                     :label="item.typeName"
-                    :value="item.typeCode"
+                    :value="`${item.typeCode}|${item.typeFlag}`"
                   ></el-option>
                 </el-select> </el-form-item
             ></el-col>

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2024-09-11 14:30:17
- * @LastEditTime: 2025-02-12 15:17:36
+ * @LastEditTime: 2025-02-13 09:24:13
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/chartsCom/BarChart.vue
@@ -30,7 +30,7 @@
     <!-- 图表容器 -->
     <div
       v-loading="loading"
-      :id="`bar-chart${inds}`"
+      :id="`bar-chart-${inds}`"
       style="width: 100%; height: 400px"
     >
       <el-empty v-if="isError" description="请求失败"></el-empty>
@@ -167,7 +167,7 @@ export default {
 
       // 渲染图表
       Plotly.newPlot(
-        `bar-chart${this.inds}`,
+        `bar-chart-${this.inds}`,
 
         // [trace, normalRangeLine, normalRangeMaxLine],
         [trace],

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

@@ -1,13 +1,18 @@
-<!--
- * @Author: your name
- * @Date: 2024-09-11 14:32:51
- * @LastEditTime: 2025-02-12 15:13:16
- * @LastEditors: bogon
- * @Description: In User Settings Edit
- * @FilePath: /performance-test/src/views/performance/components/chartsCom/BoxLineCharts.vue
--->
 <template>
-  <div>
+  <div style="width: 100%; height: 500px">
+    <!-- 时间范围选择器 -->
+    <el-date-picker
+      v-model="dateRange"
+      type="daterange"
+      align="right"
+      unlink-panels
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      @change="onDateRangeChange"
+      style="margin: 20px 0 0 0"
+    ></el-date-picker>
+
     <!-- boxLineCharts -->
     <div
       v-loading="loading"
@@ -23,6 +28,7 @@
 import Plotly from "plotly.js-dist";
 import axios from "axios";
 import { myMixin } from "@/mixins/chartRequestMixin";
+
 export default {
   mixins: [myMixin],
   props: {
@@ -37,6 +43,9 @@ export default {
   data() {
     return {
       chartData: {},
+      dateRange: [], // 用于存储选中的日期范围
+      loading: false,
+      isError: false,
     };
   },
   mounted() {
@@ -61,39 +70,96 @@ export default {
         }
       }
     },
+
+    // 处理日期范围变化
+    onDateRangeChange() {
+      this.drawBoxPlot(); // 日期变化时重新绘制图表
+    },
+
+    // 判断时间戳是否在选择的日期范围内
+    isInDateRange(timestamp) {
+      const [startDate, endDate] = this.dateRange;
+      if (!startDate || !endDate) return true;
+
+      const date = new Date(timestamp);
+      return date >= new Date(startDate) && date <= new Date(endDate);
+    },
+
+    // 过滤数据
+    filterData(group) {
+      const filteredXData = [];
+      const filteredYData = [];
+      const filteredMedians = group.medians ? { x: [], y: [] } : null;
+      group.medians.x.forEach((timestamp, index) => {
+        if (this.isInDateRange(timestamp)) {
+          filteredMedians.x.push(timestamp);
+          filteredMedians.y.push(group.medians.y[index]);
+        }
+      });
+      group.xData.forEach((timestamp, index) => {
+        if (this.isInDateRange(timestamp)) {
+          filteredXData.push(timestamp);
+          filteredYData.push(group.yData[index]);
+        }
+      });
+
+      return {
+        ...group,
+        xData: filteredXData,
+        yData: filteredYData,
+        medians: filteredMedians,
+      };
+    },
+
+    // 绘制箱线图
     drawBoxPlot() {
       const chartData = this.chartData.data[0];
 
+      // 过滤数据
+      const filteredData = this.filterData(chartData);
+
       // 构建箱线图
       const trace = {
-        x: chartData.xData,
-        y: chartData.yData,
+        x: filteredData.xData,
+        y: filteredData.yData,
         type: "box",
-        // boxpoints: "all", // 显示所有数据点
-        // jitter: 0.3, // 调整点的散布
-        // pointpos: 0, // 点位置
         marker: {
-          color: "#00000000",
-          size: 0,
+          color: "lightgray",
         },
-        line: {
-          color: "#C7C7C7", // 设置箱线图边框颜色
+        boxpoints: false, // 不显示散点
+        boxmean: false, // 不显示均值
+        name: filteredData.title,
+      };
+      const trace2 = {
+        x: filteredData.medians.x,
+        y: filteredData.medians.y,
+        mode: "markers",
+        marker: {
+          color: "#406DAB",
+          size: 3,
         },
-        boxpoints: "none", // 不显示散点
-        fillcolor: "#406DAB", // 设置箱线图填充颜色，带透明度
-        name: chartData.title, // 设置图例名称
+        name: `${filteredData.title} - 中位点`,
+        type: "scatter",
       };
 
       // 布局设置
       const layout = {
-        title: this.chartData.data[0].title,
-        xaxis: { title: this.chartData.xaixs },
+        title: filteredData.title,
+        xaxis: {
+          title: this.chartData.xaixs,
+          type: "date", // 强制设置为日期类型
+          tickformat: "%Y-%m-%d", // 这里也可以调整格式
+        },
         yaxis: { title: this.chartData.yaixs },
-        showlegend: false,
+        showlegend: true,
       };
 
-      Plotly.newPlot(`plotDivBox-${this.index}`, [trace], layout);
+      Plotly.newPlot(`plotDivBox-${this.index}`, [trace, trace2], layout);
     },
   },
 };
 </script>
+
+<style scoped>
+/* 可根据需要自定义样式 */
+</style>

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

@@ -1,22 +1,19 @@
-<!--
- * @Author: your name
- * @Date: 2024-09-11 14:36:31
- * @LastEditTime: 2025-02-12 15:17:50
- * @LastEditors: bogon
- * @Description: In User Settings Edit
- * @FilePath: /performance-test/src/views/performance/components/chartsCom/BoxMarkersCharts.vue
--->
-<!-- <template>
-  <div> -->
-<!-- BoxMarkersCharts
-    <h1>叶尖速比时序分析</h1>
-    <h1>风能利用系数时序分析</h1> -->
-<!-- <div :id="`chart-${inds}`" style="width: 100%; height: 550px"></div>
-  </div>
-</template>
- -->
 <template>
-  <div>
+  <div style="width: 100%; height: 500px">
+    <!-- 时间范围选择器 -->
+    <el-date-picker
+      size="mini"
+      v-model="dateRange"
+      type="daterange"
+      align="right"
+      unlink-panels
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      @change="onDateRangeChange"
+      style="margin: 20px 0 0 0"
+    ></el-date-picker>
+
     <div
       v-loading="loading"
       ref="plotlyChart"
@@ -31,6 +28,7 @@
 import Plotly from "plotly.js-dist-min";
 import axios from "axios";
 import { myMixin } from "@/mixins/chartRequestMixin";
+
 export default {
   name: "BoxPlotWithMedians",
   mixins: [myMixin],
@@ -45,24 +43,28 @@ export default {
   },
   data() {
     return {
-      chartData: {},
+      chartData: {}, // 存储从 API 获取的原始数据
+      dateRange: [], // 日期范围选择器的值
+      loading: false,
+      isError: false,
     };
   },
   mounted() {
-    this.getData();
+    this.getData(); // 获取数据
   },
   methods: {
+    // 获取数据
     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.drawBoxPlot();
+          this.drawBoxPlot(); // 绘制图表
           this.isError = false;
           this.loading = false;
         } catch (error) {
@@ -71,16 +73,60 @@ export default {
         }
       }
     },
+
+    // 处理日期范围变化
+    onDateRangeChange() {
+      this.drawBoxPlot(); // 日期变化时重新绘制图表
+    },
+
+    // 判断时间戳是否在选择的日期范围内
+    isInDateRange(timestamp) {
+      const [startDate, endDate] = this.dateRange;
+      if (!startDate || !endDate) return true;
+
+      const date = new Date(timestamp);
+      return date >= new Date(startDate) && date <= new Date(endDate);
+    },
+
+    // 过滤数据
+    filterData(group) {
+      const filteredXData = [];
+      const filteredYData = [];
+      const filteredMedians = group.medians ? { x: [], y: [] } : null;
+      group.medians.x.forEach((timestamp, index) => {
+        if (this.isInDateRange(timestamp)) {
+          filteredMedians.x.push(timestamp);
+          filteredMedians.y.push(group.medians.y[index]);
+        }
+      });
+      group.xData.forEach((timestamp, index) => {
+        if (this.isInDateRange(timestamp)) {
+          filteredXData.push(timestamp);
+          filteredYData.push(group.yData[index]);
+        }
+      });
+
+      return {
+        ...group,
+        xData: filteredXData,
+        yData: filteredYData,
+        medians: filteredMedians,
+      };
+    },
+
+    // 绘制箱线图
     drawBoxPlot() {
       const chartContainer = this.$refs.plotlyChart;
       const { data, xaixs, yaixs, analysisTypeCode } = this.chartData;
 
+      // 过滤数据，根据选定的日期范围
+      const filteredData = data.map(this.filterData);
+
+      // 创建图表数据
       const traces = [];
       const medianMarkers = [];
 
-      // 处理每组数据
-      data.forEach((group) => {
-        // 添加箱线图
+      filteredData.forEach((group) => {
         traces.push({
           x: group.xData,
           y: group.yData,
@@ -89,19 +135,19 @@ export default {
           marker: {
             color: group.color,
           },
-          boxmean: true, // 显示均值
+          boxpoints: false,
+          boxmean: false,
         });
 
-        // 添加中位点
-        if (group.medians) {
+        // 如果有中位点数据且中位点数据不为空，添加中位点
+        if (group.medians && group.medians.x.length > 0) {
           medianMarkers.push({
             x: group.medians.x,
             y: group.medians.y,
-            mode: group.medians.mode,
+            mode: "markers",
             marker: {
               color: "#406DAB",
-              // color: group.medians.color,
-              size: group.medians.size,
+              size: 3,
             },
             name: `${group.title} - 中位点`,
             type: "scatter",
@@ -113,6 +159,8 @@ export default {
         title: analysisTypeCode + data[0].engineName,
         xaxis: {
           title: xaixs,
+          type: "date",
+          tickformat: "%Y-%m-%d",
         },
         yaxis: {
           title: yaixs,
@@ -120,7 +168,6 @@ export default {
         showlegend: true,
       };
 
-      // 绘制图表
       Plotly.newPlot(chartContainer, [...traces, ...medianMarkers], layout);
     },
   },

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

@@ -0,0 +1,105 @@
+<!--
+ * @Author: your name
+ * @Date: 2025-02-13 11:04:01
+ * @LastEditTime: 2025-02-13 11:06:39
+ * @LastEditors: bogon
+ * @Description: In User Settings Edit
+ * @FilePath: /performance-test/src/views/performance/components/chartsCom/YawErrorDensityChart.vue
+-->
+<template>
+  <div :ref="`plotlyChart-${index}`" style="width: 100%; height: 400px"></div>
+</template>
+
+<script>
+import Plotly from "plotly.js-dist";
+import axios from "axios";
+import { myMixin } from "@/mixins/chartRequestMixin";
+
+export default {
+  props: {
+    fileAddr: {
+      default: "",
+      type: String,
+    },
+    index: {
+      type: String,
+    },
+  },
+  data() {
+    return {
+      chartData: {
+        xData: [],
+        yData: [],
+        title: "",
+        xaixs: "",
+        yaixs: "",
+      },
+    };
+  },
+  mixins: [myMixin],
+  mounted() {
+    this.getData();
+  },
+  methods: {
+    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,
+          });
+          console.log(resultChartsData);
+          this.chartData = resultChartsData.data;
+          this.drawChart();
+          this.isError = false;
+          this.loading = false;
+        } catch (error) {
+          this.isError = true;
+          this.loading = false;
+        }
+      }
+    },
+    drawDensityChart() {
+      const { xData, yData, title, xaixs, yaixs } = this.chartData;
+
+      // 确保数据有效
+      if (!xData || !yData || xData.length !== yData.length) {
+        console.error("xData 和 yData 长度不匹配！");
+        return;
+      }
+
+      // 配置图表数据
+      const trace = {
+        x: xData,
+        y: yData,
+        mode: "lines", // 绘制折线图
+        name: "概率密度函数",
+        type: "scattergl",
+        line: {
+          color: "blue",
+          width: 2,
+        },
+        fill: "tozeroy", // 填充曲线下面的区域
+        fillcolor: "rgba(99, 110, 252, 0.3)", // 曲线下面的填充颜色
+      };
+
+      // 图表布局配置
+      const layout = {
+        title: title || "概率密度函数图",
+        xaxis: {
+          title: xaixs || "X轴",
+        },
+        yaxis: {
+          title: yaixs || "概率密度函数",
+        },
+        showlegend: false,
+      };
+
+      // 使用 Plotly 渲染图表
+      Plotly.newPlot(this.$refs[`plotlyChart-${this.index}`], [trace], layout);
+    },
+  },
+};
+</script>