Skip to content

R
risk-monitor
提交 3dea68fc authored 作者: coderBryanFu's avatar coderBryanFu
浏览文件
操作

feat:新增ai总结按钮和ai智能总结pane通用组件

上级 c24ba1c1
显示空白字符变更
内嵌 并排
正在显示 包含 475 行增加 和 11 行删除
src/components/base/Ai/AiButton/ai-icon.svg 0 → 100644
浏览文件 @ 3dea68fc
<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
浏览文件 @ 3dea68fc
<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
浏览文件 @ 3dea68fc
<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
浏览文件 @ 3dea68fc
<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/router/dataLibrary/thinkTank.js
浏览文件 @ 3dea68fc
......@@ -8,7 +8,7 @@ const dataThinkTankRoutes = [
name: "DataThinkTank",
component: ThinkTank,
meta: {
title: '科技智库', // 显示在tag上的文字
title: '美国科技智库', // 显示在tag上的文字
affix: false, // 是否为固定tag（首页通常设置为true，不可关闭）
keepAlive: true // 是否需要缓存
}
......
src/router/index.js
浏览文件 @ 3dea68fc
......@@ -34,6 +34,9 @@ const routes = [
path: "/dataLibrary",
name: "DataLibrary",
component: DataLibrary,
meta: {
title: '数据资源库'
},
children: [
...dataRoutes
]
......
src/styles/components/Ai/AiInfo/index.vue 0 → 100644
浏览文件 @ 3dea68fc
<template>
<el-row class="wrapper layout-grid-line">
<el-col :span="span">
<pre>
{{
`
import AiButton from '@/components/base/AiButton/index.vue'
<AiButton />
`
}}
</pre>
<div class="chart-box">
<div class="btn-box">
<AiButton />
</div>
</div>
</el-col>
<el-col :span="span">
<pre>
{{
`
import AiPane from '@/components/base/AiPane/index.vue'
<AiPane :aiContent="aiContent" />
`
}}
</pre>
<div class="chart-box">
<div class="content-box">
<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 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/index.vue
浏览文件 @ 3dea68fc
......@@ -43,6 +43,9 @@
<el-tab-pane label="时间选择框" lazy>
<TimeTabPane />
</el-tab-pane>
<el-tab-pane label="Ai智能总结" lazy>
<AiInfo />
</el-tab-pane>
<el-tab-pane label="层级关系图" lazy>
<GraphChart />
</el-tab-pane>
......@@ -83,6 +86,7 @@ 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'
</script>
<style lang="scss" scoped>
......
src/views/dataLibrary/components/bill/countryBill/index.vue
浏览文件 @ 3dea68fc
......@@ -11,13 +11,16 @@
{{ `共 ${totalNum} 条数据` }}
</div>
</div>
<div class="content-box"></div>
<div class="content-box">
<ChartBox chartTitle="美国会法案提出数量随时间变化趋势" />
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
import ChartBox from '../../chartBox/index.vue'
// 图表/数据
const isShowChart = ref(true)
......
src/views/dataLibrary/components/chartBox/assets/icons/bar-active.svg 0 → 100644
浏览文件 @ 3dea68fc
<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/chartBox/assets/icons/bar.svg 0 → 100644
浏览文件 @ 3dea68fc
<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/chartBox/assets/icons/download.svg 0 → 100644
浏览文件 @ 3dea68fc
<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/chartBox/assets/icons/line-active.svg 0 → 100644
浏览文件 @ 3dea68fc
<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/chartBox/assets/icons/line.svg 0 → 100644
浏览文件 @ 3dea68fc
<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/chartBox/assets/icons/pie-active.svg 0 → 100644
浏览文件 @ 3dea68fc
<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/chartBox/assets/icons/pie.svg 0 → 100644
浏览文件 @ 3dea68fc
<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/chartBox/assets/icons/radar-active.svg 0 → 100644
浏览文件 @ 3dea68fc
<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/chartBox/assets/icons/radar.svg 0 → 100644
浏览文件 @ 3dea68fc
<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/chartBox/index.vue 0 → 100644
浏览文件 @ 3dea68fc
<template>
<div class="chart-wrapper">
<div class="header">
<div class="header-left">
<div class="chart-item" v-for="item, index in chartItemList" :key="index">
<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" id="chart-box"></div>
<div class="tip-box"></div>
</div>
</div>
</template>
<script setup>
import { ref } 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'
const chartItemList = ref([
{
name: '折线图',
active: true,
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 props = defineProps({
chartTitle: {
type: String,
default: ''
}
})
</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;
height: 12px;
color: var(--text-primary-80-color);
}
.header-right {
width: 32px;
height: 32px;
img {
width: 100%;
height: 100%;
}
}
}
}
</style>
\ No newline at end of file
src/views/dataLibrary/index.vue
浏览文件 @ 3dea68fc
......@@ -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">
<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>
......@@ -94,7 +100,7 @@ router.beforeEach((to, from, next) => {
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
})
......@@ -342,7 +348,8 @@ const openedTabList = computed(() => {
})
const handleClickTab = (tab) => {
openedTabList.value.forEach(val => {
const tagsViewStore = useTagsViewStore()
tagsViewStore.visitedViews.forEach(val => {
val.active = false
})
tab.active = true
......@@ -353,30 +360,113 @@ const handleClickTab = (tab) => {
)
siderList.value.forEach(val => {
val.active = 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
return
}
})
}
})
}
// 关闭当前标签页
const handleCloseCurTab = (tab, index) => {
let activeTab
if (!tab.active) {
const tagsViewStore = useTagsViewStore()
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) {
const tagsViewStore = useTagsViewStore()
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 {
const tagsViewStore = useTagsViewStore()
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("当前功能正在开发中，敬请期待！");
};
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论