FDAPFEPlatform/fdapfe-ui/src/views/index.vue

<template>
  <div class="home" v-loading="loading">
    <div class="second">
      <div class="topPanel"></div>
      <div class="step">
        <div class="yuan">
          <div class="img yuanBg odd" @click="switchHandle('0')">
            <div class="tag">故障注入</div>
          </div>
        </div>
        <dv-decoration-6 style="width:150px;height:30px;"/>
        <div class="one">
          <div class="img oneBg even">
            <div class="tag">加噪</div>
          </div>
        </div>
        <dv-decoration-6 style="width:150px;height:30px;"/>
        <div class="three" @click="switchHandle('1')">
          <div class="img threeBg even">
            <div class="tag">功能验证</div>
            <div class="tag2">算法评估</div>
          </div>
        </div>
        <dv-decoration-6 style="width:150px;height:30px;"/>
        <div class="four">
          <div class="img fourBg">
            <div class="tag">结果分析</div>
          </div>
        </div>
      </div>

      <div class="bottomPanel">
        <div class="vanel"></div>
        <div class="bPanel">
          <!-- 第二个表格：显示noData数组内容 -->
          <el-table size="mini" :data="tableData2">
            <el-table-column
              prop="processedDataName"
              label="加噪后数据"
              align="center"
            >
              <template slot-scope="scope">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="scope.row.processedDataName"
                  placement="top"
                >
                  <span class="beforeFile" @click="dowloadfile(scope.row.processedDataName)">{{ scope.row.processedDataName }}</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              prop="resultDataName"
              label="处理后数据"
              align="center"
            >
              <template slot-scope="scope">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="scope.row.resultDataName"
                  placement="top"
                >
                  <span class="file" @click="dowloadfile(scope.row.resultDataName)" >{{ scope.row.resultDataName }}</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              prop="processStatus"
              label="状态"
              align="center"
              width="60"
            >
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.biz_process_status"
                  :value="scope.row.processStatus"
                />
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="bPanel">
          <el-table size="mini" :data="tableData1">
            <el-table-column
              prop="resultDataName"
              label="处理后数据"
              align="center"
            >
              <template slot-scope="scope">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="scope.row.resultDataName"
                  placement="top"
                >
                  <span class="file" @click="dowloadfile(scope.row.resultDataName)">{{ scope.row.resultDataName }}</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              prop="processStatus"
              label="状态"
              align="center"
              width="60"
            >
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.biz_process_status"
                  :value="scope.row.processStatus"
                />
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="vanel"></div>
      </div>
    </div>
    <div class="table-index" style="width: 100%;height: 500px;margin-top: 100px">
      <el-row style="padding: 10px" :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            size="mini"
            :disabled="multiple"
            @click="handleDelete"
            v-hasPermi="['test:perf:remove']"
          >删除</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            :disabled="!canCompare"
           v-hasPermi="['test:perf:export']"
          >综合比对</el-button>
        </el-col>
        <right-toolbar
          :showSearch.sync="showSearch"
          @queryTable="getList"
        ></right-toolbar>
      </el-row>
      <el-table
        v-loading="loading"
        :data="perfList"
        v-show="showSearch"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="任务名称" align="center" prop="name" />
        <el-table-column
          label="噪声生成算法"
          align="center"
          prop="noseModelName"
        />
        <el-table-column
          label="故障诊断算法"
          align="center"
          prop="fdAlgorithmName"
        />
        <el-table-column label="文件结果" align="center" prop="resultFilePath">
          <template slot-scope="scope">
            <span @click="dowloadfile(scope.row.resultFilePath)">点击下载</span>
          </template>
        </el-table-column>
        <el-table-column label="图片结果" align="center" prop="resultImagePath">
          <template slot-scope="scope">
            <span @click="showimages(scope.row.resultImagePath)">查看图片</span>
          </template>
        </el-table-column>
        <el-table-column label="文本结果" align="center" prop="resultText" >
          <template slot-scope="scope">
            <el-input type="textarea" disabled v-model="scope.row.resultText" />
          </template>
        </el-table-column>
        <el-table-column
          label="开始时间"
          align="center"
          prop="startTime"
          width="180"
        >
          <template slot-scope="scope">
            <span>{{scope.row.startTime}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="结束时间"
          align="center"
          prop="endTime"
          width="180"
        >
          <template slot-scope="scope">
            <span>{{scope.row.endTime}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-video-play"
              @click="handleRun(scope.row)"
              v-hasPermi="['test:ddAlgorithm:edit']"
            >运行</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['test:perf:remove']"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <form-model-view v-model="dialogVisible"
                     @message="handleMessage"
                     @allMessages="handleAllMessages"
                     @callback="handleRowData"/>
    <!-- 比对结果对话框 -->
    <el-dialog
      fullscreen
      title="综合比对结果"
      :visible.sync="compareDialogVisible"
      width="80%"
      :before-close="handleCompareDialogClose"
    >
      <info-data :data-info="compareResult" />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleCompareDialogClose">关闭</el-button>
          <el-button type="primary" @click="exportCompareResult">导出结果</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import CountTo from 'vue-count-to'
import RingChart from '@/views/homePage/ringChart'
import PreCharts from '@/views/homePage/preCharts'
import CurveCharts from '@/views/homePage/curveCharts'
import BarChart from '@/views/dashboard/BarChart'
import infoData from './form.vue'
import FormModelView from './add.vue'
import FileTable from '@/views/fileTable.vue'
import {
  listPerf,
  getPerf,
  delPerf,
  run,
} from "@/api/test/perf";
import dowloadService from '@/plugins/download'

export default {
  name: 'Index',
  dicts: ['biz_alg_type', 'biz_process_status'],
  components: {
    FileTable,
    CountTo,
    RingChart,
    BarChart,
    PreCharts,
    CurveCharts,
    FormModelView,
    infoData
  },
  data() {
    return {
      showSearch: true,
      dialogVisible: false,
      loading: false,
      initFileData: {},
      messages: [],
      perfList: [],
      tableData1: [],
      tableData2: [],
      tableData3: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      ids: [],
      names: [],
      single: false,
      multiple: false,
      rowImageData: [],
      infoOpen: false,
      fileShowVisible: false,
      canCompare: false, // 控制综合比对按钮是否可用
      compareDialogVisible: false, // 比对结果对话框可见性
      compareResult: [] // 比对结果数据
    }
  },
  mounted() {
    this.$watch('messages', (newVal) => {
      if (newVal && newVal.length > 0) {
        this.parseMessagesData()
      }
    }, { deep: true })
  },
  created() {
    this.getList()
  },
  methods: {
    handleExport(){
      if (this.ids.length < 2) {
        this.$message({
          message: '请至少选择两条数据进行比对',
          type: 'warning'
        })
        return
      }

      try {
        // 合并所有选中行的resultText数据
        const allResults = []
        this.ids.forEach(id => {
          const row = this.perfList.find(item => item.id === id)
          if (row && row.resultText) {
            try {
              const resultItems = JSON.parse(row.resultText)
              allResults.push(...resultItems)
              console.log('allResults',allResults)
            } catch (e) {
              this.$message({
                message: `解析数据失败：${row.name}`,
                type: 'error'
              })
            }
          }
        })

        if (allResults.length === 0) {
          this.$message({
            message: '没有可比对的数据',
            type: 'warning'
          })
          return
        }

        // 去重处理（如果需要）
        const uniqueResults = this.removeDuplicates(allResults)

        // 保存比对结果并显示对话框
        this.compareResult = uniqueResults
        this.compareDialogVisible = true
      } catch (error) {
        console.error('综合比对失败', error)
        this.$message({
          message: '综合比对失败，请重试',
          type: 'error'
        })
      }
    },

    // 去重处理（根据filename和snr判断是否重复）
    removeDuplicates(data) {
      const seen = new Set()
      return data.filter(item => {
        const key = `${item.filename}_${item.snr}`
        if (seen.has(key)) {
          return false
        }
        seen.add(key)
        return true
      })
    },

    // 导出比对结果
    exportCompareResult() {
      if (this.compareResult.length === 0) {
        this.$message({
          message: '没有可导出的比对结果',
          type: 'warning'
        })
        return
      }

      // 创建CSV内容
      const headers = '文件名,模型,信噪比,准确率(%),精确率,召回率,F1分数,测试时间(ms),不确定性\n'
      const csvContent = headers + this.compareResult.map(item =>
        `${item.filename},${item.model},${item.snr},${item.accuracy},${item.precision},${item.recall},${item.f1_score},${item.test_time_ms},${item.uncertainty}`
      ).join('\n')

      // 创建Blob并下载
      const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
      const url = URL.createObjectURL(blob)
      const link = document.createElement('a')
      link.setAttribute('href', url)
      link.setAttribute('download', `比对结果_${new Date().getTime()}.csv`)
      link.style.visibility = 'hidden'
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    },

    handleCompareDialogClose() {
      this.compareDialogVisible = false
    },

    getList() {
      this.loading = true
      listPerf(this.queryParams).then((response) => {
        this.perfList = response.rows || [];
        this.total = response.total || 0;
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },

    handleRun(data) {
      // 保存比对结果并显示对话框
      this.compareResult = JSON.parse(data.resultText)
      this.compareDialogVisible = true
    },

    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.names = selection.map((item) => item.name);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;

      // 更新比对按钮状态
      this.canCompare = selection.length >= 2
    },

    dowloadfile(fileurl) {
      console.log('下载文件', fileurl);
      dowloadService.resource(fileurl)
    },

    showimages(data) {
      this.rowImageData = data ? JSON.parse(data) : [];
      this.infoOpen = true;
    },

    handleDelete(row) {
      const ids = row.id || this.ids;
      const names = row.name || this.names;
      this.$modal
        .confirm('是否确认删除算法性能评估名称为"' + names + '"的数据项？')
        .then(function () {
          return delPerf(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },

    handleMessage(message) {
      this.messages.push(message);

      console.log('父组件接收到消息:', message);
      this.parseMessagesData()
    },

    handleAllMessages(allMessages) {
      this.messages = allMessages;
      console.log('父组件接收到所有消息:', allMessages);
      this.parseMessagesData()
    },

    handleDialogClose(visible) {
      this.dialogVisible = visible;
    },

    handleRowData(row) {
      this.dialogVisible = false
      this.getList();
      console.log('接收到文件管理的行数据:', row)
      this.initFileData = row
    },

    switchHandle(dataType) {
      switch (dataType) {
        case '0':
          this.dialogVisible = true
          break
        case '1':
          this.fileShowVisible = true
          break
        case '2':
          this.fileShowVisible = true
          this.$nextTick(() => {
          })
          break
      }
    },

    parseMessagesData() {
      try {
        // 清空之前的数据
        this.tableData1 = [];
        this.tableData2 = [];

        // 确保tableData1存在且为数组
        if (Array.isArray(this.messages) && this.messages.length > 0) {
          // 解析第一个元素：多个.mat文件URL
          const matUrlsString = this.messages[0];
          if (matUrlsString) {
            // 去除首尾方括号并按逗号分割
            const matUrls = matUrlsString.replace(/^\[|]$/g, '').split(',').map(url => url.trim());

            // 处理每个.mat文件URL，绑定到第二个表格（处理前数据）
            matUrls.forEach((url, index) => {
              this.tableData2.push({
                processedDataName: url,
                resultDataName: `处理后_${index + 1}`, // 假设的处理后数据，可根据实际情况修改
                processStatus: '1' // 假设状态为"已完成"，可根据实际情况调整
              });
            });
          }

          // 解析第二个元素：.json文件URL
          const jsonUrl = this.messages[1];
          if (jsonUrl) {
            // 绑定到第一个表格（处理后数据）
            this.tableData1.push({
              resultDataName: jsonUrl,
              processStatus: '1' // 假设状态为"已完成"
            });
          }
        }
      } catch (error) {
        console.error('数据解析失败', error);
        this.tableData1 = [];
        this.tableData2 = [];
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>