Skip to content

R
risk-monitor
提交 6e253904 authored 作者: 李顺's avatar 李顺
浏览文件
操作

合并分支 'ls_dev' 到 'master'

Ls dev 查看合并请求 !101
上级 9da5a9d2 baf517e9
隐藏空白字符变更
内嵌 并排
正在显示 包含 660 行增加 和 262 行删除
src/api/allUnion.js 0 → 100644
浏览文件 @ 6e253904
import request from "@/api/request.js";
// 全联盟-获取联盟列表
/**
* @header token
*/
export function getAllUnionList() {
return request({
method: 'GET',
url: `/api/union/union/unionList`
})
}
// 全联盟-获取排华数量
/**
* @header token
*/
export function getUnionCount() {
return request({
method: 'GET',
url: `/api/union/union/unionCount`
})
}
// 全联盟-获取排华联盟动态
/**
* @header token
*/
export function getDynamic() {
return request({
method: 'GET',
url: `/api/union/union/dynamic`
})
}
// 全联盟-获取排华联盟预警
/**
* @param {Object} params
* @param {Integer} params.id - 上一接口查询的EccnCategoryID
* @header token
*/
export function getPrediction() {
return request({
method: 'GET',
url: `/api/union/union/prediction`
})
}
// 全联盟-获取排华联盟领域分布
/**
* @param {Object} params
* @param {Integer} params.id - 上一接口查询的EccnCategoryID
* @header token
*/
export function getIndustry() {
return request({
method: 'GET',
url: `/api/union/union/industry`
})
}
// 全联盟-获取排华联盟国家紧密度
/**
* @param {Object} params
* @param {Integer} params.id - 上一接口查询的EccnCategoryID
* @header token
*/
export function getCountryRelation() {
return request({
method: 'GET',
url: `/api/union/union/countryRelation`
})
}
\ No newline at end of file
src/views/ZMOverView/components/fourSuppress/components/allUnion/index.vue
浏览文件 @ 6e253904
...@@ -3,23 +3,27 @@ ...@@ -3,23 +3,27 @@
<div class="content-wrapper"> <div class="content-wrapper">
<!-- 轮播栏目 --> <!-- 轮播栏目 -->
<div class="carousel-list"> <div class="carousel-list">
<img src="./assets/leftbtn.png" alt class="left-btn" @click="changeIndex(-1)" /> <img src="./assets/leftbtn.png" alt class="left-btn" @click="handleSwitch('left')" />
<div class="content"> <div class="content">
<div class="carousel-item" v-for="item in carouselList"> <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.img" :class="{img1: index !== 0}" alt v-for="(ele, index) in item.imgList" /> <img :src="ele" :class="{img1: index !== 0}" alt v-for="(ele, index) in item.imageList" />
</div> </div>
<div class="top-num">{{ item.num }}次</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 class="type-item" :class="getClassName(ele)" v-for="ele in item.area">{{ ele }}</div> <div
class="type-item"
:class="getClassName(ele.industryName)"
v-for="ele in item.industryList"
>{{ ele.industryName }}</div>
</div> </div>
</div> </div>
</div> </div>
<img src="./assets/rightbtn.png" alt class="right-btn" @click="changeIndex(1)" /> <img src="./assets/rightbtn.png" alt class="right-btn" @click="handleSwitch('right')" />
</div> </div>
<!-- 排华联盟分布 --> <!-- 排华联盟分布 -->
...@@ -39,8 +43,16 @@ ...@@ -39,8 +43,16 @@
<div class="content-left"> <div class="content-left">
<div class="item" v-for="item in antiChinaNum"> <div class="item" v-for="item in antiChinaNum">
<div class="item-left"> <div class="item-left">
<img :src="item.img" alt /> <img :src="item.image" alt />
<span>{{ item.name }}</span> <el-tooltip
effect="dark"
:content="item.zhName"
popper-class="common-prompt-popper"
placement="top"
:show-after="500"
>
<span>{{ item.zhName }}</span>
</el-tooltip>
</div> </div>
<div class="item-right">{{ item.value }}个</div> <div class="item-right">{{ item.value }}个</div>
</div> </div>
...@@ -60,17 +72,29 @@ ...@@ -60,17 +72,29 @@
<div class="news-content"> <div class="news-content">
<div class="item" v-for="item in newsList"> <div class="item" v-for="item in newsList">
<div class="item-title"> <div class="item-title">
<img :src="item.img" alt /> <img :src="item.image" alt />
<span>{{ item.title }}</span> <span>{{ item.title }}</span>
</div> </div>
<div class="item-content">{{ item.content }}</div> <el-tooltip
effect="dark"
:content="item.content"
popper-class="common-prompt-popper"
placement="top"
:show-after="500"
>
<div class="item-content">{{ item.content }}</div>
</el-tooltip>
<div class="item-bottom"> <div class="item-bottom">
<div class="bottom-left"> <div class="bottom-left">
<div class="left-item" :class="getClassName(ele)" v-for="ele in item.area"> <div
<span>{{ ele }}</span> class="left-item"
:class="getClassName(ele.industryName)"
v-for="ele in item.industryList"
>
<span>{{ ele.industryName }}</span>
</div> </div>
</div> </div>
<div class="bottom-right">{{ item.time }}</div> <div class="bottom-right">{{ getTime(item.time) }}</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -86,23 +110,23 @@ ...@@ -86,23 +110,23 @@
<div class="title-left"> <div class="title-left">
<div class="img-list"> <div class="img-list">
<img <img
:src="ele.img" :src="ele.image"
:class="{img1: index !== 0}" :class="{img1: index !== 0}"
alt alt
v-for="(ele, index) in item.countries" v-for="(ele, index) in item.countryList"
/> />
</div> </div>
<div class="left-content">{{ getContent(item.countries) }}</div> <div class="left-content">{{ getContent(item.countryList) }}</div>
</div> </div>
<div class="title-right">{{ item.num }}次合作</div> <div class="title-right">{{ item.statementList?.length }}次合作</div>
</div> </div>
<div class="item-content"> <div class="item-content">
<div class="content-list" v-for="ele in item.area"> <div class="content-list" v-for="ele in item.statementList">
<div class="list-left" :class="getClassName(ele.type)"> <div class="list-left" :class="getClassName(getName(ele.industryList))">
<span>{{ ele.type }}</span> <span>{{ getName(ele.industryList) }}</span>
</div> </div>
<div class="list-content">{{ ele.content }}</div> <div class="list-content">{{ ele.summary }}</div>
<div class="list-time">{{ ele.time }}</div> <div class="list-time">{{ getTime(ele.stateTime) }}</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -133,10 +157,11 @@ ...@@ -133,10 +157,11 @@
<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'
const carouselList = ref([ const carouselList = ref([
{ {
name: '芯片四方联盟', name: '芯片四方联盟1',
num: 21, num: 21,
area: ['人工智能'], area: ['人工智能'],
imgList: [ imgList: [
...@@ -161,7 +186,7 @@ const carouselList = ref([ ...@@ -161,7 +186,7 @@ const carouselList = ref([
] ]
}, },
{ {
name: '芯片四方联盟', name: '芯片四方联盟2',
num: 21, num: 21,
area: ['人工智能'], area: ['人工智能'],
imgList: [ imgList: [
...@@ -186,7 +211,7 @@ const carouselList = ref([ ...@@ -186,7 +211,7 @@ const carouselList = ref([
] ]
}, },
{ {
name: '芯片四方联盟', name: '芯片四方联盟3',
num: 21, num: 21,
area: ['人工智能'], area: ['人工智能'],
imgList: [ imgList: [
...@@ -211,7 +236,7 @@ const carouselList = ref([ ...@@ -211,7 +236,7 @@ const carouselList = ref([
] ]
}, },
{ {
name: '芯片四方联盟', name: '芯片四方联盟4',
num: 21, num: 21,
area: ['人工智能'], area: ['人工智能'],
imgList: [ imgList: [
...@@ -236,7 +261,7 @@ const carouselList = ref([ ...@@ -236,7 +261,7 @@ const carouselList = ref([
] ]
}, },
{ {
name: '芯片四方联盟', name: '芯片四方联盟5',
num: 21, num: 21,
area: ['人工智能', '集成电路'], area: ['人工智能', '集成电路'],
imgList: [ imgList: [
...@@ -260,35 +285,77 @@ const carouselList = ref([ ...@@ -260,35 +285,77 @@ const carouselList = ref([
}, },
] ]
}, },
// { {
// name: '芯片四方联盟', 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 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++;
}
}
};
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 showCarouselList = computed(() => {
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'
...@@ -311,6 +378,9 @@ const getClassName = (type) => { ...@@ -311,6 +378,9 @@ const getClassName = (type) => {
case '集成电路': case '集成电路':
className = 'integrated' className = 'integrated'
break break
case '':
className = 'none-class'
break
default: default:
className = 'other' className = 'other'
} }
...@@ -322,7 +392,7 @@ const currentAntiType = ref('num') ...@@ -322,7 +392,7 @@ const currentAntiType = ref('num')
const antiChinaNum = ref([ const antiChinaNum = ref([
{ {
name: '美国', 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'
}, },
...@@ -332,7 +402,7 @@ const antiChinaNum = ref([ ...@@ -332,7 +402,7 @@ const antiChinaNum = ref([
img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png' img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png'
}, },
{ {
name: '日本', 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'
}, },
...@@ -373,45 +443,106 @@ const antiChinaNum = ref([ ...@@ -373,45 +443,106 @@ const antiChinaNum = ref([
} }
]) ])
// echarts地图的颜色区间
const startColor = [130, 175, 224]; // rgb(130, 175, 224)
const endColor = [5, 95, 194]; // rgb(5, 95, 194)
// 计算颜色插值函数
const getColorByValue = (value, maxValue) => {
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);
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 processedData = antiChinaNum.value.map(item => ({
...item,
itemStyle: {
color: getColorByValue(item.value, maxValue)
}
}))
const option = { const option = {
geo: { // geo: {
map: 'world', // map: 'world',
roam: true, // roam: true,
label: { // label: {
show: false, // show: false,
color: '#555' // 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(',')})`
]
}, },
itemStyle: { textStyle: {
areaColor: '#f5f5f5', // 所有区域的默认底色 color: '#fff'
borderColor: '#ccc' // 边界线颜色
} }
}, },
tooltip: {},
visualMap: [],
series: [ series: [
{ {
type: 'scatter', name: '数据值',
coordinateSystem: 'geo', type: 'map',
geoIndex: 0, roam: true, // 允许缩放和平移
encode: { zoom: 1.2, // 初始缩放级别
tooltip: 2, map: 'world',
label: 2 emphasis: {
label: {
show: true,
color: '#fff'
},
itemStyle: {
areaColor: null,
borderWidth: 1,
borderColor: '#fff'
}
}, },
data: [],
itemStyle: { itemStyle: {
color: 'rgb(130, 175, 224)', areaColor: 'rgba(231, 243, 255, 1)', // 所有区域的默认底色
borderWidth: 1, borderColor: 'rgb(130, 175, 224)' // 边界线颜色
borderColor: '#3c7865' },
} data: processedData
},
{
type: 'map',
geoIndex: 0,
map: '',
data: []
} }
] ]
}; };
...@@ -419,6 +550,9 @@ function createChart() { ...@@ -419,6 +550,9 @@ function createChart() {
} }
function fetchGeoJSON() { function fetchGeoJSON() {
chartDom.value = document.getElementById('echartsMap') chartDom.value = document.getElementById('echartsMap')
if (!chartDom.value) return;
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').then((res) => res.json()).then((result) => {
...@@ -544,14 +678,22 @@ const warningList = ref([ ...@@ -544,14 +678,22 @@ const warningList = ref([
]) ])
const getContent = (countries) => { const getContent = (countries) => {
let result = '' // 美国 / 日本 / 韩国 / 印度 if (countries) {
for (let i = 0; i < countries.length; i++) { let result = '' // 美国 / 日本 / 韩国 / 印度
result += countries[i].name if (countries.length > 1) {
if (i !== countries.length - 1) { for (let i = 0; i < countries.length; i++) {
result += ' / ' result += countries[i].name
if (i !== countries.length - 1) {
result += ' / '
}
}
} else if (countries.length === 1) {
result += countries[0].name
} }
return result
} }
return result
} }
const leftChartRef = ref(null); const leftChartRef = ref(null);
...@@ -559,47 +701,44 @@ let leftChart; ...@@ -559,47 +701,44 @@ let leftChart;
const rightChartRef = ref(null); const rightChartRef = ref(null);
let rightChart; let rightChart;
// 联盟领域分布
const initLeftDonut = async () => { 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 {
const res = await getIndustry();
if (res && res.code === 200) {
for (let i = 0; i < res.data.length; i++) {
let item = {
name: '',
value: 0
}
// try { item.name = res.data[i].industry
// const params = { item.value = res.data[i].amount
// year: value1.value item.itemStyle = {
// } color: getColor(colors, item.name)
// const res = await getAreaDistribution(params); }
// if (res && res.code === 200) { data.push(item)
// console.log('----getAreaDistribution', res.data) }
// for (let i = 0; i < res.data.length; i++) { }
// let item = { } catch (error) {
// name: '', console.error("获取限制领域分布情况接口失败:", error);
// value: 0 }
// } // console.log('----data', data)
// const data = [
// item.name = res.data[i].AREANAME // { name: "集成电路", value: 50 },
// item.value = res.data[i].AREACOUNT // { name: "人工智能", value: 46 },
// item.itemStyle = { // { name: "通信网络", value: 40 },
// color: getColor(colors, item.name) // { name: "能源", value: 32 },
// } // { name: "先进制造", value: 31 },
// data.push(item) // { name: "生物科技", value: 31 },
// } // { name: "航空航天", value: 30 },
// } // { name: "新材料", value: 24 }
// } 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 = { const option = {
tooltip: { trigger: "item", formatter: ({ name, value, percent }) => `${name}<br/>${value}项 ${percent}%` }, tooltip: { trigger: "item", formatter: ({ name, value, percent }) => `${name}<br/>${value}项 ${percent}%` },
...@@ -654,95 +793,118 @@ const initRightDonut = async () => { ...@@ -654,95 +793,118 @@ 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 = []
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
}
// try { // 先判断data中是否包含上述数据
// const params = { let index = data.findIndex((ele) => ele.name === item.name)
// year: value1.value 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 res = await getAreaDistribution(params); // ]
// if (res && res.code === 200) { // const links = [
// console.log('----getAreaDistribution', res.data) // {
// for (let i = 0; i < res.data.length; i++) { // source: 0,
// let item = { // target: 1,
// name: '', // symbolSize: [5, 20],
// value: 0 // label: {
// } // show: false
// },
// item.name = res.data[i].AREANAME // lineStyle: {
// item.value = res.data[i].AREACOUNT // width: 5,
// item.itemStyle = { // curveness: 0.2
// color: getColor(colors, item.name) // }
// } // },
// data.push(item) // {
// 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'
// } // }
// } 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 = { let option = {
title: { title: {
...@@ -751,6 +913,13 @@ const initRightDonut = async () => { ...@@ -751,6 +913,13 @@ const initRightDonut = async () => {
tooltip: {}, tooltip: {},
animationDurationUpdate: 1500, animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut', animationEasingUpdate: 'quinticInOut',
dataZoom: [
{
type: 'slider',
start: 10,
end: 10
}
],
series: [ series: [
{ {
type: 'graph', type: 'graph',
...@@ -823,7 +992,84 @@ const colors = [ ...@@ -823,7 +992,84 @@ const colors = [
} }
]; ];
onMounted(() => { // 获取联盟列表
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);
}
}
// 获取联盟动态
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);
}
}
// 获取联盟预警
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);
}
}
// 获取排华联盟数量
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);
}
}
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 ''
}
}
onMounted(async () => {
await getUnionList()
await getDynamicList()
await getPredictionList()
await getUnionCountList()
fetchGeoJSON(); fetchGeoJSON();
initLeftDonut() initLeftDonut()
initRightDonut() initRightDonut()
...@@ -835,55 +1081,62 @@ onMounted(() => { ...@@ -835,55 +1081,62 @@ onMounted(() => {
.content-wrapper { .content-wrapper {
width: 1666px; width: 1666px;
height: 2132px; height: 2132px;
user-select: none;
// 领域样式 // 领域样式
// 人工智能 // 人工智能
.ai { .ai {
border: 1px solid rgba(255, 163, 158, 1); border: 1px solid rgba(255, 163, 158, 1);
background: rgba(255, 241, 240, 1); background: rgba(255, 241, 240, 1);
color: rgba(245, 34, 45, 1); color: rgba(245, 34, 45, 1);
} }
// 新材料 // 新材料
.material { .material {
border: 1px solid rgba(135, 232, 222, 1); border: 1px solid rgba(135, 232, 222, 1);
background: rgba(230, 255, 251, 1); background: rgba(230, 255, 251, 1);
color: rgba(19, 168, 168, 1); color: rgba(19, 168, 168, 1);
} }
// 量子科技 // 量子科技
.technology { .technology {
border: 1px solid rgba(211, 173, 247, 1); border: 1px solid rgba(211, 173, 247, 1);
background: rgba(249, 240, 255, 1); background: rgba(249, 240, 255, 1);
color: rgba(114, 46, 209, 1); color: rgba(114, 46, 209, 1);
} }
// 生物科技 // 生物科技
.organism { .organism {
border: 1px solid rgba(145, 202, 255, 1); border: 1px solid rgba(145, 202, 255, 1);
background: rgba(230, 244, 255, 1); background: rgba(230, 244, 255, 1);
color: rgba(22, 119, 255, 1); color: rgba(22, 119, 255, 1);
} }
// 航空航天 // 航空航天
.aerospace { .aerospace {
border: 1px solid rgba(173, 198, 255, 1); border: 1px solid rgba(173, 198, 255, 1);
background: rgba(240, 245, 255, 1); background: rgba(240, 245, 255, 1);
color: rgba(22, 119, 255, 1); color: rgba(22, 119, 255, 1);
} }
// 能源 // 能源
.energy { .energy {
border: 1px solid rgba(217, 247, 190, 1); border: 1px solid rgba(217, 247, 190, 1);
background: rgba(246, 255, 237, 1); background: rgba(246, 255, 237, 1);
color: rgba(56, 158, 13, 1); color: rgba(56, 158, 13, 1);
} }
// 集成电路 // 集成电路
.integrated { .integrated {
border: 1px solid rgba(186, 224, 255, 1); border: 1px solid rgba(186, 224, 255, 1);
background: rgba(230, 244, 255, 1); background: rgba(230, 244, 255, 1);
color: rgba(9, 88, 217, 1); color: rgba(9, 88, 217, 1);
} }
// 其他 // 其他
.other { .other {
border: 1px solid rgba(186, 224, 255, 1); border: 1px solid rgba(186, 224, 255, 1);
background: rgba(230, 244, 255, 1); background: rgba(230, 244, 255, 1);
color: rgba(9, 88, 217, 1); color: rgba(9, 88, 217, 1);
}
// 无类型
.none-class {
background: transparent;
border: none;
} }
.carousel-list { .carousel-list {
...@@ -918,10 +1171,13 @@ onMounted(() => { ...@@ -918,10 +1171,13 @@ onMounted(() => {
.top-img { .top-img {
display: flex; display: flex;
align-items: center; align-items: center;
overflow: auto;
width: 190px;
img { img {
width: 24px; width: 24px;
height: 24px; height: 24px;
border-radius: 50%;
} }
.img1 { .img1 {
margin-left: -8px; margin-left: -8px;
...@@ -955,6 +1211,11 @@ onMounted(() => { ...@@ -955,6 +1211,11 @@ onMounted(() => {
.type { .type {
margin-left: 22px; margin-left: 22px;
margin-top: 51px; margin-top: 51px;
margin-bottom: 8px;
overflow-x: auto;
overflow-y: hidden;
width: calc(100% - 22px);
height: 24px;
.type-item { .type-item {
display: inline-block; display: inline-block;
...@@ -964,6 +1225,7 @@ onMounted(() => { ...@@ -964,6 +1225,7 @@ onMounted(() => {
font-weight: 400; font-weight: 400;
font-family: "Microsoft YaHei"; font-family: "Microsoft YaHei";
margin-left: 8px; margin-left: 8px;
margin-bottom: 8px;
} }
} }
} }
...@@ -1087,6 +1349,8 @@ onMounted(() => { ...@@ -1087,6 +1349,8 @@ onMounted(() => {
margin-right: 8px; margin-right: 8px;
} }
span { span {
display: inline-block;
width: 100px;
color: rgba(5, 95, 194, 1); color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-style: Bold; font-style: Bold;
...@@ -1095,6 +1359,9 @@ onMounted(() => { ...@@ -1095,6 +1359,9 @@ onMounted(() => {
line-height: 30px; line-height: 30px;
letter-spacing: 0px; letter-spacing: 0px;
text-align: left; text-align: left;
white-space: nowrap; /* 防止文本换行 */
overflow: hidden; /* 隐藏溢出的内容 */
text-overflow: ellipsis; /* 显示省略符号来代表被修剪的文本 */
} }
} }
...@@ -1350,6 +1617,7 @@ onMounted(() => { ...@@ -1350,6 +1617,7 @@ onMounted(() => {
img { img {
width: 24px; width: 24px;
height: 24px; height: 24px;
border-radius: 50%;
} }
.img1 { .img1 {
...@@ -1394,7 +1662,7 @@ onMounted(() => { ...@@ -1394,7 +1662,7 @@ onMounted(() => {
.list-left { .list-left {
/* 数据展示/Tag标签/亮色/绿 */ /* 数据展示/Tag标签/亮色/绿 */
// width: 72px; min-width: 75px;
height: 24px; height: 24px;
/* 自动布局 */ /* 自动布局 */
display: flex; display: flex;
...@@ -1417,7 +1685,7 @@ onMounted(() => { ...@@ -1417,7 +1685,7 @@ onMounted(() => {
} }
.list-content { .list-content {
width: 475px; width: 425px;
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-style: Regular; font-style: Regular;
...@@ -1426,6 +1694,9 @@ onMounted(() => { ...@@ -1426,6 +1694,9 @@ onMounted(() => {
line-height: 30px; line-height: 30px;
letter-spacing: 0px; letter-spacing: 0px;
text-align: left; text-align: left;
white-space: nowrap; /* 防止文本换行 */
overflow: hidden; /* 隐藏溢出的内容 */
text-overflow: ellipsis; /* 显示省略符号来代表被修剪的文本 */
// margin-left: 13px; // margin-left: 13px;
// margin-right: 13px; // margin-right: 13px;
} }
...@@ -1545,3 +1816,31 @@ onMounted(() => { ...@@ -1545,3 +1816,31 @@ onMounted(() => {
} }
} }
</style> </style>
<style scoped>
.common-prompt-popper.el-popper {
padding: 8px 16px !important;
border-radius: 10px !important;
background-color: rgb(59, 65, 75) !important;
font-size: 16px !important;
font-weight: 400 !important;
font-family: "Microsoft YaHei" !important;
line-height: 30px !important;
color: #fff !important;
border: none !important;
max-width: 500px !important;
}
.common-prompt-popper.el-popper .el-popper__arrow::before {
background-color: rgb(59, 65, 75) !important;
border-color: rgb(59, 65, 75) !important;
}
:deep(.el-table thead) {
color: rgb(59, 65, 75);
}
:deep(.el-table tr) {
height: 48px;
}
</style>
src/views/ruleRestriction/components/askPage/index.vue
浏览文件 @ 6e253904
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<div class="left-title"> <div class="left-title">
<img src="./assets/icon01.png" alt /> <img src="./assets/icon01.png" alt />
<div class="tit">新闻资讯</div> <div class="tit">新闻资讯</div>
<div class="more" @click="handleToMoreNews">更多 +</div> <div class="more" @click="handleToNewsDetail">更多 +</div>
</div> </div>
<div class="left-main"> <div class="left-main">
<div v-for="item in leftList" :key="item.newsId" class="main-item"> <div v-for="item in leftList" :key="item.newsId" class="main-item">
...@@ -29,6 +29,7 @@ ...@@ -29,6 +29,7 @@
<div class="right-title"> <div class="right-title">
<img src="./assets/icon02.png" alt /> <img src="./assets/icon02.png" alt />
<div class="tit">社交媒体</div> <div class="tit">社交媒体</div>
<div class="more" @click="handleToSocialDetail">更多 +</div>
</div> </div>
<div class="right-main"> <div class="right-main">
<div class="trump" v-for="item in rightList"> <div class="trump" v-for="item in rightList">
......
src/views/ruleRestriction/components/dataNew/index.vue
浏览文件 @ 6e253904
...@@ -160,12 +160,12 @@ const getRiskSignalInfo = async () => { ...@@ -160,12 +160,12 @@ const getRiskSignalInfo = async () => {
} }
} }
// // 跳转详情 // 跳转详情
// const handleClickToDetail = () => { const handleClickToDetail = () => {
// // router.push("/decreeLayout"); // router.push("/decreeLayout");
// // const route = router.resolve(""); // const route = router.resolve("");
// window.open(`/ruleRestrictions/detail?id=${latestUpdateList.value[latestUpdateIndex.value].RULEID}`, "_blank"); window.open(`/ruleRestrictions/detail?id=${latestUpdateList.value[latestUpdateIndex.value].RULEID}`, "_blank");
// }; };
// 左侧展示的主动态 // 左侧展示的主动态
const mainTrend = computed(() => { const mainTrend = computed(() => {
...@@ -183,18 +183,18 @@ const handleToRiskDetail = (item) => { ...@@ -183,18 +183,18 @@ const handleToRiskDetail = (item) => {
}; };
// 点击查看详情 // 点击查看详情
const handleClickToDetail = item => { // const handleClickToDetail = item => {
const activeItem = item && item.RULEID ? item : mainTrend.value; // const activeItem = item && item.RULEID ? item : mainTrend.value;
const id = activeItem?.RULEID; // const id = activeItem?.RULEID;
if (!id) return; // if (!id) return;
window.sessionStorage.setItem("curTabName", activeItem?.RULENAMEZH); // window.sessionStorage.setItem("curTabName", activeItem?.RULENAMEZH);
const curRoute = router.resolve({ // const curRoute = router.resolve({
path: "/ruleRestrictions/detail", // path: "/ruleRestrictions/detail",
query: { id: id } // query: { id: id }
}); // });
window.open(curRoute.href, "_blank"); // window.open(curRoute.href, "_blank");
}; // };
// 查看更多动态 // 查看更多动态
const handleToMoreRiskSignal = () => { const handleToMoreRiskSignal = () => {
......
src/views/ruleRestriction/detail/index.vue
浏览文件 @ 6e253904
...@@ -2,17 +2,21 @@ ...@@ -2,17 +2,21 @@
<div class="cooperation-restrictions-detail"> <div class="cooperation-restrictions-detail">
<div class="nav"> <div class="nav">
<div class="nav-main"> <div class="nav-main">
<img src="./assets/image01.png" alt /> <div style="display: flex; align-items: center">
<div class="content"> <img src="./assets/image01.png" alt />
<div class="cl1">美国联邦通信委员会（FCC）启动程序撤销对 TUV/宁波的认可</div> <div class="content">
<div class="cl2">FCC Begins Proceedings to Withdraw Recognition of TUV/Ningbo</div> <div class="cl1">{{ overviewInfo.RULENAMEZH }}</div>
<div class="cl3">2025年10月24日 10:33 · 美国联邦通信委员会</div> <div class="cl2">{{ overviewInfo.RULENAME || '暂无' }}</div>
<div class="cl3">{{ getTime(overviewInfo.PUBLISHDATE) }} · {{ overviewInfo.ORGNAME }}</div>
</div>
</div> </div>
<div class="btn"> <div class="btn">
<button class="btn1"> <button class="btn1">
<img src="./assets/icon01.png" alt />查看原文 <img src="./assets/icon01.png" alt />查看原文
</button> </button>
<!-- <button class="btn1"><img src="./assets/icon02.png" alt="" />查看官网</button> --> <button class="btn1">
<img src="./assets/icon02.png" alt />查看官网
</button>
<button class="btn1 active"> <button class="btn1 active">
<img src="./assets/icon03.png" alt />分析报告 <img src="./assets/icon03.png" alt />分析报告
</button> </button>
...@@ -20,8 +24,8 @@ ...@@ -20,8 +24,8 @@
</div> </div>
</div> </div>
<div class="title"> <div class="title">
<span class="title-one">当前合作限制数据已关联至行政令：</span> <span class="title-one">当前规则限制数据已关联至{{ overviewInfo.Relation[0].TYPE }}：</span>
<span class="title-two">《美国联邦通信委员会（FCC）启动程序撤销对 TUV/宁波的认可》2025年10月24日</span> <span class="title-two">{{ overviewInfo.Relation[0].RELATIONNAME }} &nbsp;{{ overviewInfo.Relation[0].RELATIONDATE }}</span>
<img src="./assets/right.png" alt /> <img src="./assets/right.png" alt />
</div> </div>
<div class="main"> <div class="main">
...@@ -33,27 +37,24 @@ ...@@ -33,27 +37,24 @@
<img class="img2" src="./assets/下载按钮.png" alt /> <img class="img2" src="./assets/下载按钮.png" alt />
<img class="img3" src="./assets/收藏按钮.png" alt /> <img class="img3" src="./assets/收藏按钮.png" alt />
<div class="left-top-content"> <div class="left-top-content">
<span> <span>{{ overviewInfo.RULENAMEZH }}</span>
美国联邦通信委员会（FCC）启动程序撤销对德国莱茵 TÜV
集团/中国检验认证集团（宁波）有限公司作为测试认可实验室的认证。
</span>
</div> </div>
<div class="left-top-bottom"> <div class="left-top-bottom">
<div> <div>
<span class="tit">限制时间：</span> <span class="tit">限制时间：</span>
<span class="tit1">2025年10月24日</span> <span class="tit1">{{ getTime(overviewInfo.PUBLISHDATE) }}</span>
</div> </div>
<div> <div>
<span class="tit">限制机构：</span> <span class="tit">限制机构：</span>
<span class="tit1 tit2">美国联邦通信委员会（FCC） ></span> <span class="tit1 tit2">{{ overviewInfo.ORGNAME }}</span>
</div> </div>
<div> <div>
<span class="tit">限制手段：</span> <span class="tit">限制手段：</span>
<span class="tit1">行政令</span> <span class="tit1">{{ overviewInfo.RULEMEANS }}</span>
</div> </div>
<div> <div>
<span class="tit">限制领域：</span> <span class="tit">限制领域：</span>
<span class="tit3">集成电路</span> <span class="tit3" v-for="ele in overviewInfo.Area">{{ ele }}</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -177,6 +178,7 @@ import swb from "./assets/商务部.png"; ...@@ -177,6 +178,7 @@ import swb from "./assets/商务部.png";
import bg from "./assets/白宫.png"; import bg from "./assets/白宫.png";
import czb from "./assets/财政部.png"; import czb from "./assets/财政部.png";
import gh from "./assets/国会.png"; import gh from "./assets/国会.png";
import { getSanctionOverview } from '@/api/ruleRestriction/index.js'
const dataList = ref([ const dataList = ref([
{ {
...@@ -281,15 +283,35 @@ const dataList3 = ref([ ...@@ -281,15 +283,35 @@ const dataList3 = ref([
]); ]);
const overviewInfo = ref({}) const overviewInfo = ref({})
const sanRecordId = ref('')
const getUrlParams = () => {
const urlParams = new URLSearchParams(window.location.search);
sanRecordId.value = urlParams.get("id") || ""
}
// const getUrlParams = () => { const getSanctionOverviewInfo = async () => {
// const urlParams = new URLSearchParams(window.location.search); try {
// sanRecordId.value = urlParams.get("id") || "" const res = await getSanctionOverview(sanRecordId.value);
// } console.log('------getSanctionOverviewInfo res', res)
if (res && res.code === 200) {
console.log('----getSanctionOverviewInfo', res.data)
overviewInfo.value = res.data
}
} catch (error) {
console.error("获取最新动态接口失败:", error);
}
}
onMounted(() => { const getTime = (time) => {
// getUrlParams() if (time) {
const array = time.split('-')
return `${array[0]}年${array[1]}月${array[2]}日`
}
}
onMounted(() => {
getUrlParams()
getSanctionOverviewInfo()
}) })
</script> </script>
...@@ -319,15 +341,16 @@ const overviewInfo = ref({}) ...@@ -319,15 +341,16 @@ const overviewInfo = ref({})
margin: 0 auto; margin: 0 auto;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between;
img { img {
width: 72px; width: 72px;
height: 72px; height: 72px;
margin-right: 16px; margin-right: 16px;
} }
.content { .content {
width: 758px; // width: 758px;
height: 81px; height: 81px;
margin-right: 378px; // margin-right: 378px;
.cl1 { .cl1 {
font-size: 24px; font-size: 24px;
font-weight: 700; font-weight: 700;
...@@ -524,6 +547,7 @@ const overviewInfo = ref({}) ...@@ -524,6 +547,7 @@ const overviewInfo = ref({})
.tit3 { .tit3 {
display: inline-block; display: inline-block;
border-radius: 4px; border-radius: 4px;
margin-right: 8px;
background-color: rgba(255, 241, 240, 1); background-color: rgba(255, 241, 240, 1);
border: 1px solid rgba(255, 163, 158, 1); border: 1px solid rgba(255, 163, 158, 1);
color: rgba(245, 34, 45, 1); color: rgba(245, 34, 45, 1);
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论