Skip to content

R
risk-monitor
提交 aa92a509 authored 作者: 张烨's avatar 张烨
浏览文件
操作

feat:完善科技政令详情-政令举措页面布局

上级 6437719c
隐藏空白字符变更
内嵌 并排
正在显示 包含 300 行增加 和 256 行删除
src/views/decree/decreeHome/index.vue
浏览文件 @ aa92a509
......@@ -1009,13 +1009,6 @@ const handleToPosi = id => {
}
};
const areaList = ref([
// { id: "人工智能", name: "人工智能" },
// { id: "集成电路", name: "集成电路" },
// { id: "通信网络", name: "通信网络" },
// { id: "量子科技", name: "量子科技" }
]);
const activeAreaList = ref(["1"]);
// const handleGetAreaList = async () => {
// try {
// const res = await getDecreehylyList();
......@@ -1108,6 +1101,13 @@ const handleAreaChange = (id, checked) => {
}
};
const areaList = ref([
// { id: "人工智能", name: "人工智能" },
// { id: "集成电路", name: "集成电路" },
// { id: "通信网络", name: "通信网络" },
// { id: "量子科技", name: "量子科技" }
]);
const activeAreaList = ref(["1"]);
// 修改获取科技领域列表，添加全选选项
const handleGetAreaList = async () => {
try {
......@@ -3365,8 +3365,8 @@ onMounted(async () => {
text-align: center;
padding: 0 8px;
border-radius: 4px;
background: var(--btn-active-bg-color);
color: var(--btn-active-text-color);
background: rgba(231, 243, 255, 1);
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
......
src/views/decree/decreeLayout/overview/measures/index.vue
浏览文件 @ aa92a509
<template>
<div class="introduction-wrap">
<div class="left">
<div class="box1">
<AnalysisBox title="主要指令" :showAllBtn="false">
<div class="analysis-box">
<div class="analysis-top">
<el-select v-model="areaType" :empty-values="[null, undefined]" style="width: 200px;">
<el-option label="全部领域" value="" />
<el-option v-for="item in areaList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
<div style="flex: auto; width: 20px;"></div>
<el-switch v-model="highlightEntities" />
<div style="margin-left: 6px;">高亮实体</div>
<div class="select-input">
<el-input v-model="commandWord" @keyup.enter="handleSearch" style="width: 100%; height: 100%;" :suffix-icon="Search" placeholder="指令搜索" />
</div>
</div>
<div class="analysis-content">
<el-scrollbar height="100%" always>
<!-- 遍历文档章节 -->
<div v-for="(section, index) in majorList" :key="index" class="section">
<div class="section-header">
<div class="section-title">({{ simpleNumToChinese(index+1) }}) {{ section.title }}</div>
<div class="section-icon">
<img src="./assets/images/open-icon.png" alt="" />
</div>
</div>
<!-- 渲染一级列表 -->
<div class="numbered-list">
<div v-for="(item, itemIndex) in section.content" :key="itemIndex" class="list-item">
<div class="list-item-dot">{{itemIndex+1}}.</div>
<div class="list-item-word">{{ item.text }}</div>
<!-- 渲染二级列表 -->
<div v-if="item.children" class="sub-list">
<div v-for="(subItem, subIndex) in item.children" :key="subIndex" class="sub-item">
<div class="sub-item-dot">({{subIndex+1}})</div>
<div class="sub-item-word">{{ subItem.text }}</div>
<!-- 渲染三级列表 -->
<div v-if="subItem.children" class="sub-sub-list">
<div v-for="(subSubItem, subSubIndex) in subItem.children" :key="subSubIndex" class="sub-sub-item">
<div class="sub-sub-item-dot">{{ALPHABET[subSubIndex%26]}}.</div>
<div class="sub-sub-item-word">{{ subSubItem.text }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</el-scrollbar>
</div>
</div>
</AnalysisBox>
</div>
</div>
<div class="right">
<div class="box3">
......@@ -61,11 +113,9 @@
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import router from "@/router";
import {
getDecreeBasicInfo,
getDecreeIssueOrganization
} from "@/api/decree/introduction";
import { getDecreeRelatedEvent } from "@/api/decree/background";
import { Search } from '@element-plus/icons-vue'
import { getDecreeIssueOrganization } from "@/api/decree/introduction";
import { getDecreehylyList } from "@/api/decree/home";
import DefaultIcon1 from "@/assets/icons/default-icon1.png";
import DefaultIcon2 from "@/assets/icons/default-icon2.png";
......@@ -74,52 +124,127 @@ import defaultCom from "@/views/coopRestriction/assets/images/default-icon2.png"
const route = useRoute();
const decreeId = ref(route.query.id);
// 基本信息
const basicInfo = ref({
img: "",
name: "",
eName: "",
areaList: [],
signTime: "",
signPeople: "",
bh: "",
deadline: ""
});
// 指令搜索
const commandWord = ref("");
const handleSearch = () => {
const handleGetBasicInfo = async () => {
const params = {
id: decreeId.value
};
};
// 科技领域
const areaType = ref("");
const areaList = ref([]);
const handleGetAreaList = async () => {
try {
const res = await getDecreeBasicInfo(params);
console.log("基本信息", res);
const res = await getDecreehylyList();
console.log("行业领域列表", res);
if (res.code === 200 && res.data) {
basicInfo.value.img = res.data.picture;
basicInfo.value.name = res.data.name;
basicInfo.value.eName = res.data.ename;
basicInfo.value.areaList = res.data.industryList;
basicInfo.value.signTime = res.data.postDate;
basicInfo.value.bh = res.data.order;
basicInfo.value.deadline = res.data.deadline;
basicInfo.value.proposeOrgName = res.data.proposeOrgName;
areaList.value = res.data;
}
} catch (error) {
console.error("基本信息error", error);
}
} catch (error) { }
};
handleGetBasicInfo();
// 合作限制-查询相关实体
const coopRelatedData = ref([
{ id: "1", img: "", ENTITYNAME: "ENTITYNAME", type: "type" },
{ id: "2", img: "", ENTITYNAME: "ENTITYNAME", type: "type" },
{ id: "3", img: "", ENTITYNAME: "ENTITYNAME", type: "type" },
{ id: "4", img: "", ENTITYNAME: "ENTITYNAME", type: "type" },
{ id: "5", img: "", ENTITYNAME: "ENTITYNAME", type: "type" },
{ id: "6", img: "", ENTITYNAME: "ENTITYNAME", type: "type" },
{ id: "7", img: "", ENTITYNAME: "ENTITYNAME", type: "type" },
{ id: "8", img: "", ENTITYNAME: "ENTITYNAME", type: "type" },
// 主要指令
const highlightEntities = ref(false);
const majorList = ref([
{
title: "建立美国人工智能出口计划",
content: [
{
text: '在本命令发布之日起 90 天内，商务部长应与国务卿及科学技术政策办公室（OSTP）主任协商，建立并实施美国人工智能出口计划（计划），以支持美国全栈人工智能出口软件包的开发和部署。'
},
{
text: '商务部长应公开征集由行业主导的联盟提案，以纳入该计划。公开征集要求每项提案必须：',
children: [
{
text: '包含一套全栈人工智能技术包，涵盖：',
children: [
{
text: 'AI 优化的计算机硬件（如芯片、服务器和加速器）、数据中心存储、云服务和网络，以及这些设备是否以及在多大程度上在美国制造的描述；'
},
{
text: '数据管道和标签系统；'
},
{
text: '人工智能模型与系统；'
},
{
text: '采取措施保障人工智能模型和系统的安全性和网络安全；'
},
{
text: '针对特定用例的人工智能应用（如软件工程、教育、医疗保健、农业或交通运输）；'
}
]
},
{
text: '确定出口参与者的具体目标国家或区域集团；'
},
{
text: '描述一个业务和运营模型，以在高层次上说明哪些实体将建设、拥有和运营数据中心及相关基础设施；'
},
{
text: '联邦激励和支持机制请求的细节；'
},
{
text: '遵守所有相关的美国出口管制制度、出境投资法规和终端用户政策，包括美国法典第 50 编第 58 章及商务部工业与安全局的相关指导。'
}
]
},
{
text: '商务部要求提案须在公开征集后不超过 90 天内提交，并应滚动考虑提案纳入项目。'
},
{
text: '商务部长应与国务卿、国防部长、能源部长及 OSTP 主任协商，评估提交的纳入计划提案。商务部长与国务卿、国防部长、能源部长及 OSTP 主任协商后选定的提案，将被指定为优先 AI 出口包，并通过优先访问本命令第 4 节指定的工具予以支持，符合适用法律。'
}
]
},
{
title: "动员联邦融资工具",
content: [
{
text: '经济外交行动小组（EDAG），于 2024 年 6 月 21 日总统备忘录中成立，由国务卿主持，并与商务部长和美国贸易代表协商，并根据 2019 年《通过外交倡导美国企业法案》（公共法 116-94 J 部分第七章）第 708 条（CABDA）所述，应协调联邦融资工具的动员，以支持优先的人工智能出口方案。'
},
{
text: '我将根据 CABDA α 第 708 (c) (3) 条授权小企业管理局局长和 OSTP 主任任命各自执行部门和机构的高级官员担任 EDAG 。'
}
]
}
]);
const ALPHABET = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];
/**
* 极简版数字转中文（支持 0-99 整数）
* @param {Number} num - 要转换的数字（0-99 之间的整数）
* @returns {String} 中文大写结果
*/
const simpleNumToChinese = (num) => {
// 1. 基础校验：只处理 0-99 的整数
if (!Number.isInteger(num) || num < 0 || num > 99) {
return '仅支持 0-99 之间的整数';
}
// 2. 定义基础字符
const singleChars = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
const tenChar = '十';
// 3. 核心转换逻辑
if (num < 10) {
// 0-9 直接返回对应字符
return singleChars[num];
} else if (num === 10) {
// 10 特殊处理
return tenChar;
} else if (num < 20) {
// 11-19：十 + 个位（如十一、十九）
return tenChar + singleChars[num - 10];
} else {
// 20-99：十位 + 十 + 个位（个位为0则省略，如二十、二十九）
const ten = Math.floor(num / 10); // 十位数字
const unit = num % 10; // 个位数字
return singleChars[ten] + tenChar + (unit === 0 ? '' : singleChars[unit]);
}
}
// 相关实体
const coopRelatedData = ref(
Array.from({ length: 8 }, (_, index) => ({ id: String(index + 1), img: "", ENTITYNAME: "ENTITYNAME", type: "type" }))
);
// const getcoopRelatedData = async () => {
// if (!route.query.id) return;
// try {
......@@ -134,30 +259,6 @@ const coopRelatedData = ref([
// }
// };
// 相关事件
const relatedEvents = ref([]);
const handleGetRelateEvents = async () => {
const params = {
id: decreeId.value
};
try {
const res = await getDecreeRelatedEvent(params);
console.log("相关事件", res);
if (res.code === 200 && res.data) {
relatedEvents.value = res.data.map(item => {
return {
image: item.imageUrl,
title: item.sjbt,
content: item.sjnr,
time: item.sjsj
};
});
} else {
relatedEvents.value = [];
}
} catch (error) { }
};
// 发布机构
const box3TopTopData = ref({
id: "",
......@@ -165,10 +266,7 @@ const box3TopTopData = ref({
name: "",
eName: ""
});
const box3TopBottomData = ref([]);
// 跳转行政机构主页
const handleToInstitution = item => {
const curRoute = router.resolve({
......@@ -180,22 +278,6 @@ const handleToInstitution = item => {
window.open(curRoute.href, "_blank");
};
// 机构动态
const eventList = ref([
// {
// time: "2025-07-31",
// title: "美商务部发布指南，警告全球企业使用华为昇腾芯片可能违反美国出口管制。意在限制中国AI产业发展，阻碍其获得先进算力。"
// },
// {
// time: "2025-07-25",
// title: "美商务部持续对多种中国产品发起“双反”（反倾销、反补贴）调查并作出裁决，涉及产品从工业原料到日常用品，且裁定的税率普遍较高。"
// },
// {
// time: "2025-07-21",
// title: "美商务部进一步收紧对华先进半导体出口管制，将更多中国实体列入“实体清单”。限制14纳米及以下先进芯片、DRAM等对华出口"
// }
]);
const handleGetOrgnization = async () => {
const params = {
id: decreeId.value
......@@ -208,8 +290,6 @@ const handleGetOrgnization = async () => {
box3TopTopData.value.logo = res.data.image;
box3TopTopData.value.name = res.data.name;
box3TopTopData.value.eName = res.data.ename;
// eventList.value = res.data.newsList;
eventList.value = res.data.orderInfoList;
box3TopBottomData.value = res.data.personList;
}
......@@ -222,13 +302,12 @@ const handleGetOrgnization = async () => {
eName: ""
};
eventList.value = [];
}
};
onMounted(() => {
handleGetRelateEvents();
handleGetOrgnization();
handleGetAreaList();
});
</script>
......@@ -236,94 +315,136 @@ onMounted(() => {
.introduction-wrap {
display: flex;
.box-header {
height: 56px;
display: flex;
position: relative;
.header-left {
margin-top: 18px;
width: 8px;
height: 20px;
border-radius: 0 4px 4px 0;
background: var(--color-main-active);
}
.title {
margin-left: 14px;
margin-top: 14px;
height: 26px;
line-height: 26px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
}
.left {
width: 1064px;
margin-top: 16px;
.header-btn-box {
position: absolute;
z-index: 9999;
width: 325px;
height: 64px;
top: 14px;
right: 82px;
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
gap: 5px 8px;
white-space: nowrap;
overflow: hidden;
overflow-y: auto;
padding-right: 5px;
.btn {
min-width: min-content;
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);
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 28px;
cursor: pointer;
.box1 {
height: 100%;
.analysis-box {
height: 100%;
display: flex;
flex-direction: column;
}
.btnActive {
border: 1px solid var(--color-main-active);
color: var(--color-main-active);
background: rgba(231, 243, 255, 1);
.analysis-top {
font-family: var(--font-family-base);
padding: 0 20px;
color: var(--text-primary-65-color);
height: 60px;
display: flex;
align-items: center;
.select-input {
background-color: var(--el-fill-color-blank);
border-radius: var(--el-border-radius-base);
box-shadow: 0 0 0 1px var(--el-border-color) inset;
box-sizing: border-box;
margin-left: 20px;
width: 200px;
height: 32px;
}
}
}
.header-right {
position: absolute;
top: 14px;
right: 12px;
height: 28px;
display: flex;
gap: 4px;
.icon {
width: 28px;
height: 28px;
img {
width: 100%;
height: 100%;
.analysis-content {
height: 20px;
flex: auto;
:deep(.el-scrollbar__bar.is-vertical) {
right: 0px;
width: 4px;
background: transparent;
border-radius: 2px;
&>div {
background: #c5c7c9;
opacity: 1;
}
&>div:hover {
background: #505357;
}
}
.section {
padding: 0 20px;
.section-header {
display: flex;
height: 48px;
align-items: center;
background-color: rgba(247, 248, 249, 1);
border-radius: 2px;
padding: 0 16px;
.section-title {
font-size: 18px;
font-weight: 600;
letter-spacing: 1px;
width: 20px;
flex: auto;
}
.section-icon {
width: 16px;
height: 16px;
margin-left: 16px;
img {
width: 100%;
height: 100%;
}
}
}
.numbered-list {
margin-bottom: 12px;
font-size: 16px;
line-height: 1.7;
color: #374151;
.list-item {
position: relative;
.list-item-dot {
position: absolute;
left: 50px;
top: 10px;
}
.list-item-word {
border-bottom: 1px solid rgba(234, 236, 238, 1);
padding: 10px 16px 10px 68px;
}
}
}
.sub-list {
.sub-item {
position: relative;
.sub-item-dot {
position: absolute;
left: 66px;
top: 10px;
}
.sub-item-word {
border-bottom: 1px solid rgba(234, 236, 238, 1);
padding: 10px 16px 10px 90px;
}
}
}
.sub-sub-list {
border-bottom: 1px solid rgba(234, 236, 238, 1);
.sub-sub-item {
position: relative;
.sub-sub-item-dot {
position: absolute;
left: 82px;
top: 6px;
}
.sub-sub-item-word {
padding: 6px 16px 6px 100px;
}
}
}
}
}
}
}
.left {
width: 1064px;
margin-top: 16px;
}
.right {
width: 520px;
margin-left: 16px;
......@@ -637,81 +758,5 @@ onMounted(() => {
}
}
}
.report {
padding: 10px 150px;
position: absolute;
left: 0;
top: 0;
z-index: 999999;
width: 100%;
height: 100%;
background: #f7f8f9;
.report-close {
position: absolute;
top: 20px;
right: 230px;
width: 20px;
height: 20px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
.report-header {
width: 100%;
height: 50px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-style: Bold;
font-size: 20px;
font-weight: 700;
line-height: 50px;
letter-spacing: 0px;
text-align: left;
padding-left: 30px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
}
.report-main {
display: flex;
height: calc(100% - 100px);
justify-content: space-between;
.left {
width: 800px;
.noContent {
height: 100px;
line-height: 100px;
text-align: center;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 20px;
font-weight: 400;
}
}
.right {
width: 800px;
.noContent {
height: 100px;
line-height: 100px;
text-align: center;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 20px;
font-weight: 400;
}
}
}
}
}
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论