提交 83444d70 authored 作者: 闫鹏's avatar 闫鹏

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

Yp dev 查看合并请求 !312
流水线 #351 已通过 于阶段
in 2 分 20 秒
...@@ -376,29 +376,156 @@ const getRegionCountData = async () => { ...@@ -376,29 +376,156 @@ const getRegionCountData = async () => {
}; };
// 实体清单-数据统计- 制裁实体领域数量变化趋势 // 实体清单-数据统计- 制裁实体领域数量变化趋势
const domainNumChartOption = ref({}); const domainNumChartOption = ref({
color: [],
tooltip: {
trigger: "axis",
backgroundColor: "rgba(255, 255, 255, 0.9)",
textStyle: {
color: "#666"
},
extraCssText: "box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); border-radius: 4px;"
},
grid: {
top: "15%",
right: "2%",
bottom: "5%",
left: "2%",
containLabel: true
},
legend: {
type: "scroll",
show: true,
top: 0,
left: "center",
icon: "circle",
itemWidth: 12,
itemHeight: 12,
data: [],
textStyle: {
fontFamily: "Microsoft YaHei",
fontSize: 16,
fontWeight: 400,
lineHeight: 24,
color: "rgb(95, 101, 108)"
}
},
xAxis: [
{
type: "category",
boundaryGap: false,
data: [],
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color: "#999",
fontSize: 12,
margin: 15
}
}
],
yAxis: [
{
type: "value",
min: 0,
// max: 100,
// interval: 20,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color: "#999",
fontSize: 12
},
splitLine: {
lineStyle: {
type: "dashed",
color: "#E0E6F1"
}
}
}
],
series: []
});
const activeDomainTab = ref("year"); const activeDomainTab = ref("year");
const handleDomainTabChange = tab => { const handleDomainTabChange = tab => {
activeDomainTab.value = tab; activeDomainTab.value = tab;
getDomainNumData(); getDomainNumData();
}; };
// 处理领域趋势数据的方法
const processDomainTrendData = rawData => {
// 提取所有的月份作为标题
const titles = rawData.map(item => item.year).reverse();
// 收集所有不重复的领域名称
const domainNamesSet = new Set();
rawData.forEach(item => {
item.domainCountInfo.forEach(domain => {
domainNamesSet.add(domain.name);
});
});
const domainNames = Array.from(domainNamesSet);
// 定义颜色映射
const colorMap = {
人工智能: "#E34D59",
新一代通信网络: "#FF9F1C",
: "#FFB3B3",
生物科技: "#00A79D",
量子科技: "#7B61FF",
先进制造: "#363B42",
新能源: "#2BA471",
太空: "#3762F0",
集成电路: "#0052D9",
新材料: "#FFD900",
航空航天: "#3762F0",
海洋: "#76D1FF",
深海: "#002060",
其他: "#A6A6A6"
};
// 生成数据系列
const dataSeries = domainNames.map(domainName => {
const values = rawData
.map(yearData => {
const domainItem = yearData.domainCountInfo.find(d => d.name === domainName);
return domainItem ? domainItem.count : 0;
})
.reverse(); // 数据值也需要跟随标题反转顺序
return {
name: domainName,
color: colorMap[domainName] || `#${Math.floor(Math.random() * 16777215).toString(16)}`, // 如果没有预定义颜色,则随机生成
value: values
};
});
return {
title: titles,
data: dataSeries
};
};
const getDomainNumData = async () => { const getDomainNumData = async () => {
// 参数 // 参数
const param = { const param = {
IDsanTypeId: activeDomainTab.value === "year" ? "year" : "record", countType: activeDomainTab.value === "year" ? "year" : "record",
type: sanTypeId.value sanTypeId: sanTypeId.value
}; };
try { try {
const res = await getDomainNum(param); const res = await getDomainNum(param);
if (res && res.code === 200) { if (res && res.length > 0) {
domainNumChartOption.value = getMultiLineChart({ const processedData = processDomainTrendData(res);
data: res.data || [], domainNumChartOption.value = getMultiLineChart(processedData);
xAxis: res.xAxis || [], console.log("获取实体清单-数据统计-processedData:", processedData);
yAxis: res.yAxis || [], console.log("获取实体清单-数据统计-domainNumChartOption:", domainNumChartOption.value);
title: "制裁实体领域数量变化趋势",
xAxisName: "时间",
yAxisName: "数量"
});
} }
} catch (error) { } catch (error) {
console.error("获取实体清单-数据统计-制裁实体领域数量变化趋势失败:", error); console.error("获取实体清单-数据统计-制裁实体领域数量变化趋势失败:", error);
......
...@@ -13,6 +13,7 @@ ...@@ -13,6 +13,7 @@
</div> </div>
</div> </div>
<div class="main"> <div class="main">
<div v-if="activeIndex == 0">
<div class="left"> <div class="left">
<AnalysisBox title="选择制裁"> <AnalysisBox title="选择制裁">
<div class="left-main"> <div class="left-main">
...@@ -88,7 +89,10 @@ ...@@ -88,7 +89,10 @@
<div class="fishbone-wrapper"> <div class="fishbone-wrapper">
<div class="fishbone-scroll-container" ref="scrollContainerRef"> <div class="fishbone-scroll-container" ref="scrollContainerRef">
<div class="fishbone" ref="fishboneRef" v-if="fishboneDataList.length > 0"> <div class="fishbone" ref="fishboneRef" v-if="fishboneDataList.length > 0">
<div class="main-line" :style="{ width: fishboneDataList.length * 200 + 300 + 'px' }"> <div
class="main-line"
:style="{ width: fishboneDataList.length * 200 + 300 + 'px' }"
>
<!-- 主轴上的标签 --> <!-- 主轴上的标签 -->
<div <div
class="main-line-text" class="main-line-text"
...@@ -117,7 +121,11 @@ ...@@ -117,7 +121,11 @@
v-for="(item, index) in getLeftItems(causeGroup.causes)" v-for="(item, index) in getLeftItems(causeGroup.causes)"
:key="'left-' + index" :key="'left-' + index"
> >
<img :src="defaultTitle || item.picture" alt="" class="company-icon" /> <img
:src="defaultTitle || item.picture"
alt=""
class="company-icon"
/>
<div class="text" :title="item.name">{{ item.name }}</div> <div class="text" :title="item.name">{{ item.name }}</div>
<div class="line"></div> <div class="line"></div>
</div> </div>
...@@ -129,7 +137,11 @@ ...@@ -129,7 +137,11 @@
:key="'right-' + index" :key="'right-' + index"
> >
<div class="line"></div> <div class="line"></div>
<img :src="defaultTitle || item.picture" alt="" class="company-icon" /> <img
:src="defaultTitle || item.picture"
alt=""
class="company-icon"
/>
<div class="text" :title="item.name">{{ item.name }}</div> <div class="text" :title="item.name">{{ item.name }}</div>
</div> </div>
</div> </div>
...@@ -148,7 +160,11 @@ ...@@ -148,7 +160,11 @@
v-for="(item, index) in getLeftItems(causeGroup.causes)" v-for="(item, index) in getLeftItems(causeGroup.causes)"
:key="'left-bottom-' + index" :key="'left-bottom-' + index"
> >
<img :src="defaultTitle || item.picture" alt="" class="company-icon" /> <img
:src="defaultTitle || item.picture"
alt=""
class="company-icon"
/>
<div class="text" :title="item.name">{{ item.name }}</div> <div class="text" :title="item.name">{{ item.name }}</div>
<div class="line"></div> <div class="line"></div>
</div> </div>
...@@ -160,7 +176,11 @@ ...@@ -160,7 +176,11 @@
:key="'right-bottom-' + index" :key="'right-bottom-' + index"
> >
<div class="line"></div> <div class="line"></div>
<img :src="defaultTitle || item.picture" alt="" class="company-icon" /> <img
:src="defaultTitle || item.picture"
alt=""
class="company-icon"
/>
<div class="text" :title="item.name">{{ item.name }}</div> <div class="text" :title="item.name">{{ item.name }}</div>
</div> </div>
</div> </div>
...@@ -239,6 +259,10 @@ ...@@ -239,6 +259,10 @@
</AnalysisBox> </AnalysisBox>
</div> </div>
</div> </div>
<div v-if="activeIndex == 1">
<constrained-association />
</div>
</div>
</div> </div>
</template> </template>
...@@ -252,6 +276,7 @@ import { ...@@ -252,6 +276,7 @@ import {
getDeepMiningIndustryFishbone, getDeepMiningIndustryFishbone,
getDeepMiningIndustryEntity getDeepMiningIndustryEntity
} from "@/api/exportControlV2.0"; } from "@/api/exportControlV2.0";
import constrainedAssociation from "./components/constrainedAssociation.vue";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
const route = useRoute(); const route = useRoute();
...@@ -461,7 +486,7 @@ const handleSanctionSelect = id => { ...@@ -461,7 +486,7 @@ const handleSanctionSelect = id => {
startAutoPlay(); startAutoPlay();
}; };
const activeTab = ref(["制裁时序分析"]); const activeTab = ref(["制裁时序分析", "限制关联分析"]);
const activeIndex = ref(0); const activeIndex = ref(0);
const dateRange = ref(["2025-01-01", "2025-12-31"]); const dateRange = ref(["2025-01-01", "2025-12-31"]);
...@@ -532,10 +557,7 @@ onUnmounted(() => { ...@@ -532,10 +557,7 @@ onUnmounted(() => {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
* {
margin: 0;
padding: 0;
}
.deep-mining { .deep-mining {
width: 1601px; width: 1601px;
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论