Ver Fonte

fix 分析概览树形结构处理

liujiejie há 2 meses atrás
pai
commit
bb4fc88b1b

+ 81 - 53
src/views/overview/index.vue

@@ -185,12 +185,27 @@ export default {
     filterText(val) {
       this.$refs.tree.filter(val);
     },
+    // 监听树数据加载完成后,展开指定节点
+    data: {
+      handler(newData) {
+        if (newData.length > 0 && this.$route.query.batchCode) {
+          this.initBatchCode = this.$route.query.batchCode;
+          this.setExpandedNode(this.initBatchCode);
+          this.$nextTick(() => {
+            this.scrollToSelectedNode();
+          });
+        }
+      },
+      immediate: true,
+    },
     // 监听 initBatchCode 的变化,确保树节点正确选中
+    // 监听选中节点的变化,确保树节点正确选中
     initBatchCode(newVal) {
       this.$nextTick(() => {
         const tree = this.$refs.tree;
         if (tree) {
           tree.setCurrentKey(newVal); // 设置当前选中的节点
+          this.scrollToSelectedNode(); // 滚动到选中的节点
         }
       });
     },
@@ -199,12 +214,15 @@ export default {
     },
   },
   async created() {
-    if (this.$route.query.batchCode) {
-      this.initBatchCode = this.$route.query.batchCode;
-    }
     await Promise.all([this.getTreeData(), this.queryAllAnalysisType()]);
     // 初始化逻辑
   },
