Skip to content

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

update

上级 1178e388 79e641cb
隐藏空白字符变更
内嵌 并排
正在显示 包含 885 行增加 和 871 行删除
src/views/ZMOverView/components/fourSuppress/components/allUnion/index.vue
浏览文件 @ d289a480
......@@ -8,18 +8,16 @@
<div class="carousel-item" v-for="item in showCarouselList">
<div class="item-top">
<div class="top-img">
<img :src="ele" :class="{img1: index !== 0}" alt v-for="(ele, index) in item.imageList" />
<img :src="ele" :class="{ img1: index !== 0 }" alt v-for="(ele, index) in item.imageList" />
</div>
<div class="top-num">{{ item.count }}次</div>
</div>
<div class="item-title">{{ item.name }}</div>
<div class="type">
<div
class="type-item"
:class="getClassName(ele.industryName)"
v-for="ele in item.industryList"
>{{ ele.industryName }}</div>
<div class="type-item" :class="getClassName(ele.industryName)" v-for="ele in item.industryList">
{{ ele.industryName }}
</div>
</div>
</div>
</div>
......@@ -34,8 +32,8 @@
<div class="left-title">排华联盟分布情况</div>
</div>
<div class="title-right">
<div class="right-num" :class="{click: currentAntiType === 'num'}">排华联盟数量</div>
<div class="right-num" :class="{click: currentAntiType === 'active'}">排华联盟动态</div>
<div class="right-num" :class="{ click: currentAntiType === 'num' }">排华联盟数量</div>
<div class="right-num" :class="{ click: currentAntiType === 'active' }">排华联盟动态</div>
</div>
</div>
......@@ -86,11 +84,7 @@
</el-tooltip>
<div class="item-bottom">
<div class="bottom-left">
<div
class="left-item"
:class="getClassName(ele.industryName)"
v-for="ele in item.industryList"
>
<div class="left-item" :class="getClassName(ele.industryName)" v-for="ele in item.industryList">
<span>{{ ele.industryName }}</span>
</div>
</div>
......@@ -111,7 +105,7 @@
<div class="img-list">
<img
:src="ele.image"
:class="{img1: index !== 0}"
:class="{ img1: index !== 0 }"
alt
v-for="(ele, index) in item.countryList"
/>
......@@ -157,544 +151,540 @@
<script setup>
import { onMounted, ref, computed } from "vue";
import * as echarts from "echarts";
import { getAllUnionList, getDynamic, getPrediction, getUnionCount, getIndustry, getCountryRelation } from '@/api/allUnion.js'
import { getAllUnionList, getDynamic, getPrediction, getUnionCount, getIndustry, getCountryRelation } from "@/api/allUnion.js";
const carouselList = ref([
{
name: '芯片四方联盟1',
num: 21,
area: ['人工智能'],
imgList: [
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
]
},
{
name: '芯片四方联盟2',
num: 21,
area: ['人工智能'],
imgList: [
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
]
},
{
name: '芯片四方联盟3',
num: 21,
area: ['人工智能'],
imgList: [
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
]
},
{
name: '芯片四方联盟4',
num: 21,
area: ['人工智能'],
imgList: [
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
]
},
{
name: '芯片四方联盟5',
num: 21,
area: ['人工智能', '集成电路'],
imgList: [
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
]
},
{
name: '芯片四方联盟6',
num: 21,
area: ['人工智能'],
imgList: [
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
},
]
},
])
{
name: "芯片四方联盟1",
num: 21,
area: ["人工智能"],
imgList: [
{
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
},
{
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
},
{
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
},
{
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
},
{
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
},
{
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
}
]
},
{
name: "芯片四方联盟2",
num: 21,
area: ["人工智能"],
imgList: [
{
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
},
{
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
},
{
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
},
{
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
},
{
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
},
{
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
}
]
},
{
name: "芯片四方联盟3",
num: 21,
area: ["人工智能"],
imgList: [
{
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
},
{
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
},
{
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
},
{
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
},
{
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
},
{
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
}
]
},
{
name: "芯片四方联盟4",
num: 21,
area: ["人工智能"],
imgList: [
{
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
},
{
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
},
{
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
},
{
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
},
{
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
},
{
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
}
]
},
{
name: "芯片四方联盟5",
num: 21,
area: ["人工智能", "集成电路"],
imgList: [
{
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
},
{
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
},
{
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
},
{
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
},
{
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
},
{
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
}
]
},
{
name: "芯片四方联盟6",
num: 21,
area: ["人工智能"],
imgList: [
{
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
},
{
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
},
{
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
},
{
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
},
{
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
},
{
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
}
]
}
]);
const startIndex = ref(0);
const handleSwitch = flag => {
if (flag == "left") {
if (startIndex.value === 0) {
startIndex.value = carouselList.value.length - 5;
} else {
startIndex.value--;
}
} else {
if (startIndex.value === carouselList.value.length - 5) {
startIndex.value = 0;
} else {
startIndex.value++;
}
}
if (flag == "left") {
if (startIndex.value === 0) {
startIndex.value = carouselList.value.length - 5;
} else {
startIndex.value--;
}
} else {
if (startIndex.value === carouselList.value.length - 5) {
startIndex.value = 0;
} else {
startIndex.value++;
}
}
};
const getAreaList = (areaList) => {
if (areaList && areaList.length > 2) {
const array = areaList.splice(0, 2)
console.log('---areaList', array)
return array
} else {
return areaList
}
}
const getAreaList = areaList => {
if (areaList && areaList.length > 2) {
const array = areaList.splice(0, 2);
console.log("---areaList", array);
return array;
} else {
return areaList;
}
};
const getImageList = (imageList) => {
if (imageList && imageList.length > 5) {
const array = imageList.splice(0, 5)
return array
} else {
return imageList
}
}
const getImageList = imageList => {
if (imageList && imageList.length > 5) {
const array = imageList.splice(0, 5);
return array;
} else {
return imageList;
}
};
//打压遏制手段分布
const showCarouselList = computed(() => {
return carouselList.value.slice(startIndex.value, startIndex.value + 5);
return carouselList.value.slice(startIndex.value, startIndex.value + 5);
});
const getClassName = (type) => {
let className = ''
switch (type) {
case '人工智能':
className = 'ai'
break
case '新材料':
className = 'material'
break
case '量子科技':
className = 'technology'
break
case '生物科技':
className = 'organism'
break
case '航空航天':
className = 'aerospace'
break
case '能源':
className = 'energy'
break
case '集成电路':
className = 'integrated'
break
case '':
className = 'none-class'
break
default:
className = 'other'
}
return className
}
const getClassName = type => {
let className = "";
switch (type) {
case "人工智能":
className = "ai";
break;
case "新材料":
className = "material";
break;
case "量子科技":
className = "technology";
break;
case "生物科技":
className = "organism";
break;
case "航空航天":
className = "aerospace";
break;
case "能源":
className = "energy";
break;
case "集成电路":
className = "integrated";
break;
case "":
className = "none-class";
break;
default:
className = "other";
}
return className;
};
const currentAntiType = ref('num')
const currentAntiType = ref("num");
const antiChinaNum = ref([
{
name: '美国1111111111111111',
value: 24,
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png'
},
{
name: '欧盟',
value: 18,
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png'
},
{
name: 'Japan',
value: 13,
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png'
},
{
name: '韩国',
value: 13,
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png'
},
{
name: '英国',
value: 9,
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png'
},
{
name: '加拿大',
value: 6,
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png'
},
{
name: '澳大利亚',
value: 5,
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png'
},
{
name: '菲律宾',
value: 3,
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png'
},
{
name: '新西兰',
value: 3,
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png'
},
{
name: '印度',
value: 2,
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png'
}
])
{
name: "美国1111111111111111",
value: 24,
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png"
},
{
name: "欧盟",
value: 18,
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png"
},
{
name: "Japan",
value: 13,
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png"
},
{
name: "韩国",
value: 13,
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png"
},
{
name: "英国",
value: 9,
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png"
},
{
name: "加拿大",
value: 6,
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png"
},
{
name: "澳大利亚",
value: 5,
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png"
},
{
name: "菲律宾",
value: 3,
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png"
},
{
name: "新西兰",
value: 3,
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png"
},
{
name: "印度",
value: 2,
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png"
}
]);
// echarts地图的颜色区间
const startColor = [130, 175, 224]; // rgb(130, 175, 224)
const endColor = [5, 95, 194]; // rgb(5, 95, 194)
const endColor = [5, 95, 194]; // rgb(5, 95, 194)
// 计算颜色插值函数
const getColorByValue = (value, maxValue) => {
if (maxValue === 0) return `rgb(${startColor.join(',')})`;
if (maxValue === 0) return `rgb(${startColor.join(",")})`;
const ratio = value / maxValue;
const r = Math.round(startColor[0] + (endColor[0] - startColor[0]) * ratio);
const g = Math.round(startColor[1] + (endColor[1] - startColor[1]) * ratio);
const b = Math.round(startColor[2] + (endColor[2] - startColor[2]) * ratio);
const ratio = value / maxValue;
const r = Math.round(startColor[0] + (endColor[0] - startColor[0]) * ratio);
const g = Math.round(startColor[1] + (endColor[1] - startColor[1]) * ratio);
const b = Math.round(startColor[2] + (endColor[2] - startColor[2]) * ratio);
return `rgb(${r}, ${g}, ${b})`;
}
return `rgb(${r}, ${g}, ${b})`;
};
const chartDom = ref()
const myChart = ref()
const chartDom = ref();
const myChart = ref();
function createChart() {
// 找到最大值用于颜色计算
const maxValue = Math.max(...antiChinaNum.value.map(item => item.value));
// 为每个数据项计算颜色
const processedData = antiChinaNum.value.map(item => ({
...item,
itemStyle: {
color: getColorByValue(item.value, maxValue)
}
}))
const option = {
// geo: {
// map: 'world',
// roam: true,
// label: {
// show: false,
// color: '#555'
// },
// itemStyle: {
// areaColor: 'rgba(231, 243, 255, 1)', // 所有区域的默认底色
// borderColor: 'rgb(130, 175, 224)' // 边界线颜色
// }
// },
tooltip: {
trigger: 'item',
formatter: function (params) {
if (params.data) {
// 从数据中查找对应的中文名称
const item = antiChinaNum.value.find((item) => item.name === params.name)
console.log(item)
if (item) {
return `${item.zhName}: ${params.data.value || 0}`;
} else {
return `${params.name}: ${params.data.value || 0}`;
}
}
return params.name;
}
},
visualMap: {
min: 0,
max: maxValue,
left: 'left',
top: 'bottom',
text: ['高', '低'],
calculable: true,
inRange: {
color: [
`rgb(${startColor.join(',')})`,
`rgb(${endColor.join(',')})`
]
},
textStyle: {
color: '#fff'
}
},
series: [
{
name: '数据值',
type: 'map',
roam: true, // 允许缩放和平移
zoom: 1.2, // 初始缩放级别
map: 'world',
emphasis: {
label: {
show: true,
color: '#fff'
},
itemStyle: {
areaColor: null,
borderWidth: 1,
borderColor: '#fff'
}
},
itemStyle: {
areaColor: 'rgba(231, 243, 255, 1)', // 所有区域的默认底色
borderColor: 'rgb(130, 175, 224)' // 边界线颜色
},
data: processedData
}
]
};
myChart.value.setOption(option);
// 找到最大值用于颜色计算
const maxValue = Math.max(...antiChinaNum.value.map(item => item.value));
// 为每个数据项计算颜色
const processedData = antiChinaNum.value.map(item => ({
...item,
itemStyle: {
color: getColorByValue(item.value, maxValue)
}
}));
const option = {
// geo: {
// map: 'world',
// roam: true,
// label: {
// show: false,
// color: '#555'
// },
// itemStyle: {
// areaColor: 'rgba(231, 243, 255, 1)', // 所有区域的默认底色
// borderColor: 'rgb(130, 175, 224)' // 边界线颜色
// }
// },
tooltip: {
trigger: "item",
formatter: function (params) {
if (params.data) {
// 从数据中查找对应的中文名称
const item = antiChinaNum.value.find(item => item.name === params.name);
console.log(item);
if (item) {
return `${item.zhName}: ${params.data.value || 0}`;
} else {
return `${params.name}: ${params.data.value || 0}`;
}
}
return params.name;
}
},
visualMap: {
min: 0,
max: maxValue,
left: "left",
top: "bottom",
text: ["高", "低"],
calculable: true,
inRange: {
color: [`rgb(${startColor.join(",")})`, `rgb(${endColor.join(",")})`]
},
textStyle: {
color: "#fff"
}
},
series: [
{
name: "数据值",
type: "map",
roam: true, // 允许缩放和平移
zoom: 1.2, // 初始缩放级别
map: "world",
emphasis: {
label: {
show: true,
color: "#fff"
},
itemStyle: {
areaColor: null,
borderWidth: 1,
borderColor: "#fff"
}
},
itemStyle: {
areaColor: "rgba(231, 243, 255, 1)", // 所有区域的默认底色
borderColor: "rgb(130, 175, 224)" // 边界线颜色
},
data: processedData
}
]
};
myChart.value.setOption(option);
}
function fetchGeoJSON() {
chartDom.value = document.getElementById('echartsMap')
if (!chartDom.value) return;
if (myChart.value) myChart.value.dispose();
myChart.value = echarts.init(chartDom.value)
myChart.value.showLoading();
fetch('/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/world.json').then((res) => res.json()).then((result) => {
echarts.registerMap('world', result);
createChart();
myChart.value.hideLoading();
})
chartDom.value = document.getElementById("echartsMap");
if (!chartDom.value) return;
if (myChart.value) myChart.value.dispose();
myChart.value = echarts.init(chartDom.value);
myChart.value.showLoading();
fetch("/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/world.json")
.then(res => res.json())
.then(result => {
echarts.registerMap("world", result);
createChart();
myChart.value.hideLoading();
});
}
const newsList = ref([
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png',
title: '芯片四方联盟: 发布新版管制清单',
content: '2026财年国防授权法案（NDAA）已于2025年12月18日由美国总统特朗普...',
area: ['新材料', '集成电路'],
time: '2025年12月18日'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png',
title: '芯片四方联盟: 发布新版管制清单',
content: '2026财年国防授权法案（NDAA）已于2025年12月18日由美国总统特朗普...',
area: ['新材料', '集成电路'],
time: '2025年12月18日'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png',
title: '芯片四方联盟: 发布新版管制清单',
content: '2026财年国防授权法案（NDAA）已于2025年12月18日由美国总统特朗普...',
area: ['新材料', '集成电路'],
time: '2025年12月18日'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png',
title: '芯片四方联盟: 发布新版管制清单',
content: '2026财年国防授权法案（NDAA）已于2025年12月18日由美国总统特朗普...',
area: ['新材料', '集成电路'],
time: '2025年12月18日'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png',
title: '芯片四方联盟: 发布新版管制清单',
content: '2026财年国防授权法案（NDAA）已于2025年12月18日由美国总统特朗普...',
area: ['新材料', '集成电路'],
time: '2025年12月18日'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png',
title: '芯片四方联盟: 发布新版管制清单',
content: '2026财年国防授权法案（NDAA）已于2025年12月18日由美国总统特朗普...',
area: ['新材料', '集成电路'],
time: '2025年12月18日'
}
])
{
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png",
title: "芯片四方联盟: 发布新版管制清单",
content: "2026财年国防授权法案（NDAA）已于2025年12月18日由美国总统特朗普...",
area: ["新材料", "集成电路"],
time: "2025年12月18日"
},
{
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png",
title: "芯片四方联盟: 发布新版管制清单",
content: "2026财年国防授权法案（NDAA）已于2025年12月18日由美国总统特朗普...",
area: ["新材料", "集成电路"],
time: "2025年12月18日"
},
{
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png",
title: "芯片四方联盟: 发布新版管制清单",
content: "2026财年国防授权法案（NDAA）已于2025年12月18日由美国总统特朗普...",
area: ["新材料", "集成电路"],
time: "2025年12月18日"
},
{
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png",
title: "芯片四方联盟: 发布新版管制清单",
content: "2026财年国防授权法案（NDAA）已于2025年12月18日由美国总统特朗普...",
area: ["新材料", "集成电路"],
time: "2025年12月18日"
},
{
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png",
title: "芯片四方联盟: 发布新版管制清单",
content: "2026财年国防授权法案（NDAA）已于2025年12月18日由美国总统特朗普...",
area: ["新材料", "集成电路"],
time: "2025年12月18日"
},
{
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png",
title: "芯片四方联盟: 发布新版管制清单",
content: "2026财年国防授权法案（NDAA）已于2025年12月18日由美国总统特朗普...",
area: ["新材料", "集成电路"],
time: "2025年12月18日"
}
]);
const warningList = ref([
{
countries: [
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png',
name: '美国'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png',
name: '美国'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png',
name: '美国'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png',
name: '美国'
}
],
area: [
{
type: '人工智能',
content: '推出“数字基础设施增长计划框架”（DiGi Framework）',
time: '2024年11月21日'
},
{
type: '人工智能',
content: '推出“数字基础设施增长计划框架”（DiGi Framework）',
time: '2024年11月21日'
},
{
type: '人工智能',
content: '推出“数字基础设施增长计划框架”（DiGi Framework）',
time: '2024年11月21日'
}
],
num: 3
},
{
countries: [
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png',
name: '美国'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png',
name: '美国'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png',
name: '美国'
},
{
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png',
name: '美国'
}
],
area: [
{
type: '人工智能',
content: '推出“数字基础设施增长计划框架”（DiGi Framework）',
time: '2024年11月21日'
}
],
num: 1
}
])
const getContent = (countries) => {
if (countries) {
let result = '' // 美国 / 日本 / 韩国 / 印度
if (countries.length > 1) {
for (let i = 0; i < countries.length; i++) {
result += countries[i].name
if (i !== countries.length - 1) {
result += ' / '
}
}
} else if (countries.length === 1) {
result += countries[0].name
}
return result
}
{
countries: [
{
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png",
name: "美国"
},
{
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png",
name: "美国"
},
{
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png",
name: "美国"
},
{
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png",
name: "美国"
}
],
area: [
{
type: "人工智能",
content: "推出“数字基础设施增长计划框架”（DiGi Framework）",
time: "2024年11月21日"
},
{
type: "人工智能",
content: "推出“数字基础设施增长计划框架”（DiGi Framework）",
time: "2024年11月21日"
},
{
type: "人工智能",
content: "推出“数字基础设施增长计划框架”（DiGi Framework）",
time: "2024年11月21日"
}
],
num: 3
},
{
countries: [
{
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png",
name: "美国"
},
{
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png",
name: "美国"
},
{
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png",
name: "美国"
},
{
img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png",
name: "美国"
}
],
area: [
{
type: "人工智能",
content: "推出“数字基础设施增长计划框架”（DiGi Framework）",
time: "2024年11月21日"
}
],
num: 1
}
]);
const getContent = countries => {
if (countries) {
let result = ""; // 美国 / 日本 / 韩国 / 印度
if (countries.length > 1) {
for (let i = 0; i < countries.length; i++) {
result += countries[i].name;
if (i !== countries.length - 1) {
result += " / ";
}
}
} else if (countries.length === 1) {
result += countries[0].name;
}
}
return result;
}
};
const leftChartRef = ref(null);
let leftChart;
......@@ -703,378 +693,397 @@ let rightChart;
// 联盟领域分布
const initLeftDonut = async () => {
if (!leftChartRef.value) return;
if (leftChart) leftChart.dispose();
leftChart = echarts.init(leftChartRef.value);
let data = []
try {
const res = await getIndustry();
if (res && res.code === 200) {
for (let i = 0; i < res.data.length; i++) {
let item = {
name: '',
value: 0
}
item.name = res.data[i].industry
item.value = res.data[i].amount
item.itemStyle = {
color: getColor(colors, item.name)
}
data.push(item)
}
}
} catch (error) {
console.error("获取限制领域分布情况接口失败:", error);
}
// console.log('----data', data)
// const data = [
// { name: "集成电路", value: 50 },
// { name: "人工智能", value: 46 },
// { name: "通信网络", value: 40 },
// { name: "能源", value: 32 },
// { name: "先进制造", value: 31 },
// { name: "生物科技", value: 31 },
// { name: "航空航天", value: 30 },
// { name: "新材料", value: 24 }
// ];
const option = {
tooltip: { trigger: "item", formatter: ({ name, value, percent }) => `${name}<br/>${value}项 ${percent}%` },
series: [{
type: "pie",
radius: [96, 120],
center: ["50%", "50%"],
avoidLabelOverlap: true,
itemStyle: { borderWidth: 0 },
label: {
show: true,
position: "outside",
alignTo: 'edge',
formatter: ({ name, value, percent }) => `{name|${name}} {value|${value}项} {percent|${percent}%}`,
minMargin: 5,
edgeDistance: 10,
lineHeight: 15,
rich: {
name: { fontSize: 16, fontFamily: "Microsoft YaHei", fontWeight: 700, lineHeight: 24, color: "rgb(59, 65, 75)" },
value: { fontSize: 14, fontFamily: "Microsoft YaHei", fontWeight: 400, lineHeight: 22, color: "rgb(95, 101, 108)" },
percent: { fontSize: 14, fontFamily: "Microsoft YaHei", fontWeight: 400, lineHeight: 22, color: "rgb(95, 101, 108)" }
}
},
labelLine: {
show: true,
length: 30,
length2: 0,
maxSurfaceAngle: 80
},
labelLayout: function (params) {
const isLeft = params.labelRect.x < leftChart.getWidth() / 2;
const points = params.labelLinePoints;
// 导航线终点在标签下方
const lineY = params.labelRect.y + params.labelRect.height;
points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width;
points[2][1] = lineY;
points[1][1] = lineY;
return {
labelLinePoints: points
};
},
data: data.map((d, i) => ({
...d,
labelLine: { lineStyle: { color: getColor(colors, d.name), width: 1 } }
}))
}]
};
leftChart.setOption(option);
if (!leftChartRef.value) return;
if (leftChart) leftChart.dispose();
leftChart = echarts.init(leftChartRef.value);
let data = [];
try {
const res = await getIndustry();
if (res && res.code === 200) {
for (let i = 0; i < res.data.length; i++) {
let item = {
name: "",
value: 0
};
item.name = res.data[i].industry;
item.value = res.data[i].amount;
item.itemStyle = {
color: getColor(colors, item.name)
};
data.push(item);
}
}
} catch (error) {
console.error("获取限制领域分布情况接口失败:", error);
}
// console.log('----data', data)
// const data = [
// { name: "集成电路", value: 50 },
// { name: "人工智能", value: 46 },
// { name: "通信网络", value: 40 },
// { name: "能源", value: 32 },
// { name: "先进制造", value: 31 },
// { name: "生物科技", value: 31 },
// { name: "航空航天", value: 30 },
// { name: "新材料", value: 24 }
// ];
const option = {
tooltip: { trigger: "item", formatter: ({ name, value, percent }) => `${name}<br/>${value}项 ${percent}%` },
series: [
{
type: "pie",
radius: [96, 120],
center: ["50%", "50%"],
avoidLabelOverlap: true,
itemStyle: { borderWidth: 0 },
label: {
show: true,
position: "outside",
alignTo: "edge",
formatter: ({ name, value, percent }) => `{name|${name}} {value|${value}项} {percent|${percent}%}`,
minMargin: 5,
edgeDistance: 10,
lineHeight: 15,
rich: {
name: {
fontSize: 16,
fontFamily: "Microsoft YaHei",
fontWeight: 700,
lineHeight: 24,
color: "rgb(59, 65, 75)"
},
value: {
fontSize: 14,
fontFamily: "Microsoft YaHei",
fontWeight: 400,
lineHeight: 22,
color: "rgb(95, 101, 108)"
},
percent: {
fontSize: 14,
fontFamily: "Microsoft YaHei",
fontWeight: 400,
lineHeight: 22,
color: "rgb(95, 101, 108)"
}
}
},
labelLine: {
show: true,
length: 30,
length2: 0,
maxSurfaceAngle: 80
},
labelLayout: function (params) {
const isLeft = params.labelRect.x < leftChart.getWidth() / 2;
const points = params.labelLinePoints;
// 导航线终点在标签下方
const lineY = params.labelRect.y + params.labelRect.height;
points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width;
points[2][1] = lineY;
points[1][1] = lineY;
return {
labelLinePoints: points
};
},
data: data.map((d, i) => ({
...d,
labelLine: { lineStyle: { color: getColor(colors, d.name), width: 1 } }
}))
}
]
};
leftChart.setOption(option);
};
const initRightDonut = async () => {
if (!rightChartRef.value) return;
if (rightChart) rightChart.dispose();
rightChart = echarts.init(rightChartRef.value);
let data = []
let links = []
try {
const res = await getCountryRelation();
if (res && res.code === 200) {
for (let i = 0; i < res.data.length; i++) {
let item = {
name: res.data[i].country,
x: Math.random() * 10,
y: Math.random() * 10
}
let item1 = {
name: res.data[i].relationCountry,
x: Math.random() * 10,
y: Math.random() * 10
}
// 先判断data中是否包含上述数据
let index = data.findIndex((ele) => ele.name === item.name)
let index1 = data.findIndex((ele) => ele.name === item1.name)
// 不存在则向data中添加
if (index === -1) {
data.push(item)
}
if (index1 === -1) {
data.push(item1)
}
let link = {
source: item.name,
target: item1.name,
symbolSize: [5, 20],
label: {
show: false
},
lineStyle: {
width: res.data[i].amount,
curveness: 0.2
}
}
links.push(link)
}
}
} catch (error) {
console.error("获取限制领域分布情况接口失败:", error);
}
// console.log('----data', data)
// const data = [
// {
// name: 'Node 1',
// x: 300,
// y: 300
// },
// {
// name: 'Node 2',
// x: 800,
// y: 300
// },
// {
// name: 'Node 3',
// x: 550,
// y: 100
// },
// {
// name: 'Node 4',
// x: 550,
// y: 500
// }
// ]
// const links = [
// {
// source: 0,
// target: 1,
// symbolSize: [5, 20],
// label: {
// show: false
// },
// lineStyle: {
// width: 5,
// curveness: 0.2
// }
// },
// {
// source: 'Node 2',
// target: 'Node 1',
// label: {
// show: false
// },
// lineStyle: {
// curveness: 0.2
// }
// },
// {
// source: 'Node 1',
// target: 'Node 3'
// },
// {
// source: 'Node 2',
// target: 'Node 3'
// },
// {
// source: 'Node 2',
// target: 'Node 4'
// },
// {
// source: 'Node 1',
// target: 'Node 4'
// }
// ]
let option = {
title: {
// text: 'Basic Graph'
},
tooltip: {},
animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut',
dataZoom: [
{
type: 'slider',
start: 10,
end: 10
}
],
series: [
{
type: 'graph',
layout: 'none',
symbolSize: 50,
roam: true,
label: {
show: true
},
edgeSymbol: ['circle', ''],
edgeSymbolSize: [4, 10],
edgeLabel: {
fontSize: 20
},
data: data,
// links: [],
links: links,
lineStyle: {
opacity: 0.9,
width: 2,
curveness: 0
}
}
]
};
rightChart.setOption(option);
if (!rightChartRef.value) return;
if (rightChart) rightChart.dispose();
rightChart = echarts.init(rightChartRef.value);
let data = [];
let links = [];
try {
const res = await getCountryRelation();
if (res && res.code === 200) {
for (let i = 0; i < res.data.length; i++) {
let item = {
name: res.data[i].country,
x: Math.random() * 10,
y: Math.random() * 10
};
let item1 = {
name: res.data[i].relationCountry,
x: Math.random() * 10,
y: Math.random() * 10
};
// 先判断data中是否包含上述数据
let index = data.findIndex(ele => ele.name === item.name);
let index1 = data.findIndex(ele => ele.name === item1.name);
// 不存在则向data中添加
if (index === -1) {
data.push(item);
}
if (index1 === -1) {
data.push(item1);
}
let link = {
source: item.name,
target: item1.name,
symbolSize: [5, 20],
label: {
show: false
},
lineStyle: {
width: res.data[i].amount,
curveness: 0.2
}
};
links.push(link);
}
}
} catch (error) {
console.error("获取限制领域分布情况接口失败:", error);
}
// console.log('----data', data)
// const data = [
// {
// name: 'Node 1',
// x: 300,
// y: 300
// },
// {
// name: 'Node 2',
// x: 800,
// y: 300
// },
// {
// name: 'Node 3',
// x: 550,
// y: 100
// },
// {
// name: 'Node 4',
// x: 550,
// y: 500
// }
// ]
// const links = [
// {
// source: 0,
// target: 1,
// symbolSize: [5, 20],
// label: {
// show: false
// },
// lineStyle: {
// width: 5,
// curveness: 0.2
// }
// },
// {
// source: 'Node 2',
// target: 'Node 1',
// label: {
// show: false
// },
// lineStyle: {
// curveness: 0.2
// }
// },
// {
// source: 'Node 1',
// target: 'Node 3'
// },
// {
// source: 'Node 2',
// target: 'Node 3'
// },
// {
// source: 'Node 2',
// target: 'Node 4'
// },
// {
// source: 'Node 1',
// target: 'Node 4'
// }
// ]
let option = {
title: {
// text: 'Basic Graph'
},
tooltip: {},
animationDurationUpdate: 1500,
animationEasingUpdate: "quinticInOut",
dataZoom: [
{
type: "slider",
start: 10,
end: 10
}
],
series: [
{
type: "graph",
layout: "none",
symbolSize: 50,
roam: true,
label: {
show: true
},
edgeSymbol: ["circle", ""],
edgeSymbolSize: [4, 10],
edgeLabel: {
fontSize: 20
},
data: data,
// links: [],
links: links,
lineStyle: {
opacity: 0.9,
width: 2,
curveness: 0
}
}
]
};
rightChart.setOption(option);
};
const getColor = (colors, name) => {
const index = colors.findIndex((i) => i.name === name)
if (index !== -1) {
return colors[index].value
} else {
return "rgba(105, 177, 255, 1)"
}
}
const index = colors.findIndex(i => i.name === name);
if (index !== -1) {
return colors[index].value;
} else {
return "rgba(105, 177, 255, 1)";
}
};
const colors = [
{
name: '集成电路',
value: "rgba(105, 177, 255, 1)",
},
{
name: '新一代通信网络',
value: "rgba(135, 232, 222, 1)",
},
{
name: '人工智能',
value: "rgba(255, 192, 105, 1)",
},
{
name: '能源',
value: "rgba(89, 126, 247, 1)",
},
{
name: '先进制造',
value: "rgba(214, 228, 255, 1)",
},
{
name: '生物科技',
value: "rgba(255, 120, 117, 1)",
},
{
name: '航空航天',
value: "rgba(179, 127, 235, 1)",
},
{
name: '新材料',
value: "rgba(255, 163, 158, 1)",
}
{
name: "集成电路",
value: "rgba(105, 177, 255, 1)"
},
{
name: "新一代通信网络",
value: "rgba(135, 232, 222, 1)"
},
{
name: "人工智能",
value: "rgba(255, 192, 105, 1)"
},
{
name: "能源",
value: "rgba(89, 126, 247, 1)"
},
{
name: "先进制造",
value: "rgba(214, 228, 255, 1)"
},
{
name: "生物科技",
value: "rgba(255, 120, 117, 1)"
},
{
name: "航空航天",
value: "rgba(179, 127, 235, 1)"
},
{
name: "新材料",
value: "rgba(255, 163, 158, 1)"
}
];
// 获取联盟列表
const getUnionList = async () => {
try {
const res = await getAllUnionList();
if (res && res.code === 200) {
console.log('----getUnionList', res.data)
carouselList.value = res.data
}
} catch (error) {
console.error("获取联盟列表接口失败:", error);
}
}
try {
const res = await getAllUnionList();
if (res && res.code === 200) {
console.log("----getUnionList", res.data);
carouselList.value = res.data;
}
} catch (error) {
console.error("获取联盟列表接口失败:", error);
}
};
// 获取联盟动态
const getDynamicList = async () => {
try {
const res = await getDynamic();
if (res && res.code === 200) {
console.log('----getDynamicList', res.data)
newsList.value = res.data
}
} catch (error) {
console.error("获取联盟动态接口失败:", error);
}
}
try {
const res = await getDynamic();
if (res && res.code === 200) {
console.log("----getDynamicList", res.data);
newsList.value = res.data;
}
} catch (error) {
console.error("获取联盟动态接口失败:", error);
}
};
// 获取联盟预警
const getPredictionList = async () => {
try {
const res = await getPrediction();
if (res && res.code === 200) {
console.log('----getPredictionList', res.data)
warningList.value = res.data
}
} catch (error) {
console.error("获取联盟动态接口失败:", error);
}
}
try {
const res = await getPrediction();
if (res && res.code === 200) {
console.log("----getPredictionList", res.data);
warningList.value = res.data;
}
} catch (error) {
console.error("获取联盟动态接口失败:", error);
}
};
// 获取排华联盟数量
const getUnionCountList = async () => {
try {
const res = await getUnionCount();
if (res && res.code === 200) {
console.log('----getUnionCountList', res.data)
// 处理一下数据
antiChinaNum.value = res.data.map(item => {
item.value = item.count
item.zhName = item.name
item.name = item.ename
return item
})
}
} catch (error) {
console.error("获取联盟动态接口失败:", error);
}
}
try {
const res = await getUnionCount();
if (res && res.code === 200) {
console.log("----getUnionCountList", res.data);
// 处理一下数据
antiChinaNum.value = res.data.map(item => {
item.value = item.count;
item.zhName = item.name;
item.name = item.ename;
return item;
});
}
} catch (error) {
console.error("获取联盟动态接口失败:", error);
}
};
const getTime = (time) => {
if (time) {
const array = time.split('-')
return `${array[0]}年${array[1]}月${array[2]}日`
}
}
const getTime = time => {
if (time) {
const array = time.split("-");
return `${array[0]}年${array[1]}月${array[2]}日`;
}
};
const getName = (item) => {
if (item) {
return item[0].industryName
} else {
return ''
}
}
const getName = item => {
if (item) {
return item[0].industryName;
} else {
return "";
}
};
onMounted(async () => {
await getUnionList()
await getDynamicList()
await getPredictionList()
await getUnionCountList()
fetchGeoJSON();
initLeftDonut()
initRightDonut()
})
await getUnionList();
await getDynamicList();
await getPredictionList();
await getUnionCountList();
fetchGeoJSON();
initLeftDonut();
initRightDonut();
});
</script>
<style lang="scss" scoped>
......@@ -1215,8 +1224,7 @@ onMounted(async () => {
overflow-x: auto;
overflow-y: hidden;
width: calc(100% - 22px);
height: 24px;
height: 25px;
.type-item {
display: inline-block;
border-radius: 4px;
......@@ -1234,11 +1242,13 @@ onMounted(async () => {
width: 24px;
height: 48px;
margin-right: 8px;
cursor: pointer;
}
.right-btn {
width: 24px;
height: 48px;
margin-left: 8px;
cursor: pointer;
}
}
......
src/views/ruleRestriction/detail/index.vue
浏览文件 @ d289a480
......@@ -24,8 +24,8 @@
</div>
</div>
<div class="title">
<span class="title-one">当前规则限制数据已关联至{{ overviewInfo.Relation[0].TYPE }}：</span>
<span class="title-two">{{ overviewInfo.Relation[0].RELATIONNAME }} &nbsp;{{ overviewInfo.Relation[0].RELATIONDATE }}</span>
<span class="title-one">当前规则限制数据已关联至{{ getRelation?.TYPE }}：</span>
<span class="title-two">{{ getRelation?.RELATIONNAME }} &nbsp;{{ getRelation?.RELATIONDATE }}</span>
<img src="./assets/right.png" alt />
</div>
<div class="main">
......@@ -169,7 +169,7 @@
</template>
<script setup>
import { ref, onMounted } from "vue";
import { ref, onMounted, computed } from "vue";
import ningbo from "./assets/ningbo.png";
import deguo from "./assets/deguo.png";
import cycle from "./assets/cycle.png";
......@@ -309,6 +309,10 @@ const getTime = (time) => {
return `${array[0]}年${array[1]}月${array[2]}日`
}
}
const getRelation = computed(() => {
return overviewInfo?.Relation ? overviewInfo?.Relation[0] : {}
})
onMounted(() => {
getUrlParams()
getSanctionOverviewInfo()
......@@ -547,7 +551,7 @@ onMounted(() => {
.tit3 {
display: inline-block;
border-radius: 4px;
margin-right: 8px;
margin-right: 8px;
background-color: rgba(255, 241, 240, 1);
border: 1px solid rgba(255, 163, 158, 1);
color: rgba(245, 34, 45, 1);
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论