图表显示

pdaaphm-ui/src/views/index.vue

@@ -2,6 +2,7 @@
   <div class="home">
     <div class="second">
       <div class="topPanel">
+        <!-- 原始数据 -->
         <div class="tPanel">
           <el-table size="mini" :data="originalList">
             <el-table-column prop="dataName" label="数据" align="center">
@@ -10,6 +11,7 @@
             </el-table-column>
           </el-table>
         </div>
+        <!-- 补全 -->
         <div class="tPanel">
           <el-table size="mini" :data="completionList">
             <el-table-column prop="dataName" label="数据" align="center">
@@ -22,17 +24,27 @@
             </el-table-column>
           </el-table>
         </div>
+        <!-- 特征提取 -->
         <div class="tPanel">
           <el-table size="mini" :data="featureExtractionList">
             <el-table-column prop="dataName" label="数据" align="center">
+              <template slot-scope="scope">
+                <span class="file" @click="handleFile(scope.row.dataPath, scope.row.dataType)">{{ scope.row.dataName
+                  }}</span>
+              </template>
             </el-table-column>
             <el-table-column prop="status" label="状态" align="center">
             </el-table-column>
           </el-table>
         </div>
+        <!-- 故障预测 -->
         <div class="tPanel">
           <el-table size="mini" :data="faultPredictionList">
             <el-table-column prop="dataName" label="数据" align="center">
+              <template slot-scope="scope">
+                <span class="file" @click="imgShow(scope.row.dataPath,scope.row.dataType)">{{ scope.row.dataName
+                  }}</span>
+              </template>
             </el-table-column>
             <el-table-column prop="status" label="状态" align="center">
             </el-table-column>
@@ -52,12 +64,12 @@
         </div>
         <div class="two">
           <div class="img twoBg odd" @click="handleProcess(1)">
-            <div class="tag">扩充</div>
+            <div class="tag">补全</div>
           </div>
         </div>
         <div class="three">
           <div class="img threeBg even" @click="handleProcess(2)">
-            <div class="tag">补全</div>
+            <div class="tag">扩充</div>
           </div>
         </div>
         <div class="four">
@@ -77,6 +89,7 @@
         </div>
       </div>
       <div class="bottomPanel">
+        <!-- 去噪 -->
         <div class="bPanel">
           <el-table size="mini" :data="denoisingList">
             <el-table-column prop="dataName" label="数据" align="center">
@@ -85,17 +98,27 @@
             </el-table-column>
           </el-table>
         </div>
+        <!-- 扩充 -->
         <div class="bPanel">
           <el-table size="mini" :data="expansionList">
             <el-table-column prop="dataName" label="数据" align="center">
+              <template slot-scope="scope">
+                <span class="file" @click="handleFile(scope.row.dataPath, scope.row.dataType)">{{ scope.row.dataName
+                  }}</span>
+              </template>
             </el-table-column>
             <el-table-column prop="status" label="状态" align="center">
             </el-table-column>
           </el-table>
         </div>
+        <!-- 退化评估 -->
         <div class="bPanel">
           <el-table size="mini" :data="assessmentList">
             <el-table-column prop="dataName" label="数据" align="center">
+              <template slot-scope="scope">
+                <span class="file" @click="handleFile(scope.row.dataPath, scope.row.dataType)">{{ scope.row.dataName
+                  }}</span>
+              </template>
             </el-table-column>
             <el-table-column prop="status" label="状态" align="center">
             </el-table-column>
@@ -133,11 +156,20 @@
       </span>
     </el-dialog>
     <el-dialog title="数据展示" :visible.sync="fileShowVisible" width="80%" :close-on-click-modal="false">
-      <el-button style="margin-left:50px;" type="text" @click="changeShow">{{ isTableShow ? '表格展示' : '曲线展示' }}</el-button>
-      <div v-if="isTableShow">
-        表格展示
+      <el-button v-if="fileType !== '4'&& fileType!=='5'" style="margin-left:50px;" type="text" @click="changeShow">{{ isTableShow ?
+            '表格展示'
+            :
+            '曲线展示'
+        }}</el-button>
+      <div v-if="isTableShow && fileType!=='5'">
+        <el-table :data="completionData" size="mini" style="width: 100%;height: 500px;overflow:scroll;">
+          <el-table-column v-for="(item, index) in completionHeadData" :key="index" align="center" :prop="'val' + index"
+            :label="item">
+          </el-table-column>
+        </el-table>
       </div>
