Skip to content

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

update:优化规则限制详情页面并对接后端接口

上级 10ad6a7d
显示空白字符变更
内嵌 并排
正在显示 包含 329 行增加 和 83 行删除
src/api/ruleRestriction/index.js
浏览文件 @ 46d3da69
...@@ -126,17 +126,42 @@ export function getSanctionOverview(params) { ...@@ -126,17 +126,42 @@ export function getSanctionOverview(params) {
}) })
} }
// 规则限制-背景分析
export function getBackGround(params) {
return request({
method: 'GET',
url: `/api/ruleLimitInfo/getBackGround/${params}`
})
}
// 实体清单-制裁概况-获取发布机构机构动态 // 规则限制-限制条款
/** export function getLimitClause(params) {
* @param {Object} data return request({
* @param {string} data.orgId method: 'GET',
* @header token url: `/api/ruleLimitInfo/getLimitClause/${params}`
*/ })
export function getPublishOrgInfo(data) { }
// 规则限制-相关举措
export function getRelevantMeasures(params) {
return request({ return request({
method: 'POST', method: 'GET',
url: `/api/organization/relate/news`, url: `/api/ruleLimitInfo/getRelevantMeasures/${params}`
data,
}) })
} }
// // 实体清单-制裁概况-获取发布机构机构动态
// /**
// * @param {Object} data
// * @param {string} data.orgId
// * @header token
// */
// export function getPublishOrgInfo(data) {
// return request({
// method: 'POST',
// url: `/api/organization/relate/news`,
// data,
// })
// }
\ No newline at end of file
src/views/ruleRestriction/components/resLib/index.vue
浏览文件 @ 46d3da69
...@@ -51,7 +51,7 @@ ...@@ -51,7 +51,7 @@
<div class="title">{{ item.RULENAME }}</div> <div class="title">{{ item.RULENAME }}</div>
<div class="content">{{ item.RULEINTRODUCTION }}</div> <div class="content">{{ item.RULEINTRODUCTION }}</div>
<div class="domain"> <div class="domain">
<div v-for="(domain, i) in item.ruleAreas" :key="i" class="domain-item">{{ domain }}</div> <div v-for="(domain, i) in item.ruleAreas" :key="i" class="domain-item" :class="getClassName(domain)">{{ domain }}</div>
</div> </div>
<div <div
class="type" class="type"
...@@ -132,7 +132,7 @@ ...@@ -132,7 +132,7 @@
<div <div
v-for="(ele, index) in item.area" v-for="(ele, index) in item.area"
:key="index" :key="index"
:class="{ type1: ele !== '', type3: ele === '' }" :class="[{ type1: ele !== '', type3: ele === '' }, getClassName(ele)]"
>{{ ele }}</div> >{{ ele }}</div>
</div> </div>
</div> </div>
...@@ -470,6 +470,41 @@ const getDate = (item) => { ...@@ -470,6 +470,41 @@ const getDate = (item) => {
} }
} }
const getClassName = (type) => {
let className = ''
switch (type) {
case '人工智能':
className = 'ai'
break
case '新材料':
className = 'material'
break
case '量子科技':
className = 'technology'
break
case '生物科技':
className = 'organism'
break
case '航空航天':
className = 'aerospace'
break
case '能源':
className = 'energy'
break
case '集成电路':
className = 'integrated'
break
case '':
className = 'none-class'
break
default:
className = 'other'
}
return className
}
onMounted(async () => { onMounted(async () => {
await getRuleLimitListApi() await getRuleLimitListApi()
try { try {
...@@ -506,6 +541,62 @@ const handlePageChangeACTA = p => { ...@@ -506,6 +541,62 @@ const handlePageChangeACTA = p => {
width: 1600px; width: 1600px;
height: 1565px; height: 1565px;
position: relative; position: relative;
// 领域样式
// 人工智能
.ai {
border: 1px solid rgba(255, 163, 158, 1);
background: rgba(255, 241, 240, 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);
}
// 量子科技
.technology {
border: 1px solid rgba(211, 173, 247, 1);
background: rgba(249, 240, 255, 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);
}
// 航空航天
.aerospace {
border: 1px solid rgba(173, 198, 255, 1);
background: rgba(240, 245, 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);
}
// 集成电路
.integrated {
border: 1px solid rgba(186, 224, 255, 1);
background: rgba(230, 244, 255, 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);
}
// 无类型
.none-class {
background: transparent;
border: none;
}
.nav { .nav {
width: 332px; width: 332px;
height: 42px; height: 42px;
...@@ -760,8 +851,8 @@ const handlePageChangeACTA = p => { ...@@ -760,8 +851,8 @@ const handlePageChangeACTA = p => {
font-family: "Microsoft YaHei"; font-family: "Microsoft YaHei";
line-height: 20px; line-height: 20px;
margin-right: 8px; margin-right: 8px;
color: rgb(5, 95, 194); // color: rgb(5, 95, 194);
background-color: rgba(231, 243, 255, 1); // background-color: rgba(231, 243, 255, 1);
} }
} }
} }
...@@ -1005,9 +1096,9 @@ const handlePageChangeACTA = p => { ...@@ -1005,9 +1096,9 @@ const handlePageChangeACTA = p => {
color: rgb(95, 101, 108); color: rgb(95, 101, 108);
} }
.type1 { .type1 {
border-color: rgba(145, 202, 255, 1); // border-color: rgba(145, 202, 255, 1);
color: rgba(22, 119, 255, 1); // color: rgba(22, 119, 255, 1);
background-color: rgba(230, 244, 255, 1); // background-color: rgba(230, 244, 255, 1);
border-radius: 4px; border-radius: 4px;
border: 1px solid; border: 1px solid;
padding: 2px 8px; padding: 2px 8px;
......
src/views/ruleRestriction/detail/index.vue
浏览文件 @ 46d3da69
...@@ -54,7 +54,7 @@ ...@@ -54,7 +54,7 @@
</div> </div>
<div> <div>
<span class="tit">限制领域：</span> <span class="tit">限制领域：</span>
<span class="tit3" v-for="ele in overviewInfo.Area">{{ ele }}</span> <span class="tit3" :class="getClassName(ele)" v-for="ele in overviewInfo.Area">{{ ele }}</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -65,12 +65,12 @@ ...@@ -65,12 +65,12 @@
<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-bottom-main"> <div class="left-bottom-main">
<div v-for="item in dataList" :key="item.id" class="main-box"> <div v-for="item in overviewInfo.Entities" :key="item.ORGID" class="main-box">
<img :src="item.img" alt /> <img :src="item.ORGPICTURE" alt />
<div class="name">{{ item.name }}</div> <div class="name">{{ item.ORGNAME }}</div>
<div class="type">{{ item.type }}</div> <!-- <div class="type">{{ item.type }}</div> -->
</div> </div>
<img src="./assets/注意.png" alt /> <!-- <img src="./assets/注意.png" alt /> -->
</div> </div>
</div> </div>
<!-- 规则限制事件脉络 --> <!-- 规则限制事件脉络 -->
...@@ -80,10 +80,10 @@ ...@@ -80,10 +80,10 @@
<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-bottom-main"> <div class="left-bottom-main">
<div v-for="item in objList" :key="item.id" class="main-box"> <div v-for="(item, index) in overviewInfo.Context" :key="index" class="main-box">
<img :src="item.img" alt /> <img :src="cycle" alt />
<div class="time">{{ item.time }}</div> <div class="time">{{ item.CONTDATE }}</div>
<div class="name">{{ item.name }}</div> <div class="name">{{ item.CONTENT }}</div>
</div> </div>
<div class="btn"> <div class="btn">
查看更多 查看更多
...@@ -96,41 +96,18 @@ ...@@ -96,41 +96,18 @@
<div class="right"> <div class="right">
<!-- 背景分析 --> <!-- 背景分析 -->
<div class="right-bottom"> <div class="right-bottom">
<div style="width: 100%; height: 60px;">
<img class="img1" src="./assets/bluetitle.png" alt /> <img class="img1" src="./assets/bluetitle.png" alt />
<div class="right-bottom-title">背景分析</div> <div class="right-bottom-title">背景分析</div>
<div class="right-bottom-content1"> <img class="img2" src="./assets/收藏按钮.png" alt />
<div class="right-bottom-content1-title">
<span>（一）法律框架</span>
<img src="./assets/打开按钮.png" alt />
</div>
<div
class="right-bottom-content1-content"
>《法案》第302条授权联邦通信委员会（以下简称委员会或FCC）制定符合公共利益的规则，管理能够发射射频（RF）能量设备的干扰潜力。该法案还允许委员会授权私人机构（测试实验室）进行符合这些规则的合规性测试，并为这些测试实验室建立适当的资质和标准。委员会不会认可未能满足所有适当标准的任何测试实验室，包括与测试实验室的诚信和可靠性相关的标准。委员会的规则部分规定，“确保参与FCC设备授权计划的测试实验室不受对国家安全构成风险的不可信行为者的所有权、指挥或控制。”</div>
</div>
<div class="right-bottom-content2">
<div class="right-bottom-content2-title">
<span>（二）事实背景</span>
<img src="./assets/打开按钮.png" alt />
</div>
<div class="right-bottom-content2-content">
TUV/宁波是一家位于中国浙江宁波的认可测试实验室，被FCC认可可对各种射频设备进行测试，以确保符合适用的FCC规则。根据美国实验室认可协会（A2LA）的信息，TUV/宁波的认证表明该实验室已按照公认的国际标准ISO/IEC
17025:2017《测试和校准实验室能力的一般要求》获得认可。自首次获得认证以来，TUV/宁波已进行的测试促成了数百项设备认证。TUV/宁波通过与中国检验认证集团有限公司（CCIC集团，一家国有企业）的合作与中国政府相连接。作为CCIC集团的分支机构，TUV/宁波直接隶属于一家与中华人民共和国政府有重要联系和监督关系的国有企业。美国商务部已认定中华人民共和国是一个外国对手。
</div>
</div> </div>
<div class="right-bottom-content3"> <div class="width: 100%; height: calc(100% - 60px); overflow-y: auto;">
<div class="right-bottom-content3-title"> <div class="right-bottom-content1" v-for="(item, index) in backgroundInfo" :key="index">
<span>（二）其他背景</span> <div class="right-bottom-content1-title">
<span>{{ item.TITLE }}</span>
<img src="./assets/打开按钮.png" alt /> <img src="./assets/打开按钮.png" alt />
</div> </div>
<div class="right-bottom-content3-content"> <div class="right-bottom-content1-content">{{ item.CONTENT }}</div>
中华人民共和国（PRC）是一个禁止实体，根据委员会规则第2.902条的规定进行识别。OET 已初步确定
TUV/宁波由中华人民共和国拥有、控制或受其指令管理，根据委员会规则第2.951(d)(1)条和第2.902条，中华人民共和国是一个禁止实体。TUV/宁波在其为
FCC
设备认证申请出具的测试实验室报告中，将自己标识为“莱茵TÜV/CCIC（宁波）有限公司”，并将其网站地址标识为“www.tuv.com”。TUV/宁波的合资企业隶属于
CCIC 集团。CCIC
集团的网站列出了中国检验认证集团宁波有限公司（TUV/宁波合资企业的一部分）作为其在中国的子公司之一。CCIC
集团是一家国有企业，经中华人民共和国国务院批准成立，并受国务院国有资产监督管理委员会（SASAC）监管。SASAC
对国有资产和企业行使全面控制和监督，其职能直接由中央委员会授权。
</div> </div>
</div> </div>
</div> </div>
...@@ -139,9 +116,9 @@ ...@@ -139,9 +116,9 @@
<img class="img1" src="./assets/bluetitle.png" alt /> <img class="img1" src="./assets/bluetitle.png" alt />
<div class="right-top-title">限制条款</div> <div class="right-top-title">限制条款</div>
<div class="right-top-content"> <div class="right-top-content">
<div v-for="item in dataList2" :key="item.id" class="right-top-item"> <div v-for="(item, index) in limitClauseInfo" :key="index" class="right-top-item">
<span class="id">{{ item.id }}</span> <span class="id">{{ index + 1 }}</span>
<span class="name">{{ item.name }}</span> <span class="name">{{ item }}</span>
<img src="./assets/打开按钮.png" alt /> <img src="./assets/打开按钮.png" alt />
</div> </div>
</div> </div>
...@@ -151,15 +128,15 @@ ...@@ -151,15 +128,15 @@
<img class="img1" src="./assets/bluetitle.png" alt /> <img class="img1" src="./assets/bluetitle.png" alt />
<div class="right-top-title">相关举措</div> <div class="right-top-title">相关举措</div>
<div class="right-top-content"> <div class="right-top-content">
<div v-for="item in dataList3" :key="item.id" class="right-top-item"> <div v-for="item in relevantMeasureInfo" :key="item.RELATIONID" class="right-top-item">
<img :src="item.img" alt /> <img :src="item.IMAGEURL" alt />
<div class="name">{{ item.name }}</div> <div class="name">{{ item.RELATIONNAME }}</div>
<div class="time">{{ item.time }}</div> <div class="time">{{ getTime(item.RELATIONDATE) }}</div>
<div <div
class="type" class="type"
:class="{ type1: item.type === '行政令', type2: item.type === '法案' }" :class="{ type1: item.TYPE === '行政令', type2: item.TYPE === '法案' }"
>{{ item.type }}</div> >{{ item.TYPE }}</div>
<div class="content">{{ item.content }}</div> <div class="content">{{ item.RELATIONCONTENT }}</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -169,7 +146,7 @@ ...@@ -169,7 +146,7 @@
</template> </template>
<script setup> <script setup>
import { ref, onMounted, computed } from "vue"; import { ref, onMounted, computed, watch } 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";
...@@ -178,7 +155,7 @@ import swb from "./assets/商务部.png"; ...@@ -178,7 +155,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' import { getSanctionOverview, getBackGround, getLimitClause, getRelevantMeasures } from '@/api/ruleRestriction/index.js'
const dataList = ref([ const dataList = ref([
{ {
...@@ -284,6 +261,9 @@ const dataList3 = ref([ ...@@ -284,6 +261,9 @@ const dataList3 = ref([
const overviewInfo = ref({}) const overviewInfo = ref({})
const sanRecordId = ref('') const sanRecordId = ref('')
const backgroundInfo = ref([])
const limitClauseInfo = ref([])
const relevantMeasureInfo = ref([])
const getUrlParams = () => { const getUrlParams = () => {
const urlParams = new URLSearchParams(window.location.search); const urlParams = new URLSearchParams(window.location.search);
...@@ -299,10 +279,51 @@ const getSanctionOverviewInfo = async () => { ...@@ -299,10 +279,51 @@ const getSanctionOverviewInfo = async () => {
overviewInfo.value = res.data overviewInfo.value = res.data
} }
} catch (error) { } catch (error) {
console.error("获取最新动态接口失败:", error); console.error("获取规则限制基本详情接口失败:", error);
}
}
const getBackGroundInfo = async () => {
try {
const res = await getBackGround(sanRecordId.value);
console.log('------getBackGroundInfo res', res)
if (res && res.code === 200) {
console.log('----getBackGroundInfo', res.data)
backgroundInfo.value = res.data
}
} catch (error) {
console.error("获取背景分析接口失败:", error);
}
}
const getLimitClauseInfo = async () => {
try {
const res = await getLimitClause(sanRecordId.value);
console.log('------getLimitClauseInfo res', res)
if (res && res.code === 200) {
console.log('----getLimitClauseInfo', res.data)
limitClauseInfo.value = res.data
}
} catch (error) {
console.error("获取限制条款接口失败:", error);
}
}
const getRelevantMeasuresInfo = async () => {
try {
const res = await getRelevantMeasures(sanRecordId.value);
console.log('------getRelevantMeasuresInfo res', res)
if (res && res.code === 200) {
console.log('----getRelevantMeasuresInfo', res.data)
relevantMeasureInfo.value = res.data
}
} catch (error) {
console.error("获取限制条款接口失败:", error);
} }
} }
const getTime = (time) => { const getTime = (time) => {
if (time) { if (time) {
const array = time.split('-') const array = time.split('-')
...@@ -310,12 +331,53 @@ const getTime = (time) => { ...@@ -310,12 +331,53 @@ const getTime = (time) => {
} }
} }
const getRelation = computed(() => { const getClassName = (type) => {
return overviewInfo?.Relation ? overviewInfo?.Relation[0] : {} let className = ''
switch (type) {
case '人工智能':
className = 'ai'
break
case '新材料':
className = 'material'
break
case '量子科技':
className = 'technology'
break
case '生物科技':
className = 'organism'
break
case '航空航天':
className = 'aerospace'
break
case '能源':
className = 'energy'
break
case '集成电路':
className = 'integrated'
break
case '':
className = 'none-class'
break
default:
className = 'other'
}
return className
}
const getRelation = ref({})
watch(overviewInfo, () => {
getRelation.value = overviewInfo.value?.Relation ? overviewInfo.value?.Relation[0] : {}
}, {
deep: true
}) })
onMounted(() => {
onMounted(async () => {
getUrlParams() getUrlParams()
getSanctionOverviewInfo() await getSanctionOverviewInfo()
await getBackGroundInfo()
await getLimitClauseInfo()
await getRelevantMeasuresInfo()
}) })
</script> </script>
...@@ -330,6 +392,61 @@ onMounted(() => { ...@@ -330,6 +392,61 @@ onMounted(() => {
background: rgba(243, 243, 244, 1); background: rgba(243, 243, 244, 1);
overflow: auto; overflow: auto;
padding-bottom: 50px; padding-bottom: 50px;
// 领域样式
// 人工智能
.ai {
border: 1px solid rgba(255, 163, 158, 1);
background: rgba(255, 241, 240, 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);
}
// 量子科技
.technology {
border: 1px solid rgba(211, 173, 247, 1);
background: rgba(249, 240, 255, 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);
}
// 航空航天
.aerospace {
border: 1px solid rgba(173, 198, 255, 1);
background: rgba(240, 245, 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);
}
// 集成电路
.integrated {
border: 1px solid rgba(186, 224, 255, 1);
background: rgba(230, 244, 255, 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);
}
// 无类型
.none-class {
background: transparent;
border: none;
}
.nav { .nav {
width: 100%; width: 100%;
height: 120px; height: 120px;
...@@ -552,9 +669,9 @@ onMounted(() => { ...@@ -552,9 +669,9 @@ onMounted(() => {
display: inline-block; display: inline-block;
border-radius: 4px; border-radius: 4px;
margin-right: 8px; 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);
padding: 2px 8px; padding: 2px 8px;
} }
} }
...@@ -784,6 +901,8 @@ onMounted(() => { ...@@ -784,6 +901,8 @@ onMounted(() => {
.right-top-content { .right-top-content {
width: 1022px; width: 1022px;
height: 312px; height: 312px;
overflow-y: auto;
overflow-x: hidden;
.right-top-item { .right-top-item {
width: 1022px; width: 1022px;
padding: 12px 0px; padding: 12px 0px;
...@@ -886,6 +1005,14 @@ onMounted(() => { ...@@ -886,6 +1005,14 @@ onMounted(() => {
left: 0px; left: 0px;
top: 18px; top: 18px;
} }
.img2 {
width: 28px;
height: 28px;
position: absolute;
top: 14px;
right: 12px;
cursor: pointer;
}
.btn { .btn {
padding: 2px 8px; padding: 2px 8px;
font-size: 16px; font-size: 16px;
...@@ -915,11 +1042,11 @@ onMounted(() => { ...@@ -915,11 +1042,11 @@ onMounted(() => {
} }
.right-bottom-content1 { .right-bottom-content1 {
width: 1022px; width: 1022px;
height: 199px; height: auto;
position: absolute; // position: absolute;
top: 60px; // top: 60px;
left: 22px; // left: 22px;
margin-bottom: 24px; margin-bottom: 16px;
.right-bottom-content1-title { .right-bottom-content1-title {
width: 1022px; width: 1022px;
height: 55px; height: 55px;
...@@ -948,7 +1075,7 @@ onMounted(() => { ...@@ -948,7 +1075,7 @@ onMounted(() => {
} }
.right-bottom-content1-content { .right-bottom-content1-content {
width: 1022px; width: 1022px;
height: 144px; // height: 144px;
padding: 12px 24px 12px 78px; padding: 12px 24px 12px 78px;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
...@@ -1078,6 +1205,8 @@ onMounted(() => { ...@@ -1078,6 +1205,8 @@ onMounted(() => {
.right-top-content { .right-top-content {
width: 1022px; width: 1022px;
height: 421px; height: 421px;
overflow-y: auto;
overflow-x: hidden;
.right-top-item { .right-top-item {
width: 1022px; width: 1022px;
height: 104px; height: 104px;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论