Skip to content

R
risk-monitor
提交 58537cbd authored 作者: 朱政's avatar 朱政
浏览文件
操作

Merge branch 'master' into zz-dev

上级 29e42ed8 8421103d
隐藏空白字符变更
内嵌 并排
正在显示 包含 4871 行增加 和 2587 行删除
index.html
浏览文件 @ 58537cbd
......@@ -9,5 +9,6 @@
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
<script src="/js/config.js"></script>
</body>
</html>
\ No newline at end of file
public/js/config.js 0 → 100644
浏览文件 @ 58537cbd
const baseUrl = `http://8.140.26.4:9085/`
\ No newline at end of file
src/App.vue
浏览文件 @ 58537cbd
......@@ -235,12 +235,26 @@ body {
display: none;
}
/* #region 公共样式类名 */
/* 单行文本溢出隐藏显示省略号 */
.one-line-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 多行文本两端对齐 最后一行正常显示 */
.text-align-justify {
text-align: justify;
text-align-last: left;
-webkit-text-align-last: left;
}
/* 可点击文本 鼠标悬浮样式 */
#app .text-click-hover:hover {
text-decoration: underline;
color: rgb(5, 95, 194);
cursor: pointer;
}
/* #endregion 公共样式类名 */
</style>
<style lang="scss" scoped>
......
src/api/bill.js
浏览文件 @ 58537cbd
......@@ -192,3 +192,30 @@ export function getBillFullText(params) {
params,
})
}
// 条款对比-根据两版版本与筛选条件获取配对条款列表
/**
* @param {billId,oldVersionId,newVersionId,diffType,cRelated,keyword}
* @header token
* @returns { list: Array<{ oldTerm: object|null, newTerm: object|null }> }
*/
export function getBillTermsCompare(params) {
return request({
method: "GET",
url: "/api/billInfoBean/content/compare",
params,
});
}
// 版本对比-根据两版版本与筛选条件获取条款列表（分页）
/**
* @param {billId,content,currentPage,currentVersion,isCn,originalVersion,pageSize,status}
* @header token
*/
export function getBillVersionCompare(params) {
return request({
method: "GET",
url: "/api/billInfoBean/versionCompare",
params,
});
}
src/api/decree/home.js
浏览文件 @ 58537cbd
import request from "@/api/request.js";
// 最新科技政令
export function getDepartmentList() {
export function getDepartmentList(params) {
return request({
method: 'GET',
url: `/api/administrativeDict/department`,
......@@ -43,10 +43,10 @@ export function getDecreeArea(params) {
}
// 关键行政令
export function getKeyDecree() {
export function getKeyDecree(params) {
return request({
method: 'GET',
url: `/api/administrativeOrderOverview/action`,
url: `/api/administrativeOrderOverview/action?pageSize=${params.pageSize}&pageNum=${params.pageNum}`,
})
}
......
src/components/base/ActionButton/index.vue
浏览文件 @ 58537cbd
......@@ -17,7 +17,7 @@ defineProps({
})
</script>
<style scoped>
<style lang="scss" scoped>
.action-button {
height: 28px;
padding: 0 8px;
......@@ -29,11 +29,16 @@ defineProps({
font-size: 16px;
font-weight: 400;
transition: all 0.3s;
}
.action-button[type="normal"] {
background-color: rgba(255, 255, 255, 1);
color: rgba(59, 65, 75, 1);
&:hover {
background: var(--color-primary-2);
}
}
.action-button[type="active"] {
......@@ -52,6 +57,4 @@ defineProps({
.action-button[type="active"]:hover {
background-color: #40a9ff;
} */
</style>
\ No newline at end of file
src/components/base/Ai/AiButton/ai-icon.svg 0 → 100644
浏览文件 @ 58537cbd
<svg viewBox="0 0 16 12" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="12.000000" fill="none" customFrame="url(#clipPath_1)">
<defs>
<clipPath id="clipPath_1">
<rect width="16.000000" height="12.000000" x="0.000000" y="0.000000" rx="6.000000" fill="rgb(255,255,255)" />
</clipPath>
</defs>
<rect id="AI-logo" width="16.000000" height="12.000000" x="0.000000" y="0.000000" rx="6.000000" />
<path id="合并" d="M13.0238 1.46629C13.7681 0.916637 14.14 0 14.14 0C14.14 0 14.0472 0.916623 14.5122 1.46629C14.9772 2.01595 16 2.19866 16 2.19866C16 2.19866 14.8838 2.38224 14.1396 2.93288C13.3955 3.48351 13.0234 4.40121 13.0234 4.40121C13.0234 4.40121 13.1163 3.48353 12.6512 2.93288C12.1861 2.38222 11.163 2.1986 11.163 2.1986C11.163 2.1986 12.2795 2.01594 13.0238 1.46629ZM8.72107 2.20032L9.85481 10.5L7.29299 10.5L6.99502 8.24068L3.42302 8.24068L2.42736 10.5L0 10.5L3.28857 2.61208L2.85978 2.20032L8.72107 2.20032ZM5.4325 3.60747L4.00442 6.83353L6.86057 6.83353L6.43179 3.60747L5.4325 3.60747ZM13.9457 10.4999L14.9162 4.57493L11.475 4.57493L11.9074 5.13349L11.2386 10.4999L13.9457 10.4999Z" fill="rgb(5,95,194)" fill-rule="evenodd" />
</svg>
src/components/base/Ai/AiButton/index.vue 0 → 100644
浏览文件 @ 58537cbd
<template>
<div class="ai-button-wrapper">
<div class="icon">
<img src="./ai-icon.svg" alt="">
</div>
<div class="text text-tip-1">{{ '总结' }}</div>
</div>
</template>
<style lang="scss" scoped>
.ai-button-wrapper{
width: 74px;
height: 28px;
border-radius: 20px 0 0 20px;
background: var(--color-primary-10);
display: flex;
gap: 6px;
align-items: center;
justify-content: left;
box-sizing: border-box;
padding-left: 12px;
cursor: pointer;
.text{
color: var(--color-primary-100);
}
}
</style>
\ No newline at end of file
src/components/base/Ai/AiPane/ai-icon.svg 0 → 100644
浏览文件 @ 58537cbd
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20.000000" height="16.000000" fill="none" customFrame="url(#clipPath_2)">
<defs>
<clipPath id="clipPath_2">
<rect width="20.000000" height="16.000000" x="0.000000" y="0.000000" rx="8.000000" fill="rgb(255,255,255)" />
</clipPath>
</defs>
<rect id="AI-logo" width="20.000000" height="16.000000" x="0.000000" y="0.000000" rx="8.000000" />
<path id="合并" d="M16.2798 1.95505C17.2101 1.22218 17.6751 0 17.6751 0C17.6751 0 17.559 1.22216 18.1403 1.95505C18.7215 2.68794 20 2.93155 20 2.93155C20 2.93155 18.6047 3.17632 17.6745 3.9105C16.7443 4.64468 16.2793 5.86828 16.2793 5.86828C16.2793 5.86828 16.3954 4.6447 15.814 3.9105C15.2326 3.1763 13.9537 2.93147 13.9537 2.93147C13.9537 2.93147 15.3494 2.68792 16.2798 1.95505ZM10.9013 2.93376L12.3185 14L9.11624 14L8.74378 10.9876L4.27877 10.9876L3.03421 14L0 14L4.11071 3.48277L3.57473 2.93376L10.9013 2.93376ZM6.79062 4.80996L5.00553 9.11138L8.57572 9.11138L8.03974 4.80996L6.79062 4.80996ZM17.4321 13.9999L18.6452 6.09991L14.3437 6.09991L14.8843 6.84466L14.0482 13.9999L17.4321 13.9999Z" fill="rgb(5,95,194)" fill-rule="evenodd" />
</svg>
src/components/base/Ai/AiPane/index.vue 0 → 100644
浏览文件 @ 58537cbd
<template>
<div class="ai-pane-wrapper">
<div class="header">
<div class="icon">
<img src="./ai-icon.svg" alt="">
</div>
<div class="title text-title-3-show">{{ '智能总结' }}</div>
</div>
<div class="content text-regular">{{ aiContent }}</div>
</div>
</template>
<script setup>
const props = defineProps({
aiContent: {
type: String,
default: ''
}
})
</script>
<style lang="scss">
.ai-pane-wrapper {
width: 100%;
height: 156px;
background: var(--color-primary-2);
box-sizing: border-box;
padding: 12px 16px;
.header {
width: 126px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 20px;
background: var(--color-primary-10);
.icon {
width: 20px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.title {
color: var(--color-primary-100);
}
}
.content {
margin-top: 8px;
width: 100%;
height: 90px;
box-sizing: border-box;
padding: 0 12px;
color: var(--color-primary-100);
display: -webkit-box;
-webkit-line-clamp: 3;
/* 控制显示的行数 */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word;
/* 防止长单词溢出 */
}
}
</style>
\ No newline at end of file
src/components/base/Ai/AiSummary/bg.svg 0 → 100644
浏览文件 @ 58537cbd
<svg viewBox="0 0 1019 61" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1019.000000" height="61.000000" fill="none" customFrame="#000000">
<defs>
<linearGradient id="paint_linear_1" x1="7.60449219" x2="10.1398888" y1="-1.90734863e-06" y2="61.0955963" gradientUnits="userSpaceOnUse">
<stop stop-color="rgb(231,243,255)" offset="0" stop-opacity="1" />
<stop stop-color="rgb(231,243,255)" offset="1" stop-opacity="0" />
</linearGradient>
</defs>
<path id="矩形 5734" d="M0.000322558 0L1019 0L1019 31.5006L0 61.0008L0.000322558 0Z" fill="url(#paint_linear_1)" fill-rule="evenodd" />
</svg>
src/components/base/Ai/AiSummary/icon1.svg 0 → 100644
浏览文件 @ 58537cbd
<svg viewBox="0 0 15 12" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15.000000" height="12.000000" fill="none" customFrame="url(#clipPath_0)">
<defs>
<clipPath id="clipPath_0">
<rect width="15.000000" height="12.000000" x="0.000000" y="0.000000" rx="6.000000" fill="rgb(255,255,255)" />
</clipPath>
<linearGradient id="paint_linear_0" x1="7.49999952" x2="7.49999952" y1="0" y2="10.5" gradientUnits="userSpaceOnUse">
<stop stop-color="rgb(5,95,194)" offset="0" stop-opacity="1" />
<stop stop-color="rgb(137,193,255)" offset="1" stop-opacity="1" />
</linearGradient>
</defs>
<rect id="AI-logo" width="15.000000" height="12.000000" x="0.000000" y="0.000000" rx="6.000000" />
<path id="合并" d="M12.2098 1.46629C12.9076 0.916637 13.2563 0 13.2563 0C13.2563 0 13.1693 0.916623 13.6052 1.46629C14.0411 2.01595 15 2.19866 15 2.19866C15 2.19866 13.9535 2.38224 13.2559 2.93288C12.5583 3.48351 12.2095 4.40121 12.2095 4.40121C12.2095 4.40121 12.2966 3.48353 11.8605 2.93288C11.4245 2.38222 10.4653 2.1986 10.4653 2.1986C10.4653 2.1986 11.5121 2.01594 12.2098 1.46629ZM8.176 2.20032L9.23888 10.5L6.83718 10.5L6.55783 8.24068L3.20908 8.24068L2.27565 10.5L0 10.5L3.08303 2.61208L2.68105 2.20032L8.176 2.20032ZM5.09297 3.60747L3.75415 6.83353L6.43179 6.83353L6.0298 3.60747L5.09297 3.60747ZM13.0741 10.4999L13.9839 4.57493L10.7578 4.57493L11.1632 5.13349L10.5361 10.4999L13.0741 10.4999Z" fill="url(#paint_linear_0)" fill-rule="evenodd" />
</svg>
src/components/base/Ai/AiSummary/icon2.svg 0 → 100644
浏览文件 @ 58537cbd
<svg viewBox="0 0 6.70703 13.4102" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="6.707031" height="13.410156" fill="none" customFrame="#000000">
<rect id="容器 848" width="6.000000" height="11.997072" x="0.353516" y="0.707031" />
<path id="矢量 626" d="M0 0L2.99854 2.99854L6 0" stroke="rgb(5,95,194)" stroke-width="1.000000" transform="matrix(1,0,0,-1,0.353516,3.70508)" />
<path id="矢量 627" d="M0.353516 9.70508L3.35205 12.7036L6.35352 9.70508" stroke="rgb(5,95,194)" stroke-width="1.000000" />
</svg>
src/components/base/Ai/AiSummary/index.vue 0 → 100644
浏览文件 @ 58537cbd
<template>
<div class="summary-wrapper">
<div class="summary-header">
<div class="icon1">
<img src="./icon1.svg" alt="">
</div>
<div class="text text-tip-1">{{ '智库报告总结摘要' }}</div>
<div class="icon2">
<img src="./icon2.svg" alt="">
</div>
</div>
<div class="summary-main">
<slot name="summary-content"></slot>
</div>
</div>
</template>
<style lang="scss">
.summary-wrapper {
width: 100%;
height: 100%;
// background: linear-gradient(90deg, var(--color-primary-10) 0%, var(--bg-white-100) 100%) ;
background: url('./bg.svg') no-repeat;
overflow: hidden;
border-radius: 4px;
border: 1px solid #E7F3FF;
.summary-header {
margin-top: 16px;
margin-left: 24px;
width: 199px;
height: 32px;
border: 1px solid var(--color-primary-100);
border-radius: 16px;
background: var(--color-primary-10);
display: flex;
justify-content: center;
align-items: center;
gap: 9px;
.icon1 {
width: 15px;
height: 12px;
img {
width: 100%;
height: 100%;
}
}
.text {
color: var(--color-primary-100);
}
.icon2 {
width: 6px;
height: 12px;
img {
width: 100%;
height: 100%;
}
}
}
.summary-main {
margin: 0 auto;
margin-top: 24px;
width: calc(100% - 52px);
height: calc(100% - 92px);
}
}
</style>
\ No newline at end of file
src/components/base/DecreeOriginal/index.vue
浏览文件 @ 58537cbd
......@@ -239,6 +239,8 @@ watch(isTranslate, () => {
background-color: white;
padding: 0 60px;
flex: auto;
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
.report-header {
......@@ -324,9 +326,14 @@ watch(isTranslate, () => {
.report-main {
flex: auto;
min-height: 0;
box-sizing: border-box;
padding-top: 10px;
:deep(.el-scrollbar) {
height: 100%;
}
.no-content {
height: 100%;
display: flex;
......
src/components/base/boxBackground/analysisBox.vue
浏览文件 @ 58537cbd
......@@ -133,11 +133,12 @@ const emit = defineEmits(['save', 'download', 'collect'])
}
}
// .header-btn {
// display: flex;
// justify-content: flex-end;
// gap: 8px;
// }
.header-btn {
// display: flex;
// justify-content: flex-end;
// gap: 8px;
margin-right: 10px;
}
// .header-btn1 {
// position: absolute;
......
src/router/dataLibrary/dataBill.js
浏览文件 @ 58537cbd
// 法案资源库
const CountryBill = () => import('@/views/dataLibrary/components/bill/countryBill/index.vue')
const StateBill = () => import('@/views/dataLibrary/components/bill/stateBill/index.vue')
const CountryBill = () => import('@/views/dataLibrary/bill/countryBill/index.vue')
const StateBill = () => import('@/views/dataLibrary/bill/stateBill/index.vue')
const dataBillRoutes = [
// 科技法案资源库路由
{
path: "/countryBill",
path: "/dataLibrary/countryBill",
name: "CountryBill",
component: CountryBill,
meta: {
......@@ -16,7 +16,7 @@ const dataBillRoutes = [
},
{
path: "/stateBill",
path: "/dataLibrary/stateBill",
name: "StateBill",
component: StateBill,
meta: {
......
src/router/dataLibrary/decree.js
浏览文件 @ 58537cbd
// 法案资源库
const Decree = () => import('@/views/dataLibrary/components/decree/index.vue')
const Decree = () => import('@/views/dataLibrary/decree/index.vue')
const dataDecreeRoutes = [
// 科技法案资源库路由
{
path: "/dataDecree",
path: "/dataLibrary/dataDecree",
name: "DataDecree",
component: Decree,
meta: {
......
src/router/dataLibrary/exportControl.js
浏览文件 @ 58537cbd
// 法案资源库
const CommerceControlList = () => import('@/views/dataLibrary/components/exportControl/commerceControlList/index.vue')
const CommerceControlListEvent = () => import('@/views/dataLibrary/components/exportControl/commerceControlListEvent/index.vue')
const EntityList = () => import('@/views/dataLibrary/components/exportControl/entityList/index.vue')
const EntityListEvent = () => import('@/views/dataLibrary/components/exportControl/entityListEvent/index.vue')
const CommerceControlList = () => import('@/views/dataLibrary/exportControl/commerceControlList/index.vue')
const CommerceControlListEvent = () => import('@/views/dataLibrary/exportControl/commerceControlListEvent/index.vue')
const EntityList = () => import('@/views/dataLibrary/exportControl/entityList/index.vue')
const EntityListEvent = () => import('@/views/dataLibrary/exportControl/entityListEvent/index.vue')
const dataDecreeRoutes = [
// 科技法案资源库路由
{
path: "/dataCommerceControlList",
path: "/dataLibrary/dataCommerceControlList",
name: "CommerceControlList",
component: CommerceControlList,
meta: {
......@@ -17,7 +17,7 @@ const dataDecreeRoutes = [
}
},
{
path: "/dataCommerceControlListEvent",
path: "/dataLibrary/dataCommerceControlListEvent",
name: "CommerceControlListEvent",
component: CommerceControlListEvent,
meta: {
......@@ -27,7 +27,7 @@ const dataDecreeRoutes = [
}
},
{
path: "/dataEntityList",
path: "/dataLibrary/dataEntityList",
name: "EntityList",
component: EntityList,
meta: {
......@@ -37,7 +37,7 @@ const dataDecreeRoutes = [
}
},
{
path: "/dataEntityListEvent",
path: "/dataLibrary/dataEntityListEvent",
name: "EntityListEvent",
component: EntityListEvent,
meta: {
......
src/router/dataLibrary/financeControl.js
浏览文件 @ 58537cbd
// 法案资源库
const MREList = () => import('@/views/dataLibrary/components/financeControl/mREList/index.vue')
const MREListEvent = () => import('@/views/dataLibrary/components/financeControl/mREListEvent/index.vue')
const SDNList = () => import('@/views/dataLibrary/components/financeControl/sDNList/index.vue')
const SDNListEvent = () => import('@/views/dataLibrary/components/financeControl/sDNListEvent/index.vue')
const MREList = () => import('@/views/dataLibrary/financeControl/mREList/index.vue')
const MREListEvent = () => import('@/views/dataLibrary/financeControl/mREListEvent/index.vue')
const SDNList = () => import('@/views/dataLibrary/financeControl/sDNList/index.vue')
const SDNListEvent = () => import('@/views/dataLibrary/financeControl/sDNListEvent/index.vue')
const dataDecreeRoutes = [
// 科技法案资源库路由
{
path: "/mREList",
path: "/dataLibrary/mREList",
name: "MREList",
component: MREList,
meta: {
......@@ -17,7 +17,7 @@ const dataDecreeRoutes = [
}
},
{
path: "/mREListEvent",
path: "/dataLibrary/mREListEvent",
name: "MREListEvent",
component: MREListEvent,
meta: {
......@@ -27,7 +27,7 @@ const dataDecreeRoutes = [
}
},
{
path: "/sDNList",
path: "/dataLibrary/sDNList",
name: "SDNList",
component: SDNList,
meta: {
......@@ -37,7 +37,7 @@ const dataDecreeRoutes = [
}
},
{
path: "/sDNListEvent",
path: "/dataLibrary/sDNListEvent",
name: "SDNListEvent",
component: SDNListEvent,
meta: {
......
src/router/dataLibrary/innovationSubject.js
浏览文件 @ 58537cbd
// 法案资源库
const KeyLab = () => import('@/views/dataLibrary/components/innovationSubject/keyLab/index.vue')
const ResearchUniversity = () => import('@/views/dataLibrary/components/innovationSubject/researchUniversity/index.vue')
const TechnologyCompany = () => import('@/views/dataLibrary/components/innovationSubject/technologyCompany/index.vue')
const KeyLab = () => import('@/views/dataLibrary/innovationSubject/keyLab/index.vue')
const ResearchUniversity = () => import('@/views/dataLibrary/innovationSubject/researchUniversity/index.vue')
const TechnologyCompany = () => import('@/views/dataLibrary/innovationSubject/technologyCompany/index.vue')
const dataDecreeRoutes = [
// 科技法案资源库路由
{
path: "/keyLab",
path: "/dataLibrary/keyLab",
name: "KeyLab",
component: KeyLab,
meta: {
......@@ -17,7 +17,7 @@ const dataDecreeRoutes = [
},
{
path: "/researchUniversity",
path: "/dataLibrary/researchUniversity",
name: "ResearchUniversity",
component: ResearchUniversity,
meta: {
......@@ -28,7 +28,7 @@ const dataDecreeRoutes = [
},
{
path: "/technologyCompany",
path: "/dataLibrary/technologyCompany",
name: "TechnologyCompany",
component: TechnologyCompany,
meta: {
......
src/router/dataLibrary/marketControl.js
浏览文件 @ 58537cbd
// 法案资源库
const Case337 = () => import('@/views/dataLibrary/components/marketControl/case337/index.vue')
const Case232 = () => import('@/views/dataLibrary/components/marketControl/case232/index.vue')
const Case301 = () => import('@/views/dataLibrary/components/marketControl/case301/index.vue')
const Case337 = () => import('@/views/dataLibrary/marketControl/case337/index.vue')
const Case232 = () => import('@/views/dataLibrary/marketControl/case232/index.vue')
const Case301 = () => import('@/views/dataLibrary/marketControl/case301/index.vue')
const dataDecreeRoutes = [
// 科技法案资源库路由
{
path: "/case337",
path: "/dataLibrary/case337",
name: "Case337",
component: Case337,
meta: {
......@@ -16,7 +16,7 @@ const dataDecreeRoutes = [
}
},
{
path: "/case232",
path: "/dataLibrary/case232",
name: "Case232",
component: Case232,
meta: {
......@@ -26,7 +26,7 @@ const dataDecreeRoutes = [
}
},
{
path: "/case301",
path: "/dataLibrary/case301",
name: "Case301",
component: Case301,
meta: {
......
src/router/dataLibrary/technologyFigures.js
浏览文件 @ 58537cbd
// 法案资源库
const CongressMan = () => import('@/views/dataLibrary/components/technologyFigures/congressMan/index.vue')
const Minister = () => import('@/views/dataLibrary/components/technologyFigures/minister/index.vue')
const TechnologyLeader = () => import('@/views/dataLibrary/components/technologyFigures/technologyLeader/index.vue')
const ThinkTankResearcher = () => import('@/views/dataLibrary/components/technologyFigures/thinkTankResearcher/index.vue')
const CongressMan = () => import('@/views/dataLibrary/technologyFigures/congressMan/index.vue')
const Minister = () => import('@/views/dataLibrary/technologyFigures/minister/index.vue')
const TechnologyLeader = () => import('@/views/dataLibrary/technologyFigures/technologyLeader/index.vue')
const ThinkTankResearcher = () => import('@/views/dataLibrary/technologyFigures/thinkTankResearcher/index.vue')
const dataDecreeRoutes = [
// 科技法案资源库路由
{
path: "/congressMan",
path: "/dataLibrary/congressMan",
name: "CongressMan",
component: CongressMan,
meta: {
......@@ -17,7 +17,7 @@ const dataDecreeRoutes = [
}
},
{
path: "/minister",
path: "/dataLibrary/minister",
name: "Minister",
component: Minister,
meta: {
......@@ -27,7 +27,7 @@ const dataDecreeRoutes = [
}
},
{
path: "/technologyLeader",
path: "/dataLibrary/technologyLeader",
name: "TechnologyLeader",
component: TechnologyLeader,
meta: {
......@@ -37,7 +37,7 @@ const dataDecreeRoutes = [
}
},
{
path: "/thinkTankResearcher",
path: "/dataLibrary/thinkTankResearcher",
name: "ThinkTankResearcher",
component: ThinkTankResearcher,
meta: {
......
src/router/dataLibrary/thinkTank.js
浏览文件 @ 58537cbd
// 法案资源库
const ThinkTank = () => import('@/views/dataLibrary/components/thinkTank/index.vue')
const ThinkTank = () => import('@/views/dataLibrary/thinkTank/index.vue')
const dataThinkTankRoutes = [
// 科技法案资源库路由
{
path: "/dataThinkTank",
path: "/dataLibrary/dataThinkTank",
name: "DataThinkTank",
component: ThinkTank,
meta: {
title: '科技智库', // 显示在tag上的文字
title: '美国科技智库', // 显示在tag上的文字
affix: false, // 是否为固定tag（首页通常设置为true，不可关闭）
keepAlive: true // 是否需要缓存
}
......
src/router/index.js
浏览文件 @ 58537cbd
......@@ -34,6 +34,9 @@ const routes = [
path: "/dataLibrary",
name: "DataLibrary",
component: DataLibrary,
meta: {
title: '数据资源库'
},
children: [
...dataRoutes
]
......
src/router/modules/bill.js
浏览文件 @ 58537cbd
......@@ -13,7 +13,7 @@ const BillInfluenceLayout = () => import('@/views/bill/influence/index.vue')
const BillInfluenceIndustry = () => import('@/views/bill/influence/industry/index.vue')
const BillInfluenceScientificResearch = () => import('@/views/bill/influence/scientificResearch/index.vue')
const BillRelevantCircumstance = () => import('@/views/bill/relevantCircumstance/index.vue')
const BillOriginalText = () => import('@/views/bill/billOriginalText/index.vue')
const BillVersionCompare = () => import('@/views/bill/versionCompare/index.vue')
const billRoutes = [
......@@ -36,14 +36,6 @@ const billRoutes = [
dynamicTitle: true // 标记需要动态设置标题
},
children: [
{
path: "originalText",
name: "BillOriginalText",
component: BillOriginalText,
meta: {
title: "法案原文"
}
},
// 法案分析路由
{
path: "bill",
......@@ -138,6 +130,14 @@ const billRoutes = [
// meta: {
// title: "相关情况"
// }
},
{
path: "versionCompare",
name: "BillVersionCompare",
component: BillVersionCompare,
meta: {
title: "版本对比"
}
}
]
},
......
src/router/modules/decree.js
浏览文件 @ 58537cbd
......@@ -18,7 +18,7 @@ const decreeRoutes = [
name: "Decree",
component: Decree,
meta: {
title: "政令概览"
title: "科技政令概况"
}
},
{
......
src/styles/components/Ai/AiInfo/index.vue 0 → 100644
浏览文件 @ 58537cbd
<template>
<el-row class="wrapper layout-grid-line">
<el-col :span="span">
<pre>
{{
`
import AiButton from '@/components/base/AiButton/index.vue'
import AiPane from '@/components/base/AiPane/index.vue'
<div class="chart-box">
<div class="btn-box" @mouseenter="handleSwitchAiContentShow(true)">
<AiButton />
</div>
<div class="content-box" v-if="isShowAiContent" @mouseleave="handleSwitchAiContentShow(false)">
<AiPane :aiContent="aiContent" />
</div>
</div>
`
}}
</pre>
<div class="chart-box">
<div class="btn-box" @mouseenter="handleSwitchAiContentShow(true)">
<AiButton />
</div>
<div class="content-box" v-if="isShowAiContent" @mouseleave="handleSwitchAiContentShow(false)">
<AiPane :aiContent="aiContent" />
</div>
</div>
</el-col>
</el-row>
</template>
<script setup>
import { ref } from 'vue'
import '@/styles/common.scss'
import AiButton from '@/components/base/Ai/AiButton/index.vue'
import AiPane from '@/components/base/Ai/AiPane/index.vue'
const span = 12
const handleSwitchAiContentShow = (isShow) => {
isShowAiContent.value = isShow
}
const isShowAiContent = ref(false)
const aiContent = ref(`整个立法过程反映了美国政治的高度极化特点。民主党全员反对该法案，批评其"劫贫济富"。而共和党内部也有分歧，特别是在财政赤字问题上。马斯克多次公开批评该法案是"疯狂的支出计划"。整个立法过程反映了美国政治的高度极化特点。民主党全员反对该法案，批评其"劫贫济富"。而共和党内部也有分歧，特别是在财政赤字问题上。马斯克多次公开批评该法案是"疯狂的支出计划"。`)
</script>
<style lang="scss" scoped>
.chart-box {
width: 520px;
height: 300px;
border: 1px solid var(--bg-black-5);
position: relative;
.btn-box {
position: absolute;
right: 0;
bottom: 18px;
}
.content-box {
position: absolute;
left: 0;
bottom: 0;
}
}
</style>
\ No newline at end of file
src/styles/components/Ai/AiSummary/index.vue 0 → 100644
浏览文件 @ 58537cbd
<template>
<el-row class="wrapper layout-grid-line">
<el-col :span="span">
<pre>
{{
`
import AiSummary from '@/components/base/Ai/AiSummary/index.vue'
<div class="summary-box">
<AiSummary />
</div>
`
}}
</pre>
<div class="summary-box">
<AiSummary>
<template #summary-content>
<div class="content-box">
我是插槽内容区域(忽略背景色)
</div>
</template>
</AiSummary>
</div>
</el-col>
</el-row>
</template>
<script setup>
import { ref } from 'vue'
import '@/styles/common.scss'
import AiSummary from '@/components/base/Ai/AiSummary/index.vue'
const span = 24
const aiContent = ref(`整个立法过程反映了美国政治的高度极化特点。民主党全员反对该法案，批评其"劫贫济富"。而共和党内部也有分歧，特别是在财政赤字问题上。马斯克多次公开批评该法案是"疯狂的支出计划"。整个立法过程反映了美国政治的高度极化特点。民主党全员反对该法案，批评其"劫贫济富"。而共和党内部也有分歧，特别是在财政赤字问题上。马斯克多次公开批评该法案是"疯狂的支出计划"。`)
</script>
<style lang="scss" scoped>
.summary-box {
margin-left: 10px;
margin-bottom: 10px;
width: 1019px;
height: 453px;
.content-box{
width: 100%;
height: 100%;
background: var(--color-primary-2);
}
}
</style>
\ No newline at end of file
src/styles/components/index.vue
浏览文件 @ 58537cbd
......@@ -43,6 +43,12 @@
<el-tab-pane label="时间选择框" lazy>
<TimeTabPane />
</el-tab-pane>
<el-tab-pane label="Ai智能总结" lazy>
<AiInfo />
</el-tab-pane>
<el-tab-pane label="Ai内容摘要" lazy>
<AiSummary />
</el-tab-pane>
<el-tab-pane label="层级关系图" lazy>
<GraphChart />
</el-tab-pane>
......@@ -83,6 +89,8 @@ import ActionButton from './ActionButton/index.vue'
import WordCloudChart from './WordCloudChart/index.vue'
import NewsPage from './News/index.vue'
import TimeTabPane from './TimeTabPane/index.vue'
import AiInfo from './Ai/AiInfo/index.vue'
import AiSummary from './Ai/AiSummary/index.vue'
</script>
<style lang="scss" scoped>
......
src/views/bill/billHome/ResourceLibrarySection.vue
浏览文件 @ 58537cbd
......@@ -204,16 +204,20 @@
<div class="coop-members">
<div class="coop-member">
<img class="coop-avatar" :src="item.avatar || defaultAvatar" alt="committee-avatar" />
<div class="coop-member-name" :title="item.name">{{ item.name }}</div>
<div class="coop-member-info">
<div class="coop-member-name" :title="item.name">{{ item.name }}</div>
<div v-if="item.nameEn" class="coop-member-name-en" :title="item.nameEn">
{{ item.nameEn }}
</div>
</div>
</div>
</div>
<div class="coop-summary" :title="item.desc">
<!-- <div class="coop-summary" :title="item.desc">
{{ item.desc }}
</div>
</div> -->
<div class="coop-count">
{{ `${item.proposalSize ?? (item.bills || []).length}项重点法案` }}
</div>
<slot name="committee-extra" :committee="item" />
</div>
<div class="coop-proposals">
<div
......@@ -447,6 +451,7 @@ const handleGetCommitteeList = async () => {
const descText = billInfoPage[0]?.originDepart || "";
return {
id: item.id,
nameEn:item.nameEn || "",
avatar: "",
name: item.name || "-",
desc: descText,
......@@ -1232,6 +1237,12 @@ onMounted(() => {
min-width: 0;
}
.coop-member-info {
display: flex;
flex-direction: column;
min-width: 0;
}
.coop-avatar {
width: 40px;
height: 40px;
......@@ -1273,6 +1284,17 @@ onMounted(() => {
text-overflow: ellipsis;
}
.coop-member-name-en {
color: var(--text-primary-65-color);
font-family: "Microsoft YaHei";
font-size: 14px;
font-weight: 400;
line-height: 22px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.coop-count {
flex-shrink: 0;
color: #1459bb;
......@@ -1284,7 +1306,6 @@ onMounted(() => {
}
.coop-proposals {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid #eaeced;
display: grid;
......
src/views/bill/billHome/index.vue
浏览文件 @ 58537cbd
......@@ -114,7 +114,13 @@
<el-empty v-if="!box5HasData" description="暂无数据" :image-size="100" />
<div v-else id="box5Chart" class="overview-chart"></div>
</div>
<TipTab class="overview-tip" />
<div class="overview-tip-row">
<TipTab class="overview-tip" />
<AiButton class="overview-tip-action" @mouseenter="handleShowAiPane('box5')" />
</div>
<div v-if="aiPaneVisible.box5" class="overview-ai-pane" @mouseleave="handleHideAiPane('box5')">
<AiPane :aiContent="overviewAiContent.box5" />
</div>
</div>
</OverviewCard>
<OverviewCard class="overview-card--single box6" title="涉华法案领域分布" :icon="box6HeaderIcon">
......@@ -128,7 +134,13 @@
<el-empty v-if="!box9HasData" description="暂无数据" :image-size="100" />
<div v-else id="box9Chart" class="overview-chart"></div>
</div>
<TipTab class="overview-tip" />
<div class="overview-tip-row">
<TipTab class="overview-tip" />
<AiButton class="overview-tip-action" @mouseenter="handleShowAiPane('box6')" />
</div>
<div v-if="aiPaneVisible.box6" class="overview-ai-pane" @mouseleave="handleHideAiPane('box6')">
<AiPane :aiContent="overviewAiContent.box6" />
</div>
</div>
</OverviewCard>
</div>
......@@ -144,7 +156,13 @@
<el-empty v-if="!box7HasData" description="暂无数据" :image-size="100" />
<div v-else id="box7Chart" class="overview-chart"></div>
</div>
<TipTab class="overview-tip" />
<div class="overview-tip-row">
<TipTab class="overview-tip" />
<AiButton class="overview-tip-action" @mouseenter="handleShowAiPane('box7')" />
</div>
<div v-if="aiPaneVisible.box7" class="overview-ai-pane" @mouseleave="handleHideAiPane('box7')">
<AiPane :aiContent="overviewAiContent.box7" />
</div>
</div>
</OverviewCard>
<OverviewCard class="overview-card--single box8" title="涉华法案进展分布" :icon="box7HeaderIcon">
......@@ -161,7 +179,13 @@
<div id="box8Chart" class="overview-chart box8-chart"></div>
</template>
</div>
<TipTab class="overview-tip" />
<div class="overview-tip-row">
<TipTab class="overview-tip" />
<AiButton class="overview-tip-action" @mouseenter="handleShowAiPane('box8')" />
</div>
<div v-if="aiPaneVisible.box8" class="overview-ai-pane" @mouseleave="handleHideAiPane('box8')">
<AiPane :aiContent="overviewAiContent.box8" />
</div>
</div>
</OverviewCard>
<OverviewCard class="overview-card--single box9" title="涉华法案关键条款" :icon="box7HeaderIcon">
......@@ -170,7 +194,13 @@
<el-empty v-if="!wordCloudHasData" description="暂无数据" :image-size="100" />
<WordCloundChart v-else class="overview-chart" width="100%" height="100%" :data="wordCloudData" />
</div>
<TipTab class="overview-tip" />
<div class="overview-tip-row">
<TipTab class="overview-tip" />
<AiButton class="overview-tip-action" @mouseenter="handleShowAiPane('box9')" />
</div>
<div v-if="aiPaneVisible.box9" class="overview-ai-pane" @mouseleave="handleHideAiPane('box9')" >
<AiPane :aiContent="overviewAiContent.box9" />
</div>
</div>
</OverviewCard>
</div>
......@@ -208,6 +238,8 @@ import OverviewCard from "./OverviewCard.vue";
import ResourceLibrarySection from "./ResourceLibrarySection.vue";
import { useContainerScroll } from "@/hooks/useScrollShow";
import TipTab from "@/components/base/TipTab/index.vue";
import AiButton from "@/components/base/Ai/AiButton/index.vue";
import AiPane from "@/components/base/Ai/AiPane/index.vue";
import WordCloundChart from "@/components/base/WordCloundChart/index.vue";
import getMultiLineChart from "./utils/multiLineChart";
......@@ -357,6 +389,36 @@ const box7YearList = ref([
}
]);
const aiPaneVisible = ref({
box5: false,
box6: false,
box7: false,
box8: false,
box9: false
});
const overviewAiContent = ref({
box5: "智能总结生成中...",
box6: "智能总结生成中...",
box7: "智能总结生成中...",
box8: "智能总结生成中...",
box9: "智能总结生成中..."
});
const handleShowAiPane = key => {
aiPaneVisible.value = {
...aiPaneVisible.value,
[key]: true
};
};
const handleHideAiPane = key => {
aiPaneVisible.value = {
...aiPaneVisible.value,
[key]: false
};
};
const box8selectetedTime = ref("2025");
const box8YearList = ref([
{
......@@ -2097,6 +2159,20 @@ onUnmounted(() => {
.overview-card-body {
display: flex;
flex-direction: column;
position: relative;
}
.overview-ai-pane {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
z-index: 3;
pointer-events: none;
.ai-pane-wrapper {
pointer-events: auto;
}
}
.overview-chart-wrap {
......@@ -2119,8 +2195,17 @@ onUnmounted(() => {
min-height: 0;
}
.overview-tip {
.overview-tip-row {
margin-top: 10px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.overview-tip-action {
position: absolute;
right: -30px;
}
}
}
......
src/views/bill/billLayout/components/BillHeader.vue
浏览文件 @ 58537cbd
......@@ -78,14 +78,6 @@
<div class="right-box-bottom" v-if="showActions">
<template v-if="isLoading">
<div class="btn1 is-skeleton">
<div class="icon">
<el-skeleton-item class="skeleton-action-icon" variant="text" />
</div>
<div class="text">
<el-skeleton-item class="skeleton-action-text" variant="text" />
</div>
</div>
<div class="btn3 is-skeleton">
<div class="icon">
<el-skeleton-item class="skeleton-action-icon" variant="text" />
......@@ -96,13 +88,6 @@
</div>
</template>
<template v-else>
<div class="btn1" @click="emit('open-original-text')">
<div class="icon">
<img :src="btnIconOriginalText" alt="" />
</div>
<div class="text">{{ "法案原文" }}</div>
</div>
<div class="btn3" @click="emit('open-analysis')">
<div class="icon">
<img :src="btnIconAnalysis" alt="" />
......@@ -118,7 +103,6 @@
<script setup>
import { computed } from "vue";
import btnIconOriginalText from "@/views/thinkTank/ReportDetail/images/btn-icon1.png";
import btnIconAnalysis from "@/views/thinkTank/ReportDetail/images/btn-icon3.png";
const props = defineProps({
......@@ -150,7 +134,7 @@ const props = defineProps({
const isLoading = computed(() => !props.billInfo || !props.billInfo.billName);
const emit = defineEmits(["tab-click", "open-original-text", "open-analysis"]);
const emit = defineEmits(["tab-click", "open-analysis"]);
</script>
<style lang="scss" scoped>
......@@ -363,41 +347,6 @@ const emit = defineEmits(["tab-click", "open-original-text", "open-analysis"]);
justify-content: flex-end;
gap: 8px;
.btn1 {
cursor: pointer;
width: 120px;
height: 36px;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 6px;
background: rgba(255, 255, 255, 1);
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
.icon {
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 24px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
}
.btn3 {
cursor: pointer;
width: 120px;
......
src/views/bill/billLayout/index.vue
浏览文件 @ 58537cbd
......@@ -7,10 +7,9 @@
:defaultLogo="USALogo"
:tabs="mainHeaderBtnList"
:activeTitle="activeTitle"
:showTabs="!isBillOriginalTextPage"
:showActions="!isBillOriginalTextPage"
:showTabs="showHeaderTabs"
:showActions="showHeaderActions"
@tab-click="handleClickMainHeaderBtn"
@open-original-text="handleOpenBillOriginalText"
@open-analysis="handleAnalysisClick"
/>
......@@ -22,14 +21,13 @@
</template>
<script setup>
import { ref, onMounted, computed, watch } from "vue";
import { ref, onMounted, watch } from "vue";
import router from "@/router";
import { useRoute } from "vue-router";
import { getBillInfoGlobal } from "@/api/bill";
import BillHeader from "./components/BillHeader.vue";
const route = useRoute();
const isBillOriginalTextPage = computed(() => route.path === "/billLayout/originalText");
import icon1 from "./assets/icons/icon1.svg";
import icon1Active from "./assets/icons/icon1_active.svg";
......@@ -55,16 +53,6 @@ const getBillInfoGlobalFn = async () => {
}
};
const handleOpenBillOriginalText = () => {
const targetRoute = router.resolve({
path: "/billLayout/originalText",
query: {
billId: route.query.billId
}
});
window.open(targetRoute.href, "_blank");
};
const mainHeaderBtnList = ref([
{
icon: icon1,
......@@ -93,6 +81,8 @@ const mainHeaderBtnList = ref([
]);
const activeTitle = ref("法案概况");
const showHeaderTabs = ref(true);
const showHeaderActions = ref(true);
const getActiveTitleByRoutePath = path => {
if (path.startsWith("/billLayout/deepDig")) return "深度挖掘";
......@@ -102,8 +92,12 @@ const getActiveTitleByRoutePath = path => {
return "法案概况";
};
const syncActiveTitleFromRoute = () => {
const syncHeaderStateFromRoute = () => {
const currentPath = route.path || "";
activeTitle.value = getActiveTitleByRoutePath(route.path);
const isVersionCompare = currentPath.startsWith("/billLayout/versionCompare");
showHeaderTabs.value = !isVersionCompare;
showHeaderActions.value = !isVersionCompare;
};
const handleClickMainHeaderBtn = item => {
......@@ -134,7 +128,7 @@ const handleAnalysisClick = () => {
onMounted(() => {
getBillInfoGlobalFn();
// 以当前路由为准，避免 sessionStorage 造成高亮错乱
syncActiveTitleFromRoute();
syncHeaderStateFromRoute();
// 兜底：如果未来出现未知路由且有缓存，再用缓存
const cachedTitle = window.sessionStorage.getItem("activeTitle");
if (!activeTitle.value && cachedTitle) activeTitle.value = cachedTitle;
......@@ -143,7 +137,7 @@ onMounted(() => {
watch(
() => route.path,
() => {
syncActiveTitleFromRoute();
syncHeaderStateFromRoute();
},
{ immediate: true }
);
......
src/views/bill/deepDig/poliContribution/index.vue
浏览文件 @ 58537cbd
......@@ -696,6 +696,7 @@ onMounted(() => {
position: absolute;
right: 84px;
top: 15px;
.btn {
height: 28px;
......
src/views/bill/deepDig/processOverview/index.vue
浏览文件 @ 58537cbd
<template>
<div class="process-overview-wrap">
<!-- <div class="box-header">
<div class="header-left"></div>
<div class="title">流程概要</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="main">
<div class="left" :style="{ width: (maxLineWidth + 250) + 'px' }">
<div class="top">
<div class="top-line" :style="{ width: lineWidth }">
<div class="top-line1"></div>
</div>
<div class="start">
<div class="icon">
<img src="./assets/images/logo1.png" alt="" />
</div>
<div class="name">{{ "参议院" }}</div>
</div>
<div class="content-box" :style="senateBoxStyle">
<div class="item-box" v-for="(item, index) in senateList" :key="item.id" style="width: 280px; flex-shrink: 0;">
<div class="item-box-dot">
<img src="./assets/images/top-line-dot.png" alt="" />
</div>
<div class="item-content">
<div class="item-header">
<div class="item-title" :title="item.actionTitle">
{{ item.actionTitle }} <span v-if="item.versionId">({{ item.versionId }})</span>
</div>
<div class="item-header-icon" @click="handleClickDetail(true, item, $event)">
<img src="./assets/images/item-header-icon.png" alt="" />
</div>
</div>
<div class="item-info" v-if="item.agreeVote !== null || item.disagreeVote !== null">
{{ (item.agreeVote || 0) + "赞成：" + (item.disagreeVote || 0) + "反对" }}
</div>
<div class="item-main" v-if="item.fynrList && item.fynrList.length">
<div class="item-main-item" v-for="(sub, subIndex) in item.fynrList" :key="subIndex">
<div class="icon"></div>
<CommonPrompt :content="sub">
<div class="text">{{ sub }}</div>
</CommonPrompt>
</div>
</div>
</div>
<div class="item-time">
{{ item.actionDate }}
</div>
</div>
</div>
</div>
<div class="bottom">
<div class="bottom-line" :style="{ width: lineWidth }">
<div class="bottom-line1"></div>
</div>
<div class="start">
<div class="name">{{ "众议院" }}</div>
<div class="icon">
<img src="./assets/images/logo2.png" alt="" />
</div>
</div>
<div class="content-box" :style="houseBoxStyle">
<div class="item-box" v-for="(item, index) in houseList" :key="item.id" style="width: 280px; flex-shrink: 0;">
<div class="item-time">
{{ item.actionDate }}
</div>
<div class="item-box-dot">
<img src="./assets/images/bottom-line-dot.png" alt="" />
</div>
<div class="item-content">
<div class="item-header">
<div class="item-title" :title="item.actionTitle">
{{ item.actionTitle }} <span v-if="item.versionId">({{ item.versionId }})</span>
</div>
<div class="item-header-icon" @click="handleClickDetail(true, item, $event)">
<img src="./assets/images/item-header-icon.png" alt="" />
</div>
</div>
<div class="item-info" v-if="item.agreeVote !== null || item.disagreeVote !== null">
{{ (item.agreeVote || 0) + "赞成：" + (item.disagreeVote || 0) + "反对" }}
</div>
<div class="item-main" v-if="item.fynrList && item.fynrList.length">
<div class="item-main-item" v-for="(sub, subIndex) in item.fynrList" :key="subIndex">
<div class="icon"></div>
<CommonPrompt :content="sub">
<div class="text">{{ sub }}</div>
</CommonPrompt>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="right" :style="{ left: rightPos }">
<div class="junction-dot">
<div class="inner-dot"></div>
</div>
<div class="right-line"></div>
</div>
</div>
</div> -->
<AnalysisBox title="流程概要" :showAllBtn="false">
<div class="main">
<div class="left" :style="{ width: (maxLineWidth + 250) + 'px' }">
......@@ -207,17 +99,6 @@
</div>
</div>
</div>
<!-- <div class="footer">
<div class="footer-left">
<img src="./assets/icons/right-icon1.png" alt="" />
</div>
<div class="footer-center">
立法过程始于2025年2月共和党启动预算框架谈判，5月22日众议院以215:214的1票优势通过初始版本；随后参议院历经16小时全文朗读和马拉松式辩论，于7月1日以51:50的票数通过修订版（副总统万斯投关键票）；因参议院版本大改（如永久化减税、提高债限至5万亿美元），法案重返众议院审议，经程序性投票（219:213）和最终表决（218:214），于7月3日深夜通过；特朗普在7月4日独立日签署生效，全程凸显两党对立、党内分歧及程序博弈。
</div>
<div class="footer-right">
<img src="./assets/icons/arrow-right.png" alt="" />
</div>
</div> -->
</AnalysisBox>
<ProcessOverviewDetailDialog
......
src/views/bill/index.vue
浏览文件 @ 58537cbd
......@@ -29,7 +29,7 @@ const siderBtnList = ref([
path: '/billLayout/bill/background'
},
{
name: '内容概要',
name: '法案原文',
path: '/billLayout/bill/template'
},
])
......@@ -38,7 +38,7 @@ const siderBtnActive = ref("法案简介");
const getSiderActiveByRoutePath = path => {
if (path.includes("/billLayout/bill/background")) return "法案背景";
if (path.includes("/billLayout/bill/template")) return "内容概要";
if (path.includes("/billLayout/bill/template")) return "法案原文";
return "法案简介";
};
......
src/views/bill/introdoction/index.vue
浏览文件 @ 58537cbd
<template>
<div class="introduction-wrap">
<div class="introduction-wrap-left">
<div class="introduction-wrap-left-box1">
<!-- <div class="box-header">
<div class="header-left"></div>
<div class="title">基本信息</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box1-main">
<div class="box1-left">
<img :src=" basicInfo.imageUrl || defaultBill" alt="" />
</div>
<div class="box1-right">
<div class="box1-right-item">
<div class="item-left">提案人：</div>
<div class="item-right">{{ basicInfo.tarName }}</div>
</div>
<div class="box1-right-item">
<div class="item-left">提出时间：</div>
<div class="item-right">{{ basicInfo.introductionDate }}</div>
</div>
<div class="box1-right-item">
<div class="item-left">相关领域：</div>
<div class="item-right1">
<div class="right1-item" v-for="item in basicInfo.hylyList" :key="item">{{ item }}</div>
<WarningPane
v-if="riskSignal"
class="risk-signal-pane-top"
:warnningLevel="riskSignal.riskLevel"
:warnningContent="riskSignal.riskContent"
/>
<div class="introduction-wrap-content">
<div class="introduction-wrap-left">
<div class="introduction-wrap-left-box1">
<AnalysisBox title="基本信息" :showAllBtn="false">
<div class="box1-main">
<div class="box1-left">
<img :src="basicInfo.imageUrl || defaultBill" alt="" />
</div>
</div>
<div class="box1-right-item">
<div class="item-left">委员会报告：</div>
<div class="item-right2" v-if="basicInfo.reportList">
<div class="right2-item" v-for="(item, index) in basicInfo.reportList" :key="index">
{{ item }}
</div>
</div>
</div>
<div class="box1-right-item">
<div class="item-left">表决记录：</div>
<div class="item-right3">{{ `全程共进行${basicInfo.votetotal}次唱名表决` }}​</div>
</div>
<div class="box1-right-item">
<div class="item-left">最近状态：</div>
<div class="item-right3">{{ basicInfo.status }}​</div>
</div>
<div class="box1-right-item">
<div class="item-left">立案流程：</div>
<div class="item-right4">
<div
class="step"
v-for="(item, index) in basicInfo.stageList ? [...basicInfo.stageList].reverse() : []"
:key="index"
:style="{ zIndex: (basicInfo.stageList?.length || 0) - index }"
>
<div
class="step-box"
:class="{ 'step-box-active': index === (basicInfo.stageList?.length || 0) - 1 }"
>
{{ item }}
</div>
</div>
</div>
</div>
</div>
</div> -->
<AnalysisBox title="基本信息" :showAllBtn="false">
<div class="box1-main">
<div class="box1-left">
<img :src="basicInfo.imageUrl || defaultBill" alt="" />
</div>
<div class="box1-right">
<div class="box1-right">
<div class="box1-right-item">
<div class="item-left">提案人：</div>
<div class="item-right">{{ basicInfo.tarName }}</div>
......@@ -88,14 +28,13 @@
<div class="box1-right-item">
<div class="item-left">相关领域：</div>
<div class="item-right1">
<!-- <div class="right1-item" v-for="item in basicInfo.hylyList" :key="item">{{ item }}</div> -->
<AreaTag v-for="item, index in basicInfo.hylyList" :key="index" :tagName="item"/>
<AreaTag v-for="item in hylyList" :key="item" :tagName="item" />
</div>
</div>
<div class="box1-right-item">
<div class="item-left">委员会报告：</div>
<div class="item-right2" v-if="basicInfo.reportList">
<div class="right2-item" v-for="(item, index) in basicInfo.reportList" :key="index">
<div class="item-right2" v-if="reportList.length">
<div class="right2-item" v-for="(item, index) in reportList" :key="getReportKey(item, index)">
{{ item }}
</div>
</div>
......@@ -111,11 +50,14 @@
<div class="box1-right-item">
<div class="item-left">立案流程：</div>
<div class="item-right4">
<div class="step"
v-for="(item, index) in basicInfo.stageList ? [...basicInfo.stageList].reverse() : []" :key="index"
:style="{ zIndex: (basicInfo.stageList?.length || 0) - index }">
<div
v-for="(item, index) in reversedStageList"
:key="getStageKey(item, index)"
class="step"
:style="{ zIndex: getStageZIndex(index) }"
>
<div class="step-box"
:class="{ 'step-box-active': index === (basicInfo.stageList?.length || 0) - 1 }">
:class="{ 'step-box-active': index === stageActiveIndex }">
{{ item }}
</div>
</div>
......@@ -126,33 +68,8 @@
</AnalysisBox>
</div>
<div class="introduction-wrap-left-box2">
<!-- <div class="box-header">
<div class="header-left"></div>
<div class="title">法案进展</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box2-main">
<div class="box2-main-center">
<STimeline :dataList="timelineData" />
</div>
</div> -->
<AnalysisBox title="法案进展" :showAllBtn="false">
<template #header-btn>
<!-- <div class="progress-header-btns">
<div class="btn" :class="{ btnActive: progressMode === 'latest' }" @click="handleSwitchProgressMode('latest')">
最新进展
</div>
<div class="btn" :class="{ btnActive: progressMode === 'early' }" @click="handleSwitchProgressMode('early')">
前期进程
</div>
</div> -->
</template>
<div class="box2-main">
<div class="box2-main-center">
......@@ -161,191 +78,86 @@
</div>
</AnalysisBox>
</div>
</div>
<div class="introduction-wrap-right">
<!-- <div class="box-header">
<div class="header-left"></div>
<div class="title">提出人</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="introduction-wrap-right-main">
<div class="right-main-box1">
<div class="name-box">
<div class="person-box">
<div class="person-item" :class="{ nameItemActive: box3BtnActive === item.name }"
@click="handleClcikBox3Btn(item.name, index)" v-for="(item, index) in personList" :key="index">
{{ item.name }}
</div>
</div>
</div>
<div class="info-box">
<div class="info-left">
<img :src="defaultAvatar" alt="" @click="handleClickAvatar(curPerson)" />
<div class="usr-icon1">
<img src="./assets/images/usr-icon1.png" alt="" />
</div>
<div class="usr-icon2">
<img src="./assets/images/usr-icon2.png" alt="" />
</div>
</div>
<div class="info-right">
<div class="info-right-title" @click="handleClickAvatar(curPerson)">{{ curPerson.name }}</div>
<div class="info-right-item">
<div class="item-left">英文名:</div>
<div class="item-right">{{ curPerson.ename }}</div>
</div>
<div class="info-right-item">
<div class="item-left">党派:</div>
<div class="item-right">{{ curPerson.dp }}</div>
</div>
<div class="info-right-item">
<div class="item-left">选区:</div>
<div class="item-right">{{ curPerson.xq }}</div>
</div>
<div class="info-right-item">
<div class="item-left">职位:</div>
<div class="item-right">{{ curPerson.zw }}</div>
<div class="introduction-wrap-right">
<AnalysisBox title="提出人" :showAllBtn="false">
<div class="introduction-wrap-right-main">
<div class="right-main-box1">
<div class="name-box">
<div class="person-box">
<div class="person-item" :class="{ nameItemActive: box3BtnActive === item.name }"
@click="handleClcikBox3Btn(item.name, index)" v-for="(item, index) in personList" :key="index">
{{ item.name }}
</div>
</div>
</div>
</div>
</div>
</div>
<div class="right-main-box2" v-if="curPerson.tagList && curPerson.tagList.length">
<div class="tag-box" :class="{
status0: index % 4 === 0,
status1: index % 4 === 1,
status2: index % 4 === 2,
status3: index % 4 === 3
}" v-for="(tag, index) in curPerson.tagList" :key="index">
{{ tag.industryName }}
</div>
</div>
<div class="right-main-box3">
<div class="right-main-box3-header">
<div class="icon">
<img src="./assets/images/right-main-box3-header-icon.svg" alt="" />
</div>
<div class="title">人物动态</div>
</div>
<div class="right-main-box3-main">
<el-timeline style="max-width: 500px">
<el-timeline-item :timestamp="item.newsDate" placement="top"
v-for="(item, index) in curPerson.newsList?.slice(0, 3)" :key="index">
<div class="timeline-content">
{{ item.newsContent }}
<div class="info-box">
<div class="info-left">
<img class="person-avatar" :src="curPerson.imageUrl || defaultAvatar" alt="" @click="handleClickAvatar(curPerson)" />
<div class="usr-icon1">
<img src="./assets/images/usr-icon1.png" alt="" />
</div>
<div class="usr-icon2">
<img src="./assets/images/usr-icon2.png" alt="" />
</div>
</div>
</el-timeline-item>
</el-timeline>
</div>
<div class="right-main-box3-footer">
<div class="btn-more" @click="handleClickMore2">
<img src="../assets/images/btn-more.png" alt="" />
</div>
</div>
</div>
</div> -->
<AnalysisBox title="提出人" :showAllBtn="false">
<div class="introduction-wrap-right-main">
<div class="right-main-box1">
<div class="name-box">
<!-- <el-select
v-model="selectValue"
placeholder="请选择"
style="width: 180px; margin: 0 10px"
@change="handleChangeFaId"
>
<el-option v-for="item in faList" :key="item.value" :label="item.label" :value="item.id" />
</el-select> -->
<div class="person-box">
<div class="person-item" :class="{ nameItemActive: box3BtnActive === item.name }"
@click="handleClcikBox3Btn(item.name, index)" v-for="(item, index) in personList" :key="index">
{{ item.name }}
<div class="info-right">
<div class="info-right-title" @click="handleClickAvatar(curPerson)">{{ curPerson.name }}</div>
<div class="info-right-item">
<div class="item-left">英文名:</div>
<div class="item-right">{{ curPerson.ename }}</div>
</div>
<div class="info-right-item">
<div class="item-left">党派:</div>
<div class="item-right">{{ curPerson.dp }}</div>
</div>
<div class="info-right-item">
<div class="item-left">选区:</div>
<div class="item-right">{{ curPerson.xq }}</div>
</div>
<div class="info-right-item">
<div class="item-left">职位:</div>
<div class="item-right">{{ curPerson.zw }}</div>
</div>
</div>
</div>
</div>
<div class="info-box">
<div class="info-left">
<img class="person-avatar" :src="curPerson.imageUrl || defaultAvatar" alt="" @click="handleClickAvatar(curPerson)" />
<div class="usr-icon1">
<img src="./assets/images/usr-icon1.png" alt="" />
</div>
<div class="usr-icon2">
<img src="./assets/images/usr-icon2.png" alt="" />
</div>
<div class="right-main-box2" v-if="curPerson.tagList && curPerson.tagList.length">
<div class="tag-box status"v-for="(tag, index) in curPerson.tagList" :key="index">
{{ tag }}
</div>
<div class="info-right">
<div class="info-right-title" @click="handleClickAvatar(curPerson)">{{ curPerson.name }}</div>
<div class="info-right-item">
<div class="item-left">英文名:</div>
<div class="item-right">{{ curPerson.ename }}</div>
</div>
<div class="info-right-item">
<div class="item-left">党派:</div>
<div class="item-right">{{ curPerson.dp }}</div>
</div>
<div class="info-right-item">
<div class="item-left">选区:</div>
<div class="item-right">{{ curPerson.xq }}</div>
</div>
<div class="info-right-item">
<div class="item-left">职位:</div>
<div class="item-right">{{ curPerson.zw }}</div>
</div>
<div class="right-main-box3">
<div class="right-main-box3-header">
<div class="icon">
<img src="./assets/images/right-main-box3-header-icon.svg" alt="" />
</div>
<div class="title">人物动态</div>
</div>
</div>
</div>
<div class="right-main-box2" v-if="curPerson.tagList && curPerson.tagList.length">
<!-- <WordCloudMap :data="wordCloudData" :shape="circle" /> -->
<div class="tag-box status"v-for="(tag, index) in curPerson.tagList" :key="index">
{{ tag }}
</div>
</div>
<div class="right-main-box3">
<div class="right-main-box3-header">
<div class="icon">
<img src="./assets/images/right-main-box3-header-icon.svg" alt="" />
<div class="right-main-box3-main">
<el-timeline style="max-width: 500px">
<el-timeline-item :timestamp="item.newsDate" placement="top"
v-for="(item, index) in curPerson.newsList?.slice(0, 3)" :key="index">
<div class="timeline-content">
{{ item.newsContent }}
</div>
</el-timeline-item>
</el-timeline>
</div>
<div class="title">人物动态</div>
</div>
<div class="right-main-box3-main">
<el-timeline style="max-width: 500px">
<el-timeline-item :timestamp="item.newsDate" placement="top"
v-for="(item, index) in curPerson.newsList?.slice(0, 3)" :key="index">
<div class="timeline-content">
{{ item.newsContent }}
</div>
</el-timeline-item>
<!-- <el-timeline-item timestamp="2018/4/3" placement="top">
<div class="timeline-content">
借OBBBA通过势头，在得州巩固军工、能源集团支持，为2026年连任铺路，同时协调党内资源争夺关键摇摆选区。
</div>
</el-timeline-item>
<el-timeline-item timestamp="2018/4/2" placement="top">
<div class="timeline-content">
特朗普力挺阿灵顿，白宫声明强调法案“美丽且必要”，双方矛盾凸显共和党内
​商业资本与传统能源势力裂痕。
</div>
</el-timeline-item> -->
</el-timeline>
</div>
</div>
</div>
</AnalysisBox>
</AnalysisBox>
</div>
</div>
</div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { computed, onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import WordCloudMap from "./WordCloudMap.vue";
import STimeline from "./STimeline.vue";
import WarningPane from "@/components/base/WarningPane/index.vue";
import { getBillInfo, getBillPerson, getBillEvent, getBillDyqk } from "@/api/bill";
import defaultAvatar from "../assets/images/default-icon1.png";
import defaultNew from "../assets/images/default-icon-news.png";
......@@ -383,6 +195,19 @@ const handleSwitchProgressMode = mode => {
const basicInfo = ref({});
const riskSignal = computed(() => basicInfo.value?.riskSignalVO || null);
const hylyList = computed(() => (Array.isArray(basicInfo.value?.hylyList) ? basicInfo.value.hylyList : []));
const reportList = computed(() => (Array.isArray(basicInfo.value?.reportList) ? basicInfo.value.reportList : []));
const reversedStageList = computed(() => {
const list = Array.isArray(basicInfo.value?.stageList) ? basicInfo.value.stageList : [];
return [...list].reverse();
});
const stageListLength = computed(() => (Array.isArray(basicInfo.value?.stageList) ? basicInfo.value.stageList.length : 0));
const stageActiveIndex = computed(() => stageListLength.value - 1);
const getStageZIndex = index => stageListLength.value - index;
const getStageKey = (item, index) => `${item}-${index}`;
const getReportKey = (item, index) => `${item}-${index}`;
const handleGetBasicInfo = async () => {
const params = {
id: billId.value
......@@ -452,8 +277,10 @@ onMounted(() => {
<style lang="scss" scoped>
.introduction-wrap {
width: 100%;
height: 880px;
min-height: 880px;
height: auto;
display: flex;
flex-direction: column;
.progress-header-btns {
display: flex;
......@@ -536,6 +363,19 @@ onMounted(() => {
}
}
.risk-signal-pane-top {
width: 1600px;
margin-top: 16px;
margin-right: 18px;
height: 116px;
min-height: 116px;
flex-shrink: 0;
}
.introduction-wrap-content {
display: flex;
}
.introduction-wrap-left {
width: 1064px;
margin-top: 16px;
......@@ -1358,6 +1198,7 @@ onMounted(() => {
line-height: 26px;
display: -webkit-box;
-webkit-box-orient: vertical;
line-clamp: 3;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
......
src/views/bill/template/index.vue
浏览文件 @ 58537cbd
......@@ -387,7 +387,7 @@ const handleChangeBill = val => {
};
const handleOpenVersionCompare = () => {
const targetUrl = `/billLayout/deepDig/processOverview?billId=${route.query.billId}`;
const targetUrl = `/billLayout/versionCompare?billId=${route.query.billId}`;
window.open(targetUrl, "_blank");
};
......@@ -404,8 +404,8 @@ const handleGetBillList = async () => {
billList.value = rawList
.map(item => {
return {
label: item.bbmc,
value: item.bbmc
label: item.contentZh,
value: item.contentZh
};
})
.filter(item => {
......
src/views/bill/versionCompare/assert/icons/translate-icons.svg 0 → 100644
浏览文件 @ 58537cbd
<svg viewBox="0 0 13.5996 12.666" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="13.599609" height="12.666016" fill="none" customFrame="#000000">
<path id="矢量 455" d="M2 8.66667L2 10C1.99999 10.0416 2.00192 10.0831 2.00578 10.1245C2.00965 10.1659 2.01545 10.207 2.02317 10.2479C2.03089 10.2888 2.0405 10.3292 2.052 10.3691C2.0635 10.4091 2.07684 10.4484 2.09202 10.4872C2.1072 10.5259 2.12416 10.5638 2.14289 10.6009C2.16162 10.6381 2.18204 10.6742 2.20416 10.7095C2.22627 10.7447 2.24998 10.7788 2.27529 10.8118C2.3006 10.8448 2.32739 10.8765 2.35566 10.907C2.38394 10.9375 2.41358 10.9666 2.44458 10.9944C2.47558 11.0221 2.50781 11.0483 2.54126 11.073C2.57472 11.0977 2.60925 11.1208 2.64487 11.1423C2.68048 11.1637 2.71702 11.1835 2.75448 11.2016C2.79195 11.2196 2.83017 11.2359 2.86916 11.2503C2.90814 11.2648 2.94772 11.2775 2.98788 11.2882C3.02805 11.299 3.06863 11.3079 3.10963 11.3149C3.15063 11.3218 3.19186 11.3269 3.23333 11.33L3.33333 11.3333L5.33333 11.3333L5.33333 12.6667L3.33333 12.6667C3.246 12.6667 3.15887 12.6624 3.07195 12.6538C2.98504 12.6453 2.89875 12.6325 2.81309 12.6154C2.72743 12.5984 2.64282 12.5772 2.55924 12.5518C2.47566 12.5265 2.39353 12.4971 2.31284 12.4637C2.23216 12.4303 2.1533 12.393 2.07627 12.3518C1.99925 12.3106 1.92443 12.2658 1.85181 12.2173C1.77919 12.1687 1.70913 12.1168 1.64162 12.0614C1.57411 12.006 1.50947 11.9474 1.44771 11.8856C1.38596 11.8239 1.32738 11.7592 1.27197 11.6917C1.21657 11.6242 1.1646 11.5541 1.11608 11.4815C1.06756 11.4089 1.02271 11.3341 0.981543 11.2571C0.940373 11.18 0.903077 11.1012 0.869654 11.0205C0.836232 10.9398 0.806845 10.8577 0.781492 10.7741C0.75614 10.6905 0.734944 10.6059 0.717906 10.5202C0.700867 10.4346 0.688068 10.3483 0.679507 10.2614C0.670947 10.1745 0.666666 10.0873 0.666666 10L0.666666 8.66667L2 8.66667L2 8.66667ZM10.6667 5.33333L13.6 12.6667L12.1633 12.6667L11.3627 10.6667L8.636 10.6667L7.83667 12.6667L6.40067 12.6667L9.33333 5.33333L10.6667 5.33333L10.6667 5.33333ZM10 7.25667L9.16867 9.33333L10.83 9.33333L10 7.25667ZM4 0L4 1.33333L6.66667 1.33333L6.66667 6L4 6L4 8L2.66667 8L2.66667 6L0 6L0 1.33333L2.66667 1.33333L2.66667 0L4 0ZM10 0.666667C10.0873 0.666667 10.1745 0.670947 10.2614 0.679507C10.3483 0.688068 10.4346 0.700867 10.5202 0.717906C10.6059 0.734944 10.6905 0.75614 10.7741 0.781492C10.8577 0.806845 10.9398 0.836232 11.0205 0.869654C11.1012 0.903077 11.18 0.940373 11.2571 0.981543C11.3341 1.02271 11.4089 1.06756 11.4815 1.11608C11.5541 1.1646 11.6242 1.21657 11.6917 1.27197C11.7592 1.32738 11.8239 1.38596 11.8856 1.44772C11.9474 1.50947 12.006 1.57411 12.0614 1.64162C12.1168 1.70913 12.1687 1.77919 12.2173 1.85181C12.2658 1.92443 12.3106 1.99925 12.3518 2.07628C12.393 2.1533 12.4303 2.23216 12.4637 2.31284C12.4971 2.39353 12.5265 2.47566 12.5518 2.55924C12.5772 2.64282 12.5984 2.72743 12.6154 2.81309C12.6325 2.89875 12.6453 2.98504 12.6538 3.07195C12.6624 3.15887 12.6667 3.246 12.6667 3.33333L12.6667 4.66667L11.3333 4.66667L11.3333 3.33333C11.3333 3.28966 11.3312 3.2461 11.3269 3.20264C11.3226 3.15919 11.3162 3.11604 11.3077 3.07321C11.2992 3.03038 11.2886 2.98807 11.2759 2.94629C11.2632 2.9045 11.2486 2.86343 11.2318 2.82309C11.2151 2.78274 11.1965 2.74332 11.1759 2.7048C11.1553 2.66629 11.1329 2.62888 11.1086 2.59257C11.0844 2.55626 11.0584 2.52123 11.0307 2.48748C11.003 2.45372 10.9737 2.4214 10.9428 2.39052C10.9119 2.35965 10.8796 2.33036 10.8459 2.30265C10.8121 2.27495 10.7771 2.24897 10.7408 2.22471C10.7045 2.20045 10.667 2.17802 10.6285 2.15744C10.59 2.13685 10.5506 2.1182 10.5102 2.10149C10.4699 2.08478 10.4288 2.07009 10.387 2.05741C10.3453 2.04474 10.303 2.03414 10.2601 2.02562C10.2173 2.0171 10.1741 2.0107 10.1307 2.00642C10.0872 2.00214 10.0437 2 10 2L8 2L8 0.666667L10 0.666667L10 0.666667ZM2.66667 2.66667L1.33333 2.66667L1.33333 4.66667L2.66667 4.66667L2.66667 2.66667ZM5.33333 2.66667L4 2.66667L4 4.66667L5.33333 4.66667L5.33333 2.66667Z" fill="rgb(95,101,108)" fill-rule="nonzero" />
</svg>
src/views/bill/versionCompare/index.vue 0 → 100644
浏览文件 @ 58537cbd
<template>
<div class="version-compare-wrap">
<div class="compare-top">
<div class="compare-top-col">
<div class="compare-top-label">原版本：</div>
<el-select v-model="oldVersionId" placeholder="请选择版本" class="compare-top-select" clearable>
<el-option
v-for="item in versionOptions"
:key="item.value"
:label="item.label"
:value="item.value"
:disabled="item.value === newVersionId"
/>
</el-select>
</div>
<div class="compare-top-col">
<div class="compare-top-label">现版本：</div>
<el-select v-model="newVersionId" placeholder="请选择版本" class="compare-top-select" clearable>
<el-option
v-for="item in versionOptions"
:key="item.value"
:label="item.label"
:value="item.value"
:disabled="item.value === oldVersionId"
/>
</el-select>
</div>
</div>
<div class="compare-tools">
<div class="compare-tools-tabs" ref="tabsWrapRef">
<button
v-for="(tab, index) in diffTabs"
:key="tab.value"
class="compare-tools-tab"
:class="{ 'is-active': diffType === tab.value }"
type="button"
@click="handleDiffTabClick(tab.value)"
:ref="el => setTabRef(el, index)"
>
<span class="label">{{ tab.label }}</span>
<span
class="count"
v-if="diffCounts[tab.value] !== null && diffCounts[tab.value] !== undefined"
>
{{ diffCounts[tab.value] }}
</span>
</button>
<span class="compare-tools-tabs-active" :style="activeBarStyle"></span>
</div>
<div class="compare-tools-actions">
<el-checkbox v-model="onlyChinaRelated" label="只看涉华条款" size="large" />
<div class="compare-tools-switches">
<div class="compare-tools-switch">
<el-switch v-model="termsHighlight" inline-prompt/>
<span class="label">高亮实体</span>
</div>
<div class="compare-tools-switch">
<el-switch v-model="termsShowOriginal" inline-prompt/>
<span class="label">
<img class="label-icon" :src="translateIcon" alt="" />
显示原文
</span>
</div>
</div>
<div class="find-word-wrap">
<div class="find-word-box" v-if="findWordBox">
<div class="find-word-input">
<el-input ref="findWordInputRef" v-model="findWordTxt" placeholder="查找条款内容" clearable
@input="handleUpdateWord" />
</div>
<div class="find-word-limit">{{ findWordNum }}/{{ findWordMax }}</div>
<div class="find-word-icon" @click="handleFindWord('last')">
<el-icon><ArrowUp /></el-icon>
</div>
<div class="find-word-icon" @click="handleFindWord('next')">
<el-icon><ArrowDown /></el-icon>
</div>
<div class="find-word-icon" @click="handleFindWord('close')">
<el-icon><Close /></el-icon>
</div>
</div>
<el-button type="primary" plain class="find-word-open-btn"
@click="handleFindWord('open')">
<el-icon class="find-word-open-icon"><Search /></el-icon>
查找
</el-button>
</div>
</div>
</div>
<div class="compare-columns" v-loading="isLoading" @click="handleEntityClick">
<div class="compare-row" v-for="(pair, index) in comparePairs" :key="getPairKey(pair, index)">
<div class="compare-cell">
<template v-if="pair?.oldTerm">
<div class="term-body">
<div class="term-main">
<div class="term-row term-row-cn">
<div class="term-no-cn">第{{ pair.oldTerm.tkxh }}条.</div>
<div class="term-content-cn" v-html="getTermContentHtml(pair.oldTerm, 'cn')"></div>
</div>
<div class="term-row term-row-en" v-if="termsShowOriginal">
<div class="term-no-en">Sec.{{ pair.oldTerm.tkxh }}</div>
<div class="term-content-en" v-html="getTermContentHtml(pair.oldTerm, 'en')"></div>
</div>
</div>
</div>
</template>
<div v-else class="term-empty">—</div>
</div>
<div class="compare-cell">
<template v-if="pair?.newTerm">
<div class="term-body">
<div class="term-main">
<div class="term-row term-row-cn">
<div class="term-no-cn">第{{ pair.newTerm.tkxh }}条.</div>
<div class="term-content-cn" v-html="getTermContentHtml(pair.newTerm, 'cn')"></div>
</div>
<div class="term-row term-row-en" v-if="termsShowOriginal">
<div class="term-no-en">Sec.{{ pair.newTerm.tkxh }}</div>
<div class="term-content-en" v-html="getTermContentHtml(pair.newTerm, 'en')"></div>
</div>
</div>
</div>
</template>
<div v-else class="term-empty">—</div>
</div>
</div>
</div>
<div class="compare-footer">
<div class="compare-footer-text">{{ `共 ${total} 项` }}</div>
<div class="compare-footer-right">
<el-pagination
background
layout="prev, pager, next"
:total="total"
v-model:current-page="currentPage"
v-model:page-size="pageSize"
@current-change="handleCurrentChange"
/>
</div>
</div>
</div>
</template>
<script setup>
import { computed, nextTick, onMounted, ref, watch } from "vue";
import { useRoute } from "vue-router";
import { getBillContentId, getBillVersionCompare } from "@/api/bill";
import { extractTextEntity } from "@/api/intelligent/index";
import { ArrowDown, ArrowUp, Close, Search } from "@element-plus/icons-vue";
import translateIcon from "./assert/icons/translate-icons.svg";
const route = useRoute();
const billId = computed(() => route.query.billId);
const versionOptions = ref([]);
const oldVersionId = ref("");
const newVersionId = ref("");
const diffType = ref("CHANGE");
const onlyChinaRelated = ref(false);
const keyword = ref("");
const termsHighlight = ref(true);
const termsShowOriginal = ref(true);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const diffTabs = [
{ label: "变更", value: "CHANGE" },
{ label: "新增", value: "ADD" },
{ label: "删除", value: "DELETE" }
];
const diffCounts = ref({ CHANGE: 0, ADD: 0, DELETE: 0 });
const tabsWrapRef = ref(null);
const tabItemRefs = ref([]);
const activeBarStyle = ref({});
const findWordBox = ref(false);
const findWordInputRef = ref();
const findWordTxt = ref("");
const findWordKeyword = ref("");
const findWordNum = ref(0);
const findWordMax = ref(0);
const findWordTimer = ref(null);
const isLoading = ref(false);
const comparePairs = ref([]);
const compareRequestToken = ref(0);
const handleLoadVersionOptions = async () => {
if (!billId.value) {
versionOptions.value = [];
oldVersionId.value = "";
newVersionId.value = "";
return;
}
const res = await getBillContentId({ id: billId.value });
const rawList = Array.isArray(res?.data) ? res.data : [];
const seen = new Set();
versionOptions.value = rawList
.map(item => {
return {
label: item?.contentZh,
value: item?.contentZh
};
})
.filter(item => item.value)
.filter(item => {
if (seen.has(item.value)) return false;
seen.add(item.value);
return true;
});
if (!versionOptions.value.length) {
oldVersionId.value = "";
newVersionId.value = "";
return;
}
if (versionOptions.value.length === 1) {
oldVersionId.value = versionOptions.value[0].value;
newVersionId.value = "";
return;
}
oldVersionId.value = versionOptions.value[0].value;
newVersionId.value = versionOptions.value[versionOptions.value.length - 1].value;
};
const normalizeDiffType = value => {
if (value === "ADD") return "ADD";
if (value === "DELETE") return "DELETE";
return "CHANGE";
};
const setTabRef = (el, index) => {
if (el) tabItemRefs.value[index] = el;
};
const updateActiveBar = () => {
const index = diffTabs.findIndex(tab => tab.value === diffType.value);
const target = tabItemRefs.value[index];
const wrap = tabsWrapRef.value;
if (!target || !wrap) {
activeBarStyle.value = {};
return;
}
const wrapRect = wrap.getBoundingClientRect();
const targetRect = target.getBoundingClientRect();
activeBarStyle.value = {
width: `${targetRect.width}px`,
transform: `translateX(${targetRect.left - wrapRect.left}px)`
};
};
const handleDiffTabClick = value => {
if (diffType.value === value) return;
diffType.value = value;
nextTick(() => {
updateActiveBar();
});
};
const updateDiffCounts = list => {
const counts = { CHANGE: 0, ADD: 0, DELETE: 0 };
for (const pair of list) {
const isOld = Boolean(pair?.oldTerm);
const isNew = Boolean(pair?.newTerm);
if (isOld && isNew) {
counts.CHANGE += 1;
} else if (isNew && !isOld) {
counts.ADD += 1;
} else if (isOld && !isNew) {
counts.DELETE += 1;
}
}
diffCounts.value = counts;
};
const mapDiffTypeToStatus = value => {
const diff = normalizeDiffType(value);
if (diff === "ADD") return "add";
if (diff === "DELETE") return "del";
return "update";
};
const mapStatusToDiffType = value => {
if (value === "add") return "ADD";
if (value === "del") return "DELETE";
return "CHANGE";
};
const mapVersionCompareItemToPair = item => {
const oldTerm = item?.originalClauseMainId
? {
id: item.originalClauseMainId,
ywid: item.originalClauseMainId,
tkxh: item?.originalClauseNumber ?? "",
fynr: item?.originalContentZh ?? "",
ywnr: item?.originalContent ?? ""
}
: null;
const newTerm = item?.currentClauseMainId
? {
id: item.currentClauseMainId,
ywid: item.currentClauseMainId,
tkxh: item?.currentClauseNumber ?? "",
fynr: item?.currentContentZh ?? "",
ywnr: item?.currentContent ?? ""
}
: null;
return { oldTerm, newTerm };
};
const fetchComparePage = async ({ diff, page, size }) => {
const params = {
billId: billId.value,
content: keyword.value,
currentPage: Math.max(1, Number(page) || 1),
currentVersion: newVersionId.value,
isCn: onlyChinaRelated.value ? "Y" : "N",
originalVersion: oldVersionId.value,
pageSize: Math.max(1, Number(size) || 10),
status: mapDiffTypeToStatus(diff)
};
const res = await getBillVersionCompare(params);
const data = res?.data?.data ?? res?.data ?? {};
const raw = Array.isArray(data?.content) ? data.content : [];
const countType = Array.isArray(data?.countType) ? data.countType : [];
return {
list: raw.map(mapVersionCompareItemToPair),
total: Number(data?.totalElements ?? 0) || 0,
countType
};
};
const getCountByChangeType = (countTypeList, changeTypeLabel) => {
const list = Array.isArray(countTypeList) ? countTypeList : [];
const target = list.find(item => String(item?.changeType ?? "") === changeTypeLabel);
return Number(target?.count ?? 0) || 0;
};
const loadComparePairs = async () => {
if (!billId.value || !oldVersionId.value || !newVersionId.value) {
comparePairs.value = [];
updateDiffCounts([]);
total.value = 0;
return;
}
const currentToken = ++compareRequestToken.value;
isLoading.value = true;
try {
const currentRes = await fetchComparePage({
diff: diffType.value,
page: currentPage.value,
size: pageSize.value
});
if (currentToken !== compareRequestToken.value) return;
comparePairs.value = currentRes.list;
total.value = currentRes.total;
diffCounts.value = {
CHANGE: getCountByChangeType(currentRes.countType, "更新"),
ADD: getCountByChangeType(currentRes.countType, "新增"),
DELETE: getCountByChangeType(currentRes.countType, "删除")
};
await ensureEntitiesForPairs(comparePairs.value);
} catch (error) {
if (currentToken !== compareRequestToken.value) return;
comparePairs.value = [];
updateDiffCounts([]);
total.value = 0;
} finally {
if (currentToken === compareRequestToken.value) {
isLoading.value = false;
}
}
};
const handleCurrentChange = page => {
currentPage.value = Number(page) || 1;
};
const getPairKey = (pair, index) => {
const oldKey = pair?.oldTerm?.ywid ?? pair?.oldTerm?.id ?? pair?.oldTerm?.tkxh ?? "";
const newKey = pair?.newTerm?.ywid ?? pair?.newTerm?.id ?? pair?.newTerm?.tkxh ?? "";
return `${oldKey || "old"}__${newKey || "new"}__${index}`;
};
const escapeHtml = value => {
const str = String(value ?? "");
return str
.replace(/&/g, "&amp;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;")
.replace(/'/g, "&#39;");
};
const escapeRegExp = text => {
return String(text || "").replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
};
const getSearchRanges = (text, searchTerm) => {
const rawText = String(text ?? "");
const term = String(searchTerm ?? "").trim();
if (!rawText || !term) return [];
const ranges = [];
const reg = new RegExp(escapeRegExp(term), "g");
let match;
while ((match = reg.exec(rawText)) !== null) {
ranges.push({ start: match.index, end: match.index + match[0].length });
if (match[0].length === 0) reg.lastIndex += 1;
}
return ranges;
};
const normalizeEntities = entities => {
const list = Array.isArray(entities) ? entities : [];
return list
.map(item => {
return {
text_span: String(item?.text_span ?? "").trim(),
type: String(item?.type ?? "").trim()
};
})
.filter(item => item.text_span);
};
const getEntityRanges = (text, entities) => {
const ranges = [];
const rawText = String(text ?? "");
if (!rawText) return ranges;
const list = normalizeEntities(entities).sort((a, b) => b.text_span.length - a.text_span.length);
for (const ent of list) {
let startIndex = 0;
while (startIndex < rawText.length) {
const idx = rawText.indexOf(ent.text_span, startIndex);
if (idx === -1) break;
ranges.push({ start: idx, end: idx + ent.text_span.length, ent });
startIndex = idx + ent.text_span.length;
}
}
ranges.sort((a, b) => a.start - b.start || b.end - a.end);
const merged = [];
let lastEnd = 0;
for (const r of ranges) {
if (r.start < lastEnd) continue;
merged.push(r);
lastEnd = r.end;
}
return merged;
};
const buildHighlightedHtml = (text, entities, enableHighlight, searchTerm) => {
const rawText = String(text ?? "");
if (!rawText) return "";
const safeText = escapeHtml(rawText).replace(/\n/g, "<br />");
const term = String(searchTerm ?? "").trim();
const enableSearch = Boolean(term);
if (!enableHighlight && !enableSearch) return safeText;
const ranges = getEntityRanges(rawText, entities);
const searchRanges = enableSearch ? getSearchRanges(rawText, term) : [];
if (!ranges.length && !searchRanges.length) return safeText;
const merged = [];
for (const r of ranges) {
merged.push({ start: r.start, end: r.end, type: "entity", ent: r.ent });
}
for (const r of searchRanges) {
const overlapsEntity = ranges.some(er => r.start < er.end && r.end > er.start);
if (overlapsEntity) continue;
merged.push({ start: r.start, end: r.end, type: "search" });
}
merged.sort((a, b) => a.start - b.start || b.end - a.end);
let html = "";
let cursor = 0;
for (const r of merged) {
if (cursor < r.start) {
html += escapeHtml(rawText.slice(cursor, r.start));
}
const spanText = rawText.slice(r.start, r.end);
if (r.type === "entity") {
const type = escapeHtml(r.ent?.type ?? "");
const text = escapeHtml(spanText);
html += `<span class="term-entity" data-entity-type="${type}" data-entity-text="${text}">${text}</span>`;
} else {
html += `<span class="term-find-highlight">${escapeHtml(spanText)}</span>`;
}
cursor = r.end;
}
if (cursor < rawText.length) {
html += escapeHtml(rawText.slice(cursor));
}
return html.replace(/\n/g, "<br />");
};
const handleEntityClick = event => {
const el = event?.target?.closest?.("span.term-entity");
if (!el) return;
const q = String(el.getAttribute("data-entity-text") ?? "").trim();
if (!q) return;
const url = `https://www.bing.com/search?q=${encodeURIComponent(q)}`;
window.open(url, "_blank", "noopener");
};
const termEntityCache = ref(new Map());
const entityRequestToken = ref(0);
const getTermEntityKey = (term, lang) => {
const baseKey = term?.ywid ?? term?.id ?? term?.tkxh ?? "";
return `${baseKey}__${lang}`;
};
const ensureEntitiesForPairs = async pairs => {
if (!termsHighlight.value) return;
const list = Array.isArray(pairs) ? pairs : [];
if (!list.length) return;
const currentToken = ++entityRequestToken.value;
const tasks = [];
const maxTasks = 40;
for (const pair of list) {
const terms = [pair?.oldTerm, pair?.newTerm].filter(Boolean);
for (const term of terms) {
const cnKey = getTermEntityKey(term, "cn");
const enKey = getTermEntityKey(term, "en");
if (!termEntityCache.value.has(cnKey) && String(term?.fynr ?? "").trim()) {
tasks.push({ key: cnKey, text: term.fynr });
}
if (!termEntityCache.value.has(enKey) && String(term?.ywnr ?? "").trim()) {
tasks.push({ key: enKey, text: term.ywnr });
}
if (tasks.length >= maxTasks) break;
}
if (tasks.length >= maxTasks) break;
}
if (!tasks.length) return;
try {
const results = await Promise.all(
tasks.map(async item => {
const res = await extractTextEntity(item.text);
const entities = normalizeEntities(res?.result ?? res?.data?.result ?? res?.data ?? res);
return { key: item.key, entities };
})
);
if (currentToken !== entityRequestToken.value) return;
for (const r of results) {
termEntityCache.value.set(r.key, r.entities);
}
} catch (error) {
if (currentToken !== entityRequestToken.value) return;
}
};
const getTermContentHtml = (term, lang) => {
const raw = lang === "en" ? term?.ywnr : term?.fynr;
const key = getTermEntityKey(term, lang);
const entities = termEntityCache.value.get(key) || [];
return buildHighlightedHtml(raw, entities, termsHighlight.value, findWordKeyword.value);
};
const countOccurrences = (text, searchTerm) => {
const rawText = String(text ?? "");
const term = String(searchTerm ?? "").trim();
if (!rawText || !term) return 0;
const reg = new RegExp(escapeRegExp(term), "g");
const matches = rawText.match(reg);
return matches ? matches.length : 0;
};
const updateActiveFindHighlight = () => {
const spans = document.querySelectorAll("span.term-find-highlight");
spans.forEach((span, index) => {
if (index + 1 === findWordNum.value) {
span.classList.add("is-active");
span.scrollIntoView({ block: "center" });
} else {
span.classList.remove("is-active");
}
});
};
const doUpdateFindWord = async () => {
findWordNum.value = 0;
findWordMax.value = 0;
const term = String(findWordTxt.value || "").trim();
findWordKeyword.value = term;
if (!term) {
await nextTick();
return;
}
const list = Array.isArray(comparePairs.value) ? comparePairs.value : [];
for (const pair of list) {
const terms = [pair?.oldTerm, pair?.newTerm].filter(Boolean);
for (const t of terms) {
findWordMax.value += countOccurrences(t?.fynr, term);
if (termsShowOriginal.value) {
findWordMax.value += countOccurrences(t?.ywnr, term);
}
}
}
if (findWordMax.value > 0) {
await nextTick();
findWordNum.value = 1;
updateActiveFindHighlight();
}
};
const handleUpdateWord = () => {
if (findWordTimer.value) {
clearTimeout(findWordTimer.value);
findWordTimer.value = null;
}
findWordTimer.value = setTimeout(() => {
doUpdateFindWord();
}, 300);
};
const handleFindWord = event => {
switch (event) {
case "open":
findWordBox.value = true;
nextTick(() => {
findWordInputRef.value?.focus?.();
});
break;
case "last":
if (findWordMax.value > 1) {
findWordNum.value = findWordNum.value === 1 ? findWordMax.value : findWordNum.value - 1;
updateActiveFindHighlight();
}
break;
case "next":
if (findWordMax.value > 1) {
findWordNum.value = findWordNum.value === findWordMax.value ? 1 : findWordNum.value + 1;
updateActiveFindHighlight();
}
break;
case "close":
findWordBox.value = false;
findWordTxt.value = "";
findWordKeyword.value = "";
findWordNum.value = 0;
findWordMax.value = 0;
break;
}
};
watch(
[billId, oldVersionId, newVersionId, diffType, onlyChinaRelated, keyword, currentPage, pageSize],
() => {
loadComparePairs();
},
{ immediate: true }
);
watch(diffType, () => {
currentPage.value = 1;
nextTick(() => {
updateActiveBar();
});
});
watch([oldVersionId, newVersionId, onlyChinaRelated, keyword], () => {
currentPage.value = 1;
});
watch(termsHighlight, () => {
ensureEntitiesForPairs(comparePairs.value);
});
watch(
[comparePairs, termsShowOriginal],
() => {
if (!findWordBox.value) return;
doUpdateFindWord();
},
{ deep: true }
);
onMounted(async () => {
await handleLoadVersionOptions();
nextTick(() => {
updateActiveBar();
});
});
</script>
<style lang="scss" scoped>
.version-compare-wrap {
display: flex;
flex-direction: column;
row-gap: 16px;
width: 100%;
background: #ffffff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
padding: 16px 75px;
box-sizing: border-box;
}
.compare-top {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 37px;
margin-top: 0;
}
.compare-top-col {
display: flex;
align-items: center;
gap: 22px;
background: transparent;
border-radius: 0;
padding: 0;
box-shadow: none;
}
.compare-top-label {
font-size: 16px;
font-weight: 400;
color: var(--text-primary-65-color);
white-space: nowrap;
}
.compare-top-select {
flex: 1;
:deep(.el-select__wrapper) {
background-color: rgb(246, 250, 255);
box-shadow: 0 0 0 1px var(--color-primary-35) inset;
}
:deep(.el-select__wrapper.is-hovering) {
box-shadow: 0 0 0 1px var(--color-primary-35) inset;
}
:deep(.el-select__wrapper.is-focused) {
box-shadow: 0 0 0 1px var(--color-primary-35) inset;
}
:deep(.el-select__selected-item),
:deep(.el-select__placeholder),
:deep(.el-select__input),
:deep(.el-select__caret),
:deep(.el-select__suffix),
:deep(.el-select__icon) {
color: var(--color-primary-100);
}
}
.compare-tools {
height: 66px;
border-bottom: 1px solid var(--border-black-5);
border-top: 1px solid var(--border-black-5);
background: transparent;
display: flex;
align-items: center;
gap: 24px;
flex-wrap: nowrap;
white-space: nowrap;
}
.compare-tools-tabs {
flex: 0 0 auto;
position: relative;
display: flex;
align-items: center;
gap: 28px;
height: 100%;
}
.compare-tools-tab {
background: transparent;
border: none;
padding: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 16px;
font-weight: 400;
color: var(--text-primary-65-color);
position: relative;
&.is-active {
color: var(--color-primary-100);
}
&:focus-visible {
outline: 2px solid rgba(66, 133, 244, 0.5);
outline-offset: 4px;
border-radius: 6px;
}
.label {
line-height: 1;
}
.count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 6px;
border-radius: 999px;
background: var(--color-primary-100);
color: var(--bg-white-100);
font-size: 12px;
font-weight: 600;
}
}
.compare-tools-tabs-active {
position: absolute;
left: 0;
bottom: -1px;
height: 2px;
background: var(--color-primary-100);
border-radius: 2px;
transition: transform 0.2s ease, width 0.2s ease;
}
.compare-tools-actions {
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap;
margin-left: auto;
justify-content: flex-end;
font-size: 16px;
font-weight: 400;
color: var(--text-primary-65-color);
:deep(.el-checkbox__label) {
font-size: 16px;
font-weight: 400;
color: var(--text-primary-65-color);
}
}
.compare-tools-switches {
display: flex;
align-items: center;
gap: 16px;
}
.compare-tools-switch {
display: inline-flex;
align-items: center;
gap: 8px;
.label {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 16px;
font-weight: 400;
color: var(--text-primary-65-color);
}
}
.label-icon {
width: 16px;
height: 16px;
}
.compare-tools-search {
display: inline-flex;
align-items: center;
gap: 8px;
}
.find-word-box {
width: 430px;
height: 60px;
border: 1px solid rgba(230, 231, 232, 1);
background-color: #ffffff;
border-radius: 6px;
display: flex;
align-items: center;
position: absolute;
right: 0;
top: -68px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
.find-word-input {
flex: 1;
min-width: 0;
padding-left: 8px;
}
.find-word-limit {
border-right: solid 1px rgba(230, 231, 232, 1);
color: #5f656c;
padding: 0 16px 0 8px;
white-space: nowrap;
}
.find-word-icon {
padding: 6px 10px;
margin: 0 2px;
cursor: pointer;
display: inline-flex;
align-items: center;
}
}
.find-word-wrap {
position: relative;
display: inline-flex;
align-items: center;
}
.find-word-open-btn {
height: 32px;
background-color: var(--bg-white-100);
border-color: var(--bg-black-10);
color: var(--text-primary-80-color);
&:hover {
background-color: var(--bg-black-5);
border-color: var(--bg-black-10);
color: var(--text-primary-80-color);
}
&:active {
background-color: var(--bg-black-10);
border-color: var(--bg-black-10);
color: var(--text-primary-80-color);
}
}
.find-word-open-icon {
margin-right: 4px;
}
:deep(span.term-find-highlight) {
background-color: #ffff00;
}
:deep(span.term-find-highlight.is-active) {
background-color: #ff9632;
}
.compare-columns {
margin-top: 16px;
display: flex;
flex-direction: column;
}
.compare-row {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
}
.compare-cell {
width: 100%;
box-sizing: border-box;
border-radius: 2px;
background: var(--bg-white-100);
display: flex;
align-items: flex-start;
position: relative;
padding: 16px;
}
.compare-row:nth-child(2n-1) .compare-cell {
background: var(--bg-black-2);
}
.compare-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 12px 0 0;
}
.compare-footer-text {
font-size: 14px;
color: var(--text-primary-65-color);
white-space: nowrap;
}
.compare-footer-right {
display: flex;
justify-content: flex-end;
flex: 1;
min-width: 0;
}
.term-empty {
width: 100%;
min-height: 48px;
display: flex;
align-items: center;
justify-content: center;
color: rgba(132, 136, 142, 1);
}
.term-body {
display: flex;
column-gap: 18px;
flex: 1;
min-width: 0;
width: 100%;
}
.term-main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
row-gap: 6px;
}
.term-row {
display: flex;
align-items: flex-start;
column-gap: 18px;
}
.term-no-cn {
font-size: 16px;
font-weight: 700;
line-height: 24px;
color: var(--color-primary-100);
white-space: nowrap;
width: 90px;
text-align: center;
flex: 0 0 90px;
}
.term-no-en {
font-size: 14px;
font-weight: 400;
line-height: 24px;
color: var(--color-primary-100);
white-space: nowrap;
width: 90px;
text-align: center;
flex: 0 0 90px;
}
.term-content-cn {
flex: 1;
font-size: 16px;
font-weight: 700;
line-height: 24px;
color: var(--text-primary-80-color);
:deep(.term-entity) {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 0 6px 0 4px;
background: var(--color-primary-10);
cursor: pointer;
transition: background-color 0.15s ease, transform 0.15s ease;
}
:deep(.term-entity:hover) {
background: var(--color-primary-35);
transform: translateY(-1px);
}
:deep(.term-entity::before) {
content: "";
display: inline-block;
width: 14px;
height: 14px;
flex: 0 0 14px;
background-color: var(--color-primary-100);
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M448 768c176.736 0 320-143.264 320-320S624.736 128 448 128 128 271.264 128 448s143.264 320 320 320zm0 64C236.288 832 64 659.712 64 448S236.288 64 448 64s384 172.288 384 384-172.288 384-384 384z'/%3E%3Cpath d='M832 832a32 32 0 0 1-22.624-9.376l-160-160a32 32 0 0 1 45.248-45.248l160 160A32 32 0 0 1 832 832z'/%3E%3C/svg%3E");
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
}
.term-content-en {
flex: 1;
font-size: 14px;
font-weight: 400;
line-height: 24px;
color: var(--text-primary-65-color);
:deep(.term-entity) {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 0 6px 0 4px;
background: var(--color-primary-10);
cursor: pointer;
transition: background-color 0.15s ease, transform 0.15s ease;
}
:deep(.term-entity:hover) {
background: var(--color-primary-35);
transform: translateY(-1px);
}
:deep(.term-entity::before) {
content: "";
display: inline-block;
width: 14px;
height: 14px;
flex: 0 0 14px;
background-color: var(--color-primary-100);
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M448 768c176.736 0 320-143.264 320-320S624.736 128 448 128 128 271.264 128 448s143.264 320 320 320zm0 64C236.288 832 64 659.712 64 448S236.288 64 448 64s384 172.288 384 384-172.288 384-384 384z'/%3E%3Cpath d='M832 832a32 32 0 0 1-22.624-9.376l-160-160a32 32 0 0 1 45.248-45.248l160 160A32 32 0 0 1 832 832z'/%3E%3C/svg%3E");
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
}
@media (max-width: 1680px) {
.compare-row,
.compare-top {
grid-template-columns: 1fr;
}
.compare-tools-actions {
width: 100%;
}
.compare-tools-search {
width: 100%;
}
.find-word-box {
width: 100%;
}
}
</style>
src/views/dataLibrary/assets/icons/chart-active.svg
浏览文件 @ 58537cbd
<svg viewBox="0 0 158 28" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="158.000000" height="28.000000" fill="none" clip-path="url(#clipPath_7)" customFrame="url(#clipPath_7)">
<svg viewBox="0 0 158 28" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="158.000000" height="28.000000" fill="none" clip-path="url(#clipPath_0)" customFrame="url(#clipPath_0)">
<defs>
<clipPath id="clipPath_7">
<clipPath id="clipPath_0">
<rect width="158.000000" height="28.000000" x="0.000000" y="0.000000" rx="14.000000" fill="rgb(255,255,255)" />
</clipPath>
<clipPath id="clipPath_8">
<clipPath id="clipPath_1">
<rect width="79.000000" height="28.000000" x="0.000000" y="0.000000" fill="rgb(255,255,255)" />
</clipPath>
<clipPath id="clipPath_9">
<clipPath id="clipPath_2">
<rect width="53.000000" height="16.000000" x="13.000000" y="6.000000" fill="rgb(255,255,255)" />
</clipPath>
<clipPath id="clipPath_10">
<clipPath id="clipPath_3">
<rect width="16.000000" height="16.000000" x="13.000000" y="6.000000" fill="rgb(255,255,255)" />
</clipPath>
<clipPath id="clipPath_11">
<clipPath id="clipPath_4">
<rect width="79.000000" height="28.000000" x="79.000000" y="0.000000" fill="rgb(255,255,255)" />
</clipPath>
<clipPath id="clipPath_12">
<clipPath id="clipPath_5">
<rect width="53.000000" height="16.000000" x="92.000000" y="6.000000" fill="rgb(255,255,255)" />
</clipPath>
<clipPath id="clipPath_13">
<clipPath id="clipPath_6">
<rect width="16.000000" height="16.000000" x="92.000000" y="6.000000" fill="rgb(255,255,255)" />
</clipPath>
</defs>
<rect id="双相选择" width="157.000000" height="27.000000" x="0.500000" y="0.500000" rx="13.500000" stroke="rgb(5,95,194)" stroke-width="1.000000" />
<g id="容器 208" customFrame="url(#clipPath_8)">
<rect id="容器 208" width="79.000000" height="28.000000" x="0.000000" y="0.000000" fill="rgb(255,255,255)" />
<g id="容器 207" customFrame="url(#clipPath_9)">
<g id="容器 208" customFrame="url(#clipPath_1)">
<rect id="容器 208" width="79.000000" height="28.000000" x="0.000000" y="0.000000" fill="rgb(5,95,194)" />
<g id="容器 207" customFrame="url(#clipPath_2)">
<rect id="容器 207" width="53.000000" height="16.000000" x="13.000000" y="6.000000" />
<g id="icon_图表1 1" clip-path="url(#clipPath_10)" customFrame="url(#clipPath_10)">
<g id="icon_图表1 1" clip-path="url(#clipPath_3)" customFrame="url(#clipPath_3)">
<rect id="icon_图表1 1" width="16.000000" height="16.000000" x="13.000000" y="6.000000" />
<path id="矢量 461" d="M24.9004 11.5078C24.4904 11.5078 24.1504 11.8478 24.1504 12.2578L24.1504 20.2578C24.1504 20.6678 24.4904 21.0078 24.9004 21.0078C25.3104 21.0078 25.6504 20.6678 25.6504 20.2578L25.6504 12.2578C25.6504 11.8478 25.3104 11.5078 24.9004 11.5078ZM21.0004 8.50781C20.5904 8.50781 20.2504 8.84781 20.2504 9.25781L20.2504 20.2578C20.2504 20.6678 20.5904 21.0078 21.0004 21.0078C21.4104 21.0078 21.7504 20.6678 21.7504 20.2578L21.7504 9.25781C21.7504 8.84781 21.4104 8.50781 21.0004 8.50781L21.0004 8.50781ZM16.9004 13.5078C16.4904 13.5078 16.1504 13.8478 16.1504 14.2578L16.1504 20.2578C16.1504 20.6678 16.4904 21.0078 16.9004 21.0078C17.3104 21.0078 17.6504 20.6678 17.6504 20.2578L17.6504 14.2578C17.6504 13.8478 17.3104 13.5078 16.9004 13.5078Z" fill="rgb(5,95,194)" fill-rule="nonzero" />
<path id="矢量 461" d="M24.8999 11.5078C24.4899 11.5078 24.1499 11.8478 24.1499 12.2578L24.1499 20.2578C24.1499 20.6678 24.4899 21.0078 24.8999 21.0078C25.3099 21.0078 25.6499 20.6678 25.6499 20.2578L25.6499 12.2578C25.6499 11.8478 25.3099 11.5078 24.8999 11.5078ZM20.9999 8.50781C20.5899 8.50781 20.2499 8.84781 20.2499 9.25781L20.2499 20.2578C20.2499 20.6678 20.5899 21.0078 20.9999 21.0078C21.4099 21.0078 21.7499 20.6678 21.7499 20.2578L21.7499 9.25781C21.7499 8.84781 21.4099 8.50781 20.9999 8.50781L20.9999 8.50781ZM16.8999 13.5078C16.4899 13.5078 16.1499 13.8478 16.1499 14.2578L16.1499 20.2578C16.1499 20.6678 16.4899 21.0078 16.8999 21.0078C17.3099 21.0078 17.6499 20.6678 17.6499 20.2578L17.6499 14.2578C17.6499 13.8478 17.3099 13.5078 16.8999 13.5078Z" fill="rgb(255,255,255)" fill-rule="nonzero" />
</g>
<path id="" d="M38.4492 17.5508C40.625 17.8086 43.375 18.4492 44.8789 18.9922L45.4258 18.1133C43.8711 17.5859 41.1367 16.9766 38.9922 16.7344L38.4492 17.5508ZM40.0312 15.5352C41.2969 15.8086 42.9102 16.3516 43.793 16.7852L44.2891 15.9844C43.3906 15.5859 41.793 15.0703 40.5117 14.8164L40.0312 15.5352ZM40.1602 10.9102L44.2891 10.9102C43.7109 11.5195 42.9609 12.0781 42.0977 12.5742C41.2812 12.1133 40.5938 11.5859 40.0625 11.0078L40.1602 10.9102ZM45.2812 9.9375L45.0898 9.98438L40.9766 9.98438C41.2148 9.67969 41.4414 9.375 41.6172 9.05469L40.6406 8.73438C39.8398 10.0312 38.4805 11.2656 37.1211 12.0625C37.3594 12.2227 37.7617 12.5938 37.9375 12.7852C38.4336 12.4648 38.9102 12.0781 39.3906 11.6484C39.8867 12.1602 40.4805 12.6406 41.1211 13.0703C39.7617 13.6953 38.2383 14.1914 36.832 14.4492C37.0234 14.6875 37.2812 15.1523 37.3906 15.4258C38.9609 15.0703 40.625 14.4805 42.1289 13.6641C43.457 14.3828 44.9609 14.9297 46.4648 15.2461C46.6094 14.9766 46.9102 14.5586 47.1211 14.3516C45.7266 14.0977 44.3203 13.6641 43.1055 13.0898C44.2734 12.3203 45.2812 11.4062 45.9531 10.3516L45.2812 9.9375ZM36.543 19.5039L36.543 8.39844L47.4414 8.39844L47.4414 19.5039L36.543 19.5039ZM35.3906 7.3125L35.3906 21.2305L36.543 21.2305L36.543 20.5586L47.4414 20.5586L47.4414 21.2305L48.6094 21.2305L48.6094 7.3125L35.3906 7.3125ZM63.4883 14.4648C62.8008 15.1367 61.6797 16.0156 60.7188 16.6719C60.0156 15.8398 59.457 14.8945 59.0234 13.8398L64.8789 13.8398L64.8789 12.8164L58.5586 12.8164L58.5586 11.3906L63.6641 11.3906L63.6641 10.3984L58.5586 10.3984L58.5586 9.05469L64.3828 9.05469L64.3828 8.03125L58.5586 8.03125L58.5586 6.60938L57.375 6.60938L57.375 8.03125L51.7266 8.03125L51.7266 9.05469L57.375 9.05469L57.375 10.3984L52.543 10.3984L52.543 11.3906L57.375 11.3906L57.375 12.8164L51.1055 12.8164L51.1055 13.8398L56.3828 13.8398C54.8789 15.1836 52.625 16.4336 50.6406 17.0547C50.8945 17.2969 51.2461 17.7266 51.4062 18.0156C52.2891 17.6797 53.2461 17.2461 54.1602 16.7188L54.1602 19.0898C54.1602 19.7109 53.8086 20 53.5508 20.1289C53.7422 20.3984 53.9844 20.9102 54.0625 21.2148C54.4336 20.9609 55.0078 20.7695 59.4414 19.3438C59.375 19.1055 59.2812 18.6406 59.2461 18.3203L55.375 19.4883L55.375 15.9531C56.3203 15.3125 57.1836 14.5938 57.8711 13.8398C59.0898 17.1836 61.3281 19.5859 64.6094 20.6875C64.7852 20.3672 65.1367 19.9023 65.3906 19.6641C63.8086 19.1992 62.4805 18.4141 61.375 17.375C62.3828 16.7539 63.5508 15.9375 64.4648 15.1523L63.4883 14.4648Z" fill="rgb(5,95,194)" fill-rule="nonzero" />
<path id="" d="M38.4492 17.5508C40.625 17.8086 43.375 18.4492 44.8789 18.9922L45.4258 18.1133C43.8711 17.5859 41.1367 16.9766 38.9922 16.7344L38.4492 17.5508ZM40.0312 15.5352C41.2969 15.8086 42.9102 16.3516 43.793 16.7852L44.2891 15.9844C43.3906 15.5859 41.793 15.0703 40.5117 14.8164L40.0312 15.5352ZM40.1602 10.9102L44.2891 10.9102C43.7109 11.5195 42.9609 12.0781 42.0977 12.5742C41.2812 12.1133 40.5938 11.5859 40.0625 11.0078L40.1602 10.9102ZM45.2812 9.9375L45.0898 9.98438L40.9766 9.98438C41.2148 9.67969 41.4414 9.375 41.6172 9.05469L40.6406 8.73438C39.8398 10.0312 38.4805 11.2656 37.1211 12.0625C37.3594 12.2227 37.7617 12.5938 37.9375 12.7852C38.4336 12.4648 38.9102 12.0781 39.3906 11.6484C39.8867 12.1602 40.4805 12.6406 41.1211 13.0703C39.7617 13.6953 38.2383 14.1914 36.832 14.4492C37.0234 14.6875 37.2812 15.1523 37.3906 15.4258C38.9609 15.0703 40.625 14.4805 42.1289 13.6641C43.457 14.3828 44.9609 14.9297 46.4648 15.2461C46.6094 14.9766 46.9102 14.5586 47.1211 14.3516C45.7266 14.0977 44.3203 13.6641 43.1055 13.0898C44.2734 12.3203 45.2812 11.4062 45.9531 10.3516L45.2812 9.9375ZM36.543 19.5039L36.543 8.39844L47.4414 8.39844L47.4414 19.5039L36.543 19.5039ZM35.3906 7.3125L35.3906 21.2305L36.543 21.2305L36.543 20.5586L47.4414 20.5586L47.4414 21.2305L48.6094 21.2305L48.6094 7.3125L35.3906 7.3125ZM63.4883 14.4648C62.8008 15.1367 61.6797 16.0156 60.7188 16.6719C60.0156 15.8398 59.457 14.8945 59.0234 13.8398L64.8789 13.8398L64.8789 12.8164L58.5586 12.8164L58.5586 11.3906L63.6641 11.3906L63.6641 10.3984L58.5586 10.3984L58.5586 9.05469L64.3828 9.05469L64.3828 8.03125L58.5586 8.03125L58.5586 6.60938L57.375 6.60938L57.375 8.03125L51.7266 8.03125L51.7266 9.05469L57.375 9.05469L57.375 10.3984L52.543 10.3984L52.543 11.3906L57.375 11.3906L57.375 12.8164L51.1055 12.8164L51.1055 13.8398L56.3828 13.8398C54.8789 15.1836 52.625 16.4336 50.6406 17.0547C50.8945 17.2969 51.2461 17.7266 51.4062 18.0156C52.2891 17.6797 53.2461 17.2461 54.1602 16.7188L54.1602 19.0898C54.1602 19.7109 53.8086 20 53.5508 20.1289C53.7422 20.3984 53.9844 20.9102 54.0625 21.2148C54.4336 20.9609 55.0078 20.7695 59.4414 19.3438C59.375 19.1055 59.2812 18.6406 59.2461 18.3203L55.375 19.4883L55.375 15.9531C56.3203 15.3125 57.1836 14.5938 57.8711 13.8398C59.0898 17.1836 61.3281 19.5859 64.6094 20.6875C64.7852 20.3672 65.1367 19.9023 65.3906 19.6641C63.8086 19.1992 62.4805 18.4141 61.375 17.375C62.3828 16.7539 63.5508 15.9375 64.4648 15.1523L63.4883 14.4648Z" fill="rgb(255,255,255)" fill-rule="nonzero" />
</g>
</g>
<g id="容器 209" customFrame="url(#clipPath_11)">
<rect id="容器 209" width="79.000000" height="28.000000" x="79.000000" y="0.000000" fill="rgb(5,95,194)" />
<g id="容器 207" customFrame="url(#clipPath_12)">
<g id="容器 209" customFrame="url(#clipPath_4)">
<rect id="容器 209" width="79.000000" height="28.000000" x="79.000000" y="0.000000" fill="rgb(255,255,255)" />
<g id="容器 207" customFrame="url(#clipPath_5)">
<rect id="容器 207" width="53.000000" height="16.000000" x="92.000000" y="6.000000" />
<g id="表格(1) 1" clip-path="url(#clipPath_13)" customFrame="url(#clipPath_13)">
<g id="表格(1) 1" clip-path="url(#clipPath_6)" customFrame="url(#clipPath_6)">
<rect id="表格(1) 1" width="16.000000" height="16.000000" x="92.000000" y="6.000000" />
<path id="矢量 462" d="M105.1 9L94.9 9C94.8409 9 94.7824 9.006 94.7244 9.01801C94.6665 9.03002 94.6102 9.04781 94.5556 9.07136C94.501 9.09492 94.4491 9.1238 94.4 9.158C94.3509 9.1922 94.3054 9.23106 94.2636 9.27459C94.2218 9.31811 94.1845 9.36547 94.1517 9.41665C94.1188 9.46784 94.0911 9.52186 94.0685 9.57873C94.0459 9.63561 94.0288 9.69423 94.0173 9.7546C94.0058 9.81498 94 9.87594 94 9.9375L94 18.0625C94 18.1241 94.0058 18.185 94.0173 18.2454C94.0288 18.3058 94.0459 18.3644 94.0685 18.4213C94.0911 18.4781 94.1188 18.5322 94.1517 18.5833C94.1845 18.6345 94.2218 18.6819 94.2636 18.7254C94.3054 18.7689 94.3509 18.8078 94.4 18.842C94.4491 18.8762 94.501 18.9051 94.5556 18.9286C94.6102 18.9522 94.6665 18.97 94.7244 18.982C94.7824 18.994 94.8409 19 94.9 19L105.1 19C105.159 19 105.218 18.994 105.276 18.982C105.334 18.97 105.39 18.9522 105.444 18.9286C105.499 18.9051 105.551 18.8762 105.6 18.842C105.649 18.8078 105.695 18.7689 105.736 18.7254C105.778 18.6819 105.815 18.6345 105.848 18.5833C105.881 18.5322 105.909 18.4781 105.931 18.4213C105.954 18.3644 105.971 18.3058 105.983 18.2454C105.994 18.185 106 18.1241 106 18.0625L106 9.9375C106 9.87594 105.994 9.81498 105.983 9.7546C105.971 9.69423 105.954 9.6356 105.931 9.57873C105.909 9.52186 105.881 9.46784 105.848 9.41665C105.815 9.36547 105.778 9.31811 105.736 9.27459C105.695 9.23106 105.649 9.1922 105.6 9.158C105.551 9.1238 105.499 9.09492 105.444 9.07136C105.39 9.04781 105.334 9.03002 105.276 9.01801C105.218 9.006 105.159 9 105.1 9ZM94.9 11.0312L97.75 11.0312L97.75 12.75L94.9 12.75L94.9 11.0312ZM94.9 13.6875L97.75 13.6875L97.75 15.4062L94.9 15.4062L94.9 13.6875ZM101.35 16.3438L101.35 18.0625L98.65 18.0625L98.65 16.3438L101.35 16.3438ZM98.65 15.4062L98.65 13.6875L101.35 13.6875L101.35 15.4062L98.65 15.4062ZM101.35 12.75L98.65 12.75L98.65 11.0312L101.35 11.0312L101.35 12.75ZM102.25 13.6875L105.1 13.6875L105.1 15.4062L102.25 15.4062L102.25 13.6875ZM102.25 12.75L102.25 11.0312L105.1 11.0312L105.1 12.75L102.25 12.75ZM94.9 16.3438L97.75 16.3438L97.75 18.0625L94.9 18.0625L94.9 16.3438ZM102.25 18.0625L102.25 16.3438L105.1 16.3438L105.1 18.0625L102.25 18.0625Z" fill="rgb(255,255,255)" fill-rule="nonzero" />
<path id="矢量 462" d="M105.1 9L94.9 9C94.8409 9 94.7824 9.006 94.7244 9.01801C94.6665 9.03002 94.6102 9.04781 94.5556 9.07136C94.501 9.09492 94.4491 9.1238 94.4 9.158C94.3509 9.1922 94.3054 9.23106 94.2636 9.27459C94.2218 9.31811 94.1845 9.36547 94.1517 9.41665C94.1188 9.46784 94.0911 9.52186 94.0685 9.57873C94.0459 9.63561 94.0288 9.69423 94.0173 9.7546C94.0058 9.81498 94 9.87594 94 9.9375L94 18.0625C94 18.1241 94.0058 18.185 94.0173 18.2454C94.0288 18.3058 94.0459 18.3644 94.0685 18.4213C94.0911 18.4781 94.1188 18.5322 94.1517 18.5833C94.1845 18.6345 94.2218 18.6819 94.2636 18.7254C94.3054 18.7689 94.3509 18.8078 94.4 18.842C94.4491 18.8762 94.501 18.9051 94.5556 18.9286C94.6102 18.9522 94.6665 18.97 94.7244 18.982C94.7824 18.994 94.8409 19 94.9 19L105.1 19C105.159 19 105.218 18.994 105.276 18.982C105.334 18.97 105.39 18.9522 105.444 18.9286C105.499 18.9051 105.551 18.8762 105.6 18.842C105.649 18.8078 105.695 18.7689 105.736 18.7254C105.778 18.6819 105.815 18.6345 105.848 18.5833C105.881 18.5322 105.909 18.4781 105.931 18.4213C105.954 18.3644 105.971 18.3058 105.983 18.2454C105.994 18.185 106 18.1241 106 18.0625L106 9.9375C106 9.87594 105.994 9.81498 105.983 9.7546C105.971 9.69423 105.954 9.6356 105.931 9.57873C105.909 9.52186 105.881 9.46784 105.848 9.41665C105.815 9.36547 105.778 9.31811 105.736 9.27459C105.695 9.23106 105.649 9.1922 105.6 9.158C105.551 9.1238 105.499 9.09492 105.444 9.07136C105.39 9.04781 105.334 9.03002 105.276 9.01801C105.218 9.006 105.159 9 105.1 9ZM94.9 11.0312L97.75 11.0312L97.75 12.75L94.9 12.75L94.9 11.0312ZM94.9 13.6875L97.75 13.6875L97.75 15.4062L94.9 15.4062L94.9 13.6875ZM101.35 16.3438L101.35 18.0625L98.65 18.0625L98.65 16.3438L101.35 16.3438ZM98.65 15.4062L98.65 13.6875L101.35 13.6875L101.35 15.4062L98.65 15.4062ZM101.35 12.75L98.65 12.75L98.65 11.0312L101.35 11.0312L101.35 12.75ZM102.25 13.6875L105.1 13.6875L105.1 15.4062L102.25 15.4062L102.25 13.6875ZM102.25 12.75L102.25 11.0312L105.1 11.0312L105.1 12.75L102.25 12.75ZM94.9 16.3438L97.75 16.3438L97.75 18.0625L94.9 18.0625L94.9 16.3438ZM102.25 18.0625L102.25 16.3438L105.1 16.3438L105.1 18.0625L102.25 18.0625Z" fill="rgb(5,95,194)" fill-rule="nonzero" />
</g>
<path id="" d="M120.105 6.91016C119.832 7.55078 119.305 8.46484 118.902 9.03906L119.672 9.40625C120.121 8.87891 120.633 8.07812 121.098 7.35938L120.105 6.91016ZM116.359 9.07031C116.199 8.48047 115.77 7.63281 115.32 7.00781L114.457 7.35938C114.887 8.01562 115.305 8.89453 115.449 9.45703L116.359 9.07031ZM117.145 13.5508L118.246 13.5508L118.246 11.3594C119.016 11.9023 120.008 12.6875 120.391 13.0547L121.047 12.1914C120.68 11.9219 119.305 11.0234 118.504 10.5586L121.512 10.5586L121.512 9.56641L118.246 9.56641L118.246 6.60938L117.145 6.60938L117.145 9.56641L113.848 9.56641L113.848 10.5586L116.777 10.5586C115.992 11.6016 114.809 12.5742 113.688 13.0547C113.91 13.2812 114.199 13.6797 114.328 13.9531C115.305 13.4414 116.344 12.5586 117.145 11.6172L117.145 13.5508ZM119.574 15.8398C119.223 16.6719 118.711 17.375 118.09 17.9531C117.512 17.6641 116.871 17.3594 116.281 17.1055C116.504 16.7344 116.742 16.2891 116.984 15.8398L119.574 15.8398ZM120.359 19.2812C120.008 19.0234 119.527 18.7344 119.016 18.4492C119.863 17.5508 120.52 16.4336 120.938 15.0547L120.266 14.7852L120.09 14.832L117.48 14.832C117.609 14.543 117.703 14.2734 117.816 14L116.762 13.8086C116.648 14.1445 116.504 14.4805 116.344 14.832L114.184 14.832L114.184 15.8398L115.848 15.8398C115.512 16.4648 115.16 17.0547 114.824 17.5352C115.609 17.8242 116.473 18.2227 117.273 18.6406C116.23 19.375 115.016 19.8867 113.719 20.1758C113.93 20.3984 114.168 20.832 114.281 21.0898C115.734 20.7031 117.098 20.0781 118.23 19.168C118.777 19.4727 119.258 19.793 119.625 20.0625L120.359 19.2812ZM125.91 10.8008C125.672 12.6406 125.289 14.2383 124.711 15.5859C124.105 14.1602 123.656 12.5273 123.352 10.8008L125.91 10.8008ZM128.105 10.8008L128.105 9.69531L123.594 9.69531C123.816 8.80078 124.008 7.87109 124.137 6.92969L123.047 6.76953C122.648 9.53516 121.93 12.207 120.711 13.8867C120.969 14.0469 121.414 14.4141 121.609 14.6094C122.008 14 122.375 13.2969 122.695 12.5117C123.047 14.0977 123.496 15.5352 124.105 16.7852C123.207 18.3047 121.961 19.4727 120.23 20.3203C120.441 20.543 120.777 21.0234 120.887 21.2812C122.52 20.3984 123.734 19.2812 124.68 17.8867C125.465 19.2461 126.473 20.3359 127.703 21.0898C127.879 20.7852 128.215 20.3828 128.488 20.1602C127.16 19.457 126.121 18.2734 125.305 16.8164C126.152 15.168 126.68 13.1836 127.047 10.8008L128.105 10.8008ZM134.648 14.6562L134.488 13.5664L132.824 14.0977L132.824 10.9297L134.633 10.9297L134.633 9.82422L132.824 9.82422L132.824 6.625L131.719 6.625L131.719 9.82422L129.734 9.82422L129.734 10.9297L131.719 10.9297L131.719 14.4336C130.887 14.6719 130.137 14.8945 129.543 15.0703L129.832 16.207C130.406 16.0312 131.047 15.8398 131.719 15.6172L131.719 19.7266C131.719 19.9688 131.641 20.0312 131.449 20.0312C131.273 20.0312 130.633 20.0312 129.945 20.0156C130.105 20.3516 130.246 20.832 130.297 21.1211C131.305 21.1367 131.91 21.0898 132.281 20.8945C132.68 20.7031 132.824 20.3984 132.824 19.7422L132.824 15.2461L134.648 14.6562ZM136.473 13.1836C136.488 12.8008 136.488 12.4648 136.488 12.1133L136.488 11.4258L139.574 11.4258L139.574 13.1836L136.473 13.1836ZM142.582 8.35156L142.582 10.3828L136.488 10.3828L136.488 8.35156L142.582 8.35156ZM142.695 19.6016L137.785 19.6016L137.785 17.1836L142.695 17.1836L142.695 19.6016ZM144.266 14.207L144.266 13.1836L140.711 13.1836L140.711 11.4258L143.719 11.4258L143.719 7.3125L135.336 7.3125L135.336 12.1133C135.336 14.6406 135.191 18.1133 133.543 20.5586C133.816 20.6719 134.312 21.0078 134.504 21.2305C135.848 19.2656 136.281 16.5742 136.426 14.207L139.574 14.207L139.574 16.1758L136.742 16.1758L136.742 21.2461L137.785 21.2461L137.785 20.5938L142.695 20.5938L142.695 21.1836L143.785 21.1836L143.785 16.1758L140.711 16.1758L140.711 14.207L144.266 14.207Z" fill="rgb(255,255,255)" fill-rule="nonzero" />
<path id="" d="M120.105 6.91016C119.832 7.55078 119.305 8.46484 118.902 9.03906L119.672 9.40625C120.121 8.87891 120.633 8.07812 121.098 7.35938L120.105 6.91016ZM116.359 9.07031C116.199 8.48047 115.77 7.63281 115.32 7.00781L114.457 7.35938C114.887 8.01562 115.305 8.89453 115.449 9.45703L116.359 9.07031ZM117.145 13.5508L118.246 13.5508L118.246 11.3594C119.016 11.9023 120.008 12.6875 120.391 13.0547L121.047 12.1914C120.68 11.9219 119.305 11.0234 118.504 10.5586L121.512 10.5586L121.512 9.56641L118.246 9.56641L118.246 6.60938L117.145 6.60938L117.145 9.56641L113.848 9.56641L113.848 10.5586L116.777 10.5586C115.992 11.6016 114.809 12.5742 113.688 13.0547C113.91 13.2812 114.199 13.6797 114.328 13.9531C115.305 13.4414 116.344 12.5586 117.145 11.6172L117.145 13.5508ZM119.574 15.8398C119.223 16.6719 118.711 17.375 118.09 17.9531C117.512 17.6641 116.871 17.3594 116.281 17.1055C116.504 16.7344 116.742 16.2891 116.984 15.8398L119.574 15.8398ZM120.359 19.2812C120.008 19.0234 119.527 18.7344 119.016 18.4492C119.863 17.5508 120.52 16.4336 120.938 15.0547L120.266 14.7852L120.09 14.832L117.48 14.832C117.609 14.543 117.703 14.2734 117.816 14L116.762 13.8086C116.648 14.1445 116.504 14.4805 116.344 14.832L114.184 14.832L114.184 15.8398L115.848 15.8398C115.512 16.4648 115.16 17.0547 114.824 17.5352C115.609 17.8242 116.473 18.2227 117.273 18.6406C116.23 19.375 115.016 19.8867 113.719 20.1758C113.93 20.3984 114.168 20.832 114.281 21.0898C115.734 20.7031 117.098 20.0781 118.23 19.168C118.777 19.4727 119.258 19.793 119.625 20.0625L120.359 19.2812ZM125.91 10.8008C125.672 12.6406 125.289 14.2383 124.711 15.5859C124.105 14.1602 123.656 12.5273 123.352 10.8008L125.91 10.8008ZM128.105 10.8008L128.105 9.69531L123.594 9.69531C123.816 8.80078 124.008 7.87109 124.137 6.92969L123.047 6.76953C122.648 9.53516 121.93 12.207 120.711 13.8867C120.969 14.0469 121.414 14.4141 121.609 14.6094C122.008 14 122.375 13.2969 122.695 12.5117C123.047 14.0977 123.496 15.5352 124.105 16.7852C123.207 18.3047 121.961 19.4727 120.23 20.3203C120.441 20.543 120.777 21.0234 120.887 21.2812C122.52 20.3984 123.734 19.2812 124.68 17.8867C125.465 19.2461 126.473 20.3359 127.703 21.0898C127.879 20.7852 128.215 20.3828 128.488 20.1602C127.16 19.457 126.121 18.2734 125.305 16.8164C126.152 15.168 126.68 13.1836 127.047 10.8008L128.105 10.8008ZM134.648 14.6562L134.488 13.5664L132.824 14.0977L132.824 10.9297L134.633 10.9297L134.633 9.82422L132.824 9.82422L132.824 6.625L131.719 6.625L131.719 9.82422L129.734 9.82422L129.734 10.9297L131.719 10.9297L131.719 14.4336C130.887 14.6719 130.137 14.8945 129.543 15.0703L129.832 16.207C130.406 16.0312 131.047 15.8398 131.719 15.6172L131.719 19.7266C131.719 19.9688 131.641 20.0312 131.449 20.0312C131.273 20.0312 130.633 20.0312 129.945 20.0156C130.105 20.3516 130.246 20.832 130.297 21.1211C131.305 21.1367 131.91 21.0898 132.281 20.8945C132.68 20.7031 132.824 20.3984 132.824 19.7422L132.824 15.2461L134.648 14.6562ZM136.473 13.1836C136.488 12.8008 136.488 12.4648 136.488 12.1133L136.488 11.4258L139.574 11.4258L139.574 13.1836L136.473 13.1836ZM142.582 8.35156L142.582 10.3828L136.488 10.3828L136.488 8.35156L142.582 8.35156ZM142.695 19.6016L137.785 19.6016L137.785 17.1836L142.695 17.1836L142.695 19.6016ZM144.266 14.207L144.266 13.1836L140.711 13.1836L140.711 11.4258L143.719 11.4258L143.719 7.3125L135.336 7.3125L135.336 12.1133C135.336 14.6406 135.191 18.1133 133.543 20.5586C133.816 20.6719 134.312 21.0078 134.504 21.2305C135.848 19.2656 136.281 16.5742 136.426 14.207L139.574 14.207L139.574 16.1758L136.742 16.1758L136.742 21.2461L137.785 21.2461L137.785 20.5938L142.695 20.5938L142.695 21.1836L143.785 21.1836L143.785 16.1758L140.711 16.1758L140.711 14.207L144.266 14.207Z" fill="rgb(5,95,194)" fill-rule="nonzero" />
</g>
</g>
</svg>
src/views/dataLibrary/assets/icons/data-active.svg
浏览文件 @ 58537cbd
<svg viewBox="0 0 158 28" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="158.000000" height="28.000000" fill="none" clip-path="url(#clipPath_0)" customFrame="url(#clipPath_0)">
<svg viewBox="0 0 158 28" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="158.000000" height="28.000000" fill="none" clip-path="url(#clipPath_7)" customFrame="url(#clipPath_7)">
<defs>
<clipPath id="clipPath_0">
<clipPath id="clipPath_7">
<rect width="158.000000" height="28.000000" x="0.000000" y="0.000000" rx="14.000000" fill="rgb(255,255,255)" />
</clipPath>
<clipPath id="clipPath_1">
<clipPath id="clipPath_8">
<rect width="79.000000" height="28.000000" x="0.000000" y="0.000000" fill="rgb(255,255,255)" />
</clipPath>
<clipPath id="clipPath_2">
<clipPath id="clipPath_9">
<rect width="53.000000" height="16.000000" x="13.000000" y="6.000000" fill="rgb(255,255,255)" />
</clipPath>
<clipPath id="clipPath_3">
<clipPath id="clipPath_10">
<rect width="16.000000" height="16.000000" x="13.000000" y="6.000000" fill="rgb(255,255,255)" />
</clipPath>
<clipPath id="clipPath_4">
<clipPath id="clipPath_11">
<rect width="79.000000" height="28.000000" x="79.000000" y="0.000000" fill="rgb(255,255,255)" />
</clipPath>
<clipPath id="clipPath_5">
<clipPath id="clipPath_12">
<rect width="53.000000" height="16.000000" x="92.000000" y="6.000000" fill="rgb(255,255,255)" />
</clipPath>
<clipPath id="clipPath_6">
<clipPath id="clipPath_13">
<rect width="16.000000" height="16.000000" x="92.000000" y="6.000000" fill="rgb(255,255,255)" />
</clipPath>
</defs>
<rect id="双相选择" width="157.000000" height="27.000000" x="0.500000" y="0.500000" rx="13.500000" stroke="rgb(5,95,194)" stroke-width="1.000000" />
<g id="容器 208" customFrame="url(#clipPath_1)">
<rect id="容器 208" width="79.000000" height="28.000000" x="0.000000" y="0.000000" fill="rgb(5,95,194)" />
<g id="容器 207" customFrame="url(#clipPath_2)">
<g id="容器 208" customFrame="url(#clipPath_8)">
<rect id="容器 208" width="79.000000" height="28.000000" x="0.000000" y="0.000000" fill="rgb(255,255,255)" />
<g id="容器 207" customFrame="url(#clipPath_9)">
<rect id="容器 207" width="53.000000" height="16.000000" x="13.000000" y="6.000000" />
<g id="icon_图表1 1" clip-path="url(#clipPath_3)" customFrame="url(#clipPath_3)">
<g id="icon_图表1 1" clip-path="url(#clipPath_10)" customFrame="url(#clipPath_10)">
<rect id="icon_图表1 1" width="16.000000" height="16.000000" x="13.000000" y="6.000000" />
<path id="矢量 461" d="M24.8999 11.5078C24.4899 11.5078 24.1499 11.8478 24.1499 12.2578L24.1499 20.2578C24.1499 20.6678 24.4899 21.0078 24.8999 21.0078C25.3099 21.0078 25.6499 20.6678 25.6499 20.2578L25.6499 12.2578C25.6499 11.8478 25.3099 11.5078 24.8999 11.5078ZM20.9999 8.50781C20.5899 8.50781 20.2499 8.84781 20.2499 9.25781L20.2499 20.2578C20.2499 20.6678 20.5899 21.0078 20.9999 21.0078C21.4099 21.0078 21.7499 20.6678 21.7499 20.2578L21.7499 9.25781C21.7499 8.84781 21.4099 8.50781 20.9999 8.50781L20.9999 8.50781ZM16.8999 13.5078C16.4899 13.5078 16.1499 13.8478 16.1499 14.2578L16.1499 20.2578C16.1499 20.6678 16.4899 21.0078 16.8999 21.0078C17.3099 21.0078 17.6499 20.6678 17.6499 20.2578L17.6499 14.2578C17.6499 13.8478 17.3099 13.5078 16.8999 13.5078Z" fill="rgb(255,255,255)" fill-rule="nonzero" />
<path id="矢量 461" d="M24.9004 11.5078C24.4904 11.5078 24.1504 11.8478 24.1504 12.2578L24.1504 20.2578C24.1504 20.6678 24.4904 21.0078 24.9004 21.0078C25.3104 21.0078 25.6504 20.6678 25.6504 20.2578L25.6504 12.2578C25.6504 11.8478 25.3104 11.5078 24.9004 11.5078ZM21.0004 8.50781C20.5904 8.50781 20.2504 8.84781 20.2504 9.25781L20.2504 20.2578C20.2504 20.6678 20.5904 21.0078 21.0004 21.0078C21.4104 21.0078 21.7504 20.6678 21.7504 20.2578L21.7504 9.25781C21.7504 8.84781 21.4104 8.50781 21.0004 8.50781L21.0004 8.50781ZM16.9004 13.5078C16.4904 13.5078 16.1504 13.8478 16.1504 14.2578L16.1504 20.2578C16.1504 20.6678 16.4904 21.0078 16.9004 21.0078C17.3104 21.0078 17.6504 20.6678 17.6504 20.2578L17.6504 14.2578C17.6504 13.8478 17.3104 13.5078 16.9004 13.5078Z" fill="rgb(5,95,194)" fill-rule="nonzero" />
</g>
<path id="" d="M38.4492 17.5508C40.625 17.8086 43.375 18.4492 44.8789 18.9922L45.4258 18.1133C43.8711 17.5859 41.1367 16.9766 38.9922 16.7344L38.4492 17.5508ZM40.0312 15.5352C41.2969 15.8086 42.9102 16.3516 43.793 16.7852L44.2891 15.9844C43.3906 15.5859 41.793 15.0703 40.5117 14.8164L40.0312 15.5352ZM40.1602 10.9102L44.2891 10.9102C43.7109 11.5195 42.9609 12.0781 42.0977 12.5742C41.2812 12.1133 40.5938 11.5859 40.0625 11.0078L40.1602 10.9102ZM45.2812 9.9375L45.0898 9.98438L40.9766 9.98438C41.2148 9.67969 41.4414 9.375 41.6172 9.05469L40.6406 8.73438C39.8398 10.0312 38.4805 11.2656 37.1211 12.0625C37.3594 12.2227 37.7617 12.5938 37.9375 12.7852C38.4336 12.4648 38.9102 12.0781 39.3906 11.6484C39.8867 12.1602 40.4805 12.6406 41.1211 13.0703C39.7617 13.6953 38.2383 14.1914 36.832 14.4492C37.0234 14.6875 37.2812 15.1523 37.3906 15.4258C38.9609 15.0703 40.625 14.4805 42.1289 13.6641C43.457 14.3828 44.9609 14.9297 46.4648 15.2461C46.6094 14.9766 46.9102 14.5586 47.1211 14.3516C45.7266 14.0977 44.3203 13.6641 43.1055 13.0898C44.2734 12.3203 45.2812 11.4062 45.9531 10.3516L45.2812 9.9375ZM36.543 19.5039L36.543 8.39844L47.4414 8.39844L47.4414 19.5039L36.543 19.5039ZM35.3906 7.3125L35.3906 21.2305L36.543 21.2305L36.543 20.5586L47.4414 20.5586L47.4414 21.2305L48.6094 21.2305L48.6094 7.3125L35.3906 7.3125ZM63.4883 14.4648C62.8008 15.1367 61.6797 16.0156 60.7188 16.6719C60.0156 15.8398 59.457 14.8945 59.0234 13.8398L64.8789 13.8398L64.8789 12.8164L58.5586 12.8164L58.5586 11.3906L63.6641 11.3906L63.6641 10.3984L58.5586 10.3984L58.5586 9.05469L64.3828 9.05469L64.3828 8.03125L58.5586 8.03125L58.5586 6.60938L57.375 6.60938L57.375 8.03125L51.7266 8.03125L51.7266 9.05469L57.375 9.05469L57.375 10.3984L52.543 10.3984L52.543 11.3906L57.375 11.3906L57.375 12.8164L51.1055 12.8164L51.1055 13.8398L56.3828 13.8398C54.8789 15.1836 52.625 16.4336 50.6406 17.0547C50.8945 17.2969 51.2461 17.7266 51.4062 18.0156C52.2891 17.6797 53.2461 17.2461 54.1602 16.7188L54.1602 19.0898C54.1602 19.7109 53.8086 20 53.5508 20.1289C53.7422 20.3984 53.9844 20.9102 54.0625 21.2148C54.4336 20.9609 55.0078 20.7695 59.4414 19.3438C59.375 19.1055 59.2812 18.6406 59.2461 18.3203L55.375 19.4883L55.375 15.9531C56.3203 15.3125 57.1836 14.5938 57.8711 13.8398C59.0898 17.1836 61.3281 19.5859 64.6094 20.6875C64.7852 20.3672 65.1367 19.9023 65.3906 19.6641C63.8086 19.1992 62.4805 18.4141 61.375 17.375C62.3828 16.7539 63.5508 15.9375 64.4648 15.1523L63.4883 14.4648Z" fill="rgb(255,255,255)" fill-rule="nonzero" />
<path id="" d="M38.4492 17.5508C40.625 17.8086 43.375 18.4492 44.8789 18.9922L45.4258 18.1133C43.8711 17.5859 41.1367 16.9766 38.9922 16.7344L38.4492 17.5508ZM40.0312 15.5352C41.2969 15.8086 42.9102 16.3516 43.793 16.7852L44.2891 15.9844C43.3906 15.5859 41.793 15.0703 40.5117 14.8164L40.0312 15.5352ZM40.1602 10.9102L44.2891 10.9102C43.7109 11.5195 42.9609 12.0781 42.0977 12.5742C41.2812 12.1133 40.5938 11.5859 40.0625 11.0078L40.1602 10.9102ZM45.2812 9.9375L45.0898 9.98438L40.9766 9.98438C41.2148 9.67969 41.4414 9.375 41.6172 9.05469L40.6406 8.73438C39.8398 10.0312 38.4805 11.2656 37.1211 12.0625C37.3594 12.2227 37.7617 12.5938 37.9375 12.7852C38.4336 12.4648 38.9102 12.0781 39.3906 11.6484C39.8867 12.1602 40.4805 12.6406 41.1211 13.0703C39.7617 13.6953 38.2383 14.1914 36.832 14.4492C37.0234 14.6875 37.2812 15.1523 37.3906 15.4258C38.9609 15.0703 40.625 14.4805 42.1289 13.6641C43.457 14.3828 44.9609 14.9297 46.4648 15.2461C46.6094 14.9766 46.9102 14.5586 47.1211 14.3516C45.7266 14.0977 44.3203 13.6641 43.1055 13.0898C44.2734 12.3203 45.2812 11.4062 45.9531 10.3516L45.2812 9.9375ZM36.543 19.5039L36.543 8.39844L47.4414 8.39844L47.4414 19.5039L36.543 19.5039ZM35.3906 7.3125L35.3906 21.2305L36.543 21.2305L36.543 20.5586L47.4414 20.5586L47.4414 21.2305L48.6094 21.2305L48.6094 7.3125L35.3906 7.3125ZM63.4883 14.4648C62.8008 15.1367 61.6797 16.0156 60.7188 16.6719C60.0156 15.8398 59.457 14.8945 59.0234 13.8398L64.8789 13.8398L64.8789 12.8164L58.5586 12.8164L58.5586 11.3906L63.6641 11.3906L63.6641 10.3984L58.5586 10.3984L58.5586 9.05469L64.3828 9.05469L64.3828 8.03125L58.5586 8.03125L58.5586 6.60938L57.375 6.60938L57.375 8.03125L51.7266 8.03125L51.7266 9.05469L57.375 9.05469L57.375 10.3984L52.543 10.3984L52.543 11.3906L57.375 11.3906L57.375 12.8164L51.1055 12.8164L51.1055 13.8398L56.3828 13.8398C54.8789 15.1836 52.625 16.4336 50.6406 17.0547C50.8945 17.2969 51.2461 17.7266 51.4062 18.0156C52.2891 17.6797 53.2461 17.2461 54.1602 16.7188L54.1602 19.0898C54.1602 19.7109 53.8086 20 53.5508 20.1289C53.7422 20.3984 53.9844 20.9102 54.0625 21.2148C54.4336 20.9609 55.0078 20.7695 59.4414 19.3438C59.375 19.1055 59.2812 18.6406 59.2461 18.3203L55.375 19.4883L55.375 15.9531C56.3203 15.3125 57.1836 14.5938 57.8711 13.8398C59.0898 17.1836 61.3281 19.5859 64.6094 20.6875C64.7852 20.3672 65.1367 19.9023 65.3906 19.6641C63.8086 19.1992 62.4805 18.4141 61.375 17.375C62.3828 16.7539 63.5508 15.9375 64.4648 15.1523L63.4883 14.4648Z" fill="rgb(5,95,194)" fill-rule="nonzero" />
</g>
</g>
<g id="容器 209" customFrame="url(#clipPath_4)">
<rect id="容器 209" width="79.000000" height="28.000000" x="79.000000" y="0.000000" fill="rgb(255,255,255)" />
<g id="容器 207" customFrame="url(#clipPath_5)">
<g id="容器 209" customFrame="url(#clipPath_11)">
<rect id="容器 209" width="79.000000" height="28.000000" x="79.000000" y="0.000000" fill="rgb(5,95,194)" />
<g id="容器 207" customFrame="url(#clipPath_12)">
<rect id="容器 207" width="53.000000" height="16.000000" x="92.000000" y="6.000000" />
<g id="表格(1) 1" clip-path="url(#clipPath_6)" customFrame="url(#clipPath_6)">
<g id="表格(1) 1" clip-path="url(#clipPath_13)" customFrame="url(#clipPath_13)">
<rect id="表格(1) 1" width="16.000000" height="16.000000" x="92.000000" y="6.000000" />
<path id="矢量 462" d="M105.1 9L94.9 9C94.8409 9 94.7824 9.006 94.7244 9.01801C94.6665 9.03002 94.6102 9.04781 94.5556 9.07136C94.501 9.09492 94.4491 9.1238 94.4 9.158C94.3509 9.1922 94.3054 9.23106 94.2636 9.27459C94.2218 9.31811 94.1845 9.36547 94.1517 9.41665C94.1188 9.46784 94.0911 9.52186 94.0685 9.57873C94.0459 9.63561 94.0288 9.69423 94.0173 9.7546C94.0058 9.81498 94 9.87594 94 9.9375L94 18.0625C94 18.1241 94.0058 18.185 94.0173 18.2454C94.0288 18.3058 94.0459 18.3644 94.0685 18.4213C94.0911 18.4781 94.1188 18.5322 94.1517 18.5833C94.1845 18.6345 94.2218 18.6819 94.2636 18.7254C94.3054 18.7689 94.3509 18.8078 94.4 18.842C94.4491 18.8762 94.501 18.9051 94.5556 18.9286C94.6102 18.9522 94.6665 18.97 94.7244 18.982C94.7824 18.994 94.8409 19 94.9 19L105.1 19C105.159 19 105.218 18.994 105.276 18.982C105.334 18.97 105.39 18.9522 105.444 18.9286C105.499 18.9051 105.551 18.8762 105.6 18.842C105.649 18.8078 105.695 18.7689 105.736 18.7254C105.778 18.6819 105.815 18.6345 105.848 18.5833C105.881 18.5322 105.909 18.4781 105.931 18.4213C105.954 18.3644 105.971 18.3058 105.983 18.2454C105.994 18.185 106 18.1241 106 18.0625L106 9.9375C106 9.87594 105.994 9.81498 105.983 9.7546C105.971 9.69423 105.954 9.6356 105.931 9.57873C105.909 9.52186 105.881 9.46784 105.848 9.41665C105.815 9.36547 105.778 9.31811 105.736 9.27459C105.695 9.23106 105.649 9.1922 105.6 9.158C105.551 9.1238 105.499 9.09492 105.444 9.07136C105.39 9.04781 105.334 9.03002 105.276 9.01801C105.218 9.006 105.159 9 105.1 9ZM94.9 11.0312L97.75 11.0312L97.75 12.75L94.9 12.75L94.9 11.0312ZM94.9 13.6875L97.75 13.6875L97.75 15.4062L94.9 15.4062L94.9 13.6875ZM101.35 16.3438L101.35 18.0625L98.65 18.0625L98.65 16.3438L101.35 16.3438ZM98.65 15.4062L98.65 13.6875L101.35 13.6875L101.35 15.4062L98.65 15.4062ZM101.35 12.75L98.65 12.75L98.65 11.0312L101.35 11.0312L101.35 12.75ZM102.25 13.6875L105.1 13.6875L105.1 15.4062L102.25 15.4062L102.25 13.6875ZM102.25 12.75L102.25 11.0312L105.1 11.0312L105.1 12.75L102.25 12.75ZM94.9 16.3438L97.75 16.3438L97.75 18.0625L94.9 18.0625L94.9 16.3438ZM102.25 18.0625L102.25 16.3438L105.1 16.3438L105.1 18.0625L102.25 18.0625Z" fill="rgb(5,95,194)" fill-rule="nonzero" />
<path id="矢量 462" d="M105.1 9L94.9 9C94.8409 9 94.7824 9.006 94.7244 9.01801C94.6665 9.03002 94.6102 9.04781 94.5556 9.07136C94.501 9.09492 94.4491 9.1238 94.4 9.158C94.3509 9.1922 94.3054 9.23106 94.2636 9.27459C94.2218 9.31811 94.1845 9.36547 94.1517 9.41665C94.1188 9.46784 94.0911 9.52186 94.0685 9.57873C94.0459 9.63561 94.0288 9.69423 94.0173 9.7546C94.0058 9.81498 94 9.87594 94 9.9375L94 18.0625C94 18.1241 94.0058 18.185 94.0173 18.2454C94.0288 18.3058 94.0459 18.3644 94.0685 18.4213C94.0911 18.4781 94.1188 18.5322 94.1517 18.5833C94.1845 18.6345 94.2218 18.6819 94.2636 18.7254C94.3054 18.7689 94.3509 18.8078 94.4 18.842C94.4491 18.8762 94.501 18.9051 94.5556 18.9286C94.6102 18.9522 94.6665 18.97 94.7244 18.982C94.7824 18.994 94.8409 19 94.9 19L105.1 19C105.159 19 105.218 18.994 105.276 18.982C105.334 18.97 105.39 18.9522 105.444 18.9286C105.499 18.9051 105.551 18.8762 105.6 18.842C105.649 18.8078 105.695 18.7689 105.736 18.7254C105.778 18.6819 105.815 18.6345 105.848 18.5833C105.881 18.5322 105.909 18.4781 105.931 18.4213C105.954 18.3644 105.971 18.3058 105.983 18.2454C105.994 18.185 106 18.1241 106 18.0625L106 9.9375C106 9.87594 105.994 9.81498 105.983 9.7546C105.971 9.69423 105.954 9.6356 105.931 9.57873C105.909 9.52186 105.881 9.46784 105.848 9.41665C105.815 9.36547 105.778 9.31811 105.736 9.27459C105.695 9.23106 105.649 9.1922 105.6 9.158C105.551 9.1238 105.499 9.09492 105.444 9.07136C105.39 9.04781 105.334 9.03002 105.276 9.01801C105.218 9.006 105.159 9 105.1 9ZM94.9 11.0312L97.75 11.0312L97.75 12.75L94.9 12.75L94.9 11.0312ZM94.9 13.6875L97.75 13.6875L97.75 15.4062L94.9 15.4062L94.9 13.6875ZM101.35 16.3438L101.35 18.0625L98.65 18.0625L98.65 16.3438L101.35 16.3438ZM98.65 15.4062L98.65 13.6875L101.35 13.6875L101.35 15.4062L98.65 15.4062ZM101.35 12.75L98.65 12.75L98.65 11.0312L101.35 11.0312L101.35 12.75ZM102.25 13.6875L105.1 13.6875L105.1 15.4062L102.25 15.4062L102.25 13.6875ZM102.25 12.75L102.25 11.0312L105.1 11.0312L105.1 12.75L102.25 12.75ZM94.9 16.3438L97.75 16.3438L97.75 18.0625L94.9 18.0625L94.9 16.3438ZM102.25 18.0625L102.25 16.3438L105.1 16.3438L105.1 18.0625L102.25 18.0625Z" fill="rgb(255,255,255)" fill-rule="nonzero" />
</g>
<path id="" d="M120.105 6.91016C119.832 7.55078 119.305 8.46484 118.902 9.03906L119.672 9.40625C120.121 8.87891 120.633 8.07812 121.098 7.35938L120.105 6.91016ZM116.359 9.07031C116.199 8.48047 115.77 7.63281 115.32 7.00781L114.457 7.35938C114.887 8.01562 115.305 8.89453 115.449 9.45703L116.359 9.07031ZM117.145 13.5508L118.246 13.5508L118.246 11.3594C119.016 11.9023 120.008 12.6875 120.391 13.0547L121.047 12.1914C120.68 11.9219 119.305 11.0234 118.504 10.5586L121.512 10.5586L121.512 9.56641L118.246 9.56641L118.246 6.60938L117.145 6.60938L117.145 9.56641L113.848 9.56641L113.848 10.5586L116.777 10.5586C115.992 11.6016 114.809 12.5742 113.688 13.0547C113.91 13.2812 114.199 13.6797 114.328 13.9531C115.305 13.4414 116.344 12.5586 117.145 11.6172L117.145 13.5508ZM119.574 15.8398C119.223 16.6719 118.711 17.375 118.09 17.9531C117.512 17.6641 116.871 17.3594 116.281 17.1055C116.504 16.7344 116.742 16.2891 116.984 15.8398L119.574 15.8398ZM120.359 19.2812C120.008 19.0234 119.527 18.7344 119.016 18.4492C119.863 17.5508 120.52 16.4336 120.938 15.0547L120.266 14.7852L120.09 14.832L117.48 14.832C117.609 14.543 117.703 14.2734 117.816 14L116.762 13.8086C116.648 14.1445 116.504 14.4805 116.344 14.832L114.184 14.832L114.184 15.8398L115.848 15.8398C115.512 16.4648 115.16 17.0547 114.824 17.5352C115.609 17.8242 116.473 18.2227 117.273 18.6406C116.23 19.375 115.016 19.8867 113.719 20.1758C113.93 20.3984 114.168 20.832 114.281 21.0898C115.734 20.7031 117.098 20.0781 118.23 19.168C118.777 19.4727 119.258 19.793 119.625 20.0625L120.359 19.2812ZM125.91 10.8008C125.672 12.6406 125.289 14.2383 124.711 15.5859C124.105 14.1602 123.656 12.5273 123.352 10.8008L125.91 10.8008ZM128.105 10.8008L128.105 9.69531L123.594 9.69531C123.816 8.80078 124.008 7.87109 124.137 6.92969L123.047 6.76953C122.648 9.53516 121.93 12.207 120.711 13.8867C120.969 14.0469 121.414 14.4141 121.609 14.6094C122.008 14 122.375 13.2969 122.695 12.5117C123.047 14.0977 123.496 15.5352 124.105 16.7852C123.207 18.3047 121.961 19.4727 120.23 20.3203C120.441 20.543 120.777 21.0234 120.887 21.2812C122.52 20.3984 123.734 19.2812 124.68 17.8867C125.465 19.2461 126.473 20.3359 127.703 21.0898C127.879 20.7852 128.215 20.3828 128.488 20.1602C127.16 19.457 126.121 18.2734 125.305 16.8164C126.152 15.168 126.68 13.1836 127.047 10.8008L128.105 10.8008ZM134.648 14.6562L134.488 13.5664L132.824 14.0977L132.824 10.9297L134.633 10.9297L134.633 9.82422L132.824 9.82422L132.824 6.625L131.719 6.625L131.719 9.82422L129.734 9.82422L129.734 10.9297L131.719 10.9297L131.719 14.4336C130.887 14.6719 130.137 14.8945 129.543 15.0703L129.832 16.207C130.406 16.0312 131.047 15.8398 131.719 15.6172L131.719 19.7266C131.719 19.9688 131.641 20.0312 131.449 20.0312C131.273 20.0312 130.633 20.0312 129.945 20.0156C130.105 20.3516 130.246 20.832 130.297 21.1211C131.305 21.1367 131.91 21.0898 132.281 20.8945C132.68 20.7031 132.824 20.3984 132.824 19.7422L132.824 15.2461L134.648 14.6562ZM136.473 13.1836C136.488 12.8008 136.488 12.4648 136.488 12.1133L136.488 11.4258L139.574 11.4258L139.574 13.1836L136.473 13.1836ZM142.582 8.35156L142.582 10.3828L136.488 10.3828L136.488 8.35156L142.582 8.35156ZM142.695 19.6016L137.785 19.6016L137.785 17.1836L142.695 17.1836L142.695 19.6016ZM144.266 14.207L144.266 13.1836L140.711 13.1836L140.711 11.4258L143.719 11.4258L143.719 7.3125L135.336 7.3125L135.336 12.1133C135.336 14.6406 135.191 18.1133 133.543 20.5586C133.816 20.6719 134.312 21.0078 134.504 21.2305C135.848 19.2656 136.281 16.5742 136.426 14.207L139.574 14.207L139.574 16.1758L136.742 16.1758L136.742 21.2461L137.785 21.2461L137.785 20.5938L142.695 20.5938L142.695 21.1836L143.785 21.1836L143.785 16.1758L140.711 16.1758L140.711 14.207L144.266 14.207Z" fill="rgb(5,95,194)" fill-rule="nonzero" />
<path id="" d="M120.105 6.91016C119.832 7.55078 119.305 8.46484 118.902 9.03906L119.672 9.40625C120.121 8.87891 120.633 8.07812 121.098 7.35938L120.105 6.91016ZM116.359 9.07031C116.199 8.48047 115.77 7.63281 115.32 7.00781L114.457 7.35938C114.887 8.01562 115.305 8.89453 115.449 9.45703L116.359 9.07031ZM117.145 13.5508L118.246 13.5508L118.246 11.3594C119.016 11.9023 120.008 12.6875 120.391 13.0547L121.047 12.1914C120.68 11.9219 119.305 11.0234 118.504 10.5586L121.512 10.5586L121.512 9.56641L118.246 9.56641L118.246 6.60938L117.145 6.60938L117.145 9.56641L113.848 9.56641L113.848 10.5586L116.777 10.5586C115.992 11.6016 114.809 12.5742 113.688 13.0547C113.91 13.2812 114.199 13.6797 114.328 13.9531C115.305 13.4414 116.344 12.5586 117.145 11.6172L117.145 13.5508ZM119.574 15.8398C119.223 16.6719 118.711 17.375 118.09 17.9531C117.512 17.6641 116.871 17.3594 116.281 17.1055C116.504 16.7344 116.742 16.2891 116.984 15.8398L119.574 15.8398ZM120.359 19.2812C120.008 19.0234 119.527 18.7344 119.016 18.4492C119.863 17.5508 120.52 16.4336 120.938 15.0547L120.266 14.7852L120.09 14.832L117.48 14.832C117.609 14.543 117.703 14.2734 117.816 14L116.762 13.8086C116.648 14.1445 116.504 14.4805 116.344 14.832L114.184 14.832L114.184 15.8398L115.848 15.8398C115.512 16.4648 115.16 17.0547 114.824 17.5352C115.609 17.8242 116.473 18.2227 117.273 18.6406C116.23 19.375 115.016 19.8867 113.719 20.1758C113.93 20.3984 114.168 20.832 114.281 21.0898C115.734 20.7031 117.098 20.0781 118.23 19.168C118.777 19.4727 119.258 19.793 119.625 20.0625L120.359 19.2812ZM125.91 10.8008C125.672 12.6406 125.289 14.2383 124.711 15.5859C124.105 14.1602 123.656 12.5273 123.352 10.8008L125.91 10.8008ZM128.105 10.8008L128.105 9.69531L123.594 9.69531C123.816 8.80078 124.008 7.87109 124.137 6.92969L123.047 6.76953C122.648 9.53516 121.93 12.207 120.711 13.8867C120.969 14.0469 121.414 14.4141 121.609 14.6094C122.008 14 122.375 13.2969 122.695 12.5117C123.047 14.0977 123.496 15.5352 124.105 16.7852C123.207 18.3047 121.961 19.4727 120.23 20.3203C120.441 20.543 120.777 21.0234 120.887 21.2812C122.52 20.3984 123.734 19.2812 124.68 17.8867C125.465 19.2461 126.473 20.3359 127.703 21.0898C127.879 20.7852 128.215 20.3828 128.488 20.1602C127.16 19.457 126.121 18.2734 125.305 16.8164C126.152 15.168 126.68 13.1836 127.047 10.8008L128.105 10.8008ZM134.648 14.6562L134.488 13.5664L132.824 14.0977L132.824 10.9297L134.633 10.9297L134.633 9.82422L132.824 9.82422L132.824 6.625L131.719 6.625L131.719 9.82422L129.734 9.82422L129.734 10.9297L131.719 10.9297L131.719 14.4336C130.887 14.6719 130.137 14.8945 129.543 15.0703L129.832 16.207C130.406 16.0312 131.047 15.8398 131.719 15.6172L131.719 19.7266C131.719 19.9688 131.641 20.0312 131.449 20.0312C131.273 20.0312 130.633 20.0312 129.945 20.0156C130.105 20.3516 130.246 20.832 130.297 21.1211C131.305 21.1367 131.91 21.0898 132.281 20.8945C132.68 20.7031 132.824 20.3984 132.824 19.7422L132.824 15.2461L134.648 14.6562ZM136.473 13.1836C136.488 12.8008 136.488 12.4648 136.488 12.1133L136.488 11.4258L139.574 11.4258L139.574 13.1836L136.473 13.1836ZM142.582 8.35156L142.582 10.3828L136.488 10.3828L136.488 8.35156L142.582 8.35156ZM142.695 19.6016L137.785 19.6016L137.785 17.1836L142.695 17.1836L142.695 19.6016ZM144.266 14.207L144.266 13.1836L140.711 13.1836L140.711 11.4258L143.719 11.4258L143.719 7.3125L135.336 7.3125L135.336 12.1133C135.336 14.6406 135.191 18.1133 133.543 20.5586C133.816 20.6719 134.312 21.0078 134.504 21.2305C135.848 19.2656 136.281 16.5742 136.426 14.207L139.574 14.207L139.574 16.1758L136.742 16.1758L136.742 21.2461L137.785 21.2461L137.785 20.5938L142.695 20.5938L142.695 21.1836L143.785 21.1836L143.785 16.1758L140.711 16.1758L140.711 14.207L144.266 14.207Z" fill="rgb(255,255,255)" fill-rule="nonzero" />
</g>
</g>
</svg>
src/views/dataLibrary/assets/icons/desc-icon.svg 0 → 100644
浏览文件 @ 58537cbd
<svg viewBox="0 0 16 14" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="14.000000" fill="none">
<rect id="降序 1" width="16.000000" height="14.000000" x="0.000000" y="0.000000" />
<path id="矢量 469" d="M5.19867 14C5.1619 14 5.12548 13.9955 5.08942 13.9865C5.05336 13.9776 5.01834 13.9643 4.98437 13.9467C4.9504 13.9291 4.91813 13.9076 4.88755 13.882C4.85698 13.8565 4.82869 13.8275 4.80269 13.795C4.77669 13.7625 4.75348 13.7271 4.73305 13.6889C4.71262 13.6507 4.69537 13.6103 4.6813 13.5679C4.66723 13.5254 4.65661 13.4816 4.64943 13.4366C4.64226 13.3915 4.63867 13.346 4.63867 13.3L4.63867 0.7C4.63867 0.654037 4.64226 0.608516 4.64943 0.563437C4.65661 0.518357 4.66723 0.474586 4.6813 0.432122C4.69537 0.389658 4.71262 0.349317 4.73305 0.311101C4.75348 0.272884 4.77669 0.237526 4.80269 0.205025C4.82869 0.172525 4.85698 0.143507 4.88755 0.117971C4.91813 0.0924358 4.9504 0.0708735 4.98437 0.0532843C5.01834 0.0356952 5.05336 0.0224172 5.08942 0.0134503C5.12548 0.00448343 5.1619 0 5.19867 0C5.23544 0 5.27186 0.00448343 5.30792 0.0134503C5.34399 0.0224172 5.379 0.0356952 5.41297 0.0532843C5.44695 0.0708735 5.47922 0.0924358 5.50979 0.117971C5.54036 0.143507 5.56865 0.172525 5.59465 0.205025C5.62065 0.237526 5.64387 0.272884 5.66429 0.311101C5.68472 0.349317 5.70197 0.389658 5.71604 0.432122C5.73012 0.474586 5.74074 0.518357 5.74791 0.563437C5.75508 0.608516 5.75867 0.654037 5.75867 0.7L5.75867 13.3C5.75867 13.346 5.75508 13.3915 5.74791 13.4366C5.74074 13.4816 5.73012 13.5254 5.71604 13.5679C5.70197 13.6103 5.68472 13.6507 5.66429 13.6889C5.64387 13.7271 5.62065 13.7625 5.59465 13.795C5.56865 13.8275 5.54036 13.8565 5.50979 13.882C5.47922 13.9076 5.44695 13.9291 5.41297 13.9467C5.379 13.9643 5.34399 13.9776 5.30792 13.9865C5.27186 13.9955 5.23544 14 5.19867 14L5.19867 14ZM11.1963 10.297L8.39627 13.797C8.34144 13.8593 8.27984 13.9083 8.21147 13.944C8.1433 13.979 8.07237 13.9965 7.99867 13.9965C7.92498 13.9965 7.85404 13.979 7.78587 13.944C7.71745 13.9085 7.65705 13.858 7.60467 13.7925C7.55228 13.727 7.51188 13.6515 7.48347 13.566C7.4545 13.481 7.43957 13.3924 7.43867 13.3L7.43867 0.7C7.43867 0.654037 7.44226 0.608516 7.44943 0.563437C7.4566 0.518357 7.46723 0.474586 7.4813 0.432122C7.49537 0.389658 7.51262 0.349317 7.53305 0.311101C7.55348 0.272884 7.57669 0.237526 7.60269 0.205025C7.62869 0.172525 7.65698 0.143507 7.68755 0.117971C7.71813 0.0924358 7.7504 0.0708735 7.78437 0.0532843C7.81834 0.0356952 7.85336 0.0224172 7.88942 0.0134503C7.92548 0.00448343 7.9619 0 7.99867 0C8.03544 0 8.07186 0.00448343 8.10792 0.0134503C8.14399 0.0224172 8.179 0.0356952 8.21297 0.0532843C8.24694 0.0708735 8.27922 0.0924358 8.30979 0.117971C8.34036 0.143507 8.36865 0.172525 8.39465 0.205025C8.42065 0.237526 8.44387 0.272884 8.46429 0.311101C8.48472 0.349317 8.50197 0.389658 8.51604 0.432122C8.53012 0.474586 8.54074 0.518357 8.54791 0.563437C8.55509 0.608516 8.55867 0.654037 8.55867 0.7L8.55867 11.613L10.4011 9.303C10.4272 9.27036 10.4556 9.24123 10.4863 9.21559C10.517 9.18995 10.5494 9.1683 10.5835 9.15064C10.6176 9.13298 10.6528 9.11964 10.689 9.11064C10.7252 9.10164 10.7618 9.09713 10.7987 9.09713C10.8356 9.09713 10.8722 9.10164 10.9084 9.11064C10.9446 9.11964 10.9797 9.13298 11.0139 9.15064C11.048 9.1683 11.0804 9.18995 11.1111 9.21559C11.1418 9.24123 11.1702 9.27036 11.1963 9.303C11.2224 9.33563 11.2457 9.37114 11.2662 9.40951C11.2867 9.44788 11.304 9.48839 11.3182 9.53102C11.3323 9.57366 11.343 9.61761 11.3502 9.66288C11.3574 9.70814 11.361 9.75385 11.361 9.8C11.361 9.84615 11.3574 9.89186 11.3502 9.93712C11.343 9.98238 11.3323 10.0263 11.3182 10.069C11.304 10.1116 11.2867 10.1521 11.2662 10.1905C11.2457 10.2289 11.2224 10.2644 11.1963 10.297L11.1963 10.297Z" fill="rgb(95,101,108)" fill-rule="nonzero" />
</svg>
src/views/dataLibrary/assets/icons/download.svg 0 → 100644
浏览文件 @ 58537cbd
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none" customFrame="#000000">
<rect id="Line/Download" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
<path id="形状" d="M7.90156 10.3281C7.95156 10.3922 8.04844 10.3922 8.09844 10.3281L9.84844 8.11406C9.9125 8.03281 9.85469 7.9125 9.75 7.9125L8.59219 7.9125L8.59219 2.625C8.59219 2.55625 8.53594 2.5 8.46719 2.5L7.52969 2.5C7.46094 2.5 7.40469 2.55625 7.40469 2.625L7.40469 7.91094L6.25 7.91094C6.14531 7.91094 6.0875 8.03125 6.15156 8.1125L7.90156 10.3281ZM12.7812 9.78125L13.7188 9.78125C13.7875 9.78125 13.8438 9.8375 13.8438 9.90625L13.8438 13C13.8438 13.2766 13.6203 13.5 13.3438 13.5L2.65625 13.5C2.37969 13.5 2.15625 13.2766 2.15625 13L2.15625 9.90625C2.15625 9.8375 2.2125 9.78125 2.28125 9.78125L3.21875 9.78125C3.2875 9.78125 3.34375 9.8375 3.34375 9.90625L3.34375 12.3125L12.6562 12.3125L12.6562 9.90625C12.6562 9.8375 12.7125 9.78125 12.7812 9.78125Z" fill="rgb(95,101,108)" fill-rule="evenodd" />
</svg>
src/views/dataLibrary/bill/countryBill/index.vue 0 → 100644
浏览文件 @ 58537cbd
<template>
<div class="countrybill-wrapper">
<div class="header-box">
<div class="header-top">
<SelectBox :placeholder-name="areaPlaceHolder" select-title="科技领域" :select-list="areaList"
:select-name="selectedArea" @update:select-text="handleSelectArea" />
<SelectBox :placeholder-name="DatePlaceHolder" select-title="提出时间" :select-list="dateList"
:select-name="selectedDate" :custom-time="customTime" @update:select-text="handleSelectDate"
@update:custom-time="handleCustomDate" />
<SelectBox v-if="isFolderAll" :placeholder-name="areaPlaceHolder" select-title="科技领域" :select-list="areaList"
:select-name="selectedArea" @update:select-text="handleSelectArea" />
<SelectBox v-if="isFolderAll" :placeholder-name="areaPlaceHolder" select-title="科技领域" :select-list="areaList"
:select-name="selectedArea" @update:select-text="handleSelectArea" />
<SelectBox v-if="isFolderAll" :placeholder-name="areaPlaceHolder" select-title="科技领域" :select-list="areaList"
:select-name="selectedArea" @update:select-text="handleSelectArea" />
<SelectBox v-if="isFolderAll" :placeholder-name="areaPlaceHolder" select-title="科技领域" :select-list="areaList"
:select-name="selectedArea" @update:select-text="handleSelectArea" />
<SelectBox v-if="isFolderAll" :placeholder-name="areaPlaceHolder" select-title="科技领域" :select-list="areaList"
:select-name="selectedArea" @update:select-text="handleSelectArea" />
</div>
<div class="header-footer">
<div class="header-footer-left">
<ActiveTag v-for="tag, index in activeTagList" :key="index" :tagName="tag.name"
@close="handleCloseCurTag(tag, index)" />
</div>
<div class="header-footer-right">
<HeaderBtnBox :isShowAll="isFolderAll" @show-all="handleSwitchFolderAll" />
</div>
</div>
</div>
<div class="chart-main-box" v-if="isShowChart">
<div class="info-box">
<div class="switch-box" @click="handleSwitchChartData">
<img src="@/views/dataLibrary/assets/icons/chart-active.svg" alt="">
</div>
<div class="num-box text-title-3-bold">
{{ `共 ${totalNum} 条数据` }}
</div>
</div>
<div class="content-box">
<div class="content-header">
<ChartHeader :list="staticsDemensionList" @clickItem="handleClickDemensionItem">
<template #chart-header-right>
<el-select v-model="selectedTime" placeholder="选择时间" style="width: 150px"
v-show="curDemension === '提案时间'">
<el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</template>
</ChartHeader>
</div>
<div class="content-main">
<ChartContainer
chartTitle="美国会法案提出数量随时间变化趋势"
:chartTypeList="curChartTypeList"
@clickChartItem="handleSwitchActiveChart">
<template #chart-box>
<LineChart v-if="activeChart === '折线图'" :lineChartData="lineChartData" />
<PieChart v-if="activeChart === '饼状图'" :pieChartData="pieChartData" />
<BarChart v-if="activeChart === '柱状图'" :barChartData="barChartData" />
<RaderChart v-if="activeChart === '雷达图'" :radarChartData="radarChartData" />
</template>
</ChartContainer>
</div>
</div>
</div>
<div class="data-main-box" v-else>
<div class="data-main-box-header">
<div class="switch-box" @click="handleSwitchChartData">
<img src="@/views/dataLibrary/assets/icons/data-active.svg" alt="">
</div>
<div class="num-box text-title-3-bold">
{{ `共 ${totalNum} 条数据` }}
</div>
</div>
<div class="data-main-box-main">
<div class="data-main-box-main-header">
<div class="header-left">
<div class="header-left-item1">
<el-checkbox v-model="isSelectedAll" label="全选" size="large" />
</div>
<div class="header-left-item2 text-tip-1">{{ `已选择${selectedNum}项` }}</div>
<div class="header-left-item2 text-tip-1 cancel">{{ '取消' }}</div>
</div>
<div class="header-right">
<div class="header-right-item item1">
<div class="icon">
<img src="../../assets/icons/download.svg" alt="">
</div>
<div class="text text-tip-1">{{ '导出' }}</div>
</div>
<div class="header-right-item2 item2">
<el-select v-model="curOperation" placeholder="批量操作" style="width: 120px">
<el-option v-for="item in operationList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</div>
<div class="header-right-item3 item3">
<el-select v-model="isSort" placeholder="发布时间" style="width: 166px" @change="handlePxChange">
<template #prefix>
<div style="display: flex; align-items: center; height: 100%">
<img src="../../assets/icons/desc-icon.svg" style="width: 14px; height: 14px" />
</div>
</template>
<el-option v-for="item in releaseTimeList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
</div>
</div>
<div class="data-main-box-main-content">
<el-table :data="tableData" style="width: 100%" :row-style="{ height: '52px' }">
<el-table-column type="selection" width="55" />
<el-table-column label="Date" width="180" class-name="date-column">
<template #default="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column property="name" label="Name" width="180" />
<el-table-column property="address" label="use show-overflow-tooltip" width="360" show-overflow-tooltip />
<el-table-column property="address" label="address" />
</el-table>
</div>
</div>
<div class="data-main-box-footer">
<el-pagination background layout="prev, pager, next" :total="totalNum" v-model:current-page="currentPage"
:page-size="pageSize" @current-change="handleGetData" />
</div>
</div>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
import ChartContainer from '../../components/ChartContainer/index.vue'
import ChartHeader from '../../components/ChartHeader/index.vue'
import ActiveTag from '../../components/ActiveTag/index.vue'
import HeaderBtnBox from '../../components/HeaderBtnBox/index.vue'
import LineChart from '../../components/LineChart/index.vue'
import PieChart from '../../components/PieChart/index.vue'
import BarChart from '../../components/BarChart/index.vue'
import RaderChart from '../../components/RadarChart/idnex.vue'
import SelectBox from '../../components/SelectBox/index.vue'
// 图表/数据
const isShowChart = ref(true)
const handleSwitchChartData = () => {
isShowChart.value = !isShowChart.value
}
// 总计数据
const totalNum = ref(12)
// 统计维度列表
const staticsDemensionList = ref([
{
name: '提案时间',
active: true,
chartTypeList: ['折线图', '柱状图']
},
{
name: '科技领域',
active: false,
chartTypeList: ['饼状图']
},
{
name: '提出议院',
active: false,
chartTypeList: ['饼状图']
},
{
name: '提出委员会',
active: false,
chartTypeList: ['饼状图']
},
{
name: '提出议员党派',
active: false,
chartTypeList: ['饼状图']
},
{
name: '立法阶段',
active: false,
chartTypeList: ['饼状图']
},
])
const curChartTypeList = computed(() => {
let arr = staticsDemensionList.value.filter(item =>item.active)
return arr[0].chartTypeList
})
// 当前维度
const curDemension = ref('提案时间')
const handleClickDemensionItem = (val) => {
staticsDemensionList.value.forEach(item => {
item.active = false
})
val.active = true
curDemension.value = val.name
activeChart.value = val.chartTypeList[0]
}
const selectedTime = ref('按月统计')
const timeList = ref([
{
label: '按年统计',
value: '按年统计'
},
{
label: '按季统计',
value: '按季统计'
},
{
label: '按月统计',
value: '按月统计'
},
])
// 激活的标签列表
const activeTagList = ref([
{
name: '人工智能'
},
{
name: '共和党'
},
{
name: '2025-01-01 至 2025-12-31'
},
])
const handleCloseCurTag = (tag, index) => {
// alert(tag.name)
activeTagList.value.splice(index, 1)
}
const activeChart = ref('折线图')
const handleSwitchActiveChart = val => {
activeChart.value = val.name
}
const lineChartData = ref({
dataX: ['2025-08', '2025-09', '2025-10', '2025-11', '2025-12', '2026-01', '2026-02',],
dataY: [123, 51, 64, 72, 58, 69, 105]
})
const pieChartData = ref([
{
name: '核',
value: 24
},
{
name: '极地',
value: 24
},
{
name: '新材料',
value: 24
},
{
name: '深海',
value: 30
},
{
name: '海洋',
value: 31
},
{
name: '先进制造',
value: 31
},
{
name: '生物科技',
value: 32
},
{
name: '新能源',
value: 35
},
{
name: '集成电路',
value: 16
},
{
name: '新一代通信网络',
value: 55
},
{
name: '量子科技',
value: 33
},
{
name: '人工智能',
value: 55
}
])
const barChartData = ref({
dataX: ['2025-08', '2025-09', '2025-10', '2025-11', '2025-12', '2026-01', '2026-02',],
dataY: [123, 51, 64, 72, 58, 69, 105]
})
const radarChartData = ref({
title: [
{
name: '航空航天',
max: 10
},
{
name: '先进制造',
max: 10
},
{
name: '量子科技',
max: 10
},
{
name: '人工智能',
max: 10
},
{
name: '新材料',
max: 10
},
{
name: '集成电路',
max: 10
},
],
data: [
{
name: "337调查",
value: [10, 5, 2, 8, 5, 7
]
},
{
name: "232调查",
value: [2, 5, 3, 8, 10, 2]
},
{
name: "301调查",
value: [5, 8, 2, 9, 1, 5]
}
]
}
)
// 数据- 是否全选
const isSelectedAll = ref(false)
const selectedNum = ref(8) // 选择项数
const curOperation = ref('')
const operationList = ref([
{
name: 'aaa',
id: 'aaa'
},
{
name: 'bbb',
id: 'bbb'
},
{
name: 'ccc',
id: 'ccc'
},
])
const releaseTimeList = ref([
{
label: "按发布时间倒序",
value: true
},
{
label: "按发布时间升序",
value: false
}
]);
const isSort = ref(true); // true 倒序 false 升序
// const handleSwithSort = () => {
// isSort.value = !isSort.value;
// };
const handlePxChange = val => {
};
const currentPage = ref(1);
const pageSize = ref(10)
const handleGetData = () => {
}
// 领域
const areaPlaceHolder = ref('请选择领域')
const selectedArea = ref('人工智能')
const areaList = ref([
{
name: '人工智能',
id: '人工智能'
},
{
name: '集成电路',
id: '集成电路'
},
{
name: '先进制造',
id: '先进制造'
},
])
const handleSelectArea = (value) => {
selectedArea.value = value
}
// 提出时间
const DatePlaceHolder = ref('请选择时间')
const selectedDate = ref('时间1')
const dateList = ref([
{
name: '时间1',
id: '时间1'
},
{
name: '时间2',
id: '时间2'
},
{
name: '自定义',
id: '自定义'
},
])
const customTime = ref('') // 自定义时间
const handleCustomDate = value => {
console.log('value', value);
customTime.value = value
}
const handleSelectDate = (value) => {
selectedDate.value = value
}
// 展开全部 / 收起
const isFolderAll = ref(false)
const handleSwitchFolderAll = () => {
isFolderAll.value = !isFolderAll.value
}
// 表格数据
const tableData = [
{
date: '2016-05-04',
name: 'Aleyna Kutzner',
address: 'Lohrbergstr. 86c, Süd Lilli, Saarland',
},
{
date: '2016-05-03',
name: 'Helen Jacobi',
address: '760 A Street, South Frankfield, Illinois',
},
{
date: '2016-05-02',
name: 'Brandon Deckert',
address: 'Arnold-Ohletz-Str. 41a, Alt Malinascheid, Thüringen',
},
{
date: '2016-05-01',
name: 'Margie Smith',
address: '23618 Windsor Drive, West Ricardoview, Idaho',
},
{
date: '2016-05-01',
name: 'Margie Smith',
address: '23618 Windsor Drive, West Ricardoview, Idaho',
},
{
date: '2016-05-01',
name: 'Margie Smith',
address: '23618 Windsor Drive, West Ricardoview, Idaho',
},
{
date: '2016-05-01',
name: 'Margie Smith',
address: '23618 Windsor Drive, West Ricardoview, Idaho',
},
{
date: '2016-05-01',
name: 'Margie Smith',
address: '23618 Windsor Drive, West Ricardoview, Idaho',
},
{
date: '2016-05-01',
name: 'Margie Smith',
address: '23618 Windsor Drive, West Ricardoview, Idaho',
},
{
date: '2016-05-01',
name: 'Margie Smith',
address: '23618 Windsor Drive, West Ricardoview, Idaho',
}
]
</script>
<style lang="scss" scoped>
.countrybill-wrapper {
width: 1600px;
height: 968px;
overflow: hidden;
overflow-y: auto;
.headere-box {
width: 1568px;
height: 112px;
border-radius: 10px;
background: rgb(255, 255, 255);
border: 1px solid var(--bg-black-5);
margin: 16px auto;
}
.header-box {
width: 1568px;
min-height: 112px;
border-radius: 10px;
background: rgb(255, 255, 255);
border: 1px solid var(--bg-black-5);
margin: 16px auto;
box-sizing: border-box;
padding: 16px 24px;
.header-top {
min-height: 28px;
display: flex;
flex-wrap: wrap;
gap: 12px 42px;
// transition: all ease 1s;
}
.header-footer {
margin-top: 16px;
display: flex;
justify-content: space-between;
.header-footer-left {
display: flex;
justify-content: space-between;
gap: 8px;
}
}
}
.chart-main-box {
.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);
.content-header {
margin: 16px 24px;
width: 1520px;
height: 28px;
}
.content-main {
width: 1520px;
margin: 0 auto;
}
}
}
.data-main-box {
width: 1568px;
height: 810px;
border-radius: 10px;
background: var(--bg-white-100);
margin: 0 auto;
overflow: hidden;
.data-main-box-header {
margin: 16px auto;
width: 1520px;
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 {
box-sizing: border-box;
padding: 2px 0;
color: var(--color-red-100);
}
}
.data-main-box-main {
width: 1520px;
// height: 633px;
height: 680px;
border-radius: 10px;
border: 1px solid var(--bg-black-5);
margin: 0 auto;
.data-main-box-main-header {
height: 48px;
background: var(--bg-black-2);
display: flex;
justify-content: space-between;
.header-left {
margin-left: 16px;
height: 48px;
display: flex;
gap: 16px;
align-items: center;
.header-left-item2 {
color: var(--color-primary-100);
}
.cancel {
cursor: pointer;
}
}
.header-right {
margin-right: 16px;
display: flex;
gap: 8px;
align-items: center;
.header-right-item {
height: 30px;
padding: 5px 16px;
border: 1px solid var(--bg-black-10);
border-radius: 4px;
background: var(--bg-white-100);
cursor: pointer;
}
.item1 {
display: flex;
gap: 2px;
justify-content: center;
align-items: center;
&:hover {
background: var(--color-primary-2);
}
.icon {
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
color: var(--text-primary-65-color);
}
}
.item2 {}
.item3 {}
}
}
.data-main-box-main-content {}
}
.data-main-box-footer {
margin: 16px auto 0;
height: 40px;
width: 1520px;
display: flex;
align-items: center;
justify-content: flex-end;
}
}
}
.date-column {
background-color: #ecf5ff;
}
.date-column .cell {
color: #409eff !important;
font-weight: 500;
}
</style>
\ No newline at end of file
src/views/dataLibrary/components/ActiveTag/close.svg 0 → 100644
浏览文件 @ 58537cbd
<svg viewBox="0 0 12.7275 12.7266" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12.727539" height="12.726562" fill="none" customFrame="#000000">
<path id="合并" d="M5 4L5 0L4 0L4 4L0 4L0 5L4 5L4 9L5 9L5 5L9 5L9 4L5 4Z" fill="rgb(5,95,194)" fill-rule="evenodd" transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,6.36328)" />
</svg>
src/views/dataLibrary/components/ActiveTag/index.vue 0 → 100644
浏览文件 @ 58537cbd
<template>
<div class="wrapper">
<div class="text text-tip-1">{{ tagName }}</div>
<div class="icon" @click="handleClose">
<img src="./close.svg" alt="">
</div>
</div>
</template>
<script setup>
const props = defineProps({
tagName: {
type: String,
default: ''
}
})
const emit = defineEmits(['close'])
const handleClose = () => {
emit('close')
}
</script>
<style lang="scss" scoped>
.wrapper{
height: 30px;
box-sizing: border-box;
display: flex;
padding: 3px 4px 3px 8px;
align-items: center;
justify-content: flex-start;
gap: 4px;
border-radius: 4px;
border: 1px solid var(--color-primary-35);
background: var(--color-primary-2);
cursor: pointer;
.text{
color: var(--color-primary-100);
}
.icon{
width: 15px;
height: 15px;
img{
width: 100%;
height: 100%;
}
}
}
</style>
\ No newline at end of file
src/views/dataLibrary/components/BarChart/barChart.js 0 → 100644
浏览文件 @ 58537cbd
import * as echarts from "echarts";
const getBarChart = (data) => {
const option = {
tooltip: {},
grid: {
top: 48,
right: 34,
bottom: 10,
left: 24,
containLabel: true
},
yAxis: {
type: 'value',
splitLine: {
show: true,
lineStyle: {
color: ['#DEE2E7'], // 线条颜色，可以是数组，用于不同间隔交替颜色
width: 1, // 线宽
type: 'dashed', // 类型：'solid'（实线）, 'dashed'（虚线）, 'dotted'（点线）
// opacity: 0.6 // 透明度
}
},
axisLine: {
show: false,
lineStyle: {
color: 'rgba(95, 101, 108, 1)',
}
},
show: true,
textStyle: {
color: 'rgba(95, 101, 108, 1)',
fontFamily: 'Microsoft YaHei',
fontsize: 14,
}
},
xAxis: {
type: 'category',
data: data.dataX,
splitLine: {
show: false
},
axisTick: {
show: true
},
axisLine: {
show: true,
lineStyle: {
color: '#e7f3ff',
}
},
axisLabel: {
show: true,
textStyle: {
color: 'rgba(95, 101, 108, 1)',
fontFamily: 'Microsoft YaHei',
fontsize: 14,
}
}
},
series: [{
type: 'bar',
data: data.dataY,
label: {
show: true,
position: 'top',
color: 'rgb(59, 65, 75)',
fontWeight: 'regular', // 文字加粗
fontSize: 16,
fontFamily: 'Source Han Sans CN',
formatter: function (params) {
return params.value
},
},
barWidth: 20,
itemStyle: {
color: function (params) {
return new echarts.graphic.LinearGradient(0, 1, 0, 0,
[{
offset: 0,
color: 'rgba(10, 87, 166, 0)'
},
{
offset: 1,
color: 'rgba(5, 95, 194, 1)'
}
]);
},
// barBorderRadius: 10,
}
}]
}
return option
}
export default getBarChart
\ No newline at end of file
src/views/dataLibrary/components/BarChart/index.vue 0 → 100644
浏览文件 @ 58537cbd
<template>
<div class="bar-chart-wrapper" id="bar-chart"></div>
</template>
<script setup>
import { ref, onMounted, nextTick } from 'vue'
import setChart from '@/utils/setChart';
import getBarChart from './barchart';
const props = defineProps({
barChartData: {
type: Array,
default: [
]
}
})
onMounted(() => {
const barChart = getBarChart(props.barChartData)
setChart(barChart, 'bar-chart', )
})
</script>
<style lang="scss">
.bar-chart-wrapper {
width: 100%;
height: 100%;
}
</style>
\ No newline at end of file
src/views/dataLibrary/components/ChartContainer/assets/icons/bar-active.svg 0 → 100644
浏览文件 @ 58537cbd
<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32.000000" height="32.000000" fill="none" customFrame="#000000">
<rect id="排行" width="32.000000" height="32.000000" x="0.000000" y="0.000000" />
<path id="合并" d="M9 7C9.55228 7 10 7.44772 10 8L10 24C10 24.5523 9.55228 25 9 25L8 25C7.44772 25 7 24.5523 7 24L7 8C7 7.44772 7.44772 7 8 7L9 7ZM14 12C14.5523 12 15 12.4477 15 13L15 24C15 24.5523 14.5523 25 14 25L13 25C12.4477 25 12 24.5523 12 24L12 13C12 12.4477 12.4477 12 13 12L14 12ZM19 17C19.5523 17 20 17.4477 20 18L20 24C20 24.5523 19.5523 25 19 25L18 25C17.4477 25 17 24.5523 17 24L17 18C17 17.4477 17.4477 17 18 17L19 17ZM24 20C24.5523 20 25 20.4477 25 21L25 24C25 24.5523 24.5523 25 24 25L23 25C22.4477 25 22 24.5523 22 24L22 21C22 20.4477 22.4477 20 23 20L24 20Z" fill="rgb(5,95,194)" fill-rule="evenodd" />
</svg>
src/views/dataLibrary/components/ChartContainer/assets/icons/bar.svg 0 → 100644
浏览文件 @ 58537cbd
<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32.000000" height="32.000000" fill="none" customFrame="#000000">
<rect id="排行" width="32.000000" height="32.000000" x="0.000000" y="0.000000" />
<path id="合并" d="M9 7C9.55228 7 10 7.44772 10 8L10 24C10 24.5523 9.55228 25 9 25L8 25C7.44772 25 7 24.5523 7 24L7 8C7 7.44772 7.44772 7 8 7L9 7ZM14 12C14.5523 12 15 12.4477 15 13L15 24C15 24.5523 14.5523 25 14 25L13 25C12.4477 25 12 24.5523 12 24L12 13C12 12.4477 12.4477 12 13 12L14 12ZM19 17C19.5523 17 20 17.4477 20 18L20 24C20 24.5523 19.5523 25 19 25L18 25C17.4477 25 17 24.5523 17 24L17 18C17 17.4477 17.4477 17 18 17L19 17ZM24 20C24.5523 20 25 20.4477 25 21L25 24C25 24.5523 24.5523 25 24 25L23 25C22.4477 25 22 24.5523 22 24L22 21C22 20.4477 22.4477 20 23 20L24 20Z" fill="rgb(170,173,177)" fill-rule="evenodd" />
</svg>
src/views/dataLibrary/components/ChartContainer/assets/icons/download.svg 0 → 100644
浏览文件 @ 58537cbd
<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32.000000" height="32.000000" fill="none">
<defs>
<clipPath id="clipPath_0">
<rect width="18.000000" height="15.000000" x="7.000000" y="7.000000" fill="rgb(255,255,255)" />
</clipPath>
</defs>
<rect id="收藏按钮" width="32.000000" height="32.000000" x="0.000000" y="0.000000" />
<g id="容器 742" customFrame="url(#clipPath_0)">
<rect id="容器 742" width="18.000000" height="15.000000" x="7.000000" y="7.000000" />
<rect id="矩形 347" width="2.000000" height="6.000000" x="15.000000" y="7.000000" fill="rgb(132,136,142)" />
<path id="矢量 600" d="M20 13L12 13L16 18L20 13Z" fill="rgb(132,136,142)" fill-rule="evenodd" />
<path id="矢量 601" d="M24 21.9996L24.9999 17.0012L21.9999 14.0011L20.9999 14L23.0003 17.001L19.9999 17.0015L18.9998 19.9987L16 19.9996L13.0001 19.9997L12 17.002L9.00017 17.0028L11 14.0008L10 14.0004L7 17.0023L8.00016 22L24 21.9996Z" fill="rgb(132,136,142)" fill-rule="evenodd" />
</g>
</svg>
src/views/dataLibrary/components/ChartContainer/assets/icons/line-active.svg 0 → 100644
浏览文件 @ 58537cbd
<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32.000000" height="32.000000" fill="none" customFrame="#000000">
<rect id="折线图" width="32.000000" height="32.000000" x="0.000000" y="0.000000" />
<path id="合并" d="M24.5419 8.84013L17.1957 13.5768C17.0388 13.678 16.867 13.7311 16.6804 13.736C16.4938 13.741 16.3194 13.6972 16.1573 13.6045L12.0821 11.274L8.50424 13.3633C8.02065 13.6457 7.41881 13.4877 7.13642 13.0041C6.85402 12.5205 7.0121 11.9187 7.49568 11.6363L11.5725 9.25552C11.7269 9.16537 11.8935 9.11988 12.0723 9.11907C12.2511 9.11826 12.418 9.16223 12.5732 9.25098L16.6226 11.5666L23.4581 7.15925C23.9287 6.85578 24.537 6.98714 24.8404 7.45779C25.1439 7.92844 25.0125 8.53667 24.5419 8.84013ZM8.00352 17.6827L11.5804 15.6372C11.888 15.4613 12.2657 15.4613 12.5733 15.6372L16.1169 17.6636C16.4459 17.8517 16.853 17.8377 17.1683 17.6273L22.9449 13.7732C23.6095 13.3299 24.4999 13.8062 24.4999 14.6051L24.4999 23.5008C24.4999 24.0531 24.0522 24.5008 23.4999 24.5008L8.49997 24.501C7.94768 24.501 7.49996 24.0533 7.49996 23.501L7.49993 18.5507C7.49993 18.192 7.6921 17.8607 8.00352 17.6827Z" fill="rgb(5,95,194)" fill-rule="evenodd" />
</svg>
src/views/dataLibrary/components/ChartContainer/assets/icons/line.svg 0 → 100644
浏览文件 @ 58537cbd
<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32.000000" height="32.000000" fill="none" customFrame="#000000">
<rect id="折线图" width="32.000000" height="32.000000" x="0.000000" y="0.000000" />
<path id="合并" d="M24.5419 8.84013L17.1957 13.5768C17.0388 13.678 16.867 13.7311 16.6804 13.736C16.4938 13.741 16.3194 13.6972 16.1573 13.6045L12.0821 11.274L8.50424 13.3633C8.02065 13.6457 7.41881 13.4877 7.13642 13.0041C6.85402 12.5205 7.0121 11.9187 7.49568 11.6363L11.5725 9.25552C11.7269 9.16537 11.8935 9.11988 12.0723 9.11907C12.2511 9.11826 12.418 9.16223 12.5732 9.25098L16.6226 11.5666L23.4581 7.15925C23.9287 6.85578 24.537 6.98714 24.8404 7.45779C25.1439 7.92844 25.0125 8.53667 24.5419 8.84013ZM8.00352 17.6827L11.5804 15.6372C11.888 15.4613 12.2657 15.4613 12.5733 15.6372L16.1169 17.6636C16.4459 17.8517 16.853 17.8377 17.1683 17.6273L22.9449 13.7732C23.6095 13.3299 24.4999 13.8062 24.4999 14.6051L24.4999 23.5008C24.4999 24.0531 24.0522 24.5008 23.4999 24.5008L8.49997 24.501C7.94768 24.501 7.49996 24.0533 7.49996 23.501L7.49993 18.5507C7.49993 18.192 7.6921 17.8607 8.00352 17.6827Z" fill="rgb(170,173,177)" fill-rule="evenodd" />
</svg>
src/views/dataLibrary/components/ChartContainer/assets/icons/pie-active.svg 0 → 100644
浏览文件 @ 58537cbd
<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32.000000" height="32.000000" fill="none" customFrame="#000000">
<rect id="环形图" width="32.000000" height="32.000000" x="0.000000" y="0.000000" />
<path id="合并" d="M24.7648 13.9444C25.2033 15.8248 25.0255 17.7965 24.2576 19.5681C23.6227 21.0327 22.6124 22.2963 21.3365 23.2358C20.8918 23.5633 20.2761 23.3951 20 22.9168L18.75 20.7518C18.4739 20.2735 18.6479 19.6688 19.0536 19.294C19.5109 18.8715 19.8783 18.3562 20.1288 17.7784C20.5128 16.8925 20.6017 15.9067 20.3824 14.9665C20.1631 14.0263 19.6472 13.1815 18.911 12.557C18.4307 12.1495 17.8732 11.8499 17.2762 11.6734C16.7466 11.5167 16.323 11.0515 16.359 10.5003L16.5222 8.00568C16.5583 7.45457 17.036 7.03139 17.5797 7.12833C19.1396 7.40643 20.6047 8.09274 21.822 9.12533C23.2945 10.3744 24.3262 12.0639 24.7648 13.9444ZM7.30579 13.6625C7.07063 14.5415 6.97061 15.4491 7.00743 16.3544C7.02988 16.9062 7.54601 17.2816 8.09195 17.1981L10.5632 16.8201C11.1092 16.7366 11.4723 16.2227 11.5112 15.6718C11.5313 15.3866 11.5786 15.1032 11.6529 14.8256C11.8137 14.2247 12.0972 13.6637 12.4857 13.1779C12.8742 12.6922 13.3592 12.2923 13.91 12.0034C14.1646 11.8699 14.4306 11.7615 14.7044 11.6791C15.2333 11.5201 15.6549 11.053 15.6163 10.502L15.4419 8.0081C15.4034 7.45717 14.9238 7.03614 14.3805 7.13552C13.4893 7.29855 12.6258 7.59559 11.8201 8.01817C10.7184 8.59592 9.74843 9.39579 8.97144 10.3673C8.19446 11.3388 7.62731 12.4608 7.30579 13.6625ZM12.0819 24.091C10.9656 23.5512 9.973 22.7866 9.16618 21.8451C8.57678 21.1574 8.09583 20.3861 7.7381 19.5581C7.51906 19.0511 7.82141 18.4891 8.34956 18.3276L10.7403 17.5967C11.2685 17.4352 11.8185 17.7408 12.0924 18.2204C12.2332 18.4669 12.3974 18.7002 12.5831 18.9169C12.9865 19.3876 13.4828 19.7699 14.0409 20.0398C14.599 20.3097 15.2069 20.4613 15.8264 20.4853C16.1115 20.4963 16.3964 20.4801 16.677 20.4374C17.223 20.3543 17.8041 20.5957 18.0055 21.1099L18.9171 23.4378C19.1185 23.9521 18.8657 24.5381 18.3322 24.6812C17.4611 24.9149 16.5578 25.0169 15.6528 24.9819C14.4138 24.9341 13.1981 24.6308 12.0819 24.091Z" fill="rgb(5,95,194)" fill-rule="evenodd" />
</svg>
src/views/dataLibrary/components/ChartContainer/assets/icons/pie.svg 0 → 100644
浏览文件 @ 58537cbd
<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32.000000" height="32.000000" fill="none" customFrame="#000000">
<rect id="环形图" width="32.000000" height="32.000000" x="0.000000" y="0.000000" />
<path id="合并" d="M24.7648 13.9444C25.2033 15.8248 25.0255 17.7965 24.2576 19.5681C23.6227 21.0327 22.6124 22.2963 21.3365 23.2358C20.8918 23.5633 20.2761 23.3951 20 22.9168L18.75 20.7518C18.4739 20.2735 18.6479 19.6688 19.0536 19.294C19.5109 18.8715 19.8783 18.3562 20.1288 17.7784C20.5128 16.8925 20.6017 15.9067 20.3824 14.9665C20.1631 14.0263 19.6472 13.1815 18.911 12.557C18.4307 12.1495 17.8732 11.8499 17.2762 11.6734C16.7466 11.5167 16.323 11.0515 16.359 10.5003L16.5222 8.00568C16.5583 7.45457 17.036 7.03139 17.5797 7.12833C19.1396 7.40643 20.6047 8.09274 21.822 9.12533C23.2945 10.3744 24.3262 12.0639 24.7648 13.9444ZM7.30579 13.6625C7.07063 14.5415 6.97061 15.4491 7.00743 16.3544C7.02988 16.9062 7.54601 17.2816 8.09195 17.1981L10.5632 16.8201C11.1092 16.7366 11.4723 16.2227 11.5112 15.6718C11.5313 15.3866 11.5786 15.1032 11.6529 14.8256C11.8137 14.2247 12.0972 13.6637 12.4857 13.1779C12.8742 12.6922 13.3592 12.2923 13.91 12.0034C14.1646 11.8699 14.4306 11.7615 14.7044 11.6791C15.2333 11.5201 15.6549 11.053 15.6163 10.502L15.4419 8.0081C15.4034 7.45717 14.9238 7.03614 14.3805 7.13552C13.4893 7.29855 12.6258 7.59559 11.8201 8.01817C10.7184 8.59592 9.74843 9.39579 8.97144 10.3673C8.19446 11.3388 7.62731 12.4608 7.30579 13.6625ZM12.0819 24.091C10.9656 23.5512 9.973 22.7866 9.16618 21.8451C8.57678 21.1574 8.09583 20.3861 7.7381 19.5581C7.51906 19.0511 7.82141 18.4891 8.34956 18.3276L10.7403 17.5967C11.2685 17.4352 11.8185 17.7408 12.0924 18.2204C12.2332 18.4669 12.3974 18.7002 12.5831 18.9169C12.9865 19.3876 13.4828 19.7699 14.0409 20.0398C14.599 20.3097 15.2069 20.4613 15.8264 20.4853C16.1115 20.4963 16.3964 20.4801 16.677 20.4374C17.223 20.3543 17.8041 20.5957 18.0055 21.1099L18.9171 23.4378C19.1185 23.9521 18.8657 24.5381 18.3322 24.6812C17.4611 24.9149 16.5578 25.0169 15.6528 24.9819C14.4138 24.9341 13.1981 24.6308 12.0819 24.091Z" fill="rgb(170,173,177)" fill-rule="evenodd" />
</svg>
src/views/dataLibrary/components/ChartContainer/assets/icons/radar-active.svg 0 → 100644
浏览文件 @ 58537cbd
<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32.000000" height="32.000000" fill="none" customFrame="#000000">
<rect id="容器 1716" width="32.000000" height="32.000000" x="0.000000" y="0.000000" />
<path id="合并" d="M24.9229 13.317C25.2734 13.5717 25.42 14.023 25.2862 14.4351L22.1025 24.2334C21.9686 24.6455 21.5846 24.9244 21.1514 24.9244L10.8488 24.9244C10.4156 24.9244 10.0316 24.6455 9.89773 24.2334L6.71405 14.4351C6.58018 14.023 6.72683 13.5717 7.07732 13.317L15.4123 7.2613C15.7628 7.00665 16.2374 7.00665 16.5879 7.2613L24.9229 13.317ZM22.0701 14.2438C22.4206 14.4985 22.5672 14.9498 22.4334 15.3618L20.3395 21.8061C20.2056 22.2181 19.8217 22.4971 19.3884 22.4971L12.6125 22.4971C12.1793 22.4971 11.7954 22.2181 11.6615 21.8061L9.56761 15.3618C9.43373 14.9498 9.58039 14.4985 9.93088 14.2438L15.4127 10.261C15.7632 10.0064 16.2378 10.0064 16.5883 10.261L22.0701 14.2438ZM20.5313 15.9799C20.6651 15.5679 20.5185 15.1165 20.168 14.8618L16.5883 12.261C16.2378 12.0064 15.7632 12.0064 15.4127 12.261L11.833 14.8618C11.4825 15.1165 11.3358 15.5679 11.4697 15.9799L12.837 20.1881C12.9709 20.6001 13.3549 20.8791 13.7881 20.8791L18.2129 20.8791C18.6461 20.8791 19.0301 20.6001 19.1639 20.1881L20.5313 15.9799Z" fill="rgb(5,95,194)" fill-rule="evenodd" />
</svg>
src/views/dataLibrary/components/ChartContainer/assets/icons/radar.svg 0 → 100644
浏览文件 @ 58537cbd
<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32.000000" height="32.000000" fill="none" customFrame="#000000">
<rect id="容器 1716" width="32.000000" height="32.000000" x="0.000000" y="0.000000" />
<path id="合并" d="M24.9229 13.317C25.2734 13.5717 25.42 14.023 25.2862 14.4351L22.1025 24.2334C21.9686 24.6455 21.5846 24.9244 21.1514 24.9244L10.8488 24.9244C10.4156 24.9244 10.0316 24.6455 9.89773 24.2334L6.71405 14.4351C6.58018 14.023 6.72683 13.5717 7.07732 13.317L15.4123 7.2613C15.7628 7.00665 16.2374 7.00665 16.5879 7.2613L24.9229 13.317ZM22.0701 14.2438C22.4206 14.4985 22.5672 14.9498 22.4334 15.3618L20.3395 21.8061C20.2056 22.2181 19.8217 22.4971 19.3884 22.4971L12.6125 22.4971C12.1793 22.4971 11.7954 22.2181 11.6615 21.8061L9.56761 15.3618C9.43373 14.9498 9.58039 14.4985 9.93088 14.2438L15.4127 10.261C15.7632 10.0064 16.2378 10.0064 16.5883 10.261L22.0701 14.2438ZM20.5313 15.9799C20.6651 15.5679 20.5185 15.1165 20.168 14.8618L16.5883 12.261C16.2378 12.0064 15.7632 12.0064 15.4127 12.261L11.833 14.8618C11.4825 15.1165 11.3358 15.5679 11.4697 15.9799L12.837 20.1881C12.9709 20.6001 13.3549 20.8791 13.7881 20.8791L18.2129 20.8791C18.6461 20.8791 19.0301 20.6001 19.1639 20.1881L20.5313 15.9799Z" fill="rgb(170,173,177)" fill-rule="evenodd" />
</svg>
src/views/dataLibrary/components/ChartContainer/index.vue 0 → 100644
浏览文件 @ 58537cbd
<template>
<div class="chart-wrapper">
<div class="header">
<div class="header-left">
<div class="chart-item" v-for="item, index in chartItemList" :key="index" @click="handleClickChartItem(item)">
<img v-if="!item.active" :src="item.icon" alt="">
<img v-else :src="item.activeIcon" alt="">
</div>
</div>
<div class="header-center text-title-3-bold">{{ chartTitle }}</div>
<div class="header-right">
<img src="./assets/icons/download.svg" alt="">
</div>
</div>
<div class="main">
<div class="chart-box">
<slot name="chart-box"></slot>
</div>
<div class="tip-box">
<TipTab />
</div>
</div>
</div>
</template>
<script setup>
import { ref, computed, onMounted, nextTick } from 'vue'
import Line from './assets/icons/line.svg'
import LineActive from './assets/icons/line-active.svg'
import Bar from './assets/icons/bar.svg'
import BarActive from './assets/icons/bar-active.svg'
import Pie from './assets/icons/pie.svg'
import PieActive from './assets/icons/pie-active.svg'
import Radar from './assets/icons/radar.svg'
import RadarActive from './assets/icons/radar-active.svg'
import TipTab from '@/components/base/TipTab/index.vue'
const defaultChartTypeList = [
{
name: '折线图',
active: false,
icon: Line,
activeIcon: LineActive
},
{
name: '柱状图',
active: false,
icon: Bar,
activeIcon: BarActive
},
{
name: '饼状图',
active: false,
icon: Pie,
activeIcon: PieActive
},
{
name: '雷达图',
active: false,
icon: Radar,
activeIcon: RadarActive
},
]
const emit = defineEmits('clickChartItem')
const handleClickChartItem = (item) => {
chartItemList.value.forEach(chart => {
chart.active = false
})
item.active = true
emit('clickChartItem', item)
}
const props = defineProps({
chartTitle: {
type: String,
default: ''
},
chartTypeList : {
type: Array,
default: []
}
})
const chartItemList = computed(() => {
let arr = []
props.chartTypeList.forEach(item => {
defaultChartTypeList.forEach(val => {
if(val.name === item) {
arr.push(val)
}
})
})
arr.forEach(item => {
item.active = false
})
arr[0].active = true
return arr
})
// nextTick(() => {
// let arr = chartItemList.value.filter(item => item.active)
// if(!arr.length) {
// alert(1)
// chartItemList.value[0].active = true
// }
// })
</script>
<style lang="scss" scoped>
.chart-wrapper {
width: 1520px;
height: 682px;
border-radius: 10px;
border: 1px solid var(--bg-black-5);
.header {
height: 48px;
border-bottom: 1px solid var(--bg-black-5);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 13px 0 16px;
position: relative;
.header-left {
width: 152px;
height: 32px;
display: flex;
gap: 8px;
.chart-item {
width: 32px;
height: 32px;
border-radius: 4px;
cursor: pointer;
&:hover {
background: var(--color-primary-2);
}
img {
width: 100%;
height: 100%;
}
}
}
.header-center {
position: absolute;
width: 1120px;
height: 24px;
text-align: center;
left: 200px;
top: 12px;
color: var(--text-primary-80-color);
}
.header-right {
width: 32px;
height: 32px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
}
.main {
.chart-box {
width: 1520px;
height: 580px;
}
.tip-box {
height: 54px;
box-sizing: border-box;
padding-top: 10px;
// background: orange;
}
}
}
</style>
\ No newline at end of file
src/views/dataLibrary/components/ChartHeader/index.vue 0 → 100644
浏览文件 @ 58537cbd
<template>
<div class="wrapper">
<div class="left">
<div class="left-text text-tip-1">{{ '统计维度：' }}</div>
<div class="left-list">
<ActionButton v-for="item, index in list" :key="index" :name="item.name"
:type="item.active ? 'active' : 'normal'" @click="handleClickItem(item)" />
</div>
</div>
<div class="right">
<slot name="chart-header-right"></slot>
</div>
</div>
</template>
<script setup>
import ActionButton from '@/components/base/ActionButton/index.vue'
const props = defineProps({
list: {
type: Array,
default: [
]
}
})
const emit = defineEmits(['clickItem'])
const handleClickItem = (item) => {
emit('clickItem', item)
}
</script>
<style lang="scss" scoped>
.wrapper {
width: 1520px;
height: 28px;
display: flex;
justify-content: space-between;
align-items: center;
.left {
display: flex;
gap: 8px;
align-items: center;
justify-content: flex-start;
.left-text {
color: var(--text-primary-80-color);
}
.left-list {
display: flex;
gap: 8px;
align-items: center;
justify-content: flex-start;
}
}
}
</style>
\ No newline at end of file
src/views/dataLibrary/components/HeaderBtnBox/arrow-down.svg 0 → 100644
浏览文件 @ 58537cbd
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none" customFrame="#000000">
<rect id="Line/Up" width="16.000000" height="16.000000" x="0.000000" y="0.000000" transform="matrix(1,0,0,-1,0,16)" />
<path id="路径" d="M11.852 7.80156L6.34264 0.20625C6.14264 -0.06875 5.73327 -0.06875 5.53483 0.20625L0.0238932 7.80156C-0.0354818 7.88438 0.0223307 8 0.125456 8L1.29733 8C1.37702 8 1.45202 7.96094 1.49889 7.89687L5.93796 1.77813L10.377 7.89687C10.4239 7.96094 10.4989 8 10.5786 8L11.7505 8C11.852 8 11.9114 7.88438 11.852 7.80156L11.852 7.80156Z" fill="rgb(5,95,194)" fill-rule="evenodd" transform="matrix(1,0,0,-1,2.0625,12)" />
</svg>
src/views/dataLibrary/components/HeaderBtnBox/arrow-up.svg 0 → 100644
浏览文件 @ 58537cbd
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none" customFrame="#000000">
<rect id="Line/Up" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
<path id="路径" d="M13.9145 11.8016L8.40514 4.20625C8.20514 3.93125 7.79577 3.93125 7.59733 4.20625L2.08639 11.8016C2.02702 11.8844 2.08483 12 2.18796 12L3.35983 12C3.43952 12 3.51452 11.9609 3.56139 11.8969L8.00046 5.77812L12.4395 11.8969C12.4864 11.9609 12.5614 12 12.6411 12L13.813 12C13.9145 12 13.9739 11.8844 13.9145 11.8016L13.9145 11.8016Z" fill="rgb(5,95,194)" fill-rule="evenodd" />
</svg>
src/views/dataLibrary/components/HeaderBtnBox/index.vue 0 → 100644
浏览文件 @ 58537cbd
<template>
<div class="wrapper">
<div class="show" @click="handleSwitchShowAll">
<div class="text text-compact">{{ isShowAll ? '收起' : '展开全部' }}</div>
<div class="icon">
<img v-if="isShowAll" src="./arrow-up.svg" alt="">
<img v-else src="./arrow-down.svg" alt="">
</div>
</div>
<div class="clear text-tip-1" @click="handleClear">
{{ '清空条件' }}
</div>
<div class="confirm text-tip-1" @click="handleConfirm">
{{ '确定' }}
</div>
</div>
</template>
<script setup>
import {ref} from 'vue'
const props = defineProps({
isShowAll: {
type: Boolean,
default: false
}
})
const handleSwitchShowAll = () => {
emit('showAll')
}
const emit = defineEmits(['showAll', 'clear', 'confirm'])
const handleClear = () => {
emit('clear')
}
const handleConfirm = () => {
emit('confirm')
}
</script>
<style lang="scss" scoped>
.wrapper {
height: 36px;
display: flex;
gap: 12px;
justify-content: flex-end;
align-items: center;
.show {
display: flex;
justify-content: center;
align-items: center;
gap: 4px;
cursor: pointer;
.text {
color: var(--color-primary-100);
}
.icon {
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
}
.clear {
width: 98px;
height: 36px;
border-radius: 4px;
box-sizing: border-box;
border: 1px solid var(--bg-black-10);
text-align: center;
padding: 6px 16px;
color: var(--text-primary-65-color);
cursor: pointer;
}
.confirm {
width: 150px;
height: 36px;
border-radius: 4px;
box-sizing: border-box;
padding: 6px 59px;
background: var(--color-primary-100);
color: var(--bg-white-100);
text-align: center;
cursor: pointer;
}
}
</style>
\ No newline at end of file
src/views/dataLibrary/components/LineChart/index.vue 0 → 100644
浏览文件 @ 58537cbd
<template>
<div class="line-chart-wrapper" id="line-chart"></div>
</template>
<script setup>
import { ref, onMounted, nextTick } from 'vue'
import setChart from '@/utils/setChart';
import getLineChart from './lineChart';
const props = defineProps({
lineChartData: {
type: Object,
default: {
dataX: [],
dataY: []
}
}
})
onMounted(() => {
const lineChart = getLineChart(props.lineChartData.dataX, props.lineChartData.dataY)
setChart(lineChart, 'line-chart', )
})
</script>
<style lang="scss">
.line-chart-wrapper {
width: 100%;
height: 100%;
// width: 1520px;
// height: 580px;
}
</style>
\ No newline at end of file
src/views/dataLibrary/components/LineChart/lineChart.js 0 → 100644
浏览文件 @ 58537cbd
import * as echarts from 'echarts'
const getLineChart = (dataX, dataY) => {
return {
grid: {
left: 24,
top: 48,
right: 34,
bottom: 10,
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
splitLine: {
show: false
},
axisLine: {
show: false
},
data: dataX
},
yAxis: {
type: 'value',
splitLine: {
show: true,
lineStyle: {
color: ['#DEE2E7'], // 线条颜色，可以是数组，用于不同间隔交替颜色
width: 1, // 线宽
type: 'dashed', // 类型：'solid'（实线）, 'dashed'（虚线）, 'dotted'（点线）
// opacity: 0.6 // 透明度
}
},
axisLine: {
show: false
},
},
series: [
{
data: dataY,
type: 'line',
// showSymbol: false,
symbol: 'circle', // 圆形
symbolSize: 8, // 大小为8px
itemStyle: {
// color: 'rgba(5, 95, 194, 1)', // 填充为珊瑚红
color: '#fff',
borderColor: 'rgba(5, 95, 194, 1)',
borderWidth: 4,
// 不设置borderColor和borderWidth，即为纯实心
},
lineStyle: {
color: 'rgba(5, 95, 194, 1)'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(5, 95, 194, 0.8)' // 起始颜色：深色
}, {
offset: 1,
color: 'rgba(5, 95, 194, 0)' // 结束颜色：浅色且透明度降低
}])
},
}
]
}
}
export default getLineChart;
\ No newline at end of file
src/views/dataLibrary/components/PieChart/index.vue 0 → 100644
浏览文件 @ 58537cbd
<template>
<div class="pie-chart-wrapper" id="pie-chart"></div>
</template>
<script setup>
import { ref, onMounted, nextTick } from 'vue'
import setChart from '@/utils/setChart';
import getPieChart from './piechart';
const props = defineProps({
pieChartData: {
type: Array,
default: [
// {
// name: 'aaa',
// value: 12
// },
// {
// name: 'bbb',
// value: 8
// },
// {
// name: 'ccc',
// value: 15
// },
]
}
})
onMounted(() => {
const pieChart = getPieChart(props.pieChartData)
setChart(pieChart, 'pie-chart', )
})
</script>
<style lang="scss">
.pie-chart-wrapper {
width: 100%;
height: 100%;
// width: 1520px;
// height: 580px;
}
</style>
\ No newline at end of file
src/views/dataLibrary/components/PieChart/piechart.js 0 → 100644
浏览文件 @ 58537cbd
import { MUTICHARTCOLORS } from "@/common/constant";
const getPieChart = (data) => {
const colorList = MUTICHARTCOLORS
let option = {
color: colorList,
series: [
{
type: 'pie',
radius: [160, 190],
height: '100%',
left: 'center',
width: '98%',
itemStyle: {
borderColor: '#fff',
borderWidth: 1
},
label: {
alignTo: 'edge',
formatter: '{name|{b}}\n{time|{c} 条 {d}%}',
minMargin: 5,
edgeDistance: 10,
lineHeight: 25,
rich: {
name: {
color: 'rgba(59, 65, 75, 1)',
fontFamily: 'Microsoft YaHei',
fontSize: 16,
fontWeight: 'bold',
},
time: {
fontSize: 16,
fontFamily: 'Microsoft YaHei',
color: '#rgba(95, 101, 108, 1)'
}
}
},
labelLine: {
length: 15,
length2: 0,
maxSurfaceAngle: 80
},
labelLayout: function (params) {
const isLeft = params.labelRect.x < 556 / 2;
const points = params.labelLinePoints;
// Update the end point.
points[2][0] = isLeft
? params.labelRect.x
: params.labelRect.x + params.labelRect.width;
return {
labelLinePoints: points
};
},
data: data
}]
}
return option
}
export default getPieChart;
\ No newline at end of file
src/views/dataLibrary/components/RadarChart/idnex.vue 0 → 100644
浏览文件 @ 58537cbd
<template>
<div class="radar-chart-wrapper" id="radar-chart"></div>
</template>
<script setup>
import { ref, onMounted, nextTick } from 'vue'
import setChart from '@/utils/setChart';
import getRadarChart from './radarChart';
const props = defineProps({
radarChartData: {
type: Object,
default: {
title: [],
data: []
}
}
})
onMounted(() => {
const radarChart = getRadarChart(props.radarChartData)
setChart(radarChart, 'radar-chart',)
})
</script>
<style lang="scss">
.radar-chart-wrapper {
width: 100%;
height: 100%;
// width: 1520px;
// height: 580px;
}
</style>
\ No newline at end of file
src/views/dataLibrary/components/RadarChart/radarChart.js 0 → 100644
浏览文件 @ 58537cbd
const getRadarChart = (data) => {
// const indicators = [
// { name: "集成电路", max: 10 },
// { name: "能源领域", max: 10 },
// { name: "量子科技", max: 10 },
// { name: "通信网络", max: 10 },
// { name: "人工智能", max: 10 },
// { name: "生物科技", max: 10 }
// ];
// const data = [
// {
// name: "337调查",
// value: [
// {
// name: '航空航天',
// value: 10,
// },
// {
// name: '先进制造',
// value: 2,
// },
// {
// name: '量子科技',
// value: 0,
// },
// {
// name: '人工智能',
// value: 6,
// },
// {
// name: '新材料',
// value: 7,
// },
// {
// name: '集成电路',
// value: 4,
// }
// ]
// },
// {
// name: "232调查",
// value: [ {
// name: '航空航天',
// value: 7,
// },
// {
// name: '先进制造',
// value: 3,
// },
// {
// name: '量子科技',
// value: 5,
// },
// {
// name: '人工智能',
// value: 9,
// },
// {
// name: '新材料',
// value: 10,
// },
// {
// name: '集成电路',
// value: 5,
// }]
// },
// {
// name: "301调查",
// value: [ {
// name: '航空航天',
// value: 8,
// },
// {
// name: '先进制造',
// value: 10,
// },
// {
// name: '量子科技',
// value: 2,
// },
// {
// name: '人工智能',
// value: 8,
// },
// {
// name: '新材料',
// value: 1,
// },
// {
// name: '集成电路',
// value: 3,
// }]
// }
// ]
const indicators = data.title.map(item => {
return {
name: item.name, max: data.maxNum
}
})
const data337 = [9, 6, 6, 6, 9, 7];
const data301 = [5, 3, 7, 8, 7, 9];
const data232 = [4, 10, 3, 4, 2, 5];
const option = {
color: ["rgba(5, 95, 194, 1)", "rgba(250, 140, 22, 1)", "rgba(146, 84, 222, 1)"],
legend: {
top: 24,
left: 'center',
icon: "circle",
itemWidth: 12,
itemHeight: 12,
itemGap: 24,
textStyle: {
color: "rgb(95, 101, 108)",
fontSize: 16,
fontFamily: "Microsoft YaHei",
fontWeight: 400,
lineHeight: 24
},
data: ["337调查", "301调查", "232调查"]
},
radar: {
shape: "polygon",
splitNumber: 5,
indicator: indicators,
center: ["50%", "56%"],
radius: "72%",
startAngle: 90,
clockwise: false,
axisName: {
color: "rgba(59, 65, 75, 1)",
fontSize: 16,
fontFamily: "Microsoft YaHei",
fontWeight: 700,
lineHeight: 24,
padding: [0, 5]
},
splitLine: {
lineStyle: {
color: "#d0d0d0",
width: 1
}
},
axisLine: {
lineStyle: {
color: "#d0d0d0",
width: 1
}
},
splitArea: {
show: true,
areaStyle: {
color: ["#fff", "rgb(247, 248, 249)", "#fff", "rgb(247, 248, 249)", "#fff"]
}
}
},
series: [
{
// name: "337调查",
name: data.data[0].name,
type: "radar",
data: [{ value: data.data[0].value }],
lineStyle: {
width: 2,
color: "rgba(5, 95, 194,1)"
},
symbol: "none",
areaStyle: {
color: "rgba(5, 95, 194,0.15)"
}
},
{
name: data.data[1].name,
type: "radar",
data: [{ value: data.data[1].value }],
lineStyle: {
width: 2,
color: "rgba(250, 140, 22, 1)"
},
symbol: "none",
areaStyle: {
color: "rgba(250, 140, 22, 0.15)"
}
},
{
name: data.data[2].name,
type: "radar",
data: [{ value: data.data[2].value }],
lineStyle: {
width: 2,
color: "rgba(146, 84, 222, 1)"
},
symbol: "none",
areaStyle: {
color: "rgba(146, 84, 222, 0.15)"
}
},
]
};
return option
}
export default getRadarChart
\ No newline at end of file
src/views/dataLibrary/components/SelectBox/index.vue 0 → 100644
浏览文件 @ 58537cbd
<template>
<div class="select-wrapper" :class="{'select-wrapper-custom': selectValue === '自定义'}">
<div class="select-left text-tip-1">{{ selectTitle + ':' }}</div>
<div class="select-right" :class="{'select-right-custom': selectValue === '自定义'}">
<el-select v-model="selectValue" :placeholder="placeholderName" style="width: 240px">
<!-- <el-option label="全部领域" value="全部领域" /> -->
<el-option v-for="item in selectList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
<el-date-picker style="width: 300px" v-if="selectValue === '自定义'" v-model="customTimeValue" type="daterange"
range-separator="--" start-placeholder="开始日期" end-placeholder="结束日期" size="default" />
</div>
</div>
</template>
<script setup>
import { computed } from 'vue';
const props = defineProps({
selectTitle: {
type: String,
default: ''
},
selectList: {
type: Array,
default: []
},
placeholderName: {
type: String,
default: ''
},
selectName: {
type: String,
default: ''
},
customTime: {
type: String,
default: ''
}
})
const emit = defineEmits(['update:selectText', 'update:customTime'])
const selectValue = computed({
get: () => props.selectName,
set: (value) => emit('update:selectText', value)
})
const customTimeValue = computed({
get: () => props.customTime,
set: (value) => emit('update:customTime', value)
})
</script>
<style lang="scss" scoped>
.select-wrapper {
width: 348px;
height: 28px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
.select-left {
width: 100px;
height: 24px;
color: var(--text-primary-65-color);
}
.select-right {
width: 240px;
display: flex;
gap: 8px;
justify-content: space-between;
:deep(.el-input__wrapper) {
border-radius: 4px;
}
}
.select-right-custom{
width: 630px;
}
}
.select-wrapper-custom{
width: 738px;
}
</style>
\ No newline at end of file
src/views/dataLibrary/components/bill/countryBill/index.vue deleted 100644 → 0
浏览文件 @ 29e42ed8
<template>
<div class="countrybill-wrapper">
<div class="header-box">我是国会法案</div>
<div class="main-box">
<div class="info-box">
<div class="switch-box" @click="handleSwitchChartData">
<img v-if="!isShowChart" src="@/views/dataLibrary/assets/icons/chart-active.svg" alt="">
<img v-else src="@/views/dataLibrary/assets/icons/data-active.svg" alt="">
</div>
<div class="num-box text-title-3-bold">
{{ `共 ${totalNum} 条数据` }}
</div>
</div>
<div class="content-box"></div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
// 图表/数据
const isShowChart = ref(true)
const handleSwitchChartData = () => {
isShowChart.value = !isShowChart.value
}
// 总计数据
const totalNum = ref(12)
</script>
<style lang="scss" scoped>
.countrybill-wrapper {
width: 1600px;
height: 968px;
.headere-box {
width: 1568px;
height: 112px;
border-radius: 10px;
background: rgb(255, 255, 255);
border: 1px solid var(--bg-black-5);
margin: 16px auto;
}
.header-box {
width: 1568px;
height: 112px;
border-radius: 10px;
background: rgb(255, 255, 255);
border: 1px solid var(--bg-black-5);
margin: 16px auto;
}
.main-box {
.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
src/views/dataLibrary/index.vue
浏览文件 @ 58537cbd
......@@ -46,16 +46,22 @@
<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.name }}</div>
<div class="icon">
<img v-if="!tab.active" src="./assets/icons/close.svg" alt="">
<img v-else src="./assets/icons/close-active.svg" alt="">
</div>
<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">
<!-- <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>
......@@ -66,7 +72,7 @@
</template>
<script setup>
import { computed, ref } from 'vue'
import { computed, 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'
......@@ -89,12 +95,11 @@ const tagsViewStore = useTagsViewStore()
// 在路由全局守卫中处理
router.beforeEach((to, from, next) => {
const tagsViewStore = useTagsViewStore()
// 路由允许添加标签（排除掉隐藏的布局页如 /404, /login 等）
if (to.meta?.title && !to.meta?.hiddenTag) {
tagsViewStore.addView({
path: to.path,
name: to.meta.title, // 对应组件的 name，用于缓存
name: to.name, // 对应组件的 name，用于缓存
meta: { ...to.meta },
active: true
})
......@@ -111,19 +116,19 @@ const siderList = ref([
children: [
{
name: '国会法案',
path: '/countryBill',
path: '/dataLibrary/countryBill',
active: true,
},
{
name: '州法案',
path: '/stateBill',
path: '/dataLibrary/stateBill',
active: false,
},
]
},
{
name: '科技政令',
path: '/dataDecree',
path: '/dataLibrary/dataDecree',
icon: Icon2,
active: false,
isExpanded: false,
......@@ -133,7 +138,7 @@ const siderList = ref([
},
{
name: '美国科技智库',
path: '/dataThinkTank',
path: '/dataLibrary/dataThinkTank',
icon: Icon3,
active: false,
isExpanded: false,
......@@ -149,22 +154,22 @@ const siderList = ref([
children: [
{
name: '实体清单',
path: '/dataEntityList',
path: '/dataLibrary/dataEntityList',
active: false,
},
{
name: '商业管制清单',
path: '/dataCommerceControlList',
path: '/dataLibrary/dataCommerceControlList',
active: false,
},
{
name: '实体清单事件',
path: '/dataEntityListEvent',
path: '/dataLibrary/dataEntityListEvent',
active: false,
},
{
name: '商业管制清单事件',
path: '/dataCommerceControlListEvent',
path: '/dataLibrary/dataCommerceControlListEvent',
active: false,
},
]
......@@ -185,22 +190,22 @@ const siderList = ref([
children: [
{
name: 'SDN清单',
path: '/sDNList',
path: '/dataLibrary/sDNList',
active: false,
},
{
name: '涉军企业清单',
path: '/mREList',
path: '/dataLibrary/mREList',
active: false,
},
{
name: 'SDN清单事件',
path: '/sDNListEvent',
path: '/dataLibrary/sDNListEvent',
active: false,
},
{
name: '涉军企业清单事件',
path: '/mREListEvent',
path: '/dataLibrary/mREListEvent',
active: false,
},
]
......@@ -213,17 +218,17 @@ const siderList = ref([
children: [
{
name: '337调查',
path: '/case337',
path: '/dataLibrary/case337',
active: false,
},
{
name: '232调查',
path: '/case232',
path: '/dataLibrary/case232',
active: false,
},
{
name: '301调查',
path: '/case301',
path: '/dataLibrary/case301',
active: false,
},
]
......@@ -245,22 +250,22 @@ const siderList = ref([
children: [
{
name: '国会议员',
path: '/congressMan',
path: '/dataLibrary/congressMan',
active: false,
},
{
name: '科技企业领袖',
path: '/technologyLeader',
path: '/dataLibrary/technologyLeader',
active: false,
},
{
name: '机构主官',
path: '/minister',
path: '/dataLibrary/minister',
active: false,
},
{
name: '智库研究人员',
path: '/thinkTankResearcher',
path: '/dataLibrary/thinkTankResearcher',
active: false,
},
]
......@@ -273,17 +278,17 @@ const siderList = ref([
children: [
{
name: '科技企业',
path: '/technologyCompany',
path: '/dataLibrary/technologyCompany',
active: false,
},
{
name: '研究型大学',
path: '/researchUniversity',
path: '/dataLibrary/researchUniversity',
active: false,
},
{
name: '重点实验室',
path: '/keyLab',
path: '/dataLibrary/keyLab',
active: false,
},
]
......@@ -310,13 +315,25 @@ const siderList = ref([
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
item.isExpanded = !item.isExpanded
if (item.path) {
router.push({
path: item.path
})
} else {
item.children[0].active = true
router.push({
path: item.children[0].path
})
}
}
......@@ -336,13 +353,12 @@ const handleSiderSecondItem = (item) => {
}
const openedTabList = computed(() => {
const tagsViewStore = useTagsViewStore()
const arr = tagsViewStore.visitedViews
return arr
})
const handleClickTab = (tab) => {
openedTabList.value.forEach(val => {
tagsViewStore.visitedViews.forEach(val => {
val.active = false
})
tab.active = true
......@@ -353,22 +369,28 @@ const handleClickTab = (tab) => {
)
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.name) {
val.active = false
} else {
if (val.name === tab.meta.title) {
val.active = true
return
}
} else {
val.children.forEach(vall => {
if (vall.name === tab.name) {
if (vall.name === tab.meta.title) {
vall.active = true
val.active = true
} else {
vall.active = false
val.isExpanded = true
return
}
})
}
......@@ -376,11 +398,88 @@ const handleClickTab = (tab) => {
})
}
// 关闭当前标签页
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)
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("当前功能正在开发中，敬请期待！");
};
onMounted(() => {
})
</script>
......@@ -390,6 +489,7 @@ const handleClickToolBox = () => {
.data-library-wrapper {
width: 1920px;
height: 1080px;
overflow: hidden;
// background: orange;
.data-library-header {
......@@ -525,29 +625,57 @@ const handleClickToolBox = () => {
.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: 48px;
// 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-black-5);
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);
// border-bottom: 2px solid var(--color-primary-100);
.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);
}
......@@ -555,6 +683,10 @@ const handleClickToolBox = () => {
.icon {
width: 16px;
height: 16px;
&:hover{
border-radius: 8px;
background: var(--color-primary-10);
}
img {
width: 100%;
......@@ -564,7 +696,7 @@ const handleClickToolBox = () => {
}
.tab-item-active {
border-bottom: 2px solid var(--color-primary-100);
border-bottom: 2px solid var(--color-primary-100) !important;
}
}
......
src/views/decree/decreeHome/index.vue
浏览文件 @ 58537cbd
......@@ -63,12 +63,18 @@
</div>
</div>
</div> -->
<div class="home-main-header-item-box">
<div class="item" v-for="(item, index) in govInsList" :key="index" @click="handleToInstitution(item)">
<div class="home-main-header-item-box" v-if="govInsList.length">
<div class="item" v-for="(item, index) in govInsList.slice(0, 7)" :key="index" @click="handleToInstitution(item)">
<div class="item-left">
<img :src="item.img ? item.img : DefaultIcon2" alt="" />
<img :src="item.orgImage || DefaultIcon2" alt="" />
</div>
<div class="item-right">{{ item.name }}</div>
<div class="item-right one-line-ellipsis">{{ item.orgName }}</div>
<div class="item-num">{{ item.total }}项</div>
<el-icon color="var(--color-primary-100)"><ArrowRightBold /></el-icon>
</div>
<div class="item">
<div class="item-num item-more">查看全部机构 ({{govInsList.length+1}}家)</div>
<el-icon color="var(--color-primary-100)"><ArrowRightBold /></el-icon>
</div>
</div>
</div>
......@@ -115,15 +121,7 @@
{{ item.name }}
</div>
<div class="box1-main-right-info">
<!-- <div class="tag" :class="{
tag1: tag.status == 1,
tag2: tag.status == 2,
tag3: tag.status == 3
}" v-for="(tag, index) in item.industryList" :key="index">
{{ tag.industryName }}
</div> -->
<AreaTag v-for="(tag, index) in item.industryList" :key="index" :tagName="tag.industryName">
</AreaTag>
<AreaTag v-for="(tag, index) in item.industryList" :key="index" :tagName="tag.industryName" />
</div>
<div class="box1-main-right-center">
{{ item.describe }}
......@@ -243,23 +241,21 @@
<div class="header-title">{{ "关键行政令" }}</div>
</div>
<div class="box7-main">
<div class="box7-item" v-for="(item, index) in keyDecreeList" :key="index" @click="handleKeyDecree(item)">
<div class="icon">
<img src="./assets/images/warning.png" alt="" />
</div>
<div class="info">
<div class="info-header">
<div class="title">{{ item.title }}</div>
<div class="time">{{ item.time }}</div>
<div class="box7-list">
<div class="box7-item" v-for="(item, index) in keyDecreeList" :key="index" @click="handleKeyDecree(item)">
<div class="icon">
<img src="./assets/images/warning.png" alt="" />
</div>
<div class="info">
<div class="info-header">
<div class="title">{{ item.title }}</div>
<div class="time">{{ item.time }}</div>
</div>
<div class="info-content">{{ item.content ? item.content : "暂无数据" }}</div>
</div>
<div class="info-content">{{ item.content ? item.content : "暂无数据" }}</div>
<!-- <el-popover effect="dark" :width="800" :content="item.content" placement="top-start">
<template #reference>
<div class="info-content">{{ item.content ? item.content : "暂无数据" }}</div>
</template>
</el-popover> -->
</div>
</div>
<SimplePagination v-model:current-page="keyDecreeInfo.page" :page-size="keyDecreeInfo.size" :total="keyDecreeInfo.total" @page-change="handleGetKeyDecree" />
</div>
</div>
<div class="box8">
......@@ -269,17 +265,19 @@
</div>
<div class="header-title">{{ "政令重点条款" }}</div>
</div>
<div class="box8-main" id="wordCloudChart"></div>
<div class="box8-content" v-if="wordCloudData?.length">
<WordCloudChart :data="wordCloudData" width="100%" height="100%" />
</div>
</div>
</div>
</div>
<div class="home-main-footer">
<DivideHeader id="position4" class="divide4" :titleText="'资源库'"></DivideHeader>
<DivideHeader id="position4" class="divide4" :titleText="'科技政令库'"></DivideHeader>
<div class="home-main-footer-header">
<div class="search-box">
<el-select v-model="searchType" :empty-values="[null, undefined]" style="width: 100%">
<el-select v-model="searchType" :empty-values="[null, undefined]" style="width: 100%" filterable>
<el-option label="全部政府部门" value="" />
<el-option v-for="item in govInsList" :key="item.id" :label="item.name" :value="item.id" />
<el-option v-for="item in govInsList" :key="item.orgId" :label="item.orgName" :value="item.orgId" />
</el-select>
</div>
<div style="flex: auto;"></div>
......@@ -306,38 +304,23 @@
</div>
<div class="select-main">
<div class="checkbox-group">
<el-checkbox v-for="type in decreeTypeList" :key="type.id" v-model="checkedDecreeType"
:label="type.typeId" style="width: 180px" class="filter-checkbox"
<el-checkbox v-for="type in decreeTypeList" :key="type.id" v-model="checkedDecreeType" :label="type.typeId"
style="width: 180px" class="filter-checkbox"
@change="handleChangeCheckedDecreeType">
{{ type.typeName }}
</el-checkbox>
</div>
</div>
</div>
<!-- <div class="select-box">
<div class="select-box-header">
<div class="icon"></div>
<div class="title">{{ "发布机构" }}</div>
</div>
<div class="select-main">
<div class="checkbox-group">
<el-checkbox v-for="cate in govInsList" :key="cate.id" v-model="checkedGovIns"
:label="cate.id" style="width: 180px" class="filter-checkbox"
@change="handleChangeCheckedGovIns">
{{ cate.name }}
</el-checkbox>
</div>
</div>
</div> -->
<div class="select-box">
<div class="select-box-header">
<div class="icon"></div>
<div class="title">{{ "科技领域" }}</div>
</div>
<div class="select-main select-main1">
<div class="select-main">
<div class="checkbox-group">
<el-checkbox v-for="area in areaList" :key="area.id" v-model="activeAreaList" :label="area.id"
style="width: 100px" @change="checked => handleAreaChange(area.id, checked)">
style="width: 100px" class="filter-checkbox" @change="checked => handleAreaChange(area.id, checked)">
{{ area.name }}
</el-checkbox>
</div>
......@@ -351,28 +334,12 @@
<div class="select-main">
<div class="checkbox-group">
<el-checkbox v-for="time in pubTime" :key="time.id" v-model="activePubTime" :label="time.id"
style="width: 100px" class="filter-checkbox"
@change="checked => handlePubTimeChange(time.id, checked)">
style="width: 100px" class="filter-checkbox" @change="checked => handlePubTimeChange(time.id, checked)">
{{ time.name }}
</el-checkbox>
</div>
</div>
</div>
<!-- <div class="select-box">
<div class="select-box-header">
<div class="icon"></div>
<div class="title">{{ "涉及领域" }}</div>
</div>
<div class="select-main select-main1">
<div class="checkbox-group">
<el-checkbox v-for="area in areaList" :key="area.id" v-model="activeAreaList"
:label="area.id" style="width: 100px"
@change="checked => handleAreaChange(area.id, checked)">
{{ area.name }}
</el-checkbox>
</div>
</div>
</div> -->
</div>
<div class="right">
<div class="content-header">
......@@ -403,9 +370,7 @@
</div>
<div class="desc">{{ item.desc }}</div>
<div class="tag-box">
<div class="tag" v-for="(val, idx) in item.tagList" :key="idx">
{{ val.industryName }}
</div>
<AreaTag v-for="(tag, index) in item.tagList" :key="index" :tagName="tag.industryName" />
</div>
</div>
</div>
......@@ -427,9 +392,10 @@
</template>
<script setup>
import NewsList from "@/components/base/NewsList/index.vue";
import { onMounted, ref, watch, nextTick } from "vue";
import { onMounted, ref, watch, nextTick, reactive } from "vue";
import router from "@/router";
import WordCloudChart from "@/components/base/WordCloundChart/index.vue"
import SimplePagination from "@/components/SimplePagination.vue";
import {
getDepartmentList,
getLatestDecree,
......@@ -448,7 +414,6 @@ import DivideHeader from "@/components/DivideHeader.vue";
import { useContainerScroll } from "@/hooks/useScrollShow";
import getBarChart from "./utils/barChart";
import getPieChart from "./utils/piechart";
import getWordCloudChart from "./utils/wordCloudChart";
import setChart from "@/utils/setChart";
......@@ -458,11 +423,11 @@ import { ElMessage } from "element-plus";
// 跳转行政机构主页
const handleToInstitution = item => {
window.sessionStorage.setItem("curTabName", item.name);
window.sessionStorage.setItem("curTabName", item.orgName);
const curRoute = router.resolve({
path: "/institution",
query: {
id: item.id
id: item.orgId
}
});
window.open(curRoute.href, "_blank");
......@@ -480,32 +445,15 @@ const handleCurrentChange = page => {
};
// 页面 header
const govInsList = ref([
// {
// img: Gov1,
// name: "美国白宫"
// },
// {
// img: Gov2,
// name: "美国财政部"
// },
]);
const govInsList = ref([]);
const checkedGovIns = ref([]);
const handleChangeCheckedGovIns = val => { };
const handleGetDepartmentList = async () => {
try {
const res = await getDepartmentList();
console.log("机构列表", res);
if (res.code === 200 && res.data) {
govInsList.value = res.data.map(item => {
return {
id: item.orgId,
name: item.orgName,
img: item.orgImage
};
});
govInsList.value = res.data;
}
} catch (error) {
console.error("获取机构列表error", error);
......@@ -649,11 +597,8 @@ const newsList = ref([
// }
]);
const handleGetNews = async () => {
const params = {
moduleId: "0101"
};
try {
const res = await getNews(params);
const res = await getNews({moduleId: "0101"});
console.log("新闻资讯", res);
if (res.code === 200 && res.data) {
// newsList.value = res.data || []
......@@ -671,7 +616,6 @@ const handleGetNews = async () => {
console.error("新闻资讯error", error);
}
};
handleGetNews();
// 点击新闻条目，跳转到新闻分析页
const handleToNewsAnalysis = news => {
const route = router.resolve({
......@@ -914,13 +858,19 @@ const handleBox6YearChange = () => {
// 关键行政令
const keyDecreeList = ref([]);
const keyDecreeInfo = reactive({
total: 0,
page: 1,
size: 3,
})
const handleGetKeyDecree = async () => {
try {
const res = await getKeyDecree();
const res = await getKeyDecree({pageSize:keyDecreeInfo.size, pageNum:keyDecreeInfo.page-1});
console.log("关键行政令", res);
if (res.code === 200 && res.data) {
keyDecreeList.value = res.data.map(item => {
if (res.code === 200 && res.data?.total) {
keyDecreeInfo.total = res.data.total || 0;
keyDecreeList.value = res.data.list.map(item => {
return {
title: item.name,
content: item.describe,
......@@ -935,38 +885,17 @@ const handleGetKeyDecree = async () => {
handleGetKeyDecree();
// 政令重点条款
const wordCloudData = [
// { name: "与马斯克公开冲突", value: 100 },
// { name: "传统能源", value: 5 },
// { name: "共和党财政鹰派", value: 77 },
// { name: "未实现赤字控制目标", value: 35 },
// { name: "得克萨斯州", value: 88 },
// { name: "选举压力", value: 57 },
// { name: "主张财政紧缩", value: 72 },
// { name: "财政保守", value: 18 },
];
const wordCloudData = ref([]);
const handleGetDecreeKeyInstruction = async () => {
try {
const res = await getDecreeKeyInstruction();
console.log("政令重点条款", res);
wordCloudData.value = res.data.map(item => {
return {
name: item.clause,
value: item.count
};
});
wordCloudData.value = res.data.map(item => ({name: item.clause, value: item.count}));
} catch (error) {
console.error("政令重点条款error", error);
}
};
const handleBox8 = async () => {
await handleGetDecreeKeyInstruction();
let chart3 = getWordCloudChart(wordCloudData.value);
setChart(chart3, "wordCloudChart");
};
// 资源库
const searchType = ref("");
const isChina = ref(false);
......@@ -995,22 +924,6 @@ const handleToPosi = id => {
}
};
// const handleGetAreaList = async () => {
// try {
// const res = await getDecreehylyList();
// console.log("行业领域列表", res);
// if (res.code === 200 && res.data) {
// areaList.value = res.data.map(item => {
// return {
// name: item.name,
// id: item.id
// };
// });
// console.log("areaList", areaList.value);
// }
// } catch (error) { }
// };
// 政令类型
const decreeTypeList = ref([]);
const checkedDecreeType = ref([]);
......@@ -1101,7 +1014,7 @@ const handleGetAreaList = async () => {
console.log("行业领域列表", res);
if (res.code === 200 && res.data) {
areaList.value = [
{ name: "全选", id: "all" },
{ name: "全部领域", id: "all" },
...res.data.map(item => {
return {
name: item.name,
......@@ -1218,13 +1131,14 @@ const handleSearch = () => {
};
onMounted(async () => {
handleGetNews();
handleGetDecreeTypeList();
handleGetAreaList();
handleGetDecreeOrderList();
handleBox1(); // 最新科技政令
handleBox5();
handleBox6();
handleBox8();
handleGetDecreeKeyInstruction();
});
</script>
......@@ -1476,15 +1390,17 @@ onMounted(async () => {
}
.home-main-header-item-box {
margin-top: 48px;
margin-bottom: 64px;
margin: 48px 0 64px;
width: 1600px;
display: flex;
flex-wrap: wrap;
gap: 16px;
.item {
width: 254px;
height: 72px;
width: 20%;
flex: auto;
height: 80px;
padding: 0 16px;
display: flex;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.65);
......@@ -1492,8 +1408,7 @@ onMounted(async () => {
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
align-items: center;
gap: 17px;
margin: 0 6px 16px 6px;
justify-content: center;
cursor: pointer;
transition:
transform 0.3s ease,
......@@ -1505,10 +1420,9 @@ onMounted(async () => {
}
.item-left {
margin-left: 24px;
width: 48px;
height: 48px;
font-size: 0px;
img {
width: 100%;
height: 100%;
......@@ -1516,12 +1430,28 @@ onMounted(async () => {
}
.item-right {
width: 140px;
width: 20px;
flex: auto;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 24px;
line-height: 20px;
margin: 0 16px;
}
.item-num {
white-space: nowrap;
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 20px;
margin-right: 2px;
color: var(--color-primary-100);
}
.item-more {
margin-right: 12px;
font-size: 16px;
}
}
}
......@@ -1708,15 +1638,10 @@ onMounted(async () => {
line-height: 26px;
display: -webkit-box;
/* 将元素设置为弹性盒模型 */
-webkit-line-clamp: 2;
/* 限制文本显示的行数 */
-webkit-box-orient: vertical;
/* 设置弹性盒子的子元素垂直排列 */
overflow: hidden;
/* 隐藏溢出的内容 */
text-overflow: ellipsis;
/* 文本溢出时显示省略号 */
}
.box1-main-right-info {
......@@ -1724,58 +1649,21 @@ onMounted(async () => {
display: flex;
height: 24px;
gap: 8px;
.tag {
height: 24px;
line-height: 24px;
padding: 0 8px;
box-sizing: border-box;
border-radius: 4px;
margin-right: 5px;
border: 1px solid rgba(255, 163, 158, 1);
color: rgba(245, 34, 45, 1);
background: rgba(255, 241, 240, 1);
}
.tag1 {
border: 1px solid rgba(135, 232, 222, 1);
color: rgba(19, 168, 168, 1);
background: rgba(230, 255, 251, 1);
}
.tag2 {
border: 1px solid rgba(186, 224, 255, 1);
background: rgba(230, 244, 255, 1);
color: rgba(22, 119, 255, 1);
}
.tag3 {
border: 1px solid rgba(255, 229, 143, 1);
color: rgba(250, 173, 20, 1);
background: rgba(255, 251, 230, 1);
}
.tag4 {
border: 1px solid rgba(255, 163, 158, 1);
color: rgba(245, 34, 45, 1);
background: rgba(255, 241, 240, 1);
}
}
.box1-main-right-center {
margin-top: 10px;
height: 200px;
height: 180px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
display: -webkit-box;
/* 将元素设置为弹性盒模型 */
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
overflow: hidden;
/* 隐藏溢出的内容 */
text-overflow: ellipsis;
/* 文本溢出时显示省略号 */
}
.box1-main-right-footer {
......@@ -2730,15 +2618,6 @@ onMounted(async () => {
font-weight: 400;
}
}
.info-content {
margin-top: 3px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
}
}
}
}
......@@ -2912,81 +2791,85 @@ onMounted(async () => {
.box7-main {
margin-top: 10px;
height: 380px;
box-sizing: border-box;
overflow-y: auto;
overflow-x: hidden;
.box7-item {
width: 730px;
margin-top: 16px;
margin-left: 25px;
display: flex;
cursor: pointer;
&:hover {
background: var(--color-bg-hover);
}
.box7-list {
height: 310px;
.icon {
margin-top: 6px;
width: 24px;
height: 22px;
.box7-item {
width: 730px;
margin-top: 16px;
margin-left: 25px;
display: flex;
cursor: pointer;
img {
width: 100%;
height: 100%;
&:hover {
background: var(--color-bg-hover);
}
}
.info {
margin-left: 13px;
width: 100%;
.icon {
margin-top: 6px;
width: 24px;
height: 22px;
.info-header {
height: 24px;
display: flex;
margin-top: 4px;
justify-content: space-between;
img {
width: 100%;
height: 100%;
}
}
.title {
width: 600px;
.info {
margin-left: 13px;
width: 100%;
.info-header {
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
line-height: 24px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: flex;
margin-top: 4px;
justify-content: space-between;
.title {
width: 600px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
line-height: 24px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.time {
width: 91px;
height: 24px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.time {
width: 91px;
height: 24px;
.info-content {
min-height: 24px;
max-height: 48px;
margin-top: 6px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.info-content {
min-height: 24px;
max-height: 48px;
margin-top: 6px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
overflow: hidden;
}
}
}
}
......@@ -2999,9 +2882,11 @@ onMounted(async () => {
border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
display: flex;
flex-direction: column;
.box8-header {
width: 792px;
width: 100%;
height: 48px;
display: flex;
border-bottom: 1px solid rgba(240, 242, 244, 1);
......@@ -3030,6 +2915,12 @@ onMounted(async () => {
}
}
.box8-content {
width: 100%;
height: 20px;
flex: auto;
}
.box8-main {
height: 401px;
}
......@@ -3039,7 +2930,6 @@ onMounted(async () => {
.home-main-footer {
margin-top: 34px;
max-height: 1860px;
padding-bottom: 160px;
background: rgba(248, 249, 250, 1);
overflow: hidden;
......@@ -3133,16 +3023,21 @@ onMounted(async () => {
.left {
width: 360px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
height: 100%;
padding-bottom: 24px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(94, 95, 95, 0.1);
background: rgba(255, 255, 255, 1);
position: relative;
.select-box {
margin-top: 16px;
.select-box-header {
display: flex;
gap: 16px;
gap: 17px;
.icon {
margin-top: 4px;
......@@ -3155,7 +3050,7 @@ onMounted(async () => {
.title {
height: 24px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-family: "Source Han Sans CN";
font-size: 16px;
font-weight: 700;
line-height: 24px;
......@@ -3165,11 +3060,20 @@ onMounted(async () => {
}
.select-main {
margin-left: 25px;
}
margin-left: 24px;
margin-top: 12px;
.checkbox-group {
display: grid;
grid-template-columns: repeat(2, 160px);
gap: 8px 4px;
.select-main1 {
width: 260px;
.filter-checkbox {
width: 160px;
height: 24px;
margin-right: 0 !important;
}
}
}
}
}
......@@ -3177,7 +3081,6 @@ onMounted(async () => {
.right {
width: 20px;
flex: auto;
max-height: 1489px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
box-sizing: border-box;
......@@ -3213,12 +3116,9 @@ onMounted(async () => {
}
.content-box {
max-height: 1367px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
overflow: hidden;
min-height: 790px;
overflow: hidden;
overflow-y: auto;
box-sizing: border-box;
.main-item {
......@@ -3349,20 +3249,6 @@ onMounted(async () => {
display: flex;
flex-wrap: wrap;
gap: 8px;
.tag {
height: 28px;
line-height: 28px;
text-align: center;
padding: 0 8px;
border-radius: 4px;
background: rgba(231, 243, 255, 1);
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
letter-spacing: 0px;
}
}
}
}
......
src/views/decree/decreeLayout/deepdig/index.vue
浏览文件 @ 58537cbd
......@@ -3,7 +3,7 @@
<div class="box1">
<AnalysisBox title="相关政令" :showAllBtn="false">
<div class="box1-main">
<el-empty v-if="siderList.length===0" style="padding-top: 30%" description="暂无数据" :image-size="100" />
<el-empty v-if="!siderList?.length" style="padding-top: 40%;" description="暂无数据" :image-size="100" />
<el-scrollbar height="100%" always>
<div class="left-item" :class="{ 'item-active': false }" v-for="(item, index) in siderList" :key="index" @click="handleClickDecree(item)">
<div class="item-head">
......@@ -18,6 +18,7 @@
</div>
<div class="box2">
<AnalysisBox title="政令关系挖掘" :showAllBtn="false">
<el-empty v-if="!siderList?.length" style="padding-top: 20%;" description="暂无数据" :image-size="100" />
<div class="box2-main">
<div ref="containerRef" class="graph-container"></div>
</div>
......
src/views/decree/decreeLayout/index.vue
浏览文件 @ 58537cbd
......@@ -8,22 +8,16 @@
<div class="layout-main-header-left-box">
<div class="left-box-top">
<div class="icon">
<img
v-if="summaryInfo.imageUrl"
:src="summaryInfo.imageUrl"
alt=""
style="height: 40px; margin-top: 12px"
/>
<img v-else :src="USALogo" alt="" />
<img :src="summaryInfo.imageUrl || USALogo" alt="" />
</div>
<div class="info">
<div class="info-box1">{{ summaryInfo.name }}</div>
<div class="info-box1 one-line-ellipsis">{{ summaryInfo.name || "--" }}</div>
<div class="info-box2">
<div class="info-box2-item item1">{{ summaryInfo.postDate }}</div>
<div class="info-box2-item">{{ summaryInfo.postDate || "--" }}</div>
|
<div class="info-box2-item item2">{{ summaryInfo.orgName }}</div>
<div class="info-box2-item">{{ summaryInfo.orgName || "--" }}</div>
|
<div class="info-box2-item item3">{{ summaryInfo.ename }}</div>
<div class="info-box2-item one-line-ellipsis">{{ summaryInfo.ename || "--" }}</div>
</div>
</div>
</div>
......@@ -47,8 +41,8 @@
</div>
<div class="layout-main-header-right-box">
<div class="right-box-top">
<div class="time">{{ summaryInfo.postDate }}</div>
<div class="name">{{ summaryInfo.orgName }}</div>
<div class="time">{{ summaryInfo.postDate || "--" }}</div>
<div class="name">{{ summaryInfo.orgName || "--" }}</div>
</div>
<div class="right-box-bottom">
<div class="btn" @click="handleShowReport">
......@@ -203,12 +197,12 @@ const mainHeaderBtnList = ref([
name: "深度挖掘",
path: "/decreeLayout/deepDig"
},
// {
// icon: icon3,
// activeIcon: icon3Active,
// name: "影响分析",
// path: "/decreeLayout/influence"
// },
{
icon: icon3,
activeIcon: icon3Active,
name: "影响分析",
path: "/decreeLayout/influence"
},
]);
const activeTitle = ref("政令概况");
......@@ -377,9 +371,9 @@ onMounted(() => {
flex-direction: column;
.header-main {
width: 100%;
background-color: #fff;
box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.05);
overflow: hidden;
border-bottom: 1px solid rgba(234, 236, 238, 1);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
}
.layout-main-header {
width: 1600px;
......@@ -396,30 +390,32 @@ onMounted(() => {
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.layout-main-header-left-box {
width: 1100px;
margin-top: 13px;
width: 20px;
flex: auto;
margin-top: 12px;
.left-box-top {
height: 64px;
display: flex;
align-items: center;
.icon {
width: 64px;
height: 64px;
border-radius: 4px;
height: 40px;
overflow: hidden;
img {
width: 100%;
height: 100%;
object-fit: fill;
}
}
.info {
width: 700px;
margin-left: 9px;
margin-left: 10px;
margin-right: 40px;
width: 20px;
flex: auto;
.info-box1 {
width: 700px;
width: 100%;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 20px;
......@@ -428,9 +424,6 @@ onMounted(() => {
letter-spacing: 0px;
text-align: left;
margin-top: 5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.info-box2 {
margin-top: 5px;
......@@ -444,15 +437,13 @@ onMounted(() => {
letter-spacing: 0px;
text-align: left;
display: flex;
margin-left: -10px;
.info-box2-item {
white-space: nowrap;
padding: 0 10px;
}
.item3 {
max-width: 420px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.info-box2-item:first-child {
padding-left: 0px;
}
}
}
......@@ -498,9 +489,9 @@ onMounted(() => {
}
}
.layout-main-header-right-box {
width: 450px;
margin-top: 19px;
.right-box-top {
white-space: nowrap;
padding-top: 11px;
.time {
height: 24px;
line-height: 24px;
......@@ -710,49 +701,5 @@ onMounted(() => {
}
}
}
// .tool-box {
// position: fixed;
// z-index: 10000;
// bottom: 80px;
// left: 0;
// width: 48px;
// height: 144px;
// border-radius: 0px 10px 10px 0px;
// box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
// background: rgba(255, 255, 255, 1);
// .tool1 {
// width: 17px;
// height: 18px;
// margin-top: 17px;
// margin-left: 16px;
// cursor: pointer;
// img {
// width: 100%;
// height: 100%;
// }
// }
// .tool2 {
// width: 22px;
// height: 20px;
// margin-top: 26px;
// margin-left: 14px;
// cursor: pointer;
// img {
// width: 100%;
// height: 100%;
// }
// }
// .tool3 {
// width: 20px;
// height: 20px;
// margin-top: 25px;
// margin-left: 15px;
// cursor: pointer;
// img {
// width: 100%;
// height: 100%;
// }
// }
// }
}
</style>
\ No newline at end of file
src/views/decree/decreeLayout/influence/ChartRelation.vue deleted 100644 → 0
浏览文件 @ 29e42ed8
<template>
<div class="relation-graph-wrapper">
<div class="graph-controls">
<!-- 这项政令标志着中美AI竞争进入一个新阶段，其核心特征是 “精准封锁”与“体系输出”相结合。它短期内无疑会给中国AI产业链带来压力，但长期看，这场竞争更可能是一场围绕技术路线、生态系统和治理规则的持久战。 -->
<div v-for="item in controlBtns" :key="item.type" :class="['control-btn', { 'control-btn-active': currentLayoutType === item.type }]" @click="handleClickControlBtn(item.type)">
<img :src="item.icon" alt="" />
</div>
</div>
<div ref="containerRef" class="graph-container"></div>
</div>
</template>
<script setup>
import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue'
import G6 from '@antv/g6'
import { Close } from '@element-plus/icons-vue'
import echartsIcon01 from './assets/images/echartsicon01.png'
import echartsIcon02 from './assets/images/echartsicon02.png'
import echartsIcon03 from './assets/images/echartsicon03.png'
const props = defineProps({
graphData: {
type: Object,
default: () => ({ nodes: [], links: [] })
},
treeData: {
type: Object,
default: () => null
},
controlActive: {
type: Number,
default: 1
}
})
const emit = defineEmits(['nodeClick', 'layoutChange'])
const containerRef = ref(null)
const graphInstance = ref(null)
const currentLayoutType = ref(1)
const controlBtns = [
{ type: 1, icon: echartsIcon01, name: '力导向布局' },
{ type: 2, icon: echartsIcon02, name: '树布局' },
{ type: 3, icon: echartsIcon03, name: '环状布局' }
]
const initGraph = (layoutType = 1) => {
if (!containerRef.value) return
destroyGraph()
nextTick(() => {
const width = containerRef.value.offsetWidth || 800
const height = containerRef.value.offsetHeight || 600
switch (layoutType) {
case 1:
initNormalGraph(layoutType, width, height)
break
case 2:
initTreeGraph(width, height)
break
case 3:
initCircularGraph(width, height)
break
}
})
}
const initNormalGraph = (layoutType, width, height) => {
const data = processGraphData(props.graphData)
if (!data.nodes || data.nodes.length === 0) return
const layout = {
type: 'force',
center: [width / 2, height / 2],
preventOverlap: true,
nodeSpacing: 80,
linkDistance: 250,
nodeStrength: -800,
edgeStrength: 0.1,
collideStrength: 0.8,
alphaDecay: 0.01,
alphaMin: 0.001
}
graphInstance.value = new G6.Graph({
container: containerRef.value,
width,
height,
fitView: true,
fitViewPadding: 100,
fitCenter: true,
animate: true,
animateCfg: {
duration: 300,
easing: 'easeLinear'
},
minZoom: 0.1,
maxZoom: 10,
modes: {
default: [
'drag-canvas',
'zoom-canvas',
'drag-node',
{
type: 'activate-relations',
trigger: 'mouseenter',
resetSelected: true
}
]
},
layout,
defaultNode: {
type: 'image',
size: 40,
clipCfg: {
show: true,
type: 'circle',
r: 20
},
labelCfg: {
position: 'bottom',
offset: 10,
style: {
fill: '#333',
fontSize: 11,
fontFamily: 'Microsoft YaHei',
textAlign: 'center',
background: {
fill: 'rgba(255, 255, 255, 0.95)',
padding: [4, 6, 4, 6],
radius: 4
}
}
}
},
defaultEdge: {
type: 'quadratic',
style: {
stroke: '#5B8FF9',
lineWidth: 3,
opacity: 0.9,
endArrow: {
path: 'M 0,0 L 12,6 L 12,-6 Z',
fill: '#5B8FF9'
}
},
labelCfg: {
autoRotate: true,
style: {
fill: '#333',
fontSize: 10,
fontFamily: 'Microsoft YaHei',
background: {
fill: '#fff',
padding: [2, 4, 2, 4],
radius: 2
}
}
}
},
nodeStateStyles: {
active: {
shadowColor: '#1459BB',
shadowBlur: 15,
stroke: '#1459BB',
lineWidth: 3
},
inactive: {
opacity: 0.3
}
},
edgeStateStyles: {
active: {
stroke: '#1459BB',
lineWidth: 4
},
inactive: {
opacity: 0.15
}
}
})
graphInstance.value.data(data)
graphInstance.value.render()
bindGraphEvents()
}
const initCircularGraph = (width, height) => {
const data = processGraphData(props.graphData)
if (!data.nodes || data.nodes.length === 0) return
const centerX = width / 2
const centerY = height / 2
const radius = Math.min(width, height) / 2 - 120
const otherNodes = data.nodes.filter(n => !n.isCenter)
const nodeCount = otherNodes.length
otherNodes.forEach((node, index) => {
const angle = (2 * Math.PI * index) / nodeCount - Math.PI / 2
node.x = centerX + radius * Math.cos(angle)
node.y = centerY + radius * Math.sin(angle)
})
const centerNode = data.nodes.find(n => n.isCenter)
if (centerNode) {
centerNode.x = centerX
centerNode.y = centerY
centerNode.fx = centerX
centerNode.fy = centerY
}
graphInstance.value = new G6.Graph({
container: containerRef.value,
width,
height,
fitView: false,
fitCenter: false,
animate: true,
animateCfg: {
duration: 300,
easing: 'easeLinear'
},
minZoom: 0.1,
maxZoom: 10,
modes: {
default: [
'drag-canvas',
'zoom-canvas',
'drag-node',
{
type: 'activate-relations',
trigger: 'mouseenter',
resetSelected: true
}
]
},
defaultNode: {
type: 'image',
size: 40,
clipCfg: {
show: true,
type: 'circle',
r: 20
},
labelCfg: {
position: 'bottom',
offset: 10,
style: {
fill: '#333',
fontSize: 11,
fontFamily: 'Microsoft YaHei',
textAlign: 'center',
background: {
fill: 'rgba(255, 255, 255, 0.95)',
padding: [4, 6, 4, 6],
radius: 4
}
}
}
},
defaultEdge: {
type: 'quadratic',
style: {
stroke: '#5B8FF9',
lineWidth: 3,
opacity: 0.9,
endArrow: {
path: 'M 0,0 L 12,6 L 12,-6 Z',
fill: '#5B8FF9'
}
},
labelCfg: {
autoRotate: true,
style: {
fill: '#333',
fontSize: 10,
fontFamily: 'Microsoft YaHei',
background: {
fill: '#fff',
padding: [2, 4, 2, 4],
radius: 2
}
}
}
},
nodeStateStyles: {
active: {
shadowColor: '#1459BB',
shadowBlur: 15,
stroke: '#1459BB',
lineWidth: 3
},
inactive: {
opacity: 0.3
}
},
edgeStateStyles: {
active: {
stroke: '#1459BB',
lineWidth: 4
},
inactive: {
opacity: 0.15
}
}
})
graphInstance.value.data(data)
graphInstance.value.render()
bindGraphEvents()
}
const initTreeGraph = (width, height) => {
const treeDataSource = convertGraphToTree(props.graphData)
if (!treeDataSource) return
graphInstance.value = new G6.TreeGraph({
container: containerRef.value,
width,
height,
fitView: true,
fitViewPadding: 80,
animate: true,
animateCfg: {
duration: 300,
easing: 'easeLinear'
},
minZoom: 0.1,
maxZoom: 10,
modes: {
default: [
'drag-canvas',
'zoom-canvas',
'drag-node',
{
type: 'collapse-expand',
onChange: function onChange(item, collapsed) {
const data = item.getModel()
data.collapsed = collapsed
return true
}
}
]
},
layout: {
type: 'compactBox',
direction: 'LR',
getId: function getId(d) {
return d.id
},
getHeight: function getHeight() {
return 16
},
getWidth: function getWidth() {
return 16
},
getVGap: function getVGap() {
return 30
},
getHGap: function getHGap() {
return 120
}
},
defaultNode: {
type: 'image',
size: 40,
clipCfg: {
show: true,
type: 'circle',
r: 20
},
labelCfg: {
position: 'right',
offset: 10,
style: {
fill: '#333',
fontSize: 11,
fontFamily: 'Microsoft YaHei',
background: {
fill: 'rgba(255, 255, 255, 0.95)',
padding: [4, 6, 4, 6],
radius: 4
}
}
}
},
defaultEdge: {
type: 'cubic-horizontal',
style: {
stroke: '#5B8FF9',
lineWidth: 3
}
},
nodeStateStyles: {
active: {
shadowColor: '#1459BB',
shadowBlur: 15,
stroke: '#1459BB',
lineWidth: 3
}
}
})
graphInstance.value.data(treeDataSource)
graphInstance.value.render()
graphInstance.value.fitView()
bindGraphEvents()
}
const convertGraphToTree = (graphData) => {
if (!graphData || !graphData.nodes || graphData.nodes.length === 0) {
return null
}
const nodes = graphData.nodes
const links = graphData.links || graphData.edges || []
const centerNode = nodes[0]
const centerId = String(centerNode.id || '0')
const childIdSet = new Set()
const childrenNodes = []
links.forEach((link) => {
const source = String(link.source)
const target = String(link.target)
if (source === centerId && !childIdSet.has(target)) {
const node = nodes.find(n => String(n.id) === target)
if (node) {
childIdSet.add(target)
childrenNodes.push({
id: target,
label: node.name || '',
img: node.image || echartsIcon03,
size: node.symbolSize || 40,
name: node.name,
image: node.image,
isSanctioned: node.isSanctioned
})
}
} else if (target === centerId && !childIdSet.has(source)) {
const node = nodes.find(n => String(n.id) === source)
if (node) {
childIdSet.add(source)
childrenNodes.push({
id: source,
label: node.name || '',
img: node.image || echartsIcon03,
size: node.symbolSize || 40,
name: node.name,
image: node.image,
isSanctioned: node.isSanctioned
})
}
}
})
if (childrenNodes.length === 0) {
nodes.slice(1).forEach((node) => {
const nodeId = String(node.id)
if (!childIdSet.has(nodeId)) {
childIdSet.add(nodeId)
childrenNodes.push({
id: nodeId,
label: node.name || '',
img: node.image || echartsIcon03,
size: node.symbolSize || 40,
name: node.name,
image: node.image,
isSanctioned: node.isSanctioned
})
}
})
}
return {
id: centerId,
label: centerNode.name || '',
img: centerNode.image || echartsIcon03,
size: centerNode.symbolSize || 60,
name: centerNode.name,
image: centerNode.image,
isSanctioned: centerNode.isSanctioned,
children: childrenNodes
}
}
const processGraphData = (rawData) => {
if (!rawData || !rawData.nodes || rawData.nodes.length === 0) {
return { nodes: [], edges: [] }
}
const nodeMap = new Map()
const nodes = []
rawData.nodes.forEach((node, index) => {
const nodeId = String(node.id || index)
if (nodeMap.has(nodeId)) {
return
}
nodeMap.set(nodeId, true)
const isCenter = index === 0
const size = node.symbolSize || (isCenter ? 60 : 40)
nodes.push({
id: nodeId,
label: node.name || '',
img: node.image || echartsIcon03,
size,
isCenter,
clipCfg: {
show: true,
type: 'circle',
r: size / 2
},
style: {
cursor: 'pointer'
},
labelCfg: {
position: 'bottom',
offset: 12,
style: {
fill: isCenter ? '#1459BB' : '#333',
fontSize: isCenter ? 13 : 11,
fontWeight: isCenter ? 'bold' : 'normal',
fontFamily: 'Microsoft YaHei',
textAlign: 'center'
}
},
...node,
id: nodeId
})
})
const edgeMap = new Map()
const edges = []
const rawEdges = rawData.links || rawData.edges || []
rawEdges.forEach((edge, index) => {
const source = String(edge.source)
const target = String(edge.target)
const edgeKey = `${source}-${target}`
if (edgeMap.has(edgeKey)) {
return
}
if (!nodeMap.has(source) || !nodeMap.has(target)) {
return
}
edgeMap.set(edgeKey, true)
edges.push({
id: `edge-${index}`,
source,
target,
label: edge.name || ''
})
})
return { nodes, edges }
}
const bindGraphEvents = () => {
if (!graphInstance.value) return
graphInstance.value.on('node:click', (evt) => {
const node = evt.item
const model = node.getModel()
emit('nodeClick', model)
})
graphInstance.value.on('canvas:click', () => {
})
}
const handleClickControlBtn = (btn) => {
currentLayoutType.value = btn
emit('layoutChange', btn)
initGraph(btn)
}
const destroyGraph = () => {
if (graphInstance.value) {
graphInstance.value.destroy()
graphInstance.value = null
}
}
const handleResize = () => {
if (graphInstance.value && containerRef.value) {
const width = containerRef.value.offsetWidth
const height = containerRef.value.offsetHeight
graphInstance.value.changeSize(width, height)
graphInstance.value.fitView()
}
}
watch(
() => props.graphData,
() => {
initGraph(currentLayoutType.value)
}
)
watch(
() => props.treeData,
() => {
if (currentLayoutType.value === 2) {
initGraph(2)
}
}
)
watch(
() => props.controlActive,
(newVal) => {
if (newVal !== currentLayoutType.value) {
handleClickControlBtn(newVal)
}
}
)
onMounted(() => {
initGraph(1)
window.addEventListener('resize', handleResize)
})
onUnmounted(() => {
window.removeEventListener('resize', handleResize)
destroyGraph()
})
defineExpose({
refresh: () => initGraph(currentLayoutType.value),
changeLayout: (type) => handleClickControlBtn(type),
getGraph: () => graphInstance.value
})
</script>
<style lang="scss" scoped>
.relation-graph-wrapper {
position: relative;
width: 100%;
height: 100%;
}
.graph-container {
width: 100%;
height: 100%;
}
.graph-controls {
position: absolute;
top: 16px;
right: 16px;
display: flex;
gap: 8px;
z-index: 10;
.control-btn {
width: 32px;
height: 32px;
border-radius: 4px;
border: 1px solid rgba(234, 236, 238, 1);
background: rgba(255, 255, 255, 1);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
img {
width: 16px;
height: 16px;
}
&:hover {
border-color: rgba(5, 95, 194, 0.5);
}
}
.control-btn-active {
border-color: rgba(5, 95, 194, 1);
background: rgba(231, 243, 255, 1);
}
}
</style>
\ No newline at end of file
src/views/decree/decreeLayout/influence/com/AiTips.vue 0 → 100644
浏览文件 @ 58537cbd
<template>
<div class="view-box">
<div class="icon-left">
<img src="../../assets/icons/ai.png" alt="">
</div>
<div class="tips-content">{{ props.tips }}</div>
<div class="icon-right">
<img src="../../assets/icons/right.png" alt="">
</div>
</div>
</template>
<script setup lang="ts" name="AiTips">
const props = defineProps({
tips: {
type: String,
default: ''
}
});
</script>
<style scoped lang="scss">
.view-box {
width: 100%;
display: flex;
align-items: center;
padding: 7px 12px;
border: 1px solid rgba(231, 243, 255, 1);
border-radius: 4px;
background: rgba(246, 250, 255, 1);
.icon-left {
width: 20px;
height: 20px;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
.tips-content {
color: rgb(5, 95, 194);
font-size: 16px;
font-weight: 400;
line-height: 24px;
margin-left: 13px;
flex: 1;
}
.icon-right {
width: 24px;
height: 24px;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
}
</style>
\ No newline at end of file
src/views/decree/decreeLayout/influence/ChartChain.vue → src/views/decree/decreeLayout/influence/com/ChartChain.vue
浏览文件 @ 58537cbd
<template>
<div class="view-box">
<div class="right-main">
<div class="right-main-content">
<div class="hintWrap">
<div class="icon1"></div>
<div class="title">
这项政令标志着中美AI竞争进入一个新阶段，其核心特征是 “精准封锁”与“体系输出”相结合。它短期内无疑会给中国AI产业链带来压力，但长期看，这场竞争更可能是一场围绕技术路线、生态系统和治理规则的持久战。
</div>
<div class="icon2Wrap">
<div class="icon2"></div>
<el-empty v-if="!dataList?.length" style="padding-top: 15%;" description="暂无数据" :image-size="100" />
<div v-if="dataList.length" class="main-content-main">
<div class="main-mask"
@wheel.prevent="handleWheel"
@mousedown="handleMouseDown"
@mouseup="handleMouseUp"
@mouseleave="handleMouseUp"
@mousemove="handleMouseMove"
></div>
<div class="fishbone-container" :style="{ transform: `translate(${translateX}px, ${translateY}px) scale(${scale})`, transformOrigin: 'center center' }">
<!-- 主轴上的标签 -->
<div class="main-line" :style="{ width: dataList.length * 200 + 300 + 'px' }">
<div class="main-line-text" v-for="(item, index) in dataList" :key="'label-' + index"
:class="{
'blue-theme': index < 2,
'green-theme': index >= 2 && index < 4,
'purple-theme': index >= 4
}" :style="{ left: index * 200 + 220 + 'px' }">
{{ item.text }}
</div>
</div>
<div class="right-main-content-main">
<div class="fishbone-wrapper">
<div class="fishbone-scroll-container" ref="scrollContainerRef">
<div class="fishbone" v-if="dataList.length > 0">
<div class="main-line" :style="{ width: dataList.length * 200 + 300 + 'px' }">
<!-- 主轴上的标签 -->
<div class="main-line-text" v-for="(item, index) in dataList" :key="'label-' + index"
:class="{
'blue-theme': index < 2,
'green-theme': index >= 2 && index < 4,
'purple-theme': index >= 4
}" :style="{ left: index * 200 + 220 + 'px' }">
{{ item.text }}
</div>
</div>
<!-- 奇数索引的数据组放在上方 -->
<div v-for="(causeGroup, groupIndex) in onFilterData(1)" :key="'top-' + groupIndex"
:class="getTopBoneClass(groupIndex)" :style="{ left: groupIndex * 400 + 420 + 'px' }">
<div class="left-bone">
<div class="left-bone-item" v-for="(item, index) in getLeftItems(causeGroup.causes)" :key="'left-' + index">
<img :src="defaultIcon2 || item.picture" alt="" class="company-icon" />
<div class="text" :title="item.name">{{ item.name }}</div>
<div class="line"></div>
</div>
</div>
<div class="right-bone">
<div class="right-bone-item" v-for="(item, index) in getRightItems(causeGroup.causes)" :key="'right-' + index">
<div class="line"></div>
<img :src="defaultIcon2 || item.picture" alt="" class="company-icon" />
<div class="text" :title="item.name">{{ item.name }}</div>
</div>
</div>
</div>
<!-- 偶数索引的数据组放在下方 -->
<div v-for="(causeGroup, groupIndex) in onFilterData(0)" :key="'bottom-' + groupIndex"
:class="getBottomBoneClass(groupIndex)" :style="{ left: groupIndex * 400 + 220 + 'px' }">
<div class="left-bone">
<div class="left-bone-item" v-for="(item, index) in getLeftItems(causeGroup.causes)" :key="'left-bottom-' + index">
<img :src="defaultIcon2 || item.picture" alt="" class="company-icon" />
<div class="text" :title="item.name">{{ item.name }}</div>
<div class="line"></div>
</div>
</div>
<div class="right-bone">
<div class="right-bone-item" v-for="(item, index) in getRightItems(causeGroup.causes)" :key="'right-bottom-' + index">
<div class="line"></div>
<img :src="defaultIcon2 || item.picture" alt="" class="company-icon" />
<div class="text" :title="item.name">{{ item.name }}</div>
</div>
</div>
</div>
</div>
<div v-else
style="display: flex; justify-content: center; align-items: center; height: 200px; width: 100%">
<el-empty description="暂无相关数据" />
</div>
<!-- 奇数索引的数据组放在上方 -->
<div v-for="(causeGroup, groupIndex) in onFilterData(1)" :key="groupIndex"
class="top-bone" :style="{ left: groupIndex * 400 + 510 + 'px', height: (causeGroup.causes?.length) * 22 + 100 + 'px' }">
<div class="left-bone">
<div class="left-bone-item" v-for="item in getLeftItems(causeGroup.causes)" :key="item.id">
<img :src="defaultIcon2 || item.picture" alt="" class="company-icon" />
<div class="text" :title="item.name">{{ item.name }}</div>
<div class="line"></div>
</div>
</div>
</div>
<div class="right-main-content-footer">
<div class="footer-item footer-item1">
<div class="footer-item-bottom">
<div class="icon">
<img :src="noticeIcon" alt="" />
</div>
<div class="text">
{{
`中国企业${cnEntityOnChainData.upstreamInternalCount ||
0}家（${formatRate(cnEntityOnChainData.upstreamInternalRate)}%），受制裁${cnEntityOnChainData.upstreamEntityCount
|| 0}家（${formatRate(cnEntityOnChainData.upstreamEntityRate)}%）`
}}
</div>
<div class="right-bone">
<div class="right-bone-item" v-for="item in getRightItems(causeGroup.causes)" :key="item.id">
<div class="line"></div>
<img :src="defaultIcon2 || item.picture" alt="" class="company-icon" />
<div class="text" :title="item.name">{{ item.name }}</div>
</div>
<div class="footer-item-top">{{ "上游" }}</div>
</div>
<div class="footer-item footer-item2">
<div class="footer-item-bottom">
<div class="icon">
<img :src="noticeIcon" alt="" />
</div>
<div class="text">
{{
`中国企业${cnEntityOnChainData.midstreamInternalCount ||
0}家（${formatRate(cnEntityOnChainData.midstreamInternalRate)}%），受制裁${cnEntityOnChainData.midstreamEntityCount
|| 0}家（${formatRate(cnEntityOnChainData.midstreamEntityRate)}%）`
}}
</div>
</div>
<!-- 偶数索引的数据组放在下方 -->
<div v-for="(causeGroup, groupIndex) in onFilterData(0)" :key="groupIndex"
class="bottom-bone" :style="{ left: groupIndex * 400 + 310 + 'px', height: (causeGroup.causes?.length) * 22 + 100 + 'px' }">
<div class="left-bone">
<div class="left-bone-item" v-for="item in getRightItems(causeGroup.causes)" :key="item.id">
<img :src="defaultIcon2 || item.picture" alt="" class="company-icon" />
<div class="text" :title="item.name">{{ item.name }}</div>
<div class="line"></div>
</div>
<div class="footer-item-top">{{ "中游" }}</div>
</div>
<div class="footer-item footer-item3">
<div class="footer-item-bottom">
<div class="icon">
<img :src="noticeIcon" alt="" />
</div>
<div class="text">
{{
`中国企业${cnEntityOnChainData.downstreamInternalCount ||
0}家（${formatRate(cnEntityOnChainData.downstreamInternalRate)}%），受制裁${cnEntityOnChainData.downstreamEntityCount
|| 0}家（${formatRate(cnEntityOnChainData.downstreamEntityRate)}%）`
}}
</div>
<div class="right-bone">
<div class="right-bone-item" v-for="item in getLeftItems(causeGroup.causes)" :key="item.id">
<div class="line"></div>
<img :src="defaultIcon2 || item.picture" alt="" class="company-icon" />
<div class="text" :title="item.name">{{ item.name }}</div>
</div>
<div class="footer-item-top">{{ "下游" }}</div>
</div>
</div>
</div>
</div>
<div v-if="dataList.length" class="main-content-footer">
<div class="footer-item footer-item1">
<div class="footer-item-bottom">
<div class="icon">
<img :src="noticeIcon" alt="" />
</div>
<div class="text">
{{
`中国企业${cnEntityOnChainData.upstreamInternalCount ||
0}家（${formatRate(cnEntityOnChainData.upstreamInternalRate)}%），受制裁${cnEntityOnChainData.upstreamEntityCount
|| 0}家（${formatRate(cnEntityOnChainData.upstreamEntityRate)}%）`
}}
</div>
</div>
<div class="footer-item-top">{{ "上游" }}</div>
</div>
<div class="footer-item footer-item2">
<div class="footer-item-bottom">
<div class="icon">
<img :src="noticeIcon" alt="" />
</div>
<div class="text">
{{
`中国企业${cnEntityOnChainData.midstreamInternalCount ||
0}家（${formatRate(cnEntityOnChainData.midstreamInternalRate)}%），受制裁${cnEntityOnChainData.midstreamEntityCount
|| 0}家（${formatRate(cnEntityOnChainData.midstreamEntityRate)}%）`
}}
</div>
</div>
<div class="footer-item-top">{{ "中游" }}</div>
</div>
<div class="footer-item footer-item3">
<div class="footer-item-bottom">
<div class="icon">
<img :src="noticeIcon" alt="" />
</div>
<div class="text">
{{
`中国企业${cnEntityOnChainData.downstreamInternalCount ||
0}家（${formatRate(cnEntityOnChainData.downstreamInternalRate)}%），受制裁${cnEntityOnChainData.downstreamEntityCount
|| 0}家（${formatRate(cnEntityOnChainData.downstreamEntityRate)}%）`
}}
</div>
</div>
<div class="footer-item-top">{{ "下游" }}</div>
</div>
</div>
</div>
</template>
<script setup name="ChartChain">
import { ref, onMounted } from "vue";
import defaultIcon2 from "@/assets/icons/default-icon2.png";
import noticeIcon from "./assets/images/notice-icon.png";
import noticeIcon from "../assets/images/notice-icon.png";
import { getDeepMiningSelect, getDeepMiningIndustry, getDeepMiningIndustryFishbone, getDeepMiningIndustryEntity } from "@/api/exportControlV2.0";
// 缩放功能处理
const scale = ref(1)
const minScale = 0.1
const maxScale = 10
const handleWheel = (e) => {
if (e.deltaY < 0) {
// 放大：不超过最大值
scale.value = Math.min(scale.value + 0.1, maxScale)
} else {
// 缩小：不低于最小值
scale.value = Math.max(scale.value - 0.1, minScale)
}
}
// 移动功能处理
const translateX = ref(0) // X轴位移
const translateY = ref(0) // Y轴位移
let isDragging = false
let startX = 0
let startY = 0
const handleMouseMove = (e) => {
if (!isDragging) return
translateX.value = e.clientX - startX
translateY.value = e.clientY - startY
}
const handleMouseDown = (e) => {
// 排除右键/中键，只响应左键（e.button=0为左键）
if (e.button !== 0) return
isDragging = true
startX = e.clientX - translateX.value
startY = e.clientY - translateY.value
}
const handleMouseUp = () => {
isDragging = false
}
// 实体清单-深度挖掘-产业链中国企业实体信息查询
const cnEntityOnChainData = ref({});
const getCnEntityOnChainData = async () => {
......@@ -173,16 +194,6 @@ const getRightItems = items => {
const midpoint = Math.ceil(items.length / 2);
return items.slice(midpoint);
};
// 获取上方鱼骨图位置类名
const getTopBoneClass = index => {
const positions = ["top-bone", "top-bone1", "top-bone2"];
return positions[index % 3] || "top-bone";
};
// 获取下方鱼骨图位置类名
const getBottomBoneClass = index => {
const positions = ["bottom-bone", "bottom-bone1", "bottom-bone2"];
return positions[index % 3] || "bottom-bone";
};
const getFishboneData = async () => {
const currentSanction = sanctionList.value.find(item => item.id === currentSanctionId.value);
const date = currentSanction ? currentSanction.date : '';
......@@ -305,424 +316,316 @@ onMounted(() => {
.view-box {
width: 100%;
height: 100%;
}
.right-main {
height: 100%;
padding: 11px 16px 20px;
display: flex;
flex-direction: column;
.right-main-content {
height: 100%;
.main-content-main {
position: relative;
height: 20px;
flex: auto;
display: flex;
flex-direction: column;
.hintWrap {
display: flex;
align-items: center;
padding: 7px 12px;
border: 1px solid rgba(231, 243, 255, 1);
border-radius: 4px;
background: rgba(246, 250, 255, 1);
margin-bottom: 9px;
.icon1 {
width: 19px;
height: 20px;
background-image: url("../assets/icons/ai.png");
background-size: 100% 100%;
flex-shrink: 0;
}
align-items: center;
justify-content: center;
overflow: hidden;
.main-mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 3;
}
.title {
color: rgb(5, 95, 194);
font-size: 16px;
font-weight: 400;
line-height: 24px;
margin-left: 13px;
flex: 1;
}
.fishbone-container {
position: relative;
.icon2Wrap {
width: 24px;
height: 24px;
background-color: rgba(231, 243, 255, 1);
.main-line {
height: 3px;
background: rgb(230, 231, 232);
display: flex;
justify-content: center;
justify-content: space-between;
align-items: center;
border-radius: 12px;
margin-left: 20px;
flex-shrink: 0;
.icon2 {
width: 24px;
height: 24px;
background-image: url("../assets/icons/right.png");
background-size: 100% 100%;
// 添加中间的文字块
.main-line-text {
position: absolute;
// top: -14px;
font-size: 16px;
color: #055FC2;
font-weight: bold;
background-color: #f7f8f9;
padding: 0 10px;
z-index: 2;
// 箭头背景
height: 32px;
line-height: 32px;
width: 160px;
text-align: center;
background: rgba(231, 243, 255, 1);
clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%, 10% 50%);
&.blue-theme {
background: rgba(231, 243, 255, 1);
color: rgba(22, 119, 255, 1);
}
&.green-theme {
background: rgba(225, 255, 251, 1);
color: rgba(19, 168, 168, 1);
}
&.purple-theme {
background: rgba(246, 235, 255, 1);
color: rgba(146, 84, 222, 1);
}
}
}
}
.right-main-content-main {
flex: 1;
position: relative;
overflow: hidden;
.company-icon {
width: 16px;
height: 16px;
margin: 0 4px;
object-fit: contain;
}
.fishbone-wrapper {
position: relative;
width: 100%;
.top-bone {
position: absolute;
bottom: 0px;
width: 3px;
background: rgb(230, 231, 232);
transform-origin: bottom center;
transform: skew(30deg);
z-index: 1;
.left-bone {
color: #777;
position: absolute;
top: -20px;
right: 0;
width: 180px;
height: 100%;
}
.fishbone-scroll-container {
display: flex;
align-items: center;
width: 100%;
height: 100%;
overflow-x: auto;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(144, 202, 249, 0.5) transparent;
flex-direction: column;
justify-content: flex-end;
&::-webkit-scrollbar {
height: 6px;
}
.left-bone-item {
transform: skew(-30deg);
height: 40px;
margin: 4px 0;
display: flex;
justify-content: flex-end;
align-items: center;
&::-webkit-scrollbar-track {
background: transparent;
}
.text {
margin-left: 4px;
height: 25px;
line-height: 25px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&::-webkit-scrollbar-thumb {
background-color: rgba(144, 202, 249, 0.5);
border-radius: 3px;
.line {
margin-left: 7px;
width: 40px;
height: 2px;
background: rgb(230, 231, 232);
}
}
}
.fishbone {
position: relative;
width: fit-content;
.right-bone {
color: #777;
position: absolute;
top: -44px;
left: 0;
width: 180px;
height: 100%;
margin-top: 40px;
min-width: 100%;
padding-left: 275px;
margin-left: 40px;
.main-line {
margin-top: 280px;
width: 1888px;
height: 3px;
background: rgb(230, 231, 232);
display: flex;
flex-direction: column;
justify-content: flex-end;
.right-bone-item {
transform: skew(-30deg);
height: 40px;
margin: 4px 0;
display: flex;
justify-content: space-between;
justify-content: flex-start;
align-items: center;
padding: 0 100px;
// 虚线
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
.line {
margin-right: 7px;
width: 30px;
height: 2px;
background: rgb(230, 231, 232);
}
// 添加中间的文字块
.main-line-text {
position: absolute;
// top: -14px;
font-size: 16px;
color: #055FC2;
font-weight: bold;
background-color: #f7f8f9;
padding: 0 10px;
z-index: 2;
// 箭头背景
height: 32px;
line-height: 32px;
width: 160px;
text-align: center;
background: rgba(231, 243, 255, 1);
clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%, 10% 50%);
&.blue-theme {
background: rgba(231, 243, 255, 1);
color: rgba(22, 119, 255, 1);
}
&.green-theme {
background: rgba(225, 255, 251, 1);
color: rgba(19, 168, 168, 1);
}
&.purple-theme {
background: rgba(246, 235, 255, 1);
color: rgba(146, 84, 222, 1);
}
.text {
max-width: 100px;
margin-right: 4px;
height: 25px;
line-height: 25px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
.company-icon {
width: 16px;
height: 16px;
margin: 0 4px;
object-fit: contain;
}
.top-bone {
.bottom-bone {
position: absolute;
top: 0px;
width: 3px;
background: rgb(230, 231, 232);
transform-origin: top center;
transform: skew(-30deg);
z-index: 1;
.left-bone {
color: #777;
position: absolute;
top: 20px;
right: 200px;
width: 3px;
height: 260px;
background: rgb(230, 231, 232);
transform: skew(30deg);
z-index: 1;
bottom: -44px;
right: 0;
width: 180px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
.left-bone {
color: #777;
position: absolute;
top: 0;
left: -150px;
width: 150px;
height: 50px;
// overflow: hidden;
.left-bone-item {
transform: skew(-30deg);
height: 45px;
margin-bottom: 2px;
margin-top: 2px;
display: flex;
justify-content: flex-end;
align-items: center;
.text {
margin-left: 4px;
height: 25px;
line-height: 25px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.line {
margin-left: 7px;
width: 40px;
height: 2px;
background: rgb(230, 231, 232);
}
.left-bone-item {
transform: skew(30deg);
height: 40px;
margin: 4px 0;
display: flex;
justify-content: flex-end;
align-items: center;
.text {
margin-left: 4px;
height: 25px;
max-width: 130px;
line-height: 25px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.right-bone {
color: #777;
position: absolute;
top: 0;
right: -150px;
width: 150px;
height: 210px;
overflow: hidden;
.right-bone-item {
transform: skew(-30deg);
height: 39px;
margin-bottom: 2px;
margin-top: 2px;
display: flex;
justify-content: flex-start;
align-items: center;
.line {
margin-right: 7px;
width: 30px;
height: 2px;
background: rgb(230, 231, 232);
}
.text {
max-width: 100px;
margin-right: 4px;
height: 25px;
line-height: 25px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.line {
margin-left: 7px;
width: 40px;
height: 2px;
background: rgb(230, 231, 232);
}
}
}
.top-bone1 {
@extend .top-bone;
right: 500px;
}
.top-bone2 {
@extend .top-bone;
right: 800px;
}
.bottom-bone {
.right-bone {
color: #777;
position: absolute;
top: 280px;
right: 360px;
width: 3px;
height: 260px;
background: rgb(230, 231, 232);
transform: skew(-30deg);
z-index: 1;
bottom: -20px;
left: 0;
width: 180px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
.left-bone {
color: #777;
position: absolute;
top: 50px;
left: -150px;
width: 150px;
height: 260px;
.left-bone-item {
transform: skew(30deg);
height: 39px;
margin-bottom: 2px;
margin-top: 2px;
display: flex;
justify-content: flex-end;
align-items: center;
.text {
margin-left: 4px;
height: 25px;
max-width: 130px;
line-height: 25px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.line {
margin-left: 7px;
width: 40px;
height: 2px;
background: rgb(230, 231, 232);
}
.right-bone-item {
transform: skew(30deg);
height: 40px;
margin: 4px 0;
display: flex;
justify-content: flex-start;
align-items: center;
.line {
margin-right: 7px;
width: 30px;
height: 2px;
background: rgb(230, 231, 232);
}
}
.right-bone {
color: #777;
position: absolute;
top: 50px;
right: -150px;
width: 150px;
height: 260px;
.right-bone-item {
transform: skew(30deg);
height: 35px;
margin-bottom: 2px;
margin-top: 2px;
display: flex;
justify-content: flex-start;
align-items: center;
.line {
margin-right: 7px;
width: 30px;
height: 2px;
background: rgb(230, 231, 232);
}
.text {
max-width: 100px;
margin-right: 4px;
height: 25px;
line-height: 25px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.text {
max-width: 100px;
margin-right: 4px;
height: 25px;
line-height: 25px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
.bottom-bone1 {
@extend .bottom-bone;
right: 660px;
}
.bottom-bone2 {
@extend .bottom-bone;
right: 960px;
}
}
}
.main-content-footer {
margin-top: 16px;
display: flex;
justify-content: space-between;
.right-main-content-footer {
margin-top: 16px;
.footer-item {
flex: 1;
display: flex;
justify-content: space-between;
flex-direction: column;
justify-content: flex-end;
}
.footer-item {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-end;
.footer-item {
.footer-item-top {
height: 28px;
text-align: center;
line-height: 28px;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
margin-top: 10px;
position: relative;
z-index: 1;
}
.footer-item-bottom {
display: flex;
justify-content: center;
align-items: center;
.footer-item {
.footer-item-top {
height: 28px;
text-align: center;
line-height: 28px;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
margin-top: 10px;
position: relative;
z-index: 1;
.text {
color: rgba(206, 79, 81, 1);
font-size: 14px;
line-height: 14px;
margin-left: 6px;
}
.footer-item-bottom {
display: flex;
justify-content: center;
align-items: center;
.icon {
width: 16px;
height: 16px;
font-size: 0;
.text {
color: rgba(206, 79, 81, 1);
font-size: 14px;
line-height: 14px;
margin-left: 6px;
}
.icon {
width: 16px;
height: 16px;
font-size: 0;
img {
width: 100%;
height: 100%;
}
img {
width: 100%;
height: 100%;
}
}
}
}
.footer-item1 {
color: rgba(22, 119, 255, 1);
.footer-item-top {
background: rgba(231, 243, 255, 1);
}
.footer-item1 {
color: rgba(22, 119, 255, 1);
.footer-item-top {
background: rgba(231, 243, 255, 1);
}
.footer-item2 {
color: rgba(19, 168, 168, 1);
.footer-item-top {
background: rgba(225, 255, 251, 1);
}
}
.footer-item2 {
color: rgba(19, 168, 168, 1);
.footer-item-top {
background: rgba(225, 255, 251, 1);
}
.footer-item3 {
color: rgba(146, 84, 222, 1);
.footer-item-top {
background: rgba(246, 235, 255, 1);
}
}
.footer-item3 {
color: rgba(146, 84, 222, 1);
.footer-item-top {
background: rgba(246, 235, 255, 1);
}
}
}
......
src/views/decree/decreeLayout/influence/index.vue
浏览文件 @ 58537cbd
......@@ -16,7 +16,7 @@
</div>
<div class="data-title">实体名称</div>
<div style="height: 20px; flex: auto;">
<el-empty v-if="showCompanyList.length === 0" style="padding-top: 30%" description="暂无数据" :image-size="100" />
<el-empty v-if="!showCompanyList?.length" style="padding-top: 35%;" description="暂无数据" :image-size="100" />
<el-scrollbar height="100%" always>
<div class="list-data">
<div class="list-item" v-for="item in showCompanyList" :key="item.id" :class="{ 'item-active': activeEntityId === item.id }" @click="handleToCompanyDetail(item)">
......@@ -75,18 +75,14 @@
</div>
</div>
</template>
<div class="box2-main" v-if="contentType==1">
<ChartChain />
</div>
<div class="box2-main" v-if="contentType==2">
<!-- <ChartRelation
:graph-data="graphData"
:tree-data="treeData"
:control-active="1"
@node-click="handleNodeClick"
@layout-change="handleLayoutChange"
/> -->
<GraphChart :nodes="testData.nodes" :links="testData.links" layoutType="force" />
<div class="box2-main">
<AiTips :tips="tips" />
<div class="graph-box" v-if="contentType==1">
<ChartChain />
</div>
<div class="graph-box" v-if="contentType==2">
<GraphChart :nodes="testData.nodes" :links="testData.links" layoutType="force" />
</div>
</div>
</AnalysisBox>
</div>
......@@ -101,9 +97,9 @@ import getBarChart from "./utils/barChart";
import { getDecreeIndustry, getDecreehylyList, getDecreeCompany } from "@/api/decree/influence";
import { getCnEntityOnChain, getChainInfoByDomainId } from "@/api/exportControl";
import { getSingleSanctionEntitySupplyChain } from "@/api/exportControlV2.0";
import ChartChain from "./ChartChain.vue";
import ChartChain from "./com/ChartChain.vue";
import AiTips from "./com/AiTips.vue";
import GraphChart from "@/components/base/GraphChart/index.vue";
import ChartRelation from "./ChartRelation.vue";
import defaultIcon2 from "@/assets/icons/default-icon2.png";
import noticeIcon from "./assets/images/notice-icon.png";
import icon422 from "./assets/images/icon422.png";
......@@ -113,191 +109,65 @@ import icon1621 from "./assets/images/icon1621.png";
import company from "./assets/images/company.png";
import companyActive from "./assets/images/company-active.png";
const tips = "这项政令标志着中美AI竞争进入一个新阶段，其核心特征是 “精准封锁”与“体系输出”相结合。它短期内无疑会给中国AI产业链带来压力，但长期看，这场竞争更可能是一场围绕技术路线、生态系统和治理规则的持久战。"
// 关系图数据
const testData = {
// 节点数据
nodes: [
{
id: 0,
name: "泰丰先行",
// category: 0,
symbolSize: 30,
value: 8,
symbol: `image://${company}`,
x: 50,
y: 10
},
{
id: 1,
name: "国轩高科",
// category: 0,
symbolSize: 30,
value: 9,
symbol: `image://${company}`,
x: 150,
y: 10
},
{
id: 2,
name: "智方纳米",
// category: 2,
symbolSize: 30,
value: 7,
symbol: `image://${company}`,
x: 250,
y: 10
},
{
id: 3,
name: "香百科技",
// category: 1,
symbolSize: 30,
value: 6,
symbol: `image://${company}`,
x: 350,
y: 10
},
{
id: 4,
name: "格林滨",
// category: 2,
symbolSize: 30,
value: 6,
symbol: `image://${company}`,
x: 450,
y: 10
},
{
id: 5,
name: "江西紫宸",
// category: 2,
symbolSize: 30,
value: 7,
symbol: `image://${company}`,
x: 550,
y: 10
},
{
id: 6,
name: "紫江企业",
// category: 4,
symbolSize: 30,
value: 6,
symbol: `image://${company}`,
x: 650,
y: 10
},
{
id: 7,
name: "大而美法案",
// category: 4,
symbolSize: 50,
value: 5,
symbol: `image://${company}`,
x: 300,
y: 200
},
{ id: 0, name: "泰丰先行", symbolSize: 60, symbol: `image://${company}`, x:0, y:0 },
{ id: 1, name: "国轩高科", symbolSize: 40, symbol: `image://${company}` },
{ id: 2, name: "智方纳米", symbolSize: 40, symbol: `image://${company}` },
{ id: 3, name: "香百科技", symbolSize: 40, symbol: `image://${company}` },
{ id: 4, name: "格林滨", symbolSize: 40, symbol: `image://${company}` },
{ id: 5, name: "江西紫宸", symbolSize: 40, symbol: `image://${company}` },
{ id: 6, name: "紫江企业", symbolSize: 40, symbol: `image://${company}` },
{ id: 7, name: "大而美法案", symbolSize: 40, symbol: `image://${company}` },
{ id: 8, name: "比亚迪", symbolSize: 40, symbol: `image://${company}` },
],
// 关系数据
links: [
{
id: 8,
name: "比亚迪",
// category: 0,
symbolSize: 30,
value: 10,
symbol: `image://${company}`,
x: 50,
y: 400
source: 1, target: 0,
label: { show: true, color: "#055FC2", backgroundColor: "#E7F3FF", borderWidth: 0, offset: [0, 15], formatter: '持股' },
lineStyle: { color: '#B9DCFF', type: "solid" }
},
{
id: 9,
name: "铜陵有色",
// category: 3,
symbolSize: 30,
value: 8,
symbol: `image://${company}`,
x: 150,
y: 400
source: 2, target: 0,
label: { show: true, color: "#055FC2", backgroundColor: "#E7F3FF", borderWidth: 0, offset: [0, 15], formatter: '持股' },
lineStyle: { color: '#B9DCFF', type: "solid" }
},
{
id: 10,
name: "长盛精密",
// category: 1,
symbolSize: 30,
value: 7,
symbol: `image://${company}`,
x: 250,
y: 400
source: 3, target: 0,
label: { show: true, color: "#055FC2", backgroundColor: "#E7F3FF", borderWidth: 0, offset: [0, 15], formatter: '合作' },
lineStyle: { color: '#B9DCFF', type: "solid" }
},
{
id: 11,
name: "天合光能",
// category: 0,
symbolSize: 30,
value: 8,
symbol: `image://${company}`,
x: 350,
y: 400
source: 4, target: 0,
label: { show: true, color: "#055FC2", backgroundColor: "#E7F3FF", borderWidth: 0, offset: [0, 15], formatter: '从属' },
lineStyle: { color: '#B9DCFF', type: "solid" }
},
{
id: 12,
name: "昆仑化学",
// category: 2,
symbolSize: 30,
value: 6,
symbol: `image://${company}`,
x: 250,
y: 400
source: 5, target: 0,
label: { show: true, color: "#055FC2", backgroundColor: "#E7F3FF", borderWidth: 0, offset: [0, 15], formatter: '合作' },
lineStyle: { color: '#B9DCFF', type: "solid" }
},
{
id: 13,
name: "嘉源科技",
// category: 1,
symbolSize: 30,
value: 6,
symbol: `image://${company}`,
x: 450,
y: 400
source: 6, target: 0,
label: { show: true, color: "#055FC2", backgroundColor: "#E7F3FF", borderWidth: 0, offset: [0, 15], formatter: '持股' },
lineStyle: { color: '#B9DCFF', type: "solid" }
},
{
id: 14,
name: "华阳集团",
// category: 4,
symbolSize: 30,
value: 7,
symbol: `image://${company}`,
x: 550,
y: 400
source: 7, target: 0,
label: { show: true, color: "#055FC2", backgroundColor: "#E7F3FF", borderWidth: 0, offset: [0, 15], formatter: '合作' },
lineStyle: { color: '#B9DCFF', type: "solid" }
},
{
id: 15,
name: "海辰智能",
// category: 1,
symbolSize: 30,
value: 7,
symbol: `image://${company}`,
x: 650,
y: 400
source: 8, target: 0,
label: { show: true, color: "#055FC2", backgroundColor: "#E7F3FF", borderWidth: 0, offset: [0, 15], formatter: '合作' },
lineStyle: { color: '#B9DCFF', type: "solid" }
},
],
// 关系数据
links: [
{ source: 1, target: 7, label: { show: true, formatter: '合作' } },
{ source: 2, target: 7, label: { show: true, formatter: '持股' } },
{ source: 3, target: 7, label: { show: true, formatter: '合作' } },
{ source: 4, target: 7, lineStyle: { type: 'dashed', color: '#d32f2f' }, label: { show: true, formatter: '从属' } },
{ source: 5, target: 7, label: { show: true, formatter: '合作' } },
{ source: 6, target: 7, label: { show: true, formatter: '持股' } },
{ source: 0, target: 7, label: { show: true, formatter: '持股' } },
{ source: 8, target: 7, label: { show: true, formatter: '合作' } },
{ source: 9, target: 7, lineStyle: { type: 'dashed', color: '#d32f2f' }, label: { show: true, formatter: '从属' } },
{ source: 10, target: 7, lineStyle: { type: 'dashed', color: '#d32f2f' }, label: { show: true, formatter: '合作' } },
{ source: 11, target: 7, label: { show: true, formatter: '合作' } },
{ source: 12, target: 7, label: { show: true, formatter: '合作' } },
{ source: 13, target: 7, label: { show: true, formatter: '合作' } },
{ source: 14, target: 7, label: { show: true, formatter: '合作' } },
{ source: 15, target: 7, label: { show: true, formatter: '合作', color: 'red', borderColor: 'red' } },
],
};
// 受影响实体
......@@ -374,7 +244,7 @@ const handleGetHylyList = async () => {
};
// 产业链/实体关系
const contentType = ref(2);
const contentType = ref(1);
const headerContentType = (type) => {
contentType.value = type;
};
......@@ -693,7 +563,7 @@ onMounted(() => {
align-items: flex-end;
width: 100%;
height: 100%;
padding: 0 16px;
padding: 0 20px;
.title-left {
display: flex;
border: 1px solid rgb(5, 95, 194);
......@@ -734,6 +604,14 @@ onMounted(() => {
.box2-main {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
padding: 16px 20px;
.graph-box {
height: 20px;
flex: auto;
margin-top: 16px;
}
}
}
}
......
src/views/decree/decreeLayout/overview/background/index.vue
浏览文件 @ 58537cbd
......@@ -16,7 +16,7 @@
<div class="box1-main">
<div class="box1-item" v-for="(item, index) in backgroundList" :key="index">
<div class="id">{{ index + 1 }}</div>
<div class="title">{{ item.content }}</div>
<div class="title text-align-justify">{{ item.content }}</div>
<div class="open">
<img src="./assets/images/open-icon.png" alt="" />
</div>
......@@ -37,14 +37,17 @@
<div class="box2-main">
<div class="custom-collapse">
<el-collapse v-model="dependActive">
<el-collapse-item v-for="(item, index) in dependList" :key="item.billId" title="Consistency" :name="item.billId">
<el-collapse-item v-for="(item, index) in dependList" :key="item.billId" :name="item.billId">
<template #icon>
<el-icon><ArrowDownBold /></el-icon>
<el-icon v-if="dependActive.includes(item.billId)"><ArrowDownBold /></el-icon>
<el-icon v-else><ArrowUpBold /></el-icon>
</template>
<template #title>
<div class="custom-collapse-title">
<div class="custom-collapse-index">{{ index + 1 }}</div>
<div class="custom-collapse-name one-line-ellipsis">{{ item.title }}</div>
<div class="custom-collapse-name one-line-ellipsis">
<span class="text-click-hover" @click.stop="handleClickDecree(item)">{{ item.title }}</span>
</div>
</div>
</template>
<div class="custom-collapse-content">
......@@ -192,6 +195,20 @@ const handleGetLaws = async () => {
console.error("获取法律依据数据失败", error);
}
};
// 跳转科技法案详情页
const handleClickDecree = decree => {
window.sessionStorage.setItem("billId", decree.billId);
window.sessionStorage.setItem("curTabName", decree.title);
const route = router.resolve({
path: "/billLayout",
query: {
billId: decree.billId
}
});
console.log(route);
window.open(route.href, "_blank");
};
onMounted(() => {
handleGetBackground();
......@@ -261,29 +278,31 @@ onMounted(() => {
background: rgba(255, 255, 255, 1);
display: flex;
align-items: center;
padding: 12px 0;
padding: 18px 0;
.id {
margin-right: 16px;
margin-left: 15px;
width: 24px;
height: 24px;
text-align: center;
line-height: 30px;
border-radius: 12px;
background: #e7f3ff;
color: #0a57a6;
font-size: 15px;
line-height: 24px;
border-radius: 50%;
}
.title {
width: 914px;
line-height: 24px;
margin-left: 13px;
width: 20px;
flex: auto;
line-height: 30px;
}
.open {
width: 16px;
height: 16px;
margin-left: 16px;
margin: 0 16px;
img {
width: 100%;
......@@ -332,7 +351,8 @@ onMounted(() => {
.custom-collapse-title {
position: relative;
.custom-collapse-index {
font-size: 15px;
font-family: Microsoft YaHei;
font-size: var(--font-size-base);
position: absolute;
top: 12px;
left: -32px;
......
src/views/decree/decreeLayout/overview/introduction/index.vue
浏览文件 @ 58537cbd
......@@ -37,9 +37,6 @@
<div class="item">
<div class="item-left">{{ "相关领域：" }}</div>
<div class="item-right tag-box">
<!-- <div class="tag" v-for="(area, index) in basicInfo.areaList" :key="index">
{{ area.industryName }}
</div> -->
<AreaTag v-for="(area, index) in basicInfo.areaList" :key="index" :tagName="area.industryName"></AreaTag>
</div>
</div>
......@@ -120,7 +117,7 @@
<img :src="item.avatar ? item.avatar : DefaultIcon1" alt="" />
</div>
<div class="box3-top-bottom-item-right">
<div class="name" @click="handleClickUser(item)">{{ item.name }}</div>
<div class="name text-click-hover one-line-ellipsis" @click="handleClickUser(item)">{{ item.name }}</div>
<div class="position">{{ item.job }}</div>
</div>
</div>
......@@ -336,22 +333,20 @@ onMounted(() => {
.box1-main {
display: flex;
padding: 0 24px;
.box1-main-left {
width: 395px;
height: 332px;
margin-left: 24px;
img {
width: 100%;
// height: 100%;
}
}
.box1-main-left-img-mock {
width: 240px;
height: 332px;
margin-left: 24px;
background-color: #0b1932;
display: flex;
align-items: center;
......@@ -378,7 +373,8 @@ onMounted(() => {
}
.box1-main-right {
width: 590px;
width: 20px;
flex: auto;
margin-left: 20px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
......@@ -387,24 +383,22 @@ onMounted(() => {
line-height: 24px;
.item {
height: 30px;
display: flex;
margin-bottom: 17px;
margin-bottom: 22px;
.item-left {
width: 100px;
}
.item-right {
width: 470px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 20px;
flex: auto;
}
.tag-box {
display: flex;
gap: 8px;
flex-wrap: wrap;
.tag {
height: 24px;
......@@ -423,6 +417,9 @@ onMounted(() => {
}
.text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: normal !important;
}
}
......@@ -697,10 +694,6 @@ onMounted(() => {
line-height: 24px;
letter-spacing: 0px;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
}
.position {
......
src/views/decree/decreeLayout/overview/measures/index.vue
浏览文件 @ 58537cbd
<template>
<div class="introduction-wrap">
<div class="left">
<div class="page-left">
<div class="box1">
<AnalysisBox title="主要指令" :showAllBtn="false">
<div class="analysis-box">
......@@ -21,7 +21,7 @@
<el-empty v-if="!contentList?.length" style="padding: 60px 0;" description="暂无数据" :image-size="100" />
<div v-for="(section, index) in contentList" :key="index" class="section">
<div class="section-header">
<div class="section-title">({{ simpleNumToChinese(index+1) }}) {{ section.content }}</div>
<div class="section-title text-align-justify" v-html="section.content"></div>
<div class="section-icon">
<img src="./assets/images/open-icon.png" alt="" />
</div>
......@@ -30,19 +30,19 @@
<div class="numbered-list">
<div v-for="(item, itemIndex) in section.slaver" :key="itemIndex" class="list-item">
<div class="list-item-dot">{{itemIndex+1}}.</div>
<div class="list-item-word">{{ item.content }}</div>
<div class="list-item-word" v-html="item.content"></div>
<!-- 渲染二级列表 -->
<div v-if="item.slaver" class="sub-list">
<div v-for="(subItem, subIndex) in item.slaver" :key="subIndex" class="sub-item">
<div class="sub-item-dot">({{subIndex+1}})</div>
<div class="sub-item-word">{{ subItem.content }}</div>
<div class="sub-item-word" v-html="subItem.content"></div>
<!-- 渲染三级列表 -->
<div v-if="subItem.slaver" class="sub-sub-list">
<div v-for="(subSubItem, subSubIndex) in subItem.slaver" :key="subSubIndex" class="sub-sub-item">
<div class="sub-sub-item-dot">{{ALPHABET[subSubIndex%26]}}.</div>
<div class="sub-sub-item-word">{{ subSubItem.content }}</div>
<div class="sub-sub-item-word" v-html="subItem.content"></div>
</div>
</div>
</div>
......@@ -55,17 +55,22 @@
</AnalysisBox>
</div>
</div>
<div class="right">
<div class="page-right">
<div class="box3">
<AnalysisBox title="发布机构" :showAllBtn="false">
<AnalysisBox title="执行机构" :showAllBtn="false">
<div class="box3-top">
<div class="box3-top-top" @click="handleToInstitution(box3TopTopData)">
<div class="organization-list">
<div class="organization-item" v-for="item in organizationInfo.list" :key="item.id">
<ActionButton @click="handleOrganization(item)" :name="item.obb" :type="item.id==organizationInfo.node.id?'active':'normal'" />
</div>
</div>
<div class="box3-top-top" @click="handleToInstitution()">
<div class="left">
<img :src="box3TopTopData.logo ? box3TopTopData.logo : DefaultIcon2" alt="" />
<img :src="organizationInfo.node.logo || DefaultIcon2" alt="" />
</div>
<div class="right">
<div class="name">{{ box3TopTopData.name + " >" }}</div>
<div class="ename">{{ box3TopTopData.eName }}</div>
<div class="name">{{ organizationInfo.node.name + " >" }}</div>
<div class="ename">{{ organizationInfo.node.ename }}</div>
</div>
</div>
<div class="box3-top-bottom">
......@@ -76,17 +81,21 @@
<div class="text">{{ "关键人物" }}</div>
</div>
<div class="box3-top-bottom-main">
<div class="box3-top-bottom-item" v-for="(item, index) in box3TopBottomData" :key="index">
<div class="box3-top-bottom-item" v-for="(item, index) in organizationInfo.node.leaders" :key="index">
<div class="box3-top-bottom-item-left">
<img :src="item.avatar ? item.avatar : DefaultIcon1" alt="" />
<img :src="item.avatar || DefaultIcon1" alt="" />
</div>
<div class="box3-top-bottom-item-right">
<div class="name" @click="handleClickUser(item)">{{ item.name }}</div>
<div class="name one-line-ellipsis text-click-hover" @click="handleClickUser(item)">{{ item.name }}</div>
<div class="position">{{ item.job }}</div>
</div>
</div>
</div>
</div>
<div class="organization-button">
<div class="button-text">查看政令执行情况</div>
<el-icon size="16"><Right /></el-icon>
</div>
</div>
</AnalysisBox>
</div>
......@@ -109,14 +118,14 @@
</template>
<script setup>
import { ref, onMounted } from "vue";
import { ref, onMounted, reactive } from "vue";
import { useRoute } from "vue-router";
import router from "@/router";
import { Search } from '@element-plus/icons-vue'
import { getDecreeIssueOrganization } from "@/api/decree/introduction";
import { getDecreeOrganization } from "@/api/decree/introduction";
import { getDecreeRelatedEntity, getDecreeMainContent } from "@/api/decree/background";
import { getDecreehylyList } from "@/api/decree/home";
import ActionButton from '@/components/base/ActionButton/index.vue'
import DefaultIcon1 from "@/assets/icons/default-icon1.png";
import DefaultIcon2 from "@/assets/icons/default-icon2.png";
import defaultCom from "@/views/coopRestriction/assets/images/default-icon2.png"
......@@ -211,14 +220,16 @@ const contentList = ref([
const ALPHABET = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];
const onMainContentData = async () => {
try {
const res = await getDecreeMainContent({
id: route.query.id,
keyword: commandWord.value,
domainId: areaType.value
});
const keyword = commandWord.value;
const res = await getDecreeMainContent({ id: route.query.id, keyword, domainId: areaType.value });
console.log("主要指令", res);
if (res && res.code === 200) {
contentList.value = res.data;
contentList.value = res.data || [];
contentList.value.forEach((item, index) => { item.content = `(${simpleNumToChinese(index+1)}) ${item.content}` })
if (keyword) {
let word = keyword.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
contentList.value.forEach(item => {onHighlight(word, item)})
}
} else {
contentList.value = []
}
......@@ -227,12 +238,19 @@ const onMainContentData = async () => {
console.error("获取主要指令数据失败:", error);
}
};
// 搜索高亮效果
const onHighlight = (word, row) => {
row.content = String(row.content).replace(new RegExp(word, "gi"), (match) => {
return `<span class="highlight">${match}</span>`;
});
if (row.slaver?.length) {
row.slaver.forEach(item => { onHighlight(word, item) })
}
}
// 数字转中文（支持 0-99 整数）
const simpleNumToChinese = (num) => {
// 1. 基础校验：只处理 0-99 的整数
if (!Number.isInteger(num) || num < 0 || num > 99) {
return '仅支持 0-99 之间的整数';
}
if (!Number.isInteger(num) || num < 0 || num > 99) return '100';
// 2. 定义基础字符
const singleChars = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
const tenChar = '十';
......@@ -271,20 +289,34 @@ const onRelatedEntityData = async () => {
}
};
// 发布机构
const box3TopTopData = ref({
id: "",
logo: "",
name: "",
eName: ""
});
const box3TopBottomData = ref([]);
// 跳转行政机构主页
const handleToInstitution = item => {
// 执行机构
const organizationInfo = reactive({
list : [],
node: {id: "", obb: "", logo: "", name: "", ename: "", leaders: []},
})
const handleGetOrgnization = async () => {
try {
const res = await getDecreeOrganization({id: route.query.id});
console.log("执行机构", res);
if (res.code === 200 && res.data?.length) {
organizationInfo.list = res.data;
organizationInfo.node = res.data[0];
}
} catch (error) {
organizationInfo.node = {id: "", obb: "", logo: "", name: "", ename: "", leaders: []};
console.error("获取执行机构数据失败", error);
}
};
// 切换执行机构
const handleOrganization = (node) => {
organizationInfo.node = node;
};
// 跳转机构主页
const handleToInstitution = () => {
const curRoute = router.resolve({
path: "/institution",
query: {
id: item.id
id: organizationInfo.node.id
}
});
window.open(curRoute.href, "_blank");
......@@ -300,21 +332,6 @@ const handleClickUser = item => {
});
window.open(routeData.href, "_blank");
};
const handleGetOrgnization = async () => {
try {
const res = await getDecreeIssueOrganization({id: route.query.id});
console.log("发布机构", res);
if (res.code === 200 && res.data) {
let { id, image, name, ename } = res.data
Object.assign(box3TopTopData.value, { id, logo: image, name, eName: ename });
box3TopBottomData.value = res.data.personList;
}
} catch (error) {
box3TopTopData.value = { id: "", logo: "", name: "", eName: "" };
box3TopBottomData.value = [];
console.error("执行机构error", error);
}
};
onMounted(() => {
handleGetAreaList();
......@@ -325,13 +342,19 @@ onMounted(() => {
</script>
<style lang="scss" scoped>
.analysis-content {
:deep(span.highlight) {
background-color: #ffff00;
}
}
.introduction-wrap {
display: flex;
width: 1600px;
padding: 16px 0;
gap: 16px;
.left {
.page-left {
width: 20px;
flex: auto;
......@@ -387,7 +410,6 @@ onMounted(() => {
.section-title {
font-size: 18px;
line-height: 30px;
font-weight: 600;
letter-spacing: 1px;
width: 20px;
flex: auto;
......@@ -457,7 +479,7 @@ onMounted(() => {
}
}
.right {
.page-right {
width: 520px;
display: flex;
flex-direction: column;
......@@ -466,10 +488,34 @@ onMounted(() => {
.box3 {
.box3-top {
margin-top: 2px;
padding: 0 22px 20px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
.organization-list {
display: flex;
flex-wrap: wrap;
margin-bottom: 16px;
gap: 8px 16px;
}
.organization-button {
height: 36px;
background-color: var(--color-primary-100);
color: var(--bg-white-100);
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
cursor: pointer;
.button-text {
margin-right: 8px;
font-family: Microsoft YaHei;
font-size: 16px;
line-height: 16px;
}
}
.box3-top-top {
width: 473px;
height: 88px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
......@@ -477,42 +523,13 @@ onMounted(() => {
background: rgba(247, 248, 249, 1);
display: flex;
align-items: center;
margin: 0 auto;
position: relative;
cursor: pointer;
.more {
position: absolute;
right: 17px;
top: 17px;
display: flex;
gap: 3px;
.text {
height: 16px;
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 16px;
}
.icon {
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
}
.left {
width: 64px;
height: 64px;
margin-left: 17px;
font-size: 0px;
img {
width: 100%;
height: 100%;
......@@ -520,7 +537,8 @@ onMounted(() => {
}
.right {
width: 370px;
width: 20px;
flex: auto;
margin-left: 15px;
.name {
......@@ -545,9 +563,7 @@ onMounted(() => {
}
.box3-top-bottom {
width: 473px;
height: 193px;
margin: 0 auto;
.box3-top-bottom-header {
height: 40px;
......@@ -624,10 +640,6 @@ onMounted(() => {
line-height: 24px;
letter-spacing: 0px;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
}
.position {
......
src/views/decree/decreeOriginal/index.vue
浏览文件 @ 58537cbd
......@@ -135,7 +135,6 @@ onMounted(() => {
display: flex;
flex-direction: column;
align-items: center;
.header-main {
padding: 17px 0;
width: 100%;
......
vite.config.js
浏览文件 @ 58537cbd
......@@ -39,6 +39,9 @@ export default defineConfig({
}
}
},
publicDir: 'public', // 指定 public 目录的位置
// 服务器的根路径
base: '/',
server: {
host: '0.0.0.0', // 监听所有网络接口
port: 3000,
......@@ -53,7 +56,7 @@ export default defineConfig({
'/api': {
target: 'http://8.140.26.4:9085/',
// target: 'http://192.168.0.5:28080/',
// target: 'http://192.168.0.6:28080/',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
},
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论