Skip to content

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

update

上级 40d262d1 58c59aa9
全部展开 显示空白字符变更
内嵌 并排
正在显示 包含 334 行增加 和 137 行删除
src/components/SnakeTimeline/index.vue 0 → 100644
浏览文件 @ 16a20621
差异被折叠。
src/views/ZMOverView/commonTitle/comTitle.vue
浏览文件 @ 16a20621
......@@ -21,11 +21,12 @@ const props = defineProps({
<style scoped lang="scss">
.com-title {
width: 100%;
width: 1601px;
height: 42px;
display: flex;
align-items: center;
margin-bottom: 36px;
// margin-bottom: 36px;
margin: 0 auto;
.cl1 {
width: 24px;
height: 30px;
......
src/views/ZMOverView/components/fourSuppress/components/addDomain/multiLineChart.js
浏览文件 @ 16a20621
......@@ -10,18 +10,17 @@ const getMultiLineChart = (data) => {
const echartsSeries = series.map((item, index) => ({
name: item.name,
type: 'line',
// areaStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// {
// offset: 0,
// color: item.color || `rgba(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, 0.7)` // 随机颜色
// },
// {
// offset: 1,
// color: item.color ? `${item.color.replace('0.7', '0')}` : `rgba(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, 0)` // 随机颜色
// }
// ])
// },
symbol: 'circle',
symbolSize: 8,
itemStyle: {
color: '#fff', // 图表圆点内部为白色
borderColor: item.color, // 圆点边框为系列颜色
borderWidth: 2
},
lineStyle: {
width: 2,
color: item.color
},
emphasis: {
focus: 'series'
},
......@@ -29,38 +28,84 @@ const getMultiLineChart = (data) => {
}));
return {
color: series.map(item => item.color),
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
backgroundColor: 'rgba(255, 255, 255, 0.9)',
textStyle: {
color: '#666'
},
extraCssText: 'box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); border-radius: 4px;'
},
grid: {
top: '15%',
right: '1%',
bottom: '0%',
left: '1%',
right: '2%',
bottom: '5%',
left: '2%',
containLabel: true
},
legend: {
show: true,
top: 10,
left: 'center'
top: 0,
left: 'center',
icon: 'circle',
itemWidth: 12,
itemHeight: 12,
data: series.map(item => ({
name: item.name,
itemStyle: {
color: item.color, // 强制图例使用实心系列颜色
borderWidth: 0
}
})),
textStyle: {
fontFamily: 'Microsoft YaHei',
fontSize: 16,
fontWeight: 400,
lineHeight: 24,
color: 'rgb(95, 101, 108)'
}
},
color: series.map(item => item.color || `rgba(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, 0.7)`), // 动态颜色
xAxis: [
{
type: 'category',
boundaryGap: false,
data: title
data: title,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color: '#999',
fontSize: 12,
margin: 15
}
}
],
yAxis: [
{
type: 'value'
type: 'value',
min: 0,
max: 100,
interval: 20,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color: '#999',
fontSize: 12
},
splitLine: {
lineStyle: {
type: 'dashed',
color: '#E0E6F1'
}
}
}
],
series: echartsSeries
......
src/views/ZMOverView/components/fourSuppress/components/allElement/index.vue
浏览文件 @ 16a20621
......@@ -573,6 +573,7 @@ onMounted(() => {
display: flex;
justify-content: center;
gap: 16px;
margin: 0 auto;
position: relative;
.header-arrow-left {
position: absolute;
......
src/views/ZMOverView/components/fourSuppress/index.vue
浏览文件 @ 16a20621
......@@ -46,9 +46,8 @@ const handleNavClick = name => {
<style lang="scss" scoped>
.content-wrapper {
width: 1600px;
// width: 1666px;
// height: 2203px;
width: 1601px;
height: auto;
margin: 0 auto;
.main-nav {
width: 1600px;
......
src/views/ZMOverView/components/gameProfile/index.vue
浏览文件 @ 16a20621
......@@ -8,7 +8,7 @@
</div>
<div style="display: flex; height: 650px; width: 100%">
<div style="width: 50%">
<div style="display: flex; justify-content: space-between; margin-right: 50px; ine-height: 32px">
<div style="display: flex; justify-content: space-between; margin-right: 50px; line-height: 32px;align-items: center;" >
<div style="display: flex; margin-left: 50px">
数据来源:
<el-select class="select-item" size="default" style="margin-left: 15px; width: 240px; height: 32px">
......@@ -61,9 +61,9 @@
<div v-for="(value, index) in btnList" class="btn-item" :style="{
background: value.background
}">
<img :src="`/public/icon/ZM/btn-icon-${index}.png`" style="width: 22px; height: 19px;margin:0 22px" />
<img :src="`/public/icon/ZM/btn-icon-${index}.png`" style="width: 22px; height: 19px; margin: 0 22px" />
{{ value.text }}
<img :src="`/public/icon/ZM/btn-icon-arrow.png`" style="margin-right: 22px; width: 22px; height: 19px" />
<img :src="`/public/icon/ZM/btn-icon-arrow.png`" style="margin-left: auto; margin-right: 22px; width: 13px; height: 12px" />
</div>
</div>
</div>
......@@ -263,9 +263,9 @@ const btnList = ref([
<style lang="scss" scoped>
.content-wrapper {
width: 100%;
width: 1600px;
height: 1600px;
margin: 0 auto;
.card-box {
width: 1600px;
height: 700px;
......@@ -277,7 +277,7 @@ const btnList = ref([
background: rgba(255, 255, 255, 1);
.card-title {
width: 1602px;
width: 100%;
height: 48px;
display: flex;
......@@ -412,7 +412,7 @@ const btnList = ref([
.btn-box {
margin-top: 16px;
width: 1601px;
width: 100%;
height: auto;
/* 高度自适应内容 */
display: flex;
......@@ -420,7 +420,7 @@ const btnList = ref([
/* 行方向布局 */
flex-wrap: wrap;
/* 允许换行 */
justify-content: space-between;
justify-content: flex-start;
align-items: stretch;
/* 使所有按钮高度一致 */
gap: 16px 16px;
......@@ -430,8 +430,7 @@ const btnList = ref([
}
.btn-item {
width: calc(20% - 16px);
/* 宽度为容器宽度的20%减去一个间隙的宽度 */
width: 307px;
height: 60px;
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
......@@ -442,7 +441,7 @@ const btnList = ref([
display: flex;
/* 使用flex布局 */
color: rgba(255, 255, 255, 1);
justify-content: space-between;
justify-content: flex-start;
font-family: Microsoft YaHei;
font-style: Bold;
font-size: 16px;
......
src/views/ZMOverView/components/newRisk/WaveBall.vue
浏览文件 @ 16a20621
......@@ -70,10 +70,40 @@ const makeOption = () => {
},
label: {
show: true,
formatter: `${props.data.change}` + `${props.data.unit}`,
formatter: function () {
const change = props.data.change;
const unit = props.data.unit;
if (change === '无新增') {
return `{noChange|${change}}\n{b|共${props.data.count}${unit}}`
}
return `{num|${change}}{unit| ${unit}}\n{b|共${props.data.count}${unit}}`
},
rich: {
num: {
fontSize: 36,
fontWeight: 'bold',
color: `${props.color[5]}`,
padding: [-4, 0, 8, 0]
},
noChange: {
fontSize: 24,
fontWeight: 'bold',
color: `${props.color[5]}`,
padding: [0, 0, 8, 0]
},
unit: {
fontSize: 18,
fontWeight: 'normal',
color: `${props.color[5]}`,
padding: [0, 0, 12, 0],
verticalAlign: 'bottom'
},
b: {
fontSize: 16,
color: `${props.color[5]}`,
insideColor: `${props.color[5]}`,
opacity: 0.8
}
}
}
}]
}
......
src/views/ZMOverView/components/newRisk/index.vue
浏览文件 @ 16a20621
......@@ -11,7 +11,10 @@
<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 class="waveBall-text">
{{ value.title }}
<span v-if="value.change !== '无新增'" class="red-dot"></span>
</div>
</div>
</div>
<div class="bottm-box" :style="sections[index].waveBall.length === 2 ? 'width: 350px' : 'width:503px'">
......@@ -31,6 +34,9 @@
<div>风险信号</div>
<div class="num">12</div>
<div class="manage-btn" @click="handleToRiskManage">
风险信号管理 >
</div>
</div>
<div style="display: flex">
<div class="risk-signals">
......@@ -159,7 +165,7 @@ const sections = ref([
},
{
title: "对实体清单的更新及修订",
date: "12-18",
date: "12-19",
waveBall: [
{
percent: 10, // 估算的百分比
......@@ -179,6 +185,7 @@ const sections = ref([
},
{
title: "SDN清单更新",
date: "12-15",
waveBall: [
{
percent: 15, // 估算的百分比
......@@ -198,7 +205,7 @@ const sections = ref([
},
{
title: "232调查：商用飞机和喷气发动机进口对国家安全的...",
date: "12-18",
date: "12-15",
waveBall: [
{
percent: 3, // 估算的百分比
......@@ -269,6 +276,12 @@ const handleCarouselChange = index => {
}
};
const handleToRiskManage = () => {
// 这里的路由路径请根据实际情况修改
// router.push('/riskSignalManage');
console.log('跳转到风险信号管理');
};
const handleSwithCurNews = name => {
if (name === "left") {
carouselRef.value.prev();
......@@ -290,12 +303,15 @@ onMounted(() => {
.policy-monitoring {
font-family: Arial, sans-serif;
width: 1601px;
margin: 0 auto;
}
.header {
width: 1601px;
display: flex;
justify-content: space-around;
margin-bottom: 20px;
justify-content: space-between;
margin-bottom: 16px;
}
.content {
......@@ -327,7 +343,7 @@ onMounted(() => {
letter-spacing: 0px;
text-align: left;
display: flex;
align-items: center;
img {
/* 矢量 347 */
width: 22px;
......@@ -357,6 +373,26 @@ onMounted(() => {
letter-spacing: 0px;
text-align: center;
}
.manage-btn {
margin-left: auto; /* 推到最右侧 */
margin-right: 16px; /* 适当的右边距 */
padding: 4px 12px;
border-radius: 20px;
background-color: rgba(206, 79, 81, 0.1);
border: 1px solid rgba(206, 79, 81, 0.1);
font-family: "Microsoft YaHei";
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: rgb(206, 79, 81);
cursor: pointer;
&:hover {
background-color: rgba(206, 79, 81, 0.2);
}
}
}
}
......@@ -373,7 +409,7 @@ onMounted(() => {
}
.section-title {
margin: 16px;
margin: 8px 16px;
/* 容器 1559 */
width: 125px;
height: 31px;
......@@ -383,9 +419,8 @@ onMounted(() => {
/* 容器 519 */
height: 210px;
display: flex;
justify-content: left;
margin-top: 10px;
padding: 0 39px;
justify-content: space-between;
padding: 0 35px;
.waveBall-text {
margin-top: 17px;
......@@ -398,6 +433,23 @@ onMounted(() => {
line-height: 26px;
letter-spacing: 0px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
position: relative;
.red-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background-color: rgba(255, 77, 79, 1);
margin-left: 8px;
// 如果需要绝对定位，可以使用下面的样式，但在 flex 布局中 margin-left 更简单
// position: absolute;
// right: -14px;
// top: 50%;
// transform: translateY(-50%);
}
}
}
......@@ -441,6 +493,7 @@ onMounted(() => {
.risk-signals {
width: 769px;
height: 470px;
overflow-y: auto;
overflow-x: hidden;
box-sizing: border-box;
......
src/views/ZMOverView/index.vue
浏览文件 @ 16a20621
<!--ZM博弈概览页-->
<template>
<div class="home-wrapper">
<img :src="background" alt="" class="background-img">
<img :src="background" alt="" class="background-img" />
<div class="home-header">
<div class="header-left">
<HeaderMenu></HeaderMenu>
......@@ -22,18 +22,6 @@
</div>
</div>
</div>
<div class="data-select">
<div
v-for="item in dateList"
:key="item.type"
class="date-item"
:class="{ active: activeDate === item.type }"
@click="handleDateClick(item.type)"
>
<img :src="activeDate === item.type ? item.activeIcon : item.icon" alt="" />
<span>{{ item.name }}</span>
</div>
</div>
<div class="content-box">
<!-- 导航栏 -->
<div class="content-nav">
......@@ -46,16 +34,46 @@
</div>
</div>
<!-- 最新风险动态 -->
<commonTitle id="risk-dynamic" title="最新风险动态" style="margin-top: 48px;"></commonTitle>
<commonTitle id="risk-dynamic" title="最新风险动态" style="margin-top: 48px; margin-bottom: 36px"></commonTitle>
<newRisk></newRisk>
<!-- 最新科技要闻 -->
<!-- <commonTitle id="tech-news" title="最新科技要闻" style="margin-top: 64px;"></commonTitle> -->
<!-- 美对华“四全”打压 -->
<commonTitle id="us-pressure" title="美对华“四全”打压" style="margin-top: 64px;"></commonTitle>
<div id="us-pressure" class="us-pressure-section">
<div class="data-select">
<div
v-for="item in dateList"
:key="item.type"
class="date-item"
:class="{ active: activeDate === item.type }"
@click="handleDateClick(item.type)"
>
<img :src="activeDate === item.type ? item.activeIcon : item.icon" alt="" />
<span>{{ item.name }}</span>
</div>
</div>
<commonTitle title="美对华“四全”打压" style="margin-bottom: 36px"></commonTitle>
</div>
<fourSuppress></fourSuppress>
<!-- 中美博弈概况 -->
<commonTitle id="zm-overview" title="中美博弈概况" style="margin-top: 64px;"></commonTitle>
<commonTitle id="zm-overview" title="中美博弈概况" style="margin-top: 64px; margin-bottom: 36px"></commonTitle>
<gameProfile></gameProfile>
<div class="bottom-info">
<div class="info-item">
<div class="info-item-left">
<img :src="logo1" alt="" />
<div class="info-item-left-content">
<p>地址：北京市海淀区复兴路15号 邮编：100038</p>
<p>办公电话：010-58882033 办公传真：010-58882590</p>
<p>中国科学技术信息研究所 版权所有 京ICP备10027328号</p>
</div>
</div>
<div class="info-item-right">
<img :src="logo2" alt="" />
<img :src="logo3" alt="" />
</div>
</div>
</div>
</div>
</div>
</template>
......@@ -64,22 +82,23 @@
import { onMounted, ref, computed } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import background from "./assets/images/backgroundBT.png"
import background from "./assets/images/backgroundBT.png";
import HeaderMenu from "@/components/headerMenu.vue";
import right from "./assets/icons/right.png"
import commonTitle from "./commonTitle/comTitle.vue"
import week from "./assets/icons/week.png"
import weekActive from "./assets/icons/week-active.png"
import month from "./assets/icons/month.png"
import monthActive from "./assets/icons/month-active.png"
import year from "./assets/icons/year.png"
import yearActive from "./assets/icons/year-active.png"
import right from "./assets/icons/right.png";
import commonTitle from "./commonTitle/comTitle.vue";
import week from "./assets/icons/week.png";
import weekActive from "./assets/icons/week-active.png";
import month from "./assets/icons/month.png";
import monthActive from "./assets/icons/month-active.png";
import year from "./assets/icons/year.png";
import yearActive from "./assets/icons/year-active.png";
import logo1 from "./assets/images/logo1.png";
import logo2 from "./assets/images/logo2.png";
import logo3 from "./assets/images/logo3.png";
// 组件引入
import newRisk from "./components/newRisk/index.vue"
import fourSuppress from "./components/fourSuppress/index.vue"
import gameProfile from "./components/gameProfile/index.vue"
import newRisk from "./components/newRisk/index.vue";
import fourSuppress from "./components/fourSuppress/index.vue";
import gameProfile from "./components/gameProfile/index.vue";
const router = useRouter();
......@@ -90,9 +109,9 @@ const navList = ref([
{ name: "中美博弈概况", id: "zm-overview" }
]);
const handleScrollTo = (id) => {
const handleScrollTo = id => {
const element = document.getElementById(id);
const container = document.querySelector('.content-box');
const container = document.querySelector(".content-box");
if (element && container) {
const targetOffsetTop = element.offsetTop - container.offsetTop;
container.scrollTo({
......@@ -128,12 +147,16 @@ const dateList = ref([
{ name: "今年", type: "year", icon: year, activeIcon: yearActive }
]);
const activeDate = ref("week");
const handleDateClick = (type) => {
const handleDateClick = type => {
activeDate.value = type;
};
</script>
<style lang="scss" scoped>
* {
margin: 0;
padding: 0;
}
.home-wrapper {
width: 100%;
height: 100vh;
......@@ -141,55 +164,6 @@ const handleDateClick = (type) => {
flex-direction: column;
overflow: hidden;
position: relative;
.data-select {
width: 120px;
height: 144px;
position: absolute;
top: 291px;
left: 0;
background-color: rgba(255, 255, 255, 0.65);
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
padding: 2px 2px 2px 0px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
display: flex;
flex-direction: column;
justify-content: space-around;
z-index: 10;
.date-item {
display: flex;
align-items: center;
padding-left: 18px;
height: 46px;
cursor: pointer;
// transition: all 0.3s;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
img {
width: 18px;
height: 18px;
margin-right: 18px;
}
span {
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
color: rgb(95, 101, 108);
}
&.active {
background-color: rgba(231, 243, 255, 1);
span {
font-weight: 700;
color: rgb(5, 95, 194);
}
}
}
}
.background-img {
width: 100%;
height: 700px;
......@@ -285,7 +259,59 @@ const handleDateClick = (type) => {
flex: 1;
width: 100%;
overflow-y: auto;
padding: 48px 160px;
padding-top: 48px;
.us-pressure-section {
position: relative;
margin-top: 64px;
.data-select {
width: 120px;
height: 144px;
position: absolute;
top: 80px;
left: 0; /* 临时改为0，检查是否能显示 */
background-color: rgba(255, 255, 255, 0.65);
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
padding: 2px 2px 2px 0px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
display: flex;
flex-direction: column;
justify-content: space-around;
z-index: 10;
.date-item {
display: flex;
align-items: center;
padding-left: 18px;
height: 46px;
cursor: pointer;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
img {
width: 18px;
height: 18px;
margin-right: 18px;
}
span {
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
color: rgb(95, 101, 108);
}
&.active {
background-color: rgba(231, 243, 255, 1);
span {
font-weight: 700;
color: rgb(5, 95, 194);
}
}
}
}
}
.content-nav {
.nav-title {
font-size: 48px;
......@@ -335,6 +361,49 @@ const handleDateClick = (type) => {
}
}
}
.bottom-info {
width: 100%;
height: 176px;
margin-bottom: 80px;
background-color: rgb(247, 248, 249);
.info-item {
width: 1601px;
height: 176px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
.info-item-left {
display: flex;
align-items: center;
img {
width: 134px;
height: 91px;
margin-right: 27px;
}
.info-item-left-content {
font-size: 16px;
font-weight: 400;
line-height: 32px;
color: rgb(59, 65, 75);
font-family: Microsoft YaHei;
}
}
.info-item-right {
display: flex;
align-items: center;
img:first-child {
width: 300px;
height: 48.8px;
margin-right: 24px;
}
img:last-child {
width: 300px;
height: 43.5px;
}
}
}
}
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论