Skip to content

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

风险与博弈接口对接

上级 02a98734
隐藏空白字符变更
内嵌 并排
正在显示 包含 515 行增加 和 148 行删除
src/api/zmOverview/risk/index.js 0 → 100644
浏览文件 @ d99b92e3
import request from "@/api/request.js";
// 中美博弈概览V2:最新风险动态统计
export function getLatestRiskUpdates(params) {
return request({
method: 'GET',
url: `/api/rivalryIndexV2/LatestRiskUpdates`,
params: params
})
}
// 中美博弈概览V2:最新风险信号
export function getLatestRisks() {
return request({
method: 'GET',
url: `/api/rivalryIndexV2/LatestRisks`,
})
}
// 中美博弈概览V2:美对华制裁措施数量趋势
export function geDomainContainmentTrend(params) {
return request({
method: 'GET',
url: `/api/rivalryIndexV2/DomainContainmentTrend`,
params: params
})
}
// 中美博弈概况:获取榜单字典
export function getChartDict() {
return request({
method: 'GET',
url: `/api/union/summary/chartDict`,
})
}
// 中美博弈概况:中美科技实力对比
export function getCompare(id) {
return request({
method: 'GET',
url: `/api/union/summary/compare/${id}`,
})
}
// 中美博弈分析
export function getTechnologyGameAnalysis() {
return request({
method: 'GET',
url: `/api/rivalryIndexV2/TechnologyGameAnalysis`,
})
}
//中美博弈概览V7:美国政府部门对华制裁最新动态
export function getGovernmentSanctionsDynamics() {
return request({
method: 'GET',
url: `/api/rivalryIndex/governmentSanctionsDynamics`,
})
}
\ No newline at end of file
src/views/ZMOverView/components/fourSuppress/components/allGovernment/index.vue
浏览文件 @ d99b92e3
......@@ -20,13 +20,8 @@
</div>
</div>
<img :src="leftBtn" alt="" class="left-btn" @click="prev" :class="{ disabled: currentIndex === 0 }" />
<img
:src="rightBtn"
alt=""
class="right-btn"
@click="next"
:class="{ disabled: currentIndex >= cardList.length - 5 }"
/>
<img :src="rightBtn" alt="" class="right-btn" @click="next"
:class="{ disabled: currentIndex >= cardList.length - 5 }" />
</div>
<div class="main-charts">
<div class="charts-title">
......@@ -64,13 +59,8 @@
<span class="item-title">{{ item.title }}</span>
<span class="item-date">{{ item.date }} · {{ item.type }}</span>
</div>
<el-tooltip
effect="dark"
:content="item.content"
popper-class="common-prompt-popper"
placement="top"
:show-after="500"
>
<el-tooltip effect="dark" :content="item.content" popper-class="common-prompt-popper" placement="top"
:show-after="500">
<div class="dynamic-item-body">
{{ item.content }}
</div>
......@@ -94,13 +84,7 @@
<div class="ranking-header">
<div class="header-left">
<div class="dept-icons">
<img
v-for="(dept, dIndex) in rank.depts"
:key="dIndex"
:src="defaultImg"
alt=""
class="dept-icon"
/>
<img v-for="(dept, dIndex) in rank.depts" :key="dIndex" :src="defaultImg" alt="" class="dept-icon" />
</div>
<span class="dept-names">{{ rank.depts.join(" / ") }}</span>
</div>
......@@ -114,13 +98,8 @@
<span class="item-type" :class="item.type === '法案' ? 'type-bill' : 'type-order'">{{
item.type
}}</span>
<el-tooltip
effect="dark"
:content="item.title"
popper-class="common-prompt-popper"
placement="top"
:show-after="500"
>
<el-tooltip effect="dark" :content="item.title" popper-class="common-prompt-popper" placement="top"
:show-after="500">
<span class="item-title">{{ item.title }}</span>
</el-tooltip>
</div>
......@@ -171,13 +150,8 @@
<div class="light" :class="{ active: event.level === 'red', red: true }"></div>
</div>
</div>
<el-tooltip
effect="dark"
:content="event.content"
popper-class="common-prompt-popper"
placement="top"
:show-after="500"
>
<el-tooltip effect="dark" :content="event.content" popper-class="common-prompt-popper" placement="top"
:show-after="500">
<div class="event-content">{{ event.content }}</div>
</el-tooltip>
<div class="event-tags">
......@@ -346,7 +320,7 @@ const getLineColorClass = (level) => {
if (level) {
return `line-${level}`;
}
return `line-default`;
return `line-default`;
};
const dateRange = ref([0, 0]);
......@@ -593,15 +567,15 @@ const initSlider = () => {
sliderChart = echarts.init(sliderChartRef.value);
const dates = timelineAllData.value.map(item => parseDate(item.date));
// 设定总范围：2010年1月1日 - 当前年份年底
const currentYear = new Date().getFullYear();
const rangeMin = new Date(2018, 0, 1).getTime();
const rangeMax = new Date(currentYear, 11, 31).getTime();
const rangeMin = new Date(2018, 0, 1).getTime();
const rangeMax = new Date(currentYear, 11, 31).getTime();
// 设定默认选中范围：2025-01-01 到 2025-04-25
const defaultStart = new Date(2025, 0, 1).getTime();
const defaultEnd = new Date(2025, 3, 25).getTime();
const defaultEnd = new Date(2025, 3, 25).getTime();
// 初始化 dateRange 为默认选中范围
dateRange.value = [defaultStart, defaultEnd];
......@@ -819,10 +793,12 @@ const prev = () => {
.content-wrapper {
width: 1666px;
height: 2132px;
.main-content {
width: 100%;
position: relative;
margin-bottom: 16px;
.cards-mask {
width: 100%;
overflow: hidden; // 仅在这里隐藏超出部分，不影响外层的按钮
......@@ -848,6 +824,7 @@ const prev = () => {
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 0 20px rgba(25, 69, 130, 0.1);
cursor: pointer;
.card-bg {
position: absolute;
top: 0;
......@@ -861,6 +838,7 @@ const prev = () => {
z-index: 0;
opacity: 0.8;
background-color: rgba(5, 33, 77, 0.7); // 调整为更明显的深蓝色
&::after {
content: "";
position: absolute;
......@@ -931,11 +909,13 @@ const prev = () => {
cursor: pointer;
z-index: 10;
transition: opacity 0.3s;
&.disabled {
opacity: 0.3;
cursor: not-allowed;
}
}
.right-btn {
width: 24px;
height: 48px;
......@@ -946,12 +926,14 @@ const prev = () => {
cursor: pointer;
z-index: 10;
transition: opacity 0.3s;
&.disabled {
opacity: 0.3;
cursor: not-allowed;
}
}
}
.main-charts {
width: 1601px;
height: 500px;
......@@ -961,6 +943,7 @@ const prev = () => {
display: flex;
flex-direction: column;
margin-bottom: 22px;
.charts-title {
width: 100%;
height: 48px;
......@@ -971,14 +954,17 @@ const prev = () => {
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;
......@@ -987,29 +973,36 @@ const prev = () => {
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;
......@@ -1017,6 +1010,7 @@ const prev = () => {
color: rgb(95, 101, 108);
height: 32px;
line-height: 24px;
&::placeholder {
color: rgb(95, 101, 108);
}
......@@ -1025,29 +1019,34 @@ const prev = () => {
}
}
}
.charts-content {
flex: 1;
width: 100%;
padding: 20px 40px 20px 40px;
box-sizing: border-box;
.chart-container {
width: 100%;
height: 100%;
}
}
}
.main-text {
width: 1601px;
height: 700px;
display: flex;
justify-content: space-between;
margin-bottom: 16px;
.text-item {
width: 792px;
height: 700px;
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.65);
box-shadow: 0 0 20px rgba(25, 69, 130, 0.1);
.text-item-title {
width: 100%;
height: 48px;
......@@ -1057,11 +1056,13 @@ const prev = () => {
padding-left: 17px;
box-sizing: border-box;
background: linear-gradient(180deg, rgba(231, 243, 255, 1) 0%, rgba(231, 243, 255, 0) 100%);
img {
width: 18px;
height: 18px;
margin-right: 14px;
}
span {
font-family: YouSheBiaoTiHei;
font-size: 24px;
......@@ -1070,31 +1071,38 @@ const prev = () => {
color: rgb(5, 95, 194);
}
}
.text-item-content {
width: 100%;
height: 652px;
padding: 6px 27px 22px 27px;
box-sizing: border-box;
overflow-y: auto;
.dynamic-item {
display: flex;
padding: 16px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
&:last-child {
border-bottom: none;
}
.item-icon {
width: 24px;
height: 24px;
margin-right: 12px;
margin-top: 3px;
}
.item-right {
flex: 1;
.dynamic-item-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
.item-title {
font-family: "Microsoft YaHei";
font-size: 16px;
......@@ -1106,6 +1114,7 @@ const prev = () => {
white-space: nowrap;
max-width: 500px;
}
.item-date {
font-family: "Microsoft YaHei";
font-size: 16px;
......@@ -1114,6 +1123,7 @@ const prev = () => {
color: rgb(95, 101, 108);
}
}
.dynamic-item-body {
font-family: "Microsoft YaHei";
font-size: 16px;
......@@ -1127,10 +1137,12 @@ const prev = () => {
white-space: nowrap;
cursor: pointer;
}
.dynamic-item-tags {
display: flex;
gap: 8px;
margin-top: 5px;
.tag {
padding: 2px 8px;
border-radius: 4px;
......@@ -1138,16 +1150,19 @@ const prev = () => {
font-size: 14px;
font-weight: 400;
line-height: 20px;
&.tag-blue {
color: #2f79c4;
background: rgba(47, 121, 196, 0.1);
border: 1px solid rgba(47, 121, 196, 0.3);
}
&.tag-green {
color: #52c41a;
background: rgba(82, 196, 26, 0.1);
border: 1px solid rgba(82, 196, 26, 0.3);
}
&.tag-red {
color: #fa541c;
background: rgba(250, 84, 28, 0.1);
......@@ -1158,12 +1173,14 @@ const prev = () => {
}
}
}
.text-item-contentOther {
width: 100%;
height: 652px;
padding: 10px 30px 22px 27px;
box-sizing: border-box;
overflow-y: auto;
.ranking-card {
width: 100%;
border-radius: 10px;
......@@ -1171,29 +1188,36 @@ const prev = () => {
padding: 12px 24px;
margin-bottom: 12px;
box-sizing: border-box;
&:last-child {
margin-bottom: 0;
}
.ranking-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
.header-left {
display: flex;
align-items: center;
.dept-icons {
display: flex;
margin-right: 12px;
.dept-icon {
width: 24px;
height: 24px;
margin-right: -8px; // 图标叠加效果
&:last-child {
margin-right: 0;
}
}
}
.dept-names {
font-family: "Microsoft YaHei";
font-size: 16px;
......@@ -1202,6 +1226,7 @@ const prev = () => {
color: rgb(59, 65, 75);
}
}
.header-right {
.joint-count {
font-family: "Microsoft YaHei";
......@@ -1212,19 +1237,23 @@ const prev = () => {
}
}
}
.ranking-body {
display: flex;
flex-direction: column;
gap: 8px;
.ranking-item {
display: flex;
justify-content: space-between;
align-items: center;
.item-left {
display: flex;
align-items: center;
flex: 1;
overflow: hidden;
.item-type {
padding: 2px 8px;
border-radius: 4px;
......@@ -1233,17 +1262,20 @@ const prev = () => {
font-weight: 400;
line-height: 20px;
margin-right: 13px;
&.type-bill {
color: #2f79c4;
background: rgba(47, 121, 196, 0.1);
// border: 1px solid rgba(47, 121, 196, 0.3);
}
&.type-order {
color: #2f79c4;
background: rgba(47, 121, 196, 0.1);
// border: 1px solid rgba(47, 121, 196, 0.3);
}
}
.item-title {
font-family: "Microsoft YaHei";
font-size: 16px;
......@@ -1256,6 +1288,7 @@ const prev = () => {
cursor: pointer;
}
}
.item-date {
font-family: "Microsoft YaHei";
font-size: 16px;
......@@ -1270,12 +1303,14 @@ const prev = () => {
}
}
}
.main-bottom {
width: 100%;
height: 700px;
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.65);
box-shadow: 0 0 20px rgba(25, 69, 130, 0.1);
.bottom-item {
width: 100%;
height: 48px;
......@@ -1286,14 +1321,17 @@ const prev = () => {
padding-right: 35px;
box-sizing: border-box;
background: linear-gradient(180deg, rgba(231, 243, 255, 1) 0%, rgba(231, 243, 255, 0) 100%);
.bottom-item-title {
display: flex;
align-items: center;
img {
width: 18px;
height: 18px;
margin-right: 14px;
}
span {
font-family: YouSheBiaoTiHei;
font-size: 24px;
......@@ -1302,11 +1340,13 @@ const prev = () => {
color: rgb(5, 95, 194);
}
}
.bottom-item-select {
display: flex;
height: 48px;
align-items: end;
gap: 8px;
.select-btn {
padding: 4px 16px;
border-radius: 4px;
......@@ -1318,6 +1358,7 @@ const prev = () => {
color: rgb(95, 101, 108);
cursor: pointer;
background-color: #fff;
// transition: all 0.3s;
&.active {
color: rgb(5, 95, 194);
......@@ -1325,8 +1366,10 @@ const prev = () => {
background-color: rgba(231, 243, 255, 1);
}
}
.field-select {
width: 160px;
:deep(.el-input) {
.el-input__wrapper {
height: 32px;
......@@ -1334,6 +1377,7 @@ const prev = () => {
box-sizing: border-box;
background-color: transparent;
border-radius: 4px;
.el-input__inner {
height: 32px;
line-height: 32px;
......@@ -1341,6 +1385,7 @@ const prev = () => {
font-size: 16px;
font-weight: 400;
color: rgb(95, 101, 108);
&::placeholder {
color: rgb(95, 101, 108);
}
......@@ -1350,11 +1395,13 @@ const prev = () => {
}
}
}
.bottom-content {
width: 100%;
height: calc(100% - 48px);
padding: 14px 23px 19px 23px;
box-sizing: border-box;
.timeline-container {
width: 100%;
height: 100%;
......@@ -1364,19 +1411,21 @@ const prev = () => {
border: 1px solid rgb(234, 236, 238);
display: flex;
flex-direction: column;
.timeline-list {
flex: 1;
overflow-y: auto;
padding-right: 8px;
padding-bottom: 8px;
.dept-row {
display: flex;
margin-bottom: 8px;
&:last-child {
margin-bottom: 0;
}
.dept-info {
width: 200px;
flex-shrink: 0;
......@@ -1388,13 +1437,13 @@ const prev = () => {
padding: 12px 16px;
box-sizing: border-box;
height: 130px;
.dept-icon {
width: 48px;
height: 50px;
margin-right: 8px;
}
.dept-text {
.dept-name {
font-family: "Microsoft YaHei";
......@@ -1403,6 +1452,7 @@ const prev = () => {
color: rgb(59, 65, 75);
line-height: 24px;
}
.dept-count {
font-family: "Microsoft YaHei";
font-size: 16px;
......@@ -1412,18 +1462,19 @@ const prev = () => {
}
}
}
.events-container {
flex: 1;
display: flex;
align-items: center;
gap: 8px;
overflow-x: auto;
// 隐藏滚动条
&::-webkit-scrollbar {
display: none;
}
.event-card {
min-width: 240px;
max-width: 240px;
......@@ -1437,29 +1488,53 @@ const prev = () => {
position: relative;
overflow: hidden;
flex-shrink: 0;
.card-top-line {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
&.line-blue { background-color: #2f79c4; }
&.line-green { background-color: rgb(33, 129, 57); }
&.line-red { background-color: rgb(206, 79, 81); }
&.line-orange { background-color: #fa8c16; }
&.line-yellow { background-color: rgb(232, 189, 11); }
&.line-purple { background-color: #722ed1; }
&.line-cyan { background-color: #13c2c2; }
&.line-default { background-color: rgb(234, 236, 238); }
&.line-blue {
background-color: #2f79c4;
}
&.line-green {
background-color: rgb(33, 129, 57);
}
&.line-red {
background-color: rgb(206, 79, 81);
}
&.line-orange {
background-color: #fa8c16;
}
&.line-yellow {
background-color: rgb(232, 189, 11);
}
&.line-purple {
background-color: #722ed1;
}
&.line-cyan {
background-color: #13c2c2;
}
&.line-default {
background-color: rgb(234, 236, 238);
}
}
.event-header {
display: flex;
justify-content: space-between;
align-items: center;
.event-date {
font-family: "Microsoft YaHei";
font-size: 16px;
......@@ -1471,7 +1546,7 @@ const prev = () => {
.traffic-light {
display: flex;
gap: 2px;
background-color: rgb(247, 248, 249);
background-color: rgb(247, 248, 249);
padding: 2px 2px;
border-radius: 20px;
......@@ -1479,21 +1554,23 @@ const prev = () => {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: rgb(234, 236, 238);
background-color: rgb(234, 236, 238);
&.green.active {
background-color: rgb(33, 129, 57);
}
&.yellow.active {
background-color: rgb(232, 189, 11);
}
&.red.active {
background-color: rgb(206, 79, 81);
}
}
}
}
.event-content {
font-family: "Microsoft YaHei";
font-size: 16px;
......@@ -1506,13 +1583,13 @@ const prev = () => {
-webkit-box-orient: vertical;
overflow: hidden;
}
.event-tags {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 4px;
.tag {
padding: 2px 8px;
border-radius: 4px;
......@@ -1521,32 +1598,37 @@ const prev = () => {
font-family: "Microsoft YaHei";
line-height: 20px;
border: 1px solid;
&.tag-blue {
color: rgba(9, 88, 217, 1);
background: rgba(230, 244, 255, 1);
border-color: rgba(186, 224, 255, 1);
}
&.tag-green {
color: rgba(56, 158, 13, 1);
background: rgba(246, 255, 237, 1);
border-color: rgba(217, 247, 190, 1);
}
&.tag-red {
color: rgba(245, 34, 45, 1);
background: rgba(255, 241, 240, 1);
border-color: rgba(255, 163, 158, 1);
}
&.tag-orange {
color: rgba(250, 140, 22, 1);
background: rgba(255, 247, 230, 1);
border-color: rgba(255, 213, 145, 1);
}
&.tag-purple {
color: rgba(114, 46, 209, 1);
background: rgba(249, 240, 255, 1);
border-color: rgba(211, 173, 247, 1);
}
&.tag-cyan {
color: rgba(19, 194, 194, 1);
background: rgba(230, 255, 251, 1);
......@@ -1563,10 +1645,12 @@ const prev = () => {
width: 100%;
height: 552px;
overflow-y: auto;
&::-webkit-scrollbar {
display: none;
}
}
.timelineBar {
width: 100%;
height: 51px;
......@@ -1592,6 +1676,7 @@ const prev = () => {
line-height: 30px !important;
color: #fff !important;
border: none !important;
.el-popper__arrow::before {
background-color: rgb(59, 65, 75) !important;
border-color: rgb(59, 65, 75) !important;
......
src/views/ZMOverView/components/gameProfile/Timeline.vue
浏览文件 @ d99b92e3
......@@ -5,7 +5,7 @@
<div class="timeline-box">
<div class="line" style="width:100vw ;" />
<!-- 一次性渲染全部节点 -->
<div v-for="(item, i) in data" :key="item[idKey]" class="node" :style="leftStyle(i)">
<div v-for="(item, i) in showList" :key="item[idKey]" class="node" :style="leftStyle(i)">
<!-- 圆环 -->
<div class="dot" :class="linePos(item)" :style="{ '--i': item.unit === '中国' ? ' #E29697' : '#69A0DA' }" />
......@@ -22,20 +22,21 @@
<!-- 卡片 -->
<div class="card" :class="[cardPos(item), 'right-side']" @click="$emit('click-card', item)">
<div style="justify-content: space-between;display: flex;width: 300px;">
<div class="tag">{{ item.tag }}</div>
<img :src="`/icon/${item.unit}.png`" class="icon"></img>
<div class="tag">{{ item.eventStrategy }}</div>
<img :src="item.eventCountryImg" class="icon"
style="border-radius: 14px;height: 28px;width: 28px;;"></img>
</div>
<div class="title" :style="{
}">{{ item.title }}</div>
<div class="time">{{ item.time }}</div>
}">{{ item.eventName }}</div>
<div class="time">{{ item.eventDate }}</div>
<!-- <div class="title" :style="{
color: item.unit === '中国' ? ' #CF4F51' : ''
}">{{ item.title }}</div>
<div class="time">{{ item.time }}</div> -->
<div class="content">{{ item.content }}</div>
<div class="content">{{ item.eventDesc }}</div>
</div>
</div>
</div>
......@@ -85,7 +86,7 @@ export default {
},
/* 卡片上下位置：unit=0 -> 下侧，其余 -> 上侧 */
cardPos(item) {
return item.unit === '中国' ? 'down' : 'up';
return item.eventType === '反制措施' ? 'down' : 'up';
},
/* 延伸线方向 = 卡片方向 */
linePos(item) {
......@@ -278,7 +279,7 @@ export default {
width: 120px;
height: 28px;
/* 自动布局 */
display: flex;
/* display: flex; */
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
......@@ -303,7 +304,7 @@ export default {
width: 120px;
height: 28px;
/* 自动布局 */
display: flex;
/* display: flex; */
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
......@@ -346,5 +347,23 @@ export default {
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
width: 300px;
/* 设置一个固定的宽度 */
height: 100px;
/* 设置一个固定的高度，确保只显示 5 行 */
font-size: 16px;
/* 设置字体大小 */
line-height: 20px;
/* 设置行高 */
overflow: hidden;
/* 隐藏超出部分 */
display: -webkit-box;
/* 使用 Webkit 的 box 模型 */
-webkit-line-clamp: 3;
/* 限制为 5 行 */
-webkit-box-orient: vertical;
/* 垂直排列内容 */
text-overflow: ellipsis;
/* 超出部分显示省略号 */
}
</style>
\ No newline at end of file
src/views/ZMOverView/components/gameProfile/index.vue
浏览文件 @ d99b92e3
......@@ -8,11 +8,13 @@
</div>
<div style="display: flex; height: 650px; width: 100%">
<div style="width: 50%">
<div style="display: flex; justify-content: space-between; margin-right: 50px; line-height: 32px;align-items: center;" >
<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">
<el-option label="国家创新指数报告" value="last_year" />
<el-select class="select-item" size="default" style="margin-left: 15px; width: 240px; height: 32px"
v-model="origin" @change="handleGetCompare()">
<el-option :value="value.id" :label="value.name" v-for="value in originList" />
</el-select>
</div>
<div style="display: flex">
......@@ -25,21 +27,21 @@
<div style="width: 672px; height: 486px; padding-top: 50px" id="char"></div>
</div>
<div style="width: 50%">
<div style="width: 50%; height: 620px;overflow: auto;">
<el-table :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="id" border default-expand-all>
<el-table-column prop="name" label="指标名称" sortable width="350" />
<el-table-column prop="percent" label="中国">
<el-table-column prop="targetName" label="指标名称" sortable width="350" />
<el-table-column prop="chinaScore" label="中国">
<template #default="scope">
<div class="progress-wrapper left" :style="{ '--i': '40px', '--j': '-20px', marginLeft: '20px' }">
<el-progress :percentage="scope.row.percent[0]" :stroke-width="20" class="left-progress"
<el-progress :percentage="scope.row.chinaScore" :stroke-width="20" class="left-progress"
:show-text="false" />
</div>
</template>
</el-table-column>
<el-table-column prop="percent" label="美国">
<el-table-column prop="usScore" label="美国">
<template #default="scope">
<div class="progress-wrapper right" :style="{ '--i': '40px', marginRight: '20px' }">
<el-progress :percentage="scope.row.percent[0]" :stroke-width="20" class="right-progress"
<el-progress :percentage="scope.row.usScore" :stroke-width="20" class="right-progress"
:show-text="false" />
</div>
</template>
......@@ -63,7 +65,8 @@
}">
<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-left: auto; margin-right: 22px; width: 13px; height: 12px" />
<img :src="`/public/icon/ZM/btn-icon-arrow.png`"
style="margin-left: auto; margin-right: 22px; width: 13px; height: 12px" />
</div>
</div>
</div>
......@@ -75,6 +78,8 @@ import * as echarts from "echarts";
import Timeline from "./Timeline.vue";
import tableShow from "./tableShow.vue";
import radarChart from "./radarChart3.js";
import { getCompare, getChartDict, getTechnologyGameAnalysis } from '@/api/zmOverview/risk/index.js'
const course = ref([
{
time: "2025-01-15",
......@@ -129,22 +134,86 @@ const course = ref([
}
]);
onMounted(() => {
const dom = document.getElementById("char");
const myChart = echarts.init(dom);
const originList = ref([])
const origin = ref('')
//数据来源
const handleGetChartDict = async () => {
try {
// 2. 传入容器，生成配置
const option = radarChart(
["创新资源", "知识创造", "企业创新", "创新绩效", "创新环境"],
[
[4200, 3000, 20000, 35000, 50000, 18000],
[1000, 42000, 32000, 35000, 50000, 18000]
]
);
const res = await getChartDict();
console.log("数据来源", res);
if (res.code === 200 && res.data) {
originList.value = res.data
origin.value = res.data[0].id
}
} catch (error) {
console.error("获取数据来源error", error);
}
};
//中美科技实力对比
const handleGetCompare = async () => {
try {
const res = await getCompare(origin.value);
console.log("中美科技实力对比", res);
if (res.code === 200 && res.data) {
tableData.value = res.data
const secondLevelData = res.data[0].children;
const indicatorNames = secondLevelData.map(item => item.targetName);
const chinaScores = secondLevelData.map(item => item.chinaScore);
const usScores = secondLevelData.map(item => item.usScore);
const dom = document.getElementById("char");
const myChart = echarts.init(dom);
const radarOption = {
indicatorNames: indicatorNames,
data: [
chinaScores,
usScores
]
};
const option = radarChart(
radarOption.indicatorNames, radarOption.data
);
myChart.setOption(option);
console.log(radarOption)
}
} catch (error) {
console.error("获取中美科技实力对比error", error);
}
};
//中美博弈概览V2:领域打压遏制时间线
const handlegetTechnologyGameAnalysis = async () => {
try {
myChart.setOption(option);
const res = await getTechnologyGameAnalysis();
console.log("中美科技博弈分析", res);
if (res.code === 200 && res.data) {
course.value = res.data
}
} catch (error) {
console.error("获取中美科技博弈分析error", error);
}
};
onMounted(async () => {
await handleGetChartDict()
await handleGetCompare()
await handlegetTechnologyGameAnalysis()
// const dom = document.getElementById("char");
// const myChart = echarts.init(dom);
// setChart(option, "char7");
// // 2. 传入容器，生成配置
// const option = radarChart(
// ["创新资源", "知识创造", "企业创新", "创新绩效", "创新环境"],
// [
// [4200, 3000, 20000, 35000, 50000, 18000],
// [1000, 42000, 32000, 35000, 50000, 18000]
// ]
// );
// myChart.setOption(option);
// // setChart(option, "char7");
});
const tableData = ref([
......@@ -266,6 +335,7 @@ const btnList = ref([
width: 1600px;
height: 1600px;
margin: 0 auto;
.card-box {
width: 1600px;
height: 700px;
......
src/views/ZMOverView/components/newRisk/WaveBall.vue
浏览文件 @ d99b92e3
......@@ -34,7 +34,7 @@ let instance = null
/* 配置项 */
const makeOption = () => {
const p = Math.min(100, Math.max(0, props.percent)) / 100
console.log(props.color, 'colorcolorcolor')
// console.log(props, 'colorcolorcolor')
return {
series: [{
type: 'liquidFill',
......@@ -73,29 +73,29 @@ const makeOption = () => {
formatter: function () {
const change = props.data.change;
const unit = props.data.unit;
if (change === '无新增') {
return `{noChange|${change}}\n{b|共${props.data.count}${unit}}`
if (change === 0) {
return `{num|${'无新增'}}`
}
return `{num|${change}}{unit| ${unit}}\n{b|共${props.data.count}${unit}}`
},
rich: {
num: {
fontSize: 36,
fontSize: 36,
fontWeight: 'bold',
color: `${props.color[5]}`,
padding: [-4, 0, 8, 0]
padding: [-4, 0, 8, 0]
},
noChange: {
fontSize: 24,
fontSize: 24,
fontWeight: 'bold',
color: `${props.color[5]}`,
padding: [0, 0, 8, 0]
},
unit: {
fontSize: 18,
fontSize: 18,
fontWeight: 'normal',
color: `${props.color[5]}`,
padding: [0, 0, 12, 0],
padding: [0, 0, 12, 0],
verticalAlign: 'bottom'
},
b: {
......
src/views/ZMOverView/components/newRisk/index.vue
浏览文件 @ d99b92e3
......@@ -23,7 +23,7 @@
{{ sections[index].title }}
</div>
<div style="width: 50px; color: #ffffff">
{{ sections[index].date }}
{{ sections[index].date.slice(-5) }}
</div>
</div>
</div>
......@@ -33,7 +33,7 @@
<img class="section-title" src="./icon/title-icon-2.png" />
<div>风险信号</div>
<div class="num">12</div>
<div class="num">{{ riskTotal }}</div>
<div class="manage-btn" @click="handleToRiskManage">
风险信号管理 >
</div>
......@@ -74,22 +74,22 @@
<div class="carousel-title">
<div>
<div class="title-text">
{{ News.title }}
{{ News.hotspotTitle }}
</div>
<div class="title-tag">
{{ News.category }}
{{ News.hotspotType }}
</div>
</div>
<img src="./icon/矩形 295.png" style="width: 96px; height: 96px" />
<img :src="News.hotspotPicture" style="width: 96px; height: 96px" />
</div>
<div style="/* 矩形 351 */ width: 664px; height: 1px; background: rgba(234, 236, 238, 1)"></div>
<div class="news-carousel-content">{{ News.content }}</div>
<div class="news-carousel-content">{{ News.hotspotDesc }}</div>
<div class="carousel-bottom">
<div class="left">{{ News.date + News.source }}</div>
<div class="left">{{ News.hotspotDate + News.hotspotOrgName }}</div>
<div class="right">
<div v-for="tag in News.tags" class="tag">
{{ tag }}
<div v-for="tag in News.domainList" class="tag">
{{ tag.name }}
</div>
</div>
</div>
......@@ -105,9 +105,10 @@
<script setup>
import { color } from "echarts";
import { onMounted, ref, computed } from "vue";
import { onMounted, ref, computed, onBeforeUnmount } from "vue";
import WaveBall from "./WaveBall.vue";
import { getBillRiskSignal } from "@/api/bill/billHome";
import { getLatestRiskUpdates, getLatestRisks } from '@/api/zmOverview/risk/index.js'
const sectionTab = [
{
textColor: "rgba(9, 88, 217, 1)",
......@@ -148,14 +149,14 @@ const sections = ref([
date: "12-18",
waveBall: [
{
percent: 30, // 估算的百分比
percent: 0, // 估算的百分比
count: 1626,
change: "+3",
unit: "项",
title: "法案(提出)"
},
{
percent: 20, // 估算的百分比
percent: 0, // 估算的百分比
count: 69,
change: "+2",
unit: "个",
......@@ -168,14 +169,14 @@ const sections = ref([
date: "12-19",
waveBall: [
{
percent: 10, // 估算的百分比
percent: 0, // 估算的百分比
count: 128,
change: "+1",
unit: "次",
title: "实体清单"
},
{
percent: 20, // 估算的百分比
percent: 0, // 估算的百分比
count: 69,
change: "+1",
unit: "次",
......@@ -188,15 +189,15 @@ const sections = ref([
date: "12-15",
waveBall: [
{
percent: 15, // 估算的百分比
count: 35,
percent: 0, // 估算的百分比
count: 0,
change: "+1",
unit: "次",
title: "SDN"
},
{
percent: 5, // 估算的百分比
count: 28,
percent: 0, // 估算的百分比
count: 0,
change: "+1",
unit: "家",
title: "涉军企业"
......@@ -208,22 +209,22 @@ const sections = ref([
date: "12-15",
waveBall: [
{
percent: 3, // 估算的百分比
count: 215,
percent: 0, // 估算的百分比
count: 0,
change: "+1",
unit: "次",
title: "337调查"
},
{
percent: 3, // 估算的百分比
count: 14,
percent: 0, // 估算的百分比
count: 0,
change: "无新增",
unit: "次",
title: "230调查"
},
{
percent: 3, // 估算的百分比
count: 9,
percent: 0, // 估算的百分比
count: 0,
change: "无新增",
unit: "次",
title: "301调查"
......@@ -231,21 +232,117 @@ const sections = ref([
]
}
]);
// 风险信号
const warningList = ref([]);
// 获取法案风险信号
const handlegetBillRiskSignal = async () => {
const params = {
moduleId: "0100"
};
// 最新风险动态统计
const handleGetLatestRiskUpdates = async () => {
try {
const res = await getBillRiskSignal(params);
console.log("法案风险信号", res);
if (res.code === 200) {
warningList.value = res.data;
const params = {
currentDate: '本周'
}
} catch (error) { }
const res = await getLatestRiskUpdates(params);
console.log("最新风险动态统计", res);
if (res.code === 200 && res.data) {
sections.value = [
{
title: res.data.policiesRegulations.hotspotTitle,
date: res.data.policiesRegulations.hotspotDate,
waveBall: [
{
percent: 30, // 估算的百分比
count: res.data.bill.total,
change: res.data.bill.dailyIncrement,
unit: "项",
title: "法案(提出)"
},
{
percent: 20, // 估算的百分比
count: res.data.administrativeOrder.total,
change: res.data.administrativeOrder.dailyIncrement,
unit: "个",
title: "政令"
}
]
},
{
title: res.data.exportControl.hotspotTitle,
date: res.data.exportControl.hotspotDate,
waveBall: [
{
percent: 10, // 估算的百分比
count: res.data.Entities.total,
change: res.data.Entities.dailyIncrement,
unit: "次",
title: "实体清单"
},
{
percent: 20, // 估算的百分比
count: res.data.CCL.total,
change: res.data.CCL.dailyIncrement,
unit: "次",
title: "CCL"
}
]
},
{
title: res.data.investmentFinancingRestrictions.hotspotTitle,
date: res.data.investmentFinancingRestrictions.hotspotDate,
waveBall: [
{
percent: 15, // 估算的百分比
count: res.data.SDN.total,
change: res.data.SDN.dailyIncrement,
unit: "次",
title: "SDN"
},
{
percent: 5, // 估算的百分比
count: res.data.militaryInvolvement.total,
change: res.data.militaryInvolvement.dailyIncrement,
unit: "家",
title: "涉军企业"
}
]
},
{
title: res.data.marketAccess.hotspotTitle,
date: res.data.marketAccess.hotspotDate,
waveBall: [
{
percent: 3, // 估算的百分比
count: res.data['337Survey'].total,
change: res.data['337Survey'].dailyIncrement,
unit: "次",
title: "337调查"
},
{
percent: 3, // 估算的百分比
count: res.data['232Survey'].total,
change: res.data['232Survey'].dailyIncrement,
unit: "次",
title: "230调查"
},
{
percent: 3, // 估算的百分比
count: res.data['301Survey'].total,
change: res.data['301Survey'].dailyIncrement,
unit: "次",
title: "301调查"
}
]
}
]
console.log(sections.value, 'sections.value')
}
} catch (error) {
console.error("获取最新风险动态统计error", error);
}
};
// 风险信号
const warningList = ref([]);
const riskTotal = ref(0)
const hotNewsList = ref([
{
title: "美国白宫发布关于进一步延长TikTok执法宽限期的行政令",
......@@ -266,6 +363,24 @@ const hotNewsList = ref([
tags: ['人工智能', '通信网络']
}
]);
//最新风险信号
const handleGetLatestRisks = async () => {
try {
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')
}
} catch (error) {
console.error("获取最新风险信号error", error);
}
};
const curNews = ref({});
const carouselRef = ref(null);
const curHotNewsListIndex = ref(0);
......@@ -289,11 +404,16 @@ const handleSwithCurNews = name => {
carouselRef.value.next();
}
};
onMounted(() => {
// 这里可以添加从后端获取数据的代码
handlegetBillRiskSignal();
onMounted(async () => {
await handleGetLatestRiskUpdates()
await handleGetLatestRisks()
console.log("页面加载完成，可以获取数据了");
});
// onBeforeUnmount(() => {
// andleGetLatestRiskUpdates()
// });
</script>
<style lang="scss" scoped>
......@@ -344,6 +464,7 @@ onMounted(() => {
text-align: left;
display: flex;
align-items: center;
img {
/* 矢量 347 */
width: 22px;
......@@ -375,20 +496,22 @@ onMounted(() => {
}
.manage-btn {
margin-left: auto; /* 推到最右侧 */
margin-right: 16px; /* 适当的右边距 */
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);
}
......@@ -430,7 +553,7 @@ onMounted(() => {
font-style: Bold;
font-size: 20px;
font-weight: 700;
line-height: 26px;
// line-height: 26px;
letter-spacing: 0px;
text-align: center;
display: flex;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论