+  // mounted() {
+  //   if (this.$route.query.batchCode) {
+  //     this.initBatchCode = this.$route.query.batchCode;
+  //     // this.expandedKeys.push(formattedData[0]?.children[0]?.codeNumber);
+  //   }
+  // },
 
   methods: {
     setIsShow() {
@@ -229,30 +247,21 @@ export default {
       }
     },
 
-    // 获取树形结构数据
-    getTreeData() {
+    // 获取树形数据
+    async getTreeData() {
       this.loading = true;
-      getAnalysisCodeInfo()
-        .then((res) => {
-          if (res.code === 200) {
-            this.loading = false;
-            this.batchCodeList = [];
-            const formattedData = this.formatData(res.data);
-            this.data = formattedData;
-            console.log(formattedData[0], "formattedData[0]");
-            this.expandedKeys.push(formattedData[0]?.children[0]?.codeNumber);
-            // =
-            //   [
-            //     formattedData[0]?.codeNumber,
-            //     formattedData[0]?.children[0]?.codeNumber,
-            //   ] || [];
-            // 确保数据加载完成后才查询其他分析模型
-            // this.queryAllAnalysisType();
-          }
-        })
-        .catch((err) => {});
+      try {
+        const res = await getAnalysisCodeInfo(); // API 请求
+        if (res.code === 200) {
+          this.loading = false;
+          this.data = this.formatData(res.data); // 赋值树数据
+        }
+      } catch (err) {
+        console.error("获取数据失败", err);
+      }
     },
-    //数据格式化树形结构
+
+    // 递归格式化树数据
     formatData(data) {
       return (
         data &&
@@ -260,27 +269,15 @@ export default {
           item.levelstate = "1";
           if (item.children && item.children.length > 0) {
             item.children = item.children.map((child) => ({
-              //二级
               fieldOrCompanyName: child.fieldOrCompanyName,
               codeNumber: child.codeNumber,
               levelstate: "2",
               children: child.batchCodes
-                ? child.batchCodes.map((bc) => {
-                    if (this.initBatchCode === "") {
-                      this.initBatchCode = bc.batchCode; // 初始化选中的节点
-                    }
-                    this.batchCodeList.push(bc.batchCode);
-                    this.batchList.push({
-                      batchCode: bc.batchCode,
-                      batchName: bc.analysisName,
-                    });
-                    return {
-                      //三级
-                      fieldOrCompanyName: bc.analysisName,
-                      codeNumber: bc.batchCode,
-                      levelstate: "3",
-                    };
-                  })
+                ? child.batchCodes.map((bc) => ({
+                    fieldOrCompanyName: bc.analysisName,
+                    codeNumber: bc.batchCode,
+                    levelstate: "3",
+                  }))
                 : [],
             }));
           }
@@ -288,19 +285,50 @@ export default {
         })
       );
     },
-    // 点击树形节点时
+    // 滚动到选中的节点
+    scrollToSelectedNode() {
+      this.$nextTick(() => {
+        const tree = this.$refs.tree;
+        if (!tree) return;
+
+        const selectedNode = tree.$el.querySelector(".is-current");
+        if (selectedNode) {
+          selectedNode.scrollIntoView({ behavior: "smooth", block: "center" });
+        }
+      });
+    },
+    // 处理展开逻辑
+    setExpandedNode(batchCode) {
+      // 递归查找 batchCode 对应的父级节点
+      const findParentNode = (nodes, targetCode) => {
+        for (const node of nodes) {
+          if (
+            node.children &&
+            node.children.some((child) => child.codeNumber === targetCode)
+          ) {
+            return node.codeNumber; // 返回父级节点编号
+          }
+          if (node.children) {
+            const parentCode = findParentNode(node.children, targetCode);
+            if (parentCode) return parentCode;
+          }
+        }
+        return null;
+      };
+
+      // 获取目标节点的父级
+      const parentCode = findParentNode(this.data, batchCode);
+      if (parentCode) {
+        this.expandedKeys = [parentCode]; // 只展开找到的父级节点
+      }
+    },
+
+    // 处理树节点点击
     handleNodeClick(data) {
-      if (
-        (data.children &&
-          data.children.length <= 0 &&
-          data.levelstate === "1") ||
-        (data.children && data.children.length <= 0 && data.levelstate === "2")
-      ) {
-        this.$message.warning("当前选中风场未进行任何分析,请重新选择");
+      if (!data.children || data.children.length === 0) {
+        this.initBatchCode = data.codeNumber; // 更新选中的节点
       } else {
-        if (!data.children) {
-          this.initBatchCode = data.codeNumber; // 更新选中的节点
-        }
+        this.$message.warning("当前选中风场未进行任何分析,请重新选择");
       }
     },
     //获取

+ 4 - 4
src/views/performance/assetssMag.vue

@@ -314,10 +314,10 @@
               >分析</el-button
             >
             <el-button
-              @click="abnormalDialog(scope.row, '异常描述')"
+              @click="abnormalDialog(scope.row, '机组异常记录')"
               type="text"
               size="small"
-              >异常描述</el-button
+              >机组异常记录</el-button
             >
             <el-button
               v-if="scope.row.analysisState == 10"
@@ -357,7 +357,7 @@
       </div>
     </div>
     <!-- 弹出层 -->
-    <!-- 异常信息 /异常描述 /上传报告-->
+    <!-- 异常信息 /机组异常记录 /上传报告-->
     <my-dialog
       :visible="dialogVisible"
       :title="title"
@@ -692,7 +692,7 @@ export default {
       if (title === "异常详情") {
         this.errorInfo = row.errInfo;
         this.rowInfo = {};
-      } else if (title === "异常描述") {
+      } else if (title === "机组异常记录") {
         this.errorInfo = "";
         this.rowInfo = { ...row };
       } else if (title === "上传报告") {

+ 1 - 1
src/views/performance/components/abnormalDetail.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-loading="loading">
-    <!-- 异常描述页面 -->
+    <!-- 机组异常记录页面 -->
     <div class="newly">
       <el-button type="primary" @click="addRow" size="small">新增</el-button>
     </div>

+ 3 - 3
src/views/performance/components/analysisEvent.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2024-05-29 09:13:51
- * @LastEditTime: 2025-03-17 16:21:23
+ * @LastEditTime: 2025-03-19 10:49:10
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/analysisEvent.vue
@@ -13,7 +13,7 @@
       ref="form"
       :model="form"
       label-position="right"
-      label-width="100px"
+      label-width="120px"
       inline
     >
       <el-row type="flex" justify="end">
@@ -102,7 +102,7 @@
             ></el-col>
             <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="5">
               <el-form-item
-                label="数据源"
+                label="数据源(选填)"
                 v-if="checkedCities.find((item) => item === '数据源')"
               >
                 <el-select

+ 10 - 14
src/views/performance/components/chartsCom/Time3DChart.vue

@@ -165,7 +165,7 @@ export default {
     // 格式化日期为 YY-MM 格式
     formatDate(dateString) {
       const date = new Date(dateString);
-      const year = date.getFullYear().toString().slice(0); // 获取年份后两位
+      const year = date.getFullYear(); // 获取年份后两位
       const month = ("0" + (date.getMonth() + 1)).slice(-2); // 获取月份并确保两位数
       return `${year}-${month}`;
     },
@@ -182,7 +182,7 @@ export default {
       }
       // 设置每个月份对应的颜色
       const monthColors = this.color1;
-
+      console.log("uniqueMonths", uniqueMonths);
       // 为每个月份生成独立的 trace,每个 trace 对应一个月份
       const traces = uniqueMonths.map((month, monthIndex) => {
         const monthData = this.chartData.data[0].yData
@@ -231,13 +231,12 @@ export default {
         },
         scene: {
           xaxis: {
-            tickangle: 30,
             title: {
               text: this.chartData.xaixs,
               standoff: 100, // 调整标题与轴线之间的间距(单位:像素)
             }, // X 轴标题
             gridcolor: "#fff",
-            backgroundcolor: "#rgba(0, 0, 0, 0.1)",
+            backgroundcolor: "#CFD4DC",
             showbackground: true,
             linewidth: 2, // 轴线宽度
             linecolor: "black", // 轴线颜色
@@ -247,26 +246,26 @@ export default {
             ticklen: 10,
             tickcolor: "black",
             zeroline: false, // 显示 X 轴的中轴线
+            tickangle: 60, // 设置Z轴刻度值的角度
           },
           yaxis: {
             title: {
               text: this.chartData.yaixs,
               standoff: 20,
             },
-            tickformat: "%y-%m", // 设置 Y 轴的时间格式为 YY-MM
+            type: "date",
+            tickformat: "%Y-%m",
             gridcolor: "#fff",
             tickcolor: "#e5ecf6",
-            // backgroundcolor: "#E6E6E6",
-            backgroundcolor: "#rgba(0, 0, 0, 0.1)",
+            backgroundcolor: "#CFD4DC",
             showbackground: true,
             linewidth: 2, // 轴线宽度
             linecolor: "black", // 轴线颜色
             ticks: "outside", // 设置刻度线在轴线外
             tickwidth: 2,
             tickcolor: "black",
-            ticklen: 10,
             zeroline: false, // 显示 X 轴的中轴线
-            // tickangle: 70, // 设置Z轴刻度值的角度
+            tickangle: -60, // 设置Z轴刻度值的角度
           },
           zaxis: {
             title: {
@@ -274,8 +273,7 @@ export default {
             },
             gridcolor: "#fff",
             tickcolor: "#fff",
-            // backgroundcolor: "#E6E6E6",
-            backgroundcolor: "#rgba(0, 0, 0, 0.1)",
+            backgroundcolor: "#CFD4DC",
             showbackground: true,
             linewidth: 2, // 轴线宽度
             linecolor: "black", // 轴线颜色
@@ -283,10 +281,8 @@ export default {
             tickwidth: 2,
             tickcolor: "black",
             zeroline: false, // 显示 X 轴的中轴线
-            tickangle: 270, // 设置Z轴刻度值的角度
+            tickangle: -70, // 设置Z轴刻度值的角度
           },
-          margin: { l: 300, r: 500, t: 100, b: 100 }, // ✅ 增加底部间距
-          // aspectmode: "cube", // 确保X/Y/Z轴比例固定,防止变形
           bgcolor: "#e5ecf6", // 设置背景颜色
           aspectratio: {
             x: 2.2,

+ 6 - 2
src/views/performance/components/dialogCom.vue

@@ -6,13 +6,17 @@
     :title="title"
     :before-close="handleCloses"
     :width="
-      title === '异常详情' ? '750px' : title === '异常描述' ? '1120px' : '500px'
+      title === '异常详情'
+        ? '750px'
+        : title === '机组异常记录'
+        ? '1120px'
+        : '500px'
     "
   >
     <!-- 根据 emptyFlag 和 title 显示不同的内容 -->
     <!-- <slot v-if="emptyFlag" name="tableEl"></slot> -->
     <abnormal-detail
-      v-if="title === '异常描述'"
+      v-if="title === '机组异常记录'"
       ref="abnormalDetailRef"
       :batchCode="rowInfo.batchCode"
     ></abnormal-detail>