将组件中添加分析说明

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-09 17:54:02
- * @LastEditTime: 2025-01-20 13:33:29
+ * @LastEditTime: 2025-01-20 15:55:21
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/data_integrity_minute/index.vue
@@ -36,8 +36,18 @@
           数据完整度分析是根据数据统计周期内数据总行数与期望数据总行数的比值计算出来的。
         </div>
       </el-alert>
+      <template v-if="generalFilesDatas && generalFilesDatas.length > 0">
+        <div v-for="(item, index) in generalFilesDatas">
+          <HeatmapCharts
+            :key="item.batchCode + index"
+            :index="item.batchCode + index"
+            :ref="item.batchCode"
+            :fileAddr="item.fileAddr"
+          ></HeatmapCharts>
+        </div>
+      </template>
+      <el-empty description="暂无分析记录" v-else></el-empty>
 
-      <HeatmapCharts></HeatmapCharts>
       <el-tabs value="first">
         <el-tab-pane label="意见描述" name="first">
           <TinymceEditor
@@ -58,7 +68,12 @@
       </el-row>
     </div>
     <div class="right">
-      <DicCard></DicCard>
+      <DicCard
+        :batchCode="initBatchCode"
+        :analysisTypeCode="analysisTypeCode"
+        :commentDescriptionVos="commentDescriptionVos"
+      >
+      </DicCard>
     </div>
   </div>
 </template>
@@ -68,7 +83,6 @@ import FilterChart from "@/views/overview/components/filterChart/index.vue";
 import HeatmapCharts from "@/views/performance/components/chartsCom/HeatmapCharts.vue";
 import TinymceEditor from "@/components/Tinymce.vue";
 import { analysisDetail, queryAnalysisedEngine } from "@/api/performance";
-
 export default {
   name: "DataIntegrityMinute",
   components: {
@@ -96,10 +110,15 @@ export default {
       form: {
         value2: "",
       },
+
+      commentDescriptionVos: [], //评论列表
       windEngineGroupList: [], //批次风机列表
       fieldEngineCodes: [], //选中风机
       comment: "",
       options: [],
+      generalFilesDatas: [], //总图
+      diagramRelationsDatas: [], //分图,
+      editableTabs: [],
     };
   },
   watch: {
@@ -174,7 +193,34 @@ export default {
               ? undefined
               : this.fieldEngineCodes.join(","),
         });
-        console.log(result, "result");
+        if (
+          result.data &&
+          result.data[0] &&
+          result.data[0].commentTypeRelations
+        ) {
+          this.editableTabs = result.data[0].commentTypeRelations;
+        }
+        //当前评论展示获取
+        if (
+          result.data &&
+          result.data[0] &&
+          result.data[0].commentDescriptionVos
+        ) {
+          this.commentDescriptionVos = result.data[0].commentDescriptionVos;
+        }
+        this.generalFilesDatas =
+          result.data &&
+          result.data[0] &&
+          result.data[0].generalFiles &&
+          result.data[0].generalFiles.filter((item) =>
+            item.fileAddr.endsWith(".json")
+          ); //总图数据
+        this.diagramRelationsDatas =
+          result.data &&
+          result.data[0] &&
+          result.data[0].diagramRelations.filter((item) =>
+            item.fileAddr.endsWith(".json")
+          );
       } catch (err) {
         console.error("Failed to fetch analysis details:", err);
       }
