NetViewer/viewer/src/views/dashoard/analyze.vue

<template>
  <div class="analysis-container">
    <el-row :gutter="20">
      <!-- 左侧主操作区 -->
      <el-col :span="16">
        <el-card class="upload-section">
          <div class="input-method-select" v-if="inputMethod != 'done'">
            <el-radio-group v-model="inputMethod">
              <el-radio-button label="upload">文件上传</el-radio-button>
              <el-radio-button label="online">在线输入</el-radio-button>
            </el-radio-group>
          </div>

          <div v-if="inputMethod === 'upload'" class="upload-area">
            <!-- 节点文件上传 -->
            <el-upload class="file-upload" :on-change="handleNodeFileChange" :auto-upload="false"
              :show-file-list="false">
              <el-button type="primary" style="width: 120px; margin-right: 20px" plain>
                <el-icon>
                  <Upload />
                </el-icon>
                选择节点文件
              </el-button>
              <div class="file-info">
                {{ nodeFile ? nodeFile.name : '未选择文件' }}
                <span v-if="nodeFile">({{ formatSize(nodeFile.size) }})</span>
              </div>
            </el-upload>

            <!-- 边文件上传 -->
            <el-upload class="file-upload" :on-change="handleEdgeFileChange" :auto-upload="false"
              :show-file-list="false">
              <el-button type="primary" style="width: 120px; margin-right: 20px" plain>
                <el-icon>
                  <Upload />
                </el-icon>
                选择边文件
              </el-button>
              <div class="file-info">
                {{ edgeFile ? edgeFile.name : '未选择文件' }}
                <span v-if="edgeFile">({{ formatSize(edgeFile.size) }})</span>
              </div>
            </el-upload>

            <!-- 上传按钮和进度 -->
            <el-button type="success" :disabled="!canUpload" @click="handleUpload" class="upload-button">
              开始上传验证
            </el-button>

            <el-progress v-if="uploadProgress > 0" :percentage="uploadProgress" :status="uploadStatus"
              class="progress-bar" />
          </div>
          <div v-else class="upload-area">
            <router-view></router-view>
          </div>

        </el-card>

        <!-- 历史文件列表 -->
        <el-card class="history-section">
          <h3>历史上传记录</h3>
          <el-table :data="fileHistory" style="width: 100%">
            <el-table-column label="" width="40">
              <template #default="scope">
                <el-button v-if="scope.row.content == 'node'" type="primary"
                  style="width: 20px; height:20px; padding: 2px;">N</el-button>
                <el-button v-if="scope.row.content == 'edge'" type="warning"
                  style="width: 20px; height:20px; padding: 2px;">E</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="fileName" label="文件名" width="180" />
            <el-table-column prop="uploadTime" label="上传时间" width="180" />
            <el-table-column prop="fileSize" label="文件大小">
            </el-table-column>

            <el-table-column label="分析记录">
              <template #default="{ row }">
                <el-dropdown>
                  <span class="analysis-records">
                    查看记录<el-icon><arrow-down /></el-icon>
                  </span>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item v-for="(record, index) in row.records" :key="index">
                        {{ record.time }} - {{ record.type }}
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </template>
            </el-table-column>

            <el-table-column label="操作" width="120">
              <template #default="{ row }">
                <el-button type="danger" size="small" @click="handleDeleteFile(row)" plain>
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>

      <!-- 右侧说明 -->
      <el-col :span="8">
        <el-card class="instruction-section">
          <h3>文件格式说明</h3>
          <div class="instruction-content">
            <div class="file-format">
              <el-tag type="success" class="format-tag">节点文件格式</el-tag>
              <el-divider />
              <div class="format-example">
                <p>节点编号 节点类型 节点描述 节点名称</p>
                <p class="example-text">示例：</p>
                <pre>001 User "普通用户" 张三
            002 Product "电子产品" 手机
            003 Category "商品类目" 数码</pre>
              </div>
            </div>

            <div class="file-format">
              <el-tag type="warning" class="format-tag">边文件格式</el-tag>
              <el-divider />
              <div class="format-example">
                <p>起始节点 终止节点</p>
                <p class="example-text">示例：</p>
                <pre>001 002
            002 003
            003 001</pre>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, inject } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Upload, ArrowDown } from '@element-plus/icons-vue'
import { getData, postData, deleteData, postFile } from '@/api/axios.js'


// Store数据
const useAnalyzeInfo = inject('analyzeInfo')

// 响应式数据
const inputMethod = ref('upload')
const nodeFile = ref(null)
const edgeFile = ref(null)
const uploadProgress = ref(0)
const uploadStatus = ref('')
const fileHistory = ref([])
const router = useRouter()
// 计算属性
const canUpload = computed(() => {
  return nodeFile.value && edgeFile.value
})

// 方法
const handleNodeFileChange = (file, fileList) => {
  if (fileList.length > 1) {
    fileList.splice(0, 1);
  }
  nodeFile.value = fileList[0].raw
}

const handleEdgeFileChange = (file, fileList) => {
  if (fileList.length > 1) {
    fileList.splice(0, 1);
  }
  edgeFile.value = fileList[0].raw
}

