提交 b6a34c45 authored 作者: 付康's avatar 付康

合并分支 'lzl-dev' 到 'master'

规则限制 查看合并请求 !87
...@@ -278,6 +278,7 @@ export function getSingleSanctionBackground(data) { ...@@ -278,6 +278,7 @@ export function getSingleSanctionBackground(data) {
* @param {Boolean} [data.isOnlyCn=true] - 是否仅查询中国数据 * @param {Boolean} [data.isOnlyCn=true] - 是否仅查询中国数据
* @param {String} [data.domainId] - 科技领域ID * @param {String} [data.domainId] - 科技领域ID
* @param {String} [data.searchText] - 搜索文本 * @param {String} [data.searchText] - 搜索文本
* @param {String} [data.searchType] - 搜索类型
* @header token * @header token
*/ */
export function getSingleSanctionOverviewList(data) { export function getSingleSanctionOverviewList(data) {
......
import request from "@/api/request.js";
// 规则限制-首页统计接口
export function getRuleRestrictionStatistics() {
return request({
method: 'GET',
url: `/api/ruleLimitInfo/statCount`
})
}
// 规则限制-查询最新动态接口
export function getRuleRestrictionLatest(params) {
return request({
method: 'GET',
url: `/api/ruleLimitInfo/getLatestUpdates`,
params
})
}
// 规则限制-获取风险信号接口
/**
* @param {moduleId} 模块ID
* @header token
*/
export function getRuleRestrictionRiskSignal(params) {
return request({
method: 'GET',
url: `/api/commonFeature/riskSignal/${params.moduleId}`
})
}
// 规则限制-获取新闻资讯接口
/**
* @param {moduleId} 模块ID
* @header token
*/
export function getRuleRestrictionNews(params) {
return request({
method: 'GET',
url: `/api/commonFeature/news/${params.moduleId}`
})
}
// 规则限制-获取社交媒体接口
/**
* @param {moduleId} 模块ID
* @header token
*/
export function getRuleRestrictionSocialMedia(params) {
return request({
method: 'GET',
url: `/api/commonFeature/remarks/${params.moduleId}`
})
}
\ No newline at end of file
...@@ -938,9 +938,9 @@ onMounted(() => { ...@@ -938,9 +938,9 @@ onMounted(() => {
height: 22px; height: 22px;
color: rgba(95, 101, 108, 1); color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 14px; font-size: 16px;
font-weight: 600; font-weight: 400;
line-height: 22px; line-height: 24px;
letter-spacing: 0px; letter-spacing: 0px;
text-align: left; text-align: left;
......
...@@ -274,11 +274,9 @@ onMounted(() => { ...@@ -274,11 +274,9 @@ onMounted(() => {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin: 0 auto; margin: 0 auto;
padding: 14px 0; padding-top: 10px;
.layout-main-header-left-box { .layout-main-header-left-box {
width: 900px; width: 900px;
// margin-left: 160px;
// margin-top: 13px;
.left-box-top { .left-box-top {
height: 64px; height: 64px;
display: flex; display: flex;
......
...@@ -933,7 +933,7 @@ onMounted(() => { ...@@ -933,7 +933,7 @@ onMounted(() => {
width: 1064px; width: 1064px;
height: 846px; height: 846px;
.box2 { .box2 {
width: 1064px; width: 1210px;
height: 415px; height: 415px;
border: 1px solid rgba(234, 236, 238, 1); border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px; border-radius: 10px;
...@@ -948,7 +948,7 @@ onMounted(() => { ...@@ -948,7 +948,7 @@ onMounted(() => {
} }
.box3 { .box3 {
margin-top: 16px; margin-top: 16px;
width: 1064px; width: 1210px;
height: 415px; height: 415px;
border: 1px solid rgba(234, 236, 238, 1); border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px; border-radius: 10px;
......
...@@ -1103,7 +1103,7 @@ onMounted(async () => { ...@@ -1103,7 +1103,7 @@ onMounted(async () => {
.right { .right {
margin-left: 16px; margin-left: 16px;
margin-top: 16px; margin-top: 16px;
width: 860px; width: 868px;
height: 847px; height: 847px;
background: rgb(255, 255, 255); background: rgb(255, 255, 255);
.box3 { .box3 {
......
...@@ -182,26 +182,12 @@ const handleSelectBtn = index => { ...@@ -182,26 +182,12 @@ const handleSelectBtn = index => {
btnActiveIndex.value = index; btnActiveIndex.value = index;
}; };
const chart1Data = ref([ const chart1Data = ref([]);
{ name: "出口管制", value: 24 },
{ name: "金融制裁", value: 30 },
{ name: "资本管制", value: 31 },
{ name: "对台军售", value: 32 },
{ name: "关税贸易", value: 50 },
{ name: "技术封锁", value: 46 },
{ name: "供应链打压", value: 40 }
]);
const chart1ColorList = ref(["#4096ff", "#b37feb", "#ff7875", "#85a5ff", "#69b1ff", "#ffc069", "#87e8de"]); const chart1ColorList = ref(["#4096ff", "#b37feb", "#ff7875", "#85a5ff", "#69b1ff", "#ffc069", "#87e8de"]);
const chart2ColorList = ref(["#ff7875", "#85a5ff", "#95de64", "#ffc069", "#85e5db"]); const chart2ColorList = ref(["#ff7875", "#85a5ff", "#95de64", "#ffc069", "#85e5db"]);
const chart2Data = ref([ const chart2Data = ref([]);
// { name: "军工", value: 85 },
// { name: "金融业", value: 98 },
// { name: "新能源", value: 95 },
// { name: "半导体", value: 80 },
// { name: "跨境电商", value: 71 },
]);
// 绘制echarts图表 // 绘制echarts图表
const setChart = (option, chartId) => { const setChart = (option, chartId) => {
...@@ -367,8 +353,6 @@ onMounted(async () => { ...@@ -367,8 +353,6 @@ onMounted(async () => {
handleGetBillContentTk("N"); handleGetBillContentTk("N");
await handleGetBillContentXzfs(); await handleGetBillContentXzfs();
await handleGetBillHyly(); await handleGetBillHyly();
let chart1 = getPieChart(chart1Data.value, chart1ColorList.value);
setChart(chart1, "chart1");
}); });
</script> </script>
......
...@@ -142,7 +142,8 @@ const getCoopRestrictionSignalsData = async () => { ...@@ -142,7 +142,8 @@ const getCoopRestrictionSignalsData = async () => {
id: item.signalId, id: item.signalId,
title: item.signalLevel, title: item.signalLevel,
content: item.signalTitle, content: item.signalTitle,
time: item.signalTime time: item.signalTime,
cooperationId: item.cooperationId
})); }));
} }
} catch (error) { } catch (error) {
...@@ -211,7 +212,7 @@ const handleClickToDetail = item => { ...@@ -211,7 +212,7 @@ const handleClickToDetail = item => {
const handleToRiskDetail = (item) => { const handleToRiskDetail = (item) => {
const curRoute = router.resolve({ const curRoute = router.resolve({
path: "/cooperationRestrictions/detail", path: "/cooperationRestrictions/detail",
query: { id: item.id }, query: { id: item.cooperationId },
}); });
window.open(curRoute.href, "_blank"); window.open(curRoute.href, "_blank");
}; };
......
...@@ -480,74 +480,30 @@ const activeMarketShare = ref("总体市场份额"); ...@@ -480,74 +480,30 @@ const activeMarketShare = ref("总体市场份额");
const marketShareOptions = ["总体市场份额"]; const marketShareOptions = ["总体市场份额"];
const chartData = ref({ const chartData = ref({
dates: [ dates: [],
"2023\nQ3", values: [],
"2023\nQ4", sanctionDate: "",
"2024\nQ1", endValue: 0
"2024\nQ2",
"2024\nQ3",
"2024\nQ4",
"2025\nQ1",
"2025\nQ2",
"2025\nQ3",
"2025\nQ4"
],
values: [620, 650, 600, 480, 480, 420, 480, 520, 650, 650],
sanctionDate: "2024\nQ1",
endValue: 645
}); });
const marketChartData = ref({ const marketChartData = ref({
dates: [ dates: [],
"2023\nQ3", values: [],
"2023\nQ4", sanctionDate: "",
"2024\nQ1", endValue: 0
"2024\nQ2",
"2024\nQ3",
"2024\nQ4",
"2025\nQ1",
"2025\nQ2",
"2025\nQ3",
"2025\nQ4"
],
values: [620, 650, 600, 480, 480, 420, 480, 520, 650, 650],
sanctionDate: "2024\nQ1",
endValue: 645
}); });
const rdChartData = ref({ const rdChartData = ref({
dates: [ dates: [],
"2023\nQ3", values: [],
"2023\nQ4", sanctionDate: "",
"2024\nQ1", endValue: 0
"2024\nQ2",
"2024\nQ3",
"2024\nQ4",
"2025\nQ1",
"2025\nQ2",
"2025\nQ3",
"2025\nQ4"
],
values: [62, 65, 60, 55, 62, 68, 83, 92, 89, 92],
sanctionDate: "2024\nQ1",
endValue: 92,
}); });
const shareChartData = ref({ const shareChartData = ref({
dates: [ dates: [],
"2023\nQ3", values: [],
"2023\nQ4", sanctionDate: "",
"2024\nQ1",
"2024\nQ2",
"2024\nQ3",
"2024\nQ4",
"2025\nQ1",
"2025\nQ2",
"2025\nQ3",
"2025\nQ4"
],
values: [65, 70, 72, 70, 58, 65, 68, 72, 72, 68],
sanctionDate: "2024\nQ1",
unit: "%", unit: "%",
}); });
...@@ -602,7 +558,7 @@ const getBaseOption = (data) => { ...@@ -602,7 +558,7 @@ const getBaseOption = (data) => {
const initRevenueChart = () => { const initRevenueChart = () => {
const dom = chartRef.value; const dom = chartRef.value;
const data = chartData.value; const data = chartData.value;
if (!dom || !data.values) return; if (!dom || !data.values || data.values.length === 0) return;
let myChart = echarts.getInstanceByDom(dom) || echarts.init(dom); let myChart = echarts.getInstanceByDom(dom) || echarts.init(dom);
const lastDate = data.dates[data.dates.length - 1]; const lastDate = data.dates[data.dates.length - 1];
...@@ -670,7 +626,7 @@ const initRevenueChart = () => { ...@@ -670,7 +626,7 @@ const initRevenueChart = () => {
const initMarketChart = () => { const initMarketChart = () => {
const dom = marketChartRef.value; const dom = marketChartRef.value;
const data = marketChartData.value; const data = marketChartData.value;
if (!dom || !data.values) return; if (!dom || !data.values || data.values.length === 0) return;
let myChart = echarts.getInstanceByDom(dom) || echarts.init(dom); let myChart = echarts.getInstanceByDom(dom) || echarts.init(dom);
const lastDate = data.dates[data.dates.length - 1]; const lastDate = data.dates[data.dates.length - 1];
...@@ -731,7 +687,7 @@ const initMarketChart = () => { ...@@ -731,7 +687,7 @@ const initMarketChart = () => {
const initRDChart = () => { const initRDChart = () => {
const dom = rdChartRef.value; const dom = rdChartRef.value;
const data = rdChartData.value; const data = rdChartData.value;
if (!dom || !data.values) return; if (!dom || !data.values || data.values.length === 0) return;
let myChart = echarts.getInstanceByDom(dom) || echarts.init(dom); let myChart = echarts.getInstanceByDom(dom) || echarts.init(dom);
const lastDate = data.dates[data.dates.length - 1]; const lastDate = data.dates[data.dates.length - 1];
...@@ -851,13 +807,6 @@ onMounted(async () => { ...@@ -851,13 +807,6 @@ onMounted(async () => {
if (selectedCompanyId.value) { if (selectedCompanyId.value) {
getRevenueData(); getRevenueData();
} }
nextTick(() => {
initRevenueChart();
initMarketChart();
initRDChart();
initShareChart();
});
}); });
</script> </script>
......
...@@ -247,6 +247,7 @@ const getSanctionOverviewList = async () => { ...@@ -247,6 +247,7 @@ const getSanctionOverviewList = async () => {
isOnlyCn: onlyChina.value, isOnlyCn: onlyChina.value,
domainId: filterField.value || undefined, domainId: filterField.value || undefined,
searchText: searchKeyword.value || undefined, searchText: searchKeyword.value || undefined,
searchType: searchType.value
}) })
if (res.code === 200) { if (res.code === 200) {
const data = res.data || {} const data = res.data || {}
...@@ -407,9 +408,10 @@ const onlyChina = ref(false) ...@@ -407,9 +408,10 @@ const onlyChina = ref(false)
const filterField = ref('') const filterField = ref('')
const searchKeyword = ref('') const searchKeyword = ref('')
const activeTab = ref('add') const activeTab = ref('add')
const searchType = computed(() => activeTab.value)
// 监听筛选条件变化 // 监听筛选条件变化
watch([onlyChina, filterField], () => { watch([onlyChina, filterField, activeTab], () => {
getSanctionOverviewList() getSanctionOverviewList()
}) })
......
<template>
<el-tooltip
effect="dark"
:content="content"
popper-class="common-prompt-popper"
placement="top"
:show-after="500"
>
<div class="text-ellipsis">
<slot>{{ content }}</slot>
</div>
</el-tooltip>
</template>
<script setup>
defineProps({
content: {
type: String,
default: ""
}
});
</script>
<style scoped>
.text-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
cursor: pointer;
}
</style>
<style>
.common-prompt-popper.el-popper {
padding: 8px 16px !important;
border-radius: 10px !important;
background-color: rgb(59, 65, 75) !important;
font-size: 16px !important;
font-weight: 400 !important;
font-family: "Microsoft YaHei" !important;
line-height: 30px !important;
color: #fff !important;
border: none !important;
}
.common-prompt-popper.el-popper .el-popper__arrow::before {
background-color: rgb(59, 65, 75) !important;
border-color: rgb(59, 65, 75) !important;
}
</style>
<template> <template>
<div class="ask-page"> <div class="ask-page">
<div class="left"> <div class="left">
<div class="left-title"> <div class="left-title">
<img src="./assets/icon01.png" alt=""> <img src="./assets/icon01.png" alt="" />
<div class="tit">新闻资讯</div> <div class="tit">新闻资讯</div>
<div class="more" @click="handleToMoreNews">更多 +</div> <div class="more" @click="handleToMoreNews">更多 +</div>
</div> </div>
<div class="left-main"> <div class="left-main">
<div v-for="item in leftList" :key="item.id" class="main-item"> <div v-for="item in leftList.slice(0, 5)" :key="item.id" class="main-item" @click="handleToNewsDetail(item)">
<img :src="item.image" alt=""> <img :src="item.image || defaultNews" alt="" @error="e => (e.target.src = defaultNews)" />
<div class="item-content"> <div class="item-content">
<div class="title">{{item.title}}</div> <div class="title">
<div class="content">{{item.content}}</div> <CommonPrompt :content="item.title">
<div class="time">{{item.time}}</div> {{ item.title }}
</div> </CommonPrompt>
</div> </div>
</div> <div class="content">
</div> <CommonPrompt :content="item.content">
<div class="right"> {{ item.content }}
<div class="right-title"> </CommonPrompt>
<img src="./assets/icon02.png" alt=""> </div>
<div class="tit">社交媒体</div> <div class="time">{{ item.time }}</div>
</div> </div>
<div class="right-main"> </div>
<div class="trump"> </div>
<img src="./assets/title01.png" alt=""> </div>
<div class="trump-main"> <div class="right">
<div class="cl1">{{ rightList[0].name }}</div> <div class="right-title">
<div class="cl2">{{ rightList[0].content }}</div> <img src="./assets/icon02.png" alt="" />
<div class="cl3">{{ rightList[0].time }}</div> <div class="tit">社交媒体</div>
</div> </div>
</div> <div class="right-main">
<div class="mask"> <div
<img src="./assets/title02.png" alt=""> v-for="(item, index) in rightList.slice(0, 3)"
<div class="mask-main"> :key="item.id"
<div class="cl1">{{ rightList[1].name }}</div> class="social-item"
<div class="cl2">{{ rightList[1].content }}</div> @click="handleToSocialDetail(item)"
<div class="cl3">{{ rightList[1].time }}</div> >
</div> <img :src="item.image || defaultAvatar" alt="" @error="e => (e.target.src = defaultAvatar)" />
</div> <div class="social-item-main" :style="{ backgroundImage: `url(${socialConfig[index].bg})` }">
<div class="malaby"> <div class="cl1">{{ item.name }}</div>
<img src="./assets/title03.png" alt=""> <div class="cl2">{{ item.content }}</div>
<div class="malaby-main"> <div class="cl3">{{ item.time }}</div>
<div class="cl1">{{ rightList[2].name }}</div> </div>
<div class="cl2">{{ rightList[2].content }}</div> </div>
<div class="cl3">{{ rightList[2].time }}</div> </div>
</div> </div>
</div> </div>
</div>
</div>
</div>
</template> </template>
<script setup> <script setup>
import { ref } from "vue"; import { ref, onMounted } from "vue";
import router from "@/router" import router from "@/router";
import image01 from './assets/image01.png' import { getRuleRestrictionNews, getRuleRestrictionSocialMedia } from "@/api/ruleRestriction/ruleRestriction";
import image02 from './assets/image02.png' import CommonPrompt from "../../commonPrompt/index.vue";
import image03 from './assets/image03.png'
import image04 from './assets/image04.png'
import image05 from './assets/image05.png'
import title01 from './assets/title01.png' import defaultNews from "../../assets/images/default-icon-news.png";
import title02 from './assets/title02.png' import defaultAvatar from "../../assets/images/default-icon1.png";
import title03 from './assets/title03.png' import title01 from "./assets/title01.png";
import title02 from "./assets/title02.png";
import title03 from "./assets/title03.png";
import title01bg from "./assets/title01bg.png";
import title02bg from "./assets/title02bg.png";
import title03bg from "./assets/title03bg.png";
const leftList = ref([]);
const rightList = ref([]);
const leftList = ref([ const socialConfig = [
{ { icon: title01, bg: title01bg },
id:1, { icon: title02, bg: title02bg },
title:'美国智库激辩人工智能监管路径', { icon: title03, bg: title03bg }
content:'各方就AI监管模式展开讨论。有观点认为碎片化州级监管比全面联邦法规更灵活,也有分析...', ];
time:'11-4 · 华盛顿邮报',
image:image01
},
{
id:2,
title:'布鲁金斯学会称美国低估中国在“印太”战略',
content:'分析认为,当美国注意力被其他地区分散时,中国通过外交、发展和防务多管齐下,系统性...',
time:'11-4 · 纽约时报',
image:image02
},
{
id:3,
title:'五角大楼指令引发智库与国防部“脱钩”震荡',
content:'美国国防部长下令全面暂停部内人员参与所有智库活动,标志着传统的“旋转门”关系发生...',
time:'11-3 · 洛杉矶时报',
image:image03
},
{
id:4,
title:'卡内基基金会警告冲突中AI宣传战的风险',
content:'分析指出,在伊朗与以色列的冲突中,人工智能生成的虚假信息泛滥,深度破坏了信息生态...',
time:'11-3 · 今日美国',
image:image04
},
{
id:5,
title:'CSIS建议美国建立跨机构AI基准测试体系',
content:'指出美国《人工智能行动计划》忽视了基准测试这一关键环节,建议由国家标准与技术研究...',
time:'11-2 · ​福克斯新闻网',
image:image05
}
])
const rightList = ref([ // 规则限制-查询新闻资讯接口
{ const getRuleRestrictionNewsData = async () => {
id:1, try {
name:'唐纳德·特朗普', const res = await getRuleRestrictionNews({ moduleId: "0108" });
content:'埃隆·马斯克在强力支持我竞选总统之前,早就知道我强烈反对‘电动汽车强制令’。这太荒谬了,这一直是我竞选活动的主要部分。电动汽车没问题,但不应该强迫每个人都拥有一辆。埃隆获得的补贴可能远远超过历史上任何一个人。如果没有补贴,埃隆可能不得不关门大吉,回到南非老家。', if (res && res.code === 200) {
time:'15:23 · 发布于真实社交', leftList.value = (res.data || []).map(item => ({
title:title01 id: item.newsId,
}, title: item.newsTitle,
{ content: item.newsContent,
id:2, time: `${item.newsDate}${item.newsOrg ? " · " + item.newsOrg : ""}`,
name:'埃隆·马斯克', image: item.newsImage
content:'如果这个疯狂的支出法案获得通过,‘美国党’将在第二天成立。', }));
time:'14:49 · 发布于X', }
title:title02 } catch (error) {
}, console.error("获取规则限制新闻资讯数据失败:", error);
{ }
id:3, };
name:'塞巴斯蒂安·马拉比',
content:'提出特朗普政府的AI政策强调技术开放与快速应用,但可能以牺牲安全防范为代价,开启了“潘多拉魔盒”。', // 规则限制-查询社交媒体接口
time:'11:05 · 发布于X', const getRuleRestrictionSocialData = async () => {
title:title03 try {
} const res = await getRuleRestrictionSocialMedia({ moduleId: "0108" });
]) if (res && res.code === 200) {
rightList.value = (res.data || []).map(item => {
const date = new Date(item.time);
const y = date.getFullYear();
const m = (date.getMonth() + 1).toString().padStart(2, "0");
const d = date.getDate().toString().padStart(2, "0");
const hh = date.getHours().toString().padStart(2, "0");
const mm = date.getMinutes().toString().padStart(2, "0");
const formattedTime = `${y}-${m}-${d} ${hh}:${mm} · 发布于${item.orgName}`;
return {
id: item.personId,
name: item.personName,
content: item.remarks,
time: formattedTime,
image: item.personImage
};
});
}
} catch (error) {
console.error("获取规则限制社交媒体数据失败:", error);
}
};
// 查看更多新闻资讯 // 查看更多新闻资讯
const handleToMoreNews = () => { const handleToMoreNews = () => {
...@@ -134,6 +124,32 @@ const handleToMoreNews = () => { ...@@ -134,6 +124,32 @@ const handleToMoreNews = () => {
window.open(route.href, "_blank"); window.open(route.href, "_blank");
}; };
// 查看新闻资讯详情
const handleToNewsDetail = item => {
const route = router.resolve({
path: "/newsAnalysis",
query: {
newsId: item.id
}
});
window.open(route.href, "_blank");
};
// 查看社交媒体详情
const handleToSocialDetail = item => {
const route = router.resolve({
path: "/characterPage",
query: {
personId: item.id
}
});
window.open(route.href, "_blank");
};
onMounted(() => {
getRuleRestrictionNewsData();
getRuleRestrictionSocialData();
});
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
...@@ -142,287 +158,211 @@ const handleToMoreNews = () => { ...@@ -142,287 +158,211 @@ const handleToMoreNews = () => {
padding: 0; padding: 0;
} }
.ask-page { .ask-page {
width: 1600px; width: 1600px;
height: 450px; height: 450px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.left { .left {
width: 792px; width: 792px;
height: 450px; height: 450px;
margin-right: 16px; margin-right: 16px;
border-radius: 10px; border-radius: 10px;
border: 1px solid rgb(234, 236, 238); border: 1px solid rgb(234, 236, 238);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background-color: #fff; background-color: #fff;
.left-title { .left-title {
width: 792px; width: 792px;
height: 48px; height: 48px;
border-bottom: 1px solid rgb(234, 236, 238); border-bottom: 1px solid rgb(234, 236, 238);
position: relative; position: relative;
img { img {
width: 19px; width: 19px;
height: 19px; height: 19px;
position: absolute; position: absolute;
top: 16px; top: 16px;
left: 21px; left: 21px;
} }
.tit { .tit {
margin-left: 60px; margin-left: 60px;
width: 80px; width: 80px;
height: 48px; height: 48px;
padding: 11px 0; padding: 11px 0;
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
font-family: 'Microsoft YaHei'; font-family: "Microsoft YaHei";
line-height: 26px; line-height: 26px;
color: rgb(5, 95, 194); color: rgb(5, 95, 194);
} }
.more { .more {
width: 49px; width: 49px;
height: 24px; height: 24px;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
font-family: 'Microsoft YaHei'; font-family: "Microsoft YaHei";
line-height: 24px; line-height: 24px;
color: rgb(5, 95, 194); color: rgb(5, 95, 194);
position: absolute; position: absolute;
top: 12px; top: 12px;
right: 27px; right: 27px;
cursor: pointer; cursor: pointer;
} }
} }
.left-main { .left-main {
width: 792px; width: 792px;
height: 402px; height: 402px;
padding: 20px 22px 21px 21px; padding: 20px 22px 21px 21px;
.main-item { .main-item {
width: 749px; width: 749px;
height: 64px; height: 64px;
display: flex; display: flex;
border-bottom: 1px solid rgba(240, 242, 244, 1); border-bottom: 1px solid rgba(240, 242, 244, 1);
margin-bottom: 14px; margin-bottom: 14px;
img { &:hover {
width: 72px; background-color: #f9f9f9;
height: 48px; }
margin-right: 20px; img {
cursor: pointer; width: 72px;
} height: 48px;
.item-content { margin-right: 20px;
width: 657px; cursor: pointer;
height: 50px; }
position: relative; .item-content {
.title { width: 657px;
font-size: 16px; height: 50px;
font-weight: 700; position: relative;
font-family: 'Microsoft YaHei'; .title {
line-height: 24px; width: 480px;
color: rgb(59, 65, 75); font-size: 16px;
cursor: pointer; font-weight: 700;
} font-family: "Microsoft YaHei";
.content { line-height: 24px;
font-size: 16px; color: rgb(59, 65, 75);
font-weight: 400; cursor: pointer;
font-family: 'Microsoft YaHei'; overflow: hidden;
line-height: 24px; white-space: nowrap;
color: rgb(59, 65, 75); text-overflow: ellipsis;
cursor: pointer; }
} .content {
.time { width: 100%;
position: absolute; font-size: 16px;
top: 0px; font-weight: 400;
right: 0px; font-family: "Microsoft YaHei";
font-size: 14px; line-height: 24px;
font-weight: 400; color: rgb(59, 65, 75);
font-family: 'Microsoft YaHei'; cursor: pointer;
line-height: 22px; overflow: hidden;
color: rgb(95, 101, 108); white-space: nowrap;
cursor: pointer; text-overflow: ellipsis;
} }
} .time {
} position: absolute;
} top: 0px;
} right: 0px;
.right { font-size: 14px;
width: 792px; font-weight: 400;
height: 450px; font-family: "Microsoft YaHei";
border-radius: 10px; line-height: 22px;
border: 1px solid rgb(234, 236, 238); color: rgb(95, 101, 108);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); cursor: pointer;
background-color: #fff; }
.right-title { }
width: 792px; }
height: 48px; }
border-bottom: 1px solid rgb(234, 236, 238); }
position: relative; .right {
img { width: 792px;
width: 19px; height: 450px;
height: 19px; border-radius: 10px;
position: absolute; border: 1px solid rgb(234, 236, 238);
top: 16px; box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
left: 21px; background-color: #fff;
} .right-title {
.tit { width: 792px;
margin-left: 60px; height: 48px;
width: 80px; border-bottom: 1px solid rgb(234, 236, 238);
height: 48px; position: relative;
padding: 11px 0; img {
font-size: 20px; width: 19px;
font-weight: 700; height: 19px;
font-family: 'Microsoft YaHei'; position: absolute;
line-height: 26px; top: 16px;
color: rgb(5, 95, 194); left: 21px;
} }
.more { .tit {
width: 49px; margin-left: 60px;
height: 24px; width: 80px;
font-size: 16px; height: 48px;
font-weight: 400; padding: 11px 0;
font-family: 'Microsoft YaHei'; font-size: 20px;
line-height: 24px; font-weight: 700;
color: rgb(5, 95, 194); font-family: "Microsoft YaHei";
position: absolute; line-height: 26px;
top: 12px; color: rgb(5, 95, 194);
right: 27px; }
cursor: pointer; .more {
} width: 49px;
} height: 24px;
.right-main { font-size: 16px;
width: 792px; font-weight: 400;
height: 402px; font-family: "Microsoft YaHei";
padding: 23px 30px 25px 21px; line-height: 24px;
.trump { color: rgb(5, 95, 194);
width: 740px; position: absolute;
height: 148px; top: 12px;
margin-bottom: 16px; right: 27px;
display: flex; cursor: pointer;
img { }
width: 36px; }
height: 36px; .right-main {
margin-right: 8.5px; width: 792px;
} height: 402px;
.trump-main { padding: 23px 30px 25px 21px;
width: 695.6px; overflow: auto;
height: 148px; .social-item {
background-image: url('./assets/title01bg.png'); width: 740px;
padding: 11px 14px 12px 22.5px; margin-bottom: 16px;
background-size: cover; display: flex;
position: relative; cursor: pointer;
.cl1 { img {
font-size: 16px; width: 36px;
font-weight: 700; height: 36px;
font-family: 'Microsoft YaHei'; margin-right: 8.5px;
line-height: 24px; border-radius: 50%;
color: rgb(59, 65, 75); }
margin-bottom: 5px; .social-item-main {
} width: 695.6px;
.cl2 { padding: 11px 14px 12px 22.5px;
font-size: 16px; background-size: 100% 100%;
font-weight: 400; background-repeat: no-repeat;
font-family: 'Microsoft YaHei'; position: relative;
line-height: 24px; .cl1 {
color: rgb(59, 65, 75); font-size: 16px;
} font-weight: 700;
.cl3 { font-family: "Microsoft YaHei";
position: absolute; line-height: 24px;
top: 11px; color: rgb(59, 65, 75);
right: 14px; margin-bottom: 5px;
font-size: 16px; }
font-weight: 400; .cl2 {
font-family: 'Microsoft YaHei'; font-size: 16px;
line-height: 30px; font-weight: 400;
color: rgb(95, 101, 108); font-family: "Microsoft YaHei";
} line-height: 24px;
} color: rgb(59, 65, 75);
} }
.mask { .cl3 {
width: 740px; position: absolute;
height: 76px; top: 11px;
margin-bottom: 16px; right: 14px;
display: flex; font-size: 16px;
img { font-weight: 400;
width: 36px; font-family: "Microsoft YaHei";
height: 36px; line-height: 30px;
margin-right: 8.5px; color: rgb(95, 101, 108);
} }
.mask-main { }
width: 695.6px; }
height: 76px; }
background-image: url('./assets/title02bg.png'); }
padding: 11px 14px 12px 22.5px;
background-size: cover;
position: relative;
.cl1 {
font-size: 16px;
font-weight: 700;
font-family: 'Microsoft YaHei';
line-height: 24px;
color: rgb(59, 65, 75);
margin-bottom: 5px;
}
.cl2 {
font-size: 16px;
font-weight: 400;
font-family: 'Microsoft YaHei';
line-height: 24px;
color: rgb(59, 65, 75);
}
.cl3 {
position: absolute;
top: 11px;
right: 14px;
font-size: 16px;
font-weight: 400;
font-family: 'Microsoft YaHei';
line-height: 30px;
color: rgb(95, 101, 108);
}
}
}
.malaby {
width: 740px;
height: 98px;
margin-bottom: 16px;
display: flex;
img {
width: 36px;
height: 36px;
margin-right: 8.5px;
}
.malaby-main {
width: 695.6px;
height: 98px;
background-image: url('./assets/title03bg.png');
padding: 11px 14px 12px 22.5px;
background-size: cover;
position: relative;
.cl1 {
font-size: 16px;
font-weight: 700;
font-family: 'Microsoft YaHei';
line-height: 24px;
color: rgb(59, 65, 75);
margin-bottom: 5px;
}
.cl2 {
font-size: 16px;
font-weight: 400;
font-family: 'Microsoft YaHei';
line-height: 24px;
color: rgb(59, 65, 75);
}
.cl3 {
position: absolute;
top: 11px;
right: 14px;
font-size: 16px;
font-weight: 400;
font-family: 'Microsoft YaHei';
line-height: 30px;
color: rgb(95, 101, 108);
}
}
}
}
}
} }
</style> </style>
\ No newline at end of file
<template> <template>
<div class="data-new"> <div class="data-new">
<div class="left"> <div class="left">
<img src="./assets/leftbtn.png" alt="" class="left-btn" /> <img src="./assets/leftbtn.png" alt="" class="left-btn" @click="handlePrev" />
<img src="./assets/rightbtn.png" alt="" class="right-btn" /> <img src="./assets/rightbtn.png" alt="" class="right-btn" @click="handleNext" />
<div class="left-top"> <div class="left-top">
<img src="./assets/icon01.png" alt="" /> <img src="./assets/icon01.png" alt="" />
<div class="left-top-title">规则限制动态</div> <div class="left-top-title">规则限制动态</div>
<div class="more" @click="handleClickToDetail">查看详情 ></div> <div class="more" @click="handleClickToDetail">查看详情 ></div>
</div> </div>
<div class="left-center">
<img src="./assets/usImg.png" alt="" /> <el-carousel
<div class="left-center-main"> ref="carouselRef"
<div class="left-center-main-title"> height="412px"
美国联邦通信委员会(FCC)启动撤销重庆信息通信研究院作为认可测试实验室资格的程序 direction="horizontal"
:autoplay="true"
:interval="5000"
arrow="never"
indicator-position="none"
@change="handleCarouselChange"
>
<el-carousel-item v-for="(item, index) in riskSignalList" :key="item.RULEID || index">
<div class="carousel-item-content">
<div class="left-center">
<img :src="item.PUBLISHORGIMGURL || defaultImg" alt="" />
<div class="left-center-main">
<div class="left-center-main-title">
{{ item.RULENAMEZH || "暂无动态" }}
</div>
<div class="left-center-main-ul">
<ul>
<li>
<span class="ul-title">发布机构:</span>
<span class="ul-content">{{ item.PUBLISHORGNAME || "未知" }}</span>
</li>
<li>
<span class="ul-title">发布日期:</span>
<span class="ul-content">{{ item.PUBLISHDATE || "未知" }}</span>
</li>
<li>
<span class="ul-title">涉及领域:</span>
<div class="ul-tags" v-if="item.ruleAreas && item.ruleAreas.length > 0">
<span
v-for="(field, fIndex) in item.ruleAreas"
:key="fIndex"
class="ul-pie"
:class="'cl' + ((fIndex % 4) + 1)"
>
{{ field }}
</span>
</div>
<span v-else class="ul-content">未知</span>
</li>
<li>
<span class="ul-title">限制实体:</span>
<span class="ul-content">
{{
item.ruleEntities && item.ruleEntities.length > 0
? item.ruleEntities.map(e => e.ORGNAME).join("、")
: "未知"
}}
</span>
</li>
</ul>
</div>
</div>
</div>
<div class="left-bottom">
<ul>
<li class="left-bottom-li">内容摘要:</li>
</ul>
<div class="left-bottom-content">
{{ item.RULEINTRODUCTION || "暂无内容摘要" }}
</div>
</div>
</div> </div>
<div class="left-center-main-ul"> </el-carousel-item>
<ul>
<li> <!-- 无数据时的占位展示 -->
<span class="ul-title">发布机构:</span> <el-carousel-item v-if="riskSignalList.length === 0">
<span class="ul-content">美国联邦通信委员会(FCC)工程技术与媒体关系部</span> <div class="carousel-item-content">
</li> <div class="left-center">
<li> <img :src="defaultImg" alt="" />
<span class="ul-title">发布日期:</span> <div class="left-center-main">
<span class="ul-content">2025年10月24日</span> <div class="left-center-main-title">暂无规则限制动态</div>
</li> <div class="left-center-main-ul">
<li> <ul>
<span class="ul-title">涉及领域:</span> <li><span class="ul-title">发布机构:</span><span class="ul-content">未知</span></li>
<span class="ul-pie cl1">能源</span> <li><span class="ul-title">发布日期:</span><span class="ul-content">未知</span></li>
<span class="ul-pie cl2">集成电路</span> <li><span class="ul-title">涉及领域:</span><span class="ul-content">未知</span></li>
<span class="ul-pie cl3">新材料</span> <li><span class="ul-title">限制实体:</span><span class="ul-content">未知</span></li>
<span class="ul-pie cl4">生物科技</span> </ul>
</li> </div>
<li> </div>
<span class="ul-title">限制实体:</span> </div>
<span class="ul-content">重庆信息通信研究院</span>
</li>
</ul>
</div> </div>
</div> </el-carousel-item>
<!-- <div class="left-center-title">国会法案</div> --> </el-carousel>
</div>
<div class="left-bottom">
<ul>
<li class="left-bottom-li">内容摘要:</li>
</ul>
<div class="left-bottom-content">
工程和技术办公室着手撤销对德国莱茵 TÜV 集团/中国检验认证集团(宁波)有限公司作为认可测试实验室的资格。
</div>
</div>
</div> </div>
<div class="right"> <div class="right">
<div class="right-top"> <div class="right-top">
<img src="./assets/icon02.png" alt="" /> <img src="./assets/icon02.png" alt="" />
<div class="right-top-title"> <div class="right-top-title">
风险信号 风险信号
<span>4</span> <span>{{ riskSignals.length }}</span>
</div> </div>
</div> </div>
<div style="margin: 6px 34px 0 23px"> <div style="margin: 6px 34px 0 23px">
<div v-for="item in list" :key="item.id" class="right-main" @click="handleClickToDetail"> <div v-for="item in riskSignals" :key="item.id" class="right-main" @click="handleToRiskDetail(item)">
<div class="main-left" :class="{ cl4: item.title === '特别重大', cl5: item.title === '重大风险' }"> <div
class="main-left"
:class="{ cl4: item.title === '特别重大', cl5: item.title === '重大风险', cl6: item.title === '一般风险' }"
>
{{ item.title }} {{ item.title }}
</div> </div>
<div class="main-center">{{ item.content }}</div> <div class="item-right">
<div class="main-right">{{ item.time }}</div> <div class="main-center">
<CommonPrompt :content="item.content">
{{ item.content }}
</CommonPrompt>
</div>
<div class="main-right">{{ item.time }}</div>
</div>
</div> </div>
</div> </div>
<div class="right-mainbtn" @click="handleToMoreRiskSignal"> <div class="right-mainbtn" @click="handleToMoreRiskSignal">
...@@ -75,44 +132,101 @@ ...@@ -75,44 +132,101 @@
</template> </template>
<script setup> <script setup>
import { ref } from "vue"; import { ref, onMounted, computed } from "vue";
import router from "@/router"; import router from "@/router";
import { getRuleRestrictionLatest, getRuleRestrictionRiskSignal } from "@/api/ruleRestriction/ruleRestriction";
import defaultImg from "./assets/usImg.png";
import CommonPrompt from "../../commonPrompt/index.vue";
const list = ref([ // 规则限制-查询风险信号数据
{ const riskSignals = ref([]);
id: 1, const getRuleRestrictionRiskSignalData = async () => {
title: "特别重大", try {
content: "保护美国资金与专业知识免受敌对研究利用法案", const res = await getRuleRestrictionRiskSignal({ moduleId: "0108" });
time: "一天前" if (res && res.code === 200) {
}, riskSignals.value = (res.data || []).map(item => ({
{ id: item.signalId,
id: 2, title: item.signalLevel,
title: "特别重大", content: item.signalTitle,
content: "美国国土安全部终止哈佛大学SEVP认证", time: item.signalTime,
time: "一天前" ruleLimitId: item.ruleLimitId
}, }));
{ }
id: 3, } catch (error) {
title: "重大风险", console.error("获取规则限制风险信号数据失败:", error);
content: "众议院“美中战略竞争特别委员会”向国会提...",
time: "一天前"
},
{
id: 4,
title: "重大风险",
content: '2026财年拨款法案要求重启"中国行动计划"',
time: "一天前"
} }
]); };
// 跳转详情
const handleClickToDetail = () => {
// router.push("/decreeLayout"); // 规则限制-获取规则限制动态
const route = router.resolve("/ruleRestrictions/detail"); const riskSignalList = ref([]);
window.open(route.href, "_blank"); const carouselRef = ref(null);
const activeIndex = ref(0);
const getRuleRestrictionLatestData = async () => {
try {
const res = await getRuleRestrictionLatest();
if (res && res.code === 200) {
riskSignalList.value = res.data || [];
}
} catch (error) {
console.error("获取规则限制动态数据失败:", error);
}
};
// 轮播图手动切换
const handlePrev = () => {
if (carouselRef.value) {
carouselRef.value.prev();
}
};
const handleNext = () => {
if (carouselRef.value) {
carouselRef.value.next();
}
};
// 轮播切换回调
const handleCarouselChange = index => {
activeIndex.value = index;
}; };
// 查看更多风险信号 // 左侧展示的主动态
const mainTrend = computed(() => {
if (riskSignalList.value.length === 0) return null;
return riskSignalList.value[activeIndex.value] || riskSignalList.value[0];
});
onMounted(() => {
getRuleRestrictionLatestData();
getRuleRestrictionRiskSignalData();
});
// 点击风险信号详情
const handleToRiskDetail = (item) => {
const curRoute = router.resolve({
path: "/ruleRestrictions/detail",
query: { id: item.ruleLimitId },
});
window.open(curRoute.href, "_blank");
};
// 点击查看详情
const handleClickToDetail = item => {
const activeItem = item && item.RULEID ? item : mainTrend.value;
const id = activeItem?.RULEID;
if (!id) return;
window.sessionStorage.setItem("curTabName", activeItem?.RULENAMEZH);
const curRoute = router.resolve({
path: "/ruleRestrictions/detail",
query: { id: id }
});
window.open(curRoute.href, "_blank");
};
// 查看更多动态
const handleToMoreRiskSignal = () => { const handleToMoreRiskSignal = () => {
const route = router.resolve("/riskSignal"); const route = router.resolve("/riskSignal");
window.open(route.href, "_blank"); window.open(route.href, "_blank");
...@@ -145,6 +259,8 @@ const handleToMoreRiskSignal = () => { ...@@ -145,6 +259,8 @@ const handleToMoreRiskSignal = () => {
top: 223px; top: 223px;
left: 0px; left: 0px;
cursor: pointer; cursor: pointer;
z-index: 100;
pointer-events: auto;
} }
.right-btn { .right-btn {
width: 24px; width: 24px;
...@@ -153,6 +269,8 @@ const handleToMoreRiskSignal = () => { ...@@ -153,6 +269,8 @@ const handleToMoreRiskSignal = () => {
top: 223px; top: 223px;
right: 0px; right: 0px;
cursor: pointer; cursor: pointer;
z-index: 100;
pointer-events: auto;
} }
.left-top { .left-top {
width: 100%; width: 100%;
...@@ -177,6 +295,7 @@ const handleToMoreRiskSignal = () => { ...@@ -177,6 +295,7 @@ const handleToMoreRiskSignal = () => {
right: 40px; right: 40px;
color: rgb(5, 95, 194); color: rgb(5, 95, 194);
cursor: pointer; cursor: pointer;
z-index: 101;
} }
.left-top-title { .left-top-title {
margin-left: 60px; margin-left: 60px;
...@@ -192,6 +311,10 @@ const handleToMoreRiskSignal = () => { ...@@ -192,6 +311,10 @@ const handleToMoreRiskSignal = () => {
padding: 11px 16px; padding: 11px 16px;
} }
} }
.carousel-item-content {
width: 100%;
height: 100%;
}
.left-center { .left-center {
width: 967px; width: 967px;
height: 208px; height: 208px;
...@@ -220,15 +343,24 @@ const handleToMoreRiskSignal = () => { ...@@ -220,15 +343,24 @@ const handleToMoreRiskSignal = () => {
// width: 439px; // width: 439px;
height: 132px; height: 132px;
ul { ul {
list-style-position: inside; list-style: none;
li { li {
width: 100%; width: 100%;
height: 24px; min-height: 24px;
margin-bottom: 12px; margin-bottom: 12px;
display: flex;
align-items: flex-start;
&::before {
content: "·";
font-size: 24px;
line-height: 20px;
font-weight: bold;
margin-right: 16px;
color: rgb(59, 65, 75);
}
.ul-title { .ul-title {
display: inline-block; flex-shrink: 0;
width: 120px; width: 120px;
height: 24px;
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
font-family: "Microsoft YaHei"; font-family: "Microsoft YaHei";
...@@ -236,19 +368,28 @@ const handleToMoreRiskSignal = () => { ...@@ -236,19 +368,28 @@ const handleToMoreRiskSignal = () => {
color: rgb(59, 65, 75); color: rgb(59, 65, 75);
} }
.ul-content { .ul-content {
flex: 1;
color: rgb(59, 65, 75); color: rgb(59, 65, 75);
font-family: "Microsoft YaHei"; font-family: "Microsoft YaHei";
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 24px; line-height: 24px;
} }
.ul-tags {
flex: 1;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.ul-pie { .ul-pie {
display: inline-block; display: inline-block;
box-sizing: border-box; box-sizing: border-box;
padding: 2px 8px; padding: 2px 8px;
border: 1px solid; border: 1px solid;
border-radius: 4px; border-radius: 4px;
margin-right: 8px; font-size: 14px;
line-height: 18px;
white-space: nowrap;
} }
.cl1 { .cl1 {
border-color: rgba(186, 224, 255, 1); border-color: rgba(186, 224, 255, 1);
...@@ -292,7 +433,7 @@ const handleToMoreRiskSignal = () => { ...@@ -292,7 +433,7 @@ const handleToMoreRiskSignal = () => {
.left-bottom { .left-bottom {
margin: 17px 0 0 62px; margin: 17px 0 0 62px;
ul { ul {
list-style-position: inside; list-style: none;
.left-bottom-li { .left-bottom-li {
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
...@@ -300,6 +441,16 @@ const handleToMoreRiskSignal = () => { ...@@ -300,6 +441,16 @@ const handleToMoreRiskSignal = () => {
line-height: 24px; line-height: 24px;
color: rgb(59, 65, 75); color: rgb(59, 65, 75);
margin-bottom: 10px; margin-bottom: 10px;
display: flex;
align-items: center;
&::before {
content: "·";
font-size: 24px;
line-height: 20px;
font-weight: bold;
margin-right: 12px;
color: rgb(59, 65, 75);
}
} }
} }
.left-bottom-content { .left-bottom-content {
...@@ -391,25 +542,40 @@ const handleToMoreRiskSignal = () => { ...@@ -391,25 +542,40 @@ const handleToMoreRiskSignal = () => {
background-color: rgba(255, 247, 230, 1); background-color: rgba(255, 247, 230, 1);
color: rgba(250, 140, 22, 1); color: rgba(250, 140, 22, 1);
} }
.main-center { .cl6 {
width: 347px; background-color: rgba(246, 255, 237, 1);
height: 30px; color: rgba(82, 196, 26, 1);
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 30px;
color: rgb(59, 65, 75);
margin-right: 2px;
} }
.main-right { .item-right {
width: 60px; flex: 1;
height: 24px; display: flex;
font-size: 16px; justify-content: space-between;
font-weight: 400; align-items: center;
font-family: "Microsoft YaHei"; overflow: hidden;
line-height: 24px; .main-center {
color: rgb(132, 136, 142); flex: 1;
text-align: right; height: 30px;
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 30px;
color: rgb(59, 65, 75);
margin-right: 10px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.main-right {
width: 100px;
height: 24px;
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(132, 136, 142);
text-align: right;
flex-shrink: 0;
}
} }
} }
.right-mainbtn { .right-mainbtn {
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论