Skip to content

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

update

上级 b87b7a63
隐藏空白字符变更
内嵌 并排
正在显示 包含 162 行增加 和 85 行删除
src/App.vue
浏览文件 @ 05424435
......@@ -17,7 +17,8 @@
@mouseleave="handleShowMenu(index, false)"
>
<div class="text" :class="{ textActive: homeActiveTitleIndex === index }">
{{ item.name }}</div>
{{ item.name }}
</div>
<div class="bottom-line" v-if="homeActiveTitleIndex === index"></div>
</div>
</div>
......@@ -95,12 +96,27 @@
</div>
</div>
<div class="ai-btn" @click="openAiBox">
<div class="tool-box" aria-disabled="true">
<div class="tool-item">
<img src="@/assets/icons/tool-item-icon1.png" alt="" />
</div>
<div class="tool-item">
<img src="@/assets/icons/tool-item-icon2.png" alt="" />
</div>
<div class="tool-item">
<img src="@/assets/icons/tool-item-icon3.png" alt="" />
</div>
<div class="tool-item">
<img src="@/assets/icons/tool-item-icon4.png" alt="" />
</div>
</div>
<!-- <div class="ai-btn" @click="openAiBox">
<div class="icon">
<img src="@/assets/icons/ai-icon.png" alt="" />
</div>
<div class="text">智能问答</div>
</div>
</div> -->
<div class="ai-dialog" v-if="isShowAiBox">
<AiBox @close="closeAiBox" />
......@@ -681,6 +697,33 @@ body {
}
}
.tool-box {
position: absolute;
top: 400px;
right: 28px;
top: 681px;
width: 62px;
height: 217px;
box-sizing: border-box;
border: 1px solid rgba(255, 255, 255, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 0.65);
box-sizing: border-box;
padding: 24px 18px;
display: flex;
flex-direction: column;
justify-content: space-between;
.tool-item {
width: 24px;
height: 24px;
img {
width: 100%;
height: 100%;
}
}
}
.ai-btn {
position: absolute;
bottom: 240px;
......@@ -749,4 +792,9 @@ body {
pointer-events: none;
}
.tool-box[aria-disabled="true"] {
opacity: 0.3;
cursor: not-allowed;
pointer-events: none;
}
</style>
src/views/ZMOverView/components/newRisk/index.vue
浏览文件 @ 05424435
......@@ -3,10 +3,15 @@
<div class="content-wrapper">
<div class="policy-monitoring">
<div class="header">
<div class="section" v-for="(section, index) in sectionTab" :key="index" :style="{
width: sections[index].waveBall.length === 2 ? '350px' : '503px',
background: section.background
}">
<div
class="section"
v-for="(section, index) in sectionTab"
:key="index"
:style="{
width: sections[index].waveBall.length === 2 ? '350px' : '503px',
background: section.background
}"
>
<img class="section-title" :src="section.title" />
<div class="stats">
<div v-for="value in sections[index].waveBall" @click="highLight(value.type)">
......@@ -19,7 +24,10 @@
</div>
<div class="bottm-box" :style="sections[index].waveBall.length === 2 ? 'width: 350px' : 'width:503px'">
<img src="./icon/title-icon-1.png" />
<div class="bottm-box-text" :style="sections[index].waveBall.length === 2 ? 'width: 225px' : 'width:378px'">
<div
class="bottm-box-text"
:style="sections[index].waveBall.length === 2 ? 'width: 225px' : 'width:378px'"
>
{{ sections[index].title }}
</div>
<div style="width: 50px; color: #ffffff">
......@@ -34,20 +42,30 @@
<div>风险信号</div>
<div class="num">{{ riskTotal }}</div>
<div class="manage-btn" @click="handleToRiskManage">
风险信号管理 >
</div>
<div class="manage-btn" @click="handleToRiskManage">风险信号管理 ></div>
</div>
<div style="display: flex">
<!-- 风险信号列表 -->
<div class="risk-signals" ref="riskSignalsRef">
<div class="risk-signals-item" v-for="(item, index) in warningList" :key="index"
@click="handleClickToDetailO(item)" @mouseenter="onMouseEnter(item.signalId)" @mouseleave="onMouseLeave"
:class="['risk-signals-item', { 'risk-signals-item-hightLight': item.eventType === highlightedEventType }]">
<div class="item-left" :class="{
itemLeftStatus1: item.signalLevel === '特别重大',
itemLeftStatus2: item.signalLevel === '重大风险'
}">
<div
class="risk-signals-item"
v-for="(item, index) in warningList"
:key="index"
@click="handleClickToDetailO(item)"
@mouseenter="onMouseEnter(item.signalId)"
@mouseleave="onMouseLeave"
:class="[
'risk-signals-item',
{ 'risk-signals-item-hightLight': item.eventType === highlightedEventType }
]"
>
<div
class="item-left"
:class="{
itemLeftStatus1: item.signalLevel === '特别重大',
itemLeftStatus2: item.signalLevel === '重大风险'
}"
>
{{ item.signalLevel ? item.signalLevel : "一般风险" }}
</div>
<div class="item-right">
......@@ -69,8 +87,15 @@
<img src="./icon/box1-right.png" alt="" />
</div>
</div>
<el-carousel ref="carouselRef" style="height: 443px; width: 664px" :autoplay="true" :interval="30000"
arrow="never" indicator-position="none" @change="handleCarouselChange">
<el-carousel
ref="carouselRef"
style="height: 443px; width: 664px"
:autoplay="true"
:interval="30000"
arrow="never"
indicator-position="none"
@change="handleCarouselChange"
>
<el-carousel-item v-for="(News, NewsIndex) in filteredHotNewsList" :key="NewsIndex">
<div class="carousel-item" @click="toDetaile(News.hotspotID, News.hotspotType)">
<div class="carousel-title">
......@@ -82,9 +107,14 @@
{{ News.hotspotTag }}
</div>
</div>
<img :src="News.hotspotPicture?News.hotspotPicture:DefaultOrgIcon" style="width: 96px; height: 96px" />
<img
:src="News.hotspotPicture ? News.hotspotPicture : DefaultOrgIcon"
style="width: 96px; height: 96px"
/>
</div>
<div style="/* 矩形 351 */ width: 664px; height: 1px; background: rgba(234, 236, 238, 1)"></div>
<div
style="/* 矩形 351 */ width: 664px; height: 1px; background: rgba(234, 236, 238, 1)"
></div>
<div class="news-carousel-content">{{ News.hotspotDesc }}</div>
<div class="carousel-bottom">
......@@ -109,13 +139,13 @@
import { color } from "echarts";
import { onMounted, ref, onUnmounted, computed } from "vue";
import WaveBall from "./WaveBall.vue";
import { getLatestRiskUpdates, getLatestRisks } from '@/api/zmOverview/risk/index.js'
import { getLatestRiskUpdates, getLatestRisks } from "@/api/zmOverview/risk/index.js";
import router from "@/router/index";
import icon1 from './icon/title-1.png'
import icon2 from './icon/title-2.png'
import icon3 from './icon/title-3.png'
import icon4 from './icon/title-4.png'
import DefaultOrgIcon from '@/assets/icons/default-icon2.png'
import icon1 from "./icon/title-1.png";
import icon2 from "./icon/title-2.png";
import icon3 from "./icon/title-3.png";
import icon4 from "./icon/title-4.png";
import DefaultOrgIcon from "@/assets/icons/default-icon2.png";
const sectionTab = [
{
textColor: "rgba(9, 88, 217, 1)",
......@@ -161,7 +191,7 @@ const sections = ref([
change: "+3",
unit: "项",
title: "法案(提出)",
type: '法案'
type: "法案"
},
{
percent: 0, // 估算的百分比
......@@ -169,7 +199,7 @@ const sections = ref([
change: "+2",
unit: "个",
title: "政令",
type: '行政令'
type: "行政令"
}
]
},
......@@ -183,7 +213,7 @@ const sections = ref([
change: "+1",
unit: "次",
title: "实体清单",
type: '实体清单'
type: "实体清单"
},
{
percent: 0, // 估算的百分比
......@@ -191,7 +221,7 @@ const sections = ref([
change: "+1",
unit: "次",
title: "CCL",
type: 'CCL'
type: "CCL"
}
]
},
......@@ -205,7 +235,7 @@ const sections = ref([
change: "+1",
unit: "次",
title: "SDN",
type: 'SDN'
type: "SDN"
},
{
percent: 0, // 估算的百分比
......@@ -213,7 +243,7 @@ const sections = ref([
change: "+1",
unit: "家",
title: "涉军企业",
type: '涉军企业'
type: "涉军企业"
}
]
},
......@@ -227,7 +257,7 @@ const sections = ref([
change: "+1",
unit: "次",
title: "337调查",
type: '337调查'
type: "337调查"
},
{
percent: 0, // 估算的百分比
......@@ -235,7 +265,7 @@ const sections = ref([
change: "无新增",
unit: "次",
title: "230调查",
type: '230调查'
type: "230调查"
},
{
percent: 0, // 估算的百分比
......@@ -243,7 +273,7 @@ const sections = ref([
change: "无新增",
unit: "次",
title: "301调查",
type: '301调查'
type: "301调查"
}
]
}
......@@ -253,12 +283,11 @@ const sections = ref([
const handleGetLatestRiskUpdates = async () => {
try {
const params = {
currentDate: '本周'
}
currentDate: "本周"
};
const res = await getLatestRiskUpdates(params);
console.log("最新风险动态统计", res);
if (res.code === 200 && res.data) {
sections.value = [
{
title: res.data.policiesRegulations.hotspotTitle,
......@@ -270,7 +299,7 @@ const handleGetLatestRiskUpdates = async () => {
change: res.data.bill.dailyIncrement,
unit: "项",
title: "法案(提出)",
type: '法案'
type: "法案"
},
{
percent: 20, // 估算的百分比
......@@ -278,7 +307,7 @@ const handleGetLatestRiskUpdates = async () => {
change: res.data.administrativeOrder.dailyIncrement,
unit: "个",
title: "政令",
type: '行政令'
type: "行政令"
}
]
},
......@@ -293,7 +322,7 @@ const handleGetLatestRiskUpdates = async () => {
unit: "次",
title: "实体清单",
type: '实体清单'
type: "实体清单"
},
{
percent: 20, // 估算的百分比
......@@ -301,7 +330,7 @@ const handleGetLatestRiskUpdates = async () => {
change: res.data.CCL.dailyIncrement,
unit: "次",
title: "CCL",
type: 'CCL'
type: "CCL"
}
]
},
......@@ -315,7 +344,7 @@ const handleGetLatestRiskUpdates = async () => {
change: res.data.SDN.dailyIncrement,
unit: "次",
title: "SDN",
type: 'SDN'
type: "SDN"
},
{
percent: 5, // 估算的百分比
......@@ -323,7 +352,7 @@ const handleGetLatestRiskUpdates = async () => {
change: res.data.militaryInvolvement.dailyIncrement,
unit: "家",
title: "涉军企业",
type: '涉军企业'
type: "涉军企业"
}
]
},
......@@ -333,32 +362,32 @@ const handleGetLatestRiskUpdates = async () => {
waveBall: [
{
percent: 3, // 估算的百分比
count: res.data['337Survey'].total,
change: res.data['337Survey'].dailyIncrement,
count: res.data["337Survey"].total,
change: res.data["337Survey"].dailyIncrement,
unit: "次",
title: "337调查",
type: '337调查'
type: "337调查"
},
{
percent: 3, // 估算的百分比
count: res.data['232Survey'].total,
change: res.data['232Survey'].dailyIncrement,
count: res.data["232Survey"].total,
change: res.data["232Survey"].dailyIncrement,
unit: "次",
title: "230调查",
type: '230调查'
type: "230调查"
},
{
percent: 3, // 估算的百分比
count: res.data['301Survey'].total,
change: res.data['301Survey'].dailyIncrement,
count: res.data["301Survey"].total,
change: res.data["301Survey"].dailyIncrement,
unit: "次",
title: "301调查",
type: '301调查'
type: "301调查"
}
]
}
]
console.log(sections.value, 'sections.value')
];
console.log(sections.value, "sections.value");
}
} catch (error) {
console.error("获取最新风险动态统计error", error);
......@@ -367,7 +396,7 @@ const handleGetLatestRiskUpdates = async () => {
// 风险信号
const warningList = ref([]);
const riskTotal = ref(0)
const riskTotal = ref(0);
const hotNewsList = ref([
{
title: "美国白宫发布关于进一步延长TikTok执法宽限期的行政令",
......@@ -376,7 +405,7 @@ const hotNewsList = ref([
"2025年1月20日第14166号行政命令第2（a）条（《保护美国免受外国对抗者控制应用法案》对TikTok的适用）规定的执行延迟，并由2025年4月4日第14258号行政命令（延长TikTok执法延迟）和2025年6月19日第14310号行政命令（进一步延长TikTok执法延迟）所延长，进一步延长至2025年12月16日。在此期间，司法部不得采取任何行动执行《保护美国人免受外国对抗者控制应用法案》（以下简称“法案”）（公共法118-50，H部），也不得对任何违反该法案的实体处以任何处罚，包括分发、维护、更新（或促成分发，维护或更新任何外国对手控制的应用，如本法所定义。鉴于本指示，即使在上述规定期限届满后，司法部也应继续与相关部门合作，以确保美国国家安全和公民隐私权利不受威胁。",
date: "2025年9月16日",
source: "美国白宫·总统行政令",
tags: ['人工智能', '通信网络']
tags: ["人工智能", "通信网络"]
},
{
title: "美国白宫发布关于进一步延长TikTok执法宽限期的行政令",
......@@ -385,7 +414,7 @@ const hotNewsList = ref([
"2025年1月20日第14166号行政命令第2（a）条（《保护美国免受外国对抗者控制应用法案》对TikTok的适用）规定的执行延迟，并由2025年4月4日第14258号行政命令（延长TikTok执法延迟）和2025年6月19日第14310号行政命令（进一步延长TikTok执法延迟）所延长，进一步延长至2025年12月16日。在此期间，司法部不得采取任何行动执行《保护美国人免受外国对抗者控制应用法案》（以下简称“法案”）（公共法118-50，H部），也不得对任何违反该法案的实体处以任何处罚，包括分发、维护、更新（或促成分发，维护或更新任何外国对手控制的应用，如本法所定义。鉴于本指示，即使在上述规定期限届满后，司法部也应继续与相关部门合作，以确保美国国家安全和公民隐私权利不受威胁。",
date: "2025年9月16日",
source: "美国白宫·总统行政令",
tags: ['人工智能', '通信网络']
tags: ["人工智能", "通信网络"]
}
]);
......@@ -395,10 +424,10 @@ const handleGetLatestRisks = async () => {
const res = await getLatestRisks();
console.log("最新风险信号", res);
if (res.code === 200 && res.data) {
warningList.value = res.data.riskVOS
hotNewsList.value = res.data.hotspotVOS
riskTotal.value = res.data.riskCount
console.log(hotNewsList.value, 'hotNewsList.value')
warningList.value = res.data.riskVOS;
hotNewsList.value = res.data.hotspotVOS;
riskTotal.value = res.data.riskCount;
console.log(hotNewsList.value, "hotNewsList.value");
}
} catch (error) {
console.error("获取最新风险信号error", error);
......@@ -439,7 +468,7 @@ const handleClickToDetailO = item => {
const currentHoveredSignalId = ref(null);
const onMouseEnter = (signalId) => {
const onMouseEnter = signalId => {
currentHoveredSignalId.value = signalId;
};
......@@ -458,12 +487,12 @@ const handleToRiskManage = () => {
// router.push('/riskSignalManage');
const route = router.resolve("/riskSignal");
window.open(route.href, "_blank");
console.log('跳转到风险信号管理');
console.log("跳转到风险信号管理");
};
const highlightedEventType = ref('')
const highLight = (title) => {
console.log(title)
const highlightedEventType = ref("");
const highLight = title => {
console.log(title);
// 如果再次点击同一个，取消高亮
if (highlightedEventType.value === title) {
highlightedEventType.value = null;
......@@ -472,13 +501,13 @@ const highLight = (title) => {
}
};
const toDetaile = (id, type) => {
console.log(id, type)
if (type === '法案') {
console.log(id, type);
if (type === "法案") {
let path = "/billLayout/bill/introduction";
let query = { billId: id };
const { href } = router.resolve({ path, query });
window.open(href, "_blank");
} else if (type === '政令') {
} else if (type === "政令") {
const route = router.resolve({
path: "/decreeLayout/overview/introduction",
query: {
......@@ -486,7 +515,7 @@ const toDetaile = (id, type) => {
}
});
window.open(route.href, "_blank");
} else if (type === '实体清单' || type === 'CCL') {
} else if (type === "实体清单" || type === "CCL") {
const route = router.resolve({
path: "/exportControl/singleSanction",
query: {
......@@ -494,7 +523,7 @@ const toDetaile = (id, type) => {
}
});
window.open(route.href, "_blank");
} else if (type === '337') {
} else if (type === "337") {
const curRoute = router.resolve({
path: "/marketSingleCaseLayout/overview",
query: {
......@@ -503,7 +532,7 @@ const toDetaile = (id, type) => {
}
});
window.open(curRoute.href, "_blank");
} else if (type === '203') {
} else if (type === "203") {
const curRoute = router.resolve({
path: "/marketSingleCaseLayout/overview",
query: {
......@@ -512,7 +541,7 @@ const toDetaile = (id, type) => {
}
});
window.open(curRoute.href, "_blank");
} else if (type === '301') {
} else if (type === "301") {
const curRoute = router.resolve({
path: "/marketSingleCaseLayout/overview",
query: {
......@@ -523,7 +552,7 @@ const toDetaile = (id, type) => {
window.open(curRoute.href, "_blank");
}
//type=涉军企业和SDN未对接
}
};
const handleSwithCurNews = name => {
if (name === "left") {
carouselRef.value.prev();
......@@ -536,19 +565,17 @@ const riskSignalsRef = ref(null); // 引用risk-signals容器
let intervalId;
onMounted(async () => {
await handleGetLatestRiskUpdates()
await handleGetLatestRisks()
await handleGetLatestRiskUpdates();
await handleGetLatestRisks();
const scrollInterval = 2000; // 每隔2秒滚动一次
let currentScroll = 0;
intervalId = setInterval(() => {
if (riskSignalsRef.value) {
const scrollHeight = riskSignalsRef.value.scrollHeight; // 内容总高度
const clientHeight = riskSignalsRef.value.clientHeight; // 可视区域高度
console.log(scrollHeight, clientHeight)
console.log(scrollHeight, clientHeight);
// 如果滚动到底，则回到顶部
if (currentScroll + clientHeight >= scrollHeight) {
currentScroll = 0;
......@@ -593,7 +620,7 @@ onUnmounted(() => {
height: 568px;
box-sizing: border-box;
border: 1px solid rgba(255, 255, 255, 1);
border-radius: var(---10, 10px);
border-radius: 10px;
/* 业务系统/模块阴影 */
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 0.65);
......@@ -829,6 +856,10 @@ onUnmounted(() => {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
&:hover {
color: var(--color-main-active);
font-weight: bold;
}
}
.time {
......@@ -1096,8 +1127,6 @@ onUnmounted(() => {
}
}
}
}
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论