Skip to content

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

add:增加商业管制清单简介和列表功能

上级 05fba319
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 751 行增加 和 1 行删除
src/api/exportControlV2.0.js
浏览文件 @ 849d42ad
......@@ -565,4 +565,76 @@ export function getSingleSanctionEntityInternationalPaper(params) {
url: `/api/organization/paper/icCount`,
params,
})
}
// 商业管制清单-CCL清单简介-基本信息
export function getCCLInfo() {
return request({
method: 'GET',
url: `/api/sanctionList/baseInfo/ccl`
})
}
// 商业管制清单-CCL清单简介-出口管制分类编码
export function getECCN() {
return request({
method: 'GET',
url: `/api/ccl/eccn`
})
}
// 商业管制清单-CCL清单简介-出口管制分类编码信息列表
/**
* @param {Object} params
* @param {Integer} params.id - 上一接口查询的EccnCategoryID
* @header token
*/
export function getECCNList(params) {
return request({
method: 'GET',
url: `/api/ccl/eccn/rank`,
params,
})
}
// 商业管制清单-CCL清单列表-类别字典
export function getECCNCategory() {
return request({
method: 'GET',
url: `/api/commonDict/ccl/eccnCategory`
})
}
// 商业管制清单-CCL清单列表-科技领域字典
export function getAreaType() {
return request({
method: 'GET',
url: `/api/commonDict/areaType`
})
}
// 商业管制清单-CCL清单列表-管控原因字典
export function getControlReason() {
return request({
method: 'GET',
url: `/api/commonDict/ccl/controlReason`
})
}
// 商业管制清单-CCL清单简介-CCL清单查询
/**
* @param {Object} params
* @param {String} params.categoryCode - 类别Id
* @param {List<Integer>} params.techDomainIds - 科技领域I
* @param {String} params.keyword - 搜索物项或ECCN编码
* @param {List<Integer>} params.controlIds - 类别ID
* @param {Boolean} params.isLatest - 查看最近更新内容
* @header token
*/
export function getCclQuery(data) {
return request({
method: 'POST',
url: `/api/ccl/query`,
data,
})
}
\ No newline at end of file
src/router/modules/exportControl.js
浏览文件 @ 849d42ad
......@@ -113,6 +113,15 @@ const exportControlRoutes = [
title: "实体清单原文"
}
},
// V2.0全部实体清单
{
path: "/exportControl/commercialControlList",
name: "commercialControlList",
component: () => import("@/views/exportControl/v2.0CommercialControlList/index.vue"),
meta: {
title: "全部实体清单"
}
}
]
export default exportControlRoutes
\ No newline at end of file
src/views/exportControl/index.vue
浏览文件 @ 849d42ad
......@@ -988,7 +988,13 @@ const handleToEntityListNoId = item => {
});
// 打开一个新页面
window.open(routeData.href, "_blank");
} else {
} else if (item.nameZh == "商业管制清单") {
const routeData = router.resolve({
path: "/exportControl/commercialControlList"
});
// 打开一个新页面
window.open(routeData.href, "_blank");
} else {
return;
}
};
......
src/views/exportControl/v2.0CommercialControlList/components/sanctionsOverview/components/listPage/RuleSubsidiaryDialog.vue 0 → 100644
浏览文件 @ 849d42ad
<template>
<el-dialog
v-model="visible"
width="1280px"
:show-close="false"
:close-on-click-modal="false"
class="rule-subsidiary-dialog"
destroy-on-close
top="5vh"
draggable
>
<template #header>
<div class="dialog-header">
<div class="left-title">
<img :src="defaultIcon" alt="" class="title-icon" />
<span class="company-name">{{ companyName }}</span>
<span class="suffix-text">“实体清单50%规则” 涉及实体列表</span>
</div>
<div class="right-actions">
<div class="right-count">
共 <span class="highlight">{{ totalCount }}</span> 家
</div>
<el-icon class="close-btn" @click="visible = false"><Close /></el-icon>
</div>
</div>
</template>
<div class="dialog-content">
<el-table
:data="tableData"
table-layout="fixed"
:row-class-name="tableRowClassName"
:header-cell-style="{ background: '#fff' }"
style="width: 100%"
>
<el-table-column label="实体名称" min-width="300">
<template #default="{ row }">
<div class="entity-name-cell">
<el-avatar class="avatar" :size="24" :src="row.avatar || defaultIcon" />
<div class="name" :title="row.name">{{ row.name }}</div>
</div>
</template>
</el-table-column>
<el-table-column label="涉及领域" width="200">
<template #default="{ row }">
<div class="domain-cell">
<el-tag
v-for="tag in row.domains"
:key="tag"
class="domain-tag"
effect="plain"
:disable-transitions="true"
:style="getTagStyle(tag)"
>
{{ tag }}
</el-tag>
</div>
</template>
</el-table-column>
<el-table-column prop="equityRatio" label="股权占比" width="120" align="center" />
<el-table-column prop="location" label="上市地点" width="120" align="center" />
<el-table-column prop="revenue" label="营收(亿元)" width="120" align="center" />
</el-table>
<div class="dialog-footer">
<el-pagination
v-model:current-page="currentPage"
v-model:page-size="pageSize"
:total="totalCount"
layout="prev, pager, next"
prev-text="<"
next-text=">"
@current-change="handleCurrentChange"
/>
</div>
</div>
</el-dialog>
</template>
<script setup>
import { ref, defineProps, defineEmits, computed, watch } from "vue";
import { Close } from "@element-plus/icons-vue";
import defaultIcon from "../../../../../assets/icons/default-avatar.png";
const props = defineProps({
modelValue: {
type: Boolean,
default: false
},
companyName: {
type: String,
default: ""
},
totalCount: {
type: Number,
default: 0
},
dataList: {
type: Array,
default: () => []
}
});
const emit = defineEmits(["update:modelValue"]);
const visible = computed({
get: () => props.modelValue,
set: val => emit("update:modelValue", val)
});
const currentPage = ref(1);
const pageSize = ref(10);
const tableData = computed(() => {
const start = (currentPage.value - 1) * pageSize.value;
const end = start + pageSize.value;
return props.dataList.slice(start, end).map(item => ({
...item,
name: item.orgName,
domains: item.techDomains || [],
equityRatio: item.equityRatio ? (item.equityRatio * 100).toFixed(2) + '%' : '--',
location: '--',
revenue: item.revenue || '--'
}));
});
const handleCurrentChange = val => {
currentPage.value = val;
};
const tableRowClassName = ({ rowIndex }) => {
return rowIndex % 2 === 0 ? "odd-row" : "";
};
const getTagStyle = tag => {
const colorPool = [
{ color: "#CD4246", background: "rgba(255, 242, 240, 1)", borderColor: "rgba(255, 163, 158, 1)" },
{ color: "#0E78F1", background: "rgba(230, 244, 255, 1)", borderColor: "rgba(145, 206, 255, 1)" },
{ color: "#722ED1", background: "rgba(249, 240, 255, 1)", borderColor: "rgba(211, 173, 247, 1)" },
{ color: "#13A8A8", background: "rgba(230, 255, 251, 1)", borderColor: "rgba(135, 232, 222, 1)" },
{ color: "#FA8C16", background: "rgba(255, 247, 230, 1)", borderColor: "rgba(255, 213, 145, 1)" },
{ color: "#52C41A", background: "rgba(246, 255, 237, 1)", borderColor: "rgba(183, 235, 143, 1)" }
];
let hash = 0;
for (let i = 0; i < tag.length; i++) {
hash = tag.charCodeAt(i) + ((hash << 5) - hash);
}
const index = Math.abs(hash) % colorPool.length;
return colorPool[index];
};
</script>
<style lang="scss" scoped>
.rule-subsidiary-dialog {
:deep(.el-dialog__header) {
margin-right: 0;
padding: 24px;
border-bottom: 1px solid #edeff2;
}
:deep(.el-dialog__body) {
padding: 0;
}
}
.dialog-header {
display: flex;
justify-content: space-between;
align-items: center;
.left-title {
display: flex;
align-items: center;
.title-icon {
width: 24px;
height: 24px;
margin-right: 8px;
}
.company-name {
font-size: 18px;
font-weight: 700;
color: #3b414b;
margin-right: 8px;
font-family: "Microsoft YaHei";
}
.suffix-text {
font-size: 18px;
font-weight: 700;
color: #3b414b;
font-family: "Microsoft YaHei";
}
}
.right-actions {
display: flex;
align-items: center;
.right-count {
font-size: 14px;
color: #5f656c;
font-weight: 700;
font-family: "Microsoft YaHei";
margin-right: 20px;
.highlight {
color: #cd4246;
margin: 0 4px;
font-size: 16px;
}
}
.close-btn {
font-size: 20px;
color: #909399;
cursor: pointer;
transition: color 0.2s;
&:hover {
color: #409eff;
}
}
}
}
.dialog-content {
height: 722px; /* Adjusted to fit total 851px approx with header (65px) and footer (64px) */
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 0 24px;
:deep(.el-table) {
--el-table-header-bg-color: #fff;
--el-table-border-color: transparent;
--el-table-row-hover-bg-color: rgba(248, 249, 250, 1);
}
:deep(.el-table__inner-wrapper::before) {
background-color: transparent;
}
:deep(.el-table__header-wrapper th) {
height: 60px;
background-color: #fff;
font-size: 16px;
font-weight: 700;
color: rgba(59, 65, 75, 1);
font-family: "Microsoft YaHei";
border-bottom: 1px solid rgba(230, 231, 232, 1);
}
:deep(.el-table__header-wrapper .cell) {
line-height: 22px;
}
:deep(.el-table__row) {
height: 64px;
}
:deep(.el-table__cell) {
border-bottom: 0;
font-size: 16px;
font-weight: 400;
color: rgb(95, 101, 108);
font-family: "Microsoft YaHei";
}
:deep(.odd-row td.el-table__cell) {
background-color: rgba(248, 249, 250, 1);
}
.entity-name-cell {
display: flex;
align-items: center;
.avatar {
flex: 0 0 24px;
margin-right: 9px;
}
.name {
font-size: 16px;
font-weight: 700;
color: rgba(59, 65, 75, 1);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.domain-cell {
display: flex;
align-items: center;
gap: 8px;
:deep(.el-tag) {
height: auto;
padding: 2px 8px;
border-radius: 4px;
font-size: 14px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 20px;
}
}
}
.dialog-footer {
height: 64px;
display: flex;
justify-content: center;
align-items: center;
border-top: 1px solid #edeff2;
:deep(.el-pagination) {
--el-pagination-button-bg-color: #fff;
--el-pagination-hover-color: #0e78f1;
--el-pagination-font-size: 14px;
.el-pager li {
border: 1px solid #dcdfe6;
border-radius: 4px;
margin: 0 4px;
font-weight: 400;
color: #5f656c;
min-width: 32px;
height: 32px;
line-height: 30px;
&.is-active {
background-color: #0e78f1;
color: #fff;
border-color: #0e78f1;
}
&:hover:not(.is-active) {
color: #0e78f1;
border-color: #0e78f1;
}
}
.btn-prev,
.btn-next {
border: 1px solid #dcdfe6;
border-radius: 4px;
padding: 0;
margin: 0 4px;
min-width: 32px;
height: 32px;
line-height: 30px;
text-align: center;
&:hover {
color: #0e78f1;
border-color: #0e78f1;
}
&[disabled] {
border-color: #e4e7ed;
color: #c0c4cc;
}
}
}
}
</style>
\ No newline at end of file
src/views/exportControl/v2.0CommercialControlList/components/sanctionsOverview/index.vue 0 → 100644
浏览文件 @ 849d42ad
<!--
* @Author: lishun
* @Date: 2026-01-07 09:57:54
* @LastEditors: lishun
* @LastEditTime: 2026-01-07 09:58:04
-->
<template>
<div class="sanctions-overview">
<div class="side-nav">
<div v-for="(item, index) in activeTab" :key="index" class="tab-item" :class="{'active': index === activeIndex}" @click="activeIndex = index">
{{item}}
<span v-if="index === activeIndex" class="arrow"></span>
</div>
</div>
<div class="content-box">
<introductionPage v-if="activeIndex === 0"></introductionPage>
<listPage v-if="activeIndex === 1"></listPage>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
import introductionPage from "./components/introductionPage/index.vue"
import listPage from "./components/listPage/index.vue"
const activeTab = ref(["CCL清单简介", "CCL清单列表"])
const activeIndex = ref(0)
</script>
<style scoped lang="scss">
*{
margin: 0;
padding: 0;
}
.sanctions-overview{
width: 1601px;
margin: 0 auto;
position: relative;
// min-height: 800px;
.side-nav {
position: absolute;
top: 27px;
right: 100%;
margin-right: 12px;
display: flex;
flex-direction: column;
gap: 16px;
.tab-item {
cursor: pointer;
padding: 4px 20px;
border-radius: 22px;
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(95, 101, 108);
white-space: nowrap;
display: flex;
align-items: center;
&.active {
background-color: rgb(5, 95, 194);
color: #fff;
.arrow {
display: inline-block;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 6px solid #fff;
margin-left: 8px;
}
}
}
}
.content-box {
width: 100%;
}
}
</style>
src/views/exportControl/v2.0CommercialControlList/index.vue 0 → 100644
浏览文件 @ 849d42ad
<template>
<div class="entity-list">
<div class="header">
<div class="header-title">
<img :src="headerTitle.img" alt />
<div>
<div class="title">
{{ headerTitle.title }}
<span>{{ headerTitle.titleEn }}</span>
</div>
<div class="department">{{ headerTitle.department }}</div>
</div>
<div class="btn">
<img :src="icon01" alt />切换
</div>
</div>
<div class="header-nav">
<div
class="nav-item"
v-for="(item, index) in headerNavList"
:key="index"
:class="{ active: activeIndex === index }"
@click="activeIndex = index"
>
<img :src="activeIndex === index ? item.imgActive : item.img" alt />
<span>{{ item.title }}</span>
<div class="active-line" v-if="activeIndex === index"></div>
</div>
</div>
</div>
<div class="main">
<sanctions-overview v-if="activeIndex === 0"></sanctions-overview>
<!-- <data-statistics v-if="activeIndex === 1"></data-statistics>
<deep-mining v-if="activeIndex === 2"></deep-mining>
<impact-analysis v-if="activeIndex === 3"></impact-analysis>-->
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
import sanctionsOverview from "./components/sanctionsOverview/index.vue"
// import dataStatistics from "./components/dataStatistics/index.vue"
// import deepMining from "./components/deepMining/index.vue"
// import impactAnalysis from "./components/impactAnalysis/index.vue"
import title from "./assets/title.png"
import icon01 from "./assets/icon01.png"
import icon1 from "../assets/icons/icon1.png";
import icon1Active from "../assets/icons/icon1_active.png";
import icon5 from "../assets/icons/icon5.png";
import icon5Active from "../assets/icons/icon5_active.png";
import icon2 from "../assets/icons/icon2.png";
import icon2Active from "../assets/icons/icon2_active.png";
import icon3 from "../assets/icons/icon3.png";
import icon3Active from "../assets/icons/icon3_active.png";
const headerTitle = ref({
img: title,
title: "商业管制清单（CCL）",
titleEn: "Commercial Control List",
department: "美国商务部工业与安全局"
})
const activeIndex = ref(0)
const headerNavList = ref([
{
img: icon1,
imgActive: icon1Active,
title: "制裁概况"
},
{
img: icon5,
imgActive: icon5Active,
title: "数据统计"
},
{
img: icon2,
imgActive: icon2Active,
title: "深度挖掘"
},
{
img: icon3,
imgActive: icon3Active,
title: "影响分析"
}
])
</script>
<style scoped lang="scss">
* {
margin: 0;
padding: 0;
}
.entity-list {
width: 100%;
height: 100%;
overflow-y: auto;
.header {
width: 100%;
height: 148px;
background-color: #fff;
padding-top: 16px;
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05);
.header-title {
width: 1601px;
height: 72px;
background-color: rgba(246, 250, 255, 1);
margin: 0 auto;
border-radius: 10px;
border: 2px solid rgba(174, 214, 255, 1);
display: flex;
align-items: center;
margin-bottom: 12px;
position: relative;
img {
width: 54px;
height: 54px;
margin-left: 15px;
margin-right: 11px;
}
.title {
font-size: 20px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 26px;
color: rgb(59, 65, 75);
span {
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(95, 101, 108);
margin-left: 11px;
}
}
.department {
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(95, 101, 108);
}
.btn {
cursor: pointer;
display: flex;
align-items: center;
position: absolute;
right: 16px;
top: 25px;
font-size: 18px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(5, 95, 194);
img {
width: 20px;
height: 20px;
margin-right: 7px;
}
}
}
.header-nav {
width: 1601px;
margin: 0 auto;
height: 48px;
display: flex;
align-items: center;
.nav-item {
display: flex;
align-items: center;
height: 100%;
margin-right: 32px;
cursor: pointer;
position: relative;
font-size: 18px;
font-weight: 400;
font-family: "Microsoft YaHei";
color: rgb(59, 65, 75);
&:last-child {
margin-right: 0;
}
img {
width: 16px;
height: 16px;
margin-right: 4px;
}
&.active {
color: rgb(5, 95, 194);
font-weight: 700;
}
.active-line {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background-color: #055fc2;
border-radius: 1.5px;
}
}
}
}
.main {
width: 100%;
height: auto;
min-height: calc(100% - 148px);
background-color: #f7f8f9;
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论