Skip to content

R
risk-monitor
提交 06d24cf3 authored 作者: 李智林's avatar 李智林
浏览文件
操作

规则限制

上级 3cf485d8
隐藏空白字符变更
内嵌 并排
正在显示 包含 750 行增加 和 604 行删除
src/api/exportControlV2.0.js
浏览文件 @ 06d24cf3
......@@ -278,6 +278,7 @@ export function getSingleSanctionBackground(data) {
* @param {Boolean} [data.isOnlyCn=true] - 是否仅查询中国数据
* @param {String} [data.domainId] - 科技领域ID
* @param {String} [data.searchText] - 搜索文本
* @param {String} [data.searchType] - 搜索类型
* @header token
*/
export function getSingleSanctionOverviewList(data) {
......
src/api/ruleRestriction/ruleRestriction.js 0 → 100644
浏览文件 @ 06d24cf3
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
src/views/bill/background/index.vue
浏览文件 @ 06d24cf3
......@@ -938,9 +938,9 @@ onMounted(() => {
height: 22px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 600;
line-height: 22px;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
......
src/views/bill/billLayout/index.vue
浏览文件 @ 06d24cf3
......@@ -274,11 +274,9 @@ onMounted(() => {
display: flex;
justify-content: space-between;
margin: 0 auto;
padding: 14px 0;
padding-top: 10px;
.layout-main-header-left-box {
width: 900px;
// margin-left: 160px;
// margin-top: 13px;
.left-box-top {
height: 64px;
display: flex;
......
src/views/bill/deepDig/poliContribution/index.vue
浏览文件 @ 06d24cf3
......@@ -933,7 +933,7 @@ onMounted(() => {
width: 1064px;
height: 846px;
.box2 {
width: 1064px;
width: 1210px;
height: 415px;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
......@@ -948,7 +948,7 @@ onMounted(() => {
}
.box3 {
margin-top: 16px;
width: 1064px;
width: 1210px;
height: 415px;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
......
src/views/bill/deepDig/processAnalysis/index.vue
浏览文件 @ 06d24cf3
......@@ -1103,7 +1103,7 @@ onMounted(async () => {
.right {
margin-left: 16px;
margin-top: 16px;
width: 860px;
width: 868px;
height: 847px;
background: rgb(255, 255, 255);
.box3 {
......
src/views/bill/template/index.vue
浏览文件 @ 06d24cf3
......@@ -182,26 +182,12 @@ const handleSelectBtn = index => {
btnActiveIndex.value = index;
};
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 chart1Data = ref([]);
const chart1ColorList = ref(["#4096ff", "#b37feb", "#ff7875", "#85a5ff", "#69b1ff", "#ffc069", "#87e8de"]);
const chart2ColorList = ref(["#ff7875", "#85a5ff", "#95de64", "#ffc069", "#85e5db"]);
const chart2Data = ref([
// { name: "军工", value: 85 },
// { name: "金融业", value: 98 },
// { name: "新能源", value: 95 },
// { name: "半导体", value: 80 },
// { name: "跨境电商", value: 71 },
]);
const chart2Data = ref([]);
// 绘制echarts图表
const setChart = (option, chartId) => {
......@@ -367,8 +353,6 @@ onMounted(async () => {
handleGetBillContentTk("N");
await handleGetBillContentXzfs();
await handleGetBillHyly();
let chart1 = getPieChart(chart1Data.value, chart1ColorList.value);
setChart(chart1, "chart1");
});
</script>
......
src/views/coopRestriction/components/dataNew/index.vue
浏览文件 @ 06d24cf3
......@@ -142,7 +142,8 @@ const getCoopRestrictionSignalsData = async () => {
id: item.signalId,
title: item.signalLevel,
content: item.signalTitle,
time: item.signalTime
time: item.signalTime,
cooperationId: item.cooperationId
}));
}
} catch (error) {
......@@ -211,7 +212,7 @@ const handleClickToDetail = item => {
const handleToRiskDetail = (item) => {
const curRoute = router.resolve({
path: "/cooperationRestrictions/detail",
query: { id: item.id },
query: { id: item.cooperationId },
});
window.open(curRoute.href, "_blank");
};
......
src/views/exportControl/v2.0SingleSanction/components/impactAnalysis/components/industrialImpact/index.vue
浏览文件 @ 06d24cf3
......@@ -480,74 +480,30 @@ const activeMarketShare = ref("总体市场份额");
const marketShareOptions = ["总体市场份额"];
const chartData = ref({
dates: [
"2023\nQ3",
"2023\nQ4",
"2024\nQ1",
"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
dates: [],
values: [],
sanctionDate: "",
endValue: 0
});
const marketChartData = ref({
dates: [
"2023\nQ3",
"2023\nQ4",
"2024\nQ1",
"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
dates: [],
values: [],
sanctionDate: "",
endValue: 0
});
const rdChartData = ref({
dates: [
"2023\nQ3",
"2023\nQ4",
"2024\nQ1",
"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,
dates: [],
values: [],
sanctionDate: "",
endValue: 0
});
const shareChartData = ref({
dates: [
"2023\nQ3",
"2023\nQ4",
"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",
dates: [],
values: [],
sanctionDate: "",
unit: "%",
});
......@@ -602,7 +558,7 @@ const getBaseOption = (data) => {
const initRevenueChart = () => {
const dom = chartRef.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);
const lastDate = data.dates[data.dates.length - 1];
......@@ -670,7 +626,7 @@ const initRevenueChart = () => {
const initMarketChart = () => {
const dom = marketChartRef.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);
const lastDate = data.dates[data.dates.length - 1];
......@@ -731,7 +687,7 @@ const initMarketChart = () => {
const initRDChart = () => {
const dom = rdChartRef.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);
const lastDate = data.dates[data.dates.length - 1];
......@@ -851,13 +807,6 @@ onMounted(async () => {
if (selectedCompanyId.value) {
getRevenueData();
}
nextTick(() => {
initRevenueChart();
initMarketChart();
initRDChart();
initShareChart();
});
});
</script>
......
src/views/exportControl/v2.0SingleSanction/components/sanctionsOverview/index.vue
浏览文件 @ 06d24cf3
......@@ -247,6 +247,7 @@ const getSanctionOverviewList = async () => {
isOnlyCn: onlyChina.value,
domainId: filterField.value || undefined,
searchText: searchKeyword.value || undefined,
searchType: searchType.value
})
if (res.code === 200) {
const data = res.data || {}
......@@ -407,9 +408,10 @@ const onlyChina = ref(false)
const filterField = ref('')
const searchKeyword = ref('')
const activeTab = ref('add')
const searchType = computed(() => activeTab.value)
// 监听筛选条件变化
watch([onlyChina, filterField], () => {
watch([onlyChina, filterField, activeTab], () => {
getSanctionOverviewList()
})
......
src/views/ruleRestriction/commonPrompt/index.vue 0 → 100644
浏览文件 @ 06d24cf3
<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>
src/views/ruleRestriction/components/askPage/index.vue
浏览文件 @ 06d24cf3
<template>
<div class="ask-page">
<div class="left">
<div class="left-title">
<img src="./assets/icon01.png" alt="">
<div class="tit">新闻资讯</div>
<div class="more" @click="handleToMoreNews">更多 +</div>
</div>
<div class="left-main">
<div v-for="item in leftList" :key="item.id" class="main-item">
<img :src="item.image" alt="">
<div class="item-content">
<div class="title">{{item.title}}</div>
<div class="content">{{item.content}}</div>
<div class="time">{{item.time}}</div>
</div>
</div>
</div>
</div>
<div class="right">
<div class="right-title">
<img src="./assets/icon02.png" alt="">
<div class="tit">社交媒体</div>
</div>
<div class="right-main">
<div class="trump">
<img src="./assets/title01.png" alt="">
<div class="trump-main">
<div class="cl1">{{ rightList[0].name }}</div>
<div class="cl2">{{ rightList[0].content }}</div>
<div class="cl3">{{ rightList[0].time }}</div>
</div>
</div>
<div class="mask">
<img src="./assets/title02.png" alt="">
<div class="mask-main">
<div class="cl1">{{ rightList[1].name }}</div>
<div class="cl2">{{ rightList[1].content }}</div>
<div class="cl3">{{ rightList[1].time }}</div>
</div>
</div>
<div class="malaby">
<img src="./assets/title03.png" alt="">
<div class="malaby-main">
<div class="cl1">{{ rightList[2].name }}</div>
<div class="cl2">{{ rightList[2].content }}</div>
<div class="cl3">{{ rightList[2].time }}</div>
</div>
</div>
</div>
</div>
</div>
<div class="ask-page">
<div class="left">
<div class="left-title">
<img src="./assets/icon01.png" alt="" />
<div class="tit">新闻资讯</div>
<div class="more" @click="handleToMoreNews">更多 +</div>
</div>
<div class="left-main">
<div v-for="item in leftList.slice(0, 5)" :key="item.id" class="main-item" @click="handleToNewsDetail(item)">
<img :src="item.image || defaultNews" alt="" @error="e => (e.target.src = defaultNews)" />
<div class="item-content">
<div class="title">
<CommonPrompt :content="item.title">
{{ item.title }}
</CommonPrompt>
</div>
<div class="content">
<CommonPrompt :content="item.content">
{{ item.content }}
</CommonPrompt>
</div>
<div class="time">{{ item.time }}</div>
</div>
</div>
</div>
</div>
<div class="right">
<div class="right-title">
<img src="./assets/icon02.png" alt="" />
<div class="tit">社交媒体</div>
</div>
<div class="right-main">
<div
v-for="(item, index) in rightList.slice(0, 3)"
:key="item.id"
class="social-item"
@click="handleToSocialDetail(item)"
>
<img :src="item.image || defaultAvatar" alt="" @error="e => (e.target.src = defaultAvatar)" />
<div class="social-item-main" :style="{ backgroundImage: `url(${socialConfig[index].bg})` }">
<div class="cl1">{{ item.name }}</div>
<div class="cl2">{{ item.content }}</div>
<div class="cl3">{{ item.time }}</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from "vue";
import router from "@/router"
import image01 from './assets/image01.png'
import image02 from './assets/image02.png'
import image03 from './assets/image03.png'
import image04 from './assets/image04.png'
import image05 from './assets/image05.png'
import { ref, onMounted } from "vue";
import router from "@/router";
import { getRuleRestrictionNews, getRuleRestrictionSocialMedia } from "@/api/ruleRestriction/ruleRestriction";
import CommonPrompt from "../../commonPrompt/index.vue";
import title01 from './assets/title01.png'
import title02 from './assets/title02.png'
import title03 from './assets/title03.png'
import defaultNews from "../../assets/images/default-icon-news.png";
import defaultAvatar from "../../assets/images/default-icon1.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([
{
id:1,
title:'美国智库激辩人工智能监管路径',
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 socialConfig = [
{ icon: title01, bg: title01bg },
{ icon: title02, bg: title02bg },
{ icon: title03, bg: title03bg }
];
const rightList = ref([
{
id:1,
name:'唐纳德·特朗普',
content:'埃隆·马斯克在强力支持我竞选总统之前，早就知道我强烈反对‘电动汽车强制令’。这太荒谬了，这一直是我竞选活动的主要部分。电动汽车没问题，但不应该强迫每个人都拥有一辆。埃隆获得的补贴可能远远超过历史上任何一个人。如果没有补贴，埃隆可能不得不关门大吉，回到南非老家。',
time:'15:23 · 发布于真实社交',
title:title01
},
{
id:2,
name:'埃隆·马斯克',
content:'如果这个疯狂的支出法案获得通过，‘美国党’将在第二天成立。',
time:'14:49 · 发布于X',
title:title02
},
{
id:3,
name:'塞巴斯蒂安·马拉比',
content:'提出特朗普政府的AI政策强调技术开放与快速应用，但可能以牺牲安全防范为代价，开启了“潘多拉魔盒”。',
time:'11:05 · 发布于X',
title:title03
}
])
// 规则限制-查询新闻资讯接口
const getRuleRestrictionNewsData = async () => {
try {
const res = await getRuleRestrictionNews({ moduleId: "0108" });
if (res && res.code === 200) {
leftList.value = (res.data || []).map(item => ({
id: item.newsId,
title: item.newsTitle,
content: item.newsContent,
time: `${item.newsDate}${item.newsOrg ? " · " + item.newsOrg : ""}`,
image: item.newsImage
}));
}
} catch (error) {
console.error("获取规则限制新闻资讯数据失败:", error);
}
};
// 规则限制-查询社交媒体接口
const getRuleRestrictionSocialData = async () => {
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 = () => {
......@@ -134,6 +124,32 @@ const handleToMoreNews = () => {
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>
<style scoped lang="scss">
......@@ -142,287 +158,211 @@ const handleToMoreNews = () => {
padding: 0;
}
.ask-page {
width: 1600px;
height: 450px;
display: flex;
width: 1600px;
height: 450px;
display: flex;
justify-content: space-between;
.left {
width: 792px;
height: 450px;
margin-right: 16px;
border-radius: 10px;
border: 1px solid rgb(234, 236, 238);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background-color: #fff;
.left-title {
width: 792px;
height: 48px;
border-bottom: 1px solid rgb(234, 236, 238);
position: relative;
img {
width: 19px;
height: 19px;
position: absolute;
top: 16px;
left: 21px;
}
.tit {
margin-left: 60px;
width: 80px;
height: 48px;
padding: 11px 0;
font-size: 20px;
font-weight: 700;
font-family: 'Microsoft YaHei';
line-height: 26px;
color: rgb(5, 95, 194);
}
.more {
width: 49px;
height: 24px;
font-size: 16px;
font-weight: 400;
font-family: 'Microsoft YaHei';
line-height: 24px;
color: rgb(5, 95, 194);
position: absolute;
top: 12px;
right: 27px;
cursor: pointer;
}
}
.left-main {
width: 792px;
height: 402px;
padding: 20px 22px 21px 21px;
.main-item {
width: 749px;
height: 64px;
display: flex;
border-bottom: 1px solid rgba(240, 242, 244, 1);
margin-bottom: 14px;
img {
width: 72px;
height: 48px;
margin-right: 20px;
cursor: pointer;
}
.item-content {
width: 657px;
height: 50px;
position: relative;
.title {
font-size: 16px;
font-weight: 700;
font-family: 'Microsoft YaHei';
line-height: 24px;
color: rgb(59, 65, 75);
cursor: pointer;
}
.content {
font-size: 16px;
font-weight: 400;
font-family: 'Microsoft YaHei';
line-height: 24px;
color: rgb(59, 65, 75);
cursor: pointer;
}
.time {
position: absolute;
top: 0px;
right: 0px;
font-size: 14px;
font-weight: 400;
font-family: 'Microsoft YaHei';
line-height: 22px;
color: rgb(95, 101, 108);
cursor: pointer;
}
}
}
}
}
.right {
width: 792px;
height: 450px;
border-radius: 10px;
border: 1px solid rgb(234, 236, 238);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background-color: #fff;
.right-title {
width: 792px;
height: 48px;
border-bottom: 1px solid rgb(234, 236, 238);
position: relative;
img {
width: 19px;
height: 19px;
position: absolute;
top: 16px;
left: 21px;
}
.tit {
margin-left: 60px;
width: 80px;
height: 48px;
padding: 11px 0;
font-size: 20px;
font-weight: 700;
font-family: 'Microsoft YaHei';
line-height: 26px;
color: rgb(5, 95, 194);
}
.more {
width: 49px;
height: 24px;
font-size: 16px;
font-weight: 400;
font-family: 'Microsoft YaHei';
line-height: 24px;
color: rgb(5, 95, 194);
position: absolute;
top: 12px;
right: 27px;
cursor: pointer;
}
}
.right-main {
width: 792px;
height: 402px;
padding: 23px 30px 25px 21px;
.trump {
width: 740px;
height: 148px;
margin-bottom: 16px;
display: flex;
img {
width: 36px;
height: 36px;
margin-right: 8.5px;
}
.trump-main {
width: 695.6px;
height: 148px;
background-image: url('./assets/title01bg.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);
}
}
}
.mask {
width: 740px;
height: 76px;
margin-bottom: 16px;
display: flex;
img {
width: 36px;
height: 36px;
margin-right: 8.5px;
}
.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);
}
}
}
}
}
.left {
width: 792px;
height: 450px;
margin-right: 16px;
border-radius: 10px;
border: 1px solid rgb(234, 236, 238);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background-color: #fff;
.left-title {
width: 792px;
height: 48px;
border-bottom: 1px solid rgb(234, 236, 238);
position: relative;
img {
width: 19px;
height: 19px;
position: absolute;
top: 16px;
left: 21px;
}
.tit {
margin-left: 60px;
width: 80px;
height: 48px;
padding: 11px 0;
font-size: 20px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 26px;
color: rgb(5, 95, 194);
}
.more {
width: 49px;
height: 24px;
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(5, 95, 194);
position: absolute;
top: 12px;
right: 27px;
cursor: pointer;
}
}
.left-main {
width: 792px;
height: 402px;
padding: 20px 22px 21px 21px;
.main-item {
width: 749px;
height: 64px;
display: flex;
border-bottom: 1px solid rgba(240, 242, 244, 1);
margin-bottom: 14px;
&:hover {
background-color: #f9f9f9;
}
img {
width: 72px;
height: 48px;
margin-right: 20px;
cursor: pointer;
}
.item-content {
width: 657px;
height: 50px;
position: relative;
.title {
width: 480px;
font-size: 16px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(59, 65, 75);
cursor: pointer;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.content {
width: 100%;
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(59, 65, 75);
cursor: pointer;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.time {
position: absolute;
top: 0px;
right: 0px;
font-size: 14px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 22px;
color: rgb(95, 101, 108);
cursor: pointer;
}
}
}
}
}
.right {
width: 792px;
height: 450px;
border-radius: 10px;
border: 1px solid rgb(234, 236, 238);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background-color: #fff;
.right-title {
width: 792px;
height: 48px;
border-bottom: 1px solid rgb(234, 236, 238);
position: relative;
img {
width: 19px;
height: 19px;
position: absolute;
top: 16px;
left: 21px;
}
.tit {
margin-left: 60px;
width: 80px;
height: 48px;
padding: 11px 0;
font-size: 20px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 26px;
color: rgb(5, 95, 194);
}
.more {
width: 49px;
height: 24px;
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(5, 95, 194);
position: absolute;
top: 12px;
right: 27px;
cursor: pointer;
}
}
.right-main {
width: 792px;
height: 402px;
padding: 23px 30px 25px 21px;
overflow: auto;
.social-item {
width: 740px;
margin-bottom: 16px;
display: flex;
cursor: pointer;
img {
width: 36px;
height: 36px;
margin-right: 8.5px;
border-radius: 50%;
}
.social-item-main {
width: 695.6px;
padding: 11px 14px 12px 22.5px;
background-size: 100% 100%;
background-repeat: no-repeat;
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>
\ No newline at end of file
</style>
src/views/ruleRestriction/components/dataNew/index.vue
浏览文件 @ 06d24cf3
<template>
<div class="data-new">
<div class="left">
<img src="./assets/leftbtn.png" alt="" class="left-btn" />
<img src="./assets/rightbtn.png" alt="" class="right-btn" />
<img src="./assets/leftbtn.png" alt="" class="left-btn" @click="handlePrev" />
<img src="./assets/rightbtn.png" alt="" class="right-btn" @click="handleNext" />
<div class="left-top">
<img src="./assets/icon01.png" alt="" />
<div class="left-top-title">规则限制动态</div>
<div class="more" @click="handleClickToDetail">查看详情 ></div>
</div>
<div class="left-center">
<img src="./assets/usImg.png" alt="" />
<div class="left-center-main">
<div class="left-center-main-title">
美国联邦通信委员会（FCC）启动撤销重庆信息通信研究院作为认可测试实验室资格的程序
<el-carousel
ref="carouselRef"
height="412px"
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 class="left-center-main-ul">
<ul>
<li>
<span class="ul-title">发布机构：</span>
<span class="ul-content">美国联邦通信委员会（FCC）工程技术与媒体关系部</span>
</li>
<li>
<span class="ul-title">发布日期：</span>
<span class="ul-content">2025年10月24日</span>
</li>
<li>
<span class="ul-title">涉及领域：</span>
<span class="ul-pie cl1">能源</span>
<span class="ul-pie cl2">集成电路</span>
<span class="ul-pie cl3">新材料</span>
<span class="ul-pie cl4">生物科技</span>
</li>
<li>
<span class="ul-title">限制实体：</span>
<span class="ul-content">重庆信息通信研究院</span>
</li>
</ul>
</el-carousel-item>
<!-- 无数据时的占位展示 -->
<el-carousel-item v-if="riskSignalList.length === 0">
<div class="carousel-item-content">
<div class="left-center">
<img :src="defaultImg" alt="" />
<div class="left-center-main">
<div class="left-center-main-title">暂无规则限制动态</div>
<div class="left-center-main-ul">
<ul>
<li><span class="ul-title">发布机构：</span><span class="ul-content">未知</span></li>
<li><span class="ul-title">发布日期：</span><span class="ul-content">未知</span></li>
<li><span class="ul-title">涉及领域：</span><span class="ul-content">未知</span></li>
<li><span class="ul-title">限制实体：</span><span class="ul-content">未知</span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="left-center-title">国会法案</div> -->
</div>
<div class="left-bottom">
<ul>
<li class="left-bottom-li">内容摘要：</li>
</ul>
<div class="left-bottom-content">
工程和技术办公室着手撤销对德国莱茵 TÜV 集团/中国检验认证集团（宁波）有限公司作为认可测试实验室的资格。
</div>
</div>
</el-carousel-item>
</el-carousel>
</div>
<div class="right">
<div class="right-top">
<img src="./assets/icon02.png" alt="" />
<div class="right-top-title">
风险信号
<span>4</span>
<span>{{ riskSignals.length }}</span>
</div>
</div>
<div style="margin: 6px 34px 0 23px">
<div v-for="item in list" :key="item.id" class="right-main" @click="handleClickToDetail">
<div class="main-left" :class="{ cl4: item.title === '特别重大', cl5: item.title === '重大风险' }">
<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 === '重大风险', cl6: item.title === '一般风险' }"
>
{{ item.title }}
</div>
<div class="main-center">{{ item.content }}</div>
<div class="main-right">{{ item.time }}</div>
<div class="item-right">
<div class="main-center">
<CommonPrompt :content="item.content">
{{ item.content }}
</CommonPrompt>
</div>
<div class="main-right">{{ item.time }}</div>
</div>
</div>
</div>
<div class="right-mainbtn" @click="handleToMoreRiskSignal">
......@@ -75,44 +132,101 @@
</template>
<script setup>
import { ref } from "vue";
import { ref, onMounted, computed } from "vue";
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([
{
id: 1,
title: "特别重大",
content: "保护美国资金与专业知识免受敌对研究利用法案",
time: "一天前"
},
{
id: 2,
title: "特别重大",
content: "美国国土安全部终止哈佛大学SEVP认证",
time: "一天前"
},
{
id: 3,
title: "重大风险",
content: "众议院“美中战略竞争特别委员会”向国会提...",
time: "一天前"
},
{
id: 4,
title: "重大风险",
content: '2026财年拨款法案要求重启"中国行动计划"',
time: "一天前"
// 规则限制-查询风险信号数据
const riskSignals = ref([]);
const getRuleRestrictionRiskSignalData = async () => {
try {
const res = await getRuleRestrictionRiskSignal({ moduleId: "0108" });
if (res && res.code === 200) {
riskSignals.value = (res.data || []).map(item => ({
id: item.signalId,
title: item.signalLevel,
content: item.signalTitle,
time: item.signalTime,
ruleLimitId: item.ruleLimitId
}));
}
} catch (error) {
console.error("获取规则限制风险信号数据失败:", error);
}
]);
};
// 跳转详情
const handleClickToDetail = () => {
// router.push("/decreeLayout");
const route = router.resolve("/ruleRestrictions/detail");
window.open(route.href, "_blank");
// 规则限制-获取规则限制动态
const riskSignalList = ref([]);
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 route = router.resolve("/riskSignal");
window.open(route.href, "_blank");
......@@ -145,6 +259,8 @@ const handleToMoreRiskSignal = () => {
top: 223px;
left: 0px;
cursor: pointer;
z-index: 100;
pointer-events: auto;
}
.right-btn {
width: 24px;
......@@ -153,6 +269,8 @@ const handleToMoreRiskSignal = () => {
top: 223px;
right: 0px;
cursor: pointer;
z-index: 100;
pointer-events: auto;
}
.left-top {
width: 100%;
......@@ -177,6 +295,7 @@ const handleToMoreRiskSignal = () => {
right: 40px;
color: rgb(5, 95, 194);
cursor: pointer;
z-index: 101;
}
.left-top-title {
margin-left: 60px;
......@@ -192,6 +311,10 @@ const handleToMoreRiskSignal = () => {
padding: 11px 16px;
}
}
.carousel-item-content {
width: 100%;
height: 100%;
}
.left-center {
width: 967px;
height: 208px;
......@@ -220,15 +343,24 @@ const handleToMoreRiskSignal = () => {
// width: 439px;
height: 132px;
ul {
list-style-position: inside;
list-style: none;
li {
width: 100%;
height: 24px;
min-height: 24px;
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 {
display: inline-block;
flex-shrink: 0;
width: 120px;
height: 24px;
font-size: 16px;
font-weight: 700;
font-family: "Microsoft YaHei";
......@@ -236,19 +368,28 @@ const handleToMoreRiskSignal = () => {
color: rgb(59, 65, 75);
}
.ul-content {
flex: 1;
color: rgb(59, 65, 75);
font-family: "Microsoft YaHei";
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.ul-tags {
flex: 1;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.ul-pie {
display: inline-block;
box-sizing: border-box;
padding: 2px 8px;
border: 1px solid;
border-radius: 4px;
margin-right: 8px;
font-size: 14px;
line-height: 18px;
white-space: nowrap;
}
.cl1 {
border-color: rgba(186, 224, 255, 1);
......@@ -292,7 +433,7 @@ const handleToMoreRiskSignal = () => {
.left-bottom {
margin: 17px 0 0 62px;
ul {
list-style-position: inside;
list-style: none;
.left-bottom-li {
font-size: 16px;
font-weight: 700;
......@@ -300,6 +441,16 @@ const handleToMoreRiskSignal = () => {
line-height: 24px;
color: rgb(59, 65, 75);
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 {
......@@ -391,25 +542,40 @@ const handleToMoreRiskSignal = () => {
background-color: rgba(255, 247, 230, 1);
color: rgba(250, 140, 22, 1);
}
.main-center {
width: 347px;
height: 30px;
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 30px;
color: rgb(59, 65, 75);
margin-right: 2px;
.cl6 {
background-color: rgba(246, 255, 237, 1);
color: rgba(82, 196, 26, 1);
}
.main-right {
width: 60px;
height: 24px;
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(132, 136, 142);
text-align: right;
.item-right {
flex: 1;
display: flex;
justify-content: space-between;
align-items: center;
overflow: hidden;
.main-center {
flex: 1;
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 {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论