Skip to content

R
risk-monitor
提交 37f443d6 authored 作者: 张伊明's avatar 张伊明
浏览文件
操作

修改只能写报样式

上级 552e6293
隐藏空白字符变更
内嵌 并排
正在显示 包含 341 行增加 和 329 行删除
src/views/writtingAsstaint/index.vue
浏览文件 @ 37f443d6
......@@ -31,98 +31,100 @@
</div>
<div class="writting-main">
<div class="left-box">
<div class="process-box" v-if="isShowProcess">
<div class="back" @click="handleBack">{{ "< 返回" }}</div>
<div class="process-main-box">
<div class="steps-box">
<div class="steps-header">
<div class="icon">
<img src="./assets/images/right-arrow.png" alt="" />
<div class="left-box-input">
<div class="process-box" v-if="isShowProcess">
<div class="back" @click="handleBack">{{ "< 返回" }}</div>
<div class="process-main-box">
<div class="steps-box">
<div class="steps-header">
<div class="icon">
<img src="./assets/images/right-arrow.png" alt="" />
</div>
<div class="text">{{ "执行步骤：" }}</div>
</div>
<div class="text">{{ "执行步骤：" }}</div>
<div class="steps-content" ref="scrollProcessContainer" v-html="renderedProcess"></div>
</div>
<div class="tool-box">
<div class="tool-header">{{ "工具调用" }}</div>
<div class="tool-main">当前智能体工具：{{ curAgentTool ? curAgentTool : "无" }}</div>
</div>
<div class="steps-content" ref="scrollProcessContainer" v-html="renderedProcess"></div>
</div>
<div class="tool-box">
<div class="tool-header">{{ "工具调用" }}</div>
<div class="tool-main">当前智能体工具：{{ curAgentTool ? curAgentTool : "无" }}</div>
</div>
</div>
</div>
<div class="sider" v-else>
<div class="sider-box">
<div class="header">报文主题</div>
<div class="title-box">
<div class="title">主题名称</div>
<el-input
:disabled="true"
style="width: 476px; height: 32px"
class="title-input"
placeholder="输入主题名称，如：大而美法案"
v-model="writtingTitle"
/>
</div>
<div class="description-box">
<div class="title">主题描述</div>
<el-input
:disabled="true"
class="description-input"
type="textarea"
style="width: 476px"
:rows="8"
placeholder="输入报文主题描述，如：从科技领域方面分析大而美法案通过后对中国可能产生的影响"
v-model="descText"
/>
<div class="sider" v-else>
<div class="sider-box">
<div class="header">报文主题</div>
<div class="title-box">
<div class="title">主题名称</div>
<el-input
:disabled="true"
style="width: 476px; height: 32px"
class="title-input"
placeholder="输入主题名称，如：大而美法案"
v-model="writtingTitle"
/>
</div>
<div class="description-box">
<div class="title">主题描述</div>
<el-input
:disabled="true"
class="description-input"
type="textarea"
style="width: 476px"
:rows="8"
placeholder="输入报文主题描述，如：从科技领域方面分析大而美法案通过后对中国可能产生的影响"
v-model="descText"
/>
</div>
</div>
</div>
<div class="sider-box">
<div class="header">报文模板</div>
<div class="template-box">
<div
class="template"
:class="{ tempActive: tempActiveIndex === index }"
v-for="(temp, index) in tempList"
:key="index"
@click="handleClickTemp(temp, index)"
>
<div class="header">
<div class="title">{{ temp.title }}</div>
<div class="icon">
<img src="./assets/images/template-icon.png" alt="" />
<div class="sider-box">
<div class="header">报文模板</div>
<div class="template-box">
<div
class="template"
:class="{ tempActive: tempActiveIndex === index }"
v-for="(temp, index) in tempList"
:key="index"
@click="handleClickTemp(temp, index)"
>
<div class="header">
<div class="title">{{ temp.title }}</div>
<div class="icon">
<img src="./assets/images/template-icon.png" alt="" />
</div>
</div>
<div class="content">{{ temp.desc }}</div>
<div class="active-icon" v-if="tempActiveIndex === index">
<img src="./assets/images/active-icon.png" alt="" />
</div>
<div class="selected-icon" v-if="tempActiveIndex === index">
<img src="./assets/images/selected-icon.png" alt="" />
</div>
</div>
<div class="content">{{ temp.desc }}</div>
<div class="active-icon" v-if="tempActiveIndex === index">
<img src="./assets/images/active-icon.png" alt="" />
</div>
<div class="selected-icon" v-if="tempActiveIndex === index">
<img src="./assets/images/selected-icon.png" alt="" />
</div>
</div>
</div>
</div>
<div class="sider-box">
<div class="header">加载本地文件</div>
<el-upload
action=""
:auto-upload="false"
accept=".pdf"
limit="1"
:on-exceed="handleExceed"
ref="upload"
:on-change="handleFileChange"
:file-list="uploadFileList"
>
<el-button class="sider-upload-btn" type="primary">
<el-icon class="sider-upload-btn-text">
<Upload />
</el-icon>
<span class="sider-upload-btn-text">上传文件</span>
</el-button>
<template #tip>
<div class="sider-upload-btn-tip">支持扩展名：.doc .docx .pdf</div>
</template>
</el-upload>
<div class="sider-box">
<div class="header">加载本地文件</div>
<el-upload
action=""
:auto-upload="false"
accept=".pdf"
limit="1"
:on-exceed="handleExceed"
ref="upload"
:on-change="handleFileChange"
:file-list="uploadFileList"
>
<el-button class="sider-upload-btn" type="primary">
<el-icon class="sider-upload-btn-text">
<Upload />
</el-icon>
<span class="sider-upload-btn-text">上传文件</span>
</el-button>
<template #tip>
<div class="sider-upload-btn-tip">支持扩展名：.doc .docx .pdf</div>
</template>
</el-upload>
</div>
</div>
</div>
<div class="submit-area">
......@@ -266,7 +268,7 @@ const handleGenerate = () => {
const curAgentTool = ref("报告整体优化工具");
const getStreamChat = async (search, inputValue) => {
if (uploadFileList.value.length > 0) {
if (curTempTitle.value === "政令") {
const rawFile = uploadFileList.value[0].raw;
if (!rawFile) {
ElMessage.error("文件解析失败，请重新选择");
......@@ -364,7 +366,7 @@ const callSseWithPdf = async selectedFile => {
await callSseWithAi({
query: writtingTitle.value,
desc: descText.value,
topic: "政令",
topic: curTempTitle.value,
result: jsonData // 传递解析后的对象而非原始字符串
});
}
......@@ -491,6 +493,10 @@ const tabList = ref([
}
]);
const tempList = ref([
{
title: "法案",
desc: "基于政令内容生成各维度的综合分析报告"
},
{
title: "智库",
desc: "基于智库内容生成各维度的综合分析报告"
......@@ -633,321 +639,326 @@ onUnmounted(() => {
display: flex;
flex-direction: column;
width: 525px;
padding: 21px 21px 29px 22px;
padding-top: 22px;
padding-bottom: 29px;
box-sizing: border-box;
border-right: 1px solid rgba(234, 236, 238, 1);
border-top: 1px solid rgba(234, 236, 238, 1);
background: rgba(255, 255, 255, 1);
overflow: scroll;
.process-box {
display: flex;
flex-direction: column;
gap: 20px;
.left-box-input {
overflow-y: scroll;
overflow-x: hidden;
padding-inline: 22px;
.process-box {
display: flex;
flex-direction: column;
gap: 20px;
.back {
height: 24px;
line-height: 24px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
cursor: pointer;
}
.back {
height: 24px;
line-height: 24px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
cursor: pointer;
}
.process-main-box {
width: 476px;
.process-main-box {
width: 476px;
.analysis-box {
.analysis-header {
display: flex;
.analysis-box {
.analysis-header {
display: flex;
.icon {
margin-top: 5px;
width: 20px;
height: 20px;
.icon {
margin-top: 5px;
width: 20px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
img {
width: 100%;
height: 100%;
.text {
height: 30px;
line-height: 30px;
font-family: Microsoft YaHei;
color: #333;
font-size: 20px;
font-weight: 700;
margin-left: 5px;
}
}
.text {
height: 30px;
.analysis-content {
height: 90px;
line-height: 30px;
color: #555;
font-family: Microsoft YaHei;
color: #333;
font-size: 20px;
font-weight: 700;
margin-left: 5px;
font-size: 16px;
font-weight: 400;
text-indent: 32px;
}
}
.analysis-content {
height: 90px;
line-height: 30px;
color: #555;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
text-indent: 32px;
}
}
.steps-box {
.steps-header {
display: flex;
.steps-box {
.steps-header {
display: flex;
.icon {
margin-top: 5px;
width: 20px;
height: 20px;
.icon {
margin-top: 5px;
width: 20px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
img {
width: 100%;
height: 100%;
.text {
height: 30px;
line-height: 30px;
font-family: Microsoft YaHei;
color: #333;
font-size: 20px;
font-weight: 700;
margin-left: 5px;
}
}
.text {
height: 30px;
line-height: 30px;
font-family: Microsoft YaHei;
color: #333;
font-size: 20px;
font-weight: 700;
margin-left: 5px;
.steps-content {
width: 100%;
min-height: 20px;
max-height: 480px;
overflow-x: hidden;
overflow-y: auto;
}
}
.steps-content {
width: 100%;
min-height: 20px;
max-height: 480px;
overflow-x: hidden;
overflow-y: auto;
.doing-box {
height: 40px;
line-height: 40px;
color: #555;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
margin-left: 20px;
}
}
.doing-box {
height: 40px;
line-height: 40px;
color: #555;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
margin-left: 20px;
}
.tool-box {
width: 440px;
height: 160px;
margin: 10px auto;
background: #f6f9fe;
border-radius: 10px;
.tool-box {
width: 440px;
height: 160px;
margin: 10px auto;
background: #f6f9fe;
border-radius: 10px;
.tool-header {
height: 30px;
line-height: 30px;
margin-left: 20px;
color: var(--color-main-active);
}
.tool-header {
height: 30px;
line-height: 30px;
margin-left: 20px;
color: var(--color-main-active);
}
.tool-main {
height: 110px;
width: 400px;
margin: 0 auto;
background: #fff;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 40px;
.tool-main {
height: 110px;
width: 400px;
margin: 0 auto;
background: #fff;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 40px;
}
}
}
}
}
.sider {
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 23px;
.sider-box {
.header {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
.sider {
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 23px;
.template-box {
margin-top: 19px;
height: 260px;
display: flex;
flex-wrap: wrap;
gap: 16px;
.sider-box {
.header {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
.template {
width: 230px;
height: 120px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 4px;
position: relative;
cursor: pointer;
.template-box {
margin-top: 19px;
height: 260px;
display: flex;
flex-wrap: wrap;
gap: 16px;
.template {
width: 230px;
height: 120px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 4px;
position: relative;
cursor: pointer;
.active-icon {
width: 24px;
height: 24px;
position: absolute;
top: 0;
right: 0;
z-index: 99;
.active-icon {
width: 24px;
height: 24px;
position: absolute;
top: 0;
right: 0;
z-index: 99;
img {
width: 100%;
height: 100%;
img {
width: 100%;
height: 100%;
}
}
}
.selected-icon {
width: 8px;
height: 6px;
position: absolute;
top: -4px;
right: 3px;
z-index: 100;
img {
.selected-icon {
width: 8px;
height: 6px;
position: absolute;
top: -4px;
right: 3px;
z-index: 100;
img {
width: 8px;
height: 6px;
}
}
}
.header {
display: flex;
justify-content: space-between;
height: 50px;
.header {
display: flex;
justify-content: space-between;
height: 50px;
.title {
height: 24px;
// color: rgba(59, 65, 75, 1);
color: #333;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
margin-left: 15px;
margin-top: 16px;
}
.title {
height: 24px;
// color: rgba(59, 65, 75, 1);
color: #333;
.icon {
margin-top: 15px;
margin-right: 16px;
width: 30px;
height: 30px;
border-radius: 15px;
background: rgba(231, 243, 255, 1);
img {
width: 17px;
height: 14px;
margin-top: 8px;
margin-left: 7px;
}
}
}
.content {
margin: 0 auto;
width: 200px;
height: 48px;
margin-top: 10px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
font-weight: 400;
line-height: 24px;
margin-left: 15px;
margin-top: 16px;
}
}
.icon {
margin-top: 15px;
margin-right: 16px;
width: 30px;
height: 30px;
border-radius: 15px;
background: rgba(231, 243, 255, 1);
img {
width: 17px;
height: 14px;
margin-top: 8px;
margin-left: 7px;
}
}
.tempActive {
border: 1px solid rgba(5, 95, 194, 1);
background: rgba(246, 250, 255, 1);
}
}
.content {
margin: 0 auto;
width: 200px;
height: 48px;
margin-top: 10px;
color: rgba(132, 136, 142, 1);
.title-box {
margin-top: 15px;
.title {
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
.tempActive {
border: 1px solid rgba(5, 95, 194, 1);
background: rgba(246, 250, 255, 1);
.title-input {
margin-top: 15px;
}
}
}
.title-box {
margin-top: 15px;
.description-box {
margin-top: 24px;
.title {
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.title {
height: 24px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.title-input {
margin-top: 15px;
.description-input {
margin-top: 12px;
height: 200px;
}
}
}
.description-box {
margin-top: 24px;
.sider-upload-btn {
width: 476px;
height: 36px;
box-sizing: border-box;
border: 1px dashed rgba(234, 236, 238, 1);
border-radius: 6px;
background: rgba(247, 248, 249, 1);
margin-top: 19px;
}
.title {
height: 24px;
color: rgba(95, 101, 108, 1);
.sider-upload-btn-text {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-style: Regular;
font-size: 14px;
font-weight: 400;
line-height: 24px;
line-height: 22px;
letter-spacing: 0px;
text-align: left;
}
.description-input {
margin-top: 12px;
height: 200px;
.sider-upload-btn-tip {
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 14px;
font-weight: 400;
line-height: 22px;
letter-spacing: 0px;
text-align: left;
margin-top: 8px;
}
}
.sider-upload-btn {
width: 476px;
height: 36px;
box-sizing: border-box;
border: 1px dashed rgba(234, 236, 238, 1);
border-radius: 6px;
background: rgba(247, 248, 249, 1);
margin-top: 19px;
}
.sider-upload-btn-text {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 14px;
font-weight: 400;
line-height: 22px;
letter-spacing: 0px;
text-align: left;
}
.sider-upload-btn-tip {
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 14px;
font-weight: 400;
line-height: 22px;
letter-spacing: 0px;
text-align: left;
margin-top: 8px;
}
}
}
......@@ -955,6 +966,7 @@ onUnmounted(() => {
margin-top: auto;
width: 100%;
min-height: 74px;
padding-inline: 22px;
.tips {
height: 22px;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论