@@ -236,27 +282,6 @@ export default {
     overflow: auto;
     padding: 20px;
     flex: 1;
-    /* 滚动条整体样式 */
-    &::-webkit-scrollbar {
-      width: 6px; /* 滚动条宽度 */
-    }
-
-    /* 滚动条轨道 */
-    &::-webkit-scrollbar-track {
-      background: #f5f7fa;
-      border-radius: 3px;
-    }
-
-    /* 滚动条滑块 */
-    &::-webkit-scrollbar-thumb {
-      background: #c0c4cc;
-      border-radius: 3px;
-    }
-
-    /* 滚动条滑块悬停时 */
-    &::-webkit-scrollbar-thumb:hover {
-      background: #909399;
-    }
   }
   .right {
     width: 250px;

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-09 17:55:01
- * @LastEditTime: 2025-01-20 13:23:31
+ * @LastEditTime: 2025-01-20 15:50:16
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/data_integrity_second/index.vue
@@ -37,8 +37,18 @@
           数据完整度分析是根据数据统计周期内数据总行数与期望数据总行数的比值计算出来的。
         </div>
       </el-alert>
+      <template v-if="generalFilesDatas && generalFilesDatas.length > 0">
+        <div v-for="(item, index) in generalFilesDatas">
+          <HeatmapCharts
+            :key="item.batchCode + index"
+            :index="item.batchCode + index"
+            :ref="item.batchCode"
+            :fileAddr="item.fileAddr"
+          ></HeatmapCharts>
+        </div>
+      </template>
+      <el-empty description="暂无分析记录" v-else></el-empty>
 
-      <HeatmapCharts></HeatmapCharts>
       <el-tabs value="first">
         <el-tab-pane label="意见描述" name="first">
           <TinymceEditor

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-09 18:10:22
- * @LastEditTime: 2025-01-20 13:37:58
+ * @LastEditTime: 2025-01-20 15:45:13
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/power_scatter/index.vue
@@ -40,7 +40,7 @@
       >
         <DDrawingChart
           :key="item.fieldEngineCode"
-          :index="index"
+          :index="index + 'fen'"
           :ref="item.fieldEngineCode"
           :fileAddr="item.fileAddr"
         >

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-10 09:09:17
- * @LastEditTime: 2025-01-20 13:40:15
+ * @LastEditTime: 2025-01-20 15:45:41
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/speed_power/index.vue
@@ -40,7 +40,7 @@
       >
         <DDrawingChart
           :key="item.batchCode + index"
-          :index="index"
+          :index="index + 'zong'"
           :ref="item.batchCode + index"
           :fileAddr="item.fileAddr"
         >
@@ -71,7 +71,7 @@
       >
         <DDrawingChart
           :key="item.fieldEngineCode + 'DDrawingChart'"
-          :index="index"
+          :index="index + 'fen'"
           :ref="item.fieldEngineCode + 'DDrawingChart'"
           :fileAddr="item.fileAddr"
         >

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

@@ -24,24 +24,24 @@
       </el-alert>
       <div class="titleCharts">分析总图 :</div>
       <!-- {{ generalFilesDatas[0] }} -->
-      <div v-for="(item, index) in generalFilesDatas">
-        <DDrawingChart
-          :key="item.batchCode + index"
-          :index="index"
-          :ref="item.batchCode + index"
-          :fileAddr="item.fileAddr"
-        >
-        </DDrawingChart>
-      </div>
+      <!-- <div v-for="(item, index) in generalFilesDatas">
+       
+      </div> -->
 
-      <!-- <VirtualList
+      <VirtualList
         :list="generalFilesDatas"
         keyField="batchCode"
         :itemSize="452"
         v-slot="{ item, index }"
       >
-       
-      </VirtualList> -->
+        <DDrawingChart
+          :key="item.batchCode + index"
+          :index="index + 'zong'"
+          :ref="item.batchCode + index"
+          :fileAddr="item.fileAddr"
+        >
+        </DDrawingChart>
+      </VirtualList>
 
       <div class="titleCharts">分析分图 :</div>
 
@@ -67,7 +67,7 @@
       >
         <DDrawingChart
           :key="item.fieldEngineCode + 'DDrawingChart'"
-          :index="index"
+          :index="index + 'fen'"
           :ref="item.fieldEngineCode + 'DDrawingChart'"
           :fileAddr="item.fileAddr"
         >

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-10 09:11:34
- * @LastEditTime: 2025-01-20 09:21:34
+ * @LastEditTime: 2025-01-20 13:52:16
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/wind_speed_frequency/index.vue
@@ -287,29 +287,27 @@ export default {
     padding: 20px;
     flex: 1;
 
-  /* 滚动条整体样式 */
-  &::-webkit-scrollbar {
-    width: 6px; /* 滚动条宽度 */
-  }
-
-  /* 滚动条轨道 */
-  &::-webkit-scrollbar-track {
-    background: #f5f7fa;
-    border-radius: 3px;
-  }
-
-  /* 滚动条滑块 */
-  &::-webkit-scrollbar-thumb {
-    background: #c0c4cc;
-    border-radius: 3px;
-  }
+    /* 滚动条整体样式 */
+    &::-webkit-scrollbar {
+      width: 6px; /* 滚动条宽度 */
+    }
 
-  /* 滚动条滑块悬停时 */
-  &::-webkit-scrollbar-thumb:hover {
-    background: #909399;
-  }
+    /* 滚动条轨道 */
+    &::-webkit-scrollbar-track {
+      background: #f5f7fa;
+      border-radius: 3px;
+    }
 
+    /* 滚动条滑块 */
+    &::-webkit-scrollbar-thumb {
+      background: #c0c4cc;
+      border-radius: 3px;
+    }
 
+    /* 滚动条滑块悬停时 */
+    &::-webkit-scrollbar-thumb:hover {
+      background: #909399;
+    }
   }
   .right {
     width: 250px;

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-17 19:04:52
- * @LastEditTime: 2025-01-20 10:41:41
+ * @LastEditTime: 2025-01-20 15:44:18
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/chartsCom/3DDrawingChart.vue
@@ -12,7 +12,11 @@
       :id="`plotly-3d-chart-` + index"
       style="width: 100%; height: 400px"
     ></div>
-    <div v-loading="loading" ref="plotlyChart" style="height: 400px">
+    <div
+      v-loading="loading"
+      :ref="plotlyChart_`${index}`"
+      style="height: 400px"
+    >
       <el-empty v-if="isError" description="请求失败"></el-empty>
     </div>
   </div>
@@ -30,7 +34,7 @@ export default {
     },
     index: {
       default: "",
-      type: Number,
+      type: String,
     },
   },
   data() {

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

@@ -1,22 +1,13 @@
-<!--
- * @Author: your name
- * @Date: 2024-09-11 14:29:26
- * @LastEditTime: 2025-01-13 15:12:38
- * @LastEditors: bogon
- * @Description: In User Settings Edit
- * @FilePath: /performance-test/src/views/performance/components/chartsCom/HeatmapCharts.vue
--->
 <template>
   <div>
-    <!-- HeatmapCharts
-    <h1>分钟级SCADA数据记录完整度分析</h1>
-    <h1>秒级SCADA数据记录完整度分析</h1> -->
-    <div :id="`chart-${inds}`" style="width: 100%; height: 550px"></div>
+    <div :id="`chart-${inds}`" style="width: 100%; height: 450px"></div>
   </div>
 </template>
 <script>
+import { nextTick } from "vue"; // 导入 nextTick
 import { allTypesDatas } from "@/utils/allTypesOfAnalysisData.js";
 import Plotly from "plotly.js-dist";
+import axios from "axios";
 export default {
   props: {
     inds: {
@@ -25,26 +16,103 @@ export default {
         return 0;
       },
     },
+    fileAddr: {
+      type: String,
+      default: "",
+    },
   },
   data() {
     return {
+      chartData: {},
       initData: [
         {
           z: [
-            [100, 95, 20, 7, 75, 100],
-            [0, 50, 0, 0, 0, 0],
-            [100, 74, 7, 95, 100, 100],
+            [
+              5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0,
+              5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0,
+            ],
+            [
+              5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0,
+              5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0,
+            ],
+            [
+              5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0,
+              5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0,
+            ],
+            [
+              5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0,
+              5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0,
+            ],
+            [
+              5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0,
+              5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0,
+            ],
+            [
+              5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0,
+              5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0,
+            ],
+            [
+              5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0,
+              5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0,
+            ],
+            [
+              5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0,
+              5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0,
+            ],
+            [
+              5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0,
+              5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0,
+            ],
+            [
+              5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0,
+              5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0,
+            ],
+            [
+              5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0,
+              5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0,
+            ],
+            [
+              5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0,
+              5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0,
+            ],
           ],
           x: [
-            "#2024-01",
-            "#2024-02",
-            "#2024-03",
-            "#2024-04",
-            "#2024-05",
-            "#2024-06",
+            "#01",
+            "#02",
+            "#03",
+            "#04",
+            "#05",
+            "#06",
+            "#07",
+            "#08",
+            "#09",
+            "#10",
+            "#11",
+            "#12",
+            "#13",
+            "#14",
+            "#15",
+            "#16",
+            "#17",
+            "#18",
+            "#19",
+            "#20",
+            "#21",
+          ],
+          y: [
+            "2023-01",
+            "2023-02",
+            "2023-03",
+            "2023-04",
+            "2023-05",
+            "2023-06",
+            "2023-07",
+            "2023-08",
+            "2023-09",
+            "2023-10",
+            "2023-11",
+            "2023-12",
           ],
-          y: ["Morning", "Afternoon", "Evening"],
-          // y: ["Morning", "Afternoon"],
           type: "heatmap",
           colorscale: "Viridis", //分钟scads
           colorscale: [
@@ -62,63 +130,122 @@ export default {
     };
   },
   mounted() {
-    this.initcharts();
+    this.getData();
+    if (this.fileAddr) {
+      this.getData();
+    }
   },
+
   methods: {
+    async getData() {
+      if (this.fileAddr !== "") {
+        try {
+          this.loading = true;
+          this.cancelToken = axios.CancelToken.source();
+          const resultChartsData = await axios.get(this.fileAddr, {
+            cancelToken: this.cancelToken.token,
+          });
+          this.chartData = resultChartsData.data;
+          this.initData[0].y = resultChartsData.data[0].xData;
+          this.initData[0].z = resultChartsData.data[0].yData;
+          // 使用 nextTick 来确保 DOM 渲染完成后绘制图表
+          nextTick(() => {
+            this.initcharts();
+            // this.isError = false;
+            // this.loading = false;
+          });
+        } catch (error) {
+          console.error("Error loading data:", error);
+          this.isError = true;
+          this.loading = false;
+        }
+      }
+    },
     initcharts() {
       const lineDatas = allTypesDatas.filter(
         (item) =>
           item.analysisTypeCode === "data_integrity_second" ||
           item.analysisTypeCode === "data_integrity_minute"
       )[0];
+
+      // 生成 annotations 数据
+
       const layout = {
         ...lineDatas.lableConfig,
         showlegend: false,
         shapes: this.createShapesBorder(
           this.initData[0].y.length,
-          this.initData[0].x.length,
+          this.initData[0].x.length + 1,
           1,
           "white",
           0
-        ), // 添加边框
+        ),
+        // annotations: this.createAnnotations(this.initData[0].z),
         margin: {
-          l: 100, // 左侧边距，单位是像素
-          r: 100, // 右侧边距，单位是像素
-          t: 100, // 上方边距，单位是像素
-          b: 100, // 下方边距，单位是像素
+          l: 100,
+          r: 100,
+          t: 100,
+          b: 100,
+        },
+        autosize: true,
+        yaxis: {
+          type: "category",
+          tickvals: this.initData[0].y, // 确保 Y 轴的值和你的数据匹配
+          ticktext: this.initData[0].y,
+          showticks: false,
+          showgrid: true,
+        },
+        xaxis: {
+          tickvals: this.initData[0].x,
+          ticktext: this.initData[0].x,
+          showticks: false,
+          showgrid: true,
         },
-        autosize: true, // 开启自适应
+        plot_bgcolor: "white", // 背景颜色设置为白色，确保背景和网格线一致
+        gridcolor: "#d3d3d3", // 设置网格线颜色
       };
-      // 添加注释
-      for (var i = 0; i < this.initData[0].y.length; i++) {
-        for (var j = 0; j < this.initData[0].x.length; j++) {
-          const value = this.initData[0].z[i][j];
-          const fontColor = value < 50 ? "#434443" : "white"; // 根据 z 值判断字体颜色
-          var result = {
-            xref: "x",
-            yref: "y",
-            x: this.initData[0].x[j],
-            y: this.initData[0].y[i],
-            text: this.initData[0].z[i][j],
-            font: { size: 12, color: fontColor },
-            showarrow: false,
-          };
-          layout.annotations.push(result);
-        }
-      }
       Plotly.newPlot(`chart-${this.inds}`, this.initData, layout, {
         responsive: true,
       });
     },
+    // createAnnotations(zData) {
+    //   const annotations = [];
+    //   for (let row = 0; row < zData.length; row++) {
+    //     for (let col = 0; col < zData[row].length; col++) {
+    //       const x = this.initData[0].x[col];
+    //       const y = this.initData[0].y[row];
+    //       const value = zData[row][col];
+
+    //       // 打印 x, y, 和 value 检查是否为 NaN 或无效值
+    //       console.log(`x: ${x}, y: ${y}, value: ${value}`);
+
+    //       if (!isNaN(value)) {
+    //         annotations.push({
+    //           x: x,
+    //           y: y,
+    //           text: value.toString(),
+    //           showarrow: false,
+    //           font: {
+    //             size: 10,
+    //             color: "black",
+    //           },
+    //           align: "center",
+    //         });
+    //       }
+    //     }
+    //   }
+    //   return annotations;
+    // },
+
     createShapesBorder(rows, cols, borderWidth, borderColor, offset) {
       var shapes = [];
       for (var row = 0; row < rows; row++) {
         for (var col = 0; col < cols; col++) {
           shapes.push({
             type: "rect",
-            x0: col - 0.5 - offset,
+            x0: col - 0.5 + offset,
             x1: col + 0.5 + offset,
-            y0: row - 0.5 - offset,
+            y0: row - 0.5 + offset,
             y1: row + 0.5 + offset,
             line: {
               color: borderColor,

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

@@ -127,7 +127,22 @@ export default {
         autosize: true, // 开启自适应
         barmode: this.chartType === "bar" ? "stack" : "group", // 如果是柱状图则启用堆叠
       };
-
+      if (
+        this.chartData.contract_Cp_curve_yData &&
+        this.chartData.contract_Cp_curve_yData.length > 0
+      ) {
+        data.push({
+          x: this.chartData.contract_Cp_curve_xData,
+          y: this.chartData.contract_Cp_curve_yData,
+          mode: "lines+markers",
+          name: "合同功率曲线",
+          line: {
+            color: "red",
+            width: 1, // 设置线条的宽度为1
+          },
+          marker: { color: "red", size: 4 },
+        });
+      }
       // 使用 Plotly.react 来更新图表
       Plotly.react(`bar-chart${this.index}`, data, layout, {
         responsive: true,

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-20 11:41:41
- * @LastEditTime: 2025-01-20 12:12:42
+ * @LastEditTime: 2025-01-20 14:21:32
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/chartsCom/lineChartsFen.vue
@@ -147,7 +147,22 @@ export default {
 
       // 将非线图的数据放到前面，线图的数据放到最后
       const finalData = [...data, ...lineData]; // 先放柱状图，再放线图
-
+      if (
+        this.chartData.contract_Cp_curve_yData &&
+        this.chartData.contract_Cp_curve_yData.length > 0
+      ) {
+        finalData.push({
+          x: this.chartData.contract_Cp_curve_xData,
+          y: this.chartData.contract_Cp_curve_yData,
+          mode: "lines+markers",
+          name: "合同功率曲线",
+          line: {
+            color: "red",
+            width: 1, // 设置线条的宽度为1
+          },
+          marker: { color: "red", size: 4 },
+        });
+      }
       const layout = {
         title: this.chartData.title || "图表",
         xaxis: {

src/views/performance/editAssets.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2024-05-27 09:26:31
- * @LastEditTime: 2025-01-14 13:29:47
+ * @LastEditTime: 2025-01-20 13:59:16
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/editAssets.vue
@@ -24,9 +24,9 @@
       <el-tab-pane label="分析事件" name="first">
         <analysis-event :activeName="activeName"></analysis-event>
       </el-tab-pane>
-      <el-tab-pane label="分析编辑" name="second">
+      <!-- <el-tab-pane label="分析编辑" name="second">
         <edit-analysis :activeName="activeName"></edit-analysis>
-      </el-tab-pane>
+      </el-tab-pane> -->
     </el-tabs>
   </div>
 </template>