Skip to content

R
risk-monitor
提交 ed1ebab4 authored 作者: 付康's avatar 付康
浏览文件
操作

Merge branch 'master' into 'yp-dev'

# Conflicts: # src/router/index.js # src/views/marketAccessRestrictions/marketAccessHome/index.vue
上级 6b26970e 44e6af90
隐藏空白字符变更
内嵌 并排
正在显示 包含 3486 行增加 和 282 行删除
package-lock.json
浏览文件 @ ed1ebab4
...@@ -15,6 +15,7 @@ ...@@ -15,6 +15,7 @@
"@traptitech/markdown-it-katex": "^3.6.0", "@traptitech/markdown-it-katex": "^3.6.0",
"axios": "^1.12.2", "axios": "^1.12.2",
"echarts": "^5.4.3", "echarts": "^5.4.3",
"echarts-liquidfill": "^3.1.0",
"echarts-wordcloud": "^2.1.0", "echarts-wordcloud": "^2.1.0",
"element-plus": "^2.4.4", "element-plus": "^2.4.4",
"highlight.js": "^11.11.1", "highlight.js": "^11.11.1",
...@@ -2894,6 +2895,14 @@ ...@@ -2894,6 +2895,14 @@
"zrender": "5.6.1" "zrender": "5.6.1"
} }
}, },
"node_modules/echarts-liquidfill": {
"version": "3.1.0",
"resolved": "https://registry.npmmirror.com/echarts-liquidfill/-/echarts-liquidfill-3.1.0.tgz",
"integrity": "sha512-5Dlqs/jTsdTUAsd+K5LPLLTgrbbNORUSBQyk8PSy1Mg2zgHDWm83FmvA4s0ooNepCJojFYRITTQ4GU1UUSKYLw==",
"peerDependencies": {
"echarts": "^5.0.1"
}
},
"node_modules/echarts-wordcloud": { "node_modules/echarts-wordcloud": {
"version": "2.1.0", "version": "2.1.0",
"resolved": "https://registry.npmmirror.com/echarts-wordcloud/-/echarts-wordcloud-2.1.0.tgz", "resolved": "https://registry.npmmirror.com/echarts-wordcloud/-/echarts-wordcloud-2.1.0.tgz",
......
package.json
浏览文件 @ ed1ebab4
...@@ -24,6 +24,7 @@ ...@@ -24,6 +24,7 @@
"@traptitech/markdown-it-katex": "^3.6.0", "@traptitech/markdown-it-katex": "^3.6.0",
"axios": "^1.12.2", "axios": "^1.12.2",
"echarts": "^5.4.3", "echarts": "^5.4.3",
"echarts-liquidfill": "^3.1.0",
"echarts-wordcloud": "^2.1.0", "echarts-wordcloud": "^2.1.0",
"element-plus": "^2.4.4", "element-plus": "^2.4.4",
"highlight.js": "^11.11.1", "highlight.js": "^11.11.1",
......
src/router/index.js
浏览文件 @ ed1ebab4
...@@ -53,6 +53,11 @@ import WrittingAsstaint from "@/views/writtingAsstaint/index.vue"; ...@@ -53,6 +53,11 @@ import WrittingAsstaint from "@/views/writtingAsstaint/index.vue";
import Portal1 from "@/views/portals/portal1/index.vue"; import Portal1 from "@/views/portals/portal1/index.vue";
import Portal2 from "@/views/portals/portal2/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'
import Chat from '@/views/comprehensiveSearch/chat/index.vue'
const routes = [ const routes = [
// 智能写报 // 智能写报
{ {
...@@ -396,33 +401,49 @@ const routes = [ ...@@ -396,33 +401,49 @@ const routes = [
} }
}, },
// 投融资限制 // 门户
{ {
path: "/finance", path: "/portal1",
name: "finance", name: "portal1",
component: Finance, component: Portal1,
meta: { meta: {
title: "投融资限制" title: "门户1"
} }
}, },
{
path: "/portal2",
name: "portal2",
component: Portal2,
meta: {
title: "门户2"
}
},
// 门户路由放在这块 // 综合搜索
{ {
path: "/portal1", path: "/comprehensiveSearch",
name: "portal1", name: "comprehensiveSearch",
component: Portal1, component: ComprehensiveSearch,
meta: { meta: {
title: "门户1" title: "综合搜索"
} }
}, },
{ {
path: "/portal2", path: "/searchResults",
name: "portal2", name: "searchResults",
component: Portal2, component: SearchResults,
meta: { meta: {
title: "门户2" title: "搜索结果"
} }
} },
{
path: "/chat",
name: "chat",
component: Chat,
meta: {
title: "智能问答"
}
},
]; ];
const router = createRouter({ const router = createRouter({
......
src/views/bill/billHome/index.vue
浏览文件 @ ed1ebab4
...@@ -212,7 +212,7 @@ ...@@ -212,7 +212,7 @@
<div class="icon"> <div class="icon">
<img src="./assets/images/box2-footer-icon.png" alt="" /> <img src="./assets/images/box2-footer-icon.png" alt="" />
</div> </div>
<div class="text">{{ "风险处理" }}</div> <div class="text">{{ "查看更多" }}</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -1707,7 +1707,7 @@ onMounted(async () => { ...@@ -1707,7 +1707,7 @@ onMounted(async () => {
height: 100%; height: 100%;
} }
.inner-box { .inner-box {
width: 330px; width: 100%;
height: 93px; height: 93px;
background: rgba(10, 18, 30, 0.75); background: rgba(10, 18, 30, 0.75);
position: absolute; position: absolute;
...@@ -1719,7 +1719,7 @@ onMounted(async () => { ...@@ -1719,7 +1719,7 @@ onMounted(async () => {
height: 30px; height: 30px;
display: flex; display: flex;
.inner-box-title { .inner-box-title {
width: 270px; flex: 9;
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 16px;
...@@ -1730,7 +1730,7 @@ onMounted(async () => { ...@@ -1730,7 +1730,7 @@ onMounted(async () => {
white-space: nowrap; white-space: nowrap;
} }
.inner-box-time { .inner-box-time {
width: 60px; flex: 2;
height: 30px; height: 30px;
color: rgba(255, 255, 255, 0.65); color: rgba(255, 255, 255, 0.65);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
...@@ -1743,7 +1743,7 @@ onMounted(async () => { ...@@ -1743,7 +1743,7 @@ onMounted(async () => {
} }
} }
.inner-box-content { .inner-box-content {
width: 330px; width: 100%;
height: 40px; height: 40px;
overflow: hidden; overflow: hidden;
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
...@@ -1757,7 +1757,7 @@ onMounted(async () => { ...@@ -1757,7 +1757,7 @@ onMounted(async () => {
} }
} }
.box2 { .box2 {
flex: 1; width: 520px;
height: 450px; height: 450px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1); box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
...@@ -1871,16 +1871,16 @@ onMounted(async () => { ...@@ -1871,16 +1871,16 @@ onMounted(async () => {
} }
.box2-footer { .box2-footer {
position: absolute; position: absolute;
left: 40px; left: 30px;
bottom: 20px; bottom: 20px;
width: 430px; width: 460px;
height: 42px; height: 42px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: 6px; border-radius: 6px;
background: rgba(22, 119, 255, 1); background: var(--color-main-active);
cursor: pointer; cursor: pointer;
.icon { .icon {
width: 16px; width: 16px;
...@@ -2792,4 +2792,15 @@ onMounted(async () => { ...@@ -2792,4 +2792,15 @@ onMounted(async () => {
} }
} }
} }
: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;
}
</style> </style>
\ No newline at end of file
src/views/comprehensiveSearch/chat/index.vue 0 → 100644
浏览文件 @ ed1ebab4
<template>
<div class="wrapper">
<div class="header"><span>首页 </span>> <span>综合检索 </span>> <span>智能问答 </span></div>
<div class="main">
<div class="left">
<div class="left-header">
<div class="icon">
<img src="./assets/images/ai.png" alt="" />
</div>
<el-input placeholder="新对话" v-model="newChatTitle" style="width: 220px" />
</div>
<div class="left-main">
<div class="left-main-title">{{ "历史对话" }}</div>
<div class="left-list">
<div
class="left-list-item"
:class="{ itemActive: currentChatId === item.id }"
v-for="(item, index) in chatList"
:key="index"
>
{{ item.title }}
</div>
</div>
</div>
</div>
<div class="right">
<div class="right-header">{{ curChatTitle }}</div>
<div class="right-main">
<div class="right-main-content">
<div class="chat-content" ref="contentContainer">
<!-- 消息列表 -->
<div class="message-list">
<div v-for="(message, index) in messages" :key="index">
<!-- AI 消息 -->
<div v-if="message.type === 'ai'" class="ai-item">
<div class="ai-header">
<div class="icon">
<img src="./assets/images/ai-avator.png" alt="" />
</div>
<div class="text">{{ `已深度思考（用时6秒钟）` }}</div>
</div>
<div class="content ai-content" v-html="renderMarkdown(message.content)"></div>
</div>
<!-- 用户消息 -->
<div v-else class="user-item">
<div class="user-bubble">
<div class="user-content">{{ message.content }}</div>
</div>
</div>
</div>
<!-- 加载状态 -->
<div v-if="isLoading" class="ai-item">
<div class="ai-header">
<div class="icon">
<img src="./assets/images/ai-avator.png" alt="" />
</div>
<div class="text">{{ `正在思考中，请稍候` }}</div>
</div>
<div class="loading-indicator">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
</div>
</div>
</div>
<div class="right-main-footer">
<el-input type="textarea" placeholder="发送消息" :rows="4" v-model="userInput" />
<div class="input-footer">
<div class="icon1">
<el-tooltip effect="dark" content="录音" placement="top">
<img src="./assets/images/microphone.png" alt="" />
</el-tooltip>
</div>
<div class="icon2">
<el-tooltip effect="dark" content="收藏" placement="top">
<img src="./assets/images/attach.png" alt="" />
</el-tooltip>
</div>
<div class="line"></div>
<div class="submit" @click="sendMessage">
<el-tooltip effect="dark" content="发送" placement="top">
<img src="./assets/images/submit.png" alt="" />
</el-tooltip>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { fetchEventSource } from "@microsoft/fetch-event-source";
import MarkdownIt from "markdown-it";
import { ElMessage } from "element-plus";
import { getChat } from "@/api/chat";
const contentContainer = ref(null);
const userInput = ref("");
const isLoading = ref(false);
const abortController = ref(null);
// 消息数据
const messages = ref([
{
type: "user",
content: "你好"
},
{
type: "ai",
content: "您好！我是AI助手，有什么可以帮助您的吗？"
}
]);
// Markdown 渲染器
const md = new MarkdownIt();
// 渲染 markdown
const renderMarkdown = content => {
return md.render(content);
};
// 自动滚动到底部
const scrollToBottom = async () => {
await nextTick();
if (contentContainer.value) {
const container = contentContainer.value;
container.scrollTop = container.scrollHeight;
}
};
// 添加消息
const addMessage = (type, content) => {
messages.value.push({
type,
content,
timestamp: new Date().getTime()
});
scrollToBottom();
};
// 更新最后一条 AI 消息（用于流式输出）
const updateLastAIMessage = content => {
const lastMessage = messages.value[messages.value.length - 1];
if (lastMessage && lastMessage.type === "ai") {
lastMessage.content = content;
scrollToBottom();
}
};
// 使用 fetchEventSource 连接
const connectSSE = async question => {
// 添加用户消息
addMessage("user", question);
// 添加空的 AI 消息用于流式更新
addMessage("ai", "");
isLoading.value = true;
// 创建 AbortController 用于取消请求
abortController.value = new AbortController();
const params = {
query: "如何检索？",
knowledge_base_name: "kb_test251112",
top_k: 6,
score_threshold: 0.5,
metadata: { year: 2024 }
};
try {
await fetchEventSource("/chat/knowledge_base/search_docs", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(params),
signal: abortController.value.signal,
onopen: async response => {
console.log("SSE 连接已建立", response.status);
if (response.status !== 200) {
throw new Error(`请求失败: ${response.status}`);
}
},
onmessage: event => {
try {
if (event.data === "[DONE]") {
// 流式输出结束
isLoading.value = false;
return;
}
const data = JSON.parse(event.data);
if (data.type === "content" && data.content) {
// 流式更新内容
updateLastAIMessage(prev => prev + data.content);
} else if (data.type === "error") {
throw new Error(data.message || "请求失败");
}
} catch (error) {
console.error("解析 SSE 数据错误:", error);
}
},
onclose: () => {
console.log("SSE 连接已关闭");
isLoading.value = false;
},
onerror: error => {
console.error("SSE 连接错误:", error);
ElMessage.error("连接失败，请重试");
isLoading.value = false;
// 不要抛出错误，否则会重试
}
});
} catch (error) {
console.error("SSE 请求失败:", error);
if (error.name !== "AbortError") {
ElMessage.error(error.message || "请求失败");
}
isLoading.value = false;
}
};
const chat = async () => {
const params = {
query: "如何检索？",
knowledge_base_name: "kb_test251112",
top_k: 6,
score_threshold: 0.5,
metadata: { year: 2024 }
};
try {
const res = await getChat(params);
console.log("chat", res);
} catch (error) {
console.error(error);
}
};
// 发送消息
const sendMessage = async () => {
const question = userInput.value.trim();
if (!question) {
ElMessage.warning("请输入问题");
return;
}
if (isLoading.value) {
ElMessage.warning("请等待上一条消息回复完成");
return;
}
userInput.value = "";
await connectSSE(question);
// chat();
};
const newChatTitle = ref(""); // 新对话
const curChatTitle = ref("美国对中国制裁实体清单");
const currentChatId = ref(1);
const chatList = ref([
{
id: 1,
title: "美国对中国制裁实体清单"
},
{
id: 2,
title: "制作中国进口依赖度柱状图"
},
{
id: 3,
title: "列举 2025 年科技产品"
},
{
id: 4,
title: "获取美国国会议员名单"
},
{
id: 5,
title: "2000年以后美国金融法案列举"
},
{
id: 6,
title: "科研机构及高校仪器进口排名"
}
]);
onMounted(() => {
scrollToBottom();
});
onUnmounted(() => {
if (abortController.value) {
abortController.value.abort();
}
});
</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;
}
:deep(.el-input ::placeholder) {
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
}
:deep(.el-input__inner) {
color: #333;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
}
:deep(.el-textarea__inner) {
box-shadow: none;
border-radius: 20px;
resize: none;
}
:deep(.el-textarea__inner:hover) {
box-shadow: none !important;
}
:deep(.el-textarea__inner.is-focus) {
box-shadow: none !important;
}
:deep(.el-textarea ::placeholder) {
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
}
:deep(.el-textarea__inner) {
color: #333;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
}
.wrapper {
.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 {
margin-top: 16px;
display: flex;
justify-content: center;
gap: 16px;
.left {
width: 300px;
height: 880px;
border-radius: 4px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.left-header {
width: 268px;
height: 48px;
margin: 16px auto;
box-sizing: border-box;
border: 1px solid rgba(5, 95, 194, 1);
border-radius: 8px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
display: flex;
.icon {
width: 20px;
height: 13px;
margin-top: 13px;
margin-left: 16px;
img {
width: 100%;
height: 100%;
}
}
}
.left-main {
margin-top: 24px;
.left-main-title {
margin-left: 29px;
width: 64px;
height: 24px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
.left-list {
margin-top: 12px;
margin-left: 16px;
width: 268px;
height: 720px;
.left-list-item {
width: 268px;
height: 48px;
border-radius: 8px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 48px;
box-sizing: border-box;
padding: 0 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
&:hover {
background: rgba(246, 250, 255, 1);
}
}
.itemActive {
background: rgba(246, 250, 255, 1);
color: var(--color-main-active);
font-weight: 700;
}
}
}
}
.right {
width: 1284px;
height: 880px;
border-radius: 4px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.right-header {
height: 64px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
line-height: 64px;
box-sizing: border-box;
padding-left: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
}
.right-main {
.right-main-content {
width: 926px;
margin-left: 166px;
height: 630px;
}
.right-main-footer {
margin: 10px auto;
width: 900px;
height: 160px;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 20px;
background: rgba(255, 255, 255, 1);
.input-footer {
display: flex;
justify-content: flex-end;
.icon1 {
margin-top: 15px;
width: 24px;
height: 24px;
margin-right: 20px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
.icon2 {
margin-top: 15px;
width: 24px;
height: 24px;
margin-right: 20px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
.line {
margin-top: 15px;
margin-right: 20px;
width: 1px;
height: 24px;
background: rgba(234, 236, 238, 1);
}
.submit {
margin-top: 7px;
margin-right: 12px;
width: 40px;
height: 40px;
border-radius: 20px;
background: #b4cfed;
cursor: pointer;
&:hover {
background: rgba(5, 95, 194, 1);
}
img {
width: 24px;
height: 24px;
margin: 8px;
}
}
}
}
}
}
}
}
/* 对话内容区域 */
.chat-content {
overflow-y: auto;
// padding: 20px;
background: #fff;
width: 926px;
.message-list {
padding-bottom: 20px;
}
.ai-item {
width: 926px;
overflow: hidden;
.ai-header {
height: 22px;
display: flex;
.icon {
width: 10px;
height: 10px;
img {
width: 100%;
height: 100%;
}
}
.text {
margin-left: 16px;
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;
}
}
.ai-content {
margin-top: 10px;
width: 900px;
margin-left: 26px;
}
}
.user-item {
margin-top: 32px;
height: 42px;
display: flex;
justify-content: flex-end;
.user-bubble {
line-height: 42px;
border-radius: 21px 0px 21px 21px;
background: rgba(234, 236, 238, 1);
box-sizing: border-box;
padding: 0 20px;
text-align: right;
word-wrap: break-word;
.user-content {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 42px;
letter-spacing: 0px;
text-align: left;
}
}
}
}
/* 加载指示器 */
.loading-indicator {
margin-left: 26px;
height: 30px;
display: flex;
gap: 4px;
padding: 11px 0;
}
.dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #999;
animation: bounce 1.4s infinite ease-in-out;
}
.dot:nth-child(1) {
animation-delay: -0.32s;
}
.dot:nth-child(2) {
animation-delay: -0.16s;
}
</style>
\ No newline at end of file
src/views/comprehensiveSearch/index.vue 0 → 100644
浏览文件 @ ed1ebab4
<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" @click="handleToChat">
<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 handleToChat = () => {
router.push({
path: '/chat'
})
}
// 点击全文搜索，进入搜索结果页
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
浏览文件 @ ed1ebab4
<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 class="main">
<div class="item" v-for="(item, index) in searchResults" :key="index">
<div class="item-left" v-if="item.img">
<img :src="item.img" alt="">
</div>
<div class="item-right">
<div class="title" v-html="renderContent(item.title)"></div>
<div class="content" v-html="renderContent(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 class="footer">
<el-pagination background layout="prev, pager, next" :total="96" />
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import Img1 from './assets/images/img1.png'
import Img2 from './assets/images/img2.png'
import Img3 from './assets/images/img3.png'
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年美国金融法案发布情况",
"中国如何应对金融制裁",
"中国金融制度建立历史"
]);
const searchResults = ref([
{
img: Img1,
title: "美元 “上链”！美国联邦金融稳定币监管法案正式生效",
content:
"《指导与建立美国稳定币国家创新法案》落地，要求稳定币发行方以 1:1 比例储备美元现金、短期美债等高度流动资产，建立联邦与州双轨监管体系。",
time: "通过日期：2025-10- 05",
tag: {
name: "科技法案",
status: 3
}
},
{
img: Img2,
title: "划清监管边界！美国数字资产分类法案众议院高票通过",
content:
"《数字资产市场清晰法案》按去中心化属性划分资产类别，明确 “数字商品” 归 CFTC 监管、“数字资产证” 归 SEC 监管。创设 “金融成熟链机制”。",
time: "通过日期：2025-10- 05",
tag: {
name: "科技法案",
status: 3
}
},
{
img: null,
title: "划清监管边界！美国数字资产分类法案众议院高票通过",
content:
"《数字资产市场清晰法案》按去中心化属性划分资产类别，明确 “数字商品” 归 CFTC 监管、“数字资产证” 归 SEC 监管。创设 “金融成熟链机制”。",
time: "通过日期：2025-10- 05",
tag: {
name: "科技法案",
status: 3
}
},
{
img: null,
title: "划清监管边界！美国数字资产分类法案众议院高票通过",
content:
"《数字资产市场清晰法案》按去中心化属性划分资产类别，明确 “数字商品” 归 CFTC 监管、“数字资产证” 归 SEC 监管。创设 “金融成熟链机制”。",
time: "通过日期：2025-10- 05",
tag: {
name: "科技法案",
status: 3
}
},
{
img: null,
title: "严管金融稳定币发行！美国《STABLE 法案》推进审议",
content:
"法案禁止未授权发行稳定币，违规者将面临每日最高 10 万美元罚款，同时禁止发行方支付利息。要求发行方开展月度审计并公开储备报告，严防关联方资金占用。",
time: "通过日期：2025-10- 05",
tag: {
name: "科技法案",
status: 3
}
},
{
img: null,
title: "严管金融稳定币发行！美国《STABLE 法案》推进审议",
content:
"法案禁止未授权发行稳定币，违规者将面临每日最高 10 万美元罚款，同时禁止发行方支付利息。要求发行方开展月度审计并公开储备报告，严防关联方资金占用。",
time: "通过日期：2025-10- 05",
tag: {
name: "科技法案",
status: 3
}
},
{
img: null,
title: "拒绝政府数字货币！美国众议院通过反 CBDC 监控法案",
content:
"《反 CBDC 监控国家法案》以保护金融隐私为核心，拟永久禁止美联储发行数字美元，禁止其向个人直接或间接发行 CBDC，也不得将 CBDC 用于货币政策工具或开展相关。",
time: "通过日期：2025-10- 05",
tag: {
name: "科技法案",
status: 3
}
},
{
img: null,
title: "拒绝政府数字货币！美国众议院通过反 CBDC 监控法案",
content:
"《反 CBDC 监控国家法案》以保护金融隐私为核心，拟永久禁止美联储发行数字美元，禁止其向个人直接或间接发行 CBDC，也不得将 CBDC 用于货币政策工具或开展相关。",
time: "通过日期：2025-10- 05",
tag: {
name: "科技法案",
status: 3
}
},
{
img: null,
title: "拒绝政府数字货币！美国众议院通过反 CBDC 监控法案",
content:
"《反 CBDC 监控国家法案》以保护金融隐私为核心，拟永久禁止美联储发行数字美元，禁止其向个人直接或间接发行 CBDC，也不得将 CBDC 用于货币政策工具或开展相关。",
time: "通过日期：2025-10- 05",
tag: {
name: "科技法案",
status: 3
}
},
{
img: Img3,
title: "主流加密货币定调！美国 FIT-21 法案确立 “数字商品” 属性",
content:
"《21 世纪金融创新与技术法案》明确比特币、以太坊等主流加密货币归类为 “数字商品”，适用 CFTC 监管框架。建立 SEC 与 CFTC 跨机构协调机制并要求联合发布分类...",
time: "通过日期：2025-10- 05",
tag: {
name: "科技法案",
status: 3
}
}
]);
const renderContent = str => {
if (str.includes("金融")) {
return str.replace(/金融/g, '<span style="color: #CE4F51">金融</span>');
}
return str;
};
</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);
}
}
}
.main {
width: 913px;
height: 1464px;
margin-top: 36px;
margin-left: 264px;
.item {
width: 913px;
height: 132px;
margin-bottom: 16px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
display: flex;
.item-left {
width: 170px;
height: 115px;
img{
width: 100%;
height: 100%;
}
}
.item-right {
// width: 731px;
flex: 1;
margin-left: 12px;
.title {
height: 24px;
width: 731px;
overflow: hidden;
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
.content {
margin-top: 10px;
height: 48px;
font-family: Microsoft YaHei;
font-size: 16px;
color: rgba(59, 65, 75, 1);
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
.item-right-footer {
display: flex;
.time {
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;
box-sizing: border-box;
padding: 0 8px;
border-radius: 4px;
}
.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);
}
}
}
}
}
.footer {
width: 913px;
margin-left: 264px;
height: 107px;
box-sizing: border-box;
padding-top: 10px;
display: flex;
justify-content: center;
}
}
</style>
\ No newline at end of file
src/views/comprehensiveSearch/utils/wordCloud.js 0 → 100644
浏览文件 @ ed1ebab4
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/decree/decreeHome/index.vue
浏览文件 @ ed1ebab4
...@@ -2778,4 +2778,15 @@ onMounted(async () => { ...@@ -2778,4 +2778,15 @@ onMounted(async () => {
.divide { .divide {
margin: 0 auto; margin: 0 auto;
} }
: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;
}
</style> </style>
\ No newline at end of file
src/views/marketAccessRestrictions/marketAccessHome/index.vue
浏览文件 @ ed1ebab4
...@@ -1723,4 +1723,14 @@ onMounted(async () => { ...@@ -1723,4 +1723,14 @@ onMounted(async () => {
} }
} }
} }
: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;
}
</style> </style>
src/views/overView/component/ResourceSupport.vue
浏览文件 @ ed1ebab4
<!-- 中M博弈概览页 --> <!-- 中M博弈资源支撑 -->
<template> <template>
<div class="resource-box"> <div class="resource-box">
<DivideHeader class="divide1" :titleText="'中美博弈资源支撑'"></DivideHeader>
<img class="title-img" src="@/assets/images/bg/概览页模块标题2.png"></img>
<div style="margin-top: 20px;height: 450px;display: flex;"> <div style="margin-top: 20px;height: 450px;display: flex;">
<div class="resource-content" style="width: 45%; display: block;"> <div class="resource-content" style="width: 47.5%; display: block;">
<div class="item-header"> <div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img> <img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
<div class="item-header-text">中美博弈资源新闻动态</div> <div class="item-header-text">中美博弈资源新闻动态</div>
<div class="item-header-right"> 更多 +</div> <div class="item-header-right"> 更多 +</div>
</div> </div>
<div class="item-header-divider"></div> <div class="item-header-divider"></div>
<div style=" height: 400px;overflow: auto;">
<el-timeline style="max-width: 600px;padding: 25px; ">
<el-timeline-item placement="top" v-for="(activity, index) in newsData" :key="index" :icon="activity.icon"
type="primary" :hollow="true" :timestamp="activity.time">
<div class="row">
<div class="content-wrapper">
{{ activity.content }}
</div>
<img :src="activity.image" />
</div>
</el-timeline-item>
</el-timeline>
</div>
</div> </div>
<div class="resource-content" style="width: 45%;margin-left: 5%;"> <div class="resource-content" style="width: 47.5%;margin-left: 5%;">
<div class="item-header"> <div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img> <img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
<div class="item-header-text">创新主体排名</div> <div class="item-header-text" style="width: 130px;">创新主体排名</div>
<el-radio-group v-model="InnovationRankingBtn" size="small" @change="handleInnovationRankingBtn">
<el-radio-button value="enterprise" border>科技企业
</el-radio-button>
<el-radio-button value="lab" border>国家重点实验室</el-radio-button>
<el-radio-button value="university" border>研究型大学
</el-radio-button>
<el-radio-button value="contractor" border>国防承包商</el-radio-button>
</el-radio-group>
</div> </div>
<div class="item-header-divider"></div> <div class="item-header-divider"></div>
<el-table :data="InnovationRanking" stripe style="width: 100%;padding: 5px 25px;"
:header-cell-style="headerCellStyle">
<el-table-column prop="name" label="创新主体" width="100" />
<el-table-column prop="markValue" align="right">
<template #header>
<div class="custom-header">
<div class="label">市值</div>
<div class="unit">（亿元）</div>
</div>
</template>
</el-table-column>
<el-table-column label="所属领域" width="180">
<template #default="scope">
<div style="display: flex; align-items: center; gap: 5px">
<el-tag v-for="tag in scope.row.area" :key="tag" :type="tag === '人工智能'
? 'primary'
: TAGTYPE[Math.floor(Math.random() * 5)]
">{{ tag }}</el-tag>
</div>
</template>
</el-table-column>
<el-table-column label="创新实力">
<template #default="scope">
<div style="display: flex; align-items: center">
<el-progress :percentage="scope.row.value * 100" :show-text="false" style="width: 50px;"
:status="getStatus(scope.row.value)" />
</div>
</template>
</el-table-column>
</el-table>
</div> </div>
</div> </div>
<div style="margin-top: 20px;height: 450px;display: flex;"> <div style="margin-top: 20px;height: 450px;display: flex;">
<div class="resource-content" style="width: 45%; display: block;"> <div class="resource-content" style="width: 47.5%; display: block;">
<div class="item-header"> <div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img> <img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
<div class="item-header-text">研发投入情况</div> <div class="item-header-text">研发投入情况</div>
</div> </div>
<div class="item-header-divider"></div> <div class="item-header-divider"></div>
<el-radio-group v-model="putIntoBtn" size="small" @change="handlePutIntoBtn" style="margin-left: 20px;">
<el-radio-button value="development" border>研发经费
</el-radio-button>
<el-radio-button value="GDP" border>GDP占比</el-radio-button>
</el-radio-group>
<div style="display: flex;height: calc(100% - 60px);" id="char3"> <div style="display: flex;height: calc(100% - 60px);" id="char3">
</div> </div>
</div> </div>
<div class="resource-content" style="width: 45%;margin-left: 5%;"> <div class="resource-content" style="width: 47.5%;margin-left: 5%;">
<div class="item-header"> <div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img> <img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
<div class="item-header-text">研发投入领域</div> <div class="item-header-text">研发投入领域</div>
<div class="item-header-right"> 查看数据源> </div> <div class="item-header-right"> 查看数据源> </div>
</div> </div>
<div class="item-header-divider"></div> <div class="item-header-divider"></div>
<el-select v-model="areaSelect" placeholder="" style="width: 100px;float: right;margin-right: 20px;"
size="small">
<el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<div style="display: flex;height: calc(100% - 60px);" id="char4"> <div style="display: flex;height: calc(100% - 60px);" id="char4">
</div> </div>
</div> </div>
</div> </div>
<div style="margin-top: 20px;height: 450px;display: flex;"> <div style="margin-top: 20px;height: 450px;display: flex;">
<div class="resource-content" style="width: 45%; display: block;"> <div class="resource-content" style="width: 47.5%; display: block;">
<div class="item-header"> <div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img> <img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
<div class="item-header-text">专利申请情况</div> <div class="item-header-text">专利申请情况</div>
</div> </div>
<div class="item-header-divider"></div> <div class="item-header-divider"></div>
<el-select v-model="patentSelect" placeholder="" style="width: 100px;float: right;margin-right: 20px;"
size="small">
<el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<div style="display: flex;height: calc(100% - 60px);" id="char5"> <div style="display: flex;height: calc(100% - 60px);" id="char5">
</div> </div>
</div> </div>
<div class="resource-content" style="width: 45%;margin-left: 5%;"> <div class="resource-content" style="width: 47.5%;margin-left: 5%;">
<div class="item-header"> <div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img> <img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
<div class="item-header-text">论文发表情况</div> <div class="item-header-text">论文发表情况</div>
<div class="item-header-right"> 查看数据源> </div> <div class="item-header-right"> 查看数据源> </div>
</div> </div>
<div class="item-header-divider"></div> <div class="item-header-divider"></div>
<el-select v-model="paperSelect" placeholder="" style="width: 100px;float: right;margin-right: 20px;"
size="small">
<el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<div style="display: flex;height: calc(100% - 60px);" id="char6"> <div style="display: flex;height: calc(100% - 60px);" id="char6">
</div> </div>
</div> </div>
</div> </div>
</div> </div>
...@@ -82,16 +137,130 @@ ...@@ -82,16 +137,130 @@
<script setup> <script setup>
import { onMounted, ref, computed } from "vue"; import { onMounted, ref, computed } from "vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
import DivideHeader from "@/components/DivideHeader.vue";
import { TAGTYPE } from "@/public/constant";
import getBarChart2 from '../js/barChart2.js' import getBarChart2 from '../js/barChart2.js'
import radarChart2 from '../js/radarChart2.js' import radarChart2 from '../js/radarChart2.js'
import getMultiLineChart1 from "../js/multiLineChart1.js"; import getMultiLineChart1 from "../js/multiLineChart1.js";
const timeList = ref([
{
label: "近半年",
value: "近半年",
},
{
label: "近一年",
value: "近一年",
},
{
label: "近两年",
value: "近两年",
},
{
label: "近三年",
value: "近三年",
},
{
label: "近五年",
value: "近五年",
},
]);
const names = ['Jan', 'Feb', 'Mar', 'Apr', 'May'] const names = ['Jan', 'Feb', 'Mar', 'Apr', 'May']
const data1 = [120, 200, 150, 80, 70] const data1 = [120, 200, 150, 80, 70]
const data2 = [90, 230, 180, 110, 100] const data2 = [90, 230, 180, 110, 100]
//博弈资源新闻动态
const newsData = ref([
{
time: ' 2025-07-31',
content: '美商务部发布指南，警告全球企业使用华为异腾芯片可能违反美国出口管制。意在限制中国AI产业发展，阻碍其获得先进算力。',
image: '/testData/newsData1.jpg',
},
{
time: '2025-07-30',
content: '美商务部持续对多种中国产品发起“双反”(反倾销、反补贴)调查并作出裁决，涉及产品从工业原料到日常用品，且裁定的税率普遍较高。',
image: '/testData/newsData1.jpg',
}, {
time: '2025-07-30',
content: '美商务部进一步收紧对华先进半导体出口管制，将更多中国实体列入“实体清单”限制14纳米及以下先进芯片、DRAM等对华出口。',
image: '/testData/newsData1.jpg',
}, {
time: '2025-07-27',
content: '美商务部发起第三次反倾销和反补贴日落复审调査。',
image: '/testData/newsData1.jpg',
}
])
function headerCellStyle() {
return {
color: 'rgba(59, 65, 75, 1)',
fontSize: '16px',
fontWeight: 700,
};
}
//创新主体排名
const InnovationRanking = ref([
{
name: '微软(Microsoft)',
markValue: '3200',
area: ['人工智能', '先进制造'],
value: 0.9
}, {
name: '苹果(Apple)',
markValue: '1600',
area: ['人工智能'],
value: 0.8
}, {
name: '英伟达(NVIDIA)',
markValue: '1200',
area: ['人工智能'],
value: 0.7
}, {
name: '谷歌(Google)',
markValue: '800',
area: ['人工智能'],
value: 0.5
}, {
name: 'Meta (Facebook)',
markValue: '900',
area: ['人工智能'],
value: 0.2
}
])
// 进度条状态
const getStatus = _percent => {
const percent = _percent * 100;
if (percent >= 90) {
return "exception";
} else if (percent >= 50) {
return "warning";
} else {
return "success";
}
};
//科技主体排名按钮
const InnovationRankingBtn = ref('enterprise')
function handleInnovationRankingBtn() {
}
//研发投入情况
const putIntoBtn = ref('development')
function handlePutIntoBtn() {
}
//研发投入领域
const areaSelect = ref('近一年')
//专利申请情况 //专利申请情况
const patentSelect = ref('近一年')
const chart5Data = ref({ const chart5Data = ref({
title: [ title: [
"2024-09", "2024-09",
...@@ -119,6 +288,9 @@ const chart5Data = ref({ ...@@ -119,6 +288,9 @@ const chart5Data = ref({
] ]
}); });
//论文发表情况
const paperSelect = ref('近一年')
// 绘制echarts图表 // 绘制echarts图表
const setChart = (option, chartId) => { const setChart = (option, chartId) => {
let chartDom = document.getElementById(chartId); let chartDom = document.getElementById(chartId);
...@@ -145,6 +317,11 @@ onMounted(() => { ...@@ -145,6 +317,11 @@ onMounted(() => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.divide1 {
margin-top: 64px;
margin-bottom: 36px;
}
.resource-box { .resource-box {
height: 1550px; height: 1550px;
} }
...@@ -173,6 +350,44 @@ onMounted(() => { ...@@ -173,6 +350,44 @@ onMounted(() => {
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
.row {
display: flex;
/* 横向排列 */
align-items: center;
/* 垂直居中（可选） */
width: 100%;
/* 和外层容器同宽 */
}
.content-wrapper {
flex: 1 1 auto;
/* 占满剩余空间，把图片顶到最右 */
/* 文字过长时自动换行 */
word-break: break-all;
}
.row img {
width: 96px;
height: 72px;
margin-left: 8px;
/* 图片与文字间距，可删 */
flex-shrink: 0;
/* 防止图片被压缩 */
}
:deep(.el-timeline-item__timestamp.is-top) {
color: rgba(59, 65, 75, 1);
font-size: 16px;
font-weight: 700;
line-height: 24px;
text-align: left;
}
:deep(.el-timeline-item__node.is-hollow) {
border-width: 4px
}
.item-header { .item-header {
height: 48px; height: 48px;
width: 100%; width: 100%;
...@@ -226,6 +441,24 @@ onMounted(() => { ...@@ -226,6 +441,24 @@ onMounted(() => {
} }
} }
.custom-header {
text-align: center;
line-height: 1.3;
}
.custom-header .label {
color: rgba(59, 65, 75, 1);
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
.custom-header .unit {
font-size: 12px;
color: #909399;
}
.item-header-divider { .item-header-divider {
/* 矩形 249 */ /* 矩形 249 */
width: 100%; width: 100%;
......
src/views/overView/component/Thematicanalysis.vue
浏览文件 @ ed1ebab4
<!-- 中M博弈概览页 --> <!-- 打压遏制ts分析 -->
<template> <template>
<div class="thematic-box"> <div class="thematic-box">
<div class="title-text">中美博弈专题分析</div> <div class="title-text">中美博弈专题分析</div>
<img class="title-img" src="@/assets/images/bg/概览页模块标题.png"></img> <DivideHeader class="divide" :titleText="'打压遏制态势分析'"></DivideHeader>
<div class="thematic-content"> <div class="thematic-content">
<div class="item-header"> <div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img> <img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
...@@ -12,79 +12,40 @@ ...@@ -12,79 +12,40 @@
</div> </div>
<div class="item-header-divider"></div> <div class="item-header-divider"></div>
<div style="display: flex;height: calc(100% - 60px);"> <div style="display: flex;height: calc(100% - 60px);">
<div class="thematic-btn-left" @click="changeBtn('timwLine', 'left')"> <Timeline :data="course" text-key="title" id-key="seq" />
<img class="thematic-btn-icon" src="@/assets/images/icon/card-btn-left.png"></img>
</div>
<div class="timeLine-box">
<div style="height: calc(50% - 8px);display: flex">
<div v-for="(item, index) in timeLineOddIndexItems" class="time-item-box">
{{ item.titlle }}
</div>
</div>
<img style=" width: 100%; height: 10px;" src="@/assets/images/bg/time-line.png"></img>
<div style="height: calc(50% - 8px);display: flex;">
<div v-for="(item, index) in timeLineIndexItems" class="time-item-box">
{{ item.titlle }}
</div>
</div>
</div>
<div class="thematic-btn-right" @click="changeBtn('right')">
<img class="thematic-btn-icon" src="@/assets/images/icon/card-btn-right.png"></img>
</div>
</div> </div>
</div> </div>
<div class="thematic-content" style="margin-top: 20px;height: 350px;"> <div class="thematic-content" style="margin-top: 20px;height: 350px;">
<div class="item-header"> <div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img> <img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
<div class="item-header-text">打压遏制手段分布</div> <div class="item-header-text">打压遏制手段分布</div>
</div> </div>
<div class="item-header-divider"></div> <div class="item-header-divider"></div>
<div style="display: flex;height: calc(100% - 60px);"> <div style="display: flex;height: calc(100% - 60px);">
<div class="thematic-btn-left" @click="changeBtn('timwLine', 'left')"> <div class="thematic-btn-left" @click="changeBtn('left')">
<img class="thematic-btn-icon" src="@/assets/images/icon/card-btn-left.png"></img> <img class="thematic-btn-icon" src="@/assets/images/icon/card-btn-left.png"></img>
</div> </div>
<div class="cup-box" style="display: flex;"> <div class="cup-box" style="display: flex;">
<div v-for="item in distribution" class="cup-item-box" :style="{ <div v-for="item in distributionColor" class="cup-item-box" :style="{
color: item.borderColor color: `hsla(${item.color[0]}, ${item.color[1]}%, ${item.color[2]}%, ${1})`
}"> }">
<div class="cup-title"> <div class="cup-title">
{{ item.titlle }} {{ item.titlle }}
</div> </div>
<div class="cup" :style="{ <WaveBall :percent="item.value" :data="item" :color="item.color" :size="128" />
borderColor: item.bgColor1,
outlineColor: item.bgColor1,
}">
<!-- 水位 -->
<div class="water" :style="{
'--percent': item.value,
'--c1': item.bgColor1,
'--c2': item.bgColor2,
}"></div>
<!-- 文字 -->
<span class="txt" :style="{ color: item.borderColor, }">{{ item.text }}</span>
</div>
<div style="margin-top: 20px;"> <div style="margin-top: 20px;">
{{ item.change }} {{ item.change }}
</div> </div>
</div> </div>
</div> </div>
<div class="thematic-btn-right" @click="changeBtn('right')"> <div class="thematic-btn-right" @click="changeBtn('right')">
<img class="thematic-btn-icon" src="@/assets/images/icon/card-btn-right.png"></img> <img class="thematic-btn-icon" src="@/assets/images/icon/card-btn-right.png"></img>
</div> </div>
</div> </div>
</div> </div>
<div style="margin-top: 20px;height: 450px;display: flex;"> <div style="margin-top: 20px;height: 450px;display: flex;">
<div class="thematic-content" style="width: 45%; display: block;"> <div class="thematic-content" style="width: 47.5%; display: block;">
<div class="item-header"> <div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img> <img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
<div class="item-header-text">打压遏制强度变化</div> <div class="item-header-text">打压遏制强度变化</div>
...@@ -92,20 +53,37 @@ ...@@ -92,20 +53,37 @@
数据来源：美国某某局</div> 数据来源：美国某某局</div>
</div> </div>
<div class="item-header-divider"></div> <div class="item-header-divider"></div>
<div style="display: flex;">
<el-radio-group v-model="strengthBtn" size="small" @change="handleStrengthBtn">
<el-radio-button value="all" border>全部领域
</el-radio-button>
<el-radio-button value="integratedCircuits" border>集成电路</el-radio-button>
<el-radio-button value="energy" border>能源
</el-radio-button>
<el-radio-button value="biotechnology" border>生物科技</el-radio-button>
<el-radio-button value="quantum" border>量子科技</el-radio-button>
<el-radio-button value="ai" border>人工智能</el-radio-button>
<el-radio-button value="network" border>通信网络</el-radio-button>
</el-radio-group>
<el-select v-model="strengthSelect" placeholder="" style="width: 100px;" size="small">
<el-option v-for="item in strengthTimeList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
<div style="display: flex;height: calc(100% - 60px);" id="chart1"> <div style="display: flex;height: calc(100% - 60px);" id="chart1">
</div> </div>
</div> </div>
<div class="thematic-content" style="width: 45%;margin-left: 5%;"> <div class="thematic-content" style="width: 47.5%;margin-left: 5%;">
<div class="item-header"> <div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img> <img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
<div class="item-header-text">打压遏制强度变化</div> <div class="item-header-text">打压遏制领域分布</div>
<div class="item-header-right"> <img class="item-header-right-icon" src="@/assets/images/icon/tips.png"></img> <div class="item-header-right"> <img class="item-header-right-icon" src="@/assets/images/icon/tips.png"></img>
数据来源：美国某某局</div> 数据来源：美国某某局</div>
</div> </div>
<div class="item-header-divider"></div> <div class="item-header-divider"></div>
<el-select v-model="areaSelect" placeholder="" style="width: 100px;float: right;" size="small">
<el-option v-for="item in areaTimeList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<div style="display: flex;height: calc(100% - 60px);" id="char2"> <div style="display: flex;height: calc(100% - 60px);" id="char2">
</div> </div>
</div> </div>
...@@ -117,92 +95,130 @@ ...@@ -117,92 +95,130 @@
<script setup> <script setup>
import { onMounted, ref, computed } from "vue"; import { onMounted, ref, computed } from "vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
import DivideHeader from "@/components/DivideHeader.vue";
import Timeline from '../component/Timeline.vue'
import WaveBall from '../component/WaveBall.vue'
import getBarChart from '../js/barChart.js' import getBarChart from '../js/barChart.js'
import radarChart from '../js/radarChart.js' import radarChart from '../js/radarChart.js'
const timeLine = ref([
//对华打压历程
const course = ref([
{ {
time: '2025年1月', time: '2025年1月',
titlle: '《AI扩散暂行最终规则》发布0', title: '《AI扩散暂行最终规则》发布',
content: '拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。' content: '拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。'
}, },
{ {
time: '2025年1月', time: '2025年1月',
titlle: '《AI扩散暂行最终规则》发布1', title: '特朗普宣布撤销拜登AI规则',
content: '拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。' content: '拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。'
}, },
{ {
time: '2025年1月', time: '2025年1月',
titlle: '特朗普签署EO 143202', title: '特朗普签署EO 143202',
content: '特朗普政府宣布撤销拜登AI规则，计划'
},
{
time: '2025年1月',
title: '中国网信办约谈英伟达',
content: '中国网信办约谈英伟达，要求就H20算力芯片漏洞后门安全风险问题进行说明。'
},
{
time: '2025年7月23日',
title: '英伟达H20发放出口许可证',
content: '美国商务部为4月份被实质禁售的英伟达H20发放出口许可证。'
},
{
time: '2025年1月',
title: '《AI扩散暂行最终规则》发布',
content: '拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。' content: '拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。'
}, },
{ {
time: '2025年1月', time: '2025年1月',
titlle: '《AI扩散暂行最终规则》发布3', title: '特朗普宣布撤销拜登AI规则',
content: '拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。' content: '拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。'
}, },
{
time: '2025年1月',
title: '特朗普签署EO 143202',
content: '特朗普政府宣布撤销拜登AI规则，计划'
},
{
time: '2025年1月',
title: '中国网信办约谈英伟达',
content: '中国网信办约谈英伟达，要求就H20算力芯片漏洞后门安全风险问题进行说明。'
},
{ {
time: '2025年7月23日', time: '2025年7月23日',
titlle: '《AI扩散暂行最终规则》发布4', title: '英伟达H20发放出口许可证',
content: '拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。' content: '美国商务部为4月份被实质禁售的英伟达H20发放出口许可证。'
}, },
]) ])
// 过滤出奇数下标（1,3,5...）
const timeLineOddIndexItems = computed(() =>
timeLine.value.filter((_, idx) => idx % 2 === 1)
)
// 过滤出偶数下标（1,3,5...）
const timeLineIndexItems = computed(() =>
timeLine.value.filter((_, idx) => idx % 2 === 0)
)
//打压遏制手段分布
const distribution = ref([ const distribution = ref([
{ {
titlle: '法案', "titlle": "法案",
value: 80, "value": 80,
text: '1626个', "text": "1626",
change: '较上个月+3', "unit": "个",
bgColor1: '#E6F4FF',//浅色 "change": "较上个月+3"
bgColor2: '#91CAFF',//深色 },
borderColor: '#0958D9', {
}, { "titlle": "行政令",
titlle: '法案', "value": 20,
value: 20, "text": "1626",
text: '1626个', "unit": "个",
change: '较上个月+3', "change": "较上个月+1"
bgColor1: '#FFFBE6',//浅色 },
bgColor2: '#FDE19A',//深色 {
borderColor: '#D48806', "titlle": "科技智库",
}, { "value": 10,
titlle: '法案', "text": "66",
value: 10, "unit": "次",
text: '1626个', "change": "较上个月+2"
change: '较上个月+3', },
bgColor1: '#E6F4FF',//浅色 {
bgColor2: '#91CAFF',//深色 "titlle": "出口管制",
borderColor: '#0958D9', "value": 33,
}, { "text": "66",
titlle: '法案', "unit": "次",
value: 40, "change": "较上个月+1"
text: '1626个', },
change: '较上个月+3', {
bgColor1: '#E6F4FF',//浅色 "titlle": "投融资限制",
bgColor2: '#91CAFF',//深色 "value": 80,
borderColor: '#0958D9', "text": "119",
}, { "unit": "次",
titlle: '法案', "change": "较上个月+1"
value: 50, },
text: '1626个', {
change: '较上个月+3', "titlle": "市场准入",
bgColor1: '#E6F4FF',//浅色 "value": 50,
bgColor2: '#91CAFF',//深色 "text": "223",
borderColor: '#0958D9', "unit": "次",
"change": "较上个月+1"
} }
]) ])
//随机生成颜色
const makeColors = () => {
let A = Math.floor(Math.random() * 360) // 随机色相
let B = 70 // 固定饱和度
let C = 50 // 固定亮度
return [A, B, C]
}
// 计算属性
const distributionColor = computed(() => {
for (let item in distribution.value) {
distribution.value[item].color = makeColors()
}
return distribution.value
})
const timeIndex = ref(0) const timeIndex = ref(0)
//时间轴及遏制手段分布按钮 //遏制手段分布按钮
function changeBtn(data, type) { function changeBtn(type) {
if (type === 'left') { if (type === 'left') {
timeIndex.value === 0 ? '' : timeIndex.value = timeIndex.value - 1 timeIndex.value === 0 ? '' : timeIndex.value = timeIndex.value - 1
} else { } else {
...@@ -211,7 +227,7 @@ function changeBtn(data, type) { ...@@ -211,7 +227,7 @@ function changeBtn(data, type) {
} }
} }
//打压遏制强度变化
const chart1Data = ref({ const chart1Data = ref({
name: [ name: [
"2024-12", "2024-12",
...@@ -221,6 +237,52 @@ const chart1Data = ref({ ...@@ -221,6 +237,52 @@ const chart1Data = ref({
value: [83.76, 76.72, 73.89, 72.16, 66.24, 65.47, 63.98, 62.12, 44.38, 24.79], value: [83.76, 76.72, 73.89, 72.16, 66.24, 65.47, 63.98, 62.12, 44.38, 24.79],
}); });
const strengthBtn = ref('all')
function handleStrengthBtn() {
}
//打压遏制强度变化时间选择器
const strengthSelect = ref("近一年");
const strengthTimeList = ref([
{
label: "近半年",
value: "近半年",
},
{
label: "近一年",
value: "近一年",
},
{
label: "近两年",
value: "近两年",
},
{
label: "近三年",
value: "近三年",
},
{
label: "近五年",
value: "近五年",
},
]);
//打压遏制领域分布
const areaSelect = ref("2025");
const areaTimeList = ref([
{
label: "2025",
value: "2025",
},
{
label: "2024",
value: "2024",
},
{
label: "2023",
value: "2023",
},
]);
// 绘制echarts图表 // 绘制echarts图表
const setChart = (option, chartId) => { const setChart = (option, chartId) => {
let chartDom = document.getElementById(chartId); let chartDom = document.getElementById(chartId);
...@@ -266,70 +328,6 @@ onMounted(() => { ...@@ -266,70 +328,6 @@ onMounted(() => {
} }
} }
/* 杯子：正圆 */
.cup {
position: relative;
width: 130px;
height: 130px;
/* 本身高度设为 0，内容靠子元素或绝对定位 */
border-radius: 50%;
border: 4px #2196f3 solid;
overflow: hidden;
/* 关键：把超出部分裁掉 */
display: flex;
align-items: flex-end;
/* 水永远贴底 */
justify-content: center;
border: 4px solid #2196f3;
/* 内圈实线 */
outline: 4px solid #2196f3;
/* 外圈实线 */
outline-offset: 4px;
/* 两线间距，想再宽调大即可 */
}
/* 水位层 */
.water {
width: 100%;
height: calc(var(--percent) * 1%);
/* 0~100 对应 0~100% */
background: linear-gradient(to top, var(--c1), var(--c2));
position: relative;
animation: wave 3s linear infinite;
}
/* 波浪 */
.water::before,
.water::after {
content: '';
position: absolute;
width: 400px;
height: 400px;
top: -350px;
/* 把圆心顶到上面去 */
left: 50%;
border-radius: 45%;
transform: translate(-50%, 0);
background: rgba(255, 255, 255, .4);
animation: rotate 7s linear infinite;
}
.water::after {
top: -370px;
border-radius: 40%;
opacity: .7;
animation-duration: 9s;
animation-direction: reverse;
}
/* 旋转动画 */
@keyframes rotate {
to {
transform: translate(-50%, 0) rotate(360deg);
}
}
/* 百分比文字 */ /* 百分比文字 */
.txt { .txt {
...@@ -344,6 +342,13 @@ onMounted(() => { ...@@ -344,6 +342,13 @@ onMounted(() => {
.thematic-box { .thematic-box {
height: 1500px; height: 1500px;
.divide {
width: 100%;
margin: 0 auto;
margin-top: 52px;
margin-bottom: 36px;
}
} }
.title-text { .title-text {
...@@ -370,6 +375,8 @@ onMounted(() => { ...@@ -370,6 +375,8 @@ onMounted(() => {
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
.item-header { .item-header {
height: 48px; height: 48px;
width: 100%; width: 100%;
...@@ -433,11 +440,13 @@ onMounted(() => { ...@@ -433,11 +440,13 @@ onMounted(() => {
.thematic-btn-left { .thematic-btn-left {
height: 100%; height: 100%;
width: 24px; width: 24px;
padding-top: 130px;
} }
.thematic-btn-right { .thematic-btn-right {
height: 100%; height: 100%;
width: 24px; width: 24px;
padding-top: 130px;
} }
.thematic-btn-icon { .thematic-btn-icon {
......
src/views/overView/component/Timeline.vue 0 → 100644
浏览文件 @ ed1ebab4
<template>
<div class="timeline-wrapper">
<button class="arrow left" :disabled="index <= 0" @click="index--">
&lt;
</button>
<div class="timeline-box">
<div class="line"></div>
<div v-for="(item, i) in showList" :key="item[idKey]" class="node" :style="leftOffset(i)">
<div class="node" :style="leftOffset(i)">
<!-- 圆环 -->
<div class="dot" :class="linePos(i, flip)"></div>
<!-- 卡片：放到线右侧 -->
<div class="card" :class="[cardPos(i, flip), 'right-side']" @click="$emit('click-card', item)">
<div class="title">
{{ item.time }}
</div>
<div class="title">
{{ item.title }}
</div>
<div class="content">
{{ item.content }}
</div>
</div>
</div>
</div>
</div>
<button class="arrow right" :disabled="index >= total - 5" @click="index++">
&gt;
</button>
</div>
</template>
<script>
export default {
name: 'TimeLine',
props: {
data: { // 父组件传入的数组
type: Array,
required: true
},
textKey: { // 要显示的文本字段
type: String,
default: 'text'
},
idKey: { // 唯一标识字段
type: String,
default: 'id'
}
},
data() {
return { index: 0 };
},
computed: {
total() {
return this.data.length;
},
showList() {
return this.data.slice(this.index, this.index + 5);
},
flip() { return this.index % 2 === 1; }
},
methods: {
leftOffset(i) {
return { left: `${(i * 100) / 5}%` };
},
/* 上下层翻转（保留上次逻辑） */
cardPos(i, flip = false) {
return (i % 2) ^ flip ? 'down' : 'up';
},
/* 线延伸方向 = 卡片出现方向 */
linePos(i, flip = false) {
return this.cardPos(i, flip); // up / down
}
}
};
</script>
<style scoped>
/* 样式与之前完全一致，不再重复 */
.timeline-wrapper {
display: flex;
align-items: center;
width: 100%;
position: relative;
padding: 0 40px;
}
.arrow {
position: absolute;
top: 50%;
/* 左右切换按钮 */
width: 24px;
height: 48px;
font-size: 24px;
border-color: #E7F3FF;
border: 0;
background: #E7F3FF;
cursor: pointer;
z-index: 10;
color: #3E84D1;
}
.arrow:disabled {
color: #c0c4cc;
cursor: not-allowed;
}
.left {
left: 0;
border-radius: 4px 0px 0px 4px;
}
.right {
right: 0;
border-radius: 0px 4px 4px 0px;
}
.timeline-box {
flex: 1;
height: 100%;
position: relative;
}
.line {
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 6px;
background-image: url("@/assets/images/bg/timeLine-bg.jpg");
transform: translateY(-50%);
background-size: auto 100%;
}
.node {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
/* ===== 圆环基础 ===== */
.dot {
width: 14px;
height: 14px;
border-radius: 50%;
border: 3px solid #409eff;
background: #fff;
position: relative;
margin: 0 auto;
z-index: 2;
}
/* ===== 延伸线 ===== */
.dot::after {
content: '';
position: absolute;
left: 50%;
transform: translateX(-1px);
/* 居中细线 */
width: 1px;
background: #409eff;
}
/* 向上节点：线往下伸 */
.dot.up::after {
bottom: 100%;
height: 180px;
/* 圆环底部 → 卡片顶 */
}
/* 向下节点：线往上伸 */
.dot.down::after {
top: 100%;
height: 180px;
}
.card {
position: absolute;
height: 180px;
width: 15vw;
padding: 8px 12px;
text-align: left;
cursor: pointer;
font-size: 14px;
}
.title {
color: rgba(5, 95, 194, 1);
font-size: 18px;
font-weight: 700;
line-height: 26px;
letter-spacing: 0px;
text-align: justify;
}
.title {
color: rgba(59, 65, 75, 1);
font-size: 20px;
font-weight: 700;
line-height: 26px;
letter-spacing: 0px;
text-align: justify;
}
.content {
color: rgba(95, 101, 108, 1);
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
}
.card.up {
bottom: 20px;
}
.card.down {
top: 20px;
}
</style>
\ No newline at end of file
src/views/overView/component/WaveBall.vue 0 → 100644
浏览文件 @ ed1ebab4
<template>
<div ref="ballDom" class="ball-box" :style="{ width: size + 'px', height: size + 'px' }" />
</template>
<script setup>
/**
* Vue3 水波进度球
* 用法：<WaterBall :percent="67" :size="200" />
*/
import { ref, watch, onMounted } from 'vue'
import * as echarts from 'echarts'
import 'echarts-liquidfill'
/* props */
const props = defineProps({
percent: { type: Number, default: 60 }, // 0~100
size: { type: Number, default: 200 }, // 画布宽高
data: { type: Object, default: {} },
color: { type: Array, default: [] },
})
/* dom */
const ballDom = ref(null)
let instance = null
// const color = ref([0, 0, 0])
// const makeColors = () => {
// props.color[0] = Math.floor(Math.random() * 360) // 随机色相
// props.color[1] = 70 // 固定饱和度
// props.color[2] = 50 // 固定亮度
// }
/* 颜色映射 */
/* 配置项 */
const makeOption = () => {
const p = Math.min(100, Math.max(0, props.percent)) / 100
console.log(props.color, 'colorcolorcolor')
return {
series: [{
type: 'liquidFill',
radius: '90%',
data: [
{ value: p, direction: 'right' },
{ value: p, direction: 'left' } // 两层波浪反向
],
color: [`hsla(${props.color[0]}, ${props.color[1]}%, ${props.color[2]}%, ${1})`, `hsla(${props.color[0]}, ${props.color[1]}%, ${props.color[2]}%, ${0.8})`],
waveAnimation: true,
animationEasingUpdate: 'cubicOut',
outline: {
show: true,
borderDistance: 4, // 第一层边框
itemStyle: {
borderWidth: 3,
borderColor: `hsla(${props.color[0]}, ${props.color[1]}%, ${props.color[2]}%, ${0.5})`
}
},
backgroundStyle: {
color: '#ffffff',
shadowColor: '#fff', //阴影
shadowBlur: 0, //阴影模糊
},
label: {
show: true,
formatter: `${props.data.text}` + `${props.data.unit}`,
fontSize: 24,
color: `hsla(${props.color[0]}, ${props.color[1]}%, ${props.color[2]}%, ${1})`,
// insideColor: '#fff'
}
}]
}
}
/* 初始化 */
const init = () => {
if (instance) instance.dispose()
instance = echarts.init(ballDom.value)
instance.setOption(makeOption())
}
/* 自动更新 */
watch(() => props.percent, () => {
instance?.setOption(makeOption())
})
onMounted(init)
</script>
<style scoped>
.ball-box {
margin: 0 auto;
}
</style>
\ No newline at end of file
src/views/overView/component/strengthComparison.vue
浏览文件 @ ed1ebab4
<!-- 中M博弈概览页 --> <!-- 中M科技实力对比 -->
<template> <template>
<div class="resource-box"> <div class="resource-box">
<DivideHeader class="divide1" :titleText="'中美科技实力对比'"></DivideHeader>
<img class="title-img" src="@/assets/images/bg/概览页模块标题3.png"></img>
<div style="margin-top: 20px;display: flex;">
<div style="margin-top: 20px;height: 450px;display: flex;">
<div class="resource-content" style="width:100%; display: flex;"> <div class="resource-content" style="width:100%">
<div style="width: 50%;height: 100%;" id="char7"> <el-radio-group v-model="strengthBtn" size="small" @change="handlestrengthBtn" style="margin-left: 15%;">
<el-radio-button value="potential" border>竞争潜力
</div> </el-radio-button>
<div style="width: 50%;height: 100%;text-align: center;"> <el-radio-button value="potency" border>竞争效力</el-radio-button>
<div v-for="value in data"> <el-radio-button value="strength" border>竞争实力
<div>{{ value.name }}</div> </el-radio-button>
<div class="progress-row"> </el-radio-group>
<div class="progress-wrapper left"> <div style="display: flex;height: 350px;">
<el-progress :percentage="value.value[0]" :stroke-width="20" class="left-progress" /> <div style="width: 50%;height: 100%;" id="char7">
<span class="inner-text">{{ value.value[0] }}%</span> </div>
<div style="width: 50%;height: 100%;text-align: center;padding:0 15px ;position: relative;">
<div class="title-box">
<div style="display: flex;width: 100%;">
<div class="unite">
<img class="unite-icon" src="@/assets/images/icon/united_USA.png" alt="" />
<div class="unite-title">
美国
</div>
</div>
<div class="unite-title" style="width: 33%;text-align: center;line-height: 40px;">
{{ data[0].name }}
</div>
<div class="unite" style=" justify-content: flex-end; ">
<div class="unite-title">
中国
</div>
<img class="unite-icon" src="@/assets/images/icon/united_CHN.png" alt="" />
</div>
</div> </div>
<div class="progress-row">
<!-- 右侧进度条 --> <div class="progress-wrapper left" :style="{ '--i': '40px', '--j': '-20px' }">
<div class="progress-wrapper right"> <el-progress :percentage="data[0].value[0]" :stroke-width="20" class="left-progress"
<el-progress :percentage="value.value[1]" :stroke-width="20" class="right-progress" /> :show-text="false" />
<span class="inner-text">{{ value.value[0] }}%</span> <span class="inner-text" style="font-size: 24px;line-height: 40px;top: 20px;">{{ data[0].value[0]
}}%</span>
</div>
<!-- 右侧进度条 -->
<div class="progress-wrapper right" :style="{ '--i': '40px' }">
<el-progress :percentage="data[0].value[1]" :stroke-width="20" class="right-progress"
:show-text="false" />
<span class="inner-text" style="font-size: 24px;line-height: 40px;top: 20px;">{{ data[0].value[0]
}}%</span>
</div>
</div>
</div>
<div v-for="value in data.slice(1)">
<div class="unite-title-small" style="margin-top: 10px;">{{ value.name }}</div>
<div class="progress-row">
<div class="progress-wrapper left" :style="{ '--i': '20px', '--j': '0px' }">
<el-progress :percentage="value.value[0]" :stroke-width="20" class="left-progress"
:show-text="false" />
<span class="inner-text">{{ value.value[0] }}%</span>
</div>
<!-- 右侧进度条 -->
<div class="progress-wrapper right" :style="{ '--i': '20px' }">
<el-progress :percentage="value.value[1]" :stroke-width="20" class="right-progress"
:show-text="false" />
<span class="inner-text">{{ value.value[0] }}%</span>
</div>
</div> </div>
</div> </div>
</div>
<!-- 左侧进度条 --> <!-- 左侧进度条 -->
</div>
</div> </div>
<div> <div>
</div> </div>
...@@ -38,7 +85,7 @@ ...@@ -38,7 +85,7 @@
</div> </div>
<SymmetryProgress :left-val="62" :right-val="88" />
...@@ -49,10 +96,14 @@ ...@@ -49,10 +96,14 @@
<script setup> <script setup>
import { onMounted, ref, computed } from "vue"; import { onMounted, ref, computed } from "vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
import DivideHeader from "@/components/DivideHeader.vue";
import radarChart3 from '../js/radarChart3.js' import radarChart3 from '../js/radarChart3.js'
//科技实力按钮
const strengthBtn = ref('enterprise')
function handlestrengthBtn() {
}
// 绘制echarts图表 // 绘制echarts图表
const setChart = (option, chartId) => { const setChart = (option, chartId) => {
let chartDom = document.getElementById(chartId); let chartDom = document.getElementById(chartId);
...@@ -94,12 +145,17 @@ onMounted(() => { ...@@ -94,12 +145,17 @@ onMounted(() => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.divide1 {
margin-top: 64px;
margin-bottom: 36px;
}
/* ========== 一行两个 ========== */ /* ========== 一行两个 ========== */
.progress-row { .progress-row {
display: flex; display: flex;
gap: 16px; // gap: 16px;
align-items: center; align-items: center;
padding: 10px; padding: 5px;
} }
/* ========== 公共外壳 ========== */ /* ========== 公共外壳 ========== */
...@@ -130,35 +186,93 @@ onMounted(() => { ...@@ -130,35 +186,93 @@ onMounted(() => {
white-space: nowrap; white-space: nowrap;
} }
.left-progress {
transform: scaleX(-1);
}
.left-progress :deep(.el-progress-bar__outer) { .left-progress :deep(.el-progress-bar__outer) {
border-radius: 10px 0 0 10px; border-radius: 0 var(--i) var(--i) 0;
clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 0 100%); clip-path: polygon(0px 0, 100% 0, 100% 100%, var(--i) 100%);
background: #aed6ff; background: rgba(231, 243, 255, 1);
overflow: hidden; overflow: hidden;
/* 读行内传进来的变量 */
height: var(--i) !important;
margin-left: var(--j) !important
} }
.left-progress :deep(.el-progress-bar__inner) { .left-progress :deep(.el-progress-bar__inner) {
border-radius: 10px 0 0 10px; border-radius: 0 var(--i) var(--i) 0;
clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 0 100%); clip-path: polygon(0px 0, 100% 0, 100% 100%, var(--i) 100%);
background: #aed6ff; background: rgba(174, 214, 255, 1);
/* 读行内传进来的变量 */
height: var(--i) !important;
margin-left: var(--j) !important
} }
/* ========== 右侧：左侧斜切 + 右侧圆角 ========== */ /* ========== 右侧：左侧斜切 + 右侧圆角 ========== */
.right-progress :deep(.el-progress-bar__outer) { .right-progress :deep(.el-progress-bar__outer) {
border-radius: 0 10px 10px 0; border-radius: 0 var(--i) var(--i) 0;
clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%); clip-path: polygon(var(--i) 0, 100% 0, 100% 100%, 0 100%);
background: #ffccc7; background: #ffccc7;
overflow: hidden; overflow: hidden;
height: var(--i) !important;
} }
.right-progress :deep(.el-progress-bar__inner) { .right-progress :deep(.el-progress-bar__inner) {
border-radius: 0 10px 10px 0; border-radius: 0 var(--i) var(--i) 0;
clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%); clip-path: polygon(var(--i) 0, 100% 0, 100% 100%, 0 100%);
background: #ff7875; background: #ff7875;
height: var(--i) !important;
}
.title-box {
height: 100px;
width: 100%;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 4px;
background: rgba(247, 248, 249, 1);
.unite {
display: flex;
width: 33%;
align-items: center;
.unite-icon {
width: 40px;
padding: 5px;
}
}
.unite-title {
color: rgba(59, 65, 75, 1);
font-size: 24px;
font-weight: 700;
letter-spacing: 0px;
text-align: left;
}
}
.unite-title-small {
color: rgba(59, 65, 75, 1);
font-size: 18px;
font-weight: 700;
letter-spacing: 0px;
} }
.resource-box { .resource-box {
height: 700px; height: 800px;
} }
.title-text { .title-text {
...@@ -169,6 +283,14 @@ onMounted(() => { ...@@ -169,6 +283,14 @@ onMounted(() => {
text-align: center; text-align: center;
} }
.title-text-small {
font-size: 24px;
font-weight: 700;
line-height: 42px;
margin: 40px;
text-align: center;
}
.title-img { .title-img {
width: 100%; width: 100%;
height: 42px; height: 42px;
...@@ -177,7 +299,7 @@ onMounted(() => { ...@@ -177,7 +299,7 @@ onMounted(() => {
.resource-content { .resource-content {
/* 容器 480 */ /* 容器 480 */
width: 100%; width: 100%;
height: 450px; height: 550px;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1); border: 1px solid rgba(234, 236, 238, 1);
border-radius: var(---, 10px); border-radius: var(---, 10px);
......
src/views/overView/index.vue
浏览文件 @ ed1ebab4
...@@ -377,7 +377,7 @@ onMounted(() => { }); ...@@ -377,7 +377,7 @@ onMounted(() => { });
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: auto; overflow: auto;
padding: 0 160px; padding: 0 10%;
.title-text { .title-text {
font-size: 32px; font-size: 32px;
......
src/views/writtingAsstaint/index.vue
浏览文件 @ ed1ebab4
...@@ -16,7 +16,8 @@ ...@@ -16,7 +16,8 @@
</div> </div>
<div class="btn" @click="handleSwitchMode"> <div class="btn" @click="handleSwitchMode">
<div class="icon"> <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>
<div class="text">{{ isEditMode ? "预览" : "编辑" }}</div> <div class="text">{{ isEditMode ? "预览" : "编辑" }}</div>
</div> </div>
...@@ -92,6 +93,62 @@ ...@@ -92,6 +93,62 @@
<div class="submit-text">生成报文</div> <div class="submit-text">生成报文</div>
</div> </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 class="main-box">
<div v-if="isEditMode" class="edit-panel"> <div v-if="isEditMode" class="edit-panel">
<v-md-editor <v-md-editor
...@@ -127,6 +184,37 @@ VMdEditor.use(vuepressTheme, { ...@@ -127,6 +184,37 @@ VMdEditor.use(vuepressTheme, {
Prism 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 isEditMode = ref(false);
const handleSwitchMode = () => { const handleSwitchMode = () => {
...@@ -162,9 +250,13 @@ const { renderedContent, updateContent } = useMarkdownStream(); ...@@ -162,9 +250,13 @@ const { renderedContent, updateContent } = useMarkdownStream();
const reportContent = ref(""); const reportContent = ref("");
const curTempTitle = ref("法案");
const getStreamChat = async (search, inputValue) => { const getStreamChat = async (search, inputValue) => {
const params = { const params = {
query: "输出一篇报文" query: writtingTitle.value, // "输出一篇报文"
desc: descText.value,
topic: curTempTitle.value // 政令、智库、法案、清单
}; };
abortController.value = new AbortController(); abortController.value = new AbortController();
...@@ -185,8 +277,12 @@ const getStreamChat = async (search, inputValue) => { ...@@ -185,8 +277,12 @@ const getStreamChat = async (search, inputValue) => {
console.log("resss", msgData.content); console.log("resss", msgData.content);
let str = msgData.content; let str = msgData.content;
if (str !== "[DONE]") { if (str !== "[DONE]") {
reportContent.value += str; reportContent.value += str;
updateContent(reportContent.value, scrollContainer.value); 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 { } else {
ElMessage.success("报文生成结束"); ElMessage.success("报文生成结束");
abortController.value.abort(); abortController.value.abort();
...@@ -231,12 +327,20 @@ const tabList = ref([ ...@@ -231,12 +327,20 @@ const tabList = ref([
]); ]);
const tempList = ref([ const tempList = ref([
{ {
title: "主题报", title: "法案",
desc: "基于特定主题生成各维度的综合分析报告" desc: "基于法案内容生成各维度的综合分析报告"
},
{
title: "智库",
desc: "基于智库内容生成各维度的综合分析报告"
},
{
title: "政令",
desc: "基于政令内容生成各维度的综合分析报告"
}, },
{ {
title: "统计速报", title: "清单",
desc: "基于定期更新的数据源生成各关键指标统计" desc: "基于清单内容生成各维度的综合分析报告"
} }
]); ]);
...@@ -244,6 +348,7 @@ const tempActiveIndex = ref(0); ...@@ -244,6 +348,7 @@ const tempActiveIndex = ref(0);
const handleClickTemp = (item, index) => { const handleClickTemp = (item, index) => {
tempActiveIndex.value = index; tempActiveIndex.value = index;
curTempTitle.value = item.title;
}; };
// 导出 // 导出
...@@ -352,6 +457,217 @@ onUnmounted(() => { ...@@ -352,6 +457,217 @@ onUnmounted(() => {
.writting-main { .writting-main {
display: flex; display: flex;
height: calc(100% - 60px); 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 { .sider {
width: 520px; width: 520px;
box-sizing: border-box; box-sizing: border-box;
...@@ -411,10 +727,10 @@ onUnmounted(() => { ...@@ -411,10 +727,10 @@ onUnmounted(() => {
} }
.template-box { .template-box {
margin-top: 19px; margin-top: 19px;
height: 120px; height: 260px;
display: flex; display: flex;
flex-wrap: wrap;
gap: 16px; gap: 16px;
.template { .template {
width: 230px; width: 230px;
height: 120px; height: 120px;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论