Skip to content

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

新增301调查、行政机构主页

上级 0f82a1ac
隐藏空白字符变更
内嵌 并排
正在显示 包含 4266 行增加 和 126 行删除
src/router/modules/decree.js
浏览文件 @ df03f9c4
......@@ -7,6 +7,8 @@ import DecreeBackground from "@/views/decree/decreeLayout/overview/background/in
import DecreeDeepDig from "@/views/decree/decreeLayout/deepdig/index.vue";
import DecreeInfluence from "@/views/decree/decreeLayout/influence/index.vue";
import Institution from "@/views/decree/institution/index.vue"
const decreeRoutes = [
// 政令首页
{
......@@ -69,6 +71,14 @@ const decreeRoutes = [
}
]
},
{
path: "/institution",
name: "Institution",
component: Institution,
meta: {
title: "行政机构主页"
}
}
]
......
src/router/modules/marketAccessRestrictions.js
浏览文件 @ df03f9c4
......@@ -2,7 +2,6 @@
import MarketAccessRestrictions from "@/views/marketAccessRestrictions/marketAccessHome/index.vue";
import MarketAccessLayout from "@/views/marketAccessRestrictions/marketAccessLayout/index.vue";
import MarketAccessOverview from "@/views/marketAccessRestrictions/marketAccessLayout/overview/index.vue";
import MarketAccessDeepdig from "@/views/marketAccessRestrictions/marketAccessLayout/deepdig/index.vue"
import MarketAccessCase from "@/views/marketAccessRestrictions/marketAccessLayout/case/index.vue";
import MarketSingleCaseLayout from "@/views/marketAccessRestrictions/singleCaseLayout/index.vue";
import MarketSingleCaseOverview from "@/views/marketAccessRestrictions/singleCaseLayout/overview/index.vue";
......@@ -36,14 +35,6 @@ const marketAccessRestrictionsRoutes = [
title: "调查概况"
}
},
{
path: "deepdig",
name: "MarketAccessDeepdig",
component: MarketAccessDeepdig,
meta: {
title: "调查概况"
}
},
{
path: "case",
name: "MarketAccessCase",
......
src/views/comprehensiveSearch/chat/index.vue
浏览文件 @ df03f9c4
......@@ -40,18 +40,27 @@
<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="ai-header" v-if="!isLoading">
<div class="icon">
<img src="./assets/images/ai-avator.png" alt="" />
</div>
<div class="text">{{ `已深度思考` }}</div>
</div>
<div v-if="message.think" class="think-title">思考内容</div>
<!-- <div v-if="message.think" class="think-title">思考内容</div>
<div
v-if="message.think"
class="content think-content"
v-html="renderMarkdown(message.think)"
></div>
></div> -->
<div v-if="message.source" class="source-title">知识库检索结果:</div>
<div v-if="message.source" class="content source-content">
<div
class="source-item"
v-for="(item, index) in message.source"
:key="index"
v-html="item"
></div>
</div>
<div v-if="message.content" class="answer-title">正文内容</div>
<div
v-if="message.content"
......@@ -85,7 +94,13 @@
</div>
</div>
<div class="right-main-footer">
<el-input @keyup.enter="sendMessage" type="textarea" placeholder="发送消息" :rows="4" v-model="userInput" />
<el-input
@keyup.enter="sendMessage"
type="textarea"
placeholder="发送消息"
:rows="4"
v-model="userInput"
/>
<div class="input-footer">
<div class="icon1">
<el-tooltip effect="dark" content="录音" placement="top">
......@@ -135,14 +150,14 @@ const abortController = ref(null);
// 消息数据
const messages = ref([
{
type: "user",
content: "你好"
},
{
type: "ai",
content: "您好！我是AI助手，有什么可以帮助您的吗？"
}
// {
// type: "user",
// content: "你好"
// },
// {
// type: "ai",
// content: "您好！我是AI助手，有什么可以帮助您的吗？"
// }
]);
// Markdown 渲染器
......@@ -209,10 +224,109 @@ function parseOuterOnly(json5String, maxDepth = 1) {
}
// 使用 fetchEventSource 连接
// const connectSSE = async question => {
// // 添加用户消息
// addMessage("user", question);
// // 添加空的 AI 消息用于流式更新
// addMessage("ai", "");
// isLoading.value = true;
// // 创建 AbortController 用于取消请求
// abortController.value = new AbortController();
// const params = {
// // question: "川普1期对华制裁领域分布情况"
// question: question
// // knowledge_base_name: "kb_test251112",
// // top_k: 6,
// // score_threshold: 0.5,
// // metadata: { year: 2024 }
// };
// fetchEventSource("/sseChat/rag/chat/stream", {
// method: "POST",
// headers: {
// "Content-Type": "application/json"
// },
// body: JSON.stringify(params),
// signal: abortController.value.signal,
// openWhenHidden: true,
// async onopen(res) {
// isLoading.value = false;
// console.log("流式回答开始", res);
// },
// async onmessage(res) {
// console.log("res", res);
// let msgData = parseOuterOnly(res.data);
// if (res.event === "end_of_workflow") {
// ElMessage.success("问答完成！");
// abortController.value.abort();
// abortController.value = new AbortController();
// return;
// }
// if (res.event === "start_of_agent" && msgData.agent_name === "answer") {
// isCurAnswerMessage.value = true;
// aiMessage.value = "";
// }
// if (res.event === "message") {
// let content = msgData.delta.content;
// console.log("msgData", msgData);
// console.log("content", content);
// if (content !== "[DONE]") {
// aiMessage.value += content;
// updateLastAIMessage(aiMessage.value);
// } else {
// aiMessage.value = "";
// abortController.value.abort();
// abortController.value = new AbortController();
// }
// }
// },
// onerror(error) {
// ElMessage({
// message: "问答报错!",
// type: "warning"
// });
// abortController.value.abort();
// abortController.value = new AbortController();
// throw new Error(error);
// }
// }).catch(error => {
// ElMessage({
// message: "问答报错!",
// type: "warning"
// });
// abortController.value.abort();
// abortController.value = new AbortController();
// throw new Error(error);
// });
// };
// 定义正则替换
function removeHttpParentheses(str) {
// 匹配 (http://... 开头，以 ) 结尾的内容
return str.replace(/\(http:\/\/[^)]*\)/g, "");
}
// 将字符串中符合以'['开头以'.txt]'结尾的字符串中的'.txt'替换为空
function removeTxtInBrackets(str) {
// 匹配 [开头，.txt]结尾的内容，并替换其中的.txt为空
return str.replace(/\[([^[\]]*)\.txt\]/g, '[$1]');
}
const connectSSE = async question => {
// 添加用户消息
addMessage("user", question);
let mesParam = messages.value.map(item => {
return {
role: item.type,
content: item.content
};
});
// 添加空的 AI 消息用于流式更新
addMessage("ai", "");
......@@ -222,15 +336,17 @@ const connectSSE = async question => {
abortController.value = new AbortController();
const params = {
// question: "川普1期对华制裁领域分布情况"
question: question
// knowledge_base_name: "kb_test251112",
// top_k: 6,
// score_threshold: 0.5,
// metadata: { year: 2024 }
model: "qwen-plus",
messages: mesParam,
stream: true,
temperature: 0.3,
top_k: 9,
score_threshold: 0.1,
prompt_name: "default",
return_direct: false
};
fetchEventSource("/sseChat/rag/chat/stream", {
fetchEventSource("/sseChat/knowledge_base/local_kb/bills-500/chat/completions", {
method: "POST",
headers: {
"Content-Type": "application/json"
......@@ -244,30 +360,50 @@ const connectSSE = async question => {
},
async onmessage(res) {
console.log("res", res);
let msgData = parseOuterOnly(res.data);
if (res.event === "end_of_workflow") {
ElMessage.success("问答完成！");
abortController.value.abort();
abortController.value = new AbortController();
return;
let msgData = JSON.parse(res.data);
if (msgData.docs) {
console.log("docs", msgData.docs);
const lastMessage = messages.value[messages.value.length - 1];
if (lastMessage && lastMessage.type === "ai") {
let newDocs = msgData.docs.map(item => {
return removeHttpParentheses(item);
}).map(val => {
return removeTxtInBrackets(val)
})
lastMessage.source = newDocs;
scrollToBottom();
}
}
if (res.event === "start_of_agent" && msgData.agent_name === "answer") {
if (msgData.choices) {
isCurAnswerMessage.value = true;
aiMessage.value = "";
}
if (res.event === "message") {
let content = msgData.delta.content;
console.log("msgData", msgData);
console.log("content", content);
if (content !== "[DONE]") {
aiMessage.value += content;
updateLastAIMessage(aiMessage.value);
} else {
aiMessage.value = "";
abortController.value.abort();
abortController.value = new AbortController();
}
let content = msgData.choices[0].delta.content;
aiMessage.value += content;
updateLastAIMessage(aiMessage.value);
}
// if (res.event === "end_of_workflow") {
// ElMessage.success("问答完成！");
// abortController.value.abort();
// abortController.value = new AbortController();
// return;
// }
// if (res.event === "start_of_agent" && msgData.agent_name === "answer") {
// isCurAnswerMessage.value = true;
// aiMessage.value = "";
// }
// if (res.event === "message") {
// let content = msgData.delta.content;
// console.log("msgData", msgData);
// console.log("content", content);
// if (content !== "[DONE]") {
// aiMessage.value += content;
// updateLastAIMessage(aiMessage.value);
// } else {
// aiMessage.value = "";
// abortController.value.abort();
// abortController.value = new AbortController();
// }
// }
},
onerror(error) {
ElMessage({
......@@ -684,6 +820,31 @@ onUnmounted(() => {
padding: 1px 10px;
border-radius: 5px;
}
.source-title {
margin-left: 26px;
height: 22px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
letter-spacing: 0px;
text-align: left;
}
.source-content {
background: rgba(245, 245, 245, 0.5);
width: 900px;
margin-left: 26px;
padding: 1px 10px;
border-radius: 5px;
// max-height: 300px;
// overflow-y: auto;
.source-item {
text-indent: 30px;
line-height: 30px;
color: #333;
}
}
.ai-content {
margin-top: 10px;
width: 900px;
......
src/views/decree/decreeHome/index.vue
浏览文件 @ df03f9c4
......@@ -88,7 +88,7 @@
</div>
</div>
<div class="home-main-header-item-box">
<div class="item" v-for="(item, index) in govInsList" :key="index">
<div class="item" v-for="(item, index) in govInsList" :key="index" @click="handleToInstitution(item)">
<div class="item-left">
<img :src="item.img" alt="" />
</div>
......@@ -646,6 +646,14 @@ import Message1 from "./assets/images/message-icon1.png";
import Message2 from "./assets/images/message-icon2.png";
import Message3 from "./assets/images/message-icon3.png";
// 跳转行政机构主页
const handleToInstitution = item => {
if (item.name === "美国商务部") {
const curRoute = router.resolve("/institution");
window.open(curRoute.href, "_blank");
}
};
// 返回首页
const handleBackHome = () => {
router.push({
......@@ -2766,7 +2774,7 @@ onMounted(async () => {
height: 84px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
cursor: pointer;
&:hover{
&:hover {
background: var(--color-bg-hover);
}
.main-item-left {
......
src/views/decree/institution/deepdig/index.vue 0 → 100644
浏览文件 @ df03f9c4
<template>
<div class="deepdig-wrap">
<div class="top">
<div class="box1 box">
<div class="box-header">
<div class="header-left"></div>
<div class="title">经费来源情况</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon1.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box-main" id="box1Chart"></div>
<div class="box-footer">
<div class="box-footer-left">
<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
</div>
<div class="box-footer-center">
{{ "经费来自国会常规预算以及《芯片与科学法案》等专项立法拨款​。BIS​​ 获得最多资金预算。" }}
</div>
<div class="box-footer-right">
<img src="@/assets/icons/box-footer-right-icon.png" alt="" />
</div>
</div>
</div>
<div class="box2 box">
<div class="box-header">
<div class="header-left"></div>
<div class="title">资助企业情况</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon1.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box-main" id="box2Chart"></div>
<div class="box-footer">
<div class="box-footer-left">
<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
</div>
<div class="box-footer-center">
{{ "主要集中在高科技新型产业如集成电路、人工智能及通信网络，突出打压中美竞争关键领域。" }}
</div>
<div class="box-footer-right">
<img src="@/assets/icons/box-footer-right-icon.png" alt="" />
</div>
</div>
</div>
</div>
<div class="bottom">
<div class="box3 box">
<div class="box-header">
<div class="header-left"></div>
<div class="title">主要科技政策观点</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon1.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box-main" id="box3Chart"></div>
<div class="box-footer">
<div class="box-footer-left">
<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
</div>
<div class="box-footer-center">
{{ "近年来美商务部对华制裁手段升级，聚焦专利壁垒、出口管制、力图阻断产业链升级的特点。" }}
</div>
<div class="box-footer-right">
<img src="@/assets/icons/box-footer-right-icon.png" alt="" />
</div>
</div>
</div>
<div class="box4 box">
<div class="box-header">
<div class="header-left"></div>
<div class="title">人物关系挖掘</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon1.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box-main box4-main">
<div class="box4-main-left" id="box4Chart"></div>
<div class="box4-main-right">
<div class="box4-main-right-header">
与 <span>{{ "唐纳德·特朗普" }}</span> 关系
</div>
<div class="box4-main-right-main">
<div class="box4-main-right-item">
<div class="icon"></div>
<div class="text">{{ '在2016年和2024年的总统竞选中，卢特尼克利用其在金融界的影响力，为特朗普筹集了数千万美元的竞选资金，并个人捐赠了1000万美元。' }}</div>
</div>
<div class="box4-main-right-item">
<div class="icon"></div>
<div class="text">{{ '提名霍华德·卢特尼克担任商务部长，赋予其直接监督美国贸易代表办公室（USTR）的权力。' }}</div>
</div>
<div class="box4-main-right-item">
<div class="icon"></div>
<div class="text">{{ '在接受CBS News采访时强调，特朗普政府的政策“是美国历史上最重要的”。' }}</div>
</div>
</div>
</div>
</div>
<div class="box-footer">
<div class="box-footer-left">
<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
</div>
<div class="box-footer-center">
{{ "霍华德·卢特尼克与包括总统在内的美国政界、商界高层均有紧密联系。" }}
</div>
<div class="box-footer-right">
<img src="@/assets/icons/box-footer-right-icon.png" alt="" />
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, computed, onMounted } from "vue";
import setChart from "@/utils/setChart";
import getSankeyChart from "./utils/sankey";
import getPieChart from "./utils/piechart";
import getWordCloudChart from "./utils/worldCloudChart";
import getGraphChart from "./utils/graph";
import Img from "./assets/images/9.png";
import Img1 from "./assets/images/1.png";
import Img2 from "./assets/images/2.png";
import Img3 from "./assets/images/3.png";
import Img4 from "./assets/images/4.png";
import Img5 from "./assets/images/5.png";
import Img6 from "./assets/images/6.png";
import Img7 from "./assets/images/7.png";
import Img8 from "./assets/images/8.png";
const box1ChartData = ref({
nodes: [
{
name: "《芯片与科学法案》专项法案资金"
},
{
name: "国防生产法第三章专项资金"
},
{
name: "国会年度预算拨款"
},
{
name: "《通胀削减法案》专项法案资金"
},
{
name: "工业和安全局(BIS)"
},
{
name: "国家技术信息局(NTIS)"
},
{
name: "经济分析局(BEA)"
},
{
name: "国家电信和信息管理局(NTIA)"
},
{
name: "专利和商标局(USPTO)"
},
{
name: "经济发展局(EDA)"
},
{
name: "国家标准与技术研究所(NIST)"
}
],
links: [
{
source: "《芯片与科学法案》专项法案资金",
target: "工业和安全局(BIS)",
value: 100
},
{
source: "《芯片与科学法案》专项法案资金",
target: "国家技术信息局(NTIS)",
value: 58
},
{
source: "《芯片与科学法案》专项法案资金",
target: "经济分析局(BEA)",
value: 32
},
{
source: "《芯片与科学法案》专项法案资金",
target: "国家电信和信息管理局(NTIA)",
value: 12
},
{
source: "国防生产法第三章专项资金",
target: "工业和安全局(BIS)",
value: 41
},
{
source: "国防生产法第三章专项资金",
target: "国家电信和信息管理局(NTIA)",
value: 28
},
{
source: "国防生产法第三章专项资金",
target: "经济分析局(BEA)",
value: 11
},
{
source: "国会年度预算拨款",
target: "工业和安全局(BIS)",
value: 24
},
{
source: "国会年度预算拨款",
target: "经济分析局(BEA)",
value: 30
},
{
source: "国会年度预算拨款",
target: "国家电信和信息管理局(NTIA)",
value: 68
},
{
source: "国会年度预算拨款",
target: "国家电信和信息管理局(NTIA)",
value: 23
},
{
source: "国会年度预算拨款",
target: "专利和商标局(USPTO)",
value: 7
},
{
source: "国会年度预算拨款",
target: "经济发展局(EDA)",
value: 72
},
{
source: "国会年度预算拨款",
target: "国家标准与技术研究所(NIST)",
value: 34
},
{
source: "《通胀削减法案》专项法案资金",
target: "工业和安全局(BIS)",
value: 35
},
{
source: "《通胀削减法案》专项法案资金",
target: "经济发展局(EDA)",
value: 28
},
{
source: "《通胀削减法案》专项法案资金",
target: "国家标准与技术研究所(NIST)",
value: 32
}
]
});
const box2ChartData = ref([
{
name: "集成电路",
value: 50
},
{
name: "人工智能",
value: 46
},
{
name: "通信网络",
value: 40
},
{
name: "能源",
value: 32
},
{
name: "先进制造",
value: 31
},
{
name: "生物科技",
value: 31
},
{
name: "航空航天",
value: 30
},
{
name: "新材料",
value: 24
}
]);
const box3ChartData = ref([
{ name: "人工智能(AI)", 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 }
]);
const box4ChartData = ref({
nodes: [
{ id: "9", name: "霍华德·卢特尼克", category: 0, symbolSize: 50, symbol: `image://${Img}` },
{ id: "1", name: "唐纳德·特朗普", category: 1, symbolSize: 50, symbol: `image://${Img1}` },
{ id: "2", name: "约翰·斯奎尔斯", category: 2, symbolSize: 50, symbol: `image://${Img2}` },
{ id: "3", name: "马尔科·卢比奥", category: 2, symbolSize: 50, symbol: `image://${Img3}` },
{ id: "4", name: "埃隆·马斯克", category: 2, symbolSize: 50, symbol: `image://${Img4}` },
{ id: "5", name: "道格·伯格姆", category: 2, symbolSize: 50, symbol: `image://${Img5}` },
{ id: "6", name: "斯科特·贝森特", category: 2, symbolSize: 50, symbol: `image://${Img6}` },
{ id: "7", name: "杰弗里·凯斯勒", category: 2, symbolSize: 50, symbol: `image://${Img7}` },
{ id: "8", name: "杰弗里·凯德勒", category: 2, symbolSize: 50, symbol: `image://${Img8}` }
],
links: [
{ source: "9", target: "1" },
{ source: "9", target: "2" },
{ source: "9", target: "3" },
{ source: "9", target: "4" },
{ source: "9", target: "5" },
{ source: "9", target: "6" },
{ source: "9", target: "7" },
{ source: "9", target: "8" }
],
categories: [{ name: "a" }, { name: "b" }]
});
onMounted(() => {
const box1Chart = getSankeyChart(box1ChartData.value.nodes, box1ChartData.value.links);
setChart(box1Chart, "box1Chart");
const box2Chart = getPieChart(box2ChartData.value);
setChart(box2Chart, "box2Chart");
const box3Chart = getWordCloudChart(box3ChartData.value);
setChart(box3Chart, "box3Chart");
const box4Chart = getGraphChart(box4ChartData.value);
setChart(box4Chart, "box4Chart");
});
</script>
<style lang="scss" scoped>
.deepdig-wrap {
padding-bottom: 5px;
.box {
width: 792px;
height: 410px;
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);
}
.box-header {
height: 48px;
display: flex;
position: relative;
.header-left {
margin-top: 20px;
width: 8px;
height: 16px;
border-radius: 0 4px 4px 0;
background: rgba(10, 87, 166, 1);
}
.title {
margin-left: 14px;
margin-top: 16px;
height: 24px;
line-height: 24px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
}
.header-btn-box {
position: absolute;
top: 14px;
right: 52px;
display: flex;
.btn {
margin-left: 8px;
height: 28px;
padding: 0 8px;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
text-align: center;
line-height: 28px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
cursor: pointer;
}
.btnActive {
border: 1px solid rgba(10, 87, 166, 1);
background: rgba(246, 250, 255, 1);
color: rgba(10, 87, 166, 1);
}
}
.header-info {
height: 22px;
position: absolute;
right: 84px;
top: 17px;
display: flex;
justify-content: flex-end;
.icon {
margin-top: 3px;
width: 14px;
height: 14px;
margin-right: 8px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 22px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
}
}
.header-right {
position: absolute;
top: 14px;
right: 12px;
display: flex;
justify-content: flex-end;
gap: 4px;
.icon {
width: 28px;
height: 28px;
img {
width: 100%;
height: 100%;
}
}
}
}
.box-main {
height: 300px;
// background: skyblue;
}
.box-footer {
margin: 8px auto;
width: 759px;
height: 40px;
padding: 6px 12px;
display: flex;
align-items: center;
gap: 10px;
box-sizing: border-box;
border: 1px solid rgba(231, 243, 255, 1);
border-radius: 4px;
background: rgba(246, 250, 255, 1);
.box-footer-left {
width: 19px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
.box-footer-center {
width: 666px;
height: 24px;
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.box-footer-right {
width: 24px;
height: 24px;
img {
width: 100%;
height: 100%;
}
}
}
.top {
margin: 0 auto;
display: flex;
gap: 16px;
}
.bottom {
margin: 16px auto;
display: flex;
gap: 16px;
}
.box4-main {
display: flex;
margin: 0 20px;
.box4-main-left {
width: 350px;
}
.box4-main-right {
width: 380px;
.box4-main-right-header {
display: inline-block;
max-width: 300px;
height: 32px;
padding: 0 16px;
border-radius: 20px;
background: rgba(231, 243, 255, 1);
text-align: center;
line-height: 32px;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
letter-spacing: 1px;
color: #3b414b;
span {
color: var(--color-main-active);
}
}
.box4-main-right-main {
height: 240px;
margin-top: 20px;
.box4-main-right-item {
display: flex;
gap: 8px;
margin-bottom: 16px;
.icon {
margin-top: 8px;
width: 8px;
height: 8px;
border-radius: 4px;
background: var(--color-main-active);
}
.text {
width: 360px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
}
}
}
}
}
}
</style>
\ No newline at end of file
src/views/decree/institution/deepdig/utils/graph.js 0 → 100644
浏览文件 @ df03f9c4
const getGraphChart = (graphData) => {
const option = {
title: { text: "", left: "center" },
tooltip: {},
// legend: {
// data: graphData.categories.map(item => item.name),
// left: "left"
// },
series: [
{
type: "graph",
layout: "force", // 力导向布局
force: {
repulsion: 500, // 节点排斥力
edgeLength: [30, 80] // 边长度范围
},
data: graphData.nodes,
links: graphData.links,
categories: graphData.categories,
roam: true, // 支持缩放、平移
label: {
show: true,
fontSize: 14,
position: "bottom",
formatter: function (params) {
// 根据条件返回不同样式的文本
if (params.data.category === 0) {
return `{a|${params.name}}`; // 使用富文本样式
} else if (params.data.category === 1) {
return `{b|${params.name}}`;
} else {
return params.name; // 默认样式
}
},
rich: {
a: {
// 重要节点的样式
color: "#000",
fontSize: 14,
padding: [2, 4],
borderRadius: 2
},
b: {
// 普通节点的样式
color: "rgba(5, 95, 194, 1)",
fontSize: 14,
fontWeight: "bold",
}
}
},
edgeSymbol: ["arrow", "none"], // 边的箭头
edgeSymbolSize: [8, 50],
itemStyle: {
color: "rgba(5, 95, 194, 1)"
// borderColor: "red",
// borderWidth: 1
},
lineStyle: {
color: "rgba(174, 214, 255, 1)",
width: 2,
opacity: 0.5
},
emphasis: {
focus: "adjacency",
lineStyle: {
width: 2
}
}
}
]
};
return option
}
export default getGraphChart
\ No newline at end of file
src/views/decree/institution/deepdig/utils/piechart.js 0 → 100644
浏览文件 @ df03f9c4
const getPieChart = (data) => {
let option = {
color: ['#69B1FF','#FFC069','#87E8DE','#597EF7','#D6E4FF','#FF7875','#B37FEB','#FFA39E'],
series: [
{
type: 'pie',
radius: [95, 115],
height: '100%',
left: 'center',
width: '85%',
itemStyle: {
borderColor: '#fff',
borderWidth: 1
},
label: {
alignTo: 'edge',
formatter: '{name|{b}} {num|{c} 项 {d}%}\n',
minMargin: 5,
edgeDistance: 10,
// lineHeight: 15,
rich: {
name: {
fontSize: 16,
fontWeight: 700,
fontFamily: 'Microsoft YaHei',
color: 'rgba(59, 65, 75, 1)',
// lineHeight: 24,
// height: 24
},
num: {
fontSize: 14,
color: 'rgba(95, 101, 108, 1)',
fontWeight: 400
}
}
},
labelLine: {
length: 15,
length2: 0,
maxSurfaceAngle: 80
},
labelLayout: function (params) {
const isLeft = params.labelRect.x < 556 / 2;
const points = params.labelLinePoints;
points[2][0] = isLeft
? params.labelRect.x
: params.labelRect.x + params.labelRect.width;
return {
labelLinePoints: points
};
},
data: data
}]
}
return option
}
export default getPieChart;
\ No newline at end of file
src/views/decree/institution/deepdig/utils/sankey.js 0 → 100644
浏览文件 @ df03f9c4
const getSankeyChart = (nodes, links) => {
const option = {
series: {
type: 'sankey',
layout: 'none',
left: '2%',
right: '26%',
top: '5%',
bottom: '5%',
emphasis: {
focus: 'adjacency'
},
nodeWidth: 40,
label: {
show: true,
formatter: function (params) {
return `${params.name}`;
},
position: 'right',
textStyle: {
fontSize: '14px',
color: '#555'
}
},
data: nodes,
links: links
}
};
return option
}
export default getSankeyChart
\ No newline at end of file
src/views/decree/institution/deepdig/utils/worldCloudChart.js 0 → 100644
浏览文件 @ df03f9c4
const getWordCloudChart = (data) => {
const option = {
grid: {
left: '1%',
top: '1%',
right: '1%',
bottom: '1%',
},
series: [
{
type: "wordCloud",
// shape: "rect", //
// 其他形状你可以使用形状路径
// 或者自定义路径
shape: 'circle', // 圆形（默认）
// shape: 'rect' // 矩形
// shape: 'roundRect', // 圆角矩形
// shape: 'triangle' // 三角形
// shape: 'diamond', // 菱形
// shape: 'pentagon' // 五边形
// shape: 'star', // 星形
// shape: 'cardioid' // 心形
gridSize: 20, // 网格大小，影响词间距。
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/institution/index.vue 0 → 100644
浏览文件 @ df03f9c4
<template>
<div class="wrap">
<div class="header">
<div class="header-left">
<img src="@/assets/images/decree-org.png" alt="" />
</div>
<div class="header-right">
<div class="title">{{ institutionInfo.name }}</div>
<div class="en-title">{{ institutionInfo.enName }}</div>
<div class="desc">{{ institutionInfo.desc }}</div>
<div class="tag-box">
<div class="tag" v-for="(tag, index) in institutionInfo.tagList" :key="index">
{{ tag }}
</div>
</div>
</div>
<div class="header-btn">
<div class="icon">
<img src="@/assets/images/links-icon.png" alt="" />
</div>
<div class="text">{{ "查看官网" }}</div>
</div>
</div>
<div class="tab-box">
<div
class="tab"
@click="handleClickTab(item, index)"
:class="{ tabActive: item.active }"
v-for="(item, index) in tabList"
:key="index"
>
{{ item.name }}
</div>
</div>
<div class="main">
<InsDetail v-if="activeTabName === '机构详情'"></InsDetail>
<Deepdig v-else-if="activeTabName === '深度挖掘'"></Deepdig>
<Sanction v-else></Sanction>
</div>
</div>
</template>
<script setup>
import { ref, computed, onMounted } from "vue";
import InsDetail from "./insDetail/index.vue";
import Deepdig from "./deepdig/index.vue";
import Sanction from "./sanction/index.vue";
const institutionInfo = ref({
name: "美国商务部",
enName: "United States Department of Commerce",
desc: "美国联邦政府的重要经济部门，主要职责为国际贸易、进出口管制、经济数据统计及专利商标管理。",
tagList: ["实体清单", "232调查", "行政令"]
});
const activeTabName = ref("机构详情");
const tabList = ref([
{
name: "机构详情",
active: true
},
{
name: "深度挖掘",
active: false
},
{
name: "对话制裁",
active: false
}
]);
const handleClickTab = (val, index) => {
tabList.value.forEach(item => {
item.active = false;
});
tabList.value[index].active = true;
activeTabName.value = val.name;
};
</script>
<style lang="scss" scoped>
.wrap {
width: 1920px;
height: 100%;
background-image: url("./assets/images/bg.png");
background-repeat: no-repeat;
background-size: 100% auto;
padding-top: 16px;
.header {
width: 1600px;
height: 200px;
margin: 0 auto 16px;
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.8);
display: flex;
position: relative;
.header-left {
width: 160px;
height: 160px;
margin: 20px;
img {
width: 100%;
height: 100%;
}
}
.header-right {
margin-left: 24px;
.title {
margin-top: 26px;
height: 42px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 32px;
font-weight: 700;
line-height: 42px;
letter-spacing: 0px;
text-align: left;
}
.en-title {
margin-top: 8px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
.desc {
margin-top: 6px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
}
.tag-box {
margin-top: 14px;
display: flex;
gap: 8px;
.tag {
height: 24px;
padding: 0px 8px;
border-radius: 4px;
background: rgba(231, 243, 255, 1);
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0px;
}
}
}
.header-btn {
position: absolute;
top: 26px;
right: 30px;
width: 120px;
height: 36px;
border-radius: 6px;
background: rgba(5, 95, 194, 1);
display: flex;
gap: 3px;
justify-content: center;
align-items: center;
cursor: pointer;
.icon {
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 22px;
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 22px;
}
}
}
.tab-box {
width: 1600px;
height: 64px;
margin: 0 auto;
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.8);
display: flex;
justify-content: space-between;
align-items: center;
.tab {
width: 526px;
height: 54px;
box-sizing: border-box;
border: 2px solid transparent;
border-radius: 10px;
text-align: center;
line-height: 50px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 400;
letter-spacing: 0px;
cursor: pointer;
&:hover {
background: rgba(231, 243, 255, 1);
}
}
.tabActive {
border: 2px solid rgba(174, 214, 255, 1);
background: rgba(231, 243, 255, 1);
color: rgba(5, 95, 194, 1);
font-size: 24px;
font-weight: 700;
}
}
.main {
height: 800px;
width: 1600px;
margin: 16px auto;
}
}
</style>
\ No newline at end of file
src/views/decree/institution/insDetail/index.vue 0 → 100644
浏览文件 @ df03f9c4
<template>
<div class="detail-wrap">
<div class="left box">
<div class="box-header">
<div class="header-left"></div>
<div class="title">最新动态</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="left-main">
<div class="left-main-item" v-for="(item, index) in curList" :key="index">
<div class="line" v-if="index !== curList.length - 1"></div>
<div class="time">{{ item.time }}</div>
<div class="icon">
<img src="@/assets/images/decree-org.png" alt="" />
</div>
<div class="info">
<div class="header">
<div class="title">{{ item.title }}</div>
<div
class="type"
:class="{
type1: item.type.status === 2,
type2: item.type.status === 3,
type3: item.type.status === 4
}"
>
{{ item.type.name }}
</div>
</div>
<div class="content">{{ item.content }}</div>
<div class="tag-box">
<div class="tag" v-for="(val, idx) in item.tagList" :key="idx">{{ val }}</div>
</div>
</div>
</div>
</div>
<div class="left-footer">
<div class="info">
{{ `共有153项动态` }}
</div>
<div class="page-box">
<el-pagination background layout="prev, pager, next" :total="153" />
</div>
</div>
</div>
<div class="right box">
<div class="box-header">
<div class="header-left"></div>
<div class="title">基本信息</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="right-main">
<div class="img-box">
<img :src="basicInfo.image" alt="" />
</div>
<div class="info-box">
<div class="info-item">
<div class="info-item-left">{{ "成立时间：" }}</div>
<div class="info-item-right">{{ basicInfo.shijian }}</div>
</div>
<div class="info-item">
<div class="info-item-left">{{ "总部地址：" }}</div>
<div class="info-item-right">{{ basicInfo.dizhi }}</div>
</div>
<div class="info-item">
<div class="info-item-left">{{ "主要职责：" }}</div>
<div class="info-item-right">{{ basicInfo.zhize }}</div>
</div>
<div class="info-item">
<div class="info-item-left">{{ "下属机构：" }}</div>
<div class="info-item-right">{{ basicInfo.xiashujigou }}</div>
</div>
<div class="info-item">
<div class="info-item-left">{{ "制裁手段：" }}</div>
<div class="info-item-right">{{ basicInfo.zhicaishouduan }}</div>
</div>
</div>
<div class="user-box">
<div class="user-header">
{{ "关键人物：" }}
</div>
<div class="user-content">
<div class="user-item" v-for="(item, index) in basicInfo.keyUser" :key="index">
<div class="user-item-left">
<img :src="item.img" alt="" />
</div>
<div class="user-item-right">
<div class="name">{{ item.name }}</div>
<div class="position">{{ item.position }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, computed, onMounted } from "vue";
import Img from "./assets/images/img.png";
import User1 from "./assets/images/user1.png";
import User2 from "./assets/images/user2.png";
import User3 from "./assets/images/user3.png";
import User4 from "./assets/images/user4.png";
const basicInfo = ref({
image: Img,
shijian: "1948年",
dizhi: "华盛顿特区宪法大道1401号赫伯特·C·胡佛大楼 ",
zhize: "国际贸易、进出口管制、经济数据统计及专利商标管理",
xiashujigou: "工业与安全局、国际贸易管理局、专利商标局等",
zhicaishouduan: "实体清单、军事最终用户清单、​​“301条款”关税、​​“232条款”关税、特别指定国民清单",
keyUser: [
{
name: "霍华德·卢特尼克",
img: User1,
position: "部长"
},
{
name: "保罗·达巴尔",
img: User2,
position: "副部长"
},
{
name: "杰弗里·凯斯勒",
img: User3,
position: "工业与安全局局长"
},
{
name: "约翰·斯奎尔斯",
img: User4,
position: "专利商标局局长"
}
]
});
const curList = ref([
{
title: "美国商务部：宣布对华全面加征100%关税",
time: "2025 10月10日",
content:
"特朗普宣布自11月1日起对所有中国进口商品加征100%额外关税，叠加现有关税后总水平可达130%或更高。同时宣布将对“所有关键美国制造软件”实施严格的出口管制。",
type: {
name: "行政令",
status: 2
},
tagList: ["人工智能"]
},
{
title: "美国商务部：BIS更新“实体清单”",
time: "2025 10月4日",
content:
"美国商务部工业与安全局公布对中国半导体出口管制措施新规则，将140家中国半导体公司列入“实体清单”，分别是136家中国实体和4家海外关联企业。",
type: {
name: "实体清单",
status: 4
},
tagList: ["集成电路"]
},
{
title: "美国商务部：​出台“50%穿透规则”（关联方规则）",
time: "2025 9月29日",
content:
"规定凡被列入“实体清单”或“军事最终用户清单”的企业，其直接或间接持股超过50%的子公司将自动受到同等出口管制限制。此规则极大地扩大了制裁范围，且未设过渡期。",
type: {
name: "行政令",
status: 2
},
tagList: ["生物科技"]
},
{
title: "美国商务部：对华港口设备加征高额关税",
time: "2025 9月21日",
content:
"美国贸易代表办公室（USTR）公告，作为“301条款”行动的一部分，对特定中国制造的港口设备加征额外关税，其中船到岸起重机（STS）和集装箱底盘车及零部件均加征100%关税，于11月9日生效。",
type: {
name: "301调查",
status: 3
},
tagList: ["先进制造"]
},
{
title: "美国商务部：BIS更新“实体清单”",
time: "2025 9月15日",
content:
"美国商务部工业和安全局宣布更新《出口管理条例》（EAR），并发布两项最终规则，将25家中国企业及其相关实体列入实体清单。",
type: {
name: "实体清单",
status: 4
},
tagList: ["集成电路"]
},
{
title: "美国商务部：BIS更新“实体清单”",
time: "2025 9月15日",
content:
"美国商务部工业和安全局宣布更新《出口管理条例》（EAR），并发布两项最终规则，将25家中国企业及其相关实体列入实体清单。",
type: {
name: "实体清单",
status: 4
},
tagList: ["集成电路"]
},
{
title: "美国商务部：加强对华AI芯片出口限制",
time: "2025 9月10日",
content:
"美国政府要求英特尔、AMD、英伟达等公司对向中国出口的先进AI处理器实施严格的许可证制度。英特尔Gaudi系列芯片等因性能超标明确受限。同时，考虑对中国AI初创企业DeepSeek实施制裁。",
type: {
name: "行政令",
status: 2
},
tagList: ["人工智能", "集成电路"]
},
{
title: "美国商务部：BIS更新“实体清单”",
time: "2025 9月15日",
content:
"美国商务部工业和安全局宣布更新《出口管理条例》（EAR），并发布两项最终规则，将25家中国企业及其相关实体列入实体清单。",
type: {
name: "实体清单",
status: 4
},
tagList: ["集成电路"]
},
{
title: "美国商务部：​发布针对中国网联汽车的禁令",
time: "2025 8月25日",
content: "美国商务部工业与安全局（BIS）发布一项最终规则，禁止涉及销售或进口其认定软件与中国有关联的联网汽车的交易。",
type: {
name: "行政令",
status: 2
},
tagList: ["能源", "先进制造"]
},
{
title: "美国商务部：考虑对中国无人机实施新限制",
time: "2025 8月19日",
content:
"美国商务部表示正在考虑制定新规则，以限制或禁止中国无人机在美国境内使用，并就所谓“保护无人机供应链”的潜在规则征求公众意见。",
type: {
name: "行政令",
status: 2
},
tagList: ["先进制造"]
}
]);
</script>
<style lang="scss" scoped>
.detail-wrap {
display: flex;
gap: 16px;
padding-bottom: 30px;
.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);
}
.box-header {
height: 56px;
display: flex;
position: relative;
.header-left {
margin-top: 20px;
width: 8px;
height: 16px;
border-radius: 0 4px 4px 0;
background: rgba(10, 87, 166, 1);
}
.title {
margin-left: 14px;
margin-top: 16px;
height: 24px;
line-height: 24px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
}
.header-btn-box {
position: absolute;
top: 14px;
right: 52px;
display: flex;
.btn {
margin-left: 8px;
height: 28px;
padding: 0 8px;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
text-align: center;
line-height: 28px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
cursor: pointer;
}
.btnActive {
border: 1px solid rgba(10, 87, 166, 1);
background: rgba(246, 250, 255, 1);
color: rgba(10, 87, 166, 1);
}
}
.header-info {
height: 22px;
position: absolute;
right: 84px;
top: 17px;
display: flex;
justify-content: flex-end;
.icon {
margin-top: 3px;
width: 14px;
height: 14px;
margin-right: 8px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 22px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
}
}
.header-right {
position: absolute;
top: 14px;
right: 12px;
display: flex;
justify-content: flex-end;
gap: 4px;
.icon {
width: 28px;
height: 28px;
img {
width: 100%;
height: 100%;
}
}
}
}
.left {
width: 1064px;
height: 1683px;
.left-main {
border-top: 1px solid rgba(234, 236, 238, 1);
height: 1551px;
.left-main-item {
display: flex;
margin-top: 16px;
gap: 18px;
margin-left: 10px;
height: 130px;
position: relative;
.line {
background: #e6e7e8;
width: 2px;
height: 122px;
position: absolute;
top: 24px;
left: 104px;
}
.time {
width: 75px;
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
letter-spacing: 1px;
text-align: right;
}
.icon {
width: 24px;
height: 24px;
img {
width: 100%;
height: 100%;
}
}
.info {
width: 900px;
.header {
height: 26px;
display: flex;
justify-content: space-between;
.title {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
}
.type {
height: 28px;
padding: 0 8px;
border-radius: 20px;
line-height: 28px;
}
.type1 {
background: rgba(232, 189, 11, 0.1);
color: rgba(232, 189, 11, 1);
}
.type2 {
background: rgba(255, 149, 77, 0.1);
color: rgba(255, 149, 77, 1);
}
.type3 {
background: rgba(206, 79, 81, 0.1);
color: rgba(206, 79, 81, 1);
}
}
.content {
margin-top: 8px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.tag-box {
margin-top: 9px;
display: flex;
gap: 8px;
.tag {
height: 28px;
padding: 0 8px;
line-height: 28px;
border-radius: 4px;
background: rgba(231, 243, 255, 1);
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
}
}
}
}
}
.left-footer {
height: 75px;
border-top: 1px solid rgba(234, 236, 238, 1);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}
}
.right {
width: 520px;
height: 800px;
.right-main {
width: 469px;
height: 728px;
margin: 3px auto;
.img-box {
width: 469px;
height: 240px;
img {
width: 100%;
height: 100%;
}
}
.info-box {
margin-top: 14px;
padding-bottom: 28px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
.info-item {
display: flex;
margin-top: 12px;
.info-item-left {
width: 88px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
letter-spacing: 1px;
text-align: left;
}
.info-item-right {
width: 356px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
}
}
.user-box {
padding-top: 19px;
.user-header {
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
letter-spacing: 1px;
text-align: left;
}
.user-content {
margin-top: 19px;
display: flex;
flex-wrap: wrap;
gap: 16px 39px;
justify-content: center;
.user-item {
width: 185px;
height: 49px;
display: flex;
gap: 8px;
.user-item-left {
width: 48px;
height: 48px;
img {
width: 100%;
height: 100%;
}
}
.user-item-right {
.name {
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
.position {
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;
}
}
}
}
}
}
}
}
</style>
\ No newline at end of file
src/views/decree/institution/sanction/index.vue 0 → 100644
浏览文件 @ df03f9c4
<template>
<div class="sanction-wrap">
<div class="box1 box">
<div class="box-header">
<div class="box-header-left">
<div class="title">{{ "实体清单 >" }}</div>
<div class="desc">
{{
"被列入清单的企业在购买受《出口管理条例》管辖的美国物项（商品、软件、技术）时，将面临“推定拒绝”的严格许可审查，相当于事实上的禁运。主要针对半导体、人工智能、超算等高科技领域。"
}}
</div>
<div class="info">
{{ "美国商务部工业与安全局 (BIS) · 1997年2月-至今" }}
</div>
</div>
<div class="box-header-right">
<div class="box-header-right-top">
<div class="item">
<div class="item-top">{{ "今年新增" }}</div>
<div class="item-bottom">
<div class="item-bottom-left">{{ "95家" }}</div>
<div class="item-bottom-center">{{ "/" }}</div>
<div class="item-bottom-right">{{ "1129家" }}</div>
</div>
</div>
<div class="item">
<div class="item-top">{{ "今年新增" }}</div>
<div class="item-bottom">
<div class="item-bottom-left">{{ "95家" }}</div>
<div class="item-bottom-center">{{ "/" }}</div>
<div class="item-bottom-right">{{ "1129家" }}</div>
</div>
</div>
</div>
<div class="box-header-right-bottom">
<div class="icon">
<img src="@/assets/images/icon/tips.png" alt="" />
</div>
<div class="text">{{ "中国实体数量/实体总数" }}</div>
</div>
</div>
</div>
<div class="box-center">
<div class="box-center-left">
<img src="@/assets/images/icon-hot.png" alt="" />
</div>
<div class="box-center-center">
{{
"美商务部2025年10月8日将16家中国大陆企业及3个中国香港地址列入实体清单，指控这些实体为伊朗及其代理组织（如胡塞武装、哈马斯）采购美国电子元件，用于无人机等军事目的，规避了..."
}}
</div>
<div class="box-center-right">{{ "更多 >" }}</div>
</div>
<div class="box-main">
<div class="box-main-left">
<div class="box-main-content" id="box1Chart"></div>
<div class="box-main-footer">{{ "实体清单新增企业数量变化趋势" }}</div>
</div>
<div class="box-main-right">
<div class="box-main-content" id="box2Chart"></div>
<div class="box-main-footer">{{ "实体清单新增企业领域分布" }}</div>
</div>
</div>
</div>
<div class="box2 box">
<div class="box-header">
<div class="box-header-left">
<div class="title">{{ "232调查 >" }}</div>
<div class="desc">
{{
"依据《1962年贸易扩展法》第232条，由商务部在270天内向总统提交报告，并由总统在90天内决定是否采取措施，评估特定产品的进口是否威胁美国国家安全并对其加征高额关税、实施进口配额等措施。"
}}
</div>
<div class="info">
{{ "美国商务部 · 1962年9月-至今" }}
</div>
</div>
<div class="box-header-right">
<div class="box-header-right-top">
<div class="item">
<div class="item-top">{{ "今年新增" }}</div>
<div class="item-bottom">
<div class="item-bottom-left">{{ "2次" }}</div>
<div class="item-bottom-center">{{ "/" }}</div>
<div class="item-bottom-right">{{ "6次" }}</div>
</div>
</div>
<div class="item">
<div class="item-top">{{ "今年新增" }}</div>
<div class="item-bottom">
<div class="item-bottom-left">{{ "16次" }}</div>
<div class="item-bottom-center">{{ "/" }}</div>
<div class="item-bottom-right">{{ "91次" }}</div>
</div>
</div>
</div>
<div class="box-header-right-bottom">
<div class="icon">
<img src="@/assets/images/icon/tips.png" alt="" />
</div>
<div class="text">{{ "中国实体数量/实体总数" }}</div>
</div>
</div>
</div>
<div class="box-center">
<div class="box-center-left">
<img src="@/assets/images/icon-hot.png" alt="" />
</div>
<div class="box-center-center">
{{ "美商务部2025年7月14日针对中国企业生产的无人机系统及其零部件、多晶硅及其衍生物发起两项232调查。" }}
</div>
<div class="box-center-right">{{ "更多 >" }}</div>
</div>
<div class="box-main">
<div class="box-main-left">
<div class="box-main-content" id="box3Chart"></div>
<div class="box-main-footer">{{ "232调查数量变化趋势" }}</div>
</div>
<div class="box-main-right">
<div class="box-main-content" id="box4Chart"></div>
<div class="box-main-footer">{{ "232调查涉及企业领域分布" }}</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, computed, onMounted } from "vue";
import setChart from "@/utils/setChart";
import getPieChart from "./utils/piechart";
import getMultiLineChart from "./utils/multiLineChart";
const box1Data = ref({
title: ["2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"],
data: [
{
name: "全部实体",
data: [1104, 468, 602, 635, 486, 622, 811, 967, 952, 1104, 1358, 1196]
},
{
name: "中国实体",
data: [234, 263, 251, 224, 264, 255, 258, 234, 246, 249, 257, 268]
}
]
});
const box2Data = ref([
{
name: "集成电路",
value: 50
},
{
name: "人工智能",
value: 46
},
{
name: "通信网络",
value: 40
},
{
name: "能源",
value: 32
},
{
name: "先进制造",
value: 31
},
{
name: "生物科技",
value: 31
},
{
name: "航空航天",
value: 30
},
{
name: "新材料",
value: 24
}
]);
const box3Data = ref({
title: ["2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"],
data: [
{
name: "全部调查",
data: [856, 456, 568, 631, 667, 631, 532, 589, 631, 668, 672, 630]
},
{
name: "涉华调查",
data: [188, 195, 198, 205, 208, 214, 218, 223, 216, 219, 211, 204]
}
]
});
const box4Data = ref([
{
name: "集成电路",
value: 50
},
{
name: "人工智能",
value: 46
},
{
name: "通信网络",
value: 40
},
{
name: "能源",
value: 32
},
{
name: "先进制造",
value: 31
},
{
name: "生物科技",
value: 31
},
{
name: "航空航天",
value: 30
},
{
name: "新材料",
value: 24
}
]);
onMounted(() => {
const box1Chart = getMultiLineChart(box1Data.value.title, box1Data.value.data[0].data, box1Data.value.data[1].data);
setChart(box1Chart, "box1Chart");
const box2Chart = getPieChart(box2Data.value);
setChart(box2Chart, "box2Chart");
const box3Chart = getMultiLineChart(box3Data.value.title, box3Data.value.data[0].data, box3Data.value.data[1].data);
setChart(box3Chart, "box3Chart");
const box4Chart = getPieChart(box4Data.value);
setChart(box4Chart, "box4Chart");
});
</script>
<style lang="scss" scoped>
.sanction-wrap {
padding-bottom: 5px;
.box {
margin: 16px auto;
width: 1600px;
height: 640px;
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);
position: relative;
&::before {
content: "";
position: absolute;
width: 8px;
height: 122px;
background: var(--color-main-active);
top: 23px;
left: 0;
}
.box-header {
display: flex;
justify-content: space-between;
.box-header-left {
width: 763px;
margin-left: 48px;
.title {
margin-top: 23px;
height: 32px;
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-size: 24px;
font-weight: 700;
line-height: 32px;
text-align: left;
}
.desc {
margin-top: 9px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.info {
margin-top: 10px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
.box-header-right {
margin-right: 59px;
width: 700px;
.box-header-right-top {
margin-top: 26px;
display: flex;
justify-content: flex-end;
gap: 50px;
.item {
.item-top {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
letter-spacing: 0px;
text-align: right;
}
.item-bottom {
height: 42px;
line-height: 42px;
margin-top: 3px;
display: flex;
gap: 4px;
justify-content: flex-end;
.item-bottom-left {
color: rgba(206, 79, 81, 1);
font-family: Microsoft YaHei;
font-size: 32px;
font-weight: 700;
letter-spacing: 0px;
text-align: right;
}
.item-bottom-center {
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
letter-spacing: 0px;
text-align: right;
}
.item-bottom-right {
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-size: 32px;
font-weight: 700;
letter-spacing: 0px;
text-align: right;
}
}
}
}
.box-header-right-bottom {
margin-top: 23px;
height: 24px;
display: flex;
gap: 8px;
justify-content: flex-end;
.icon {
margin-top: 4px;
width: 14px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
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;
}
}
}
}
.box-center {
margin: 20px auto 10px;
width: 1511px;
height: 55px;
box-sizing: border-box;
border: 1px solid rgba(231, 243, 255, 1);
border-radius: 4px;
background: rgba(246, 250, 255, 1);
display: flex;
align-items: center;
padding: 0 16px;
gap: 16px;
.box-center-left {
width: 20px;
height: 18px;
img {
width: 100%;
height: 100%;
}
}
.box-center-center {
width: 1370px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.box-center-right {
width: 49px;
height: 24px;
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: right;
}
}
.box-main {
width: 1511px;
margin: 0 auto;
height: 388px;
display: flex;
justify-content: space-between;
.box-main-left {
width: 700px;
.box-main-content {
height: 340px;
}
.box-main-footer {
width: 700px;
height: 36px;
border-radius: 18px;
margin-top: 5px;
background: rgba(246, 250, 255, 1);
text-align: center;
line-height: 36px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
}
}
.box-main-right {
width: 700px;
.box-main-content {
height: 340px;
}
.box-main-footer {
width: 700px;
height: 36px;
border-radius: 18px;
margin-top: 5px;
background: rgba(246, 250, 255, 1);
text-align: center;
line-height: 36px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
}
}
}
}
}
</style>
\ No newline at end of file
src/views/decree/institution/sanction/utils/multiLineChart.js 0 → 100644
浏览文件 @ df03f9c4
import * as echarts from 'echarts'
const getMultiLineChart = (dataX, dataY1, dataY2) => {
return {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
grid: {
top: '8%',
right: '5%',
bottom: '5%',
left: '5%',
containLabel: true
},
legend: {
show: true,
textStyle: {
color: 'rgba(95, 101, 108, 1)',
fontFamily: 'Microsoft YaHei',
fontSize: '16px',
}
},
color: ['rgba(5, 95, 194, 1)', 'rgba(206, 79, 81, 1)'],
xAxis: [
{
type: 'category',
boundaryGap: false,
data: dataX
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '提出法案',
type: 'line',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(5, 95, 194, 1)' // 起始颜色
}, {
offset: 1,
color: 'rgba(5, 95, 194, 0)' // 结束颜色
}])
},
emphasis: {
focus: 'series'
},
data: dataY1
},
{
name: '通过法案',
type: 'line',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(206, 79, 81, 1)' // 起始颜色
}, {
offset: 1,
color: 'rgba(206, 79, 81, 0.1)' // 结束颜色
}])
},
emphasis: {
focus: 'series'
},
data: dataY2
}
]
}
}
export default getMultiLineChart
\ No newline at end of file
src/views/decree/institution/sanction/utils/piechart.js 0 → 100644
浏览文件 @ df03f9c4
const getPieChart = (data) => {
let option = {
color: ['#69B1FF','#FFC069','#87E8DE','#597EF7','#D6E4FF','#FF7875','#B37FEB','#FFA39E'],
series: [
{
type: 'pie',
radius: [80, 100],
height: '100%',
left: 'center',
width: '95%',
itemStyle: {
borderColor: '#fff',
borderWidth: 1
},
label: {
alignTo: 'edge',
formatter: '{name|{b}} {num|{c} 项 {d}%}\n',
minMargin: 5,
edgeDistance: 10,
// lineHeight: 15,
rich: {
name: {
fontSize: 16,
fontWeight: 700,
fontFamily: 'Microsoft YaHei',
color: 'rgba(59, 65, 75, 1)',
// lineHeight: 24,
// height: 24
},
num: {
fontSize: 14,
color: 'rgba(95, 101, 108, 1)',
fontWeight: 400
}
}
},
labelLine: {
length: 15,
length2: 0,
maxSurfaceAngle: 80
},
labelLayout: function (params) {
const isLeft = params.labelRect.x < 556 / 2;
const points = params.labelLinePoints;
points[2][0] = isLeft
? params.labelRect.x
: params.labelRect.x + params.labelRect.width;
return {
labelLinePoints: points
};
},
data: data
}]
}
return option
}
export default getPieChart;
\ No newline at end of file
src/views/marketAccessRestrictions/marketAccessLayout/deepdig/index.vue deleted 100644 → 0
浏览文件 @ 0f82a1ac
<template>
<div class="wrap">
我是深度挖掘页面！！！！！
</div>
</template>
<script setup>
</script>
<style lang="scss" scoped>
.wrap{
width: 200px;
height: 200px;
background: orange;
color: #000;
}
</style>
\ No newline at end of file
src/views/marketAccessRestrictions/marketAccessLayout/index.vue
浏览文件 @ df03f9c4
......@@ -58,45 +58,20 @@ import Img301 from "./assets/images/301.png";
import { useRoute } from "vue-router";
const route = useRoute();
const btnList = computed(() => {
if (route.query.id === "301") {
return [
{
name: "调查概况",
icon: icon1,
acitveIcon: icon1Active,
path: "/marketAccessLayout/overview"
},
{
name: "深度挖掘",
icon: icon2,
acitveIcon: icon2Active,
path: "/marketAccessLayout/deepdig"
},
{
name: "调查案件",
icon: icon2,
acitveIcon: icon2Active,
path: "/marketAccessLayout/case"
}
];
} else {
return [
{
name: "调查概况",
icon: icon1,
acitveIcon: icon1Active,
path: "/marketAccessLayout/overview"
},
{
name: "调查案件",
icon: icon2,
acitveIcon: icon2Active,
path: "/marketAccessLayout/case"
}
];
const btnList = ref([
{
name: "调查概况",
icon: icon1,
acitveIcon: icon1Active,
path: "/marketAccessLayout/overview"
},
{
name: "调查案件",
icon: icon2,
acitveIcon: icon2Active,
path: "/marketAccessLayout/case"
}
});
]);
const curSurvey = computed(() => {
if (route.query.id === "301") {
......@@ -133,6 +108,8 @@ const handleClickBtn = item => {
};
onMounted(() => {});
</script>
<style lang="scss" scoped>
......
src/views/marketAccessRestrictions/marketAccessLayout/overview/301/index.vue 0 → 100644
浏览文件 @ df03f9c4
<template>
<div class="wrap">
<div class="top">
<div class="box1 box">
<div class="box-header">
<div class="header-left"></div>
<div class="title">对华301调查年度数量趋势</div>
<div class="warning-text">
{{ "3项调查仍在进行中" }}
</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon1.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box1-main" id="box1Chart"></div>
<div class="box-footer">
<div class="box-footer-left">
<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
</div>
<div class="box-footer-center">
{{ "近年来美对华301调查呈现案件频发、聚焦专利壁垒、力图阻断产业链升级的特点。" }}
</div>
<div class="box-footer-right">
<img src="@/assets/icons/box-footer-right-icon.png" alt="" />
</div>
</div>
</div>
<div class="box2 box">
<div class="box-header">
<div class="header-left"></div>
<div class="title">301调查国家分布</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon1.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box2-main" id="box2Chart"></div>
<div class="box-footer">
<div class="box-footer-left">
<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
</div>
<div class="box-footer-center">
{{ "现有调查以先进制造、半导体产业为主。" }}
</div>
<div class="box-footer-right">
<img src="@/assets/icons/box-footer-right-icon.png" alt="" />
</div>
</div>
</div>
</div>
<div class="bottom">
<div class="box3 box">
<div class="box-header">
<div class="header-left"></div>
<div class="title">301调查方向及结果分布</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon1.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box3-main" id="box3Chart"></div>
<div class="box-footer">
<div class="box-footer-left">
<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
</div>
<div class="box-footer-center">
{{ "近年来美对华301调查呈现案件频发、聚焦专利壁垒、力图阻断产业链升级的特点。" }}
</div>
<div class="box-footer-right">
<img src="@/assets/icons/box-footer-right-icon.png" alt="" />
</div>
</div>
</div>
<div class="box4 box">
<div class="box-header">
<div class="header-left"></div>
<div class="title">301调查领域分布</div>
<div class="header-select-box">
<el-select v-model="selectYear" @change="handleSelectYear" placeholder="选择时间" style="width: 120px">
<el-option v-for="item in yearList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon1.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box4-main" id="box4Chart"></div>
<div class="box-footer">
<div class="box-footer-left">
<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
</div>
<div class="box-footer-center">
{{ "主要集中在存储、芯片设计及通信领域，如长江存储、长鑫存储、华为、中兴等" }}
</div>
<div class="box-footer-right">
<img src="@/assets/icons/box-footer-right-icon.png" alt="" />
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import setChart from "@/utils/setChart";
import getLineChart from "./utils/lineChart";
import getBarChart from "./utils/barChart";
import getSankeyChart from "./utils/sankey";
import getPieChart from "./utils/piechart";
import Img1 from "./assets/images/1.png";
import Img2 from "./assets/images/2.png";
import Img3 from "./assets/images/3.png";
import Img4 from "./assets/images/4.png";
import Img5 from "./assets/images/5.png";
import Img6 from "./assets/images/6.png";
import Img7 from "./assets/images/7.png";
import getbarChart from "@/views/bill/utils/barchart";
const selectYear = ref("近五年");
const yearList = ref([
{
label: "近五年",
value: "近五年"
},
{
label: "近三年",
value: "近三年"
},
{
label: "近一年",
value: "近一年"
}
]);
const box1ChartData = ref({
title: ["2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"],
data: [3, 1, 2, 3, 4, 5, 2, 4, 3, 5, 6, 4]
});
const box2ChartData = ref({
title: [
{
img: Img1,
name: "中国"
},
{
img: Img2,
name: "俄罗斯"
},
{
img: Img3,
name: "巴西"
},
{
img: Img4,
name: "巴基斯坦"
},
{
img: Img5,
name: "印度"
},
{
img: Img6,
name: "日本"
},
{
img: Img7,
name: "德国"
}
],
data: [23, 24, 14, 13, 12, 7, 5]
});
const box3ChartData = ref({
nodes: [
{
name: "市场准入"
},
{
name: "知识产权"
},
{
name: "政府采购"
},
{
name: "技术转让"
},
{
name: "其他"
},
{
name: "产业补贴"
},
{
name: "WTO争端"
},
{
name: "协商解决"
},
{
name: "终止调查"
},
{
name: "仍在调查"
},
{
name: "实施解决"
}
],
links: [
{
source: "市场准入",
target: "WTO争端",
value: 100
},
{
source: "市场准入",
target: "协商解决",
value: 15
},
{
source: "市场准入",
target: "终止调查",
value: 12
},
{
source: "市场准入",
target: "仍在调查",
value: 11
},
{
source: "知识产权",
target: "WTO争端",
value: 68
},
{
source: "知识产权",
target: "协商解决",
value: 32
},
{
source: "知识产权",
target: "终止调查",
value: 26
},
{
source: "知识产权",
target: "仍在调查",
value: 24
},
{
source: "知识产权",
target: "实施解决",
value: 22
},
{
source: "政府采购",
target: "WTO争端",
value: 61
},
{
source: "政府采购",
target: "协商解决",
value: 42
},
{
source: "政府采购",
target: "终止调查",
value: 21
},
{
source: "政府采购",
target: "仍在调查",
value: 28
},
{
source: "政府采购",
target: "实施解决",
value: 20
},
{
source: "技术转让",
target: "WTO争端",
value: 55
},
{
source: "技术转让",
target: "协商解决",
value: 41
},
{
source: "技术转让",
target: "终止调查",
value: 12
},
{
source: "技术转让",
target: "仍在调查",
value: 35
},
{
source: "技术转让",
target: "实施解决",
value: 32
},
{
source: "其他",
target: "终止调查",
value: 11
},
{
source: "产业补贴",
target: "协商解决",
value: 22
},
{
source: "产业补贴",
target: "仍在调查",
value: 11
},
{
source: "产业补贴",
target: "实施解决",
value: 15
}
]
});
const box4ChartData = ref([
{
name: "集成电路",
value: 50
},
{
name: "人工智能",
value: 46
},
{
name: "通信网络",
value: 40
},
{
name: "能源",
value: 32
},
{
name: "先进制造",
value: 31
},
{
name: "生物科技",
value: 31
},
{
name: "航空航天",
value: 30
},
{
name: "新材料",
value: 24
}
]);
// 切换年份
const handleSelectYear = val => {
selectYear.value = val;
if (val === "近一年") {
box4ChartData.value = [
{
name: "集成电路",
value: 42
},
{
name: "人工智能",
value: 38
},
{
name: "通信网络",
value: 32
},
{
name: "能源",
value: 28
},
{
name: "先进制造",
value: 29
},
{
name: "生物科技",
value: 22
},
{
name: "航空航天",
value: 26
},
{
name: "新材料",
value: 18
}
];
} else if (val === "近三年") {
box4ChartData.value = [
{
name: "集成电路",
value: 38
},
{
name: "人工智能",
value: 26
},
{
name: "通信网络",
value: 44
},
{
name: "能源",
value: 48
},
{
name: "先进制造",
value: 25
},
{
name: "生物科技",
value: 16
},
{
name: "航空航天",
value: 16
},
{
name: "新材料",
value: 19
}
];
} else {
box4ChartData.value = [
{
name: "集成电路",
value: 50
},
{
name: "人工智能",
value: 46
},
{
name: "通信网络",
value: 40
},
{
name: "能源",
value: 32
},
{
name: "先进制造",
value: 31
},
{
name: "生物科技",
value: 31
},
{
name: "航空航天",
value: 30
},
{
name: "新材料",
value: 24
}
];
}
const box4Chart = getPieChart(box4ChartData.value);
setChart(box4Chart, "box4Chart");
};
onMounted(() => {
const box1Chart = getLineChart(box1ChartData.value.title, box1ChartData.value.data);
setChart(box1Chart, "box1Chart");
const box2Chart = getBarChart(box2ChartData.value.title, box2ChartData.value.data);
setChart(box2Chart, "box2Chart");
const box3Chart = getSankeyChart(box3ChartData.value.nodes, box3ChartData.value.links);
setChart(box3Chart, "box3Chart");
const box4Chart = getPieChart(box4ChartData.value);
setChart(box4Chart, "box4Chart");
});
</script>
<style lang="scss" scoped>
.wrap {
overflow: hidden;
.box {
width: 792px;
height: 410px;
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);
}
.box-header {
height: 46px;
display: flex;
position: relative;
.header-left {
margin-top: 18px;
width: 8px;
height: 16px;
border-radius: 0 4px 4px 0;
background: rgba(10, 87, 166, 1);
}
.title {
margin-left: 22px;
margin-top: 14px;
height: 26px;
line-height: 16px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
}
.warning-text {
position: absolute;
top: 16px;
right: 124px;
height: 24px;
color: rgba(206, 79, 81, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
line-height: 24px;
letter-spacing: 0px;
text-align: center;
}
.header-select-box {
position: absolute;
top: 13px;
right: 121px;
}
.header-right {
position: absolute;
top: 14px;
right: 12px;
display: flex;
justify-content: flex-end;
gap: 4px;
.icon {
width: 28px;
height: 28px;
img {
width: 100%;
height: 100%;
}
}
}
}
.box-footer {
margin: 5px auto;
width: 759px;
height: 40px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 10px;
padding: 6px 12px 6px 12px;
box-sizing: border-box;
border: 1px solid rgba(231, 243, 255, 1);
border-radius: 4px;
background: rgba(246, 250, 255, 1);
.box-footer-left {
width: 19px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
.box-footer-center {
width: 666px;
height: 24px;
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
}
.box-footer-right {
width: 24px;
height: 24px;
img {
width: 100%;
height: 100%;
}
}
}
.top {
display: flex;
justify-content: center;
gap: 16px;
margin: 16px auto;
.box1 {
.box1-main {
height: 304px;
// background: orange;
}
}
.box2 {
.box2-main {
height: 304px;
// background: orange;
}
}
}
.bottom {
display: flex;
justify-content: center;
gap: 16px;
margin: 0 auto;
margin-bottom: 16px;
.box3 {
.box3-main {
height: 304px;
// background: orange;
}
}
.box4 {
.box4-main {
height: 304px;
// background: orange;
}
}
}
}
</style>
\ No newline at end of file
src/views/marketAccessRestrictions/marketAccessLayout/overview/301/utils/barChart.js 0 → 100644
浏览文件 @ df03f9c4
import * as echarts from "echarts";
const getBarChart = (nameList, valueList) => {
const option = {
tooltip: {},
grid: {
top: '5%',
right: '3%',
bottom: '1%',
left: '1%',
containLabel: true
},
yAxis: {
type: 'value',
splitLine: {
show: false
},
show: false
},
xAxis: {
type: 'category',
data: nameList.map(item => {
return item.name
}),
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: true
}
},
series: [{
type: 'bar',
data: valueList,
label: {
show: true,
position: 'top',
textStyle: {
color: 'rgba(5, 95, 194, 1)',
fontSize: 16,
fontWeight: 700,
fontFamily: 'Microsoft YaHei'
},
formatter: function (params) {
return params.value
}
},
barWidth: 20,
markPoint: {
symbol: 'circle',
symbolSize: 0,
data: (function () {
const data = [];
nameList.forEach((item, index) => {
data.push({
name: 'icon',
// value: '',
xAxis: index,
yAxis: valueList[index],
symbol: `image://${item.img}`,
symbolSize: [20, 20],
symbolOffset: [0, 10]
});
});
return data;
})()
},
itemStyle: {
color: function (params) {
return new echarts.graphic.LinearGradient(0, 1, 0, 0,
[{
offset: 0,
color: 'rgba(5, 95, 194, 0)'
},
{
offset: 1,
color: 'rgba(5, 95, 194, 1)'
}
]);
},
barBorderRadius: [10, 10, 4, 4],
}
}]
}
return option
}
export default getBarChart
\ No newline at end of file
src/views/marketAccessRestrictions/marketAccessLayout/overview/301/utils/lineChart.js 0 → 100644
浏览文件 @ df03f9c4
import * as echarts from 'echarts'
const getLineChart = (dataX, dataY) => {
return {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
grid: {
top: '8%',
right: '5%',
bottom: '5%',
left: '5%',
containLabel: true
},
legend: {
data: ['提出法案', '通过法案'],
show: false
},
color: ['#1459bb', '#fa8c16'],
xAxis: [
{
type: 'category',
boundaryGap: false,
data: dataX
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '301调查',
type: 'line',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(22, 119, 255, 0.5)' // 起始颜色
}, {
offset: 1,
color: 'rgba(5, 95, 194, 0)' // 结束颜色
}])
},
lineStyle: {
color: '#055FC2',
width: 1
},
emphasis: {
focus: 'series'
},
data: dataY
},
]
}
}
export default getLineChart
\ No newline at end of file
src/views/marketAccessRestrictions/marketAccessLayout/overview/301/utils/piechart.js 0 → 100644
浏览文件 @ df03f9c4
const getPieChart = (data) => {
let option = {
color: ['#69B1FF','#FFC069','#87E8DE','#597EF7','#D6E4FF','#FF7875','#B37FEB','#FFA39E'],
series: [
{
type: 'pie',
radius: [95, 115],
height: '100%',
left: 'center',
width: '85%',
itemStyle: {
borderColor: '#fff',
borderWidth: 1
},
label: {
alignTo: 'edge',
formatter: '{name|{b}} {num|{c} 项 {d}%}\n',
minMargin: 5,
edgeDistance: 10,
// lineHeight: 15,
rich: {
name: {
fontSize: 16,
fontWeight: 700,
fontFamily: 'Microsoft YaHei',
color: 'rgba(59, 65, 75, 1)',
// lineHeight: 24,
// height: 24
},
num: {
fontSize: 14,
color: 'rgba(95, 101, 108, 1)',
fontWeight: 400
}
}
},
labelLine: {
length: 15,
length2: 0,
maxSurfaceAngle: 80
},
labelLayout: function (params) {
const isLeft = params.labelRect.x < 556 / 2;
const points = params.labelLinePoints;
points[2][0] = isLeft
? params.labelRect.x
: params.labelRect.x + params.labelRect.width;
return {
labelLinePoints: points
};
},
data: data
}]
}
return option
}
export default getPieChart;
\ No newline at end of file
src/views/marketAccessRestrictions/marketAccessLayout/overview/301/utils/sankey.js 0 → 100644
浏览文件 @ df03f9c4
const getSankeyChart = (nodes, links) => {
const option = {
series: {
type: 'sankey',
layout: 'none',
left: '5%',
right: '12%',
top: '5%',
bottom: '5%',
emphasis: {
focus: 'adjacency'
},
nodeWidth: 30,
label: {
show: true,
formatter: function (params) {
return `${params.name}`;
},
position: 'right',
textStyle: {
fontSize: '14px',
color: '#555'
}
},
data: nodes,
links: links
}
};
return option
}
export default getSankeyChart
\ No newline at end of file
src/views/marketAccessRestrictions/marketAccessLayout/overview/index.vue
浏览文件 @ df03f9c4
......@@ -2,6 +2,7 @@
<div class="overview-wrap">
<Discussion1 v-if="showDiscussion ==='337'"></Discussion1>
<Discussion2 v-else-if="showDiscussion ==='232'"></Discussion2>
<Discussion3 v-else></Discussion3>
</div>
</template>
......@@ -9,6 +10,7 @@
import { ref, onMounted, computed } from "vue";
import Discussion1 from './337/index.vue'
import Discussion2 from './232/index.vue'
import Discussion3 from './301/index.vue'
import { useRoute } from "vue-router";
const route = useRoute()
......
src/views/marketAccessRestrictions/singleCaseLayout/index.vue
浏览文件 @ df03f9c4
......@@ -5,7 +5,7 @@
<div class="header-top-left">{{ curSurvey.name }}</div>
<div class="header-top-right">
<div class="title">
{{curSurvey.title }}
{{ curSurvey.title }}
</div>
<div class="time">{{ curSurvey.time }}</div>
</div>
......@@ -51,7 +51,7 @@
</template>
<script setup>
import { ref, onMounted } from "vue";
import { ref, onMounted, computed } from "vue";
import router from "@/router";
import NavIcon1 from "./assets/images/nav-icon1.png";
import NavIcon1Active from "./assets/images/nav-icon1-active.png";
......@@ -76,7 +76,7 @@ const navList = ref([
activeIcon: NavIcon2Active,
isActive: false,
path: "/marketSingleCaseLayout/deepdig"
},
}
// {
// name: "影响分析",
// icon: NavIcon3,
......@@ -102,29 +102,40 @@ const handleClickNav = index => {
const surveyList = ref([
{
title: "337-TA-1443：外国制造的半导体器件及其下游产品和组件",
time: '2025年7月18日',
name: '337'
time: "2025年7月18日",
name: "337"
},
{
{
title: "231-TA-1225：进口药及进口原材料的调查",
time: '2021年9月21日',
name: '232'
time: "2021年9月21日",
name: "232"
},
{
title: "美国贸易代表第301条关于中国针对海事、物流和造船业以争取主导地位的行动",
time: "2025年4月17日",
name: "301"
}
]);
const curSurvey = ref( {
title: "337-TA-1443：外国制造的半导体器件及其下游产品和组件",
time: '2025年7月18日',
name: '337'
});
// const curSurvey = ref( {
// title: "337-TA-1443：外国制造的半导体器件及其下游产品和组件",
// time: '2025年7月18日',
// name: '337'
// });
onMounted(() => {
const curSurvey = computed(() => {
let survey;
if (route.query.id === "232") {
curSurvey.value = surveyList.value[1];
survey = surveyList.value[1];
} else if (route.query.id === "301") {
survey = surveyList.value[2];
} else {
survey = surveyList.value[0];
}
return survey;
});
onMounted(() => {});
</script>
<style lang="scss" scoped>
......
src/views/marketAccessRestrictions/singleCaseLayout/overview/301/index.vue 0 → 100644
浏览文件 @ df03f9c4
<template>
<div class="wrapper">
<div class="left">
<div class="box1">
<div class="box-header">
<div class="header-left"></div>
<div class="title">基本信息</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon1.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box1-main">
<div class="box1-item">
<div class="box1-item-left">{{ "启动时间：" }}</div>
<div class="box1-item-right">{{ "2025年4月17日" }}</div>
</div>
<div class="box1-item">
<div class="box1-item-left">{{ "调查对象：" }}</div>
<div class="box1-item-right">
{{ "中国" }}
</div>
</div>
<div class="box1-item">
<div class="box1-item-left">{{ "调查机构：" }}</div>
<div class="box1-item-right1">
<div class="icon">
<img src="./assets/images/icon1.png" alt="" />
</div>
<div class="text">{{ "美国贸易代表办公室 >" }}</div>
</div>
</div>
<div class="box1-item">
<div class="box1-item-left">{{ "调查领域：" }}</div>
<div class="box1-item-right2">
<div
class="tag"
:class="{ tag1: tag.type === 1, tag2: tag.type === 2 }"
v-for="(tag, index) in surveyAreaList"
:key="index"
>
{{ tag.name }}
</div>
</div>
</div>
<div class="box1-item">
<div class="box1-item-left">{{ "调查状态：" }}</div>
<div class="box1-item-right">
{{ "启动调查、举行听证会及征询意见的通知 " }}
</div>
</div>
<div class="box1-item">
<div class="box1-item-left">{{ "请愿方：" }}</div>
<div class="box1-item-right">
{{
"联合钢铁、造纸与林业、橡胶、制造业、能源、相关工业与服务工人国际工会、AFL-CIO 联盟（“USW”）/ 国际机械师与航空航天工人协会（“IAM”）/ 国际锅炉工、铁船建造者、铁匠、锻造工及助手兄弟会，AFL-CIO/CLC（“IBB”）/ 国际电气工人兄弟会（“IBEW”）/ 海事贸易部，AFL-CIO（“MTD”）"
}}
</div>
</div>
<div class="box1-item">
<div class="box1-item-left">{{ "依托政令：" }}</div>
<div class="box1-item-right3">
{{ "2025年2月4日总统政令《确保美国海事及造船业在世界保持主导地位》 >" }}
</div>
</div>
<div class="box1-item">
<div class="box1-item-left">{{ "调查进展：" }}</div>
<div class="box1-item-right4">
<el-timeline style="max-width: 346px">
<el-timeline-item
v-for="(activity, index) in activities"
:key="index"
:type="activity.type"
:color="activity.color"
:size="activity.size"
:hollow="activity.hollow"
:timestamp="activity.timestamp"
>
<template #dot>
<div class="custom-dot">
<img src="./assets/images/dot-icon.png" width="10" height="10" />
</div>
</template>
{{ activity.content }}
</el-timeline-item>
</el-timeline>
</div>
</div>
</div>
</div>
</div>
<div class="right">
<div class="box2">
<div class="box-header">
<div class="header-left"></div>
<div class="title">调查脉络</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon1.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box2-main">
<div class="box2-main-item" v-for="(item, index) in box2List" :key="index">
<div class="box2-main-item-header">
<div class="icon">
<img src="./assets/images/dot-icon.png" alt="" />
</div>
<div class="time">{{ item.time }}</div>
<div class="title">{{ item.title }}</div>
<div class="warning" v-if="item.warning">
{{ item.warning }}
</div>
<div class="open">
<img src="./assets/images/open.png" alt="" />
</div>
</div>
<div class="box2-main-item-content">
<div class="box2-main-item-content-item" v-for="(val, idx) in item.data" :key="idx">
<div class="inner-header">{{ val.title + ":" }}</div>
<div class="inner-content" v-if="val.content">{{ val.content }}</div>
<div class="inner-list" v-if="val.dataList">
<div class="inner-list-item" v-for="(vall, idxx) in val.dataList" :key="idxx">
{{ idxx + 1 + "." }} <span style="font-weight: 700">{{ vall.content1 }}</span
>{{ vall.content2 }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="box3">
<div class="box-header">
<div class="header-left"></div>
<div class="title">相关事件</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box3-main">
<div class="box3-main-item" v-for="(item, index) in relatedEvents" :key="index">
<div class="item-left">
<img :src="item.img" alt="" />
</div>
<div class="item-right">
<div class="item-right-header">
<div class="item-right-title">{{ item.title }}</div>
<div class="item-right-tag" :class="{ tag1: item.tag.type === 1, tag2: item.tag.type === 2 }">
{{ item.tag.name }}
</div>
</div>
<div class="item-right-time">{{ item.time }}</div>
<div class="item-right-content">{{ item.content }}</div>
</div>
</div>
</div>
</div>
</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";
import Img4 from "./assets/images/img4.png";
const surveyAreaList = ref([
{
name: "先进制造",
type: 1
},
{
name: "海洋",
type: 2
}
]);
const activities = ref([
{
content: "递交请愿书",
timestamp: "2025-02-18",
size: "large",
type: "primary"
},
{
content: "启动调查",
timestamp: "2025-03-21",
size: "large",
type: "primary"
},
{
content: "调查报告递交",
timestamp: "2025-08-14",
size: "large",
type: "primary"
},
{
content: "根据第301条作出的决定通知：中国针对海事、物流和造船业谋求主导地位",
timestamp: "2025-08-15",
size: "large",
type: "primary"
},
{
content: "关于中国针对海事、物流和造船业谋求主导地位的第301条调查的拟议行动",
timestamp: "2025-09-08",
size: "large",
type: "primary"
}
]);
const box2List = ref([
{
title: "递交请愿书",
time: "2025-02-18",
data: [
{
title: "节点概况",
content:
"2024年3月12日，请愿方提交了一份关于中国为主导海事、物流和造船领域而采取的行动、政策和实践的301条款请愿书。该请愿书是根据经修订的《1974年贸易法》（《贸易法》）（19 U.S.C. 2412(a)）第302(a)条提交的，要求根据《贸易法》第301(b)条（19 U.S.C. 2411(b)）采取行动。"
}
]
},
{
title: "启动调查",
time: "2025-03-21",
data: [
{
title: "节点概况",
content:
"根据《贸易法》第302(a)(2)条，美国贸易代表审查了请愿书中的指控，并在收到301委员会的建议后，决定就请愿书中提出的问题启动调查。根据《贸易法》第303(a)条，USTR请求与中国政府进行磋商。请愿者要求举行公开听证会。根据第302(a)(4)条，并经请愿者同意，301委员会将于2024年5月29日就此事举行公开听证会。 U.S.C. 2412(a)）第302(a)条提交的，要求根据《贸易法》第301(b)条（19 U.S.C. 2411(b)）采取行动。"
}
]
},
{
title: "调查报告递交",
time: "2025-08-14"
},
{
title: "根据第301条作出的决定通知：中国针对海事、物流和造船业谋求主导地位",
time: "2025-08-15",
warning: "决定通知",
data: [
{
title: "节点概况",
content:
"美国贸易代表已裁定，中国针对海事、物流和造船业谋求主导地位的行为根据第301条是可诉的。 U.S.C. 2412(a)）第302(a)条提交的，要求根据《贸易法》第301(b)条（19 U.S.C. 2411(b)）采取行动。"
},
{
title: "行动裁定",
content:
"中国针对海事、物流和造船业谋求主导地位是不合理的，并且加重或限制了美国商业，因此根据《贸易法》第301(b)条是可采取行动的。 U.S.C. 2412(a)）第302(a)条提交的，要求根据《贸易法》第301(b)条（19 U.S.C. 2411(b)）采取行动。"
}
]
},
{
title: "关于中国针对海事、物流和造船业谋求主导地位的第301条调查的拟议行动",
time: "2025-09-08",
warning: "征求评论意见和公共听证会通知",
data: [
{
title: "节点概况",
content:
"USTR就针对中国主导海事、物流和造船业的第301条调查可能采取的贸易行动征求书面评论。USTR还将就此拟议行动召开公共听证会并接受反驳评论。 U.S.C. 2412(a)）第302(a)条提交的，要求根据《贸易法》第301(b)条（19 U.S.C. 2411(b)）采取行动。"
},
{
title: "拟议行动",
dataList: [
{
content1: "对中国海运运营商的服务费。",
content2:
"向中国船舶运营商收取其提供的国际海运服务费，费率可达 (a) 该运营商任何船舶每次进入美国港口最高1,000,000美元；或 (b) 按该船舶净吨位容量，每次进入美国港口最高每净吨1,000美元。(b)条是可采取行动的。 U.S.C. 2412(a)）第302(a)条提交的，要求根据《贸易法》第301(b)条（19 U.S.C. 2411(b)）采取行动。"
},
{
content1: "对中国建造的船舶分阶段收费。",
content2:
"此费用取以下两者中的较高者：(i) 基于船舶净吨位的费用，或 (ii) 基于每个集装箱的费用。如果一艘船在前往外国目的地之前进行多次美国入境，此费用将按每个轮班或美国港口航线的串次收取。费用在前180天设定为0美元，并在接下来的三年内逐步增加，如附录二所述。某些中国建造的船舶免于缴纳此费用，包括：注册在某些美国海事管理局计划（例如海事安全计划和油轮安全计划）中的特定船舶；空船或压载船舶；低于特定尺寸或载重阈值的船舶；从事近海航运的船舶（即从某些美国港口出发航程少于2000海里的航次）；某些美国公司拥有的船舶；以及某些专用出口船舶。如果船舶运营商订购并接收同等尺寸的美国建造船舶，其有资格获得最长三年的费用减免。"
},
{
content1: "对外国车辆运输船船舶运营商分阶段收费。",
content2:
"此费用根据附录 III 规定的车辆同等单位（CEU）容量，对任何外国建造的车辆运输船征收。费用在前 180 天设定为 0 美元，此后将按进入的非美国建造船舶的每 CEU 容量设定为 150 美元。如果运营商在此期间订购并交付同等或更大容量的美国建造船舶，可获得最长三年的费用减免。如果船舶运营商订购并交付至少同等规模的美国建造船舶，将有资格获得三年的费用减免。"
},
{
content1: "对某些海上运输的限制。",
content2:
"三年后，根据附件 IV 的规定，美国贸易代表署将实施一项限制，要求在海运运输一定比例的液化天然气出口时使用美国船只。"
}
]
}
]
}
]);
const relatedEvents = ref([
{
img: Img1,
title: "美国商务部工业与安全局发布实体清单，涉及多家中国半导体企业",
time: "2025年9月12日",
content:
"23家中国实体，包括复旦微电旗下多家公司、华岭股份等，指控这些实体“违背美国国家安全或外交政策利益”，包括为中国的...",
tag: {
name: "行政令",
type: 2
}
},
{
img: Img2,
title: "美国白宫发布总统政令，提出将发展美国人工智能产业硬件支持放在新任期的科技首要地位",
time: "2025年9月11日",
content:
"9个中国实体​（8家企业和1名个人），例如湖北奇卡工业有限公司、广州雅凯国际货运代理有限公司等，指控这些实体为也门胡塞...",
tag: {
name: "行政令",
type: 2
}
},
{
img: Img3,
title: "美国财政部外国资产控制办公室指控中国企业及船只",
time: "2025年3月13日",
content:
"​4家中国企业和3艘关联船只​（如香港和顺运贸有限公司、华夏贸易有限公司等）,指控这些公司拥有或运营向中国运送伊朗石油或...",
tag: {
name: "行政令",
type: 2
}
},
{
img: Img4,
title: "美国国会通过《芯片科学》法案",
time: "2025年1月3日",
content:
"​多家中国实体，包括成都雷电微力科技股份有限公司、中国科学院长春光学精密机械与物理研究所等，指控这些实体与中国高超音...",
tag: {
name: "法案",
type: 1
}
}
]);
</script>
<style lang="scss" scoped>
.wrapper {
width: 100%;
// height: 1191px;
padding: 0 160px;
display: flex;
.box-header {
height: 56px;
display: flex;
position: relative;
.header-left {
margin-top: 20px;
width: 8px;
height: 16px;
border-radius: 0 4px 4px 0;
background: rgba(10, 87, 166, 1);
}
.title {
margin-left: 14px;
margin-top: 16px;
height: 24px;
line-height: 24px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
}
.header-btn-box {
position: absolute;
top: 14px;
right: 52px;
display: flex;
.btn {
margin-left: 8px;
height: 28px;
padding: 0 8px;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
text-align: center;
line-height: 28px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
cursor: pointer;
}
.btnActive {
border: 1px solid rgba(10, 87, 166, 1);
background: rgba(246, 250, 255, 1);
color: rgba(10, 87, 166, 1);
}
}
.header-info {
height: 22px;
position: absolute;
right: 84px;
top: 17px;
display: flex;
justify-content: flex-end;
.icon {
margin-top: 3px;
width: 14px;
height: 14px;
margin-right: 8px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 22px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
}
}
.header-right {
position: absolute;
top: 14px;
right: 12px;
display: flex;
justify-content: flex-end;
gap: 4px;
.icon {
width: 28px;
height: 28px;
img {
width: 100%;
height: 100%;
}
}
}
}
.left {
width: 520px;
.box1 {
margin-top: 16px;
width: 520px;
// height: 837px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box1-main {
margin-top: 6px;
margin-left: 22px;
.box1-item {
display: flex;
margin-bottom: 16px;
.box1-item-left {
width: 100px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
margin-top: 3px;
margin-bottom: 3px;
}
.box1-item-right {
width: 346px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.box1-item-right1 {
display: flex;
gap: 6px;
align-items: center;
.icon {
width: 20px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 24px;
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
}
}
.box1-item-right2 {
margin-top: 2px;
height: 24px;
display: flex;
gap: 8px;
.tag {
height: 24px;
padding: 0 8px;
box-sizing: border-box;
border-radius: 4px;
text-align: center;
line-height: 24px;
}
.tag1 {
color: rgba(19, 168, 168, 1);
border: 1px solid rgba(135, 232, 222, 1);
background: rgba(230, 255, 251, 1);
}
.tag2 {
color: rgba(22, 119, 255, 1);
border: 1px solid rgba(145, 202, 255, 1);
background: rgba(230, 244, 255, 1);
}
}
.box1-item-right3 {
width: 346px;
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
}
.box1-item-right4 {
width: 346px;
}
}
}
}
}
.right {
width: 1064px;
margin-left: 16px;
.box2 {
margin-top: 16px;
width: 1064px;
// height: 410px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box2-main {
width: 1024px;
margin: 10px 20px;
.box2-main-item {
.box2-main-item-header {
// height: 51px;
padding: 10px 24px;
box-sizing: border-box;
border-bottom: 1px solid rgba(234, 236, 238, 1);
background: rgba(247, 248, 249, 1);
display: flex;
gap: 16px;
position: relative;
.icon {
margin-top: 8px;
width: 10px;
height: 10px;
img {
width: 100%;
height: 100%;
}
}
.time {
margin-top: 4px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
}
.title {
width: 535px;
margin-top: 4px;
// height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
}
.warning {
position: absolute;
height: 28px;
border-radius: 20px;
background: rgba(206, 79, 81, 0.1);
line-height: 28px;
top: 12px;
right: 56px;
color: rgba(206, 79, 81, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
letter-spacing: 0px;
text-align: justify;
padding: 0 8px;
}
.open {
position: absolute;
right: 24px;
top: 10px;
width: 16px;
height: 31px;
img {
width: 100%;
height: 100%;
}
}
}
.box2-main-item-content {
.box2-main-item-content-item {
.inner-header {
height: 54px;
box-sizing: border-box;
border-bottom: 1px solid rgba(234, 236, 238, 1);
padding: 12px 24px 12px 51px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 30px;
letter-spacing: 0px;
text-align: justify;
}
.inner-content {
padding: 12px 24px 12px 51px;
box-sizing: border-box;
border-bottom: 1px solid rgba(234, 236, 238, 1);
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: justify;
}
.inner-list {
.inner-list-item {
padding: 12px 24px 12px 50px;
box-sizing: border-box;
border-bottom: 1px solid rgba(234, 236, 238, 1);
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: justify;
}
}
}
}
}
}
}
.box3 {
margin-top: 16px;
margin-bottom: 35px;
width: 1064px;
// height: 714px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
padding-bottom: 18px;
.box3-main {
width: 1014px;
margin: 10px auto;
.box3-main-item {
width: 1014px;
padding: 11px 0;
display: flex;
border-bottom: 1px solid rgba(234, 236, 238, 1);
.item-left {
width: 24px;
height: 24px;
margin-left: 26px;
img {
width: 100%;
height: 100%;
}
}
.item-right {
margin-left: 15px;
.item-right-header {
width: 928px;
display: flex;
justify-content: space-between;
.item-right-title {
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
.item-right-tag {
height: 28px;
padding: 0px 8px;
border-radius: 20px;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
.tag1 {
color: var(--color-main-active);
background: rgba(231, 243, 255, 1);
}
.tag2 {
background: rgba(232, 189, 11, 0.1);
color: rgba(232, 189, 11, 1);
}
}
.item-right-time {
margin-top: 4px;
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-content {
width: 928px;
height: 30px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: justify;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
}
}
}
:deep(.el-timeline-item) {
padding-bottom: 8px;
}
:deep(.el-timeline) {
padding-left: 2px;
}
</style>
\ No newline at end of file
src/views/marketAccessRestrictions/singleCaseLayout/overview/index.vue
浏览文件 @ df03f9c4
......@@ -2,6 +2,7 @@
<div class="overview-wrap">
<Discussion1 v-if="showSurvey ==='337'"></Discussion1>
<Discussion2 v-else-if="showSurvey ==='232'"></Discussion2>
<Discussion3 v-else-if="showSurvey ==='301'"></Discussion3>
</div>
</template>
......@@ -9,6 +10,7 @@
import { ref, onMounted, computed } from "vue";
import Discussion1 from './337/index.vue'
import Discussion2 from './232/index.vue'
import Discussion3 from './301/index.vue'
import { useRoute } from "vue-router";
const route = useRoute()
......
vite.config.js
浏览文件 @ df03f9c4
......@@ -42,7 +42,8 @@ export default defineConfig({
},
'/sseChat': {
// target: 'http://192.168.26.115:8000',
target: 'http://8.140.26.4:10018/',
// target: 'http://8.140.26.4:10018/',
target: 'http://8.140.26.4:10019/',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/sseChat/, '')
},
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论