提交 a38601c5 authored 作者: yanpeng's avatar yanpeng

细节修改

上级 506f41e6
......@@ -121,7 +121,7 @@ const exportControlRoutes = [
name: "commercialControlList",
component: () => import("@/views/exportControl/v2.0CommercialControlList/index.vue"),
meta: {
title: "商业管制清单"
title: "商业管制清单概览"
}
}
]
......
<template>
<div class="data-library-wrapper">
<!-- <div class="data-library-header">
<div class="data-library-wrapper">
<!-- <div class="data-library-header">
<div class="header-left">
<div class="icon">
<img src="@/assets/icons/overview/logo.png" alt="">
......@@ -20,858 +20,844 @@
</div>
</div>
</div> -->
<div class="data-library-main">
<div class="data-library-sider">
<div class="sider-item-box" v-for="item, index in siderList" :key="index">
<div class="sider-item" @click="handleSiderItem(item)">
<div class="sider-icon">
<img :src="item.icon" alt="">
</div>
<div class="sider-name text-compact-bold" :class="{ 'sider-name-active': item.active }">{{ item.name }}
</div>
<div class="sider-arrow" v-if="item.children && item.children.length">
<img v-if="!item.isExpanded" src="./assets/icons/arrow-down.svg" alt="">
<img v-else src="./assets/icons/arrow-up.svg" alt="">
</div>
</div>
<div class="sider-second-item-box" v-if="item.isExpanded">
<div class="sider-second-item text-compact" :class="{ 'sider-second-item-acitve': val.active }"
v-for="val, idx in item.children" :key="idx" @click="handleSiderSecondItem(val)">
{{ val.name }}
</div>
</div>
</div>
</div>
<div class="data-library-content">
<div class="tab-box">
<div class="tab-item" :class="{ 'tab-item-active': tab.active }" v-for="tab, index in openedTabList"
:key="index" @click="handleClickTab(tab)">
<div class="text text-tip-1" :class="{ 'text-active': tab.active }">{{ tab.meta.title }}</div>
<el-tooltip content="关闭当前标签" placement="top">
<div class="icon" @click.stop="handleCloseCurTab(tab, index)">
<img v-if="!tab.active" src="./assets/icons/close.svg" alt="">
<img v-else src="./assets/icons/close-active.svg" alt="">
</div>
</el-tooltip>
</div>
</div>
<div class="main-box">
<router-view v-slot="{ Component }">
<!-- <keep-alive :include="tagsViewStore.cachedViews">
<div class="data-library-main">
<div class="data-library-sider">
<div class="sider-item-box" v-for="(item, index) in siderList" :key="index">
<div class="sider-item" @click="handleSiderItem(item)">
<div class="sider-icon">
<img :src="item.icon" alt="" />
</div>
<div class="sider-name text-compact-bold" :class="{ 'sider-name-active': item.active }">
{{ item.name }}
</div>
<div class="sider-arrow" v-if="item.children && item.children.length">
<img v-if="!item.isExpanded" src="./assets/icons/arrow-down.svg" alt="" />
<img v-else src="./assets/icons/arrow-up.svg" alt="" />
</div>
</div>
<div class="sider-second-item-box" v-if="item.isExpanded">
<div
class="sider-second-item text-compact"
:class="{ 'sider-second-item-acitve': val.active }"
v-for="(val, idx) in item.children"
:key="idx"
@click="handleSiderSecondItem(val)"
>
{{ val.name }}
</div>
</div>
</div>
</div>
<div class="data-library-content">
<div class="tab-box">
<div
class="tab-item"
:class="{ 'tab-item-active': tab.active }"
v-for="(tab, index) in openedTabList"
:key="index"
@click="handleClickTab(tab)"
>
<div class="text text-tip-1" :class="{ 'text-active': tab.active }">{{ tab.meta.title }}</div>
<el-tooltip content="关闭当前标签" placement="top">
<div class="icon" @click.stop="handleCloseCurTab(tab, index)">
<img v-if="!tab.active" src="./assets/icons/close.svg" alt="" />
<img v-else src="./assets/icons/close-active.svg" alt="" />
</div>
</el-tooltip>
</div>
</div>
<div class="main-box">
<router-view v-slot="{ Component }">
<!-- <keep-alive :include="tagsViewStore.cachedViews">
<component :is="Component" :key="route.fullPath" />
</keep-alive> -->
<keep-alive>
<component :is="Component" :key="route.fullPath" />
</keep-alive>
</router-view>
</div>
</div>
</div>
</div>
<keep-alive>
<component :is="Component" :key="route.fullPath" />
</keep-alive>
</router-view>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
import Icon1 from './assets/icons/sider-icon1.svg'
import Icon2 from './assets/icons/sider-icon2.svg'
import Icon3 from './assets/icons/sider-icon3.svg'
import Icon4 from './assets/icons/sider-icon4.svg'
import Icon5 from './assets/icons/sider-icon5.svg'
import Icon6 from './assets/icons/sider-icon6.svg'
import Icon7 from './assets/icons/sider-icon7.svg'
import Icon8 from './assets/icons/sider-icon8.svg'
import Icon9 from './assets/icons/sider-icon9.svg'
import Icon10 from './assets/icons/sider-icon10.svg'
import Icon11 from './assets/icons/sider-icon11.svg'
import { useRouter, useRoute } from 'vue-router'
import useTagsViewStore from '@/stores/tagsView.js'
const router = useRouter()
const route = useRoute()
const tagsViewStore = useTagsViewStore()
import { computed, onBeforeUnmount, onMounted, ref } from "vue";
import Icon1 from "./assets/icons/sider-icon1.svg";
import Icon2 from "./assets/icons/sider-icon2.svg";
import Icon3 from "./assets/icons/sider-icon3.svg";
import Icon4 from "./assets/icons/sider-icon4.svg";
import Icon5 from "./assets/icons/sider-icon5.svg";
import Icon6 from "./assets/icons/sider-icon6.svg";
import Icon7 from "./assets/icons/sider-icon7.svg";
import Icon8 from "./assets/icons/sider-icon8.svg";
import Icon9 from "./assets/icons/sider-icon9.svg";
import Icon10 from "./assets/icons/sider-icon10.svg";
import Icon11 from "./assets/icons/sider-icon11.svg";
import { useRouter, useRoute } from "vue-router";
import useTagsViewStore from "@/stores/tagsView.js";
const router = useRouter();
const route = useRoute();
const tagsViewStore = useTagsViewStore();
// 在路由全局守卫中处理
router.beforeEach((to, from, next) => {
// 路由允许添加标签(排除掉隐藏的布局页如 /404, /login 等)
if (to.path.indexOf('dataLibrary') > -1) {
tagsViewStore.addView({
path: to.path,
name: to.name, // 对应组件的 name,用于缓存
meta: { ...to.meta },
active: true
})
}
next()
})
// 路由允许添加标签(排除掉隐藏的布局页如 /404, /login 等)
if (to.path.indexOf("dataLibrary") > -1) {
tagsViewStore.addView({
path: to.path,
name: to.name, // 对应组件的 name,用于缓存
meta: { ...to.meta },
active: true
});
}
next();
});
const siderList = ref([
{
name: '科技法案',
icon: Icon1,
active: false,
isExpanded: false,
children: [
{
name: '国会法案',
path: '/dataLibrary/countryBill',
active: false,
},
{
name: '州法案',
path: '/dataLibrary/stateBill',
active: false,
},
]
},
{
name: '科技政令',
path: '/dataLibrary/dataDecree',
icon: Icon2,
active: false,
isExpanded: false,
children: [
]
},
{
name: '美国科技智库',
path: '/dataLibrary/dataThinkTank',
icon: Icon3,
active: false,
isExpanded: false,
children: [
]
},
{
name: '出口管制',
icon: Icon4,
active: false,
isExpanded: false,
children: [
{
name: '实体清单',
path: '/dataLibrary/dataEntityList',
active: false,
},
{
name: '商业管制清单',
path: '/dataLibrary/dataCommerceControlList',
active: false,
},
{
name: '实体清单事件',
path: '/dataLibrary/dataEntityListEvent',
active: false,
},
{
name: '商业管制清单事件',
path: '/dataLibrary/dataCommerceControlListEvent',
active: false,
},
]
},
// {
// name: '合作限制',
// icon: Icon5,
// active: false,
// isExpanded: false,
// children: [
// ]
// },
{
name: '投融资限制',
icon: Icon6,
active: false,
isExpanded: false,
children: [
{
name: 'SDN清单',
path: '/dataLibrary/sDNList',
active: false,
},
{
name: '涉军企业清单',
path: '/dataLibrary/mREList',
active: false,
},
{
name: 'SDN清单事件',
path: '/dataLibrary/sDNListEvent',
active: false,
},
{
name: '涉军企业清单事件',
path: '/dataLibrary/mREListEvent',
active: false,
},
]
},
{
name: '市场准入限制',
icon: Icon7,
active: false,
isExpanded: false,
children: [
{
name: '337调查',
path: '/dataLibrary/case337',
active: false,
},
{
name: '232调查',
path: '/dataLibrary/case232',
active: false,
},
{
name: '301调查',
path: '/dataLibrary/case301',
active: false,
},
]
},
// {
// name: '规则限制',
// icon: Icon8,
// active: false,
// isExpanded: false,
// children: [
// ]
// },
{
name: '美国科技人物观点',
icon: Icon9,
active: false,
isExpanded: false,
children: [
{
name: '国会议员',
path: '/dataLibrary/congressMan',
active: false,
},
{
name: '科技企业领袖',
path: '/dataLibrary/technologyLeader',
active: false,
},
{
name: '机构主官',
path: '/dataLibrary/minister',
active: false,
},
{
name: '智库研究人员',
path: '/dataLibrary/thinkTankResearcher',
active: false,
},
]
},
{
name: '美国主要创新主体',
icon: Icon10,
active: false,
isExpanded: false,
children: [
{
name: '科技企业',
path: '/dataLibrary/technologyCompany',
active: false,
},
{
name: '研究型大学',
path: '/dataLibrary/researchUniversity',
active: false,
},
{
name: '重点实验室',
path: '/dataLibrary/keyLab',
active: false,
},
]
},
// {
// name: '美国科研资助体系',
// icon: Icon11,
// active: false,
// isExpanded: false,
// children: [
// {
// name: '美国科研资助体系1',
// active: false,
// },
// {
// name: '美国科研资助体系2',
// active: false,
// },
// ]
// },
])
const handleSiderItem = (item) => {
siderList.value.forEach(val => {
val.active = false
val.isExpanded = false
if (val.children && val.children.length) {
val.children.forEach(vall => {
vall.active = false
})
}
})
item.isExpanded = true
item.active = true
if (item.path) {
router.push({
path: item.path
})
} else {
item.children[0].active = true
router.push({
path: item.children[0].path
})
}
}
{
name: "科技法案",
icon: Icon1,
active: false,
isExpanded: false,
children: [
{
name: "国会法案",
path: "/dataLibrary/countryBill",
active: false
},
{
name: "州法案",
path: "/dataLibrary/stateBill",
active: false
}
]
},
{
name: "科技政令",
path: "/dataLibrary/dataDecree",
icon: Icon2,
active: false,
isExpanded: false,
children: []
},
{
name: "美国科技智库",
path: "/dataLibrary/dataThinkTank",
icon: Icon3,
active: false,
isExpanded: false,
children: []
},
{
name: "出口管制",
icon: Icon4,
active: false,
isExpanded: false,
children: [
{
name: "实体清单",
path: "/dataLibrary/dataEntityList",
active: false
},
{
name: "商业管制清单",
path: "/dataLibrary/dataCommerceControlList",
active: false
},
{
name: "实体清单事件",
path: "/dataLibrary/dataEntityListEvent",
active: false
},
{
name: "商业管制清单事件",
path: "/dataLibrary/dataCommerceControlListEvent",
active: false
}
]
},
// {
// name: '合作限制',
// icon: Icon5,
// active: false,
// isExpanded: false,
// children: [
// ]
// },
{
name: "投融资限制",
icon: Icon6,
active: false,
isExpanded: false,
children: [
{
name: "SDN清单",
path: "/dataLibrary/sDNList",
active: false
},
{
name: "涉军企业清单",
path: "/dataLibrary/mREList",
active: false
},
{
name: "SDN清单事件",
path: "/dataLibrary/sDNListEvent",
active: false
},
{
name: "涉军企业清单事件",
path: "/dataLibrary/mREListEvent",
active: false
}
]
},
{
name: "市场准入限制",
icon: Icon7,
active: false,
isExpanded: false,
children: [
{
name: "337调查",
path: "/dataLibrary/case337",
active: false
},
{
name: "232调查",
path: "/dataLibrary/case232",
active: false
},
{
name: "301调查",
path: "/dataLibrary/case301",
active: false
}
]
},
// {
// name: '规则限制',
// icon: Icon8,
// active: false,
// isExpanded: false,
// children: [
// ]
// },
{
name: "美国科技人物观点",
icon: Icon9,
active: false,
isExpanded: false,
children: [
{
name: "国会议员",
path: "/dataLibrary/congressMan",
active: false
},
{
name: "科技企业领袖",
path: "/dataLibrary/technologyLeader",
active: false
},
{
name: "机构主官",
path: "/dataLibrary/minister",
active: false
},
{
name: "智库研究人员",
path: "/dataLibrary/thinkTankResearcher",
active: false
}
]
},
{
name: "美国主要创新主体",
icon: Icon10,
active: false,
isExpanded: false,
children: [
{
name: "科技企业",
path: "/dataLibrary/technologyCompany",
active: false
},
{
name: "研究型大学",
path: "/dataLibrary/researchUniversity",
active: false
},
{
name: "重点实验室",
path: "/dataLibrary/keyLab",
active: false
}
]
}
// {
// name: '美国科研资助体系',
// icon: Icon11,
// active: false,
// isExpanded: false,
// children: [
// {
// name: '美国科研资助体系1',
// active: false,
// },
// {
// name: '美国科研资助体系2',
// active: false,
// },
// ]
// },
]);
const handleSiderItem = item => {
siderList.value.forEach(val => {
val.active = false;
val.isExpanded = false;
if (val.children && val.children.length) {
val.children.forEach(vall => {
vall.active = false;
});
}
});
item.isExpanded = true;
item.active = true;
if (item.path) {
router.push({
path: item.path
});
} else {
item.children[0].active = true;
router.push({
path: item.children[0].path
});
}
};
const handleSiderSecondItem = (item) => {
siderList.value.forEach(item => {
if (item.children.length) {
item.children.forEach(val => {
val.active = false
})
}
})
item.active = true
router.push({
path: item.path
})
}
const handleSiderSecondItem = item => {
siderList.value.forEach(item => {
if (item.children.length) {
item.children.forEach(val => {
val.active = false;
});
}
});
item.active = true;
router.push({
path: item.path
});
};
const openedTabList = computed(() => {
const arr = tagsViewStore.visitedViews
return arr
})
const handleClickTab = (tab) => {
tagsViewStore.visitedViews.forEach(val => {
val.active = false
})
tab.active = true
router.push(
{
path: tab.path
}
)
siderList.value.forEach(val => {
val.active = false
val.isExpanded = false
if (val.children && val.children.length) {
val.children.forEach(vall => {
vall.active = false
})
}
})
siderList.value.forEach(val => {
if (!val.children.length) {
if (val.name === tab.meta.title) {
val.active = true
return
}
} else {
val.children.forEach(vall => {
if (vall.name === tab.meta.title) {
vall.active = true
val.active = true
val.isExpanded = true
return
}
})
}
})
}
const arr = tagsViewStore.visitedViews;
return arr;
});
const handleClickTab = tab => {
tagsViewStore.visitedViews.forEach(val => {
val.active = false;
});
tab.active = true;
router.push({
path: tab.path
});
siderList.value.forEach(val => {
val.active = false;
val.isExpanded = false;
if (val.children && val.children.length) {
val.children.forEach(vall => {
vall.active = false;
});
}
});
siderList.value.forEach(val => {
if (!val.children.length) {
if (val.name === tab.meta.title) {
val.active = true;
return;
}
} else {
val.children.forEach(vall => {
if (vall.name === tab.meta.title) {
vall.active = true;
val.active = true;
val.isExpanded = true;
return;
}
});
}
});
};
const timer = ref(null)
const timer = ref(null);
// 关闭当前标签页
const handleCloseCurTab = (tab, index) => {
let activeTab
if (!tab.active) {
tagsViewStore.delView(tab)
} else {
siderList.value.forEach(val => {
val.active = false
if (val.children && val.children.length) {
val.children.forEach(vall => {
vall.active = false
})
}
})
if (index === openedTabList.value.length - 1) {
tagsViewStore.delView(tab)
timer.value = setTimeout(() => {
tagsViewStore.visitedViews[tagsViewStore.visitedViews.length - 1].active = true
activeTab = tagsViewStore.visitedViews[tagsViewStore.visitedViews.length - 1]
router.push({
path: tagsViewStore.visitedViews[tagsViewStore.visitedViews.length - 1].path
})
siderList.value.forEach(val => {
if (!val.children.length) {
if (val.name === activeTab.meta.title) {
val.active = true
return
}
} else {
val.children.forEach(vall => {
if (vall.name === activeTab.meta.title) {
vall.active = true
val.active = true
return
}
})
}
})
})
} else {
tagsViewStore.delView(tab)
tagsViewStore.visitedViews[index].active = true
activeTab = tagsViewStore.visitedViews[index]
router.push({
path: tagsViewStore.visitedViews[index].path
})
siderList.value.forEach(val => {
if (!val.children.length) {
if (val.name === activeTab.meta.title) {
val.active = true
return
}
} else {
val.children.forEach(vall => {
if (vall.name === activeTab.meta.title) {
vall.active = true
val.active = true
return
}
})
}
})
}
}
}
let activeTab;
if (!tab.active) {
tagsViewStore.delView(tab);
} else {
siderList.value.forEach(val => {
val.active = false;
if (val.children && val.children.length) {
val.children.forEach(vall => {
vall.active = false;
});
}
});
if (index === openedTabList.value.length - 1) {
tagsViewStore.delView(tab);
timer.value = setTimeout(() => {
tagsViewStore.visitedViews[tagsViewStore.visitedViews.length - 1].active = true;
activeTab = tagsViewStore.visitedViews[tagsViewStore.visitedViews.length - 1];
router.push({
path: tagsViewStore.visitedViews[tagsViewStore.visitedViews.length - 1].path
});
siderList.value.forEach(val => {
if (!val.children.length) {
if (val.name === activeTab.meta.title) {
val.active = true;
return;
}
} else {
val.children.forEach(vall => {
if (vall.name === activeTab.meta.title) {
vall.active = true;
val.active = true;
return;
}
});
}
});
});
} else {
tagsViewStore.delView(tab);
tagsViewStore.visitedViews[index].active = true;
activeTab = tagsViewStore.visitedViews[index];
router.push({
path: tagsViewStore.visitedViews[index].path
});
siderList.value.forEach(val => {
if (!val.children.length) {
if (val.name === activeTab.meta.title) {
val.active = true;
return;
}
} else {
val.children.forEach(vall => {
if (vall.name === activeTab.meta.title) {
vall.active = true;
val.active = true;
return;
}
});
}
});
}
}
};
const handleClickToolBox = () => {
ElMessage.warning("当前功能正在开发中,敬请期待!");
ElMessage.warning("当前功能正在开发中,敬请期待!");
};
onMounted(() => {
const path = route.path
console.log(decodeURI(route.fullPath));
switch (path) {
case '/dataLibrary/countryBill':
siderList.value[0].active = true
siderList.value[0].isExpanded = true
siderList.value[0].children[0].active = true
break
case '/dataLibrary/stateBill':
siderList.value[0].active = true
siderList.value[0].isExpanded = true
siderList.value[0].children[1].active = true
break
case '/dataLibrary/dataDecree':
siderList.value[1].active = true
break
case '/dataLibrary/dataThinkTank':
siderList.value[2].active = true
break
case '/dataLibrary/dataEntityList':
siderList.value[3].active = true
siderList.value[3].isExpanded = true
siderList.value[3].children[0].active = true
break
case '/dataLibrary/dataCommerceControlList':
siderList.value[3].active = true
siderList.value[3].isExpanded = true
siderList.value[3].children[1].active = true
break
case '/dataLibrary/dataEntityListEvent':
siderList.value[3].active = true
siderList.value[3].isExpanded = true
siderList.value[3].children[2].active = true
break
case '/dataLibrary/dataCommerceControlListEvent':
siderList.value[3].active = true
siderList.value[3].isExpanded = true
siderList.value[3].children[3].active = true
break
case '/dataLibrary/sDNList':
siderList.value[4].active = true
siderList.value[4].isExpanded = true
siderList.value[4].children[0].active = true
break
case '/dataLibrary/mREList':
siderList.value[4].active = true
siderList.value[4].isExpanded = true
siderList.value[4].children[1].active = true
break
case '/dataLibrary/sDNListEvent':
siderList.value[4].active = true
siderList.value[4].isExpanded = true
siderList.value[4].children[2].active = true
break
case '/dataLibrary/mREListEvent':
siderList.value[4].active = true
siderList.value[4].isExpanded = true
siderList.value[4].children[3].active = true
break
case '/dataLibrary/case337':
siderList.value[5].active = true
siderList.value[5].isExpanded = true
siderList.value[5].children[0].active = true
break
case '/dataLibrary/case232':
siderList.value[5].active = true
siderList.value[5].isExpanded = true
siderList.value[5].children[1].active = true
break
case '/dataLibrary/case301':
siderList.value[5].active = true
siderList.value[5].isExpanded = true
siderList.value[5].children[2].active = true
break
case '/dataLibrary/congressMan':
siderList.value[6].active = true
siderList.value[6].isExpanded = true
siderList.value[6].children[0].active = true
break
case '/dataLibrary/technologyLeader':
siderList.value[6].active = true
siderList.value[6].isExpanded = true
siderList.value[6].children[1].active = true
break
case '/dataLibrary/minister':
siderList.value[6].active = true
siderList.value[6].isExpanded = true
siderList.value[6].children[2].active = true
break
case '/dataLibrary/thinkTankResearcher':
siderList.value[6].active = true
siderList.value[6].isExpanded = true
siderList.value[6].children[3].active = true
break
case '/dataLibrary/technologyCompany':
siderList.value[7].active = true
siderList.value[7].isExpanded = true
siderList.value[7].children[0].active = true
break
case '/dataLibrary/researchUniversity':
siderList.value[7].active = true
siderList.value[7].isExpanded = true
siderList.value[7].children[1].active = true
break
case '/dataLibrary/keyLab':
siderList.value[7].active = true
siderList.value[7].isExpanded = true
siderList.value[7].children[2].active = true
break
}
})
const path = route.path;
console.log(decodeURI(route.fullPath));
switch (path) {
case "/dataLibrary/countryBill":
siderList.value[0].active = true;
siderList.value[0].isExpanded = true;
siderList.value[0].children[0].active = true;
break;
case "/dataLibrary/stateBill":
siderList.value[0].active = true;
siderList.value[0].isExpanded = true;
siderList.value[0].children[1].active = true;
break;
case "/dataLibrary/dataDecree":
siderList.value[1].active = true;
break;
case "/dataLibrary/dataThinkTank":
siderList.value[2].active = true;
break;
case "/dataLibrary/dataEntityList":
siderList.value[3].active = true;
siderList.value[3].isExpanded = true;
siderList.value[3].children[0].active = true;
break;
case "/dataLibrary/dataCommerceControlList":
siderList.value[3].active = true;
siderList.value[3].isExpanded = true;
siderList.value[3].children[1].active = true;
break;
case "/dataLibrary/dataEntityListEvent":
siderList.value[3].active = true;
siderList.value[3].isExpanded = true;
siderList.value[3].children[2].active = true;
break;
case "/dataLibrary/dataCommerceControlListEvent":
siderList.value[3].active = true;
siderList.value[3].isExpanded = true;
siderList.value[3].children[3].active = true;
break;
case "/dataLibrary/sDNList":
siderList.value[4].active = true;
siderList.value[4].isExpanded = true;
siderList.value[4].children[0].active = true;
break;
case "/dataLibrary/mREList":
siderList.value[4].active = true;
siderList.value[4].isExpanded = true;
siderList.value[4].children[1].active = true;
break;
case "/dataLibrary/sDNListEvent":
siderList.value[4].active = true;
siderList.value[4].isExpanded = true;
siderList.value[4].children[2].active = true;
break;
case "/dataLibrary/mREListEvent":
siderList.value[4].active = true;
siderList.value[4].isExpanded = true;
siderList.value[4].children[3].active = true;
break;
case "/dataLibrary/case337":
siderList.value[5].active = true;
siderList.value[5].isExpanded = true;
siderList.value[5].children[0].active = true;
break;
case "/dataLibrary/case232":
siderList.value[5].active = true;
siderList.value[5].isExpanded = true;
siderList.value[5].children[1].active = true;
break;
case "/dataLibrary/case301":
siderList.value[5].active = true;
siderList.value[5].isExpanded = true;
siderList.value[5].children[2].active = true;
break;
case "/dataLibrary/congressMan":
siderList.value[6].active = true;
siderList.value[6].isExpanded = true;
siderList.value[6].children[0].active = true;
break;
case "/dataLibrary/technologyLeader":
siderList.value[6].active = true;
siderList.value[6].isExpanded = true;
siderList.value[6].children[1].active = true;
break;
case "/dataLibrary/minister":
siderList.value[6].active = true;
siderList.value[6].isExpanded = true;
siderList.value[6].children[2].active = true;
break;
case "/dataLibrary/thinkTankResearcher":
siderList.value[6].active = true;
siderList.value[6].isExpanded = true;
siderList.value[6].children[3].active = true;
break;
case "/dataLibrary/technologyCompany":
siderList.value[7].active = true;
siderList.value[7].isExpanded = true;
siderList.value[7].children[0].active = true;
break;
case "/dataLibrary/researchUniversity":
siderList.value[7].active = true;
siderList.value[7].isExpanded = true;
siderList.value[7].children[1].active = true;
break;
case "/dataLibrary/keyLab":
siderList.value[7].active = true;
siderList.value[7].isExpanded = true;
siderList.value[7].children[2].active = true;
break;
}
});
onBeforeUnmount(() => {
if(timer.value) {
clearTimeout(timer.value)
}
})
if (timer.value) {
clearTimeout(timer.value);
}
});
</script>
<style lang="scss">
.data-library-wrapper {
width: 100%;
height: 100%;
overflow: hidden;
// background: orange;
.data-library-header {
height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 37px 0 24px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: linear-gradient(180deg, rgba(246, 250, 255, 0.8) 0%, rgba(255, 255, 255, 0.8) 100%);
.header-left {
display: flex;
gap: 23px;
align-items: center;
.icon {
width: 30px;
height: 30px;
img {
width: 100%;
height: 100%;
}
}
.title {
color: var(--color-primary-100);
}
}
.header-right {
display: flex;
.info-box {
display: flex;
align-items: center;
.mail {
width: 32px;
height: 32px;
margin-right: 14px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
.user {
width: 32px;
height: 32px;
margin-right: 11px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
.name {
width: 48px;
height: 30px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
}
}
}
}
.data-library-main {
height: 100%;
background: #F7F8F9;
display: flex;
.data-library-sider {
width: 320px;
background: rgb(255, 255, 255);
border-right: 1px solid rgba(234, 236, 238, 1);
.sider-item {
height: 54px;
padding: 0 26px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
display: flex;
gap: 12px;
align-items: center;
cursor: pointer;
.sider-name {
width: 207px;
&:hover {
color: var(--color-primary-100);
}
}
.sider-name-active {
color: var(--color-primary-100);
}
}
.sider-second-item {
height: 54px;
padding: 15px 24px 15px 60px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
cursor: pointer;
&:hover {
background: var(--color-primary-10);
color: var(--color-primary-100);
}
}
.sider-second-item-acitve {
background: var(--color-primary-10);
color: var(--color-primary-100);
border-right: 4px solid var(--color-primary-100);
}
}
.data-library-content {
width: 1600px;
.tab-box {
width: 1600px;
height: 48px;
background: rgba(255, 255, 255);
border-bottom: 2px solid var(--bg-black-5);
display: flex;
overflow: hidden;
.tab-item {
// height: 46px;
white-space: nowrap;
/* 强制文字不换行 */
overflow: hidden;
/* 隐藏溢出的文字 */
text-overflow: ellipsis;
/* 显示省略号 */
display: flex;
flex-wrap: nowrap;
gap: 8px;
align-items: center;
padding: 0 12px 0 16px;
border-bottom: 2px solid var(--bg-white-100);
cursor: pointer;
// animation: all ease 0.5s;
&:hover {
flex: 0 0 auto;
/* 不再压缩 */
/* 或者设定一个固定宽度 */
/* width: 150px; */
z-index: 10;
/* 提高层级 */
// box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
.text {
// width: 150px;
color: var(--color-primary-100);
}
}
.text {
/* 关键属性2: 处理内部文字溢出 */
white-space: nowrap;
/* 强制文字不换行 */
overflow: hidden;
/* 隐藏溢出的文字 */
text-overflow: ellipsis;
/* 显示省略号 */
}
.text-active {
color: var(--color-primary-100);
}
.icon {
width: 16px;
height: 16px;
&:hover {
border-radius: 8px;
background: var(--color-primary-10);
}
img {
width: 100%;
height: 100%;
}
}
}
.tab-item-active {
border-bottom: 2px solid var(--color-primary-100) !important;
}
}
.main-box {
width: 1600px;
height: calc(100% - 48px);
overflow: hidden;
overflow-y: auto;
}
.select-box {
width: 1568px;
height: 112px;
border-radius: 10px;
background: rgb(255, 255, 255);
border: 1px solid var(--bg-black-5);
margin: 16px auto;
}
.info-box {
margin: 0 auto;
width: 1568px;
height: 30px;
display: flex;
justify-content: space-between;
}
.switch-box {
width: 160px;
border-radius: 20px;
border: 1px solid var(--color-primary-100);
height: 30px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
.num-box {
color: var(--color-red-100);
}
.content-box {
margin: 0 auto;
margin-top: 16px;
width: 1568px;
height: 766px;
border-radius: 10px;
background: rgba(255, 255, 255);
border: 1px solid var(--bg-black-5);
}
}
}
width: 100%;
height: 100%;
overflow: hidden;
// background: orange;
.data-library-header {
height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 37px 0 24px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: linear-gradient(180deg, rgba(246, 250, 255, 0.8) 0%, rgba(255, 255, 255, 0.8) 100%);
.header-left {
display: flex;
gap: 23px;
align-items: center;
.icon {
width: 30px;
height: 30px;
img {
width: 100%;
height: 100%;
}
}
.title {
color: var(--color-primary-100);
}
}
.header-right {
display: flex;
.info-box {
display: flex;
align-items: center;
.mail {
width: 32px;
height: 32px;
margin-right: 14px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
.user {
width: 32px;
height: 32px;
margin-right: 11px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
.name {
width: 48px;
height: 30px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
}
}
}
}
.data-library-main {
height: 100%;
background: #f7f8f9;
display: flex;
.data-library-sider {
width: 320px;
background: rgb(255, 255, 255);
border-right: 1px solid rgba(234, 236, 238, 1);
.sider-item {
height: 54px;
padding: 0 26px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
display: flex;
gap: 12px;
align-items: center;
cursor: pointer;
.sider-name {
width: 207px;
&:hover {
color: var(--color-primary-100);
}
}
.sider-name-active {
color: var(--color-primary-100);
}
}
.sider-second-item {
height: 54px;
padding: 15px 24px 15px 60px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
cursor: pointer;
&:hover {
background: var(--color-primary-10);
color: var(--color-primary-100);
}
}
.sider-second-item-acitve {
background: var(--color-primary-10);
color: var(--color-primary-100);
border-right: 4px solid var(--color-primary-100);
}
}
.data-library-content {
width: 1600px;
.tab-box {
width: 1600px;
height: 48px;
background: rgba(255, 255, 255);
border-bottom: 2px solid var(--bg-black-5);
display: flex;
overflow: hidden;
.tab-item {
// height: 46px;
white-space: nowrap;
/* 强制文字不换行 */
overflow: hidden;
/* 隐藏溢出的文字 */
text-overflow: ellipsis;
/* 显示省略号 */
display: flex;
flex-wrap: nowrap;
gap: 8px;
align-items: center;
padding: 0 12px 0 16px;
border-bottom: 2px solid var(--bg-white-100);
cursor: pointer;
// animation: all ease 0.5s;
&:hover {
flex: 0 0 auto;
/* 不再压缩 */
/* 或者设定一个固定宽度 */
/* width: 150px; */
z-index: 10;
/* 提高层级 */
// box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
.text {
// width: 150px;
color: var(--color-primary-100);
}
}
.text {
/* 关键属性2: 处理内部文字溢出 */
white-space: nowrap;
/* 强制文字不换行 */
overflow: hidden;
/* 隐藏溢出的文字 */
text-overflow: ellipsis;
/* 显示省略号 */
}
.text-active {
color: var(--color-primary-100);
}
.icon {
width: 16px;
height: 16px;
&:hover {
border-radius: 8px;
background: var(--color-primary-10);
}
img {
width: 100%;
height: 100%;
}
}
}
.tab-item-active {
border-bottom: 2px solid var(--color-primary-100) !important;
}
}
.main-box {
width: 1600px;
height: calc(100% - 48px);
overflow: hidden;
overflow-y: auto;
}
.select-box {
width: 1568px;
height: 112px;
border-radius: 10px;
background: rgb(255, 255, 255);
border: 1px solid var(--bg-black-5);
margin: 16px auto;
}
.info-box {
margin: 0 auto;
width: 1568px;
height: 30px;
display: flex;
justify-content: space-between;
}
.switch-box {
width: 160px;
border-radius: 20px;
border: 1px solid var(--color-primary-100);
height: 30px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
.num-box {
color: var(--color-red-100);
}
.content-box {
margin: 0 auto;
margin-top: 16px;
width: 1568px;
height: 766px;
border-radius: 10px;
background: rgba(255, 255, 255);
border: 1px solid var(--bg-black-5);
}
}
}
}
</style>
\ No newline at end of file
</style>
<template>
<div class="home-wrapper">
<!-- <div class="search-header" v-show="isShow">
<div class="home-main-header-center">
<el-input v-model="searchExportControlText" @keyup.enter="handleSearch" style="width: 800px; height: 100%"
placeholder="搜索出口管制" />
<div class="search">
<div class="search-icon">
<img src="@/assets/icons/search-icon.png" alt="" />
</div>
<div class="search-text" @click="handleSearch">搜索</div>
</div>
</div>
<div class="home-main-header-btn-box">
<div class="btn" @click="handleToPosi('position1')">
<div class="btn-text">{{ "最新动态" }}</div>
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
<div class="btn" @click="handleToPosi('position2')">
<div class="btn-text">{{ "资讯要闻" }}</div>
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
<div class="btn" @click="handleToPosi('position3')">
<div class="btn-text">{{ "数据总览" }}</div>
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
<div class="btn" @click="handleToPosi('position4')">
<div class="btn-text">{{ "资源库" }}</div>
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
</div>
</div> -->
<!-- <div class="home-header" v-show="!isShow">
<div class="header-left">
<HeaderMenu></HeaderMenu>
</div>
<div class="header-right">
<headerInfo curTitleName="出口管制"></headerInfo>
</div>
</div> -->
<div class="home-main" ref="homeMainRef">
<div class="home-top-bg"></div>
<div class="home-main-header">
......@@ -65,7 +18,7 @@
:subtitle="item.nameAbbr"
:description="item.description"
:quantity="item.postCount"
unit="个"
:unit="item.unit"
:color="infoListColor[index]"
@click="handleToEntityListNoId(item)"
/>
......@@ -271,15 +224,15 @@
</custom-container> -->
</div>
<el-row :gutter="20" style="width: 1600px; margin: 0 auto; height: 466px; margin-top: 64px">
<el-row :gutter="20" style="width: 1600px; margin: 0 auto; height: 510px; margin-top: 64px">
<CustomTitle id="position3" title="数据总览" />
<el-col :span="24">
<custom-container title="发布频度" :titleIcon="box3Icon" height="380px">
<custom-container title="发布频次统计" :titleIcon="box3Icon" height="420px">
<template #default>
<div class="box3">
<div class="box3-content">
<div class="box3-content-title">实体清单发布频</div>
<el-table :data="tableData1" stripe style="width: 100%">
<div class="box3-content-title">实体清单发布频次统计</div>
<el-table :data="entityListReleaseFreq" stripe style="width: 100%">
<el-table-column prop="year" label="年份" width="200" />
<el-table-column label="发布次数" width="300">
<template #default="scope">
......@@ -298,17 +251,28 @@
<div
style="display: flex; justify-content: center; align-items: center; gap: 5px"
>
<el-tag v-for="tag in scope.row.tags" :key="tag" :type="getTagType(tag)">{{
<AreaTag v-for="tag in scope.row.tags" :key="tag" :tagName="tag" />
<!-- <el-tag v-for="tag in scope.row.tags" :key="tag" :type="getTagType(tag)">{{
tag
}}</el-tag>
}}</el-tag> -->
</div>
</template>
</el-table-column>
</el-table>
<div class="data-origin-box">
<div class="data-origin-icon">
<img :src="tipsIcon" alt="" />
</div>
<div class="data-origin-text">美国商务部发布实体清单的频次,数据来源:美国商务部官网</div>
</div>
<div class="ai-pane">
<AiButton />
<AiPane :aiContent="entityListReleaseFreqChart.interpretation" />
</div>
</div>
<div class="box3-content">
<div class="box3-content-title">商业管制清单(CCL)更新频度</div>
<el-table :data="tableData2" stripe style="width: 100%">
<div class="box3-content-title">商业管制清单发布频次统计</div>
<el-table :data="commerceControlListReleaseFreq" stripe style="width: 100%">
<el-table-column prop="year" label="年份" width="200" />
<el-table-column label="发布次数" width="300">
<template #default="scope">
......@@ -334,10 +298,22 @@
</template>
</el-table-column>
</el-table>
<div class="data-origin-box">
<div class="data-origin-icon">
<img :src="tipsIcon" alt="" />
</div>
<div class="data-origin-text">
美国商务部发布商业管制清单的频次,数据来源:美国商务部官网
</div>
</div>
<div class="ai-pane">
<AiButton />
<AiPane :aiContent="commerceControlListReleaseFreqChart.interpretation" />
</div>
</div>
<div class="box3-content" style="display: none">
<div class="box3-content-title">关键与新兴技术清单(CETs)</div>
<el-table :data="tableData1" stripe style="width: 100%">
<el-table :data="entityListReleaseFreq" stripe style="width: 100%">
<el-table-column prop="year" label="年份" width="100" />
<el-table-column label="发布次数" width="180">
<template #default="scope">
......@@ -370,7 +346,7 @@
<el-row :gutter="20" style="width: 1600px; margin: 0 auto; height: 540px; margin-top: 16px">
<el-col :span="8">
<custom-container title="实体领域分布" :titleIcon="radarIcon" height="540px">
<custom-container title="实体清单领域分布情况" :titleIcon="radarIcon" height="540px">
<template #header-right>
<el-checkbox v-model="domainChecked" label="50%规则" size="large" />
</template>
......@@ -380,7 +356,7 @@
<div class="data-origin-icon">
<img :src="tipsIcon" alt="" />
</div>
<div class="data-origin-text">实体领域分布情况,数据来源:美国各行政机构官网</div>
<div class="data-origin-text">进入实体清单的中国实体领域分布情况,数据来源:美国商务部官网</div>
</div>
<div class="ai-pane">
<AiButton />
......@@ -405,7 +381,7 @@
<div class="data-origin-icon">
<img :src="tipsIcon" alt="" />
</div>
<div class="data-origin-text">实体清单数量增长趋势情况,数据来源:美国各行政机构官网</div>
<div class="data-origin-text">进入实体清单的中国实体数量变化趋势,数据来源:美国商务部官网</div>
</div>
<div class="ai-pane">
<AiButton />
......@@ -525,10 +501,13 @@
<el-table-column prop="domains" label="涉及领域" min-width="150">
<template #default="scope">
<div class="domain-tags">
<AreaTag v-for="tag in scope.row.domains" :key="tag" :tagName="tag" />
</div>
<!-- <div class="domain-tags">
<el-tag v-for="tag in scope.row.domains" :key="tag" :type="getTagType(tag)">{{
tag
}}</el-tag>
</div>
</div> -->
</template>
</el-table-column>
......@@ -737,6 +716,7 @@ import EChart from "@/components/Chart/index.vue";
import tipsIcon from "./assets/icons/info-icon.png";
import AiButton from "@/components/base/Ai/AiButton/index.vue";
import AiPane from "@/components/base/Ai/AiPane/index.vue";
import AreaTag from "@/components/base/AreaTag/index.vue";
import { useChartInterpretation } from "@/views/exportControl/utils/common";
const sanctionCountChart = useChartInterpretation();
import { TAGTYPE } from "@/public/constant";
......@@ -746,6 +726,8 @@ const gotoCompanyPages = useGotoCompanyPages();
const gotoNewsDetail = useGotoNewsDetail();
const trendChart = useChartInterpretation();
const radarChart = useChartInterpretation();
const entityListReleaseFreqChart = useChartInterpretation();
const commerceControlListReleaseFreqChart = useChartInterpretation();
import { useRouter } from "vue-router";
......@@ -946,9 +928,9 @@ const trendOption = ref({});
const trendChecked = ref(false);
const selectedEntityId = ref(1);
// 发布频度
const tableData1 = ref([]);
const entityListReleaseFreq = ref([]);
// CCL发布频度
const tableData2 = ref([]);
const commerceControlListReleaseFreq = ref([]);
// 历次制裁过程
const sanctionProcessList = ref([]);
const sanctionPage = ref(1);
......@@ -972,7 +954,12 @@ onMounted(async () => {
]);
// 交换第二个和第三个元素
[dataCount[1], dataCount[2]] = [dataCount[2], dataCount[1]];
infoList.value = dataCount.slice(0, 2);
infoList.value = dataCount.slice(0, 2).map((item, idx) => {
return {
...item,
unit: idx == 0 ? "家" : "项"
};
});
allSanTypeIds.value = infoList.value.map(item => item.id);
resourceTabs.value = infoList.value.map(item => ({
label: item.nameZh,
......@@ -995,7 +982,7 @@ onMounted(async () => {
const maxCountItem1 = _.maxBy(cclList1, "count");
const maxCountForList1 = maxCountItem1 ? maxCountItem1.count : 0;
tableData1.value = _.map(list, item => {
entityListReleaseFreq.value = _.map(list, item => {
return {
year: item.year,
num: item.count,
......@@ -1003,7 +990,12 @@ onMounted(async () => {
tags: item.domain
};
});
tableData2.value = _.map(cclList1, item => {
entityListReleaseFreqChart.interpret({
type: "柱状图",
name: "美国商务部发布实体清单的频次",
data: entityListReleaseFreq.value
});
commerceControlListReleaseFreq.value = _.map(cclList1, item => {
return {
year: item.year,
num: item.count,
......@@ -1011,6 +1003,11 @@ onMounted(async () => {
tags: item.domain
};
});
commerceControlListReleaseFreqChart.interpret({
type: "柱状图",
name: "美国商务部发布商业管制清单的频次",
data: commerceControlListReleaseFreq.value
});
// 获取趋势图数据
await fetchTrendData();
......@@ -1327,7 +1324,7 @@ const fetchRadarData = async checked => {
}
};
});
radarChart.interpret({ type: "雷达图", name: "实体领域分布", data: data });
radarChart.interpret({ type: "雷达图", name: "实体清单领域分布情况", data: data });
}
} catch (error) {
console.error("获取雷达图数据失败:", error);
......@@ -1841,13 +1838,13 @@ const handleMediaClick = item => {
</script>
<style lang="scss" scoped>
* {
margin: 0;
padding: 0;
}
// * {
// margin: 0;
// padding: 0;
// }
:deep(.el-input__wrapper) {
box-shadow: none;
// box-shadow: none;
}
.home-header {
......@@ -2204,6 +2201,7 @@ const handleMediaClick = item => {
flex-direction: column;
// gap: 20px;
flex: 1;
position: relative;
}
.box3-content-title {
......@@ -3191,15 +3189,15 @@ const handleMediaClick = item => {
:deep(.el-input__wrapper) {
box-shadow: none;
border-radius: 10px;
// border-radius: 10px;
}
:deep(.el-input__wrapper:hover) {
box-shadow: none !important;
// box-shadow: none !important;
}
:deep(.el-input__wrapper.is-focus) {
box-shadow: none !important;
// box-shadow: none !important;
}
:deep(.el-table thead) {
......
......@@ -9,7 +9,7 @@
</div>
<div class="filters">
<el-checkbox v-model="viewNew" label="查看最近更新内容" />
<el-select v-model="currentCCLType" style="width: 388px; height: 32px; margin-right: 14px">
<el-select placeholder="全部类别" v-model="currentCCLType" style="width: 388px; height: 32px; margin-right: 14px">
<el-option v-for="item in CCLTypeList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</div>
......@@ -54,7 +54,12 @@
</div>
<div style="width: 100%" v-if="item.isExpand">
<div style="width: 100%" v-for="(element, index) in item.cclChildren" :key="index">
<div
style="width: 100%; position: relative"
v-for="(element, index) in item.cclChildren"
:key="index"
>
<div class="dot" v-if="element.changeFlag"></div>
<div class="list-desc">{{ element.cclCode }}. {{ element.cclTitleZh }}</div>
<div class="list-content" v-for="(ele, j) in element.cclChildren" :key="j">
......@@ -107,8 +112,8 @@ const getTypeList = async () => {
const res = await getECCNCategory();
if (res && res.code === 200) {
console.log("-----getTypeList", res.data);
CCLTypeList.value = res.data;
currentCCLType.value = CCLTypeList.value[0].id;
CCLTypeList.value = [{ id: "", name: "全部类别" }].concat(res.data);
currentCCLType.value = "";
}
} catch (error) {
console.error("获取类别字典失败:", error);
......@@ -150,20 +155,64 @@ const onlyChina = ref(false);
const viewNew = ref(true);
// 获取ccl清单列表
// const getCclList = async () => {
// let techDomains = [];
// const allTech = techFields.value.find(item => item.id === "all"); // ✅ 修正点1
// if (!allTech || !allTech.checked) {
// techDomains = techFields.value.filter(item => item.checked && item.id !== "all").map(item => item.id); // 注意:这里 map 的是 value,假设后端需要的是 value 字段
// }
// let controls = [];
// const allReason = controlReason.value.find(item => item.id === "all"); // ✅ 修正点2
// if (!allReason || !allReason.checked) {
// controls = controlReason.value.filter(item => item.checked && item.id !== "all").map(item => item.id);
// }
// // let techDomains = techFields.value.filter(item => item.checked).map(item => +item.id);
// // let controls = controlReason.value.filter(item => item.checked).map(item => +item.id);
// const params = {
// categoryCode: currentCCLType.value,
// techDomainIds: techDomains,
// keyword: searchKeyword.value || "",
// controlIds: controls,
// isLatest: viewNew.value,
// recordId: currentCCLVersion.value || ""
// };
// console.log("cclList参数:", params);
// try {
// const res = await getCclQuery(params);
// if (res && res.code === 200) {
// console.log("----getCclList", res.data);
// cclList.value = res.data;
// // 给数据添加isExpand字段
// cclList.value.forEach(item => {
// item.isExpand = true;
// item.cclChildren.forEach(ele => {
// ele.cclChildren.forEach(i => {
// i.isExpand = false;
// });
// });
// });
// }
// } catch (error) {
// console.error("获取ccl清单列表失败:", error);
// }
// };
// 获取 ccl 清单列表
const getCclList = async () => {
let techDomains = [];
const allTech = techFields.value.find(item => item.id === "all"); // ✅ 修正点1
const allTech = techFields.value.find(item => item.id === "all");
if (!allTech || !allTech.checked) {
techDomains = techFields.value.filter(item => item.checked && item.id !== "all").map(item => item.id); // 注意:这里 map 的是 value,假设后端需要的是 value 字段
techDomains = techFields.value.filter(item => item.checked && item.id !== "all").map(item => item.id);
}
let controls = [];
const allReason = controlReason.value.find(item => item.id === "all"); // ✅ 修正点2
const allReason = controlReason.value.find(item => item.id === "all");
if (!allReason || !allReason.checked) {
controls = controlReason.value.filter(item => item.checked && item.id !== "all").map(item => item.id);
}
// let techDomains = techFields.value.filter(item => item.checked).map(item => +item.id);
// let controls = controlReason.value.filter(item => item.checked).map(item => +item.id);
const params = {
categoryCode: currentCCLType.value,
techDomainIds: techDomains,
......@@ -172,89 +221,40 @@ const getCclList = async () => {
isLatest: viewNew.value,
recordId: currentCCLVersion.value || ""
};
console.log("cclList参数:", params);
try {
// const res = await getCclQuery(null);
const res = await getCclQuery(params);
// const res = {
// "code": 200,
// "message": "操作成功",
// "success": true,
// "data": [
// {
// "id": 1,
// "cclCode": "0",
// "cclTitle": "Nuclear Materials, Facilities and Equipment and Miscellaneous",
// "cclTitleZh": "核材料、设备设施及其他类似物项",
// "cclDescription": null,
// "cclDescriptionZh": null,
// "cclChildren": [
// {
// "id": 11,
// "cclCode": "A",
// "cclTitle": "Equipment, Assemblies and Components",
// "cclTitleZh": "设备、组件和部件",
// "cclDescription": null,
// "cclDescriptionZh": null,
// "cclChildren": [
// {
// "id": 1,
// "cclCode": "0A002",
// "cclTitle": "Power generating or propulsion equipment \"specially designed\" for use with space, marine or mobile \"nuclear reactors\". (These items are \"subject to the ITAR.\" See 22 CFR parts 120 through 130.)",
// "cclTitleZh": "专为太空、海洋或移动“核反应堆”设计的发电或推进设备。(这些项目“受 ITAR 约束”。参见 22 CFR 第 120 至 130 部分。)",
// "cclDescription": null,
// "cclDescriptionZh": null,
// "cclChildren": null
// },
// {
// "id": 2,
// "cclCode": "0A501",
// "cclTitle": "Firearms (except 0A502 shotguns, 0A506 semi-automatic rifles, 0A507 semi-automatic pistols, and 0A508 semi-automatic shotguns) and related commodities (except semi-automatic related commodities enumerated or otherwise described in Eccn 0A509 for Eccns 0A506, 0A507, or 0A508) as follows (see List of Items controlled).",
// "cclTitleZh": "火器(除 0A502 霰弹枪、0A506 半自动步枪、0A507 半自动手枪和 0A508 半自动霰弹枪外)及相关商品(除 Eccn 0A509 中列举或以其他方式描述的 Eccns 0A506、0A507 或 0A508 相关物品外),具体如下(参见管制物品列表)。",
// "cclDescription": "<p class=\"flush-paragraph-1\"> <span class=\"minor-caps\">License Requirements</span></p><p class=\"flush-paragraph-1\"><em>Reason for Control:</em> NS, RS, FC, UN, AT</p><div class=\"table-wrapper\"><div class=\"gpotbl_div\"><table border=\"1\" cellpadding=\"1\" cellspacing=\"1\" class=\"gpo_table\" frame=\"void\" width=\"100%\"><thead><tr><th class=\"center\">Control(s)</th><th class=\"center\">Country chart<br>(see Supp. No. 1 to part 738)</th></tr></thead><tbody><tr><td class=\"left\">NS applies to entire entry except 0A501.y</td><td class=\"left\">NS Column 1.</td></tr><tr><td class=\"left\">RS applies to entire entry except 0A501.y</td><td class=\"left\">RS Column 1.</td></tr><tr><td class=\"left\">FC applies to entire entry except 0A501.y</td><td class=\"left\">FC Column 1.</td></tr><tr><td class=\"left\">UN applies to entire entry</td><td class=\"left\">See § 746.1 of the EAR for UN controls.</td></tr><tr><td class=\"left\">AT applies to entire entry</td><td class=\"left\">AT Column 1.</td></tr></tbody></table></div></div><div class=\"note\"><div class=\"header\"><em>License Requirement Note:</em></div><p><em>In addition to using the Commerce Country Chart to determine license requirements, a license is required for exports and reexports of ECCN 0A501.y.7 firearms to the People's Republic of China.</em></p></div><p class=\"flush-paragraph-1\">List Based License Exceptions (See Part 740 for a Description of All License Exceptions)</p><p class=\"flush-paragraph-1\"><em>LVS:</em> $500 for 0A501.c, .d, and .x.</p><p class=\"flush-paragraph-1\">$500 for 0A501.c, .d, .e, and .x if the ultimate destination is Canada.</p><p class=\"flush-paragraph-1\"><em>GBS:</em> N/A</p><p class=\"flush-paragraph-1\"> <span class=\"minor-caps\">Special Conditions for STA</span></p><p class=\"flush-paragraph-1\">License Exception STA may not be used for ECCN 0A501.a, .b, .c, .d, or .e, to any of the destinations listed in Country Group A:5 or A:6 (See supplement no.1 to part 740 of the EAR). License Exception STA may not be used for any item in this entry to any of the destinations listed in Country Group A:6 (See Supplement No.1 to part 740 of the EAR).</p><p class=\"flush-paragraph-1\"> <span class=\"minor-caps\">List of Items Controlled</span></p><p class=\"flush-paragraph-1\"><em>Related Controls:</em> (1) See USML Category I for firearms that are fully automatic, and certain related parts, components, accessories, and attachments (including magazines with a capacity of greater than 50 rounds). (2) See ECCN 0A506 for semi-automatic rifles. (3) See ECCN 0A507 for semi-automatic pistols. (4) See ECCN 0A508 for semi-automatic shotguns and ECCN 0A502 for certain \"parts\" and \"components\" for semi-automatic shotguns that are not controlled by 0A509.a or .c. (5) See ECCN 0A509 for enumerated or otherwise described \"parts,\" \"components,\" devices, \"accessories,\" and \"attachments\" for ECCNs 0A506, 0A507, and 0A508. (6) See .d, .x, and .y of this entry for other \"parts,\" \"components,\" \"accessories,\" and \"attachments\" \"specially designed\" for 0A506 and 0A507, or 0A508. (7) See ECCN 0A502 for non-automatic shotguns and their \"parts\" and \"components\" that are subject to the EAR and for certain \"parts\" and \"components\" for semi-automatic shotguns that are not controlled by 0A509.a or .c. (8) See ECCN 0A504 and USML Category XII for controls on optical sighting devices.</p><p class=\"flush-paragraph-1\"><em>Related Definitions:</em> N/A.</p><p class=\"flush-paragraph\"><em>Items:</em></p><p>a. Non-automatic and non-semi-automatic firearms equal to .50 caliber (12.7 mm) or less.</p><div class=\"note\"><div class=\"header\"><em>Note 1 to paragraph 0A501.a:</em></div><p><em>'Combination pistols' are controlled under ECCN 0A501.a. A 'combination pistol' (a.k.a., a combination gun) has at least one rifled barrel and at least one smoothbore barrel (generally a shotgun style barrel).</em></p></div><div class=\"note\"><div class=\"header\"><em>Note 2 to paragraph 0A501.a:</em></div><p><em>Semi-automatic firearms</em> equal to .50 caliber (12.7 mm) or less <em>are controlled under ECCNs 0A506 and 0A507.</em></p></div><div class=\"note\"><div class=\"header\"><em>Technical Note to 0A501.a:</em></div><p><em>Firearms described in 0A501.a include those chambered for the .50 BMG cartridge.</em></p></div><p>b. Non-automatic and non-semi-automatic rifles, carbines, revolvers or pistols with a caliber greater than .50 inches (12.7 mm) but less than or equal to .72 inches (18.0 mm).</p><p>c. The following types of \"parts\" and \"components\" if \"specially designed\" for a commodity controlled by paragraph .a or .b of this entry or ECCNs 0A506 or 0A507, or USML Category I (unless otherwise enumerated or elsewhere specified on the USML or controlled under ECCN 0A509): Barrels, cylinders, barrel extensions, mounting blocks (trunnions), bolts, bolt carriers, operating rods, gas pistons, trigger housings, triggers, hammers/striker, sears, disconnectors, pistol grips that contain fire control \"parts\" or \"components\" (<em>e.g.,</em> triggers, hammers/striker, sears, disconnectors) and buttstocks that contain fire control \"parts\" or \"components.\"</p><div class=\"note\"><div class=\"header\"><em>Technical Note to 0A501.c:</em></div><p><em>Barrel blanks that have reached a stage in manufacturing in which they are either chambered or rifled are controlled by 0A501.c.</em></p></div><p>d. Detachable magazines with a capacity of 17 to 50 rounds \"specially designed\" for a commodity controlled by paragraph .a or .b of this entry or controlled by ECCNs 0A506 or 0A507.</p><div class=\"note\"><div class=\"header\"><em>Note 3 to paragraph 0A501.d</em></div><p><em>Magazines with a capacity of 16 rounds or less are controlled under 0A501.x; for magazines with a capacity greater than 50 rounds, see USML Category I. Magazines that hold only blank ammunition controlled under 0A505.d are controlled under 0A501.d or 0A501.x, depending on the magazine's capacity.</em></p></div><p>e. Receivers (frames) and \"complete breech mechanisms,\" including castings, forgings, stampings, or machined items thereof, \"specially designed\" for a commodity controlled by paragraph .a or .b of this entry.</p><div class=\"note\"><div class=\"header\"><em>Note 4 to 0A501.e:</em></div><p><em>Frames (receivers) under 0A501.e refers to any \"part\" or \"component\" of the firearm that has or is customarily marked with a serial number when required by law. This paragraph 0A501.e is synonymous with a \"part\" or \"component\" that is regulated by the Bureau of Alcohol, Tobacco, Firearms and Explosives (see <a href=\"https://www.govinfo.gov/link/uscode/18/921\" class=\"usc external\" target=\"_blank\" rel=\"noopener noreferrer\">18 U.S.C. 921(a)(3)</a>; <a href=\"https://www.ecfr.gov/current/title-27/part-447\" class=\"cfr external\">27 CFR parts 447</a>, <a href=\"https://www.ecfr.gov/current/title-27/part-478\" class=\"cfr external\">478</a>, and <a href=\"https://www.ecfr.gov/current/title-27/part-479\" class=\"cfr external\">479</a>,) as a firearm.</em></p></div><div class=\"note\"><div class=\"header\"><em>Note 5 to 0A501.e:</em></div><p><em>Frames (receivers) \"specially designed\" for semi-automatic firearms are controlled under ECCN 0A509.b or .c.</em></p></div><p>f. through w. [Reserved]</p><p>x. \"Parts\" and \"components\" that are \"specially designed\" for a commodity classified under paragraphs .a through .c of this entry, a commodity classified under ECCNs 0A506 or 0A507, or the USML and not elsewhere specified on the USML or CCL or controlled under ECCN 0A509.</p><p>y. Specific \"parts,\" \"components,\" \"accessories\" and \"attachments\" \"specially designed\" for a commodity subject to control in this ECCN, ECCNs 0A506, 0A507, or common to a defense article in USML Category I and not elsewhere specified in the USML or CCL as follows, and \"parts,\" \"components,\" \"accessories,\" and \"attachments\" \"specially designed\" therefor.</p><p>y.1. Stocks (including adjustable, collapsible, blades and braces), grips, handguards, or forends, that do not contain any fire control \"parts\" or \"components\" (<em>e.g.,</em> triggers, hammers/striker, sears, disconnectors);</p><p>y.2 through y.5. [Reserved]</p><p>y.6. Bayonets; and</p><p>y.7. Firearms manufactured from 1890 to 1898 and reproductions thereof.</p><div class=\"note\"><div class=\"header\"><em>Technical Note 1 to 0A501:</em></div><p><em>ECCN 0A501 includes \"parts\" and \"components\" that are not \"subject to the ITAR\" even though they are common to firearms described in ECCN 0A501 and to those firearms \"subject to the ITAR.\"</em></p></div><div class=\"note\"><div class=\"header\"><em>Technical Note 2 to 0A501:</em></div><p><em>A receiver with any other controlled \"part\" or \"component\" ( e.g., a barrel (0A501.c), or trigger guard (0A501.x), or stock (0A501.y.1)) is still controlled under 0A501.e.</em></p></div><div class=\"note\"><div class=\"header\"><em>Technical Note 3 to 0A501:</em></div><p><em>Blank firing adapters, which are attachments to semi-automatic and automatic firearms used in conjunction with blank cartridges for safety and functional reasons and used for firearm training purposes by police, military, sporting shooters, as well as in the movie industry, are designated as EAR99.</em></p></div><div class=\"note\"><div class=\"header\"><em>Note 6 to 0A501:</em></div><p><em>Antique firearms (i.e., those manufactured before 1890) and reproductions thereof, muzzle loading and black powder firearms except those designs based on centerfire weapons of a post 1937 design, BB guns, pellet rifles, paint ball, and all other air rifles are EAR99 commodities.</em></p></div><div class=\"note\"><div class=\"header\"><em>Note 7 to 0A501:</em></div><p><em>Muzzle loading and black powder firearms with a caliber less than 20 mm that were manufactured post 1937 that are used for hunting or sporting purposes that were not \"specially designed\" for military use and are not described on the USML nor controlled as shotguns under ECCN 0A502 are EAR99 commodities.</em></p></div><div class=\"note\"><div class=\"header\"><em>Note 8 to 0A501:</em></div><p><em>Scope mounts or accessory rails, iron sights, sling swivels, and butt plates or recoil pads that are subject to the EAR are designated as EAR99. These commodities have been determined to no longer warrant being \"specially designed\" for purposes of ECCN 0A501.</em></p></div><div class=\"note\"><div class=\"header\"><em>Note 9 to 0A501:</em></div><p><em>A kit, including a replacement or repair kit, of firearms \"parts\" or \"components\" customarily sold and exported together takes on the classification of the most restrictive \"part\" or \"component\" that is included in the kit. For example, a kit containing 0A501.y and .x \"parts,\" is controlled as a 0A501.x kit because the .x \"part\" is the most restrictive \"part\" included in the kit. A complete 0A501 firearm disassembled in a kit form is controlled as a firearm under 0A501.a, .b, or .y.7.</em></p></div>",
// "cclDescriptionZh": "<p class=\"flush-paragraph-1\"> <span class=\"minor-caps\">License Requirements</span></p><p class=\"flush-paragraph-1\"><em>Reason for Control:</em> NS, RS, FC, UN, AT</p><div class=\"table-wrapper\"><div class=\"gpotbl_div\"><table border=\"1\" cellpadding=\"1\" cellspacing=\"1\" class=\"gpo_table\" frame=\"void\" width=\"100%\"><thead><tr><th class=\"center\">控制原因</th><th class=\"center\">Country chart<br>(参见第738部分补充1号文)</th></tr></thead><tbody><tr><td class=\"left\">NS applies to entire entry except 0A501.y</td><td class=\"left\">NS Column 1.</td></tr><tr><td class=\"left\">RS applies to entire entry except 0A501.y</td><td class=\"left\">RS Column 1.</td></tr><tr><td class=\"left\">FC applies to entire entry except 0A501.y</td><td class=\"left\">FC Column 1.</td></tr><tr><td class=\"left\">UN applies to entire entry</td><td class=\"left\">See § 746.1 of the EAR for UN controls.</td></tr><tr><td class=\"left\">AT applies to entire entry</td><td class=\"left\">AT Column 1.</td></tr></tbody></table></div></div><div class=\"note\"><div class=\"header\"><em>License Requirement Note:</em></div><p><em>In addition to using the Commerce Country Chart to determine license requirements, a license is required for exports and reexports of ECCN 0A501.y.7 firearms to the People's Republic of China.</em></p></div><p class=\"flush-paragraph-1\">List Based License Exceptions (See Part 740 for a Description of All License Exceptions)</p><p class=\"flush-paragraph-1\"><em>LVS:</em> $500 for 0A501.c, .d, and .x.</p><p class=\"flush-paragraph-1\">$500 for 0A501.c, .d, .e, and .x if the ultimate destination is Canada.</p><p class=\"flush-paragraph-1\"><em>GBS:</em> N/A</p><p class=\"flush-paragraph-1\"> <span class=\"minor-caps\">Special Conditions for STA</span></p><p class=\"flush-paragraph-1\">License Exception STA may not be used for ECCN 0A501.a, .b, .c, .d, or .e, to any of the destinations listed in Country Group A:5 or A:6 (See supplement no.1 to part 740 of the EAR). License Exception STA may not be used for any item in this entry to any of the destinations listed in Country Group A:6 (See Supplement No.1 to part 740 of the EAR).</p><p class=\"flush-paragraph-1\"> <span class=\"minor-caps\">List of Items Controlled</span></p><p class=\"flush-paragraph-1\"><em>Related Controls:</em> (1) See USML Category I for firearms that are fully automatic, and certain related parts, components, accessories, and attachments (including magazines with a capacity of greater than 50 rounds). (2) See ECCN 0A506 for semi-automatic rifles. (3) See ECCN 0A507 for semi-automatic pistols. (4) See ECCN 0A508 for semi-automatic shotguns and ECCN 0A502 for certain \"parts\" and \"components\" for semi-automatic shotguns that are not controlled by 0A509.a or .c. (5) See ECCN 0A509 for enumerated or otherwise described \"parts,\" \"components,\" devices, \"accessories,\" and \"attachments\" for ECCNs 0A506, 0A507, and 0A508. (6) See .d, .x, and .y of this entry for other \"parts,\" \"components,\" \"accessories,\" and \"attachments\" \"specially designed\" for 0A506 and 0A507, or 0A508. (7) See ECCN 0A502 for non-automatic shotguns and their \"parts\" and \"components\" that are subject to the EAR and for certain \"parts\" and \"components\" for semi-automatic shotguns that are not controlled by 0A509.a or .c. (8) See ECCN 0A504 and USML Category XII for controls on optical sighting devices.</p><p class=\"flush-paragraph-1\"><em>Related Definitions:</em> N/A.</p><p class=\"flush-paragraph\"><em>Items:</em></p><p>a. Non-automatic and non-semi-automatic firearms equal to .50 caliber (12.7 mm) or less.</p><div class=\"note\"><div class=\"header\"><em>Note 1 to paragraph 0A501.a:</em></div><p><em>'Combination pistols' are controlled under ECCN 0A501.a. A 'combination pistol' (a.k.a., a combination gun) has at least one rifled barrel and at least one smoothbore barrel (generally a shotgun style barrel).</em></p></div><div class=\"note\"><div class=\"header\"><em>Note 2 to paragraph 0A501.a:</em></div><p><em>Semi-automatic firearms</em> equal to .50 caliber (12.7 mm) or less <em>are controlled under ECCNs 0A506 and 0A507.</em></p></div><div class=\"note\"><div class=\"header\"><em>Technical Note to 0A501.a:</em></div><p><em>Firearms described in 0A501.a include those chambered for the .50 BMG cartridge.</em></p></div><p>b. Non-automatic and non-semi-automatic rifles, carbines, revolvers or pistols with a caliber greater than .50 inches (12.7 mm) but less than or equal to .72 inches (18.0 mm).</p><p>c. The following types of \"parts\" and \"components\" if \"specially designed\" for a commodity controlled by paragraph .a or .b of this entry or ECCNs 0A506 or 0A507, or USML Category I (unless otherwise enumerated or elsewhere specified on the USML or controlled under ECCN 0A509): Barrels, cylinders, barrel extensions, mounting blocks (trunnions), bolts, bolt carriers, operating rods, gas pistons, trigger housings, triggers, hammers/striker, sears, disconnectors, pistol grips that contain fire control \"parts\" or \"components\" (<em>e.g.,</em> triggers, hammers/striker, sears, disconnectors) and buttstocks that contain fire control \"parts\" or \"components.\"</p><div class=\"note\"><div class=\"header\"><em>Technical Note to 0A501.c:</em></div><p><em>Barrel blanks that have reached a stage in manufacturing in which they are either chambered or rifled are controlled by 0A501.c.</em></p></div><p>d. Detachable magazines with a capacity of 17 to 50 rounds \"specially designed\" for a commodity controlled by paragraph .a or .b of this entry or controlled by ECCNs 0A506 or 0A507.</p><div class=\"note\"><div class=\"header\"><em>Note 3 to paragraph 0A501.d</em></div><p><em>Magazines with a capacity of 16 rounds or less are controlled under 0A501.x; for magazines with a capacity greater than 50 rounds, see USML Category I. Magazines that hold only blank ammunition controlled under 0A505.d are controlled under 0A501.d or 0A501.x, depending on the magazine's capacity.</em></p></div><p>e. Receivers (frames) and \"complete breech mechanisms,\" including castings, forgings, stampings, or machined items thereof, \"specially designed\" for a commodity controlled by paragraph .a or .b of this entry.</p><div class=\"note\"><div class=\"header\"><em>Note 4 to 0A501.e:</em></div><p><em>Frames (receivers) under 0A501.e refers to any \"part\" or \"component\" of the firearm that has or is customarily marked with a serial number when required by law. This paragraph 0A501.e is synonymous with a \"part\" or \"component\" that is regulated by the Bureau of Alcohol, Tobacco, Firearms and Explosives (see <a href=\"https://www.govinfo.gov/link/uscode/18/921\" class=\"usc external\" target=\"_blank\" rel=\"noopener noreferrer\">18 U.S.C. 921(a)(3)</a>; <a href=\"https://www.ecfr.gov/current/title-27/part-447\" class=\"cfr external\">27 CFR parts 447</a>, <a href=\"https://www.ecfr.gov/current/title-27/part-478\" class=\"cfr external\">478</a>, and <a href=\"https://www.ecfr.gov/current/title-27/part-479\" class=\"cfr external\">479</a>,) as a firearm.</em></p></div><div class=\"note\"><div class=\"header\"><em>Note 5 to 0A501.e:</em></div><p><em>Frames (receivers) \"specially designed\" for semi-automatic firearms are controlled under ECCN 0A509.b or .c.</em></p></div><p>f. through w. [Reserved]</p><p>x. \"Parts\" and \"components\" that are \"specially designed\" for a commodity classified under paragraphs .a through .c of this entry, a commodity classified under ECCNs 0A506 or 0A507, or the USML and not elsewhere specified on the USML or CCL or controlled under ECCN 0A509.</p><p>y. Specific \"parts,\" \"components,\" \"accessories\" and \"attachments\" \"specially designed\" for a commodity subject to control in this ECCN, ECCNs 0A506, 0A507, or common to a defense article in USML Category I and not elsewhere specified in the USML or CCL as follows, and \"parts,\" \"components,\" \"accessories,\" and \"attachments\" \"specially designed\" therefor.</p><p>y.1. Stocks (including adjustable, collapsible, blades and braces), grips, handguards, or forends, that do not contain any fire control \"parts\" or \"components\" (<em>e.g.,</em> triggers, hammers/striker, sears, disconnectors);</p><p>y.2 through y.5. [Reserved]</p><p>y.6. Bayonets; and</p><p>y.7. Firearms manufactured from 1890 to 1898 and reproductions thereof.</p><div class=\"note\"><div class=\"header\"><em>Technical Note 1 to 0A501:</em></div><p><em>ECCN 0A501 includes \"parts\" and \"components\" that are not \"subject to the ITAR\" even though they are common to firearms described in ECCN 0A501 and to those firearms \"subject to the ITAR.\"</em></p></div><div class=\"note\"><div class=\"header\"><em>Technical Note 2 to 0A501:</em></div><p><em>A receiver with any other controlled \"part\" or \"component\" ( e.g., a barrel (0A501.c), or trigger guard (0A501.x), or stock (0A501.y.1)) is still controlled under 0A501.e.</em></p></div><div class=\"note\"><div class=\"header\"><em>Technical Note 3 to 0A501:</em></div><p><em>Blank firing adapters, which are attachments to semi-automatic and automatic firearms used in conjunction with blank cartridges for safety and functional reasons and used for firearm training purposes by police, military, sporting shooters, as well as in the movie industry, are designated as EAR99.</em></p></div><div class=\"note\"><div class=\"header\"><em>Note 6 to 0A501:</em></div><p><em>Antique firearms (i.e., those manufactured before 1890) and reproductions thereof, muzzle loading and black powder firearms except those designs based on centerfire weapons of a post 1937 design, BB guns, pellet rifles, paint ball, and all other air rifles are EAR99 commodities.</em></p></div><div class=\"note\"><div class=\"header\"><em>Note 7 to 0A501:</em></div><p><em>Muzzle loading and black powder firearms with a caliber less than 20 mm that were manufactured post 1937 that are used for hunting or sporting purposes that were not \"specially designed\" for military use and are not described on the USML nor controlled as shotguns under ECCN 0A502 are EAR99 commodities.</em></p></div><div class=\"note\"><div class=\"header\"><em>Note 8 to 0A501:</em></div><p><em>Scope mounts or accessory rails, iron sights, sling swivels, and butt plates or recoil pads that are subject to the EAR are designated as EAR99. These commodities have been determined to no longer warrant being \"specially designed\" for purposes of ECCN 0A501.</em></p></div><div class=\"note\"><div class=\"header\"><em>Note 9 to 0A501:</em></div><p><em>A kit, including a replacement or repair kit, of firearms \"parts\" or \"components\" customarily sold and exported together takes on the classification of the most restrictive \"part\" or \"component\" that is included in the kit. For example, a kit containing 0A501.y and .x \"parts,\" is controlled as a 0A501.x kit because the .x \"part\" is the most restrictive \"part\" included in the kit. A complete 0A501 firearm disassembled in a kit form is controlled as a firearm under 0A501.a, .b, or .y.7.</em></p></div>",
// "cclChildren": null
// },
// {
// "id": 3,
// "cclCode": "0A502",
// "cclTitle": "Shotguns; shotguns \"parts\" and \"components,\" consisting of complete trigger mechanisms; magazines and magazine extension tubes; \"complete breech mechanisms;\" except: semi-automatic shotguns controlled under Eccn 0A508; certain \"parts,\" components,\" devices, \"accessories,\" and \"attachments\" for semi-automatic shotguns controlled under Eccn 0A509; equipment used to slaughter domestic animals or used exclusively to treat or tranquilize animals; and arms designed solely for signal, flare, or saluting use.",
// "cclTitleZh": "霰弹枪;霰弹枪“零件”和“组件”,由完整的扳机机构组成;弹药库和弹匣延长管;“完整的闭锁机构”;除外:根据 Eccn 0A508 控制的半自动霰弹枪;根据 Eccn 0A509 控制的某些半自动霰弹枪的“零件”、“组件”、“装置”、“配件”;用于屠宰家畜或专门用于治疗或镇静动物的设备;以及仅用于信号、照明或敬礼使用的武器。",
// "cclDescription": null,
// "cclDescriptionZh": null,
// "cclChildren": null
// }
// ]
// }
// ]
// }
// ]
// }
// cclList.value = res.data
// // 给数据添加isExpand字段
// cclList.value.forEach((item) => {
// item.isExpand = false
// item.cclChildren.forEach((ele) => {
// ele.cclChildren.forEach((i) => {
// i.isExpand = false
// })
// })
// })
if (res && res.code === 200) {
console.log("----getCclList", res.data);
cclList.value = res.data;
// 给数据添加isExpand字段
// ✅ 新增:处理 changeFlag 向上继承逻辑
cclList.value.forEach(item => {
item.isExpand = false;
item.isExpand = true;
item.changeFlag = false; // 初始化第一层
item.cclChildren.forEach(ele => {
ele.changeFlag = false; // 初始化第二层
ele.cclChildren.forEach(i => {
i.isExpand = false;
// 如果第三层有 changeFlag 为 true,标记第二层
if (i.changeFlag) {
ele.changeFlag = true;
}
});
// 如果第二层 changeFlag 为 true,标记第一层
if (ele.changeFlag) {
item.changeFlag = true;
}
});
});
console.log("----getCclList 11", cclList.value);
}
} catch (error) {
console.error("获取ccl清单列表失败:", error);
console.error("获取 ccl 清单列表失败:", error);
}
};
......@@ -387,10 +387,10 @@ onMounted(async () => {
</script>
<style scoped lang="scss">
* {
margin: 0;
padding: 0;
}
// * {
// margin: 0;
// padding: 0;
// }
.list-page {
width: 1601px;
......@@ -410,13 +410,13 @@ onMounted(async () => {
:deep(.el-input__wrapper) {
padding: 0 11px;
border: 1px solid rgba(0, 0, 0, 0.1);
// border: 1px solid rgba(0, 0, 0, 0.2);
background-color: #fff;
border-radius: 3px;
}
:deep(.el-input__inner) {
font-size: 16px;
// font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
......@@ -437,6 +437,21 @@ onMounted(async () => {
width: 160px;
height: 32px;
}
:deep(.el-select) {
.el-select__placeholder {
color: rgb(95, 101, 108); // 修改 placeholder 文字颜色
// font-size: 16px; // 修改字体大小
font-family: "Microsoft YaHei";
font-weight: 400;
}
.el-input__inner {
// font-size: 16px;
font-family: "Microsoft YaHei";
color: rgb(95, 101, 108);
}
}
}
}
......@@ -616,6 +631,17 @@ onMounted(async () => {
text-align: left;
}
}
.dot {
width: 8px;
height: 8px;
border-radius: 50%;
border: 2px solid rgb(206, 79, 81);
background-color: rgb(206, 79, 81);
z-index: 1;
position: absolute;
left: 10px;
top: 8px;
}
.list-desc {
margin-left: 28px;
......@@ -641,7 +667,7 @@ onMounted(async () => {
align-items: flex-start;
justify-content: space-around;
// padding: 9px 0px;
position: relative;
.code-zone {
width: 75px;
display: flex;
......@@ -656,6 +682,9 @@ onMounted(async () => {
border: 2px solid rgb(206, 79, 81);
background-color: rgb(206, 79, 81);
z-index: 1;
position: absolute;
left: 10px;
top: 20px;
}
.code {
......
......@@ -121,7 +121,7 @@
<div class="data-origin-icon">
<img :src="tipsIcon" alt="" />
</div>
<div class="data-origin-text">制裁实体数量变化情况,数据来源:美国各行政机构官网</div>
<div class="data-origin-text">进入实体清单的中国实体数量变化趋势,数据来源:美国商务部官网</div>
</div>
<div class="ai-pane">
<AiButton />
......@@ -130,7 +130,7 @@
</AnalysisBox>
</div>
<div class="main-item">
<AnalysisBox title="制裁实体地域分布情况">
<AnalysisBox title="制裁实体各省分布情况">
<template #header-btn>
<el-select v-model="regionTime" class="time-select" placeholder="请选择" @change="getRegionCountData">
<el-option v-for="item in timeOptions" :key="item.value" :label="item.label" :value="item.value" />
......@@ -170,7 +170,7 @@
<div class="data-origin-icon">
<img :src="tipsIcon" alt="" />
</div>
<div class="data-origin-text">制裁实体地域分布情况,数据来源:美国各行政机构官网</div>
<div class="data-origin-text">进入实体清单的中国实体各省分布情况,数据来源:美国商务部官网</div>
</div>
<div class="ai-pane">
<AiButton />
......@@ -202,7 +202,7 @@
<div class="data-origin-icon">
<img :src="tipsIcon" alt="" />
</div>
<div class="data-origin-text">制裁实体领域分布情况,数据来源:美国各行政机构官网</div>
<div class="data-origin-text">进入实体清单的中国实体领域分布情况,数据来源:美国商务部官网</div>
</div>
<div class="ai-pane">
<AiButton />
......@@ -234,7 +234,7 @@
<div class="data-origin-icon">
<img :src="tipsIcon" alt="" />
</div>
<div class="data-origin-text">制裁实体类型分布情况,数据来源:美国各行政机构官网</div>
<div class="data-origin-text">进入实体清单的中国实体类型分布情况,数据来源:美国商务部官网</div>
</div>
<div class="ai-pane">
<AiButton />
......@@ -357,7 +357,7 @@ const getRegionCountData = async () => {
}));
// Sort by value descending
rankData.value.sort((a, b) => b.value - a.value);
rankChart.interpret({ type: "柱状图", name: "制裁实体地域分布情况", data: data });
rankChart.interpret({ type: "柱状图", name: "制裁实体各省分布情况", data: data });
updateMapChart();
}
} catch (error) {
......@@ -691,7 +691,7 @@ const domainChartOption = ref({
},
rich: {
name: {
fontSize: 18,
fontSize: 16,
fontWeight: 700,
color: "rgb(59, 65, 75)",
padding: [0, 0, 5, 0],
......@@ -912,7 +912,7 @@ const typeChartOption = ref({
},
rich: {
name: {
fontSize: 18,
fontSize: 16,
fontWeight: 700,
color: "rgb(59, 65, 75)",
padding: [0, 0, 5, 0],
......
......@@ -173,6 +173,13 @@
</div>
</template>
</el-table-column>
<el-table-column
prop="listingLocation"
label="上市地点"
width="140"
show-overflow-tooltip
align="center"
/>
<el-table-column
prop="startTime"
label="制裁时间"
......@@ -557,6 +564,10 @@ watch(customDateRange, () => {
width: 160px;
height: 32px;
}
:deep(.el-checkbox__label) {
font-size: 16px;
color: rgb(95, 101, 108);
}
}
}
......@@ -575,9 +586,14 @@ watch(customDateRange, () => {
background-color: #fff;
.checkbox-group {
display: flex;
flex-wrap: wrap;
padding: 0 0 0 24px;
// display: flex;
// flex-wrap: wrap;
// padding: 0 0 0 24px;
display: grid;
grid-template-columns: repeat(2, 160px);
gap: 8px 4px;
padding-left: 20px;
.el-checkbox {
width: 50%;
......
......@@ -59,7 +59,7 @@
<div class="data-origin-icon">
<img :src="tipsIcon" alt="" />
</div>
<div class="data-origin-text">制裁实体领域分布情况,数据来源:美国各行政机构官网</div>
<div class="data-origin-text">进入本次实体清单的中国实体领域分布情况,数据来源:美国商务部官网</div>
</div>
<div class="ai-pane">
<AiButton />
......@@ -109,7 +109,7 @@
<div class="data-origin-icon">
<img :src="tipsIcon" alt="" />
</div>
<div class="data-origin-text">制裁实体类型分布情况,数据来源:美国各行政机构官网</div>
<div class="data-origin-text">进入本次实体清单的中国实体类型分布情况,数据来源:美国商务部官网</div>
</div>
<div class="ai-pane">
<AiButton />
......@@ -118,7 +118,7 @@
</AnalysisBox>
</div>
<div class="main-item">
<AnalysisBox title="制裁实体国家分布情况">
<AnalysisBox title="制裁实体国家地区分布情况">
<div class="country-list">
<div class="list-item" v-for="(item, index) in countryDistribution" :key="index">
<img :src="flag" alt="" class="flag" />
......@@ -150,7 +150,7 @@
<div class="data-origin-icon">
<img :src="tipsIcon" alt="" />
</div>
<div class="data-origin-text">制裁实体国家分布情况,数据来源:美国各行政机构官网</div>
<div class="data-origin-text">进入本次实体清单的实体国家地区分布情况,数据来源:美国商务部官网</div>
</div>
<div class="ai-pane">
<AiButton />
......@@ -159,7 +159,7 @@
</AnalysisBox>
</div>
<div class="main-item">
<AnalysisBox title="制裁实体地域分布情况">
<AnalysisBox title="制裁实体各省分布情况">
<div class="map-wrapper">
<div class="map-chart" ref="mapChartRef"></div>
<div class="rank-list">
......@@ -194,7 +194,7 @@
<div class="data-origin-icon">
<img :src="tipsIcon" alt="" />
</div>
<div class="data-origin-text">制裁实体地域分布情况,数据来源:美国各行政机构官网</div>
<div class="data-origin-text">进入本次实体清单的中国实体各省分布情况,数据来源:美国商务部官网</div>
</div>
<div class="ai-pane">
<AiButton />
......@@ -251,7 +251,7 @@ const getRegionData = async () => {
regionDistribution.value = res.data || [];
maxRegionCount.value = Math.max(...regionDistribution.value.map(item => item.count), 0);
initMapChart();
regionDistributionChart.interpret({ type: "柱状图", name: "制裁实体地域分布情况", data: res.data });
regionDistributionChart.interpret({ type: "柱状图", name: "进入本次实体清单的中国实体各省分布情况", data: res.data });
}
} catch (error) {
console.log(error);
......@@ -291,7 +291,11 @@ const getCountryCount = async () => {
gradient
};
});
countryDistributionChart.interpret({ type: "柱状图", name: "制裁实体国家分布情况", data: res.data });
countryDistributionChart.interpret({
type: "柱状图",
name: "进入本次实体清单的实体国家地区分布情况",
data: res.data
});
}
} catch (error) {
console.log(error);
......@@ -312,7 +316,7 @@ const getEntityTypeCount = async () => {
const res = await getSingleSanctionEntityTypeCount(params);
if (res.code === 200) {
entityTypeCount.value = res.data || [];
typeChart.interpret({ type: "饼图", name: "制裁实体类型分布情况", data: entityTypeCount.value });
typeChart.interpret({ type: "饼图", name: "进入本次实体清单的中国实体类型分布情况", data: entityTypeCount.value });
initTypeChart();
}
} catch (error) {
......@@ -335,7 +339,7 @@ const getDomainCount = async () => {
if (res.code === 200) {
domainCount.value = res.data || [];
initDomainChart();
domainChart.interpret({ type: "饼图", name: "制裁实体领域分布情况", data: domainCount.value });
domainChart.interpret({ type: "饼图", name: "进入本次实体清单的中国实体领域分布情况", data: domainCount.value });
}
} catch (error) {
console.log(error);
......
......@@ -168,14 +168,21 @@
</el-table-column>
<el-table-column label="涉及领域" width="180" align="center">
<template #default="scope">
<span
<!-- <span
v-for="(item, index) in scope.row.fields"
:key="index"
class="tag"
:style="getTagStyle(item)"
style="margin: 0 2px"
>{{ item }}</span
>
> -->
<div class="domain-box">
<AreaTag
v-for="(domain, index) in scope.row.fields"
:key="index"
:tagName="domain"
/>
</div>
</template>
</el-table-column>
<el-table-column prop="location" label="上市地点" width="90" align="center" />
......@@ -563,10 +570,10 @@ onMounted(() => {
</script>
<style scoped lang="scss">
* {
margin: 0;
padding: 0;
}
// * {
// margin: 0;
// padding: 0;
// }
.sanctions-overview {
width: 1601px;
......@@ -669,7 +676,7 @@ onMounted(() => {
.left-top-content {
width: 100%;
height: 234px;
// height: 234px;
padding: 19px 29px 22px 27px;
overflow: auto;
......@@ -1001,6 +1008,11 @@ onMounted(() => {
border-radius: 8px;
overflow: hidden;
.domain-box {
display: flex;
gap: 8px;
}
:deep(.el-table__header-wrapper) {
th {
background-color: var(--color-primary-100) !important;
......
......@@ -638,6 +638,8 @@ const handleToMoreRiskSignal = () => {
window.open(route.href, "_blank");
};
const infoListColor = ref(["rgba(206, 79, 81, 1)", "rgba(114, 46, 209, 1)", "rgba(132, 136, 142, 1)", "rgba(132, 136, 142, 1)"]);
// 查看更多新闻资讯
const handleToMoreNews = () => {
const route = router.resolve("/newsBrief");
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论