-      <div v-else ref="completionChartRef" style="width: 100%; height: 400px;"></div>
+      <div v-if="!isTableShow && fileType!=='5'" ref="completionChartRef" style="width: 100%; height: 400px;"></div>
+      <ImagePreview v-if="fileType==='5'" :src="imgPreviewUrl"></ImagePreview>
     </el-dialog>
   </div>
 </template>
@@ -159,6 +191,7 @@ export default {
   },
   data() {
     return {
+      loading: true,
       rules: {},
       title: '选择数据',
       baseUrl: process.env.VUE_APP_BASE_API,
@@ -179,9 +212,12 @@ export default {
       },
       // 对话框展示数据内容
       completionData: [],
+      completionHeadData: [],
       isTableShow: false,
       filePath: null,
-      fileType: null
+      fileType: null,
+      chart: null,
+      imgPreviewUrl:null
     }
   },
   created() {
@@ -228,26 +264,25 @@ export default {
       });
     },
     handleFile(dataPath, dataType) {
+      if (this.chart) {
+        this.chart.dispose();
+        this.chart = null
+      }
       this.filePath = dataPath
       this.fileType = dataType
       const url = `${process.env.VUE_APP_BASE_API}${dataPath}`;
       this.fetchLogFile(url)
         .then((text) => {
-          // console.log("text",text);
+          const color = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
           switch (dataType) {
             case '1':
-              console.log("11",);
-              const color = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
               const returnData = this.handleFileData(text)
               const contentData = returnData.contentData
-              console.log("contentData", contentData);
               const headData = returnData.headData
-              console.log("headData", headData);
               this.fileShowVisible = true
               this.$nextTick(() => {
-                const chart = echarts.init(this.$refs.completionChartRef);
-
-                // 生成series数据
+                this.chart = echarts.init(this.$refs.completionChartRef);
+                // series数据
                 const series = contentData.map((lineData, index) => ({
                   name: `${headData[index]}`,
                   type: 'line',
@@ -264,8 +299,6 @@ export default {
                     })).filter(point => point.value)
                   }
                 }));
-
-                // 配置项
                 const option = {
                   tooltip: {
                     trigger: 'axis'
@@ -286,22 +319,192 @@ export default {
                     type: 'value',
                     name: 'Value'
                   },
+                  dataZoom: [
+                    {
+                      type: 'slider',
+                      start: 0,
+                      end: 100
+                    },
+                    {
+                      type: 'inside',
+                      start: 0,
+                      end: 100
+                    }
+                  ],
                   series: series
                 };
-
-                // 设置图表配置
-                chart.setOption(option);
+                this.chart.setOption(option);
+              })
+              break;
+            case '2':
+              const data = text.split("\r\n").filter(line => line.trim() !== '').map(row => row.split(','));
+              data[0].shift();
+              const completionHead = data[0];
+              const completionContent = Array.from({ length: completionHead.length }, () => []);
+              const timeData = []
+              for (let i = 1; i < data.length; i++) {
+                data[i].forEach((value, index) => {
+                  if (index === 0) {
+                    timeData.push(value)
+                  } else {
+                    completionContent[index - 1].push(Number(value));
+                  }
+                });
+              }
+              this.fileShowVisible = true
+              this.$nextTick(() => {
+                this.chart = echarts.init(this.$refs.completionChartRef);
+                // series数据
+                const series = completionContent.map((lineData, index) => ({
+                  name: `${completionHead[index]}`,
+                  type: 'line',
+                  data: lineData,
+                  stack: 'Total',
+                  connectNulls: true, // 连接相邻的非空数据点
+                }));
+                const option = {
+                  tooltip: {
+                    trigger: 'axis'
+                  },
+                  legend: {
+                    data: headData,
+                    textStyle: {//图例文字的样式
+                      color: '#fff'
+                    }
+                  },
+                  color: color,
+                  xAxis: {
+                    type: 'category',
+                    data: timeData,
+                    name: 'time'
+                  },
+                  yAxis: {
+                    type: 'value',
+                    name: 'Value'
+                  },
+                  dataZoom: [
+                    {
+                      type: 'slider',
+                      start: 0,
+                      end: 100
+                    },
+                    {
+                      type: 'inside',
+                      start: 0,
+                      end: 100
+                    }
+                  ],
+                  series: series
+                };
+                this.chart.setOption(option);
+              })
+              break;
+            case '3':
+              const ExtractionData = text.split("\r\n").filter(line => line.trim() !== '').map(row => row.split(','));
+              ExtractionData[0].shift();
+              const ExtractionHead = ExtractionData[0];
+              const ExtractionContent = Array.from({ length: ExtractionHead.length }, () => []);
+              const ExtractionTime = []
+              for (let i = 1; i < ExtractionData.length; i++) {
+                ExtractionData[i].forEach((value, index) => {
+                  if (index === 0) {
+                    ExtractionTime.push(value)
+                  } else {
+                    ExtractionContent[index - 1].push(Number(value));
+                  }
+                });
+              }
+              this.fileShowVisible = true
+              this.$nextTick(() => {
+                this.chart = echarts.init(this.$refs.completionChartRef);
+                // series数据
+                const series = ExtractionContent.map((lineData, index) => ({
+                  name: `${ExtractionHead[index]}`,
+                  type: 'line',
+                  data: lineData,
+                  stack: 'Total',
+                  connectNulls: true, // 连接相邻的非空数据点
+                }));
+                const option = {
+                  tooltip: {
+                    trigger: 'axis'
+                  },
+                  legend: {
+                    data: headData,
+                    textStyle: {//图例文字的样式
+                      color: '#fff'
+                    }
+                  },
+                  color: color,
+                  xAxis: {
+                    type: 'category',
+                    data: ExtractionTime,
+                    name: 'time'
+                  },
+                  yAxis: {
+                    type: 'value',
+                    name: 'Value'
+                  },
+                  dataZoom: [
+                    {
+                      type: 'slider',
+                      start: 0,
+                      end: 100
+                    },
+                    {
+                      type: 'inside',
+                      start: 0,
+                      end: 100
+                    }
+                  ],
+                  series: series
+                };
+                this.chart.setOption(option);
+              })
+              break;
+            case '4':
+              const assessmentData = this.handleFileData(text)
+              const assessmentcontent = assessmentData.contentData
+              const assessmenthead = assessmentData.headData
+              this.fileShowVisible = true
+              this.$nextTick(() => {
+                this.chart = echarts.init(this.$refs.completionChartRef);
+                // series数据
+                const series = assessmentcontent.map((lineData, index) => ({
+                  name: `${assessmenthead[index]}`,
+                  type: 'line',
+                  data: lineData,
+                  stack: 'Total',
+                  connectNulls: true, // 连接相邻的非空数据点
+                }));
+                const option = {
+                  tooltip: {
+                    trigger: 'axis'
+                  },
+                  legend: {
+                    data: assessmenthead,
+                    textStyle: {//图例文字的样式
+                      color: '#fff'
+                    }
+                  },
+                  color: color,
+                  xAxis: {
+                    type: 'category',
+                    data: assessmentcontent[0].map((_, index) => index), // 生成x轴下标
+                    name: 'Index'
+                  },
+                  yAxis: {
+                    type: 'value',
+                    name: 'Value'
+                  },
+                  series: series
+                };
+                this.chart.setOption(option);
               })
-
               break;
-
             default:
               break;
           }
-
-          // this.fileShowData = text.split("\r\n");
-          // this.handleLineChart(this.fileShowData);
-          // this.fileVisible = true;
         })
         .catch((error) => {
           console.error("Failed to fetch the log file:", error);
@@ -325,9 +528,7 @@ export default {
       // 每行数据转换成数组、过滤出存在的空白行、将没行数据按照,号分割
       const data = fileData.split("\r\n").filter(line => line.trim() !== '').map(row => row.split(','));
       const headData = data[0];
-      console.log("data", data);
       const contentData = Array.from({ length: headData.length }, () => []);
-      // debugger
       for (let i = 1; i < data.length; i++) {  // 从 1 开始，跳过表头
         data[i].forEach((value, index) => {
           contentData[index].push(Number(value));
@@ -340,11 +541,31 @@ export default {
       this.isTableShow = !this.isTableShow
       if (!this.isTableShow) {
         this.handleFile(this.filePath, this.fileType)
+      } else {
+        this.tableShow(this.filePath, this.fileType)
       }
-
-
+    },
+    tableShow(path, type) {
+      const url = `${process.env.VUE_APP_BASE_API}${path}`;
+      this.fetchLogFile(url)
+        .then((text) => {
+          const data = text.split("\r\n").filter(line => line.trim() !== '').map(row => row.split(','));
+          this.completionHeadData = data.shift();
+          this.completionData = data.map(row => {
+            const rowData = {};
+            for (let i = 0; i < this.completionHeadData.length; i++) {
+              rowData[`val${i}`] = (row[i]) === 0 ? null : (row[i]);
+            }
+            return rowData;
+          })
+        })
+    },
+    imgShow(url,dataType){
+      this.fileType = dataType
+      this.imgPreviewUrl = url
+      this.fileShowVisible = true
     }
-  },
+  }
 }
 </script>