Skip to content

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

update

上级 df08706e
隐藏空白字符变更
内嵌 并排
正在显示 包含 1596 行增加 和 980 行删除
src/api/decree/background.js
浏览文件 @ ea5dc781
......@@ -7,7 +7,7 @@ import request from "@/api/request.js";
export function getDecreeBackground(params) {
return request({
method: 'GET',
url: `/api/administrativeOrderInfo/background/${id}`,
url: `/api/administrativeOrderInfo/background/${params.id}`,
params
})
}
......@@ -19,7 +19,7 @@ export function getDecreeBackground(params) {
export function getDecreeRelatedEvent(params) {
return request({
method: 'GET',
url: `/api/administrativeOrderInfo/relateEvent/${id}`,
url: `/api/administrativeOrderInfo/relateEvent/${params.id}`,
params
})
}
......@@ -31,7 +31,7 @@ export function getDecreeRelatedEvent(params) {
export function getDecreeDepend(params) {
return request({
method: 'GET',
url: `/api/administrativeOrderInfo/depend/${id}`,
url: `/api/administrativeOrderInfo/depend/${params.id}`,
params
})
}
\ No newline at end of file
src/api/decree/deepdig.js
浏览文件 @ ea5dc781
import request from "@/api/request.js";
// 根据政令ID获取领域公司信息
/**
* @param {cRelated, id}
*/
export function getDecreeRelateOrder(params) {
return request({
method: 'GET',
url: `/api/administrativeOrderDeepDive/relateOrder/${params.id}`,
params
})
}
\ No newline at end of file
src/api/decree/home.js
浏览文件 @ ea5dc781
import request from "@/api/request.js";
// 最新科技政令
export function getDepartmentList() {
return request({
method: 'GET',
url: `/api/administrativeDict/department`,
})
}
// 最新科技政令
export function getLatestDecree() {
return request({
......
src/api/decree/influence.js
浏览文件 @ ea5dc781
......@@ -7,17 +7,16 @@ import request from "@/api/request.js";
export function getDecreeIndustry(params) {
return request({
method: 'GET',
url: `/api/administrativeOrderImpactAnalysis/industry/${id}`,
url: `/api/administrativeOrderImpactAnalysis/industry/${params.id}`,
params
})
}
// 获取行业领域列表
export function getDecreehylyList(params) {
export function getDecreehylyList() {
return request({
method: 'GET',
url: `/api/billImpactAnalysis/industry/hylyList`,
params
})
}
......@@ -28,7 +27,7 @@ export function getDecreehylyList(params) {
export function getDecreeCompany(params) {
return request({
method: 'GET',
url: `/api/administrativeOrderImpactAnalysis/industry/company/${id}`,
url: `/api/administrativeOrderImpactAnalysis/industry/company/${params.id}`,
params
})
}
......@@ -40,7 +39,7 @@ export function getDecreeCompany(params) {
export function getDecreeAction(params) {
return request({
method: 'GET',
url: `/api/administrativeOrderImpactAnalysis/action/${id}`,
url: `/api/administrativeOrderImpactAnalysis/action/${params.id}`,
params
})
}
src/api/decree/introduction.js
浏览文件 @ ea5dc781
......@@ -7,7 +7,7 @@ import request from "@/api/request.js";
export function getDecreeBasicInfo(params) {
return request({
method: 'GET',
url: `/api/administrativeOrderInfo/basicInfo/${id}`,
url: `/api/administrativeOrderInfo/basicInfo/${params.id}`,
params
})
}
......@@ -19,7 +19,7 @@ export function getDecreeBasicInfo(params) {
export function getDecreeMainContent(params) {
return request({
method: 'GET',
url: `/api/administrativeOrderInfo/mainContent/${id}`,
url: `/api/administrativeOrderInfo/mainContent/${params.id}`,
params
})
}
......@@ -31,7 +31,7 @@ export function getDecreeMainContent(params) {
export function getDecreeOrganization(params) {
return request({
method: 'GET',
url: `/api/administrativeOrderInfo/organization/${id}`,
url: `/api/administrativeOrderInfo/organization/${params.id}`,
params
})
}
\ No newline at end of file
src/api/general/index.js 0 → 100644
浏览文件 @ ea5dc781
import request from "@/api/request.js";
// 新闻资讯
/**
* @param {moduleId}
*/
export function getNews(params) {
return request({
method: 'GET',
url: `/api/commonFeature/news/${params.moduleId}`,
params
})
}
// 社交媒体
/**
* @param {moduleId}
*/
export function getSocialMedia(params) {
return request({
method: 'GET',
url: `/api/commonFeature/remarks/${params.moduleId}`,
params
})
}
// 风险信号
/**
* @param {moduleId}
*/
export function getRiskSignal(params) {
return request({
method: 'GET',
url: `/api/commonFeature/riskSignal/${params.moduleId}`,
params
})
}
\ No newline at end of file
src/views/decree/decreeHome/index.vue
浏览文件 @ ea5dc781
......@@ -116,7 +116,7 @@
<div class="home-main-center">
<div class="center-top">
<div class="box1">
<div class="box1-left">
<!-- <div class="box1-left">
<div class="icon">
<img src="./assets/images/box1-left.png" alt="" />
</div>
......@@ -125,7 +125,7 @@
<div class="icon">
<img src="./assets/images/box1-right.png" alt="" />
</div>
</div>
</div> -->
<div class="box1-header">
<div class="box1-header-left">
<div class="icon">
......@@ -137,45 +137,49 @@
{{ "查看详情 >" }}
</div>
</div>
<div class="box1-main">
<div class="box1-main-left">
<img :src="curBox1Data.imageUrl" alt="" />
</div>
<div class="box1-main-right">
<div class="box1-main-right-title">
{{ curBox1Data.name }}
</div>
<div class="box1-main-right-info" v-if="curBox1Data.industryList">
<div
class="tag"
:class="{
tag1: tag.status == 1,
tag2: tag.status == 2,
tag3: tag.status == 3,
tag4: tag.status == 4
}"
v-for="(tag, index) in curBox1Data.industryList"
:key="index"
>
{{ tag.name }}
<el-carousel ref="carouselRef" trigger="click" height="376px" :autoplay="true">
<el-carousel-item v-for="(item, index) in box1DataList" :key="index">
<div class="box1-main">
<div class="box1-main-left">
<img :src="item.imageUrl" alt="" />
</div>
</div>
<div class="box1-main-right-center">
{{ curBox1Data.describe }}
</div>
<div class="box1-main-right-footer">
<div class="footer-left">{{ curBox1Data.postDate }}</div>
<div class="footer-right">
<div class="footer-right-item1">
{{ curBox1Data.officialUrl }}
<div class="box1-main-right">
<div class="box1-main-right-title">
{{ item.name }}
</div>
<div class="box1-main-right-info" v-if="item.industryList">
<div
class="tag"
:class="{
tag1: tag.status == 1,
tag2: tag.status == 2,
tag3: tag.status == 3,
tag4: tag.status == 4
}"
v-for="(tag, index) in item.industryList"
:key="index"
>
{{ tag.name }}
</div>
</div>
<div class="footer-right-item2">
<img src="./assets/images/open-icon.png" alt="" />
<div class="box1-main-right-center">
{{ item.describe }}
</div>
<div class="box1-main-right-footer">
<div class="footer-left">{{ item.postDate }}</div>
<div class="footer-right">
<div class="footer-right-item1">
{{ item.officialUrl }}
</div>
<div class="footer-right-item2">
<img src="./assets/images/open-icon.png" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</el-carousel-item>
</el-carousel>
</div>
<div class="box2">
<div class="box2-header">
......@@ -232,7 +236,7 @@
</div>
</div>
<div class="box3-main">
<div class="box3-item" v-for="(news, index) in newsList" :key="index">
<div class="box3-item" v-for="(news, index) in newsList" :key="index" @click="handleToNewsAnalysis()">
<div class="left">
<img :src="news.img" alt="" />
</div>
......@@ -255,7 +259,7 @@
</div>
<div class="box4-main">
<div class="box4-main-item" v-for="(item, index) in messageList" :key="index">
<div class="left">
<div class="left" @click="handleClickPerson()">
<img :src="item.img" alt="" />
</div>
<div class="right">
......@@ -271,43 +275,37 @@
</div>
<DivideHeader id="position3" class="divide3" :titleText="'数据总览'"></DivideHeader>
<div class="center-footer">
<div class="box3">
<div class="box3-header">
<div class="box3-header-left">
<div class="box3-header-icon">
<div class="box5">
<div class="box5-header">
<div class="box5-header-left">
<div class="box5-header-icon">
<img src="./assets/images/box3-header-icon.png" alt="" />
</div>
<div class="box3-header-title">{{ "行政令发布频度" }}</div>
</div>
<div class="box3-header-right">
<img src="./assets/images/header-more.png" alt="" />
<div class="box5-header-title">{{ "行政令发布频度" }}</div>
</div>
</div>
<div class="box3-main" id="chart1"></div>
<div class="box5-main" id="chart1"></div>
</div>
<div class="box4">
<div class="box4-header">
<div class="box6">
<div class="box6-header">
<div class="header-icon">
<img src="./assets/images/box4-header-icon.png" alt="" />
</div>
<div class="header-title">{{ "政令涉及领域" }}</div>
<div class="header-right">
<img src="./assets/images/header-more.png" alt="" />
</div>
</div>
<div class="box4-main" id="chart2"></div>
<div class="box6-main" id="chart2"></div>
</div>
</div>
<div class="center-footer1">
<div class="box5">
<div class="box5-header">
<div class="box7">
<div class="box7-header">
<div class="header-icon">
<img src="./assets/images/box5-header-icon.png" alt="" />
</div>
<div class="header-title">{{ "关键行政令" }}</div>
</div>
<div class="box5-main">
<div class="box5-item" v-for="(item, index) in keyDecreeList" :key="index">
<div class="box7-main">
<div class="box7-item" v-for="(item, index) in keyDecreeList" :key="index">
<div class="icon">
<img src="./assets/images/warning.png" alt="" />
</div>
......@@ -321,14 +319,14 @@
</div>
</div>
</div>
<div class="box6">
<div class="box6-header">
<div class="box8">
<div class="box8-header">
<div class="header-icon">
<img src="./assets/images/box5-header-icon.png" alt="" />
</div>
<div class="header-title">{{ "政令重点条款" }}</div>
</div>
<div class="box6-main" id="wordCloudChart">
<div class="box8-main" id="wordCloudChart">
<!-- <WordCloudMap :data="wordCloudData" :shape="circle" /> -->
</div>
</div>
......@@ -338,25 +336,30 @@
<DivideHeader id="position4" class="divide4" :titleText="'资源库'"></DivideHeader>
<div class="home-main-footer-header">
<div class="btn-box">
<div
class="btn"
:class="{ btnActive: activeCate === cate }"
v-for="(cate, index) in categoryList"
:key="index"
@click="handleClickCate(cate)"
>
{{ cate }}
<div class="btn-wrapper">
<div
class="btn"
:class="{ btnActive: activeCate === cate.id }"
v-for="(cate, index) in categoryList"
:key="index"
@click="handleClickCate(cate)"
>
{{ cate.name }}
</div>
</div>
</div>
<div class="select-box">
<el-select v-model="releaseTime" placeholder="选择发布时间" style="width: 120px">
<el-option
v-for="item in releaseTimeList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<div class="paixu-btn" @click="handleSwithSort">
<div class="icon1">
<img v-if="isSort" src="@/assets/icons/shengxu1.png" alt="" />
<img v-else src="@/assets/icons/jiangxu1.png" alt="" />
</div>
<div class="text">{{ "发布时间" }}</div>
<div class="icon2">
<img v-if="isSort" src="@/assets/icons/shengxu2.png" alt="" />
<img v-else src="@/assets/icons/jiangxu2.png" alt="" />
</div>
</div>
</div>
</div>
<div class="home-main-footer-main">
......@@ -418,7 +421,7 @@
<div class="left-left">{{ item.time }}</div>
<div class="left-right">
<div class="icon"></div>
<div class="line"></div>
<div class="line" v-if="index !== 9 && index !== totalDecreesNum - 1"></div>
</div>
</div>
<div class="main-item-center">
......@@ -471,6 +474,7 @@ import { onMounted, ref, computed, watch } from "vue";
import * as echarts from "echarts";
import router from "@/router";
import {
getDepartmentList,
getLatestDecree,
getDecreeRiskSignal,
getDecreeYearOrder,
......@@ -480,6 +484,7 @@ import {
getDecreeOrderList,
getDecreehylyList
} from "@/api/decree/home";
import { getNews, getSocialMedia } from "@/api/general/index";
import WordCloudMap from "./WordCloudMap.vue";
import DivideHeader from "@/components/DivideHeader.vue";
import { useContainerScroll } from "@/hooks/useScrollShow";
......@@ -522,7 +527,6 @@ import News5 from "./assets/images/news5.png";
import Message1 from "./assets/images/message-icon1.png";
import Message2 from "./assets/images/message-icon2.png";
import Message3 from "./assets/images/message-icon3.png";
import { reduce } from "lodash";
// 跳转行政机构主页
const handleToInstitution = item => {
......@@ -591,13 +595,24 @@ const govInsList = ref([
name: "美国国立卫生研究院 (NIH)"
}
]);
// 点击查看详情
const handleClickToDetail = () => {
// router.push("/decreeLayout");
const route = router.resolve("/decreeLayout");
window.open(route.href, "_blank");
const handleGetDepartmentList = async () => {
try {
const res = await getDepartmentList();
console.log("机构列表", res);
if (res.code === 200 && res.data) {
govInsList.value = res.data.map(item => {
return {
id: item.orgId,
name: item.orgName,
img: item.orgImage
};
});
}
} catch (error) {
console.error("获取机构列表error", error);
}
};
handleGetDepartmentList();
// 查看更多风险信号
const handleToMoreRiskSignal = () => {
......@@ -624,15 +639,15 @@ const box1DataList = ref([
}
]);
const curBox1Data = ref({
id: 89,
name: "",
postDate: "",
describe: null,
imageUrl: null,
officialUrl: null,
industryList: null
});
// const curBox1Data = ref({
// id: 89,
// name: "",
// postDate: "",
// describe: null,
// imageUrl: null,
// officialUrl: null,
// industryList: null
// });
const handleGetLatestDecree = async () => {
try {
......@@ -640,25 +655,34 @@ const handleGetLatestDecree = async () => {
console.log("最新科技政令", res);
if (res.code === 200 && res.data) {
box1DataList.value = res.data;
curBox1Data.value = res.data[0];
}
} catch (error) {
console.error("最新科技政令error", error);
}
};
const boxInterval = ref(null);
const handleBox1 = async () => {
await handleGetLatestDecree();
let index = 0;
curBox1Data.value = box1DataList.value[0];
// boxInterval.value = setInterval(() => {
// if (index < box1DataList.value.length - 1) {
// index++;
// } else {
// index = 0;
// }
// curBox1Data.value = box1DataList.value[index];
// }, 2000);
};
const carouselRef = ref(null);
// 点击查看详情
const handleClickToDetail = () => {
let activeIndex = 0;
if (carouselRef.value) {
activeIndex = carouselRef.value.activeIndex;
}
console.log("当前 Carousel 激活索引:", activeIndex);
const id = box1DataList.value[activeIndex].id
const route = router.resolve({
path: "/decreeLayout",
query: {
id: id
}
});
window.open(route.href, "_blank");
};
// 风险信号
......@@ -728,6 +752,33 @@ const newsList = ref([
from: "11-2 · ​福克斯新闻网"
}
]);
const handleGetNews = async () => {
const params = {
moduleId: "0100"
};
try {
const res = await getNews(params);
console.log("新闻资讯", res);
if (res.code === 200 && res.data) {
newsList.value = res.data.map(item => {
return {
img: item.newsImage,
title: item.newsTitle,
content: item.newsContent,
from: item.newsDate + " · " + item.newsOrg
};
});
}
} catch (error) {
console.error("新闻资讯error", error);
}
};
handleGetNews();
// 点击新闻条目，跳转到新闻分析页
const handleToNewsAnalysis = () => {
const route = router.resolve("/newsAnalysis");
window.open(route.href, "_blank");
};
// 社交媒体
const messageList = ref([
......@@ -750,6 +801,34 @@ const messageList = ref([
content: `提出特朗普政府的AI政策强调技术开放与快速应用，但可能以牺牲安全防范为代价，开启了“潘多拉魔盒”。`
}
]);
const handleGetMessage = async () => {
const params = {
moduleId: "0100"
};
try {
const res = await getSocialMedia(params);
console.log("社交媒体", res);
messageList.value = res.data.map(item => {
return {
img: item.personImage,
name: item.personName,
time: item.time + " · 发布于" + item.orgName,
content: item.remarks
};
});
} catch (error) {}
};
handleGetMessage();
// 点击人物头像，跳转到人物主页
const handleClickPerson = () => {
const route = router.resolve({
path: "/characterPage",
query: {
type: 1 // 1 2 3
}
});
window.open(route.href, "_blank");
};
// 行政令发布频度
const chart1Data = ref({
......@@ -925,34 +1004,23 @@ const handleBox8 = async () => {
};
// 资源库
const releaseTime = ref("近一年发布");
const releaseTimeList = ref([
{
label: "近半年发布",
value: "近半年发布"
},
{
label: "近一年发布",
value: "近一年发布"
},
{
label: "近两年发布",
value: "近两年发布"
},
{
label: "近三年发布",
value: "近三年发布"
},
{
label: "近五年发布",
value: "近五年发布"
}
]);
const categoryList = ref(["全部分类", "白宫", "能源部", "商务部", "战争部", "FCC", "FDA", "NASA", "NSF", "NIH"]);
const isSort = ref(true); // true 升序 false 倒序
const handleSwithSort = () => {
isSort.value = !isSort.value;
};
const categoryList = computed(() => {
let obj = {
name: "全部分类",
id: "",
img: ""
};
return [obj, ...govInsList.value];
});
const activeCate = ref("白宫");
const handleClickCate = cate => {
activeCate.value = cate;
activeCate.value = cate.id;
};
const handleToPosi = id => {
......@@ -1102,13 +1170,15 @@ const decreeList = ref([
]);
const handleGetDecreeOrderList = async () => {
const p1 = activeAreaList.value.join(",");
const p2 = activePubTime.value.join(",");
const params = {
currentPage: 0,
pageSize: 999999,
proposeName: activeCate.value,
researchTypeIds: '2,3',
sortFun: true,
years: activePubTime.value
researchTypeIds: p1,
sortFun: isSort.value,
years: p2
};
try {
const res = await getDecreeOrderList(params);
......@@ -1130,10 +1200,10 @@ const handleGetDecreeOrderList = async () => {
} else {
decreeList.value = [];
}
// const startIndex = 0;
// const endIndex = pageSize.value;
// curDecreeList.value = decreeList.value.slice(startIndex, endIndex);
} catch (error) {}
} catch (error) {
console.error('资源库列表error', error);
decreeList.value = [];
}
};
const curDecreeList = computed(() => {
......@@ -1156,6 +1226,20 @@ watch(
}
);
watch(
() => activeCate.value,
val => {
handleGetDecreeOrderList();
}
);
watch(
() => isSort.value,
val => {
handleGetDecreeOrderList();
}
);
onMounted(async () => {
handleGetAreaList();
handleGetDecreeOrderList();
......@@ -1577,6 +1661,7 @@ onMounted(async () => {
}
.box1-main {
display: flex;
width: 1064px;
height: 354px;
margin-top: 22px;
padding-left: 31px;
......@@ -1896,6 +1981,10 @@ onMounted(async () => {
width: 749px;
margin-left: 21px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
cursor: pointer;
&:hover {
background: var(--color-bg-hover);
}
.left {
width: 72px;
height: 48px;
......@@ -1914,7 +2003,7 @@ onMounted(async () => {
justify-content: space-between;
.title {
margin-top: 13px;
width: 520px;
width: 500px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
......@@ -1926,7 +2015,7 @@ onMounted(async () => {
white-space: nowrap;
}
.time {
flex: 1;
width: 157px;
text-align: right;
height: 22px;
margin-top: 19px;
......@@ -1935,6 +2024,9 @@ onMounted(async () => {
font-size: 14px;
font-weight: 400;
line-height: 22px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.right-footer {
......@@ -2001,6 +2093,9 @@ onMounted(async () => {
margin-top: 5px;
width: 36px;
height: 36px;
border-radius: 18px;
overflow: hidden;
cursor: pointer;
img {
width: 100%;
height: 100%;
......@@ -2009,6 +2104,7 @@ onMounted(async () => {
.right {
margin-left: 10px;
width: 690px;
border-radius: 4px;
box-sizing: border-box;
border: 1px solid rgba(231, 243, 255, 1);
background: rgba(246, 250, 255, 1);
......@@ -2481,21 +2577,21 @@ onMounted(async () => {
height: 452px;
display: flex;
justify-content: center;
.box3 {
.box5 {
width: 792px;
height: 452px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1);
border-radius: 10px;
.box3-header {
.box5-header {
height: 48px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
margin: 0 auto;
display: flex;
justify-content: space-between;
.box3-header-left {
.box5-header-left {
display: flex;
.box3-header-icon {
.box5-header-icon {
margin-top: 17px;
margin-left: 24px;
width: 17px;
......@@ -2505,7 +2601,7 @@ onMounted(async () => {
height: 100%;
}
}
.box3-header-title {
.box5-header-title {
margin-top: 11px;
margin-left: 19px;
height: 26px;
......@@ -2516,7 +2612,7 @@ onMounted(async () => {
line-height: 26px;
}
}
.box3-header-right {
.box5-header-right {
width: 49px;
height: 24px;
margin-top: 12px;
......@@ -2528,18 +2624,18 @@ onMounted(async () => {
}
}
}
.box3-main {
.box5-main {
height: 397px;
}
}
.box4 {
.box6 {
margin-left: 16px;
width: 792px;
height: 452px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1);
border-radius: 10px;
.box4-header {
.box6-header {
margin: 0 auto;
height: 53px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
......@@ -2578,7 +2674,7 @@ onMounted(async () => {
}
}
}
.box4-main {
.box6-main {
margin-top: 8px;
height: 390px;
}
......@@ -2589,13 +2685,13 @@ onMounted(async () => {
height: 450px;
display: flex;
justify-content: center;
.box5 {
.box7 {
width: 792px;
height: 450px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box5-header {
.box7-header {
width: 792px;
height: 48px;
display: flex;
......@@ -2621,12 +2717,12 @@ onMounted(async () => {
line-height: 26px;
}
}
.box5-main {
.box7-main {
height: 400px;
box-sizing: border-box;
overflow-y: auto;
overflow-x: hidden;
.box5-item {
.box7-item {
width: 730px;
margin-top: 16px;
margin-left: 25px;
......@@ -2688,14 +2784,14 @@ onMounted(async () => {
}
}
}
.box6 {
.box8 {
margin-left: 16px;
width: 792px;
height: 450px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box6-header {
.box8-header {
width: 792px;
height: 48px;
display: flex;
......@@ -2721,7 +2817,7 @@ onMounted(async () => {
line-height: 26px;
}
}
.box6-main {
.box8-main {
height: 401px;
}
}
......@@ -2739,46 +2835,98 @@ onMounted(async () => {
}
.home-main-footer-header {
width: 1600px;
height: 42px;
margin: 36px auto;
height: 70px;
margin: 36px auto 16px;
// background: orange;
display: flex;
justify-content: space-between;
.btn-box {
margin-top: 10px;
width: 1200px;
display: flex;
.btn {
height: 42px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 400;
line-height: 42px;
padding: 0 24px;
border-radius: 21px;
background: rgba(20, 89, 187, 0);
margin-right: 20px;
cursor: pointer;
&:hover {
background: rgba(20, 89, 187, 0.1);
width: 1450px;
overflow-x: auto;
overflow-y: hidden;
.btn-wrapper {
width: 1880px;
display: flex;
gap: 10px;
overflow-x: auto;
overflow-y: hidden;
.btn {
height: 42px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 400;
line-height: 42px;
padding: 0 24px;
border-radius: 21px;
background: rgba(20, 89, 187, 0);
cursor: pointer;
&:hover {
background: rgba(20, 89, 187, 0.1);
}
}
}
.btnActive {
font-weight: 700;
background: rgba(20, 89, 187, 1);
color: #fff;
&:hover {
color: #fff;
.btnActive {
font-weight: 700;
background: rgba(20, 89, 187, 1);
color: #fff;
&:hover {
color: #fff;
background: rgba(20, 89, 187, 1);
}
}
}
}
.select-box {
margin-top: 10px;
margin-top: 5px;
height: 42px;
box-sizing: border-box;
padding: 5px 0;
.paixu-btn {
display: flex;
width: 120px;
height: 32px;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
&:hover {
background: var(--color-bg-hover);
}
cursor: pointer;
.icon1 {
width: 11px;
height: 14px;
margin-top: 10px;
margin-left: 9px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 19px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 18px;
letter-spacing: 0px;
text-align: left;
margin-top: 7px;
margin-left: 9px;
}
.icon2 {
width: 10px;
height: 5px;
margin-top: 5px;
margin-left: 13px;
img {
width: 100%;
height: 100%;
}
}
}
}
}
.home-main-footer-main {
......
src/views/decree/decreeLayout/deepdig/index.vue
浏览文件 @ ea5dc781
......@@ -39,7 +39,7 @@
<div class="item-right-text">
{{ decreeInfo.totalTitle }}
</div>
<div class="item-right-icon">
<div class="item-right-icon" v-if="decreeInfo.totalTitle">
<img src="./assets/icons/open-icon.png" alt="" />
</div>
</div>
......@@ -57,9 +57,9 @@
</div>
</div>
<div class="info-item">
<div class="item-left">{{ "签署总统：" }}</div>
<div class="item-left">{{ "发布机构：" }}</div>
<div class="item-right">
{{ decreeInfo.signPerson }}
{{ decreeInfo.signOrg }}
</div>
</div>
</div>
......@@ -72,9 +72,9 @@
<div class="title">{{ "政令主要内容" }}</div>
</div>
<div class="list-main">
<div class="list-item" v-for="(val, idx) in decreeInfo.list" :key="idx">
<div class="list-item" v-for="(val, idx) in showList" :key="idx">
<div class="id">{{ idx + 1 }}</div>
<div class="title">{{ val.title }}</div>
<div class="title">{{ val.content }}</div>
<div class="open">
<img src="./assets/icons/open-icon.png" alt="" />
</div>
......@@ -103,12 +103,30 @@
</template>
<script setup>
import { ref, onMounted } from "vue";
import { ref, computed, onMounted } from "vue";
import { useRoute } from "vue-router";
import { getDecreeMainContent } from "@/api/decree/introduction";
import { getDecreeRelateOrder } from "@/api/decree/deepdig";
import box2InfoImg from "./assets/icons/box1-info.png";
const allData = ref([]);
const relateId = ref(0);
const route = useRoute();
const pageSize = ref(10);
const currentPage = ref(1);
// 处理页码改变事件
const handleCurrentChange = page => {
currentPage.value = page;
};
const showList = computed(() => {
const startIndex = (currentPage.value - 1) * pageSize.value;
const endIndex = startIndex + pageSize.value;
return decreeInfo.value.list.slice(startIndex, endIndex);
});
const siderList = ref([
{
......@@ -133,51 +151,112 @@ const siderList = ref([
}
]);
const siderActiveIndex = ref(0);
const handleClickSider = index => {
siderActiveIndex.value = index
}
const handleClickSider = async index => {
siderActiveIndex.value = index;
decreeInfo.value.img = allData.value[index].imageUrl;
decreeInfo.value.totalTitle = allData.value[index].name;
decreeInfo.value.eTotalTitle = allData.value[index].ename;
decreeInfo.value.signTime = allData.value[index].postDate;
decreeInfo.value.signOrg = allData.value[index].proposeOrgName;
relateId.value = allData.value[index].id;
const params1 = {
currentPage: 0,
pageSize: 999999,
id: relateId.value
};
try {
const res = await getDecreeMainContent(params1);
console.log("政令主要内容", res);
if (res.code === 200 && res.data) {
decreeInfo.value.list = res.data.content;
} else {
decreeInfo.value.list = [];
}
} catch (error) {}
};
const decreeInfo = ref({
img: box2InfoImg,
totalTitle: "关于安全、可靠和可信地开发和使用人工智能的行政命令",
eTotalTitle: "Executive Order on the Safe, Secure, and Trustworthy Development and Use of Artificial Intelligence",
signTime: "2025年7月23日",
signPerson: "乔·拜登（Joe Biden）",
signOrg: "乔·拜登（Joe Biden）",
list: [
{
title: "要求强大AI系统开发者与政府分享安全测试结果（“红队测试”）；制定生物合成筛查标准防范风险；建立AI生成内容鉴别标准"
},
{
title: "优先支持隐私保护技术（PET）研发；评估各机构如何收集和使用商业信息；制定评估隐私保护技术有效性的指南。"
},
{
title: "为解决算法歧视提供明确指导；确保刑事司法系统中AI使用的公平性；协调调查和起诉AI相关的民权侵犯行为。"
},
{
title: "推动医疗保健领域负责任地使用AI；创造资源支持教育工作者部署AI教育工具。"
},
{
title: "制定减轻AI对工人潜在危害的原则和最佳实践；编写AI对劳动力市场潜在影响的报告。"
},
{
title: "通过“国家AI研究资源”（NAIRR）试点促进研究；为小型开发者和企业家提供技术援助和资源；简化相关领域高技能人才的签证流程。"
},
{
title: "扩大在AI领域的国际合作；与国际伙伴和标准组织加速制定AI标准。"
},
{
title: "发布政府机构使用AI的指南；加快招聘AI专业人才并为相关领域员工提供培训。"
content:
"要求强大AI系统开发者与政府分享安全测试结果（“红队测试”）；制定生物合成筛查标准防范风险；建立AI生成内容鉴别标准"
},
{
title: "发布政府机构使用AI的指南；加快招聘AI专业人才并为相关领域员工提供培训。"
content: "优先支持隐私保护技术（PET）研发；评估各机构如何收集和使用商业信息；制定评估隐私保护技术有效性的指南。"
},
{
title: "发布政府机构使用AI的指南；加快招聘AI专业人才并为相关领域员工提供培训。"
content: "为解决算法歧视提供明确指导；确保刑事司法系统中AI使用的公平性；协调调查和起诉AI相关的民权侵犯行为。"
}
]
});
const handleGetRelateOrder = async () => {
const params = {
id: route.query.id
};
try {
const res = await getDecreeRelateOrder(params);
console.log("相关政令关联分析", res);
if (res.code === 200 && res.data) {
allData.value = res.data;
siderList.value = res.data.map(item => {
return {
time: item.year,
title: item.name
};
});
decreeInfo.value.img = allData.value[0].imageUrl;
decreeInfo.value.totalTitle = allData.value[0].name;
decreeInfo.value.eTotalTitle = allData.value[0].ename;
decreeInfo.value.signTime = allData.value[0].postDate;
decreeInfo.value.signOrg = allData.value[0].proposeOrgName;
relateId.value = allData.value[0].id;
const params1 = {
currentPage: 0,
pageSize: 999999,
id: relateId.value
};
try {
const res = await getDecreeMainContent(params1);
console.log("政令主要内容", res);
if (res.code === 200 && res.data) {
decreeInfo.value.list = res.data.content;
} else {
decreeInfo.value.list = [];
}
} catch (error) {}
} else {
allData.value = [];
siderList.value = [];
decreeInfo.value.img = "";
decreeInfo.value.totalTitle = "";
decreeInfo.value.eTotalTitle = "";
decreeInfo.value.signTime = "";
decreeInfo.value.signOrg = "";
decreeInfo.value.list = [];
}
} catch (error) {
allData.value = [];
siderList.value = [];
decreeInfo.value.img = "";
decreeInfo.value.totalTitle = "";
decreeInfo.value.eTotalTitle = "";
decreeInfo.value.signTime = "";
decreeInfo.value.signOrg = "";
decreeInfo.value.list = [];
}
};
onMounted(() => {
handleGetRelateOrder();
});
</script>
<style lang="scss" scoped>
......@@ -265,14 +344,19 @@ const decreeInfo = ref({
margin-top: 20px;
}
.title {
width: 200px;
margin-left: 17px;
margin-top: 17px;
height: 30px;
// color: var(--color-main-active);
// font-family: Microsoft YaHei;
// font-size: 16px;
// font-weight: 700;
line-height: 30px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
letter-spacing: 0px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.leftItemActive {
......@@ -285,7 +369,7 @@ const decreeInfo = ref({
width: 5px;
height: 48px;
background: var(--color-main-active);
right: -70px;
right: -15px;
top: 8px;
}
}
......
src/views/decree/decreeLayout/index.vue
浏览文件 @ ea5dc781
......@@ -122,7 +122,7 @@
<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import router from "@/router";
import { useRoute } from "vue-router";
import search from "./assets/images/search.png";
import icon1 from "./assets/icons/icon1.png";
......@@ -132,6 +132,10 @@ import icon2Active from "./assets/icons/icon2_active.png";
import icon3 from "./assets/icons/icon3.png";
import icon3Active from "./assets/icons/icon3_active.png";
const route = useRoute();
const decreeId = ref(route.query.id);
const activeName = ref("分析报告");
const handleSwitchActiveName = name => {
......@@ -177,7 +181,12 @@ const activeTitle = ref("政令概况");
const handleClickMainHeaderBtn = item => {
activeTitle.value = item.name;
window.sessionStorage.setItem("activeTitle", item.name);
router.push(item.path);
router.push({
path: item.path,
query: {
id: decreeId.value
}
});
};
onMounted(() => {
......
src/views/decree/decreeLayout/influence/index.vue
浏览文件 @ ea5dc781
<template>
<div class="wrapper">
<div class="left">
<div class="box1">
<div class="box-header">
<div class="icon"></div>
<div class="title">{{ "企业影响分析" }}</div>
<div class="header-right1">
<el-checkbox
v-model="isChecked"
label="只看中国企业"
size="large"
/>
</div>
<div class="wrapper">
<div class="left">
<div class="box1">
<div class="box-header">
<div class="icon"></div>
<div class="title">{{ "企业影响分析" }}</div>
<div class="header-right1">
<el-checkbox v-model="isCRelated" label="只看中国企业" size="large" />
</div>
<div class="header-right">
<div class="header-right-icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
......@@ -20,56 +16,51 @@
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box1-top" id="chart1"></div>
<div class="box1-tab-box">
<div
class="tab"
:class="{ tabActive: box1BtnActiveName === item }"
v-for="(item, index) in box1BtnList"
:key="index"
@click="handleClickBox1Btn(item)"
>
{{ item }}
</div>
</div>
<div class="box1-list-box">
<div
class="box1-item"
v-for="(item, index) in companyList"
:key="index"
>
<div class="id">{{ index + 1 }}</div>
<div class="title">{{ item.name }}</div>
<div class="icon">
<img
v-if="item.status === 'up'"
src="./assets/images/up.png"
alt=""
/>
<img v-else src="./assets/images/down.png" alt="" />
</div>
</div>
</div>
<div class="box1-footer">
<div class="box1-footer-left">{{ `共${companyTotalNum}家企业` }}</div>
<div class="box1-footer-right">
<el-pagination
background
layout="prev, pager, next"
size="small"
:total="105"
/>
</div>
</div>
</div>
</div>
<div class="right">
<div class="box2">
<div class="box-header">
<div class="icon"></div>
<div class="title">{{ "政令举措落实分析" }}</div>
<div class="header-right1"></div>
</div>
<div class="box1-top" id="chart1"></div>
<div class="box1-tab-box">
<div
class="tab"
:class="{ tabActive: box1BtnActiveName === item.name }"
v-for="(item, index) in box1BtnList"
:key="index"
@click="handleClickBox1Btn(item)"
>
{{ item.name }}
</div>
</div>
<div class="box1-list-box">
<div class="box1-item" v-for="(item, index) in showCompanyList" :key="index">
<div class="id">{{ index + 1 }}</div>
<div class="title">{{ item.name }}</div>
<div class="icon">
<img v-if="item.status === 'up'" src="./assets/images/up.png" alt="" />
<img v-else src="./assets/images/down.png" alt="" />
</div>
</div>
</div>
<div class="box1-footer">
<div class="box1-footer-left">{{ `共${companyTotalNum}家企业` }}</div>
<div class="box1-footer-right">
<el-pagination
@current-change="handleCurrentChange"
:pageSize="pageSize"
:current-page="currentPage"
background
layout="prev, pager, next"
size="small"
:total="companyTotalNum"
/>
</div>
</div>
</div>
</div>
<div class="right">
<div class="box2">
<div class="box-header">
<div class="icon"></div>
<div class="title">{{ "政令举措落实分析" }}</div>
<div class="header-right1"></div>
<div class="header-right">
<div class="header-right-icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
......@@ -78,46 +69,46 @@
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
</div>
<div class="box2-main">
<div class="box2-line-box"></div>
<div
class="box2-item"
:class="{ box2ItemFooter: index % 2 }"
v-for="(item, index) in timeLineList"
:key="index"
>
<div class="point" :class="{ pointFooter: index % 2 }">
<img src="./assets/images/point.png" alt="" />
</div>
<div class="box2-item-header">
<div class="title">{{ item.time }}</div>
</div>
<div class="box2-item-content">
{{ item.content }}
</div>
</div>
</div>
<div class="box2-footer">
<div class="footer-left">
<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
</div>
<div class="footer-center">
{{
`政令目前仍处于关键的执行框架搭建期。该政令旨在通过推动“全栈式”美国AI技术出口，巩固其技术霸权并减少国际社会对美国对手国家技术的依赖`
}}
</div>
<div class="footer-right">
<img src="@/assets/icons/box-footer-right-icon.png" alt="" />
</div>
</div>
</div>
<div class="box3">
<div class="box-header">
<div class="icon"></div>
<div class="title">{{ "历史相似举措及落实情况" }}</div>
<div class="header-right1"></div>
<div class="box2-main">
<div class="box2-line-box"></div>
<div
class="box2-item"
:class="{ box2ItemFooter: index % 2 }"
v-for="(item, index) in timeLineList"
:key="index"
>
<div class="point" :class="{ pointFooter: index % 2 }">
<img src="./assets/images/point.png" alt="" />
</div>
<div class="box2-item-header">
<div class="title">{{ item.time }}</div>
</div>
<div class="box2-item-content">
{{ item.content }}
</div>
</div>
</div>
<div class="box2-footer">
<div class="footer-left">
<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
</div>
<div class="footer-center">
{{
`政令目前仍处于关键的执行框架搭建期。该政令旨在通过推动“全栈式”美国AI技术出口，巩固其技术霸权并减少国际社会对美国对手国家技术的依赖`
}}
</div>
<div class="footer-right">
<img src="@/assets/icons/box-footer-right-icon.png" alt="" />
</div>
</div>
</div>
<div class="box3">
<div class="box-header">
<div class="icon"></div>
<div class="title">{{ "历史相似举措及落实情况" }}</div>
<div class="header-right1"></div>
<div class="header-right">
<div class="header-right-icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
......@@ -126,636 +117,763 @@
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box3-main">
<div class="box3-item" v-for="(item, index) in box3List" :key="index">
<div class="box3-item-left">
<div class="text">
{{ item.type }}
</div>
</div>
<div class="box3-item-right">
<div class="right-top">
<div class="title">{{ item.title }}</div>
<div class="tag">{{ item.tag }}</div>
</div>
<div class="right-footer">
<div class="content">{{ item.content }}</div>
<div class="time">{{ item.time }}</div>
</div>
</div>
</div>
</div>
<div class="box3-footer">
<div class="footer-left">
<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
</div>
<div class="footer-center">
{{
`中美经济深度交织，全面脱钩成本高昂且不现实。其核心揭示了三大纽带：生产网络相互依存使强行分离代价巨大；人才双向流动推动创新却成政策博弈焦点；能源领域合作与竞争并存，关乎全球气候治理与经济博弈。报告主张理性竞合，在竞争中找到合作路径。`
}}
</div>
<div class="footer-right">
<img src="@/assets/icons/box-footer-right-icon.png" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="box3-main">
<div class="box3-item" v-for="(item, index) in box3List" :key="index">
<div class="box3-item-left">
<div class="text">
{{ item.type }}
</div>
</div>
<div class="box3-item-right">
<div class="right-top">
<div class="title">{{ item.title }}</div>
<div class="tag">{{ item.tag }}</div>
</div>
<div class="right-footer">
<div class="content">{{ item.content }}</div>
<div class="time">{{ item.time }}</div>
</div>
</div>
</div>
</div>
<div class="box3-footer">
<div class="footer-left">
<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
</div>
<div class="footer-center">
{{
`中美经济深度交织，全面脱钩成本高昂且不现实。其核心揭示了三大纽带：生产网络相互依存使强行分离代价巨大；人才双向流动推动创新却成政策博弈焦点；能源领域合作与竞争并存，关乎全球气候治理与经济博弈。报告主张理性竞合，在竞争中找到合作路径。`
}}
</div>
<div class="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 { ref, computed,watch, onMounted } from "vue";
import { useRoute } from "vue-router";
import setChart from "@/utils/setChart";
import * as echarts from "echarts";
import getBarChart from "./utils/barChart";
import { getDecreeIndustry, getDecreehylyList, getDecreeCompany, getDecreeAction } from "@/api/decree/influence";
const route = useRoute();
// 企业影响分析
const companyTotalNum = ref(0); // 企业数量
const isCRelated = ref(false); // 只看中国企业
const chart1Data = ref({
title: ["集成电路", "新能源", "人工智能", "先进制造", "量子科技"],
value: [109, 95, 79, 25, 11],
// title: ["集成电路", "新能源", "人工智能", "先进制造", "量子科技"],
// value: [109, 95, 79, 25, 11]
});
const box1BtnActiveName = ref('集成电路');
const handleGetChart1Data = async () => {
const params = {
cRelated: isCRelated.value,
id: 147
};
try {
const res = await getDecreeIndustry(params);
console.log("企业影响分析", res);
if (res.code === 200 && res.data) {
chart1Data.value.title = res.data.map(item => {
return item.hylyName;
});
chart1Data.value.value = res.data.map(item => {
return item.companyNum;
});
} else {
chart1Data.value.title = [];
chart1Data.value.value = [];
}
} catch (error) {
chart1Data.value.title = [];
chart1Data.value.value = [];
}
};
const handelBox1 = async () => {
await handleGetChart1Data();
let chart1 = getBarChart(chart1Data.value.title, chart1Data.value.value);
setChart(chart1, "chart1");
};
const box1BtnActiveName = ref("");
const curAreaId = ref(0);
const box1BtnList = ref(["集成电路", "新能源", "人工智能", "先进制造", "量子科技"]);
const handleClickBox1Btn = btn => {
box1BtnActiveName.value = btn
}
box1BtnActiveName.value = btn.name;
curAreaId.value = btn.id;
handleGetCompanyListByArea();
};
// 获取行业领域列表
const handleGetHylyList = async () => {
try {
const res = await getDecreehylyList();
console.log("行业领域列表", res);
if (res.code === 200 && res.data) {
box1BtnList.value = res.data;
box1BtnActiveName.value = box1BtnList.value[0].name;
curAreaId.value = box1BtnList.value[0].id;
}
} catch (error) {}
};
const companyList = ref([
{
name: "宁德时代新能源科技股份有限公司",
status: "down",
},
{
name: "比亚迪股份有限公司",
status: "down",
},
{
name: "隆基绿能科技股份有限公司",
status: "down",
},
{
name: "晶科能源控股有限公司",
status: "down",
},
{
name: "厦门海辰储能科技股份有限公司",
status: "down",
},
{
name: "国轩高科股份有限公司",
status: "up",
},
{
name: "远景科技集团",
status: "down",
},
{
name: "惠州亿纬锂能股份有限公司",
status: "down",
},
{
name: "天合光能股份有限公司",
status: "down",
},
{
name: "晶澳太阳能科技股份有限公司",
status: "up",
},
{
name: "宁德时代新能源科技股份有限公司",
status: "down"
},
{
name: "比亚迪股份有限公司",
status: "down"
},
{
name: "隆基绿能科技股份有限公司",
status: "down"
},
{
name: "晶科能源控股有限公司",
status: "down"
},
{
name: "厦门海辰储能科技股份有限公司",
status: "down"
},
{
name: "国轩高科股份有限公司",
status: "up"
},
{
name: "远景科技集团",
status: "down"
},
{
name: "惠州亿纬锂能股份有限公司",
status: "down"
},
{
name: "天合光能股份有限公司",
status: "down"
},
{
name: "晶澳太阳能科技股份有限公司",
status: "up"
}
]);
const companyTotalNum = ref(105); // 企业数量
const isChecked = ref(true); // 只看中国企业
const currentPage = ref(1);
const pageSize = ref(10);
// 处理页码改变事件
const handleCurrentChange = page => {
currentPage.value = page;
};
const showCompanyList = computed(() => {
const startIndex = (currentPage.value - 1) * pageSize.value;
const endIndex = startIndex + pageSize.value;
return companyList.value.slice(startIndex, endIndex);
});
const handleGetCompanyListByArea = async () => {
const params = {
cRelated: isCRelated.value,
id: curAreaId.value
};
try {
const res = await getDecreeCompany(params);
console.log("行业领域公司列表", res);
if (res.code === 200 && res.data) {
companyList.value = res.data.map(item => {
return {
name: item.name,
id: item.id,
status: "up"
};
});
companyTotalNum.value = companyList.value.length;
} else {
companyList.value = [];
companyTotalNum.value = 0;
}
} catch (error) {
companyList.value = [];
companyTotalNum.value = 0;
}
};
// 政令举措落实情况
// 政令举措落实分析
const timeLineList = ref([
{
time: "2025年7月25日",
content: "商务部已成立AI出口计划办公室，并开始招募专业人员。",
},
{
time: "2025年7月31日",
content: "英伟达、微软、谷歌等企业已提交初步技术栈提案。",
},
{
time: "2025年8月5日",
content: "国务院开始与盟友国家进行初步磋商。",
},
{
time: "2025年8月9日",
content:"国防部、能源部安全审查流程尚未最终确定。",
},
{
time: "2025年8月12日",
content: "商务部已成立AI出口计划办公室，并开始招募专业人员。",
},
{
time: "2025年7月25日",
content: "商务部已成立AI出口计划办公室，并开始招募专业人员。"
},
{
time: "2025年7月31日",
content: "英伟达、微软、谷歌等企业已提交初步技术栈提案。"
},
{
time: "2025年8月5日",
content: "国务院开始与盟友国家进行初步磋商。"
},
{
time: "2025年8月9日",
content: "国防部、能源部安全审查流程尚未最终确定。"
},
{
time: "2025年8月12日",
content: "商务部已成立AI出口计划办公室，并开始招募专业人员。"
}
]);
const handleGetAction = async () => {
const params = {
id: route.query.id
};
try {
const res = await getDecreeAction(params);
console.log("政令举措落实分析", res);
if (res.code === 200 && res.data) {
timeLineList.value = res.data.map(item => {
return {
time: item.time,
content: item.describe
};
});
} else {
timeLineList.value = [];
}
} catch (error) {
timeLineList.value = [];
}
};
// 历史相似举措及落实情况
const box3List = ref([
{
type: "科技法案",
title: "瓦森纳安排",
content: "落实情况：持续有效，但面临技术快速迭代挑战。",
time: "1996-至今",
tag: "人工智能",
},
{
type: "科技法案",
title: "云计算出口管制",
content: "落实情况：部分有效，但执行难度大。",
time: "1996-至今",
tag: "人工智能",
},
{
type: "科技法案",
title: "芯片与科学法案",
content: "落实情况：正在实施，效果待观察。",
time: "2022-至今",
tag: "人工智能",
},
{
type: "科技法案",
title: "AI芯片出口管制",
content: "落实情况：部分有效，但催生中国自主创新。",
time: "1996-至今",
tag: "人工智能",
},
{
type: "科技法案",
title: "瓦森纳安排",
content: "落实情况：持续有效，但面临技术快速迭代挑战。",
time: "1996-至今",
tag: "人工智能",
},
{
type: "科技法案",
title: "瓦森纳安排",
content: "落实情况：持续有效，但面临技术快速迭代挑战。",
time: "1996-至今",
tag: "人工智能",
},
{
type: "科技法案",
title: "瓦森纳安排",
content: "落实情况：持续有效，但面临技术快速迭代挑战。",
time: "1996-至今",
tag: "人工智能"
},
{
type: "科技法案",
title: "云计算出口管制",
content: "落实情况：部分有效，但执行难度大。",
time: "1996-至今",
tag: "人工智能"
},
{
type: "科技法案",
title: "芯片与科学法案",
content: "落实情况：正在实施，效果待观察。",
time: "2022-至今",
tag: "人工智能"
},
{
type: "科技法案",
title: "AI芯片出口管制",
content: "落实情况：部分有效，但催生中国自主创新。",
time: "1996-至今",
tag: "人工智能"
},
{
type: "科技法案",
title: "瓦森纳安排",
content: "落实情况：持续有效，但面临技术快速迭代挑战。",
time: "1996-至今",
tag: "人工智能"
},
{
type: "科技法案",
title: "瓦森纳安排",
content: "落实情况：持续有效，但面临技术快速迭代挑战。",
time: "1996-至今",
tag: "人工智能"
}
]);
watch(
() => isCRelated.value,
val => {
handleGetCompanyListByArea();
handelBox1();
}
);
onMounted(() => {
let chart1 = getBarChart(chart1Data.value.title, chart1Data.value.value);
setChart(chart1, "chart1");
handleGetCompanyListByArea();
handleGetChart1Data();
handleGetHylyList();
handleGetAction();
handelBox1();
});
</script>
<style lang="scss" scoped>
.wrapper {
width: 100%;
height: 879px;
display: flex;
.box-header {
display: flex;
height: 48px;
position: relative;
.icon {
margin-top: 18px;
width: 8px;
height: 20px;
border-radius: 0 4px 4px 0;
background: var(--color-main-active);
}
.title {
height: 26px;
margin-left: 14px;
margin-top: 14px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
}
width: 100%;
height: 879px;
display: flex;
.box-header {
display: flex;
height: 48px;
position: relative;
.icon {
margin-top: 18px;
width: 8px;
height: 20px;
border-radius: 0 4px 4px 0;
background: var(--color-main-active);
}
.title {
height: 26px;
margin-left: 14px;
margin-top: 14px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
}
.header-right {
position: absolute;
top: 14px;
right: 12px;
display: flex;
justify-content: flex-end;
display: flex;
justify-content: flex-end;
gap: 4px;
.header-right-icon{
width: 28px;
height: 28px;
img{
width: 100%;
height: 100%;
}
}
.header-right-icon {
width: 28px;
height: 28px;
img {
width: 100%;
height: 100%;
}
}
}
.header-right1 {
position: absolute;
top: 8px;
right: 84px;
}
}
.left {
margin-left: 160px;
margin-top: 16px;
.box1 {
width: 480px;
height: 845px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box1-top {
width: 446px;
height: 188px;
margin: 7px auto 0;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 4px;
background: rgba(247, 248, 249, 1);
}
.box1-tab-box {
height: 60px;
width: 446px;
margin: 0 auto;
overflow-x: auto;
display: flex;
white-space: nowrap;
gap: 8px;
.tab {
min-width: min-content;
margin-top: 18px;
padding: 0 8px;
height: 28px;
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;
cursor: pointer;
&:hover {
background: var(--btn-active-bg-color);
border: 1px solid var(--btn-active-border-color);
}
}
.tabActive {
color: var(--btn-active-text-color);
background: var(--btn-active-bg-color);
border: 1px solid var(--btn-active-border-color);
}
}
.box1-list-box {
height: 480px;
width: 446px;
margin: 0 auto;
.box1-item {
width: 446px;
height: 48px;
box-sizing: border-box;
border-bottom: 1px solid rgba(234, 236, 238, 1);
border-radius: 4px;
display: flex;
.id {
width: 24px;
height: 24px;
margin-top: 12px;
margin-left: 12px;
border-radius: 12px;
background: #e7f3ff;
font-size: 14px;
font-family: Microsoft YaHei;
text-align: center;
line-height: 24px;
color: var(--color-main-active);
}
.title {
margin-left: 10px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 48px;
}
.icon {
width: 8px;
height: 6px;
margin-top: 14px;
margin-left: 6px;
img {
width: 100%;
height: 100%;
}
}
}
}
.box1-footer {
height: 65px;
width: 446px;
margin: 0 auto;
display: flex;
justify-content: space-between;
box-sizing: border-box;
.box1-footer-left {
margin-top: 25px;
height: 18px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 18px;
}
.box1-footer-right {
margin-top: 23px;
}
}
}
}
.right {
margin-left: 17px;
margin-top: 16px;
.box2 {
width: 1103px;
height: 415px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box2-main {
margin: 0 auto;
margin-top: 10px;
height: 260px;
width: 1054px;
overflow-x: auto;
overflow-y: hidden;
display: flex;
position: relative;
padding-left: 120px;
.box2-line-box {
position: absolute;
left: 0;
top: 114px;
height: 8px;
width: 1054px;
background: url("./assets/images/line-bg.png") repeat;
}
.box2-item {
width: 300px;
height: 120px;
position: relative;
box-sizing: border-box;
padding-left: 13px;
margin-left: -100px;
border-left: 1px solid #0a57a6;
.box2-item-header {
display: flex;
width: 240px;
.title {
color: var(--color-main-active);
height: 26px;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
}
}
.box2-item-content {
width: 210px;
min-height: 48px;
max-height: 96px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
overflow: hidden;
}
.point {
position: absolute;
left: -8px;
bottom: -7px;
width: 15px;
height: 15px;
img {
width: 100%;
height: 100%;
}
}
.pointFooter {
position: absolute;
left: -8px;
top: -7px;
width: 15px;
height: 15px;
img {
width: 100%;
height: 100%;
}
}
.time {
height: 24px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
position: absolute;
bottom: -36px;
left: 0;
}
}
.box2ItemFooter {
margin-top: 118px;
margin-left: -120px;
box-sizing: border-box;
padding-top: 20px;
// display: flex;
// flex-direction: column;
// justify-content: flex-end;
}
}
.box2-footer {
margin-top: 6px;
width: 1057px;
height: 64px;
box-sizing: border-box;
border: 1px rgba(231, 243, 255, 1);
border-radius: 4px;
background: rgba(246, 251, 255, 1);
margin: 14px auto 0;
padding: 6px 12px 6px 12px;
display: flex;
.footer-left {
width: 19px;
height: 20px;
margin-top: 16px;
img {
width: 100%;
height: 100%;
}
}
.footer-center {
margin-left: 13px;
width: 964px;
height: 48px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
display: flex;
align-items: center;
}
.footer-right {
margin-left: 13px;
width: 24px;
height: 24px;
border-radius: 12px;
margin-top: 14px;
img {
width: 100%;
height: 100%;
}
}
}
}
.box3 {
margin-top: 15px;
width: 1103px;
height: 415px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box3-main {
height: 264px;
overflow-y: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-left: 21px;
margin-right: 26px;
.box3-item {
margin-top: 12px;
width: 520px;
height: 76px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 4px;
display: flex;
.box3-item-left {
width: 54px;
height: 54px;
border-radius: 27px;
background: #e7f3ff;
text-align: center;
margin-top: 11px;
margin-left: 14px;
.text {
width: 33px;
height: 30px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 700;
line-height: 18px;
margin: 11px auto;
}
}
.box3-item-right {
margin-left: 8px;
width: 433px;
.right-top {
display: flex;
justify-content: space-between;
.title {
margin-top: 13px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
line-height: 24px;
}
.tag {
margin-top: 11px;
width: 72px;
height: 24px;
box-sizing: border-box;
border: 1px solid rgba(255, 163, 158, 1);
border-radius: 4px;
background: rgba(255, 241, 240, 1);
color: rgba(245, 34, 45, 1);
}
}
.right-footer {
margin-top: 2px;
display: flex;
justify-content: space-between;
.content {
height: 24px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
width: 353px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.time {
height: 24px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
width: 78px;
line-height: 24px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
}
.box3-footer {
width: 1057px;
height: 64px;
box-sizing: border-box;
border: 1px rgba(231, 243, 255, 1);
border-radius: 4px;
background: rgba(246, 251, 255, 1);
margin: 14px auto 0;
padding: 6px 12px 6px 12px;
display: flex;
.footer-left {
width: 19px;
height: 20px;
margin-top: 16px;
img {
width: 100%;
height: 100%;
}
}
.footer-center {
margin-left: 13px;
width: 964px;
height: 48px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
display: flex;
align-items: center;
}
.footer-right {
margin-left: 13px;
width: 24px;
height: 24px;
border-radius: 12px;
margin-top: 14px;
img {
width: 100%;
height: 100%;
}
}
}
}
.header-right1 {
position: absolute;
top: 8px;
right: 84px;
}
}
.left {
margin-left: 160px;
margin-top: 16px;
.box1 {
width: 480px;
height: 845px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box1-top {
width: 446px;
height: 188px;
margin: 7px auto 0;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 4px;
background: rgba(247, 248, 249, 1);
}
.box1-tab-box {
height: 57px;
width: 446px;
margin: 0 auto;
display: flex;
.tab {
margin-top: 18px;
margin-right: 8px;
padding: 0 8px;
height: 28px;
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;
cursor: pointer;
&:hover {
background: var(--btn-active-bg-color);
border: 1px solid var(--btn-active-border-color);
}
}
.tabActive {
color: var(--btn-active-text-color);
background: var(--btn-active-bg-color);
border: 1px solid var(--btn-active-border-color);
}
}
.box1-list-box {
height: 480px;
width: 446px;
margin: 0 auto;
.box1-item {
width: 446px;
height: 48px;
box-sizing: border-box;
border-bottom: 1px solid rgba(234, 236, 238, 1);
border-radius: 4px;
display: flex;
.id {
width: 24px;
height: 24px;
margin-top: 12px;
margin-left: 12px;
border-radius: 12px;
background: #e7f3ff;
font-size: 14px;
font-family: Microsoft YaHei;
text-align: center;
line-height: 24px;
color: var(--color-main-active);
}
.title {
margin-left: 10px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 48px;
}
.icon {
width: 8px;
height: 6px;
margin-top: 14px;
margin-left: 6px;
img {
width: 100%;
height: 100%;
}
}
}
}
.box1-footer {
height: 65px;
width: 446px;
margin: 0 auto;
display: flex;
justify-content: space-between;
box-sizing: border-box;
.box1-footer-left {
margin-top: 25px;
height: 18px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 18px;
}
.box1-footer-right {
margin-top: 23px;
}
}
}
}
.right {
margin-left: 17px;
margin-top: 16px;
.box2 {
width: 1103px;
height: 415px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box2-main {
margin: 0 auto;
margin-top: 10px;
height: 260px;
width: 1054px;
overflow-x: auto;
overflow-y: hidden;
display: flex;
position: relative;
padding-left: 120px;
.box2-line-box {
position: absolute;
left: 0;
top: 114px;
height: 8px;
width: 1054px;
background: url("./assets/images/line-bg.png") repeat;
}
.box2-item {
width: 300px;
height: 120px;
position: relative;
box-sizing: border-box;
padding-left: 13px;
margin-left: -100px;
border-left: 1px solid #0a57a6;
.box2-item-header {
display: flex;
width: 240px;
.title {
color: var(--color-main-active);
height: 26px;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
}
}
.box2-item-content {
width: 210px;
min-height: 48px;
max-height: 96px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
overflow: hidden;
}
.point {
position: absolute;
left: -8px;
bottom: -7px;
width: 15px;
height: 15px;
img{
width: 100%;
height: 100%;
}
}
.pointFooter {
position: absolute;
left: -8px;
top: -7px;
width: 15px;
height: 15px;
img{
width: 100%;
height: 100%;
}
}
.time {
height: 24px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
position: absolute;
bottom: -36px;
left: 0;
}
}
.box2ItemFooter {
margin-top: 118px;
margin-left: -120px;
box-sizing: border-box;
padding-top: 20px;
// display: flex;
// flex-direction: column;
// justify-content: flex-end;
}
}
.box2-footer {
margin-top: 6px;
width: 1057px;
height: 64px;
box-sizing: border-box;
border: 1px rgba(231, 243, 255, 1);
border-radius: 4px;
background: rgba(246, 251, 255, 1);
margin: 14px auto 0;
padding: 6px 12px 6px 12px;
display: flex;
.footer-left {
width: 19px;
height: 20px;
margin-top: 16px;
img {
width: 100%;
height: 100%;
}
}
.footer-center {
margin-left: 13px;
width: 964px;
height: 48px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
display: flex;
align-items: center;
}
.footer-right {
margin-left: 13px;
width: 24px;
height: 24px;
border-radius: 12px;
margin-top: 14px;
img {
width: 100%;
height: 100%;
}
}
}
}
.box3 {
margin-top: 15px;
width: 1103px;
height: 415px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box3-main {
height: 264px;
overflow-y: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-left: 21px;
margin-right: 26px;
.box3-item {
margin-top: 12px;
width: 520px;
height: 76px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 4px;
display: flex;
.box3-item-left {
width: 54px;
height: 54px;
border-radius: 27px;
background: #e7f3ff;
text-align: center;
margin-top: 11px;
margin-left: 14px;
.text {
width: 33px;
height: 30px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 700;
line-height: 18px;
margin: 11px auto;
}
}
.box3-item-right {
margin-left: 8px;
width: 433px;
.right-top {
display: flex;
justify-content: space-between;
.title {
margin-top: 13px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
line-height: 24px;
}
.tag {
margin-top: 11px;
width: 72px;
height: 24px;
box-sizing: border-box;
border: 1px solid rgba(255, 163, 158, 1);
border-radius: 4px;
background: rgba(255, 241, 240, 1);
color: rgba(245, 34, 45, 1);
}
}
.right-footer {
margin-top: 2px;
display: flex;
justify-content: space-between;
.content {
height: 24px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
width: 353px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.time {
height: 24px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
width: 78px;
line-height: 24px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
}
.box3-footer {
width: 1057px;
height: 64px;
box-sizing: border-box;
border: 1px rgba(231, 243, 255, 1);
border-radius: 4px;
background: rgba(246, 251, 255, 1);
margin: 14px auto 0;
padding: 6px 12px 6px 12px;
display: flex;
.footer-left {
width: 19px;
height: 20px;
margin-top: 16px;
img {
width: 100%;
height: 100%;
}
}
.footer-center {
margin-left: 13px;
width: 964px;
height: 48px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
display: flex;
align-items: center;
}
.footer-right {
margin-left: 13px;
width: 24px;
height: 24px;
border-radius: 12px;
margin-top: 14px;
img {
width: 100%;
height: 100%;
}
}
}
}
}
}
}
</style>
\ No newline at end of file
src/views/decree/decreeLayout/overview/background/index.vue
浏览文件 @ ea5dc781
......@@ -28,16 +28,16 @@
<div class="box1-main">
<div class="box1-item" v-for="(item, index) in backgroundList" :key="index">
<div class="id">{{ index + 1 }}</div>
<div class="title">{{ item.title }}</div>
<div class="title">{{ item.content }}</div>
<div class="open">
<img src="./assets/images/open-icon.png" alt="" />
</div>
</div>
</div>
<div class="box1-footer">
<div class="box1-footer-left">{{ "共计10条指令" }}</div>
<div class="box1-footer-left">{{ `共计${backgroundListNum}条指令` }}</div>
<div class="box1-footer-right">
<el-pagination :page-size="5" background layout="prev, pager, next" :total="10" />
<el-pagination :page-size="5" background layout="prev, pager, next" :total="backgroundListNum" />
</div>
</div>
</div>
......@@ -103,36 +103,55 @@
<script setup>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { getDecreeBackground, getDecreeRelatedEvent, getDecreeDepend } from "@/api/decree/background";
import Img1 from "./assets/images/box2-img1.png";
import Img2 from "./assets/images/box2-img2.png";
import Img3 from "./assets/images/box2-img3.png";
import Img4 from "./assets/images/box2-img4.png";
import Img5 from "./assets/images/box2-img5.png";
import { reduce } from "lodash";
const route = useRoute();
const decreeId = ref(route.query.id);
// 提出背景
const box1BtnList = ref(["涉华背景", "全部背景"]);
const box1ActiveBtn = ref("涉华背景");
const handleClickBox1Btn = btn => {
box1ActiveBtn.value = btn;
handleGetBackground();
};
const backgroundListNum = ref(0);
const backgroundList = ref([
{
title: "认为人工智能（AI）是一项将决定未来几十年经济增长、国家安全和全球竞争力的基础性技术"
},
{
title: "要求美国不仅必须在开发通用和前沿AI能力方面领先，还必须确保美国的人工智能技术、标准和治理模式在全球范围内被采用"
},
{
title: "要求加强与盟友的关系并确保我们持续的技术主导地位"
content: "认为人工智能（AI）是一项将决定未来几十年经济增长、国家安全和全球竞争力的基础性技术"
},
{
title: "计划通过支持美国原产人工智能技术的全球部署，以维护和扩大美国在人工智能领域的领导地位"
content: "要求美国不仅必须在开发通用和前沿AI能力方面领先，还必须确保美国的人工智能技术、标准和治理模式在全球范围内被采用"
},
{
title: "目的为减少国际社会对由中国开发的人工智能技术的依赖"
}
]);
const handleGetBackground = async () => {
const params = {
cRelated: box1ActiveBtn.value === "涉华背景" ? true : false,
currentPage: 0,
pageSize: 999999,
id: decreeId.value
};
try {
const res = await getDecreeBackground(params);
console.log("提出背景", res);
if (res.code === 200 && res.data) {
backgroundListNum.value = res.data.numberOfElements
backgroundList.value = res.data.content
} else {
backgroundListNum.value = 0;
backgroundList.value = [];
}
} catch (error) {}
};
// 相关事件
const relatedEvents = ref([
......@@ -170,7 +189,29 @@ const relatedEvents = ref([
time: "2025-05-20"
}
]);
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: '',
title: item.sjbt,
content: item.sjnr,
time: item.sjsj
}
})
} else {
relatedEvents.value = []
}
} catch (error) {
}
}
// 法律依据
const laws = ref([
......@@ -203,6 +244,28 @@ const laws = ref([
content: "要求强大AI系统的开发者与政府共享安全测试结果，并为AI安全、隐私保护、公平权利及创新竞争等方面制定标准。"
}
]);
const handleGetLaws = async () => {
const params = {
id: decreeId.value
}
try {
const res = await getDecreeDepend(params)
console.log('法律依据', res);
if(res.code === 200 && res.data) {
} else {
laws.value = []
}
} catch (error) {
}
}
onMounted(() => {
handleGetBackground();
handleGetRelateEvents()
handleGetLaws()
});
</script>
<style lang="scss" scoped>
......
src/views/decree/decreeLayout/overview/index.vue
浏览文件 @ ea5dc781
......@@ -22,6 +22,10 @@
<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import router from "@/router";
import { useRoute } from "vue-router";
const route = useRoute();
const decreeId = ref(route.query.id);
const siderList = ref([
{
......@@ -39,7 +43,12 @@ const siderBtnActive = ref("政令简介");
const handleClickLeftSiderBtn = item => {
window.sessionStorage.setItem("siderBarActiveName", item.name);
siderBtnActive.value = item.name;
router.push(item.path);
router.push({
path: item.path,
query: {
id: decreeId.value
}
});
};
onMounted(() => {
......
src/views/decree/decreeLayout/overview/introduction/index.vue
浏览文件 @ ea5dc781
......@@ -17,7 +17,7 @@
</div>
<div class="box1-main">
<div class="box1-main-left">
<img src="./assets/images/box1-img.png" alt="" />
<img :src="basicInfo.img" alt="" />
</div>
<div class="box1-main-right">
<div class="item">
......@@ -34,7 +34,7 @@
<div class="item-left">{{ "相关领域：" }}</div>
<div class="item-right tag-box">
<div class="tag" v-for="(area, index) in basicInfo.areaList" :key="index">
{{ area }}
{{ area.industryName }}
</div>
</div>
</div>
......@@ -77,18 +77,24 @@
</div>
</div>
<div class="box2-main">
<div class="box2-item" v-for="(item, index) in majorList" :key="index">
<div class="box2-item" v-for="(item, index) in curmajorList" :key="index">
<div class="id">{{ index + 1 }}</div>
<div class="title">{{ item.title }}</div>
<div class="title">{{ item.content }}</div>
<div class="open">
<img src="./assets/images/open-icon.png" alt="" />
</div>
</div>
</div>
<div class="box2-footer">
<div class="box2-footer-left">{{ "共计10条指令" }}</div>
<div class="box2-footer-left">{{ `共计${majorListNum}条指令` }}</div>
<div class="box2-footer-right">
<el-pagination :page-size="5" background layout="prev, pager, next" :total="10" />
<el-pagination
@current-change="handleCurrentChange"
:page-size="5"
background
layout="prev, pager, next"
:total="majorListNum"
/>
</div>
</div>
</div>
......@@ -104,7 +110,7 @@
:class="{ btnActive: box3ActiveBtn === item }"
v-for="(item, index) in box3BtnList"
:key="index"
@click="handleClickBox3Btn(item)"
@click="handleClickBox3Btn(item, index)"
>
{{ item }}
</div>
......@@ -179,7 +185,7 @@
:key="index"
>
<div class="timeline-content">
{{ item.content }}
{{ item.title }}
</div>
</el-timeline-item>
</el-timeline>
......@@ -194,12 +200,19 @@
</template>
<script setup>
import { ref, onMounted } from "vue";
import { ref, computed, onMounted } from "vue";
import { useRoute } from "vue-router";
import box1Img from "./assets/images/box1-img.png";
import Box3Logo from "./assets/images/box3-img.png";
import { getDecreeBasicInfo, getDecreeMainContent, getDecreeOrganization } from "@/api/decree/introduction";
const route = useRoute();
const decreeId = ref(route.query.id);
// 基本信息
const basicInfo = ref({
img: box1Img,
name: "推动美国人工智能技术栈出口",
eName: "Promoting the Export of the American AI Technology Stack",
areaList: ["人工智能", "出口管制", "半导体产业", "关税", "光伏产业"],
......@@ -209,38 +222,98 @@ const basicInfo = ref({
deadline: "签署后90天内建立机制并开始实施"
});
const handleGetBasicInfo = async () => {
const params = {
id: decreeId.value
};
try {
const res = await getDecreeBasicInfo(params);
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;
}
} catch (error) {
console.error("基本信息error", error);
}
};
handleGetBasicInfo();
// 主要指令
const majorList = ref([
{
title: '要求商务部在90天内建立"全栈式"美国AI出口机制。'
},
{
title: '要求每个纳入出口计划的提案必须涵盖完整的"全栈AI技术包"。'
},
{
title: '指示联邦机构提供贷款、担保、股权投资和技术援助支持入选的"优先AI出口包"。'
},
{
title: "要求输出技术必须符合美国出口管制法规，并由多部门对最终用户进行合规与安全联合审查。"
},
{
title: '明确政策目标为"减少对对手国家开发的AI技术的国际依赖"。'
id: 1,
content: '要求商务部在90天内建立"全栈式"美国AI出口机制。'
}
]);
const currentPage = ref(1);
const pageSize = ref(5);
// 处理页码改变事件
const handleCurrentChange = page => {
currentPage.value = page;
};
const curmajorList = computed(() => {
const startIndex = (currentPage.value - 1) * pageSize.value;
const endIndex = startIndex + pageSize.value;
return majorList.value.slice(startIndex, endIndex);
});
const majorListNum = ref(0);
const handleMajorList = async () => {
const params = {
currentPage: 0,
pageSize: 999999,
id: decreeId.value
};
try {
const res = await getDecreeMainContent(params);
console.log("主要指令", res);
if (res.code === 200 && res.data) {
majorList.value = res.data.content;
majorListNum.value = res.data.numberOfElements;
} else {
majorList.value = [];
majorListNum.value = 0;
}
} catch (error) {}
};
handleMajorList();
// 执行机构
const box3BtnList = ref(["商务部", "经济外交行动组"]);
const box3ActiveBtn = ref("商务部");
const handleClickBox3Btn = btn => {
const box3BtnActiveIndex = ref(0);
const handleClickBox3Btn = (btn, index) => {
box3ActiveBtn.value = btn;
box3BtnActiveIndex.value = index;
box3TopData.value.logo = box3Data.value[index].url;
box3TopData.value.name = box3Data.value[index].name;
box3TopData.value.eName = box3Data.value[index].ename;
box3TopData.value.clsj = box3Data.value[index].foundingDate;
box3TopData.value.zyzz = "暂无数据";
box3TopData.value.zbdz = box3Data.value[index].address;
box3TopData.value.bz = box3Data.value[index].leaderName;
eventList.value = box3Data.value[index].newsList.map(val => {
return {
time: val.newsDate,
title: newsTitle
};
});
};
const box3Data = ref([]);
const box3TopData = ref({
logo: Box3Logo,
name: "美国商务部",
eName: "United States Department of Commerce",
clsj: "1903年2月14日",
zyzz: "国际贸易、进出口管制（R-TX-19）",
zbdz: "华盛顿宪法大道1401号胡佛大楼",
bz: "霍华德·卢特尼克"
});
......@@ -249,24 +322,74 @@ const box3TopData = ref({
const eventList = ref([
{
time: "2025-07-31",
content:
"美商务部发布指南，警告全球企业使用华为昇腾芯片可能违反美国出口管制。意在限制中国AI产业发展，阻碍其获得先进算力。"
title: "美商务部发布指南，警告全球企业使用华为昇腾芯片可能违反美国出口管制。意在限制中国AI产业发展，阻碍其获得先进算力。"
},
{
time: "2025-07-25",
content:
"美商务部持续对多种中国产品发起“双反”（反倾销、反补贴）调查并作出裁决，涉及产品从工业原料到日常用品，且裁定的税率普遍较高。"
title: "美商务部持续对多种中国产品发起“双反”（反倾销、反补贴）调查并作出裁决，涉及产品从工业原料到日常用品，且裁定的税率普遍较高。"
},
{
time: "2025-07-21",
content:
"美商务部进一步收紧对华先进半导体出口管制，将更多中国实体列入“实体清单”。限制14纳米及以下先进芯片、DRAM等对华出口"
title: "美商务部进一步收紧对华先进半导体出口管制，将更多中国实体列入“实体清单”。限制14纳米及以下先进芯片、DRAM等对华出口"
},
{
time: "2025-07-12",
content: "美商务部发起第三次反倾销和反补贴日落复审调查。"
title: "美商务部发起第三次反倾销和反补贴日落复审调查。"
}
]);
const handleGetOrgnization = async () => {
const params = {
id: decreeId.value
};
try {
const res = await getDecreeOrganization(params);
console.log("执行机构", res);
if (res.code === 200 && res.data) {
box3BtnList.value = res.data.map(item => {
return item.name;
});
box3Data.value = res.data;
box3TopData.value.logo = res.data[0].url;
box3TopData.value.name = res.data[0].name;
box3TopData.value.eName = res.data[0].ename;
box3TopData.value.clsj = res.data[0].foundingDate;
box3TopData.value.zbdz = res.data[0].address;
box3TopData.value.bz = res.data[0].leaderName;
eventList.value = res.data[0].newsList.map(val => {
return {
time: val.newsDate,
title: newsTitle
};
});
} else {
box3BtnList.value = [];
box3TopData.value = {
logo: "",
name: "",
eName: "",
clsj: "",
zyzz: "",
zbdz: "",
bz: ""
};
eventList.value = [];
}
} catch (error) {
console.error("执行机构error", error);
box3BtnList.value = [];
box3TopData.value = {
logo: "",
name: "",
eName: "",
clsj: "",
zbdz: "",
bz: ""
};
eventList.value = [];
}
};
handleGetOrgnization();
</script>
<style lang="scss" scoped>
......
src/views/exportControl/utils/charts.js
浏览文件 @ ea5dc781
......@@ -725,7 +725,7 @@ export const getHorizontalBarChart2 = (nameList, valueList, isPer) => {
const option = {
tooltip: {},
grid: {
top: "6%",
top: "3%",
right: "6%",
bottom: "0",
left: "1%",
......@@ -769,7 +769,7 @@ export const getHorizontalBarChart2 = (nameList, valueList, isPer) => {
}),
label: {
show: true,
position: [340, -2],
position: [310, -2],
formatter: function (params) {
return isPer ? params.value + "%" : params.value;
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论