Skip to content

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

update

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