Skip to content

R
risk-monitor
提交 6e0bf909 authored 作者: 闫鹏's avatar 闫鹏
浏览文件
操作

合并分支 'yp-dev' 到 'master'

Yp dev 查看合并请求 !135
上级 13c8b5da accf8ee8
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 627 行增加 和 145 行删除
src/api/allGovernment.js
浏览文件 @ 6e0bf909
......@@ -6,14 +6,13 @@ import request from "@/api/request.js";
* * @param {String} params.monthNum // 月份数
*/
export function getAllGovernmentList(params) {
return request({
method: 'GET',
url: `/api/rivalryIndex/governmentSanctionsData`,
params
})
return request({
method: "GET",
url: `/api/rivalryIndex/governmentSanctionsData`,
params
});
}
// 全政府-获取美对华制裁措施数量趋势
/**
* @header token
......@@ -24,22 +23,23 @@ export function getAllGovernmentList(params) {
* @param {String} params.sanType // 制裁手段
*/
export function getUSChinaSanctionTrend(params) {
return request({
method: 'GET',
url: `/api/rivalryIndex/sanctionsQuantitativeTrend`,
params
})
return request({
method: "GET",
url: `/api/rivalryIndex/sanctionsQuantitativeTrend`,
params
});
}
// 全政府-美政府部门打压遏制最新动态
/**
* @header token
*/
export function getUSGovernmentLatestDynamic() {
return request({
method: 'GET',
url: `/api/rivalryIndex/governmentSanctionsDynamics`
})
export function getUSGovernmentLatestDynamic(params) {
return request({
method: "GET",
url: `/api/rivalryIndex/governmentSanctionsDynamics`,
params
});
}
// 全政府-美政府部门联合制裁排行
......@@ -47,13 +47,12 @@ export function getUSGovernmentLatestDynamic() {
* @header token
*/
export function getUSGovernmentJointSanctionRank() {
return request({
method: 'GET',
url: `/api/rivalryIndex/governmentJointSanctionsRanking`
})
return request({
method: "GET",
url: `/api/rivalryIndex/governmentJointSanctionsRanking`
});
}
// 全政府-美政府部门对我打压遏制时间线
/**
* @header token
......@@ -65,24 +64,23 @@ export function getUSGovernmentJointSanctionRank() {
* @param {String} params.field // 领域ID
*/
export function getUSGovernmentSanctionHistory(params) {
return request({
method: 'GET',
url: `/api/rivalryIndex/getSanctionProcess`,
params
})
return request({
method: "GET",
url: `/api/rivalryIndex/getSanctionProcess`,
params
});
}
// 全政府-获取部门数据
/**
* @header token
*/
export function getDepartmentList(params) {
return request({
method: 'GET',
url: `/api/organization/summaryDepartList`,
params
})
return request({
method: "GET",
url: `/api/organization/summaryDepartList`,
params
});
}
// 全政府-获取制裁手段数据
......@@ -90,11 +88,11 @@ export function getDepartmentList(params) {
* @params {orgId}
*/
export function getSanTypeList(params) {
return request({
method: 'GET',
url: `/api/rivalryIndex/sanTypeList`,
params
})
return request({
method: "GET",
url: `/api/rivalryIndex/sanTypeList`,
params
});
}
// 全政府-获取未来三个月内的打压遏制时间线
......@@ -102,9 +100,9 @@ export function getSanTypeList(params) {
* @params {field}
*/
export function getThreeMonthSanctionProcess(params) {
return request({
method: 'GET',
url: `/api/rivalryIndex/nextThreeMonthSanctionProcess`,
params
})
}
\ No newline at end of file
return request({
method: "GET",
url: `/api/rivalryIndex/nextThreeMonthSanctionProcess`,
params
});
}
src/components/SimplePagination.vue 0 → 100644
浏览文件 @ 6e0bf909
NEW_FILE_CODE
<template>
<div class="simple-pagination">
<div class="pagination-wrapper">
<el-icon class="pagination-btn" @click="handlePrevPage" :class="{ disabled: currentPage === 1 }">
<el-icon :size="16">
<ArrowLeft />
</el-icon>
</el-icon>
<div class="pagination-info">
<span class="current-page">{{ currentPage }}</span>
<span>/</span>
<span>{{ totalPages }}</span>
</div>
<el-icon class="pagination-btn" @click="handleNextPage" :class="{ disabled: currentPage === totalPages }">
<el-icon :size="16">
<ArrowRight />
</el-icon>
</el-icon>
</div>
</div>
</template>
<script setup>
import { computed } from "vue";
import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
const props = defineProps({
// 当前页码
currentPage: {
type: Number,
default: 1
},
// 每页显示条数
pageSize: {
type: Number,
default: 5
},
// 总记录数
total: {
type: Number,
default: 0
}
});
const emit = defineEmits(["update:currentPage", "page-change"]);
// 计算总页数
const totalPages = computed(() => {
return Math.ceil(props.total / props.pageSize) || 1;
});
// 处理上一页
const handlePrevPage = () => {
if (props.currentPage > 1) {
const newPage = props.currentPage - 1;
emit("update:currentPage", newPage);
emit("page-change", newPage);
}
};
// 处理下一页
const handleNextPage = () => {
if (props.currentPage < totalPages.value) {
const newPage = props.currentPage + 1;
emit("update:currentPage", newPage);
emit("page-change", newPage);
}
};
</script>
<style lang="scss" scoped>
.simple-pagination {
display: flex;
justify-content: center;
align-items: center;
padding: 16px 0;
.pagination-wrapper {
display: flex;
align-items: center;
gap: 12px;
.pagination-btn {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(231, 243, 255, 1);
// border: 1px solid #dcdfe6;
border: none;
border-radius: 4px;
color: #055fc2;
font-size: 20px;
cursor: pointer;
transition: all 0.3s;
&:hover:not(.disabled) {
background-color: #f5f7fa;
border-color: #c0c4cc;
}
&.disabled {
opacity: 0.5;
cursor: not-allowed;
background-color: #f5f7fa;
color: #c0c4cc;
}
}
.pagination-info {
font-size: 14px;
color: rgba(5, 95, 194, 1);
// min-width: 60px;
text-align: center;
display: flex;
gap: 5px;
// letter-spacing: 5px;
}
}
}
</style>
src/components/buttonList/buttonList.vue
浏览文件 @ 6e0bf909
<template>
<div class="buttonList" :style="{ gap: gap + 'px' }">
<Button class="button" @click="setActiveIndex(item)" :is-active="isActive(item)" v-for="item in list" :key="item.id">
<Button
class="button"
@click="setActiveIndex(item)"
:is-active="isActive(item)"
:disabled="disabled || item.disabled"
v-for="item in list"
:key="item.id"
>
<slot name="item" :item="item">
{{ item.text }}
</slot>
......@@ -29,6 +36,10 @@ const props = defineProps({
default: function () {
return [];
}
},
disabled: {
type: Boolean,
default: false
}
});
const emit = defineEmits(["click"]);
......@@ -40,6 +51,9 @@ const isActive = item => {
}
};
function setActiveIndex(item) {
if (props.disabled || item.disabled) {
return;
}
if (!props.multiple) {
if (props.activeId === item.id) {
return;
......@@ -63,5 +77,12 @@ function setActiveIndex(item) {
gap: 8px;
overflow-x: auto;
flex-wrap: wrap;
.button {
&.is-disabled {
opacity: 0.5;
cursor: not-allowed;
}
}
}
</style>
src/views/ZMOverView/components/fourSuppress/components/addDomain/index-back.vue
浏览文件 @ 6e0bf909
......@@ -80,7 +80,7 @@
</div>
</div>
<div class="news-content">
<div v-for="(value, idx) in newsList" :key="idx" class="news-item">
<div v-for="(value, idx) in paginatedNewsList" :key="idx" class="news-item">
<div class="news-item-title">
<div class="tag-container">
<!-- <div v-for="tag in value.tags" :key="tag" :class="getTagClass(tag)">
......@@ -109,6 +109,25 @@
</el-tooltip>
</div>
</div>
<div class="news-pagination">
<div class="pagination-wrapper">
<el-button
class="pagination-btn"
type="primary"
@click="handlePrevPage"
:disabled="newsCurrentPage === 1"
:icon="ArrowLeft"
/>
<span class="pagination-info"> {{ newsCurrentPage }}/{{ totalPages }} </span>
<el-button
class="pagination-btn"
type="primary"
@click="handleNextPage"
:disabled="newsCurrentPage === totalPages"
:icon="ArrowRight"
/>
</div>
</div>
</div>
<div class="empty-section">
<div class="bottom-item">
......@@ -296,6 +315,7 @@ import {
} from "@/api/zmOverview/allDomains";
import { getUSGovernmentLatestDynamic, getDepartmentList, getSanTypeList } from "@/api/allGovernment.js";
import { ElMessage } from "element-plus";
import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
const router = useRouter();
......@@ -377,6 +397,36 @@ const timelineContainerWidth = 1700;
// 美政府部门打压遏制最新动态
const newsList = ref([]);
const newsCurrentPage = ref(1);
const newsPageSize = ref(3); // 每页显示 5 条
// 总页数
const totalPages = computed(() => {
return Math.ceil(newsList.value.length / newsPageSize.value) || 1;
});
// 分页后的新闻列表
const paginatedNewsList = computed(() => {
const start = (newsCurrentPage.value - 1) * newsPageSize.value;
const end = start + newsPageSize.value;
return newsList.value.slice(start, end);
});
const handleNewsPageChange = page => {
newsCurrentPage.value = page;
};
const handlePrevPage = () => {
if (newsCurrentPage.value > 1) {
newsCurrentPage.value--;
}
};
const handleNextPage = () => {
if (newsCurrentPage.value < totalPages.value) {
newsCurrentPage.value++;
}
};
const getUSGovernmentLatestDynamicData = async () => {
try {
......@@ -1359,11 +1409,115 @@ watch(activeDate, () => {
.news-section {
width: 792px;
height: 700px;
display: flex;
flex-direction: column;
justify-content: space-between;
.news-title {
padding: 8px;
}
// .news-pagination {
// display: flex;
// justify-content: center;
// align-items: center;
// padding: 16px 0;
// :deep(.el-pagination) {
// &.is-background .el-pager li {
// background-color: #fff;
// border: 1px solid #dcdfe6;
// border-radius: 4px;
// font-size: 14px;
// min-width: 32px;
// height: 32px;
// line-height: 32px;
// margin: 0 4px;
// &.is-active {
// background-color: #055fc2;
// color: #fff;
// border-color: #055fc2;
// }
// &:hover {
// background-color: #f5f7fa;
// }
// }
// .btn-prev,
// .btn-next {
// background-color: rgba(231, 243, 255, 1);
// // border: 1px solid #dcdfe6;
// border: none;
// border-radius: 4px;
// font-size: 14px;
// // min-width: 32px;
// // height: 32px;
// line-height: 32px;
// margin-right: 4px;
// .el-icon {
// font-size: 16px;
// color: #055fc2;
// font-weight: 800;
// }
// &:hover:not(.is-disabled) {
// background-color: #f5f7fa;
// }
// &.is-disabled {
// opacity: 0.5;
// cursor: not-allowed;
// }
// }
// }
// }
.news-pagination {
display: flex;
justify-content: center;
align-items: center;
padding: 16px 0;
.pagination-wrapper {
display: flex;
align-items: center;
gap: 12px;
.pagination-btn {
padding: 6px;
background-color: rgba(231, 243, 255, 1);
// border: 1px solid #dcdfe6;
border: none;
border-radius: 4px;
font-size: 14px;
color: #606266;
cursor: pointer;
transition: all 0.3s;
&:hover:not(:disabled) {
background-color: #f5f7fa;
// border-color: #c0c4cc;
}
&:disabled {
opacity: 0.5;
cursor: not-allowed;
background-color: #f5f7fa;
}
}
.pagination-info {
font-size: 14px;
color: rgba(5, 95, 194, 1);
min-width: 60px;
text-align: center;
letter-spacing: 4px;
}
}
}
.tag-container {
display: flex;
align-items: center;
......@@ -1753,11 +1907,12 @@ watch(activeDate, () => {
.news-content {
overflow-y: auto;
overflow-x: hidden;
margin-bottom: auto;
}
.news-item {
/* 全政府-动态 (四全-最新动态) */
width: 737px;
height: 124px;
height: 116px;
margin: 0 28px;
/* 自动布局 */
display: flex;
......@@ -1825,7 +1980,7 @@ watch(activeDate, () => {
letter-spacing: 0px;
text-align: left;
color: rgba(59, 65, 75, 1);
margin-top: 8px;
// margin-top: 8px;
/* 单行省略 */
display: -webkit-box;
-webkit-box-orient: vertical;
......
src/views/ZMOverView/components/fourSuppress/components/addDomain/index.vue
浏览文件 @ 6e0bf909
......@@ -80,7 +80,7 @@
</div>
</div>
<div class="news-content">
<div v-for="(value, idx) in paginatedNewsList" :key="idx" class="news-item">
<div v-for="(value, idx) in newsList" :key="idx" class="news-item">
<div class="news-item-title">
<div class="tag-container">
<!-- <div v-for="tag in value.tags" :key="tag" :class="getTagClass(tag)">
......@@ -109,16 +109,31 @@
</el-tooltip>
</div>
</div>
<div class="news-pagination">
<el-pagination
layout="prev, pager, next"
:total="newsList.length"
:page-size="newsPageSize"
v-model:current-page="newsCurrentPage"
size="small"
@current-change="handleNewsPageChange"
/>
</div>
<!-- <div class="news-pagination">
<div class="pagination-wrapper">
<el-button
class="pagination-btn"
type="primary"
@click="handlePrevPage"
:disabled="newsCurrentPage === 1"
:icon="ArrowLeft"
/>
<span class="pagination-info"> {{ newsCurrentPage }}/{{ totalPages }} </span>
<el-button
class="pagination-btn"
type="primary"
@click="handleNextPage"
:disabled="newsCurrentPage === totalPages"
:icon="ArrowRight"
/>
</div>
</div> -->
<simple-pagination
v-model:current-page="newsCurrentPage"
:page-size="pageSize"
:total="newsList.length"
@page-change="handleNewsPageChange"
/>
</div>
<div class="empty-section">
<div class="bottom-item">
......@@ -306,6 +321,8 @@ import {
} from "@/api/zmOverview/allDomains";
import { getUSGovernmentLatestDynamic, getDepartmentList, getSanTypeList } from "@/api/allGovernment.js";
import { ElMessage } from "element-plus";
import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
import SimplePagination from "@/components/SimplePagination.vue";
const router = useRouter();
......@@ -386,27 +403,56 @@ const selectedFieldTimeline = ref("");
const timelineContainerWidth = 1700;
// 美政府部门打压遏制最新动态
const allNewsList = ref([]);
const newsList = ref([]);
const newsCurrentPage = ref(1);
const newsPageSize = ref(5); // 每页显示 5 条
const pageSize = ref(5); // 每页显示 5 条
// 总页数
const totalPages = computed(() => {
return Math.ceil(newsList.value.length / pageSize.value) || 1;
});
// 分页后的新闻列表
const paginatedNewsList = computed(() => {
const start = (newsCurrentPage.value - 1) * newsPageSize.value;
const end = start + newsPageSize.value;
const start = (newsCurrentPage.value - 1) * pageSize.value;
const end = start + pageSize.value;
return newsList.value.slice(start, end);
});
const updateNewsListByPage = () => {
const start = (newsCurrentPage.value - 1) * pageSize.value;
const end = start + pageSize.value;
newsList.value = allNewsList.value.slice(start, end);
};
const handleNewsPageChange = page => {
newsCurrentPage.value = page;
};
const handlePrevPage = () => {
if (newsCurrentPage.value > 1) {
newsCurrentPage.value--;
}
};
const handleNextPage = () => {
if (newsCurrentPage.value < totalPages.value) {
newsCurrentPage.value++;
}
};
const getUSGovernmentLatestDynamicData = async () => {
try {
const res = await getUSGovernmentLatestDynamic();
const params = {
orgId: !!deptValueForLatest.value ? deptValueForLatest.value : null,
pageSize: 50,
currentPage: newsCurrentPage.value
};
const res = await getUSGovernmentLatestDynamic(params);
if (res.code === 200 && res.data) {
// 将接口数据转换为 newsList 需要的格式
newsList.value = res.data.map(item => {
allNewsList.value = res.data.content.map(item => {
const dateObj = new Date(item.time);
const formattedDate = `${dateObj.getFullYear()}年${dateObj.getMonth() + 1}月${dateObj.getDate()}日`;
......@@ -419,6 +465,7 @@ const getUSGovernmentLatestDynamicData = async () => {
content: item.content || item.title // 如果 content 为空，使用 title 填充
};
});
updateNewsListByPage();
}
} catch (error) {
console.error("获取美政府部门打压遏制最新动态失败:", error);
......@@ -1390,60 +1437,104 @@ watch(activeDate, () => {
padding: 8px;
}
// .news-pagination {
// display: flex;
// justify-content: center;
// align-items: center;
// padding: 16px 0;
// :deep(.el-pagination) {
// &.is-background .el-pager li {
// background-color: #fff;
// border: 1px solid #dcdfe6;
// border-radius: 4px;
// font-size: 14px;
// min-width: 32px;
// height: 32px;
// line-height: 32px;
// margin: 0 4px;
// &.is-active {
// background-color: #055fc2;
// color: #fff;
// border-color: #055fc2;
// }
// &:hover {
// background-color: #f5f7fa;
// }
// }
// .btn-prev,
// .btn-next {
// background-color: rgba(231, 243, 255, 1);
// // border: 1px solid #dcdfe6;
// border: none;
// border-radius: 4px;
// font-size: 14px;
// // min-width: 32px;
// // height: 32px;
// line-height: 32px;
// margin-right: 4px;
// .el-icon {
// font-size: 16px;
// color: #055fc2;
// font-weight: 800;
// }
// &:hover:not(.is-disabled) {
// background-color: #f5f7fa;
// }
// &.is-disabled {
// opacity: 0.5;
// cursor: not-allowed;
// }
// }
// }
// }
.news-pagination {
display: flex;
justify-content: center;
align-items: center;
padding: 16px 0;
:deep(.el-pagination) {
&.is-background .el-pager li {
background-color: #fff;
border: 1px solid #dcdfe6;
border-radius: 4px;
font-size: 14px;
min-width: 32px;
height: 32px;
line-height: 32px;
margin: 0 4px;
&.is-active {
background-color: #055fc2;
color: #fff;
border-color: #055fc2;
}
&:hover {
background-color: #f5f7fa;
}
}
.pagination-wrapper {
display: flex;
align-items: center;
gap: 12px;
.btn-prev,
.btn-next {
.pagination-btn {
padding: 6px;
background-color: rgba(231, 243, 255, 1);
// border: 1px solid #dcdfe6;
border: none;
border-radius: 4px;
font-size: 14px;
// min-width: 32px;
// height: 32px;
line-height: 32px;
margin-right: 4px;
.el-icon {
font-size: 16px;
color: #055fc2;
font-weight: 800;
}
color: #606266;
cursor: pointer;
transition: all 0.3s;
&:hover:not(.is-disabled) {
&:hover:not(:disabled) {
background-color: #f5f7fa;
// border-color: #c0c4cc;
}
&.is-disabled {
&:disabled {
opacity: 0.5;
cursor: not-allowed;
background-color: #f5f7fa;
}
}
.pagination-info {
font-size: 14px;
color: rgba(5, 95, 194, 1);
min-width: 60px;
text-align: center;
letter-spacing: 4px;
}
}
}
......
src/views/ZMOverView/components/gameProfile/index.vue
浏览文件 @ 6e0bf909
......@@ -2,26 +2,45 @@
<template>
<div class="content-wrapper">
<div class="card-box">
<div class="card-title">
<img class="icon" src="../../assets/icons/title-icon1.png" />
<img class="text" src="../../assets/icons/title-text1.svg" />
<div class="card-header">
<div class="card-title">
<img class="icon" src="../../assets/icons/title-icon1.png" />
<img class="text" src="../../assets/icons/title-text1.svg" />
</div>
<div style="display: flex; margin-left: 50px; align-items: center">
数据来源:
<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, index) in originList" :key="index" />
</el-select>
</div>
</div>
<div style="display: flex; height: 650px; width: 100%;padding-top: 24px;">
<div style="display: flex; height: 650px; width: 100%; padding-top: 12px">
<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; margin-left: 50px">
<div class="content-chart-header">
<button-list :list="buttonList" :active-id="activeButtonId" @click="setActiveButtonId"></button-list>
<!-- <div style="display: flex; margin-left: 50px">
数据来源:
<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,index in originList" :key="index" />
<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, index) in originList"
:key="index"
/>
</el-select>
</div>
</div> -->
<div style="display: flex">
<div class="china-icon"></div>
<div class="text" style="margin-right: 18px">中国</div>
......@@ -33,25 +52,38 @@
<div style="width: 100%; height: 620px; padding-top: 24px" id="char"></div>
</div>
<div style="width: 778px; height: 620px; overflow: auto">
<el-table :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="targetCode" border
:tree-props="{ children: 'children' }" default-expand-all :header-cell-style="{ 'border-right': 'none' }"
:cell-style="{ 'border-right': 'none' }" height="600">
<el-table
:data="tableData"
style="width: 100%; margin-bottom: 20px"
row-key="targetCode"
border
:tree-props="{ children: 'children' }"
default-expand-all
:header-cell-style="{ 'border-right': 'none' }"
:cell-style="{ 'border-right': 'none' }"
height="600"
>
<!-- 自定义展开图标 -->
<el-table-column prop="targetName" label="指标名称" width="350">
</el-table-column>
<el-table-column prop="targetName" label="指标名称" width="350"> </el-table-column>
<el-table-column prop="usScore" label="美国">
<template #default="scope">
<div style="display: flex">
<div class="progress-text" style="width:90px;">
<div class="progress-text" style="width: 90px">
<div class="rank" v-show="scope.row.usScore != 0">{{ "No." + scope.row.usRank }}</div>
<div class="score" v-show="scope.row.usScore != 0">{{ scope.row.usScore }}</div>
</div>
<div class="progress-wrapper left">
<el-progress :percentage="scope.row.usScore" :stroke-width="20" class="left-progress" :class="{
cLead: scope.row.usScore == 0,
leftProgress: scope.row.usScore != 0
}" :show-text="false" />
<el-progress
:percentage="scope.row.usScore"
:stroke-width="20"
class="left-progress"
:class="{
cLead: scope.row.usScore == 0,
leftProgress: scope.row.usScore != 0
}"
:show-text="false"
/>
</div>
</div>
</template>
......@@ -60,17 +92,29 @@
<template #default="scope">
<div style="display: flex">
<div class="progress-wrapper right" :style="{ '--i': '40px', marginRight: '20px' }">
<el-progress :percentage="scope.row.chinaScore" :stroke-width="20" class="right-progress"
:class="{ cLead: scope.row.chinaRank < scope.row.usRank && scope.row.chinaScore != 0 }"
:show-text="false" />
<el-progress
:percentage="scope.row.chinaScore"
:stroke-width="20"
class="right-progress"
:class="{
cLead: scope.row.chinaRank < scope.row.usRank && scope.row.chinaScore != 0
}"
:show-text="false"
/>
</div>
<div class="progress-text" style="color: rgba(206, 79, 81, 1);width:90px;">
<div class="rank" :class="{ cLeadRank: scope.row.chinaRank < scope.row.usRank }"
v-show="scope.row.chinaScore != 0">
<div class="progress-text" style="color: rgba(206, 79, 81, 1); width: 90px">
<div
class="rank"
:class="{ cLeadRank: scope.row.chinaRank < scope.row.usRank }"
v-show="scope.row.chinaScore != 0"
>
{{ "No." + scope.row.chinaRank }}
</div>
<div class="score" :class="{ cLeadScore: scope.row.chinaRank < scope.row.usRank }"
v-show="scope.row.chinaScore != 0">
<div
class="score"
:class="{ cLeadScore: scope.row.chinaRank < scope.row.usRank }"
v-show="scope.row.chinaScore != 0"
>
{{ scope.row.chinaScore }}
</div>
</div>
......@@ -94,8 +138,10 @@
<div class="card-item" v-for="(val, idx) in course" :key="idx">
<div class="card-item-top">{{ val.eventStrategy }}</div>
<div class="card-item-line"></div>
<div class="card-item-main"
:class="{ cnBackground: val.eventCountry === '中国', usBackground: val.eventCountry === '美国' }">
<div
class="card-item-main"
:class="{ cnBackground: val.eventCountry === '中国', usBackground: val.eventCountry === '美国' }"
>
<div class="logo">
<img :src="val.eventCountryImg" alt="" />
</div>
......@@ -125,20 +171,38 @@
</div>
</div>
</div>
<img src="@/assets/icons/card-btn-left.png" alt="" class="left-btn" @click="prev"
:class="{ disabled: currentIndex === 0 }" />
<img src="@/assets/icons/card-btn-right.png" alt="" class="right-btn" @click="next"
:class="{ disabled: currentIndex >= course.length - 5 }" />
<img
src="@/assets/icons/card-btn-left.png"
alt=""
class="left-btn"
@click="prev"
:class="{ disabled: currentIndex === 0 }"
/>
<img
src="@/assets/icons/card-btn-right.png"
alt=""
class="right-btn"
@click="next"
:class="{ disabled: currentIndex >= course.length - 5 }"
/>
</div>
</div>
<div class="btn-box">
<div v-for="(value, index) in btnList" :key="index" class="btn-item" @click="handleClickBottomBtn" :style="{
background: value.background
}">
<div
v-for="(value, index) in btnList"
:key="index"
class="btn-item"
@click="handleClickBottomBtn"
:style="{
background: value.background
}"
>
<img :src="value.img" style="width: 22px; height: 19px; margin: 0 22px" />
{{ value.text }}
<img :src="`./icon/ZM/btn-icon-arrow.png`"
style="margin-left: auto; margin-right: 22px; width: 13px; height: 12px" />
<img
:src="`./icon/ZM/btn-icon-arrow.png`"
style="margin-left: auto; margin-right: 22px; width: 13px; height: 12px"
/>
<!-- <img src="./assets/images/btn-icon-arrow.png"
style="margin-left: auto; margin-right: 22px; width: 13px; height: 12px" /> -->
......@@ -153,6 +217,7 @@ import * as echarts from "echarts";
import { ArrowRight, CaretBottom } from "@element-plus/icons-vue";
import Timeline from "./Timeline.vue";
import tableShow from "./tableShow.vue";
import ButtonList from "@/components/buttonList/buttonList.vue";
import radarChart from "./radarChart3.js";
import { getCompare, getChartDict, getTechnologyGameAnalysis } from "@/api/zmOverview/risk/index.js";
......@@ -174,6 +239,22 @@ import Img7 from "./assets/images/btn-icon-6.png";
import Img8 from "./assets/images/btn-icon-7.png";
import { ElMessage } from "element-plus";
const buttonList = ref([
{
id: 1,
text: "趋势变化",
disabled: true
},
{
id: 2,
text: "指数对比"
}
]);
const activeButtonId = ref(buttonList.value[1]?.id || 1);
const setActiveButtonId = id => {
activeButtonId.value = id;
};
const course = ref([
{
time: "2025-01-15",
......@@ -493,9 +574,15 @@ const handleClickBottomBtn = () => {
/* 业务系统/模块阴影 */
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-right: 20px;
height: 54px;
}
.card-title {
width: 100%;
// width: 100%;
height: 48px;
display: flex;
......@@ -514,6 +601,14 @@ const handleClickBottomBtn = () => {
}
}
.content-chart-header {
display: flex;
justify-content: space-between;
margin: 0 50px;
// line-height: 32px;
align-items: center;
}
.card-main {
height: 650px;
position: relative;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论