Skip to content

R
risk-monitor
提交 ebb214c2 authored 作者: coderBryanFu's avatar coderBryanFu
浏览文件
操作

update

上级 d39785ae
显示空白字符变更
内嵌 并排
正在显示 包含 1598 行增加 和 9 行删除
src/router/index.js
浏览文件 @ ebb214c2
......@@ -50,6 +50,10 @@ import WrittingAsstaint from '@/views/writtingAsstaint/index.vue'
import Portal1 from '@/views/portals/portal1/index.vue';
import Portal2 from '@/views/portals/portal2/index.vue';
// 综合搜索
import ComprehensiveSearch from '@/views/comprehensiveSearch/index.vue'
import SearchResults from '@/views/comprehensiveSearch/searchResults/index.vue'
const routes = [
// 智能写报
{
......@@ -398,7 +402,7 @@ const routes = [
}
},
// 门户路由放在这块
// 门户
{
path: "/portal1",
name: "portal1",
......@@ -416,6 +420,23 @@ const routes = [
}
},
// 综合搜索
{
path: "/comprehensiveSearch",
name: "comprehensiveSearch",
component: ComprehensiveSearch,
meta: {
title: "综合搜索"
}
},
{
path: "/searchResults",
name: "searchResults",
component: SearchResults,
meta: {
title: "搜索结果"
}
},
];
const router = createRouter({
......
src/views/comprehensiveSearch/index.vue 0 → 100644
浏览文件 @ ebb214c2
<template>
<div class="wrapper">
<div class="header"><span>首页 </span>> <span>综合检索 </span></div>
<div class="main">
<div class="main-header">
<div class="title">{{ "一站式信息智能检索子系统" }}</div>
<div class="desc">{{ "汇聚全球科技政策、企业动态与管制清单的权威信息检索与分析平台" }}</div>
<div class="search">
<div class="search-left">
<el-input placeholder="搜索关键词" style="width: 700px; height: 100%" />
<div class="btn1">
<div class="icon">
<img src="./assets/images/ai-icon.png" alt="" />
</div>
<div class="text">{{ "智能问答" }}</div>
</div>
<div class="btn2" @click="handleToSearchResults">
<div class="icon">
<img src="./assets/images/search-icon.png" alt="" />
</div>
<div class="text">{{ "全文搜索" }}</div>
</div>
</div>
<div class="search-right">{{ "高级检索" }}</div>
</div>
<div class="info">
<div class="item" v-for="(item, index) in headerInfoList" :key="index">
<div class="num">{{ item.num }}</div>
<div class="name">{{ item.name }}</div>
</div>
</div>
</div>
<div class="main-main">
<div class="main-main-top">
<div class="box1">
<div class="box-header">
<div class="icon">
<img src="./assets/images/box-header-icon.png" alt="" />
</div>
<div class="title">{{ "热点科技动向" }}</div>
<div class="box-header-right">{{ "换一批" }}</div>
</div>
<div class="box1-main">
<div class="box1-item" v-for="(item, index) in box1List" :key="index">
<div class="title">{{ item.title }}</div>
<div class="tag-box">
<div
class="tag"
v-for="(val, idx) in box1List[index].tagList"
:key="idx"
:class="{ tag1: val.status === 1, tag2: val.status === 2, tag3: val.status === 3 }"
>
{{ val.name }}
</div>
</div>
<div class="time">{{ item.time }}</div>
</div>
</div>
</div>
<div class="box2">
<div class="box-header">
<div class="icon">
<img src="./assets/images/box-header-icon.png" alt="" />
</div>
<div class="title">{{ "热点科技安全话题" }}</div>
</div>
<div class="box2-main" id="box2Chart"></div>
</div>
</div>
<div class="main-main-footer">
<div class="box3">
<div class="box-header">
<div class="icon">
<img src="./assets/images/box-header-icon.png" alt="" />
</div>
<div class="title">{{ "智能推荐" }}</div>
</div>
<div class="box3-main">
<div class="box3-item" v-for="(item, index) in box3List" :key="index">
<div class="item-left">
<img :src="item.img" alt="" />
</div>
<div class="item-right">
<div class="title">{{ item.title }}</div>
<div class="content">{{ item.content }}</div>
<div class="item-right-footer">
<div class="time">{{ item.time }}</div>
<div
class="tag"
:class="{
tag1: item.tag.status === 1,
tag2: item.tag.status === 2,
tag3: item.tag.status === 3
}"
>{{ item.tag.name }}</div>
</div>
</div>
</div>
</div>
</div>
<div class="main-main-footer-footer">
<div class="footer-left">{{ "共12894条法案" }}</div>
<div class="footer-right">
<el-pagination background layout="prev, pager, next" :total="96" />
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import router from '@/router/index'
import getWordCloudChart from "./utils/wordCloud";
import setChart from "@/utils/setChart";
import Img1 from "./assets/images/box3-img1.png";
import Img2 from "./assets/images/box3-img2.png";
import Img3 from "./assets/images/box3-img3.png";
import Img4 from "./assets/images/box3-img4.png";
import Img5 from "./assets/images/box3-img5.png";
const headerInfoList = ref([
{
name: "美国",
num: 36447
},
{
name: "欧盟",
num: 14433
},
{
name: "日本",
num: 1986
},
{
name: "韩国",
num: 341
},
{
name: "其他",
num: 12548
}
]);
const box1List = ref([
{
title: "openAI 推出 AI 搜索浏览器 Atlas，直接挑战谷歌 Chrome 的主导地位",
tagList: [{ name: "人工智能", status: 1 }],
time: "2024年12月"
},
{
title: "2025 年 11 月 6 日，2025 年世界互联网大会领先科技奖在浙江乌镇揭晓，清华大学、中国科学院计算技术...",
tagList: [{ name: "互联网", status: 2 }],
time: "2024年12月"
},
{
title: "上海交通大学建成中国首条光子芯片中试线，推出实用化大规模高速可编程光量子计算芯片。",
tagList: [{ name: "芯片", status: 1 }],
time: "2024年12月"
},
{
title: "ALTO Robotics 公司的协作式移动机器人运用模块化结构，专为深度人机协作场景设计，能够显著提升生产...",
tagList: [{ name: "机器人", status: 3 }],
time: "2024年12月"
},
{
title: "国际氢能燃料电池协会发布《AI 技术在氢能领域的应用研究》成果，总结 AI + 氢能实践并给出推动氢能产...",
tagList: [
{ name: "燃料电池", status: 3 },
{ name: "AI", status: 2 }
],
time: "2024年12月"
},
{
title: "百度推出 “剧本驱动多模协同的高拟真数字人技术”，提升数字人直播内容质量和交互能力。",
tagList: [
{ name: "数字人", status: 2 },
{ name: "稳定币", status: 1 }
],
time: "2024年12月"
},
{
title: "中国科学院微小卫星创新研究院的 “千帆星座卫星规模化研制” 项目，展示着星座商用步伐的提速。",
tagList: [
{ name: "中科院", status: 3 },
{ name: "卫星", status: 2 }
],
time: "2024年12月"
},
{
title: "RAER Therapeutics 公司利用创新开发平台，针对各类已知罕见病展开研究，为全球罕见病患者带来新希望。",
tagList: [{ name: "罕见病", status: 2 }],
time: "2024年12月"
}
]);
const box2Data = ref([
{ name: "限制中国获取能源技术", value: 100 },
{ name: "未实现赤字控制目标", value: 66 },
{ name: "关注核聚变能源研究", value: 77 },
{ name: "抵制外国人才争夺", value: 35 },
{ name: "进行可再生能源税收减免", value: 88 },
{ name: "评估中美现代化技术", value: 57 },
{ name: "应对中国制造2025战略", value: 72 },
{ name: "实施能源税收延期", value: 18 },
{ name: "限制采购中国产电池", value: 34 },
{ name: "加强美国在核能领域得到领导力", value: 16 },
{ name: "发展替代燃料", value: 72 },
{ name: "发展风能", value: 58 },
{ name: "发展太阳能", value: 24 },
{ name: "施加额外能源出口限制", value: 33 },
{ name: "评估中美能源技术", value: 47 },
{ name: "禁止资助中国能源项目", value: 32 },
{ name: "不得向中国机构提供援助", value: 62 },
{ name: "开展先进生物能源计划", value: 51 },
{ name: "减少燃料对外依赖", value: 81 },
{ name: "加强供应链风险管理", value: 73 }
]);
const box3List = ref([
{
img: Img1,
title: "美元 “上链”！美国联邦金融稳定币监管法案正式生效",
content:
"《指导与建立美国稳定币国家创新法案》落地，要求稳定币发行方以 1:1 比例储备美元现金、短期美债等高度流动资产，建立联邦与州双轨监管体系。",
time: "创建时期：2025-10- 05",
tag: {
name: "科技法案",
status: 3
}
},
{
img: Img2,
title: "蓝天航空材料有限公司 (Blue Sky Aviation Materials Co., Ltd)",
content:
"专业从事航空航天材料研发、生产和销售的高科技企业，主要产品包括航空发动机叶片、结构胶等关键航空材料，产品广泛应用于国内外主流航空公司。",
time: "创建时期：2025-10- 05",
tag: {
name: "科技法案",
status: 3
}
},
{
img: Img3,
title: "拒绝政府数字货币！美国众议院通过反 CBDC 监控法案",
content:
"《反 CBDC 监控国家法案》以保护金融隐私为核心，拟永久禁止美联储发行数字美元，禁止其向个人直接或间接发行 CBDC，也不得将 CBDC 用于货币政策工具或开展相关...",
time: "创建时期：2025-10- 05",
tag: {
name: "科技法案",
status: 3
}
},
{
img: Img4,
title: "降低机构入场门槛！SEC 撤销银行加密托管负债要求",
content:
"美国 SEC 出台新规，撤销银行参与加密资产托管的相关负债限制，简化合规流程。这一调整为银行等传统金融机构进入加密市场扫清关键障碍，有望吸引更多机构资金流入...",
time: "创建时期：2025-10- 05",
tag: {
name: "科技法案",
status: 3
}
},
{
img: Img5,
title: "皮特・阿吉拉尔（Pete Aguilar）",
content: "所属州：内华达州、出生年月：1982年、现任状态：现任、发起法案数量：11项",
time: "出生日期：1986-04-21",
tag: {
name: "重要人物",
status: 2
}
}
]);
// 点击全文搜索，进入搜索结果页
const handleToSearchResults = () => {
router.push({
path: '/searchResults'
})
}
onMounted(() => {
const box2Chart = getWordCloudChart(box2Data.value)
setChart(box2Chart, 'box2Chart')
})
</script>
<style lang="scss" scoped>
.wrapper {
.box-header {
position: relative;
height: 48px;
display: flex;
align-items: center;
border-bottom: 1px solid rgba(234, 236, 238, 1);
.icon {
width: 19px;
height: 19px;
margin-left: 21px;
img {
width: 100%;
height: 100%;
}
}
.title {
margin-left: 20px;
height: 26px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
letter-spacing: 0px;
text-align: left;
}
.box-header-right {
position: absolute;
top: 12px;
right: 27px;
height: 24px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: right;
}
}
.header {
height: 64px;
color: #fff;
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
line-height: 64px;
background: url("./assets/images/header-bg.png");
box-sizing: border-box;
padding-left: 160px;
}
.main {
width: 100%;
height: calc(100vh - 160px);
background: url("./assets/images/background.png") no-repeat;
background-size: 100% 100%;
.main-header {
height: 491px;
.title {
margin-top: 80px;
height: 66px;
color: rgba(34, 41, 52, 1);
font-family: Microsoft YaHei;
font-size: 50px;
font-weight: 700;
line-height: 66px;
text-align: center;
}
.desc {
height: 24px;
margin-top: 16px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 400;
line-height: 24px;
text-align: center;
}
.search {
margin-top: 80px;
height: 48px;
display: flex;
justify-content: center;
gap: 16px;
.search-left {
width: 960px;
height: 48px;
box-sizing: border-box;
border: 1px solid rgba(255, 255, 255, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 0.65);
position: relative;
.btn1 {
position: absolute;
top: 3px;
right: 131px;
width: 120px;
height: 42px;
box-sizing: border-box;
border: 1px solid rgba(5, 95, 194, 1);
border-radius: 8px;
background: rgba(255, 255, 255, 1);
display: flex;
justify-content: center;
gap: 8px;
cursor: pointer;
.icon {
margin-top: 12px;
width: 20px;
height: 13px;
img {
width: 100%;
height: 100%;
}
}
.text {
margin-top: 9px;
width: 72px;
height: 24px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 400;
line-height: 24px;
text-align: center;
}
}
.btn2 {
position: absolute;
top: 3px;
right: 3px;
width: 120px;
height: 42px;
border-radius: 8px;
background: var(--color-main-active);
display: flex;
justify-content: center;
gap: 8px;
cursor: pointer;
.icon {
margin-top: 10px;
width: 22px;
height: 22px;
img {
width: 100%;
height: 100%;
}
}
.text {
margin-top: 9px;
width: 72px;
height: 24px;
color: #fff;
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 400;
line-height: 24px;
text-align: center;
}
}
}
.search-right {
height: 48px;
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 48px;
}
}
.info {
margin-top: 40px;
height: 60px;
display: flex;
justify-content: center;
gap: 42px;
.item {
padding: 0 8px;
.num {
height: 22px;
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-size: 36px;
font-weight: 700;
line-height: 22px;
letter-spacing: 0px;
text-align: center;
}
.name {
margin-top: 14px;
height: 24px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: center;
}
}
}
}
.main-main {
.main-main-top {
display: flex;
gap: 16px;
justify-content: center;
.box1 {
width: 1064px;
height: 450px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.box1-main {
.box1-item {
width: 1016px;
margin-left: 24px;
height: 46px;
display: flex;
align-items: center;
border-bottom: 1px solid rgba(240, 242, 244, 1);
.title {
width: 768px;
height: 46px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 46px;
letter-spacing: 0px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tag-box {
width: 150px;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 12px;
.tag {
max-width: 75px;
height: 24px;
line-height: 24px;
padding: 0 8px;
text-align: center;
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border-radius: 4px;
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
}
.tag1 {
border: 1px solid rgba(255, 204, 199, 1);
background: rgba(255, 241, 240, 1);
color: rgba(255, 77, 79, 1);
}
.tag2 {
color: rgba(250, 173, 20, 1);
border: 1px solid rgba(255, 241, 184, 1);
background: rgba(255, 251, 230, 1);
}
.tag3 {
color: rgba(22, 119, 255, 1);
border: 1px solid rgba(186, 224, 255, 1);
background: rgba(230, 244, 255, 1);
}
}
.time {
margin-left: 2px;
width: 100px;
height: 22px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
letter-spacing: 0px;
text-align: right;
}
}
}
}
.box2 {
width: 520px;
height: 450px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.box2-main{
height: 390px;
}
}
}
.main-main-footer {
margin-top: 16px;
.box3 {
margin: 0 auto;
width: 1600px;
height: 695px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.box3-main {
padding-top: 8px;
.box3-item {
margin-left: 24px;
height: 122px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
display: flex;
.item-left {
width: 135px;
height: 90px;
margin-top: 16px;
img {
width: 100%;
height: 100%;
}
}
.item-right {
margin-left: 16px;
margin-top: 16px;
.title {
height: 26px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
letter-spacing: 0px;
text-align: left;
}
.content {
margin-top: 8px;
width: 1236px;
height: 24px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
.item-right-footer {
display: flex;
margin-top: 9px;
.time {
width: 152px;
height: 22px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
letter-spacing: 0px;
text-align: left;
}
.tag {
margin-left: 16px;
height: 24px;
line-height: 24px;
padding: 0 8px;
text-align: center;
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border-radius: 4px;
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
}
.tag1 {
border: 1px solid rgba(255, 204, 199, 1);
background: rgba(255, 241, 240, 1);
color: rgba(255, 77, 79, 1);
}
.tag2 {
color: rgba(250, 173, 20, 1);
border: 1px solid rgba(255, 241, 184, 1);
background: rgba(255, 251, 230, 1);
}
.tag3 {
color: rgba(22, 119, 255, 1);
border: 1px solid rgba(186, 224, 255, 1);
background: rgba(230, 244, 255, 1);
}
}
}
}
}
}
.main-main-footer-footer {
width: 1600px;
margin: 0 auto;
height: 95px;
display: flex;
justify-content: space-between;
align-items: center;
.footer-left {
height: 20px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0px;
text-align: left;
}
}
}
}
}
}
:deep(.el-input__wrapper) {
box-shadow: none;
}
</style>
\ No newline at end of file
src/views/comprehensiveSearch/searchResults/index.vue 0 → 100644
浏览文件 @ ebb214c2
<template>
<div class="wrapper">
<div class="header">
<div class="search-box">
<div class="left">
<div class="icon">
<img src="./assets/images/search-icon1.png" alt="" />
</div>
<el-input :border="false" style="width: 900px; height: 100%" />
</div>
<div class="right">
<img src="./assets/images/ai-icon.png" alt="" />
</div>
</div>
<div class="tab-box">
<div class="tab-left">
<div class="tab" :class="{ tabActive: item.isActive }" v-for="(item, index) in tabList" :key="index">
{{ item.name }}
</div>
</div>
<div class="tab-right">
<div class="text">{{ "全部国家" }}</div>
<div class="icon">
<img src="./assets/images/down.png" alt="" />
</div>
</div>
</div>
<div class="tag-box">
<div class="tag" v-for="(item, index) in tagList" :key="index">{{ item.name }}</div>
</div>
<div class="info-box">
<div class="info-left">
<div class="text-box">
搜索结果<span class="text-1">{{ "356" }}</span
>条
</div>
<div class="text-box">
搜索关键词：<span class="text-2">{{ "金融" }}</span>
</div>
<div class="text-box">
当前领域：<span class="text-2">{{ "科技法案" }}</span>
</div>
</div>
<div class="info-right">
<el-select v-model="selectTime" placeholder="选择时间" style="width: 125px">
<el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-select v-model="selectRelation" placeholder="选择相关度" style="width: 125px">
<el-option v-for="item in relationList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
</div>
<div class="summary-box">
<div class="summary-header">
<img src="./assets/images/summary-icon.png" alt="" />
</div>
<div class="summary-content">
{{
` 美国众议院共和党人正在起草一项新提案，以限制美国对中国的投资。此前，参议院已将其纳入国防政策立法中。知情人士向Semafor透露，众议院工作人员希望在11月7日前就该提案达成共识，并将财政部的反馈纳入由肯塔基州共和党众议员安迪·巴尔提出的配套提案中（尽管政府停摆可能推迟这一时间表）。随后，众议员将利用该文本与参议员就最终《国防授权法案》的内容进行协商。此前一届国会中，类似的尝试因北卡罗来纳州前众议员帕特里克·麦克亨利的反对而失败，但本届国会中，“所有人都在共同努力”。知情人士补充说，领导人并不担心此举会剥夺特朗普在周四与中国领导人习近平会谈时的谈判筹码，因为财政部已开始实施类似的指导方针。`
}}
</div>
</div>
<div class="header-right">
<div class="header-right-header">{{ "关联检索" }}</div>
<div class="header-right-main">
<div class="header-right-main-item" v-for="item,index in relatedSearchList" :key="index">
<div class="icon">
<img src="./assets/images/search-icon2.png" alt="" />
</div>
<div class="text">{{ item }}</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
const selectTime = ref("全部时间");
const selectRelation = ref("相关度优先");
const tabList = ref([
{
name: "法案",
isActive: true
},
{
name: "政令",
isActive: false
},
{
name: "科技智库",
isActive: false
},
{
name: "企业",
isActive: false
},
{
name: "出口管制",
isActive: false
},
{
name: "市场准入",
isActive: false
},
{
name: "投融资限制",
isActive: false
},
{
name: "重要人物",
isActive: false
}
]);
const tagList = ref([
{
name: "人工智能"
},
{
name: "集成电路"
},
{
name: "通信网络"
},
{
name: "量子科技"
},
{
name: "能源"
},
{
name: "生物科技"
},
{
name: "航空航天"
},
{
name: "海洋"
},
{
name: "新材料"
},
{
name: "先进制造"
}
]);
const timeList = ref([
{
label: "全部时间",
value: "全部时间"
},
{
label: "2025年",
value: "2025年"
},
{
label: "2024年",
value: "2024年"
}
]);
const relationList = ref([
{
label: "相关度优先",
value: "相关度优先"
},
{
label: "相关度优先1",
value: "相关度优先1"
},
{
label: "相关度优先2",
value: "相关度优先2"
}
]);
// 关联检索
const relatedSearchList = ref([
'金融制度是如何建立的？',
'金融有什么用？',
'如何办理金融贷款？',
'2025年美国金融法案发布情况',
'中国如何应对金融制裁',
'中国金融制度建立历史'
])
</script>
<style lang="scss" scoped>
:deep(.el-input__wrapper) {
box-shadow: none;
}
:deep(.el-input__wrapper:hover) {
box-shadow: none !important;
}
:deep(.el-input__wrapper.is-focus) {
box-shadow: none !important;
}
.wrapper {
width: 100%;
height: calc(100vh - 96px);
background: url("../assets/images/background.png") no-repeat;
background-size: 100% 100%;
.header {
margin-top: 24px;
position: relative;
.header-right {
position: absolute;
width: 360px;
top: 134px;
left: 1300px;
.header-right-header {
height: 30px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 30px;
letter-spacing: 0px;
text-align: left;
}
.header-right-main {
margin-top: 24px;
height: 300px;
.header-right-main-item {
width: 360px;
height: 40px;
border-radius: 20px;
background: rgba(247, 248, 249, 1);
display: flex;
gap: 8px;
margin-bottom: 8px;
cursor: pointer;
&:hover{
background: rgb(234, 234, 234);
}
.icon {
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
margin-left: 16px;
margin-top: 12px;
}
.text {
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 38px;
color: rgba(59, 65, 75, 1);
}
}
}
}
.search-box {
display: flex;
.left {
margin-left: 240px;
width: 960px;
height: 48px;
box-sizing: border-box;
border: 1px solid rgba(255, 255, 255, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 0.65);
display: flex;
&:hover {
border: 1px solid var(--color-main-active);
}
.icon {
width: 20px;
height: 20px;
margin-top: 14px;
margin-left: 16px;
margin-right: 10px;
img {
width: 100%;
height: 100%;
}
}
}
.right {
margin-left: 2px;
margin-top: -16px;
width: 80px;
height: 80px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
}
.tab-box {
margin-top: 12px;
height: 48px;
display: flex;
margin-left: 257px;
align-items: center;
.tab-left {
width: 726px;
height: 48px;
display: flex;
gap: 32px;
.tab {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 400;
line-height: 48px;
box-sizing: border-box;
border-bottom: 3px solid transparent;
cursor: pointer;
&:hover {
color: var(--color-main-active);
}
}
.tabActive {
color: var(--color-main-active);
font-size: 18px;
font-weight: 700;
border-bottom: 3px solid var(--color-main-active);
}
}
.tab-right {
margin-left: 74px;
width: 120px;
height: 32px;
box-sizing: border-box;
border: 1px solid var(--color-main-active);
border-radius: 20px;
background: rgba(231, 243, 255, 1);
display: flex;
justify-content: center;
gap: 8px;
.text {
margin-top: 4px;
height: 24px;
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
line-height: 24px;
}
.icon {
margin-top: 3px;
width: 8px;
height: 5px;
img {
width: 100%;
height: 100%;
}
}
}
}
.tag-box {
margin-top: 16px;
width: 908px;
height: 32px;
display: flex;
gap: 12px;
margin-left: 256px;
.tag {
height: 32px;
line-height: 30px;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
padding: 0 10px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
}
}
.info-box {
margin-top: 16px;
margin-left: 257px;
width: 920px;
height: 32px;
display: flex;
justify-content: space-between;
.info-left {
display: flex;
gap: 24px;
.text-box {
height: 32px;
line-height: 32px;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
color: rgba(59, 65, 75, 1);
.text-1 {
color: var(--color-main-active);
font-weight: 700;
font-size: 20px;
margin: 0 5px;
}
.text-2 {
color: var(--color-main-active);
font-size: 18px;
margin: 0 5px;
}
}
}
.info-right {
display: flex;
gap: 13px;
}
}
.summary-box {
width: 960px;
height: 260px;
margin-left: 240px;
margin-top: 36px;
box-sizing: border-box;
border: 1px solid rgba(231, 243, 255, 1);
border-radius: 10px;
background: linear-gradient(180deg, rgba(246, 250, 255, 1), rgba(246, 250, 255, 0) 100%);
.summary-header {
width: 135px;
height: 32px;
margin-top: 16px;
margin-left: 24px;
img {
width: 100%;
height: 100%;
}
}
.summary-content {
width: 912px;
height: 180px;
margin: 16px auto;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: justify;
color: rgba(59, 65, 75, 1);
}
}
}
}
</style>
\ No newline at end of file
src/views/comprehensiveSearch/utils/wordCloud.js 0 → 100644
浏览文件 @ ebb214c2
const getWordCloudChart = (data) => {
const option = {
grid: {
left: 0,
top: 0,
right: 0,
bottom: 0,
},
series: [
{
type: "wordCloud",
shape: "rect", //
// 其他形状你可以使用形状路径
// 或者自定义路径
// shape: 'circle' // 圆形（默认）
// shape: 'rect' // 矩形
// shape: 'roundRect' // 圆角矩形
// shape: 'triangle' // 三角形
// shape: 'diamond' // 菱形
// shape: 'pentagon' // 五边形
// shape: 'star' // 星形
// shape: 'cardioid' // 心形
gridSize: 5, // 网格大小，影响词间距。
sizeRange: [10, 30], // 定义词云中文字大小的范围
rotationRange: [0, 0],
rotationStep: 10,
drawOutOfBound: false, // 是否超出画布
// 字体
textStyle: {
// normal: {
// color: function () {
// return 'rgb(' + [
// Math.round(Math.random() * 160),
// Math.round(Math.random() * 160),
// Math.round(Math.random() * 160)
// ].join(',') + ')';
// }
// },
color: function () {
let colors = [
"rgba(189, 33, 33, 1)",
"rgba(232, 151, 21, 1)",
"rgba(220, 190, 68, 1)",
"rgba(96, 58, 186, 1)",
"rgba(32, 121, 69, 1)",
"rgba(22, 119, 255, 1)",
];
return colors[parseInt(Math.random() * colors.length)];
},
emphasis: {
shadowBlur: 5,
shadowColor: "#333",
},
},
// 设置词云数据
data: data,
},
],
}
return option
}
export default getWordCloudChart
\ No newline at end of file
src/views/writtingAsstaint/index.vue
浏览文件 @ ebb214c2
......@@ -16,7 +16,8 @@
</div>
<div class="btn" @click="handleSwitchMode">
<div class="icon">
<img src="./assets/images/preview-icon.png" alt="" />
<img v-if="isEditMode" src="./assets/images/preview-icon.png" alt="" />
<img v-else src="./assets/images/edit.png" alt="" />
</div>
<div class="text">{{ isEditMode ? "预览" : "编辑" }}</div>
</div>
......@@ -92,6 +93,62 @@
<div class="submit-text">生成报文</div>
</div>
</div>
<!-- <div class="process-box">
<div class="back">
{{ "< 返回" }}
</div>
<div class="process-main-box">
<div class="analysis-box">
<div class="analysis-header">
<div class="icon">
<img src="./assets/images/right-arrow.png" alt="" />
</div>
<div class="text">{{ "任务分析：" }}</div>
</div>
<div class="analysis-content">
{{
"用户需求属于态势要图制图任务，需要围绕“伊以冲突”主题生成关键词、搜索相关新闻、抽取并聚类事件、获取地理位置信息，最终完成事件和地点的可视化标绘"
}}
</div>
</div>
<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="steps-content">
<div class="steps" v-for="(step, index) in steps" :key="index">
<div class="steps-id">{{ step.id }}</div>
<div class="steps-content">{{ step.content }}</div>
</div>
</div>
</div>
<div class="doing-box">
{{ "正在执行步骤1/7:根据制图主题生成关键词" }}
</div>
<div class="tool-box">
<div class="tool-header">{{ '工具调用' }}</div>
<div class="tool-main"></div>
</div>
</div>
<div class="process-tips-box">
<div class="tips-icon">
<img src="./assets/images/tips-icon.png" alt="" />
</div>
<div class="tips-text">内容由AI生成，无法确保真实准确，仅供参考</div>
</div>
<div class="process-footer-box">
<div class="footer-left">
{{ "报文生成中..." }}
</div>
<div class="footer-right">
<div class="icon"></div>
<div class="text">{{ "停止" }}</div>
</div>
</div>
</div> -->
<div class="main-box">
<div v-if="isEditMode" class="edit-panel">
<v-md-editor
......@@ -127,6 +184,37 @@ VMdEditor.use(vuepressTheme, {
Prism
});
const steps = [
{
id: 1,
content: "111111111111111111111111111"
},
{
id: 2,
content: "111111111111111111111111111"
},
{
id: 3,
content: "111111111111111111111111111222222222222222222222222222222222233333333333333333333333333"
},
{
id: 4,
content: "111111111111111111111111111"
},
{
id: 5,
content: "111111111111111111111111111"
},
{
id: 6,
content: "111111111111111111111111111"
},
{
id: 7,
content: "111111111111111111111111111"
}
];
const isEditMode = ref(false);
const handleSwitchMode = () => {
......@@ -162,9 +250,13 @@ const { renderedContent, updateContent } = useMarkdownStream();
const reportContent = ref("");
const curTempTitle = ref("法案");
const getStreamChat = async (search, inputValue) => {
const params = {
query: "输出一篇报文"
query: writtingTitle.value, // "输出一篇报文"
desc: descText.value,
topic: curTempTitle.value // 政令、智库、法案、清单
};
abortController.value = new AbortController();
......@@ -186,6 +278,10 @@ const getStreamChat = async (search, inputValue) => {
let str = msgData.content;
if (str !== "[DONE]") {
reportContent.value += str;
if (reportContent.value.includes("./out/img")) {
reportContent.value = reportContent.value.replaceAll("./out/img", "http://192.168.26.70:8000/out/img");
console.log(111, reportContent.value);
}
updateContent(reportContent.value, scrollContainer.value);
} else {
ElMessage.success("报文生成结束");
......@@ -231,12 +327,20 @@ const tabList = ref([
]);
const tempList = ref([
{
title: "主题报",
desc: "基于特定主题生成各维度的综合分析报告"
title: "法案",
desc: "基于法案内容生成各维度的综合分析报告"
},
{
title: "统计速报",
desc: "基于定期更新的数据源生成各关键指标统计"
title: "智库",
desc: "基于智库内容生成各维度的综合分析报告"
},
{
title: "政令",
desc: "基于政令内容生成各维度的综合分析报告"
},
{
title: "清单",
desc: "基于清单内容生成各维度的综合分析报告"
}
]);
......@@ -244,6 +348,7 @@ const tempActiveIndex = ref(0);
const handleClickTemp = (item, index) => {
tempActiveIndex.value = index;
curTempTitle.value = item.title;
};
// 导出
......@@ -352,6 +457,217 @@ onUnmounted(() => {
.writting-main {
display: flex;
height: calc(100% - 60px);
position: relative;
.process-box {
position: absolute;
left: 0;
top: 0;
width: 520px;
height: 100%;
z-index: 9999;
background: #fff;
.back {
margin-top: 21px;
height: 24px;
line-height: 24px;
margin-left: 22px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
cursor: pointer;
}
.process-main-box {
margin-top: 20px;
margin-left: 22px;
width: 476px;
height: 900px;
// background: orange;
.analysis-box {
.analysis-header {
display: flex;
.icon {
margin-top: 5px;
width: 20px;
height: 20px;
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;
}
}
.analysis-content {
height: 90px;
line-height: 30px;
color: #555;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
text-indent: 32px;
}
}
.steps-box {
margin-top: 20px;
.steps-header {
display: flex;
.icon {
margin-top: 5px;
width: 20px;
height: 20px;
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;
}
}
.steps-content {
max-height: 500px;
width: 100%;
background: skyblue;
overflow-x: hidden;
overflow-y: auto;
.steps {
display: flex;
width: 410px;
margin-left: 40px;
color: #555;
font-family: Microsoft YaHei;
line-height: 35px;
.steps-id {
width: 20px;
font-size: 18px;
font-weight: 700;
}
.steps-content {
font-size: 16px;
font-weight: 400;
width: 430px;
word-wrap: break-word;
}
}
}
}
.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-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;
}
}
}
.process-tips-box {
position: absolute;
left: 22px;
bottom: 81px;
height: 22px;
display: flex;
.tips-icon {
width: 14px;
height: 16px;
margin-top: 3px;
img {
width: 100%;
height: 100%;
}
}
.tips-text {
margin-left: 8px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
}
}
.process-footer-box {
height: 36px;
display: flex;
position: absolute;
left: 22px;
bottom: 29px;
.footer-left {
width: 348px;
height: 36px;
border-radius: 4px;
background: rgba(234, 236, 238, 1);
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
text-align: center;
line-height: 36px;
}
.footer-right {
margin-left: 8px;
display: flex;
width: 120px;
height: 36px;
box-sizing: border-box;
border: 1px solid var(--color-main-active);
border-radius: 4px;
background: rgba(246, 250, 255, 1);
justify-content: center;
align-items: center;
gap: 8px;
cursor: pointer;
.icon {
width: 8px;
height: 8px;
border-radius: 2px;
background: var(--color-main-active);
}
.text {
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
}
}
.sider {
width: 520px;
box-sizing: border-box;
......@@ -411,10 +727,10 @@ onUnmounted(() => {
}
.template-box {
margin-top: 19px;
height: 120px;
height: 260px;
display: flex;
flex-wrap: wrap;
gap: 16px;
.template {
width: 230px;
height: 120px;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论