const formatSize = (bytes) => {
  if (bytes === 0) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

const handleUpload = async () => {
  try {
    uploadStatus.value = ''
    uploadProgress.value = 0
    // 上传文件
    console.log(nodeFile)
    const formData = new FormData();
    formData.append('nodeFileName', nodeFile.value.name)
    formData.append('edgeFileName', edgeFile.value.name)
    formData.append('nodes', nodeFile.value)
    formData.append('edges', edgeFile.value)
    formData.append('type', 'csv')
    formData.append('usage', 'input')

    const response = await postFile('/uploadfile/', formData);
    if (response.status == 'success') {
      ElMessage.success('文件上传成功')
      uploadStatus.value = 'success'
      nodeFile.value = null;
      edgeFile.value = null;

      // 保存上传的文件信息
      response.data.forEach(file => {
        if (file.content === 'node') {
          useAnalyzeInfo.analyzeInfo.value.nodeFile.id = file.id
          useAnalyzeInfo.analyzeInfo.value.nodeFile.name = file.name
          useAnalyzeInfo.analyzeInfo.value.nodeFile.amount = file.ndoes
          useAnalyzeInfo.analyzeInfo.value.nodeFile.sNodes = file.sNodes
          useAnalyzeInfo.analyzeInfo.value.nodeFile.dNodes = file.dNodes
          useAnalyzeInfo.analyzeInfo.value.nodeFile.iNodes = file.iNodes
        }
        if (file.content === 'edge') {
          useAnalyzeInfo.analyzeInfo.value.edgeFile.id = file.id
          useAnalyzeInfo.analyzeInfo.value.edgeFile.name = file.name
          useAnalyzeInfo.analyzeInfo.value.edgeFile.amount = file.edges
        }
        // 获取创建的分析任务ID
        if (file.content === 'mission') {
          useAnalyzeInfo.analyzeInfo.value.mission.id = file.id
          useAnalyzeInfo.analyzeInfo.value.mission.name = file.name
        }
      })
      // 跳转到规划页面
      inputMethod.value = "done";
      console.log(useAnalyzeInfo.analyzeInfo.value)
      router.push(`/dashboard/analyze/plan`)

      updateUploadHistory()
    } else {
      ElMessage.error("上传文件出错")
      console.log(response)
    }
  } catch (error) {
    console.log(error)
    ElMessage.error('文件验证失败: ' + error.response.data.message)
    uploadStatus.value = 'exception'
    nodeFile.value = null;
    edgeFile.value = null;
  }
}

const handleDeleteFile = (file) => {
  ElMessageBox.confirm(
    `确定要删除文件 ${file.fileName} 吗？此操作不可恢复。`,
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    deleteData('/uploadfile/', { id: file.id }).then(response => {
      if (response.status == 'success') {
        ElMessage.success('文件已删除')
        updateUploadHistory()
      } else {
        ElMessage.error('文件删除失败' + response.message)
      }
    })
      .catch(error => {
        ElMessage.error('文件删除失败');
        console.log(error)
      })
  }).catch(() => { })
}

const updateUploadHistory = () => {
  getData('/uploadfile/')
    .then(response => {
      fileHistory.value = []
      response.data.reverse().forEach(item => {
        fileHistory.value.push({
          id: item.id,
          content: item.content,
          fileName: item.name,
          uploadTime: item.uploadTime.split('.')[0].replace('T', ' '),
          fileSize: item.size,
          records: []
        })
      })
      // history.forEach(element => {
      //   console.log(element.uploadTime.replace('T', ' ').aplit('.')[0])
      // });
      console.log(fileHistory.value)
    })
    .catch(error => {
      ElMessage.error('获取上传历史失败')
      console.log(error)
    })
}

onMounted(() => {
  updateUploadHistory();
})
</script>

<style lang="scss" scoped>
.analysis-container {
  padding: 20px;
  height: calc(100vh - 60px);
  overflow-y: auto;

  .upload-section {
    margin-bottom: 20px;

    .input-method-select {
      margin-bottom: 20px;
    }

    .upload-area {
      display: flex;
      flex-direction: column;
      gap: 15px;

      .file-upload {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 15px;
        border: 1px dashed var(--el-border-color);
        border-radius: 8px;

        .file-info {
          color: var(--el-text-color-secondary);
          font-size: 0.9em;
        }
      }

      .upload-button {
        margin-top: 15px;
        width: 200px;
        align-self: center;
      }

      .progress-bar {
        margin-top: 10px;
      }
    }
  }

  .history-section {
    h3 {
      margin-bottom: 15px;
      color: var(--el-text-color-primary);
    }

    .analysis-records {
      cursor: pointer;
      color: var(--el-color-primary);
      display: flex;
      align-items: center;
      gap: 5px;
    }
  }

  .instruction-section {
    height: 100%;

    h3 {
      margin-bottom: 15px;
    }

    .instruction-content {
      .file-format {
        margin-bottom: 25px;

        .format-tag {
          margin-bottom: 10px;
        }

        .format-example {
          background: var(--el-fill-color-light);
          padding: 10px;
          border-radius: 6px;

          pre {
            margin: 0;
            font-family: monospace;
          }

          .example-text {
            color: var(--el-text-color-secondary);
            margin: 8px 0;
          }
        }
      }
    }
  }
}
</style>