Skip to content

R
risk-monitor
提交 5e90ca5e authored 作者: yanpeng's avatar yanpeng
浏览文件
操作

api对接

上级 c16f306c
显示空白字符变更
内嵌 并排
正在显示 包含 187 行增加 和 58 行删除
src/components/buttonList/buttonList.vue
浏览文件 @ 5e90ca5e
<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.vue
浏览文件 @ 5e90ca5e
......@@ -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)">
......@@ -130,7 +130,7 @@
</div> -->
<simple-pagination
v-model:current-page="newsCurrentPage"
:page-size="newsPageSize"
:page-size="pageSize"
:total="newsList.length"
@page-change="handleNewsPageChange"
/>
......@@ -403,22 +403,29 @@ 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 / newsPageSize.value) || 1;
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;
};
......@@ -437,10 +444,15 @@ const handleNextPage = () => {
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()}日`;
......@@ -453,6 +465,7 @@ const getUSGovernmentLatestDynamicData = async () => {
content: item.content || item.title // 如果 content 为空，使用 title 填充
};
});
updateNewsListByPage();
}
} catch (error) {
console.error("获取美政府部门打压遏制最新动态失败:", error);
......
src/views/ZMOverView/components/fourSuppress/components/allGovernment/index.vue
浏览文件 @ 5e90ca5e
......@@ -126,7 +126,7 @@
</div>
<simple-pagination
v-model:current-page="newsCurrentPage"
:page-size="newsPageSize"
:page-size="pageSize"
:total="allDynamicData.length"
@page-change="handleNewsPageChange"
/>
......@@ -185,7 +185,7 @@
<simple-pagination
v-model:current-page="rankCurrentPage"
:page-size="newsPageSize"
:page-size="pageSize"
:total="rankingList.length"
@page-change="handleRankPageChange"
/>
......@@ -451,7 +451,7 @@ const getUSGovernmentLatestDynamicData = async () => {
loadingLatestDynamic.value = true;
const params = {
orgId: !!deptValueForLatest.value ? deptValueForLatest.value : null,
pageSize: 50,
pageSize: 100,
currentPage: newsCurrentPage.value
};
try {
......@@ -481,14 +481,14 @@ const getUSGovernmentLatestDynamicData = async () => {
// 根据当前页码更新动态列表
const updateDynamicListByPage = () => {
const start = (newsCurrentPage.value - 1) * newsPageSize.value;
const end = start + newsPageSize.value;
const start = (newsCurrentPage.value - 1) * pageSize.value;
const end = start + pageSize.value;
dynamicList.value = allDynamicData.value.slice(start, end);
};
const updateRankListByPage = () => {
const start = (rankCurrentPage.value - 1) * newsPageSize.value;
const end = start + newsPageSize.value;
const start = (rankCurrentPage.value - 1) * pageSize.value;
const end = start + pageSize.value;
rankingList.value = allRankingList.value.slice(start, end);
};
// 点击科技要闻-跳转详情页
......@@ -846,7 +846,7 @@ watch(
const allDynamicData = ref([]);
const dynamicList = ref([]);
const newsCurrentPage = ref(1);
const newsPageSize = ref(5); // 每页显示 5 条
const pageSize = ref(5); // 每页显示 5 条
const handleNewsPageChange = page => {
newsCurrentPage.value = page;
......
src/views/ZMOverView/components/gameProfile/index.vue
浏览文件 @ 5e90ca5e
......@@ -2,26 +2,45 @@
<template>
<div class="content-wrapper">
<div class="card-box">
<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; height: 650px; width: 100%;padding-top: 24px;">
<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 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
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: 12px">
<div style="width: 50%">
<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>
</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="{
<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" />
}"
: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="{
<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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论