Skip to content

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

update

上级 15ee7bad
隐藏空白字符变更
内嵌 并排
正在显示 包含 274 行增加 和 147 行删除
src/api/zmOverview/allElement/index.js
浏览文件 @ d11781b5
import request from "@/api/request.js";
// 全要素统计
export function getElementCount() {
export function getElementCount(params) {
return request({
method: 'GET',
url: `/api/element/elementCount`,
url: `/api/element/elementCount/${params.date}`,
})
}
......@@ -23,19 +23,19 @@ export function getNewDynamics() {
export function getElementSuppress(params) {
return request({
method: 'GET',
url: `/api/element/elementSuppress`,
url: `/api/element/elementSuppress/${params.date}`,
params
})
}
// 关键词云-上
/**
* @param {currentPage, pageSize}
* @param {date}
*/
export function getKeyWordUp() {
export function getKeyWordUp(params) {
return request({
method: 'GET',
url: `/api/element/getKeyWordUp`,
url: `/api/element/getKeyWordUp/${params.date}`,
})
}
......@@ -46,7 +46,7 @@ export function getKeyWordUp() {
export function getElementDevelop(params) {
return request({
method: 'GET',
url: `/api/element/elementDevelop`,
url: `/api/element/elementDevelop/${params.date}`,
params
})
}
......@@ -58,8 +58,7 @@ export function getElementDevelop(params) {
export function getKeyWordDown(params) {
return request({
method: 'GET',
url: `/api/element/getKeyWordDown`,
params
url: `/api/element/getKeyWordDown/${params.date}`,
})
}
......
src/views/ZMOverView/components/fourSuppress/components/addDomain/index.vue
浏览文件 @ d11781b5
......@@ -133,7 +133,12 @@
<img :src="icon4" alt="" />
<span>美对我领域打压遏制时间线</span>
</div>
<el-select v-model="selectedFieldTimeline" placeholder="全部领域" class="field-select" @change="handleGetDomainContainmentTimeline">
<el-select
v-model="selectedFieldTimeline"
placeholder="全部领域"
class="field-select"
@change="handleGetDomainContainmentTimeline"
>
<el-option v-for="item in fieldOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
......@@ -235,25 +240,24 @@ const selectedFieldTimeline = ref("");
const timelineContainerWidth = 1700;
// 美政府部门打压遏制最新动态
const newsList = ref([]);
const newsList = ref([]);
const getUSGovernmentLatestDynamicData = async () => {
try {
const res = await getUSGovernmentLatestDynamic();
if (res.code === 200 && res.data) {
// 将接口数据转换为 newsList 需要的格式
newsList.value = res.data.map(item => {
const dateObj = new Date(item.time);
const formattedDate = `${dateObj.getFullYear()}年${dateObj.getMonth() + 1}月${dateObj.getDate()}日`;
return {
id:item.id,
id: item.id,
tags: item.industrylist || [],
date: formattedDate,
type: item.orgName || "未知机构", // 使用 orgName 作为类型信息
title: item.title,
content: item.content || item.title, // 如果 content 为空，使用 title 填充
content: item.content || item.title // 如果 content 为空，使用 title 填充
};
});
}
......@@ -262,7 +266,7 @@ const getUSGovernmentLatestDynamicData = async () => {
}
};
const handleClickTitle = (item) => {
const handleClickTitle = item => {
if (!item || !item.id) return;
// 打开新标签页
const { href } = router.resolve({
......@@ -271,7 +275,7 @@ const handleClickTitle = (item) => {
newsId: item.id
}
});
window.open(href, '_blank');
window.open(href, "_blank");
};
const timelineList = ref([
......@@ -685,22 +689,43 @@ const handleGetAllDomainCount = async () => {
buttonsData.value = res.data.map((item, index) => {
const matchedBg = bgList.find(bg => bg.text === item.countName);
const background = matchedBg ? matchedBg.background : bgList[index % 10].background;
// 映射图标索引
let iconIndex = 0; // 默认
switch(item.countName) {
case '集成电路': iconIndex = 0; break;
case '人工智能': iconIndex = 1; break;
case '新一代通信网络':
case '新一代信息技术': iconIndex = 2; break;
case '量子科技': iconIndex = 3; break;
case '先进制造': iconIndex = 4; break;
case '航空航天': iconIndex = 5; break;
case '生物科技': iconIndex = 6; break;
case '新能源': iconIndex = 7; break;
case '新材料': iconIndex = 8; break;
case '海洋': iconIndex = 9; break;
default: iconIndex = 0;
switch (item.countName) {
case "集成电路":
iconIndex = 0;
break;
case "人工智能":
iconIndex = 1;
break;
case "新一代通信网络":
case "新一代信息技术":
iconIndex = 2;
break;
case "量子科技":
iconIndex = 3;
break;
case "先进制造":
iconIndex = 4;
break;
case "航空航天":
iconIndex = 5;
break;
case "生物科技":
iconIndex = 6;
break;
case "新能源":
iconIndex = 7;
break;
case "新材料":
iconIndex = 8;
break;
case "海洋":
iconIndex = 9;
break;
default:
iconIndex = 0;
}
return {
......@@ -865,10 +890,12 @@ const processDomainTrendData = rawData => {
// 生成数据系列
const dataSeries = domainNames.map(domainName => {
const values = rawData.map(monthData => {
const domainItem = monthData.domainList.find(d => d.domainName === domainName);
return domainItem ? domainItem.domainNum : 0;
}).reverse(); // 数据值也需要跟随标题反转顺序
const values = rawData
.map(monthData => {
const domainItem = monthData.domainList.find(d => d.domainName === domainName);
return domainItem ? domainItem.domainNum : 0;
})
.reverse(); // 数据值也需要跟随标题反转顺序
return {
name: domainName,
......@@ -883,7 +910,6 @@ const processDomainTrendData = rawData => {
};
};
const tagColors = [
{
text: "航空航天",
......@@ -1011,10 +1037,13 @@ const stopAutoPlay = () => {
};
const next = () => {
let arr = [...buttonsData.value];
if (currentIndex.value < buttonsData.value.length - 5) {
currentIndex.value++;
} else {
currentIndex.value = 0;
// currentIndex.value = 0;
buttonsData.value = [...buttonsData.value, ...arr];
currentIndex.value++;
}
};
......
src/views/ZMOverView/components/fourSuppress/components/allElement/index.vue
浏览文件 @ d11781b5
......@@ -212,7 +212,7 @@
</template>
<script setup>
import { onMounted, ref, computed, inject } from "vue";
import { onMounted, ref, computed, inject, watch } from "vue";
import setChart from "@/utils/setChart";
import getWordCloudChart from "./uitls/worldCloudChart";
import {
......@@ -227,11 +227,50 @@ import {
const activeDate = inject("activeDate");
const getCalculatedDate = type => {
const now = new Date();
const endDate = new Date();
const start = new Date();
switch (type) {
case "week": // 近一个月
start.setMonth(now.getMonth() - 1);
break;
case "three_month": // 近三个月
start.setMonth(now.getMonth() - 3);
break;
case "six_month": // 近半年
start.setMonth(now.getMonth() - 6);
break;
case "year": // 近一年
start.setFullYear(now.getFullYear() - 1);
break;
default:
start.setMonth(now.getMonth() - 1); // 默认近一个月
}
const formatDate = date => {
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, "0");
const day = String(date.getDate()).padStart(2, "0");
return `${year}-${month}-${day}`;
};
return {
startDate: formatDate(start),
endDate: formatDate(endDate)
};
};
// 全要素统计
const headerList = ref([]);
const handleGetHeaderList = async () => {
const { startDate, endDate } = getCalculatedDate(activeDate.value);
const params = {
date: startDate
};
try {
const res = await getElementCount();
const res = await getElementCount(params);
console.log("全要素统计", res);
if (res.code === 200 && res.data) {
headerList.value = res.data;
......@@ -288,9 +327,11 @@ const handleGetOrderInfo = async id => {
};
const handleGetBox2DataList = async () => {
const { startDate, endDate } = getCalculatedDate(activeDate.value);
const params = {
currentPage: box2CurrentPage.value,
pageSize: box2PageSize.value
pageSize: box2PageSize.value,
date: startDate
};
try {
const res = await getElementSuppress(params);
......@@ -310,8 +351,12 @@ const handleClickBox2Item = index => {
const box2ChartData = ref([]);
const handleGetBox2ChartData = async () => {
const { startDate, endDate } = getCalculatedDate(activeDate.value);
const params = {
date: startDate
};
try {
const res = await getKeyWordUp();
const res = await getKeyWordUp(params);
console.log("关键词云-上", res);
if (res.code === 200 && res.data) {
box2ChartData.value = res.data.map(item => {
......@@ -352,9 +397,12 @@ const handleGetOrderInfo1 = async id => {
};
const handleGetBox3DataList = async () => {
const { startDate, endDate } = getCalculatedDate(activeDate.value);
const params = {
currentPage: box3CurrentPage.value,
pageSize: box3PageSize.value
pageSize: box3PageSize.value,
date: startDate
};
try {
const res = await getElementDevelop(params);
......@@ -375,8 +423,12 @@ const handleClickBox3Item = index => {
const box3ChartData = ref([]);
const handleGetBox3ChartData = async () => {
const { startDate, endDate } = getCalculatedDate(activeDate.value);
const params = {
date: startDate
};
try {
const res = await getKeyWordDown();
const res = await getKeyWordDown(params);
console.log("关键词云-下", res);
if (res.code === 200 && res.data) {
box3ChartData.value = res.data.map(item => {
......@@ -394,6 +446,14 @@ const handleBox3Chart = async () => {
setChart(box3Chart, "box3Chart");
};
watch(activeDate, () => {
handleGetHeaderList(); // 全要素统计
handleGetBox2DataList(); // 美对我要素打压情况
handleGetBox3DataList(); // 美自身要素发展情况
handleBox2Chart(); // 关键词云-上
handleBox3Chart(); // 关键词云-下
});
onMounted(() => {
handleGetHeaderList(); // 全要素统计
handleGetBox1Data(); // 最新动态
......
src/views/ZMOverView/components/fourSuppress/components/allGovernment/index.vue
浏览文件 @ d11781b5
......@@ -20,8 +20,13 @@
</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">
......@@ -30,16 +35,34 @@
<span>美对华制裁措施数量趋势</span>
</div>
<div class="title-right">
<el-select v-model="fieldValue" placeholder="全部领域" class="custom-select"
@change="getUSChinaSanctionTrendData">
<el-select
v-model="fieldValue"
placeholder="全部领域"
class="custom-select"
@change="getUSChinaSanctionTrendData"
>
<el-option v-for="item in fieldOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-select v-model="deptValue" placeholder="全部部门" class="custom-select" @change="getUSChinaSanctionTrendData">
<el-select
v-model="deptValue"
placeholder="全部部门"
class="custom-select"
@change="getUSChinaSanctionTrendData"
>
<el-option label="全部部门" value="" />
<el-option v-for="item in departmentList" :key="item.departId" :label="item.departName" :value="item.departId" />
<el-option
v-for="item in departmentList"
:key="item.departId"
:label="item.departName"
:value="item.departId"
/>
</el-select>
<el-select v-model="methodValue" placeholder="全部制裁手段" class="custom-select"
@change="getUSChinaSanctionTrendData">
<el-select
v-model="methodValue"
placeholder="全部制裁手段"
class="custom-select"
@change="getUSChinaSanctionTrendData"
>
<el-option v-for="item in methodOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
......@@ -62,8 +85,13 @@
<span class="item-title" @click="handleNewsClick(item)">{{ item.title }}</span>
<span class="item-date">{{ item.date }} · {{ item.orgName }}</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>
......@@ -87,8 +115,13 @@
<div class="ranking-header">
<div class="header-left">
<div class="dept-icons">
<img v-for="(dept, dIndex) in rank.depts" :key="dIndex" :src="dept.icon || defaultImg" alt=""
class="dept-icon" />
<img
v-for="(dept, dIndex) in rank.depts"
:key="dIndex"
:src="dept.icon || defaultImg"
alt=""
class="dept-icon"
/>
</div>
<span class="dept-names">{{ rank.depts.map(d => d.name).join(" / ") }}</span>
</div>
......@@ -102,10 +135,19 @@
<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">
<span class="item-title" :class="{ clickable: item.type === '政令' }"
@click="handleJointRankItemClick(item)">{{ item.title }}</span>
<el-tooltip
effect="dark"
:content="item.title"
popper-class="common-prompt-popper"
placement="top"
:show-after="500"
>
<span
class="item-title"
:class="{ clickable: item.type === '政令' }"
@click="handleJointRankItemClick(item)"
>{{ item.title }}</span
>
</el-tooltip>
</div>
<span class="item-date">{{ item.date }}</span>
......@@ -155,12 +197,22 @@
<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">
<span v-for="(tag, tIndex) in event.tags" :key="tIndex" class="tag" :class="getTagClass(tag)">
<span
v-for="(tag, tIndex) in event.tags"
:key="tIndex"
class="tag"
:class="getTagClass(tag)"
>
{{ tag }}
</span>
</div>
......@@ -169,7 +221,7 @@
</div>
</div>
<div class="timelineBar" :style="{ backgroundImage: `url(${timelineBg})` }">
<div ref="sliderChartRef" style="width: 100%; height: 100%; touch-action: none;"></div>
<div ref="sliderChartRef" style="width: 100%; height: 100%; touch-action: none"></div>
</div>
</div>
</div>
......@@ -191,7 +243,14 @@ import icon4 from "../../assets/icon4.png";
import timelineBg from "../../assets/timeline.png";
import defaultImg from "../../../../assets/images/default-icon2.png";
// 传递接口
import { getAllGovernmentList, getUSChinaSanctionTrend, getUSGovernmentLatestDynamic, getUSGovernmentJointSanctionRank, getUSGovernmentSanctionHistory, getDepartmentList } from "@/api/allGovernment.js";
import {
getAllGovernmentList,
getUSChinaSanctionTrend,
getUSGovernmentLatestDynamic,
getUSGovernmentJointSanctionRank,
getUSGovernmentSanctionHistory,
getDepartmentList
} from "@/api/allGovernment.js";
const router = useRouter();
const activeDate = inject("activeDate");
......@@ -224,7 +283,6 @@ const getUSGovernmentSanctionHistoryData = async () => {
if (res.code === 200 && res.data && res.data.content) {
const rawList = res.data.content;
const orgMap = {};
if (governmentList.value && governmentList.value.length) {
governmentList.value.forEach(g => {
......@@ -237,15 +295,15 @@ const getUSGovernmentSanctionHistoryData = async () => {
const grouped = {};
rawList.forEach(item => {
// 尝试获取部门名称
let deptName = '未知部门';
let deptName = "未知部门";
if (item.orgName) {
deptName = item.orgName;
} else if (item.orgId && orgMap[item.orgId]) {
deptName = orgMap[item.orgId];
} else if (item.orgId) {
if (item.orgId === '241') deptName = '商务部工业与安全局';
else if (item.orgId === '203') deptName = '海外资产控制办公室';
else deptName = '部门 ' + item.orgId;
if (item.orgId === "241") deptName = "商务部工业与安全局";
else if (item.orgId === "203") deptName = "海外资产控制办公室";
else deptName = "部门 " + item.orgId;
}
if (!grouped[deptName]) {
......@@ -259,7 +317,7 @@ const getUSGovernmentSanctionHistoryData = async () => {
grouped[deptName].count++;
grouped[deptName].events.push({
date: item.postDate ? item.postDate.replace(/^(\d{4})-(\d{2})-(\d{2})$/, '$1年$2月$3日') : '',
date: item.postDate ? item.postDate.replace(/^(\d{4})-(\d{2})-(\d{2})$/, "$1年$2月$3日") : "",
content: item.name || item.summary,
tags: item.techDomainList ? item.techDomainList.slice(0, 2) : [],
level: getLevelByCount(item.cnEntityCount)
......@@ -276,19 +334,13 @@ const getUSGovernmentSanctionHistoryData = async () => {
};
// 辅助函数：根据受影响实体数量生成level
const getLevelByCount = (count) => {
const getLevelByCount = count => {
const c = count || 0;
if (c === 0) return 'green'; // 0 或空 绿色
if (c <= 10) return 'yellow'; // 1-10 黄色
return 'red'; // >10 红色
if (c === 0) return "green"; // 0 或空 绿色
if (c <= 10) return "yellow"; // 1-10 黄色
return "red"; // >10 红色
};
// 全政府-美政府部门联合制裁排行
const loadingJointRank = ref(false);
const getUSGovernmentJointSanctionRankData = async () => {
......@@ -304,9 +356,9 @@ const getUSGovernmentJointSanctionRankData = async () => {
count: item.jointCount,
items: (item.sanctions || []).map(s => ({
id: s.orderId,
type: s.typeName || '其他',
type: s.typeName || "其他",
title: s.name,
date: s.postDate ? s.postDate.replace(/^(\d{4})-(\d{2})-(\d{2})$/, '$1年$2月$3日') : ''
date: s.postDate ? s.postDate.replace(/^(\d{4})-(\d{2})-(\d{2})$/, "$1年$2月$3日") : ""
}))
}));
}
......@@ -317,12 +369,6 @@ const getUSGovernmentJointSanctionRankData = async () => {
}
};
// 全政府-美政府部门打压遏制最新动态
const loadingLatestDynamic = ref(false);
const getUSGovernmentLatestDynamicData = async () => {
......@@ -332,12 +378,12 @@ const getUSGovernmentLatestDynamicData = async () => {
if (res.code === 200 && res.data) {
dynamicList.value = res.data.map(item => ({
title: item.orgName ? `${item.orgName}：${item.title}` : item.title,
date: item.time ? item.time.replace(/^(\d{4})-(\d{2})-(\d{2})$/, '$1年$2月$3日') : '',
type: item.sanTypeName || '',
date: item.time ? item.time.replace(/^(\d{4})-(\d{2})-(\d{2})$/, "$1年$2月$3日") : "",
type: item.sanTypeName || "",
content: item.content || item.title,
tags: item.industrylist || [],
id: item.id,
orgName: item.orgName || ''
orgName: item.orgName || ""
}));
}
} catch (error) {
......@@ -347,7 +393,7 @@ const getUSGovernmentLatestDynamicData = async () => {
}
};
// 点击科技要闻-跳转详情页
const handleNewsClick = (item) => {
const handleNewsClick = item => {
if (!item || !item.id) return;
// 打开新标签页
const { href } = router.resolve({
......@@ -356,28 +402,22 @@ const handleNewsClick = (item) => {
newsId: item.id
}
});
window.open(href, '_blank');
window.open(href, "_blank");
};
// 点击联合制裁项-如果是政令则跳转详情
const handleJointRankItemClick = (item) => {
if (item.type === '政令' && item.id) {
const handleJointRankItemClick = item => {
if (item.type === "政令" && item.id) {
const { href } = router.resolve({
path: "/decreeLayout/overview/introduction",
query: {
id: item.id
}
});
window.open(href, '_blank');
window.open(href, "_blank");
}
};
// 全政府-获取美对华制裁措施数量趋势
const usChinaSanctionTrend = ref([]);
const loadingTrend = ref(false);
......@@ -405,16 +445,16 @@ const getUSChinaSanctionTrendData = async () => {
if (activeDate.value === "week") {
// 近一个月：按天展示
xAxisData = res.data.map((item) => {
xAxisData = res.data.map(item => {
const month = item.month.toString().padStart(2, "0");
const day = item.day.toString().padStart(2, "0");
return `${item.year}-${month}-${day}`;
});
seriesData = res.data.map((item) => item.sanctionCount);
seriesData = res.data.map(item => item.sanctionCount);
} else {
// 近三个月、半年、一年：按月展示，需要聚合天数数据
const monthlyMap = {};
res.data.forEach((item) => {
res.data.forEach(item => {
const key = `${item.year}-${item.month.toString().padStart(2, "0")}`;
if (!monthlyMap[key]) {
monthlyMap[key] = 0;
......@@ -423,7 +463,7 @@ const getUSChinaSanctionTrendData = async () => {
});
// 排序键值确保时间轴顺序正确
xAxisData = Object.keys(monthlyMap).sort();
seriesData = xAxisData.map((key) => monthlyMap[key]);
seriesData = xAxisData.map(key => monthlyMap[key]);
}
initChart(xAxisData, seriesData);
}
......@@ -450,24 +490,20 @@ const getDepartmentListData = async () => {
}
};
// 全政府-获取美国政府部门制裁数据
const governmentList = ref([]);
const loadingGovernment = ref(false);
const getGovernmentList = async () => {
loadingGovernment.value = true;
try {
const res = await getAllGovernmentList(
{
monthNum: monthNum.value
}
);
const res = await getAllGovernmentList({
monthNum: monthNum.value
});
if (res.code === 200 && res.data) {
governmentList.value = res.data;
// 如果后端返回了数据，则更新 cardList
if (Array.isArray(res.data) && res.data.length > 0) {
cardList.value = res.data.map((item) => {
cardList.value = res.data.map(item => {
const stats = [];
if (item.parliament) {
// 议会类型
......@@ -485,7 +521,7 @@ const getGovernmentList = async () => {
// 非议会类型
// 1. 处理制裁清单
if (item.sanctionCountList && item.sanctionCountList.length > 0) {
item.sanctionCountList.forEach((sanction) => {
item.sanctionCountList.forEach(sanction => {
stats.push({
label: sanction.nameZh || sanction.name,
value: (sanction.postCount || 0) + "次"
......@@ -516,7 +552,7 @@ const getGovernmentList = async () => {
}
};
// 跳转到机构页面
const handleCardClick = (card) => {
const handleCardClick = card => {
if (!card || !card.departId) return;
// 打开新标签页
const { href } = router.resolve({
......@@ -525,11 +561,9 @@ const handleCardClick = (card) => {
id: card.departId
}
});
window.open(href, '_blank');
window.open(href, "_blank");
};
const cardList = ref([
{
title: "联邦参议院",
......@@ -596,7 +630,7 @@ let autoTimer = null;
const startAutoPlay = () => {
stopAutoPlay();
if (cardList.value.length > 5) {
autoTimer = setInterval(() => {
autoTimer = setInterval(() => {
next();
}, 3000);
}
......@@ -640,7 +674,7 @@ const methodOptions = ref([
const dynamicList = ref([]);
const getColorName = (tag) => {
const getColorName = tag => {
const tagColorMap = {
航空航天: "blue",
生物科技: "blue",
......@@ -664,7 +698,7 @@ const getTagClass = tag => {
return `tag-${getColorName(tag)}`;
};
const getLineColorClass = (level) => {
const getLineColorClass = level => {
if (level) {
return `line-${level}`;
}
......@@ -695,7 +729,7 @@ let myChart = null;
const sliderChartRef = ref(null);
let sliderChart = null;
const parseDate = (str) => {
const parseDate = str => {
const match = str.match(/(\d+)年(\d+)月(\d+)日/);
if (match) return new Date(Number(match[1]), Number(match[2]) - 1, Number(match[3])).getTime();
return new Date().getTime();
......@@ -738,7 +772,7 @@ const initSlider = () => {
right: 20
},
xAxis: {
type: 'time',
type: "time",
min: rangeMin,
max: rangeMax,
axisLabel: { show: false },
......@@ -749,10 +783,10 @@ const initSlider = () => {
yAxis: { show: false },
dataZoom: [
{
type: 'slider',
type: "slider",
xAxisIndex: 0,
filterMode: 'weakFilter',
height: '100%',
filterMode: "weakFilter",
height: "100%",
top: 0,
bottom: 0,
left: 20,
......@@ -760,26 +794,26 @@ const initSlider = () => {
// 默认选中范围
startValue: defaultStart,
endValue: defaultEnd,
backgroundColor: 'transparent',
borderColor: 'transparent',
fillerColor: 'rgba(246, 250, 255, 1)',
backgroundColor: "transparent",
borderColor: "transparent",
fillerColor: "rgba(246, 250, 255, 1)",
dataBackground: {
lineStyle: { color: 'transparent' },
areaStyle: { color: 'transparent' }
lineStyle: { color: "transparent" },
areaStyle: { color: "transparent" }
},
selectedDataBackground: {
lineStyle: { color: 'transparent' },
areaStyle: { color: 'transparent' }
lineStyle: { color: "transparent" },
areaStyle: { color: "transparent" }
},
labelFormatter: (value) => {
labelFormatter: value => {
const date = new Date(value);
const y = date.getFullYear();
const m = (date.getMonth() + 1).toString().padStart(2, '0');
const d = date.getDate().toString().padStart(2, '0');
const m = (date.getMonth() + 1).toString().padStart(2, "0");
const d = date.getDate().toString().padStart(2, "0");
return `${y}-${m}-${d}`;
},
textStyle: {
color: '#5F656C',
color: "#5F656C",
fontSize: 12
},
// 解决 passive event 警告的关键配置
......@@ -788,17 +822,17 @@ const initSlider = () => {
],
series: [
{
type: 'scatter',
type: "scatter",
data: dates.map(d => [d, 0]),
symbolSize: 5,
itemStyle: { color: 'transparent' }
itemStyle: { color: "transparent" }
}
]
};
sliderChart.setOption(option);
sliderChart.on('dataZoom', () => {
sliderChart.on("dataZoom", () => {
const opt = sliderChart.getOption();
if (opt.dataZoom && opt.dataZoom[0]) {
const start = opt.dataZoom[0].startValue;
......@@ -905,10 +939,13 @@ const initChart = (xAxisData = [], seriesData = []) => {
};
// 监听时间范围变化，重新获取趋势数据
watch(() => activeDate.value, () => {
getUSChinaSanctionTrendData();
getGovernmentList();
});
watch(
() => activeDate.value,
() => {
getUSChinaSanctionTrendData();
getGovernmentList();
}
);
onMounted(() => {
initChart();
......@@ -931,10 +968,13 @@ onUnmounted(() => {
});
const next = () => {
let arr = [...cardList.value];
if (currentIndex.value < cardList.value.length - 5) {
currentIndex.value++;
} else {
currentIndex.value = 0;
cardList.value = [...cardList.value, ...arr];
currentIndex.value++;
// currentIndex.value = 0;
}
};
......@@ -1747,7 +1787,6 @@ const prev = () => {
justify-content: space-between;
align-items: center;
.event-date {
font-family: "Microsoft YaHei";
font-size: 16px;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论