Skip to content

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

全领域

上级 2adaa791
隐藏空白字符变更
内嵌 并排
正在显示 包含 564 行增加 和 6 行删除
src/views/ZMOverView/components/fourSuppress/components/addDomain/index.vue
浏览文件 @ dd0ed661
<!--科技要闻-->
<!--全领域-->
<template>
<div class="content-wrapper">
全领域
<div class="btn-box">
<div v-for="(value, index) in buttonsData" class="btn-item" :style="{ background: value.background }">
<!-- <div class="btn-left">
<img class="btn-left-icon" :src="`/public/icon/ZM/btn-icon2-${index}.png`"
style="width: 22px; height: 19px;" />
<div class="btn-left-text" >{{ value.text }}</div>
</div> -->
<div :style="{
height: '60px',
width: '60px',
backgroundImage: 'url(' + `/public/icon/ZM/btn-icon2-${index}.png` + ')',
backgroundSize: 'cover'
}">
{{ value.text }}
</div>
<div class="btn-right">
{{ value.count + "次" }}
</div>
</div>
</div>
<div class="main-charts">
<div class="charts-title">
<div class="title-left">
<img src="./icon/icon-1.png" alt="" />
<span>美对华制裁措施数量趋势</span>
</div>
<div class="title-right">
<el-select v-model="select1" placeholder="按月统计" class="custom-select">
<el-option label="按月统计" value="" />
</el-select>
</div>
</div>
<div class="charts-content">
<div id="chartRef" style=" width: 1453px; height: 354px"></div>
</div>
</div>
<div>
<div style="width: 792px; height: 700px" class="main-charts">
<div class="charts-title" style="padding: 8px">
<div class="title-left">
<img src="./icon/icon-1.png" alt="" />
<span>美对华制裁措施数量趋势</span>
</div>
</div>
<div v-for="value in newsList" class="news-item">
<div class="news-item-title">
<div style="width: 400px; display: flex; gap: 8px">
<div v-for="tag in value.tags" :key="tag" class="tag" :style="{
color: getTagColor(tag).textColor,
backgroundColor: getTagColor(tag).bgColor,
border: '1px solid ' + getTagColor(tag).textColor
}">
{{ tag }}
</div>
</div>
<div class="date">
{{ value.date + " · " + value.type }}
</div>
</div>
<div class="content-title">
{{ value.title }}
</div>
<div class="content-text">
{{ value.content }}
</div>
</div>
</div>
<div style="width: 792px; height: 700px"></div>
</div>
</div>
</template>
<script setup>
import { onMounted, ref, computed } from "vue";
import { ref, onMounted } from "vue";
import setChart from "@/utils/setChart";
import getMultiLineChart from "./multiLineChart";
const buttonsData = [
{
text: "集成电路",
count: 101,
background: "linear-gradient(180.00deg, rgba(255, 102, 102, 1),rgba(255, 102, 102, 0.5) 100%)"
},
{
text: "人工智能",
count: 132,
background: "linear-gradient(180.00deg, rgba(51, 153, 255, 1),rgba(51, 153, 255, 0.5) 100%)"
},
{
text: "新一代信息技术",
count: 105,
background: "linear-gradient(180.00deg, rgba(255, 187, 51, 1),rgba(255, 187, 51, 0.5) 100%)"
},
{
text: "量子科技",
count: 97,
background: "linear-gradient(180.00deg, rgba(117, 73, 255, 1),rgba(117, 73, 255, 0.5) 100%)"
},
{
text: "先进制造",
count: 84,
background: "linear-gradient(180.00deg, rgba(102, 102, 102, 1),rgba(102, 102, 102, 0.5) 100%)"
},
{
text: "航空航天",
count: 77,
background: "linear-gradient(180.00deg, rgba(51, 102, 255, 1),rgba(51, 102, 255, 0.5) 100%)"
},
{
text: "生物科技",
count: 62,
background: "linear-gradient(180.00deg, rgba(102, 204, 204, 1),rgba(102, 204, 204, 0.5) 100%)"
},
{
text: "新能源",
count: 60,
background: "linear-gradient(180.00deg, rgba(102, 187, 51, 1),rgba(102, 187, 51, 0.5) 100%)"
},
{
text: "新材料",
count: 43,
background: "linear-gradient(180.00deg, rgba(255, 102, 51, 1),rgba(255, 102, 51, 0.5) 100%)"
},
{
text: "海洋",
count: 25,
background: "linear-gradient(180.00deg, rgba(153, 204, 255, 1),rgba(153, 204, 255, 0.5) 100%)"
}
];
const box5Data = ref({
title: [
"2024-12",
"2025-1",
"2025-2",
"2025-3",
"2025-4",
"2025-5",
"2025-6",
"2025-7",
"2025-8",
"2025-9",
"2025-10",
"2025-11"
],
data: [
{
name: "集成电路",
color: "rgba(9, 88, 217, 0.7)", // 定义颜色
value: [88, 80, 75, 70, 65, 60, 55, 50, 45, 40, 35, 30]
},
{
name: "人工智能",
color: "rgba(51, 153, 255, 0.7)", // 定义颜色
value: [20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75]
},
{
name: "新一代信息技术",
color: "rgba(255, 187, 51, 0.7)", // 定义颜色
value: [30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85]
},
{
name: "量子科技",
color: "rgba(117, 73, 255, 0.7)", // 定义颜色
value: [40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95]
},
{
name: "先进制造",
color: "rgba(102, 102, 102, 0.7)", // 定义颜色
value: [50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100, 105]
}
]
});
const newsList = ref([
{
tags: ["航空航天", "能源"],
title: "联邦参议院：通过2026年国防授权法案",
date: "2025年12月18日",
type: "法案",
content: "2026年国防授权法案（NDAA）已于2025年12月18日由美国总统特朗普签署成为法律，法案..."
},
{
tags: ["新材料", "生物科技"],
title: "美国FDA：针对两家中国第三方检测机构的数据完整性问题采取行动",
date: "2025年12月18日",
type: "法案",
content: "FDA因数据造假或无效问题，向两家中国第三方检测公司（天津中联科技检测有限公司和苏...）"
},
{
tags: ["人工智能", "集成电路"],
title: "美国FCC：出台电信设备市场准入认证新规",
date: "2025年12月18日",
type: "法案",
content: "将国家安全部门审查全面嵌入设备授权程序，对实验室资质、测试标准以及供应链设置严格限制。"
},
{
tags: ["人工智能", "集成电路"],
title: "商务部工业与安全局：对实体清单的修订",
date: "2025年12月18日",
type: "法案",
content: "美国商务部工业与安全局公布对中国半导体出口管制措施新规则，将140家中国半导体公司列入..."
},
{
tags: ["集成电路"],
title: "国际贸易委员会：外国制造的半导体器件及其下游产品和组件",
date: "2025年12月18日",
type: "法案",
content: "美国国际贸易委员会（ITC）投票决定对特定半导体器件及其下游计算产品和组件（Certain ...）"
}
]);
const tagColors = [
{
text: "航空航天",
textColor: "#1677FF", // 蓝色文字
bgColor: "#E6F7FF" // 浅蓝色背景
},
{
text: "能源",
textColor: "#1677FF",
bgColor: "#E6F7FF"
},
{
text: "新材料",
textColor: "#5993EE",
bgColor: "#E6F7FF"
},
{
text: "生物科技",
textColor: "#5993EE",
bgColor: "#E6F7FF"
},
{
text: "人工智能",
textColor: "#D9001B",
bgColor: "#FFECEC"
},
{
text: "集成电路",
textColor: "#1677FF",
bgColor: "#E6F7FF"
}
];
const getTagColor = tagName => {
const foundTag = tagColors.find(tag => tag.text === tagName);
return foundTag ? { textColor: foundTag.textColor, bgColor: foundTag.bgColor } : { textColor: "#000", bgColor: "#fff" };
};
onMounted(() => {
let Chart = getMultiLineChart(box5Data.value);
setChart(Chart, "chartRef");
});
</script>
<style lang="scss" scoped>
.content-wrapper {
width: 1666px;
height: 2132px;
width: 1666px;
height: 2132px;
}
.btn-box {
margin-top: 16px;
width: 1601px;
height: auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
gap: 16px;
padding: 0;
}
.btn-item {
/* 全领域-总统计 */
width: 307px;
height: 80px;
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
display: flex;
align-items: center;
justify-content: space-between; // 调整为两端对齐
padding: 0 10px; // 添加内边距以便文本和图标有空间
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-style: Bold;
font-size: 16px;
font-weight: 700;
line-height: 30px;
letter-spacing: 0px;
text-align: center;
}
.btn-left {
position: relative;
display: flex;
align-items: center;
}
.btn-left-icon {
margin-right: 8px; // 图标和文本之间的间距
}
.btn-left-text {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 30px; // 根据图标大小调整这个值
}
.main-charts {
margin-top: 16px;
width: 1601px;
height: 500px;
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.65);
box-shadow: 0 0 20px rgba(25, 69, 130, 0.1);
display: flex;
flex-direction: column;
margin-bottom: 22px;
.charts-title {
width: 100%;
height: 48px;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 17px;
padding-right: 35px;
box-sizing: border-box;
background: linear-gradient(180deg, rgba(231, 243, 255, 1) 0%, rgba(231, 243, 255, 0) 100%);
.title-left {
display: flex;
align-items: center;
img {
width: 18px;
height: 18px;
margin-right: 14px;
}
span {
font-family: YouSheBiaoTiHei;
font-size: 24px;
font-weight: 400;
line-height: 24px;
color: rgb(5, 95, 194);
}
}
.title-right {
display: flex;
height: 48px;
align-items: end;
gap: 12px;
padding-right: 17px;
.custom-select {
width: 160px;
:deep(.el-input) {
height: 32px;
.el-input__wrapper {
background-color: #fff;
box-shadow: 0 0 0 1px #dcdfe6 inset;
border-radius: 4px;
padding: 0 12px;
height: 32px;
&:hover {
box-shadow: 0 0 0 1px #c0c4cc inset;
}
&.is-focus {
box-shadow: 0 0 0 1px #409eff inset;
}
}
.el-input__inner {
font-family: "Microsoft YaHei";
font-size: 16px;
font-weight: 400;
color: rgb(95, 101, 108);
height: 32px;
line-height: 24px;
&::placeholder {
color: rgb(95, 101, 108);
}
}
}
}
}
}
.charts-content {
flex: 1;
width: 100%;
padding: 20px 40px 20px 40px;
box-sizing: border-box;
.chart-container {
width: 100%;
height: 100%;
}
}
}
.news-item {
/* 全政府-动态 (四全-最新动态) */
width: 737px;
height: 124px;
margin: 0 28px;
/* 自动布局 */
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
padding: 16px 24px 16px 24px;
box-sizing: border-box;
border-bottom: 1px solid rgba(234, 236, 238, 1);
background: rgba(255, 255, 255, 0.65);
.news-item-title {
line-height: 30px;
display: flex;
justify-content: space-between;
width: 689px;
.tag {
/* 数据展示/Tag标签/亮色/绿 */
/* 自动布局 */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 8;
padding: 1px 8px 1px 8px;
box-sizing: border-box;
border-radius: 4px;
}
.date {
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: right;
}
}
.content-title {
/* 容器 1576 */
width: 689px;
height: 30px;
/* 自动布局 */
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: 12;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-style: Bold;
font-size: 16px;
font-weight: 700;
line-height: 30px;
letter-spacing: 0px;
text-align: left;
}
.content-text {
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: justify;
white-space: nowrap;
/* 禁止换行 */
overflow: hidden;
/* 隐藏溢出内容 */
text-overflow: ellipsis;
/* 溢出部分显示省略号 */
}
}
</style>
src/views/ZMOverView/components/fourSuppress/components/addDomain/multiLineChart.js 0 → 100644
浏览文件 @ dd0ed661
import * as echarts from 'echarts';
const getMultiLineChart = (data) => {
// 提取标题和系列数据
// const { title, series } = data;
const title = data.title
const series = data.data
// 动态生成 series 配置
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)` // 随机颜色
// }
// ])
// },
emphasis: {
focus: 'series'
},
data: item.value
}));
return {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
grid: {
top: '15%',
right: '1%',
bottom: '0%',
left: '1%',
containLabel: true
},
legend: {
show: true,
top: 10,
left: 'center'
},
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
}
],
yAxis: [
{
type: 'value'
}
],
series: echartsSeries
};
};
export default getMultiLineChart;
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论