散点图树状label修改

src/components/chart/scatter/current-scatter-chart.vue

@@ -265,7 +265,8 @@ export default {
             show: false,
             type: "value",
             boundaryGap: false,
-            min: that?.xAxisData[0],
+            // min: that?.xAxisData[0],
+            min: 0,
             max: that?.xAxisData[that?.xAxisData?.length - 1],
             scale: true,
             axisLabel: {

src/views/sampleDatabase/fault/index.vue

@@ -583,14 +583,17 @@ export default {
       await that.API.requestData({
         method: "GET",
         baseURL: "http://192.168.1.18:9002/",
-        subUrl: "basic/widget/condition",
+        subUrl: "basic/category",
+        data: {
+          category: 'GZ'
+        },
         success(res) {
           let widgetArr = [],
             widget = [];
           res.data.forEach((ele, index) => {
             widgetArr.push({
-              label: ele.faulttype,
-              value: ele.faultcode,
+              label: ele.name,
+              value: ele.code,
             });
             widget.push(ele.faultcode);
           });

src/views/totalCurve/chart.vue

@@ -2,20 +2,25 @@
   <div class="totalCurveChartBox">
     <div class="l">
       <el-tree
+        v-if="currentNodeKey"
         accordion
+        highlight-current
+        node-key="id"
         :data="treeData"
         :props="{
           children: 'children',
-          label: 'windturbineid',
+          label: 'label',
         }"
         @node-click="nodeClick"
+        :default-expanded-keys="defaultTreeData"
+        :default-checked-keys="defaultTreeData"
+        :current-node-key="currentNodeKey"
       />
     </div>
     <div class="r">
       <CurrentScatterChart
         width="100%"
-        height="600px"
-        chartTitle="可框选折线散点图"
+        height="90%"
         :xAxisData="xAxisData"
         :yAxisData="{ splitLine: { show: false } }"
         :seriesData="seriesData"
@@ -26,9 +31,7 @@
     </div>
     <el-dialog
       top="100px"
-      :title="
-        '框选详情' + (tableData.length ? ' (' + tableData.length + '条)' : '')
-      "
+      :title="wtId + (tableData.length ? ' (' + tableData.length + '条)' : '')"
       custom-class="modal"
       v-model="showDialog"
       width="80%"
@@ -112,6 +115,7 @@ export default {
   data() {
     return {
       treeData: [],
+      defaultTreeData: [],//默认选中数据
       xAxisData: [],
       seriesData: [],
       station: "",
@@ -122,6 +126,7 @@ export default {
       gzlx: "",
       gzlxArray: [],
       gzItem: null,
+      currentNodeKey:""
     };
   },
   created() {
@@ -144,11 +149,17 @@ export default {
         baseURL: "http://192.168.1.18:9002/",
         subUrl: "powercurve/tree",
         success(res) {
-          that.treeData = res.data;
-          const getFirstTreeData = that.getFirstTreeData(res.data[0]);
+          that.treeData = that.addLabelToTreeData(res.data);
+          // 初始化第一条
+          that.defaultTreeData.push(res.data[0].id);
+          that.defaultTreeData.push(res.data[0].children[0].id);
+          that.defaultTreeData.push(res.data[0].children[0].children[0].id);
+          that.defaultTreeData.push(res.data[0].children[0].children[0].children[0].id);
+          let getFirstTreeData = that.getFirstTreeData(res.data[0]);
+          that.currentNodeKey = getFirstTreeData.id
           that.station = getFirstTreeData.stationen;
           that.wtId = getFirstTreeData.windturbineid;
-          that.time = getFirstTreeData.time;
+          that.time = getFirstTreeData.time;   
           that.getChartData();
         },
       });
@@ -189,6 +200,21 @@ export default {
       }
     },
 
+    // 给树状结构最后一层添加label字段
+    addLabelToTreeData(treeData) {
+      for (let i = 0; i < treeData.length; i++) {
+        const item = treeData[i];
+        if (Array.isArray(item?.children)) {
+          this.addLabelToTreeData(item.children);
+        } else {
+          treeData.forEach((ele) => {
+            ele.label = ele.windturbineid;
+          });
+        }
+      }
+      return treeData;
+    },
+
     // 获取图表数据
     getChartData() {
       const that = this;
@@ -339,20 +365,24 @@ export default {
 </script>
 <style lang="less" scoped>
 .totalCurveChartBox {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
   width: 100%;
   height: 100%;
-  display: flex;
-  justify-content: start;
-  align-content: center;
 
-  .l,
-  .r {
-    width: 20%;
+  .l {
+    width: 15%;
     height: 100%;
+    .el-tree {
+      height: 100%;
+    }
   }
 
   .r {
-    width: 80%;
+    width: 85%;
+    height: 100%;
+    margin-left: 20px;
   }
 
   .gzlxTitle {

src/views/totalCurve/dataDispose.vue

@@ -74,7 +74,7 @@
             <el-checkbox label="connected" size="small">并网</el-checkbox>
             <el-checkbox label="correct" size="small">合理值</el-checkbox>
             <el-checkbox label="connected10" size="small"
-              >并网十分钟</el-checkbox
+              >并网后十分钟</el-checkbox
             >
             <el-checkbox label="prestop10" size="small"
               >停机前十分钟</el-checkbox
@@ -118,13 +118,19 @@
     <div class="dataBox">
       <div class="l">
         <el-tree
+          v-if="currentNodeKey"
           accordion
+          highlight-current
+          node-key="id"
           :data="treeData"
           :props="{
             children: 'children',
-            label: 'windturbineid',
+            label: 'label',
           }"
           @node-click="nodeClick"
+          :default-expanded-keys="defaultTreeData"
+          :default-checked-keys="defaultTreeData"
+          :current-node-key="currentNodeKey"
         />
       </div>
       <div class="r">
@@ -213,6 +219,7 @@ export default {
   data() {
     return {
       treeData: [],
+      defaultTreeData: [], //默认选中数据
       changzhan: "",
       changzhanArray: [],
       fengji: [],
@@ -257,14 +264,15 @@ export default {
           label: "5分钟",
         },
         {
-          id: "900",
-          label: "15分钟",
+          id: "600",
+          label: "10分钟",
         },
       ],
       tableData: [],
       currentPage: 1,
       pageSize: 500,
       tableTotal: 0,
+      currentNodeKey: "",
     };
   },
   created() {
@@ -277,7 +285,6 @@ export default {
       let stationen = this.changzhan;
       let windturbineid = this.fengji;
       let time = this.date;
-
       let connected = false;
       let correct = false;
       let connected10 = false;
@@ -350,7 +357,21 @@ export default {
         baseURL: "http://192.168.1.18:9002/",
         subUrl: "powercurve/tree",
         success(res) {
-          that.treeData = res.data;
+          that.treeData = that.addLabelToTreeData(res.data);
+          // 初始化第一条
+          that.defaultTreeData.push(res.data[0].id);
+          that.defaultTreeData.push(res.data[0].children[0].id);
+          that.defaultTreeData.push(res.data[0].children[0].children[0].id);
+          that.defaultTreeData.push(
+            res.data[0].children[0].children[0].children[0].id
+          );
+          let data = that.getFirstTreeData(res.data[0]);
+          that.currentNodeKey = data.id;
+          that.changzhan = data.stationen;
+          that.fengji = data.windturbineid;
+          that.date = data.time;
+          that.getTableData();
+          that.nodeClick(data);
         },
       });
     },
@@ -443,6 +464,30 @@ export default {
       this.getTableData();
     },
 
+    // 获取树状结构内第一个节点内的第一条数据
+    getFirstTreeData(treeData) {
+      if (treeData?.children) {
+        return this.getFirstTreeData(treeData.children[0]);
+      } else {
+        return treeData;
+      }
+    },
+
+    // 给树状结构最后一层添加label字段
+    addLabelToTreeData(treeData) {
+      for (let i = 0; i < treeData.length; i++) {
+        const item = treeData[i];
+        if (Array.isArray(item?.children)) {
+          this.addLabelToTreeData(item.children);
+        } else {
+          treeData.forEach((ele) => {
+            ele.label = ele.windturbineid;
+          });
+        }
+      }
+      return treeData;
+    },
+
     // 树形结构点击处理
     nodeClick(res) {
       if (!res.children) {
@@ -478,14 +523,14 @@ export default {
     height: 100%;
 
     .l {
-      width: 20%;
+      width: 15%;
       height: 100%;
       .el-tree {
         height: 100%;
       }
     }
     .r {
-      width: 80%;
+      width: 85%;
       height: 100%;
     }
   }