提交 c6b5f381 authored 作者: 朱政's avatar 朱政

Merge branch 'pre' into zz-dev

流水线 #292 已通过 于阶段
in 1 分 22 秒
......@@ -121,7 +121,7 @@ const exportControlRoutes = [
name: "commercialControlList",
component: () => import("@/views/exportControl/v2.0CommercialControlList/index.vue"),
meta: {
title: "商业管制清单"
title: "商业管制清单概览"
}
}
]
......
......@@ -121,7 +121,7 @@
<div class="data-origin-icon">
<img :src="tipsIcon" alt="" />
</div>
<div class="data-origin-text">制裁实体数量变化情况,数据来源:美国各行政机构官网</div>
<div class="data-origin-text">进入实体清单的中国实体数量变化趋势,数据来源:美国商务部官网</div>
</div>
<div class="ai-pane">
<AiButton />
......@@ -130,7 +130,7 @@
</AnalysisBox>
</div>
<div class="main-item">
<AnalysisBox title="制裁实体地域分布情况">
<AnalysisBox title="制裁实体各省分布情况">
<template #header-btn>
<el-select v-model="regionTime" class="time-select" placeholder="请选择" @change="getRegionCountData">
<el-option v-for="item in timeOptions" :key="item.value" :label="item.label" :value="item.value" />
......@@ -170,7 +170,7 @@
<div class="data-origin-icon">
<img :src="tipsIcon" alt="" />
</div>
<div class="data-origin-text">制裁实体地域分布情况,数据来源:美国各行政机构官网</div>
<div class="data-origin-text">进入实体清单的中国实体各省分布情况,数据来源:美国商务部官网</div>
</div>
<div class="ai-pane">
<AiButton />
......@@ -202,7 +202,7 @@
<div class="data-origin-icon">
<img :src="tipsIcon" alt="" />
</div>
<div class="data-origin-text">制裁实体领域分布情况,数据来源:美国各行政机构官网</div>
<div class="data-origin-text">进入实体清单的中国实体领域分布情况,数据来源:美国商务部官网</div>
</div>
<div class="ai-pane">
<AiButton />
......@@ -234,7 +234,7 @@
<div class="data-origin-icon">
<img :src="tipsIcon" alt="" />
</div>
<div class="data-origin-text">制裁实体类型分布情况,数据来源:美国各行政机构官网</div>
<div class="data-origin-text">进入实体清单的中国实体类型分布情况,数据来源:美国商务部官网</div>
</div>
<div class="ai-pane">
<AiButton />
......@@ -357,7 +357,7 @@ const getRegionCountData = async () => {
}));
// Sort by value descending
rankData.value.sort((a, b) => b.value - a.value);
rankChart.interpret({ type: "柱状图", name: "制裁实体地域分布情况", data: data });
rankChart.interpret({ type: "柱状图", name: "制裁实体各省分布情况", data: data });
updateMapChart();
}
} catch (error) {
......@@ -691,7 +691,7 @@ const domainChartOption = ref({
},
rich: {
name: {
fontSize: 18,
fontSize: 16,
fontWeight: 700,
color: "rgb(59, 65, 75)",
padding: [0, 0, 5, 0],
......@@ -912,7 +912,7 @@ const typeChartOption = ref({
},
rich: {
name: {
fontSize: 18,
fontSize: 16,
fontWeight: 700,
color: "rgb(59, 65, 75)",
padding: [0, 0, 5, 0],
......
......@@ -32,14 +32,14 @@
<div class="list-header">
<div class="count">{{ sanctionList.length }}次制裁</div>
<!-- 暂时隐藏,说这里可能是轮播图的效果 -->
<!-- <div class="pagination">
<div class="page-btn prev">
<div class="pagination">
<div class="page-btn prev" @click="handlePrevClick">
<el-icon><ArrowLeft /></el-icon>
</div>
<div class="page-btn next">
<div class="page-btn next" @click="handleNextClick">
<el-icon><ArrowRight /></el-icon>
</div>
</div> -->
</div>
</div>
<div class="list-content" v-loading="loading">
<div
......@@ -243,7 +243,7 @@
</template>
<script setup>
import { ref, onMounted, nextTick } from "vue";
import { ref, onMounted, nextTick, onUnmounted } from "vue";
import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
import defaultTitle from "../../assets/default-icon2.png";
import {
......@@ -365,7 +365,8 @@ const getDeepMiningSelectData = async () => {
try {
const res = await getDeepMiningSelect(params);
if (res.code === 200 && res.data && res.data.content) {
sanctionList.value = res.data.content.map(item => ({
sanctionList.value = res.data.content
.map(item => ({
id: item.id,
date: item.postDate,
title: item.name,
......@@ -373,7 +374,8 @@ const getDeepMiningSelectData = async () => {
unit: "家中国实体", // 接口未返回单位,暂时固定
summary: item.summary, // 保留额外信息备用
techDomainList: item.techDomainList // 保留额外信息备用
}));
}))
.reverse();
// 默认选中第一条
if (sanctionList.value.length > 0) {
......@@ -396,35 +398,74 @@ const handleDateChange = () => {
currentPage.value = 1;
getDeepMiningSelectData();
};
// ✅ 自动轮播定时器
const autoPlayTimer = ref(null);
// 翻页
const handlePageChange = page => {
if (page < 1 || page > totalPage.value) return;
currentPage.value = page;
getDeepMiningSelectData();
// ✅ 启动自动轮播
const startAutoPlay = () => {
stopAutoPlay();
if (sanctionList.value.length > 1) {
autoPlayTimer.value = setInterval(() => {
handleNextClickAuto();
}, 10000);
}
};
// ✅ 停止自动轮播
const stopAutoPlay = () => {
if (autoPlayTimer.value) {
clearInterval(autoPlayTimer.value);
autoPlayTimer.value = null;
}
};
// ✅ 自动下一个(支持循环)
const handleNextClickAuto = () => {
const currentIndex = sanctionList.value.findIndex(item => item.id === currentSanctionId.value);
let nextItem;
if (currentIndex < sanctionList.value.length - 1) {
nextItem = sanctionList.value[currentIndex + 1];
} else {
nextItem = sanctionList.value[0]; // 循环到第一个
}
if (nextItem) {
handleSanctionSelect(nextItem.id);
}
};
// ✅ 修改现有函数,添加重置定时器
const handlePrevClick = () => {
const currentIndex = sanctionList.value.findIndex(item => item.id === currentSanctionId.value);
if (currentIndex > 0) {
const prevItem = sanctionList.value[currentIndex - 1];
handleSanctionSelect(prevItem.id);
startAutoPlay();
}
};
const handleNextClick = () => {
const currentIndex = sanctionList.value.findIndex(item => item.id === currentSanctionId.value);
if (currentIndex < sanctionList.value.length - 1) {
const nextItem = sanctionList.value[currentIndex + 1];
handleSanctionSelect(nextItem.id);
startAutoPlay();
}
};
// 列表项点击事件
const handleSanctionSelect = id => {
currentSanctionId.value = id;
getFishboneData();
getCnEntityOnChainData();
startAutoPlay();
};
const activeTab = ref(["制裁时序分析"]);
const activeIndex = ref(0);
const dateRange = ref(["2025-01-01", "2025-12-31"]);
const sanctionList = ref([
{ id: 1, date: "2025年2月8日", title: "实体清单更新", count: 2, unit: "家中国实体" },
{ id: 2, date: "2025年4月10日", title: "实体清单更新", count: 5, unit: "家中国实体" },
{ id: 3, date: "2025年6月29日", title: "实体清单更新", count: 6, unit: "家中国实体" },
{ id: 4, date: "2025年8月12日", title: "实体清单更新", count: 24, unit: "家中国实体" },
{ id: 5, date: "2025年8月19日", title: "实体清单更新", count: 11, unit: "家中国实体" },
{ id: 6, date: "2025年9月12日", title: "实体清单更新", count: 3, unit: "家中国实体" },
{ id: 7, date: "2025年9月26日", title: "实体清单更新", count: 6, unit: "家中国实体" },
{ id: 8, date: "2025年10月12日", title: "实体清单更新", count: 18, unit: "家中国实体" }
]);
const sanctionList = ref([]);
const currentSanctionId = ref(5);
const cnEntityOnChainData = ref({});
......@@ -479,6 +520,14 @@ onMounted(() => {
getDeepMiningSelectData();
// 获取产业链信息
getIndustryList();
nextTick(() => {
startAutoPlay();
});
});
// 组件卸载时停止自动轮播
onUnmounted(() => {
stopAutoPlay();
});
</script>
......
......@@ -173,6 +173,13 @@
</div>
</template>
</el-table-column>
<el-table-column
prop="listingLocation"
label="上市地点"
width="140"
show-overflow-tooltip
align="center"
/>
<el-table-column
prop="startTime"
label="制裁时间"
......@@ -557,6 +564,10 @@ watch(customDateRange, () => {
width: 160px;
height: 32px;
}
:deep(.el-checkbox__label) {
font-size: 16px;
color: rgb(95, 101, 108);
}
}
}
......@@ -575,9 +586,14 @@ watch(customDateRange, () => {
background-color: #fff;
.checkbox-group {
display: flex;
flex-wrap: wrap;
padding: 0 0 0 24px;
// display: flex;
// flex-wrap: wrap;
// padding: 0 0 0 24px;
display: grid;
grid-template-columns: repeat(2, 160px);
gap: 8px 4px;
padding-left: 20px;
.el-checkbox {
width: 50%;
......
......@@ -59,7 +59,7 @@
<div class="data-origin-icon">
<img :src="tipsIcon" alt="" />
</div>
<div class="data-origin-text">制裁实体领域分布情况,数据来源:美国各行政机构官网</div>
<div class="data-origin-text">进入本次实体清单的中国实体领域分布情况,数据来源:美国商务部官网</div>
</div>
<div class="ai-pane">
<AiButton />
......@@ -109,7 +109,7 @@
<div class="data-origin-icon">
<img :src="tipsIcon" alt="" />
</div>
<div class="data-origin-text">制裁实体类型分布情况,数据来源:美国各行政机构官网</div>
<div class="data-origin-text">进入本次实体清单的中国实体类型分布情况,数据来源:美国商务部官网</div>
</div>
<div class="ai-pane">
<AiButton />
......@@ -118,7 +118,7 @@
</AnalysisBox>
</div>
<div class="main-item">
<AnalysisBox title="制裁实体国家分布情况">
<AnalysisBox title="制裁实体国家地区分布情况">
<div class="country-list">
<div class="list-item" v-for="(item, index) in countryDistribution" :key="index">
<img :src="flag" alt="" class="flag" />
......@@ -150,7 +150,7 @@
<div class="data-origin-icon">
<img :src="tipsIcon" alt="" />
</div>
<div class="data-origin-text">制裁实体国家分布情况,数据来源:美国各行政机构官网</div>
<div class="data-origin-text">进入本次实体清单的实体国家地区分布情况,数据来源:美国商务部官网</div>
</div>
<div class="ai-pane">
<AiButton />
......@@ -159,7 +159,7 @@
</AnalysisBox>
</div>
<div class="main-item">
<AnalysisBox title="制裁实体地域分布情况">
<AnalysisBox title="制裁实体各省分布情况">
<div class="map-wrapper">
<div class="map-chart" ref="mapChartRef"></div>
<div class="rank-list">
......@@ -194,7 +194,7 @@
<div class="data-origin-icon">
<img :src="tipsIcon" alt="" />
</div>
<div class="data-origin-text">制裁实体地域分布情况,数据来源:美国各行政机构官网</div>
<div class="data-origin-text">进入本次实体清单的中国实体各省分布情况,数据来源:美国商务部官网</div>
</div>
<div class="ai-pane">
<AiButton />
......@@ -251,7 +251,7 @@ const getRegionData = async () => {
regionDistribution.value = res.data || [];
maxRegionCount.value = Math.max(...regionDistribution.value.map(item => item.count), 0);
initMapChart();
regionDistributionChart.interpret({ type: "柱状图", name: "制裁实体地域分布情况", data: res.data });
regionDistributionChart.interpret({ type: "柱状图", name: "进入本次实体清单的中国实体各省分布情况", data: res.data });
}
} catch (error) {
console.log(error);
......@@ -291,7 +291,11 @@ const getCountryCount = async () => {
gradient
};
});
countryDistributionChart.interpret({ type: "柱状图", name: "制裁实体国家分布情况", data: res.data });
countryDistributionChart.interpret({
type: "柱状图",
name: "进入本次实体清单的实体国家地区分布情况",
data: res.data
});
}
} catch (error) {
console.log(error);
......@@ -312,7 +316,7 @@ const getEntityTypeCount = async () => {
const res = await getSingleSanctionEntityTypeCount(params);
if (res.code === 200) {
entityTypeCount.value = res.data || [];
typeChart.interpret({ type: "饼图", name: "制裁实体类型分布情况", data: entityTypeCount.value });
typeChart.interpret({ type: "饼图", name: "进入本次实体清单的中国实体类型分布情况", data: entityTypeCount.value });
initTypeChart();
}
} catch (error) {
......@@ -335,7 +339,7 @@ const getDomainCount = async () => {
if (res.code === 200) {
domainCount.value = res.data || [];
initDomainChart();
domainChart.interpret({ type: "饼图", name: "制裁实体领域分布情况", data: domainCount.value });
domainChart.interpret({ type: "饼图", name: "进入本次实体清单的中国实体领域分布情况", data: domainCount.value });
}
} catch (error) {
console.log(error);
......
......@@ -168,14 +168,21 @@
</el-table-column>
<el-table-column label="涉及领域" width="180" align="center">
<template #default="scope">
<span
<!-- <span
v-for="(item, index) in scope.row.fields"
:key="index"
class="tag"
:style="getTagStyle(item)"
style="margin: 0 2px"
>{{ item }}</span
>
> -->
<div class="domain-box">
<AreaTag
v-for="(domain, index) in scope.row.fields"
:key="index"
:tagName="domain"
/>
</div>
</template>
</el-table-column>
<el-table-column prop="location" label="上市地点" width="90" align="center" />
......@@ -563,10 +570,10 @@ onMounted(() => {
</script>
<style scoped lang="scss">
* {
margin: 0;
padding: 0;
}
// * {
// margin: 0;
// padding: 0;
// }
.sanctions-overview {
width: 1601px;
......@@ -669,7 +676,7 @@ onMounted(() => {
.left-top-content {
width: 100%;
height: 234px;
// height: 234px;
padding: 19px 29px 22px 27px;
overflow: auto;
......@@ -1001,6 +1008,11 @@ onMounted(() => {
border-radius: 8px;
overflow: hidden;
.domain-box {
display: flex;
gap: 8px;
}
:deep(.el-table__header-wrapper) {
th {
background-color: var(--color-primary-100) !important;
......
......@@ -638,6 +638,8 @@ const handleToMoreRiskSignal = () => {
window.open(route.href, "_blank");
};
const infoListColor = ref(["rgba(206, 79, 81, 1)", "rgba(114, 46, 209, 1)", "rgba(132, 136, 142, 1)", "rgba(132, 136, 142, 1)"]);
// 查看更多新闻资讯
const handleToMoreNews = () => {
const route = router.resolve("/newsBrief");
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论