Skip to content

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

update:完成全联盟页面接口对接

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