Skip to content

R
risk-monitor
提交 71d648ee authored 作者: huhuiqing's avatar huhuiqing
浏览文件
操作

首页交互

上级 ea19d0b8
隐藏空白字符变更
内嵌 并排
正在显示 包含 170 行增加 和 28 行删除
src/views/ZMGame/component/riskToday/index.vue
浏览文件 @ 71d648ee
......@@ -7,9 +7,12 @@
:style="sections[index].waveBall.length === 2 ? 'width: 350px' : 'width:503px'">
<img class="section-title" :src="`/public/icon/riskToday/btn-` + index + `.png`" />
<div class="stats">
<div v-for="value in sections[index].waveBall">
<WaveBall :percent="value.percent" :data="value" :color="section.waterColor" :size="128" />
<div class="waveBall-text">{{ value.title }}</div>
<div v-for="value in sections[index].waveBall" @click="highLight(value)">
<div @click="highLight(value.title)" style="cursor: pointer;">
<WaveBall :percent="value.percent" :data="value" :color="section.waterColor" :size="128"
@click="highLight(value)" />
<div class="waveBall-text">{{ value.title }}</div>
</div>
</div>
</div>
<div class="bottm-box">
......@@ -27,13 +30,13 @@
<div class="content-title">
<img class="section-title" src="./icon/title-icon-2.png" />
<div>风险信号</div>
<div>风险信号3323</div>
<div class="num">12</div>
</div>
<div style="display: flex">
<div class="risk-signals">
<div class="risk-signals-item" v-for="(item, index) in warningList" :key="index"
@click="handleClickToDetailO(item)">
@click="handleClickToDetailO(item)" :class="{ 'highlighted': item.eventType === highlightedEventType }">
<div class="item-left" :class="{
itemLeftStatus1: item.signalLevel === '特别重大',
itemLeftStatus2: item.signalLevel === '重大风险'
......@@ -257,6 +260,26 @@ const handleSwithCurNews = name => {
carouselRef.value.next();
}
};
// 查看详情 传递参数
const handleClickToDetailO = item => {
window.sessionStorage.setItem("billId", item.billId);
window.sessionStorage.setItem("curTabName", item.name || item.signalTitle);
const route = router.resolve("/billLayout?billId=" + item.billId);
window.open(route.href, "_blank");
};
const highlightedEventType = ref('')
const highLight = (title) => {
console.log(title)
// 如果再次点击同一个，取消高亮
if (highlightedEventType.value === title) {
highlightedEventType.value = null;
} else {
highlightedEventType.value = title;
}
};
onMounted(() => {
// 这里可以添加从后端获取数据的代码
handlegetBillRiskSignal();
......
src/views/ZMOverView/components/newRisk/index.vue
浏览文件 @ 71d648ee
......@@ -9,7 +9,7 @@
}">
<img class="section-title" :src="section.title" />
<div class="stats">
<div v-for="value in sections[index].waveBall">
<div v-for="value in sections[index].waveBall" @click="highLight(value.type)">
<WaveBall :percent="value.percent" :data="value" :color="section.waterColor" :size="128" />
<div class="waveBall-text">
{{ value.title }}
......@@ -42,7 +42,8 @@
<!-- 风险信号列表 -->
<div class="risk-signals" ref="riskSignalsRef">
<div class="risk-signals-item" v-for="(item, index) in warningList" :key="index"
@click="handleClickToDetailO(item)">
@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 === '重大风险'
......@@ -70,7 +71,7 @@
</div>
<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 hotNewsList" :key="NewsIndex">
<el-carousel-item v-for="(News, NewsIndex) in filteredHotNewsList" :key="NewsIndex">
<div class="carousel-item" @click="toDetaile(News.id, News.HotspotType)">
<div class="carousel-title">
<div>
......@@ -106,7 +107,7 @@
<script setup>
import { color } from "echarts";
import { onMounted, ref, onUnmounted, onBeforeUnmount } from "vue";
import { onMounted, ref, onUnmounted, computed } from "vue";
import WaveBall from "./WaveBall.vue";
import { getLatestRiskUpdates, getLatestRisks } from '@/api/zmOverview/risk/index.js'
import router from "@/router/index";
......@@ -158,14 +159,16 @@ const sections = ref([
count: 1626,
change: "+3",
unit: "项",
title: "法案(提出)"
title: "法案(提出)",
type: '法案'
},
{
percent: 0, // 估算的百分比
count: 69,
change: "+2",
unit: "个",
title: "政令"
title: "政令",
type: '行政令'
}
]
},
......@@ -178,14 +181,16 @@ const sections = ref([
count: 128,
change: "+1",
unit: "次",
title: "实体清单"
title: "实体清单",
type: '实体清单'
},
{
percent: 0, // 估算的百分比
count: 69,
change: "+1",
unit: "次",
title: "CCL"
title: "CCL",
type: 'CCL'
}
]
},
......@@ -198,14 +203,16 @@ const sections = ref([
count: 0,
change: "+1",
unit: "次",
title: "SDN"
title: "SDN",
type: 'SDN'
},
{
percent: 0, // 估算的百分比
count: 0,
change: "+1",
unit: "家",
title: "涉军企业"
title: "涉军企业",
type: '涉军企业'
}
]
},
......@@ -218,21 +225,24 @@ const sections = ref([
count: 0,
change: "+1",
unit: "次",
title: "337调查"
title: "337调查",
type: '337调查'
},
{
percent: 0, // 估算的百分比
count: 0,
change: "无新增",
unit: "次",
title: "230调查"
title: "230调查",
type: '230调查'
},
{
percent: 0, // 估算的百分比
count: 0,
change: "无新增",
unit: "次",
title: "301调查"
title: "301调查",
type: '301调查'
}
]
}
......@@ -258,14 +268,16 @@ const handleGetLatestRiskUpdates = async () => {
count: res.data.bill.total,
change: res.data.bill.dailyIncrement,
unit: "项",
title: "法案(提出)"
title: "法案(提出)",
type: '法案'
},
{
percent: 20, // 估算的百分比
count: res.data.administrativeOrder.total,
change: res.data.administrativeOrder.dailyIncrement,
unit: "个",
title: "政令"
title: "政令",
type: '行政令'
}
]
},
......@@ -279,14 +291,16 @@ const handleGetLatestRiskUpdates = async () => {
change: res.data.Entities.dailyIncrement,
unit: "次",
title: "实体清单"
title: "实体清单",
type: '实体清单'
},
{
percent: 20, // 估算的百分比
count: res.data.CCL.total,
change: res.data.CCL.dailyIncrement,
unit: "次",
title: "CCL"
title: "CCL",
type: 'CCL'
}
]
},
......@@ -299,14 +313,16 @@ const handleGetLatestRiskUpdates = async () => {
count: res.data.SDN.total,
change: res.data.SDN.dailyIncrement,
unit: "次",
title: "SDN"
title: "SDN",
type: 'SDN'
},
{
percent: 5, // 估算的百分比
count: res.data.militaryInvolvement.total,
change: res.data.militaryInvolvement.dailyIncrement,
unit: "家",
title: "涉军企业"
title: "涉军企业",
type: '涉军企业'
}
]
},
......@@ -319,21 +335,24 @@ const handleGetLatestRiskUpdates = async () => {
count: res.data['337Survey'].total,
change: res.data['337Survey'].dailyIncrement,
unit: "次",
title: "337调查"
title: "337调查",
type: '337调查'
},
{
percent: 3, // 估算的百分比
count: res.data['232Survey'].total,
change: res.data['232Survey'].dailyIncrement,
unit: "次",
title: "230调查"
title: "230调查",
type: '230调查'
},
{
percent: 3, // 估算的百分比
count: res.data['301Survey'].total,
change: res.data['301Survey'].dailyIncrement,
unit: "次",
title: "301调查"
title: "301调查",
type: '301调查'
}
]
}
......@@ -416,13 +435,39 @@ const handleClickToDetailO = item => {
const route = router.resolve("/billLayout?billId=" + item.billId);
window.open(route.href, "_blank");
};
const currentHoveredSignalId = ref(null);
const onMouseEnter = (signalId) => {
currentHoveredSignalId.value = signalId;
};
const onMouseLeave = () => {
currentHoveredSignalId.value = null;
};
// 计算属性或使用 watchEffect 来动态计算 filteredHotNewsList
const filteredHotNewsList = computed(() => {
if (!currentHoveredSignalId.value) return hotNewsList.value; // 如果没有悬停，则返回全部数据
return hotNewsList.value.filter(newsItem => newsItem.signalId === currentHoveredSignalId.value);
});
const handleToRiskManage = () => {
// 这里的路由路径请根据实际情况修改
// router.push('/riskSignalManage');
console.log('跳转到风险信号管理');
};
const highlightedEventType = ref('')
const highLight = (title) => {
console.log(title)
// 如果再次点击同一个，取消高亮
if (highlightedEventType.value === title) {
highlightedEventType.value = null;
} else {
highlightedEventType.value = title;
}
};
const toDetaile = (id, type) => {
if (type === '法案') {
let path = "/billLayout/bill/introduction";
......@@ -797,6 +842,80 @@ onUnmounted(() => {
}
}
}
.risk-signals-item-hightLight {
margin-left: 23px;
height: 47px;
width: 780px;
display: flex;
cursor: pointer;
background: var(--color-bg-hover);
&:hover {
background: var(--color-bg-hover);
}
.itemLeftStatus1 {
color: rgba(245, 34, 45, 1) !important;
background: rgba(255, 241, 240) !important;
}
.itemLeftStatus2 {
color: rgba(250, 140, 22, 1) !important;
background: rgba(255, 247, 230, 1) !important;
}
.item-left {
margin-top: 4px;
margin-left: 2px;
width: 40px;
height: 40px;
border-radius: 20px;
color: rgba(82, 196, 26, 1);
background: rgba(246, 255, 237, 1);
font-family: Microsoft YaHei;
font-size: 12px;
font-weight: 400;
line-height: 14px;
box-sizing: border-box;
padding: 6px 4px;
text-align: center;
}
.item-right {
margin-left: 13px;
width: 722px;
height: 47px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex;
.text {
width: 598px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 47px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.time {
width: 88px;
margin-left: 5px;
line-height: 47px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
.news {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论