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