Skip to content

R
risk-monitor
提交 7f414c84 authored 作者: 安云鹏's avatar 安云鹏
浏览文件
操作

增加底部步骤弹窗

上级 d88247e0
隐藏空白字符变更
内嵌 并排
正在显示 包含 148 行增加 和 54 行删除
src/stores/writtingAsstaintStore.js
浏览文件 @ 7f414c84
......@@ -52,6 +52,10 @@ export const useWrittingAsstaintStore = defineStore('writtingAsstaint', {
containerRef:null
},
// ==================================
// 显示全部进度
isProcessLog:false,
// ====头
isSsearchFor:false,
//list
......@@ -78,7 +82,7 @@ export const useWrittingAsstaintStore = defineStore('writtingAsstaint', {
resultWriteData:null, //文档分析结束之后 写报使用
// 写报
isWriteStart:false,// 写报进行中
processWriteLog:'', //写报步骤
processLogAlone:'', //写报步骤
writeProgressNum:0, //写报 假进度
}),
......@@ -123,14 +127,15 @@ export const useWrittingAsstaintStore = defineStore('writtingAsstaint', {
this.abortController = null;
this.isProcessLog=false
this.headerTabType='translate',
// 底部
this.bottomProgressNum=0, //文档解析 假进度
this.resultWriteData=null, //文档分析结束之后 写报使用
this.processLogAlone='', //写报步骤
// 写报
this.isWriteStart=false,// 写报进行中
this.processWriteLog='', //写报步骤
// this.processWriteLog='', //写报步骤
this.writeProgressNum=0, //写报 假进度
this.tabList[1].active=false
this.tabList[2].active=false
......@@ -212,7 +217,7 @@ export const useWrittingAsstaintStore = defineStore('writtingAsstaint', {
// this.bottomProgressNum=100
this.headerTabType='translate'
this.writeProgressNum=0
this.processWriteLog=''
this.processLogAlone=''
this.tabList[2].active=false
this.abortController.abort()
},
......@@ -405,7 +410,8 @@ export const useWrittingAsstaintStore = defineStore('writtingAsstaint', {
case 'progress':
// 仅更新执行步骤
if (jsonData.message) {
this.processLog = `${this.formattedTime}:${jsonData.message}\r\n`;
this.processLog += `${this.formattedTime}:${jsonData.message}\r\n`;
this.processLogAlone=`${this.formattedTime}:${jsonData.message}\r\n`;
}
this.bottomProgressNum+=1
break;
......@@ -435,7 +441,7 @@ export const useWrittingAsstaintStore = defineStore('writtingAsstaint', {
this.bottomProgressNum=100 // 假进度完成
this.resultWriteData=jsonData //给写报使用
this.tabList[1].active=true //放开思维导图
this.processLog = `点击查看`;
this.processLogAlone = `点击查看`;
// await this.fetchReportData({
// query: this.writtingTitle,
// desc: this.descText,
......@@ -482,8 +488,8 @@ export const useWrittingAsstaintStore = defineStore('writtingAsstaint', {
console.log(">")
if (this.abortController) this.abortController.abort();
this.abortController = new AbortController();
this.processLog = '';
this.processWriteLog=''
// this.processLog = '';
// this.processLogAlone=''
this.writeProgressNum=1
......@@ -576,7 +582,7 @@ export const useWrittingAsstaintStore = defineStore('writtingAsstaint', {
this.writeProgressNum=100 //写报假进度
this.processWriteLog= '点击查看';
this.processLogAlone= '点击查看';
// 这里不再调用 resetGenerateState，因为可能需要保留翻译内容
}
......@@ -589,7 +595,7 @@ export const useWrittingAsstaintStore = defineStore('writtingAsstaint', {
this.tabList[2].active=true //写报生成之后放开写报按钮
this.writeProgressNum=100 //写报假进度
this.processWriteLog= '点击查看';
this.processLogAlone= '点击查看';
} else if ((msgData.event_type || '').toLowerCase().includes('error')) {
// 优先从 data.error 获取详细错误描述
const errorMsg = msgData.data?.error || str || '生成失败';
......@@ -598,8 +604,8 @@ export const useWrittingAsstaintStore = defineStore('writtingAsstaint', {
// 老版 --index.vue 行为：步骤栏直接追加服务端发来的完整步骤内容，不加时间戳、不强行换行
// 这样可以避免 SSE 分片导致的“步骤破碎”（一条步骤被拆成多条显示）
if (str) {
// this.processLog += str;
this.processWriteLog+= str;
this.processLog += str;
this.processLogAlone+= str;
if(this.writeProgressNum<=90){
this.writeProgressNum+=0.05
}
......
src/views/writtingAsstaint/components/WrittingBottom.vue
浏览文件 @ 7f414c84
......@@ -6,21 +6,27 @@
<div class="icon"></div>
<span class="text-tip-2-bold">停止</span>
</div>
<div class="progress">
<div class="login">
<el-progress type="circle" :percentage="store.bottomProgressNum" :width="24" :height="24" style="margin-right: 15px;" :show-text="false" color="rgb(5, 95, 194)"/>
<span class="text-tip-2-bold">
文档翻译中
</span>
<div class="processLogBox" :class="{isProcessLog:store.isProcessLog}">
<div class="progress">
<div class="login">
<el-progress type="circle" :percentage="store.bottomProgressNum" :stroke-width="4" :width="24" :height="24" style="margin-right: 15px;" :show-text="false" color="rgb(5, 95, 194)"/>
<span class="text-tip-2-bold">文档翻译中</span>
</div>
<div class="text-tip-2" style="display: flex;align-items: center;">
<div class="processLogAlone" @click="progressAchieveClick">{{ storeProcessLogAlone }}</div>
<el-icon v-if="store.isProcessLog" @click="isProcessLogClick"><ArrowUpBold /></el-icon>
<el-icon v-else @click="isProcessLogClick"><ArrowDownBold /></el-icon>
</div>
</div>
<div class="text-tip-2" >
<div class="processLogList" ref="processLogListRef">
<p>执行步骤：</p>
<div ref="processContainerRef" v-html="renderedProcess"></div>
</div>
</div>
</div>
<!-- 开始写报 -->
<!-- -->
<div class="parsed" v-else-if="store.bottomProgressNum>=100">
<div class="analysis" v-if="store.writeProgressNum>0&&store.writeProgressNum!=100" @click="store.writeGenerateState">
<div class="icon"></div>
......@@ -34,28 +40,34 @@
<img src="@/assets/icons/aiBox/ai-logo.png" alt="">
<span class="text-tip-1">智能写报</span>
</div>
<div class="processLogBox" :class="{isProcessLog:store.isProcessLog}">
<div class="progress">
<!-- 如果store.writeProgressNum>=1 点击了写报 否则是思维导图已完成 -->
<div class="login" v-if="store.writeProgressNum>=1&&store.writeProgressNum<100">
<el-progress type="circle" :percentage="store.writeProgressNum" :stroke-width="4" :width="24" :height="24" style="margin-right: 15px;" :show-text="false" color="rgb(5, 95, 194)"/>
<span class="text-tip-2-bold">智能写报中</span>
</div>
<div class="login" v-else-if="store.writeProgressNum>=100||store.bottomProgressNum>=100">
<img class="steps" style="" src="@/assets/icons/aiBox/steps.png" alt="">
<span class="text-tip-2-bold" v-if="store.writeProgressNum>=100" > 智能写报完成</span>
<span class="text-tip-2-bold" v-else-if="store.bottomProgressNum>=100"> 思维导图已完成</span>
</div>
<div class="progress">
<!-- 如果store.writeProgressNum>=1 点击了写报 否则是思维导图已完成 -->
<div class="login" v-if="store.writeProgressNum>=1&&store.writeProgressNum<100">
<el-progress type="circle" :percentage="store.writeProgressNum" :width="24" :height="24" style="margin-right: 15px;" :show-text="false" color="rgb(5, 95, 194)"/>
<span class="text-tip-2-bold"> 智能写报中</span>
<div class="text-tip-2" style="display: flex;align-items: center;">
<div class="processLogAlone" @click="progressAchieveClick">{{ storeProcessLogAlone }}</div>
<el-icon v-if="store.isProcessLog" @click="isProcessLogClick"><ArrowUpBold /></el-icon>
<el-icon v-else @click="isProcessLogClick"><ArrowDownBold /></el-icon>
</div>
</div>
<div class="login" v-else-if="store.writeProgressNum>=100">
<el-icon style="width: 24px;height: 24px;margin-right: 4px;"><CircleCheckFilled style="width: 24px;height: 24px;" class="var(--color-primary-35)" /></el-icon>
<span class="text-tip-2-bold"> 文档解析完成</span>
</div>
<div class="login" v-else-if="store.bottomProgressNum>=100">
<el-icon style="width: 24px;height: 24px;margin-right: 4px;"><CircleCheckFilled style="width: 24px;height: 24px;" class="var(--color-primary-35)" /></el-icon>
<!-- <el-progress type="circle" :percentage="store.writeProgressNum" :width="24" :height="24" style="margin-right: 15px;" :show-text="false" color="rgb(5, 95, 194)"/> -->
<span class="text-tip-2-bold"> 思维导图已完成</span>
</div>
<div class="text-tip-2" >
<div ref="processWriteLogRef" v-html="renderedProcess"> </div>
<div class="processLogList" ref="processLogListRef">
<p>执行步骤：</p>
<div ref="processContainerRef" v-html="renderedProcess"></div>
</div>
</div>
</div>
<!-- 开始解析文档 -->
<div class="parsed" v-else >
<div class="notAnalysis" @click="onAnalysisClick()">
......@@ -84,25 +96,29 @@ const emit = defineEmits(["generate","write"]);
const onAnalysisClick=()=>{
store.isShowSteps = !store.isShowSteps
emit("generate");
}
const onWriteClick=()=>{
store.isShowSteps = false
emit("write");
}
const { renderedProcess, updateProcess, clearContent } = useStream();
const processContainerRef = ref(null);
const processLogListRef=ref(null)
// 监听 store.processLog 变化，更新步骤内容并滚动
watch(
() => store.processLog,
async (newLog) => {
console.log(newLog)
console.log(newLog,0)
if (newLog !== undefined && newLog !== null) {
await updateProcess(newLog, processContainerRef.value);
}
if(processLogListRef.value){
processLogListRef.value.scrollTo({
top:processLogListRef.value.scrollHeight,
behavior: 'smooth'
});
}
},
{ immediate: true }
);
......@@ -110,33 +126,59 @@ watch(
defineExpose({
processContainerRef
});
const processWriteLogRef=ref(null)
const processLogAloneRef=ref(null)
const storeProcessLogAlone=ref()
watch(
() => store.processWriteLog,
() => store.processLogAlone,
async (newLog) => {
// console.log(newLog,1)
if (newLog !== undefined && newLog !== null) {
const lines = newLog.split('\n').filter(newLog => newLog.trim());
const lastLine = lines[lines.length - 1];
await updateProcess(lastLine?lastLine:'', processWriteLogRef.value);
storeProcessLogAlone.value=lastLine
// await updateProcess(lastLine?lastLine:'', processLogAloneRef.value);
}
},
{ immediate: true }
);
const isProcessLogClick=()=>{
store.isProcessLog=!store.isProcessLog
nextTick(()=>{
processLogListRef.value.scrollTo({
top:processLogListRef.value.scrollHeight,
behavior: 'smooth'
});
})
}
// 进度完成点击切换
const progressAchieveClick= ()=>{
if(store.writeProgressNum>=100&&storeProcessLogAlone.value=='点击查看'){ //写报
console.log(store.headerTabType)
store.headerTabType='message'
}else if(store.bottomProgressNum>=100&&storeProcessLogAlone.value=='点击查看'){ //思维导图
console.log(store.headerTabType)
store.headerTabType='mind'
}
}
</script>
<style lang="scss" scoped>
.writtingBottom{
width: 100%;
background: #fff;
box-shadow: 0px 0px 3px 0px #d2d2d2;
position: relative;
padding: 0 22px;
.parsed{
display: flex;
justify-content: space-between;
align-items: center;
// align-items: center;
height: 64px;
padding-top: 15px;
.notAnalysis{
margin-left: 22px;
display: flex;
justify-content: center;
align-items: center;
......@@ -155,10 +197,10 @@ watch(
.notProgress{
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
justify-content: space-between;
color: rgba(132, 136, 142, 1);
margin-right: 22px;
img{
width: 16px;
height: 16px;
......@@ -192,20 +234,66 @@ watch(
}
.progress{
display: flex;
justify-content: center;
align-items: center;
justify-content: space-between;
color: var(--color-primary-100);
margin-right: 22px;
background-color: var(--color-primary-10);
background-color: rgb(246, 250, 255);
border-radius: 50px;
height: 38px;
padding: 0 12px;
.login{
margin-right: 10px;
display: flex;
align-items: center;
.steps{
width: 16px;
height: 16px;
margin-right: 12px;
}
.text-tip-2-bold{
}
}
}
.processLogAlone{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 300px;
margin-right: 15px;
cursor: pointer;
}
}
// 总步骤条
.processLogBox{
// background-color: rgba(246, 250, 255, 1);
border-radius: 5px;
transition: all 0.3s ease;
height: 300px;
transform: translateY(0);
.processLogList{
display: none;
padding: 0 40px;
font-size: 14px;
color: rgb(59, 65, 75);
line-height: 22px;
max-height: 240px;
overflow-y: auto;
width: 500px;
font-size: 16px;
}
}
.isProcessLog{
transform: translateY(-270px);
background: rgba(246, 250, 255, 1);
.progress{
background-color: rgba(246, 250, 255, 1);
}
.processLogList{
display: block;
}
}
}
......
src/views/writtingAsstaint/components/WrittingHeader.vue
浏览文件 @ 7f414c84
......@@ -19,7 +19,7 @@
<el-button @click="store.handleIsSsearchFor"><img style="width: 16px;" src="@/assets/icons/aiBox/search.png" alt=""> 查找</el-button>
</div>
<div v-else>
<div v-else style="margin-right: 22px;">
<el-button @click="onExport">导出</el-button>
</div>
</div>
......
src/views/writtingAsstaint/components/WrittingMind.vue
浏览文件 @ 7f414c84
......@@ -19,7 +19,7 @@ let mindMapData = {
]
}
console.log(store.resultWriteData.政令深度分析.条款分析.科技条款内容[0].领域举措,890)
let uniqueId = 1;
function convertMindMap(rawData) {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论