Skip to content

A
AI_BOOK_TOOL
Commit d2db0d49 authored by 15011343103's avatar 15011343103
Browse files
Options

feat

parent f2d92881
Show whitespace changes
Inline Side-by-side
Showing with 282 additions and 114 deletions
form/index.css
View file @ d2db0d49
...@@ -744,11 +744,44 @@ html, body { ...@@ -744,11 +744,44 @@ html, body {
z-index: 1000; z-index: 1000;
} }
/* 处理进度界面样式 */
.process-container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
background-color: #fff;
padding: 20px;
box-sizing: border-box;
}
.process-header {
padding: 20px;
border-bottom: 1px solid #e4e7ed;
}
.process-header h2 {
margin: 0;
color: #303133;
font-size: 24px;
}
.process-content {
flex: 1;
overflow-y: auto;
padding: 20px;
}
.process-content .el-timeline {
padding: 0;
margin: 0;
}
/* 上传界面样式 */
.upload-area { .upload-area {
width: 80%; width: 800px;
max-width: 800px; background-color: #fff;
background: white; padding: 30px;
padding: 40px;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
} }
...@@ -758,19 +791,13 @@ html, body { ...@@ -758,19 +791,13 @@ html, body {
} }
.upload-section h3 { .upload-section h3 {
margin-bottom: 15px; margin: 0 0 20px 0;
color: #303133; color: #303133;
font-size: 18px; font-size: 18px;
} }
.upload-box { .upload-box {
border: 2px dashed #dcdfe6; width: 100%;
border-radius: 6px;
padding: 40px;
text-align: center;
cursor: pointer;
transition: all 0.3s;
position: relative;
} }
.upload-box:hover { .upload-box:hover {
...@@ -784,12 +811,12 @@ html, body { ...@@ -784,12 +811,12 @@ html, body {
.upload-box i { .upload-box i {
font-size: 48px; font-size: 48px;
color: #909399; color: #c0c4cc;
margin-bottom: 15px; margin-bottom: 10px;
} }
.upload-text { .upload-text {
color: #606266; text-align: center;
} }
.upload-text p { .upload-text p {
...@@ -802,18 +829,14 @@ html, body { ...@@ -802,18 +829,14 @@ html, body {
} }
.file-info { .file-info {
margin-top: 15px; margin-top: 10px;
padding: 10px; padding: 10px;
background-color: #f5f7fa; background-color: #f5f7fa;
border-radius: 4px; border-radius: 4px;
display: flex;
justify-content: space-between;
align-items: center;
} }
.file-info p { .file-info p {
margin: 0; margin: 5px 0;
color: #606266;
} }
.upload-actions { .upload-actions {
...@@ -826,28 +849,6 @@ html, body { ...@@ -826,28 +849,6 @@ html, body {
padding: 10px 0; padding: 10px 0;
} }
/* 添加时间轴容器的最大高度和滚动条样式 */
.upload-section .el-timeline {
max-height: 400px;
overflow-y: auto;
padding-right: 10px;
}
/* 自定义滚动条样式 */
.upload-section .el-timeline::-webkit-scrollbar {
width: 6px;
}
.upload-section .el-timeline::-webkit-scrollbar-thumb {
background-color: #909399;
border-radius: 3px;
}
.upload-section .el-timeline::-webkit-scrollbar-track {
background-color: #f5f7fa;
border-radius: 3px;
}
.timeline-content h4 { .timeline-content h4 {
margin: 0 0 10px 0; margin: 0 0 10px 0;
color: #303133; color: #303133;
...@@ -864,6 +865,21 @@ html, body { ...@@ -864,6 +865,21 @@ html, body {
margin: 5px 0 0 0; margin: 5px 0 0 0;
} }
/* 自定义滚动条样式 */
.process-content::-webkit-scrollbar {
width: 6px;
}
.process-content::-webkit-scrollbar-thumb {
background-color: #909399;
border-radius: 3px;
}
.process-content::-webkit-scrollbar-track {
background-color: #f5f7fa;
border-radius: 3px;
}
.el-timeline-item__node { .el-timeline-item__node {
background-color: #409eff; background-color: #409eff;
} }
......
form/index.html
View file @ d2db0d49
...@@ -31,10 +31,12 @@ ...@@ -31,10 +31,12 @@
<div id="app" v-loading.fullscreen.lock="loading"> <div id="app" v-loading.fullscreen.lock="loading">
<!-- 文件上传界面 --> <!-- 文件上传界面 -->
<div class="upload-container" v-if="!hasData"> <div class="upload-container" v-if="!hasData">
<div class="upload-area"> <!-- 处理进度界面 -->
<!-- 添加任务处理进度时间轴 --> <div class="process-container" v-if="queueTasks.length > 0">
<div class="upload-section" v-if="queueTasks.length > 0"> <div class="process-header">
<h3>处理进度</h3> <h2>处理进度</h2>
</div>
<div class="process-content">
<el-timeline> <el-timeline>
<el-timeline-item <el-timeline-item
v-for="(task, index) in queueTasks" v-for="(task, index) in queueTasks"
...@@ -54,8 +56,10 @@ ...@@ -54,8 +56,10 @@
</el-timeline-item> </el-timeline-item>
</el-timeline> </el-timeline>
</div> </div>
</div>
<template v-if="queueTasks.length === 0"> <!-- 上传界面 -->
<div class="upload-area" v-else>
<div class="upload-section"> <div class="upload-section">
<h3>音频文件上传</h3> <h3>音频文件上传</h3>
<el-upload <el-upload
...@@ -122,7 +126,6 @@ ...@@ -122,7 +126,6 @@
开始处理 开始处理
</el-button> </el-button>
</div> </div>
</template>
</div> </div>
</div> </div>
......
form/index.js
View file @ d2db0d49
...@@ -99,6 +99,7 @@ new Vue({ ...@@ -99,6 +99,7 @@ new Vue({
methods: { methods: {
// 心跳实时查询异步处理进度及信息 // 心跳实时查询异步处理进度及信息
async checkProcess(_data) { async checkProcess(_data) {
let data = _data; let data = _data;
if (!data) { if (!data) {
data = await new Promise((resolve) => { data = await new Promise((resolve) => {
...@@ -121,6 +122,153 @@ new Vue({ ...@@ -121,6 +122,153 @@ new Vue({
}, },
// 加载默认数据 // 加载默认数据
async loadDefaultData() { async loadDefaultData() {
// const mockData = [
// {
// "step_code": "QUEUE",
// "step_code_desc": "加入AI任务队列",
// "step_status": "3",
// "step_process": "100",
// "err_massage": ""
// },
// {
// "step_code": "AUDIO_CHANGE",
// "step_code_desc": "音频标准化转码",
// "step_status": "4",
// "step_process": "0",
// "err_massage": "The specified key does not exist."
// },
// {
// "step_code": "AUDIO_POINT",
// "step_code_desc": "ElevenLabs语音语义上下文分析",
// "step_status": "3",
// "step_process": "100",
// "err_massage": ""
// },
// {
// "step_code": "PDF_TO_IMAGE",
// "step_code_desc": "PDF转图片",
// "step_status": "3",
// "step_process": "100",
// "err_massage": ""
// },
// {
// "step_code": "IMAGE_COMPRESS",
// "step_code_desc": "图片标准化压缩",
// "step_status": "3",
// "step_process": "100",
// "err_massage": ""
// },
// {
// "step_code": "OCR",
// "step_code_desc": "百度AI大模型文字定位识别",
// "step_status": "3",
// "step_process": "100",
// "err_massage": ""
// },
// {
// "step_code": "SENTENCE_GROUP",
// "step_code_desc": "DeepSeek自然语言处理, 识别、拆分及重组句子",
// "step_status": "1",
// "step_process": "0",
// "err_massage": ""
// },
// {
// "step_code": "AUDIO_CHANGE",
// "step_code_desc": "音频标准化转码",
// "step_status": "3",
// "step_process": "100",
// "err_massage": ""
// },
// {
// "step_code": "AUDIO_POINT",
// "step_code_desc": "ElevenLabs语音语义上下文分析",
// "step_status": "3",
// "step_process": "100",
// "err_massage": ""
// },
// {
// "step_code": "PDF_TO_IMAGE",
// "step_code_desc": "PDF转图片",
// "step_status": "3",
// "step_process": "100",
// "err_massage": ""
// },
// {
// "step_code": "IMAGE_COMPRESS",
// "step_code_desc": "图片标准化压缩",
// "step_status": "3",
// "step_process": "100",
// "err_massage": ""
// },
// {
// "step_code": "OCR",
// "step_code_desc": "百度AI大模型文字定位识别",
// "step_status": "3",
// "step_process": "100",
// "err_massage": ""
// },
// {
// "step_code": "SENTENCE_GROUP",
// "step_code_desc": "DeepSeek自然语言处理, 识别、拆分及重组句子",
// "step_status": "1",
// "step_process": "0",
// "err_massage": ""
// },
// {
// "step_code": "AUDIO_CHANGE",
// "step_code_desc": "音频标准化转码",
// "step_status": "3",
// "step_process": "100",
// "err_massage": ""
// },
// {
// "step_code": "AUDIO_POINT",
// "step_code_desc": "ElevenLabs语音语义上下文分析",
// "step_status": "3",
// "step_process": "100",
// "err_massage": ""
// },
// {
// "step_code": "PDF_TO_IMAGE",
// "step_code_desc": "PDF转图片",
// "step_status": "3",
// "step_process": "100",
// "err_massage": ""
// },
// {
// "step_code": "IMAGE_COMPRESS",
// "step_code_desc": "图片标准化压缩",
// "step_status": "3",
// "step_process": "100",
// "err_massage": ""
// },
// {
// "step_code": "OCR",
// "step_code_desc": "百度AI大模型文字定位识别",
// "step_status": "3",
// "step_process": "100",
// "err_massage": ""
// },
// {
// "step_code": "SENTENCE_GROUP",
// "step_code_desc": "DeepSeek自然语言处理, 识别、拆分及重组句子",
// "step_status": "3",
// "step_process": "100",
// "err_massage": ""
// },
// {
// "step_code": "AUDIO_PAGE_SENTENCE_MATCH",
// "step_code_desc": "DeepSeek深度思考, 匹配音频-图片, 音频-句子的最优结果",
// "step_status": "1",
// "step_process": "0",
// "err_massage": ""
// }
// ];
// this.queueTasks = mockData;
// return;
this.loading = true; this.loading = true;
this.$message.info('正在加载数据...'); this.$message.info('正在加载数据...');
...@@ -2264,6 +2412,7 @@ new Vue({ ...@@ -2264,6 +2412,7 @@ new Vue({
formatTimestamp(timestamp) { formatTimestamp(timestamp) {
if (!timestamp) return ''; if (!timestamp) return '';
const date = new Date(timestamp); const date = new Date(timestamp);
console.log(date);
const year = date.getFullYear(); const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0'); const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0'); const day = String(date.getDate()).padStart(2, '0');
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment