22import ChartComponent from ' @/views/chat/component/ChartComponent.vue'
33import icon_window_mini_outlined from ' @/assets/svg/icon_window-mini_outlined.svg'
44import SqViewDisplay from ' @/views/dashboard/components/sq-view/index.vue'
5- defineProps ({
5+ const props = defineProps ({
66 viewInfo: {
77 type: Object ,
88 required: true ,
@@ -14,20 +14,80 @@ defineProps({
1414 },
1515})
1616
17- import { ref } from ' vue'
17+ import { computed , nextTick , ref } from ' vue'
1818import { useI18n } from ' vue-i18n'
19+ import ChartPopover from ' @/views/chat/chat-block/ChartPopover.vue'
20+ import ICON_TABLE from ' @/assets/svg/chart/icon_form_outlined.svg'
21+ import ICON_COLUMN from ' @/assets/svg/chart/icon_dashboard_outlined.svg'
22+ import ICON_BAR from ' @/assets/svg/chart/icon_bar_outlined.svg'
23+ import ICON_LINE from ' @/assets/svg/chart/icon_chart-line.svg'
24+ import ICON_PIE from ' @/assets/svg/chart/icon_pie_outlined.svg'
25+ import type { ChartTypes } from ' @/views/chat/component/BaseChart.ts'
1926const { t } = useI18n ()
2027const chartRef = ref (null )
28+ const currentChartType = ref <ChartTypes | undefined >(undefined )
29+
2130const renderChart = () => {
2231 // @ts-expect-error eslint-disable-next-line @typescript-eslint/no-unused-expressions
2332 // eslint-disable-next-line @typescript-eslint/no-unused-expressions
2433 chartRef .value ?.renderChart
2534}
35+
2636const enlargeDialogVisible = ref (false )
2737
2838const enlargeView = () => {
2939 enlargeDialogVisible .value = true
3040}
41+
42+ const chartTypeList = computed (() => {
43+ const _list = []
44+ if (props .viewInfo .chart ) {
45+ switch (props .viewInfo .chart .type ) {
46+ case ' table' :
47+ break
48+ case ' column' :
49+ case ' bar' :
50+ case ' line' :
51+ _list .push ({
52+ value: ' column' ,
53+ name: t (' chat.chart_type.column' ),
54+ icon: ICON_COLUMN ,
55+ })
56+ _list .push ({
57+ value: ' bar' ,
58+ name: t (' chat.chart_type.bar' ),
59+ icon: ICON_BAR ,
60+ })
61+ _list .push ({
62+ value: ' line' ,
63+ name: t (' chat.chart_type.line' ),
64+ icon: ICON_LINE ,
65+ })
66+ break
67+ case ' pie' :
68+ _list .push ({
69+ value: ' pie' ,
70+ name: t (' chat.chart_type.pie' ),
71+ icon: ICON_PIE ,
72+ })
73+ }
74+ }
75+
76+ return _list
77+ })
78+
79+ function changeTable() {
80+ onTypeChange (' table' )
81+ }
82+
83+ function onTypeChange(val : any ) {
84+ // eslint-disable-next-line vue/no-mutating-props
85+ props .viewInfo .chart .type = val
86+ nextTick (() => {
87+ // @ts-expect-error eslint-disable-next-line @typescript-eslint/no-unused-expressions
88+ chartRef .value ?.renderChart ()
89+ })
90+ }
3191defineExpose ({
3292 renderChart ,
3393 enlargeView ,
@@ -40,6 +100,32 @@ defineExpose({
40100 <div class =" title" >
41101 {{ viewInfo.chart.title }}
42102 </div >
103+ <div class =" buttons-bar" >
104+ <div class =" chart-select-container" >
105+ <el-tooltip effect =" dark" :content =" t('chat.type')" placement =" top" >
106+ <ChartPopover
107+ v-if =" chartTypeList.length > 0"
108+ :chart-type-list =" chartTypeList"
109+ :chart-type =" viewInfo.chartType"
110+ :title =" t('chat.type')"
111+ @type-change =" onTypeChange"
112+ ></ChartPopover >
113+ </el-tooltip >
114+ <el-tooltip effect =" dark" :content =" t('chat.chart_type.table')" placement =" top" >
115+ <el-button
116+ class =" tool-btn"
117+ :class =" { 'chart-active': currentChartType === 'table' }"
118+ text
119+ @click =" changeTable"
120+ >
121+ <el-icon size =" 16" >
122+ <ICON _TABLE />
123+ </el-icon >
124+ </el-button >
125+ </el-tooltip >
126+ </div >
127+ <div class =" divider" />
128+ </div >
43129 </div >
44130 <div class =" chart-show-area" >
45131 <ChartComponent
@@ -109,6 +195,7 @@ defineExpose({
109195 .header-bar {
110196 height : 32px ;
111197 display : flex ;
198+ margin-bottom : 16px ;
112199
113200 align-items : center ;
114201 flex-direction : row ;
@@ -172,9 +259,8 @@ defineExpose({
172259 display : flex ;
173260 flex-direction : row ;
174261 align-items : center ;
175-
176262 gap : 16px ;
177-
263+ margin-right : 36 px ;
178264 .divider {
179265 width : 1px ;
180266 height : 16px ;
@@ -221,4 +307,51 @@ defineExpose({
221307 width : 100% ;
222308 height : calc (100% - 32px );
223309}
310+
311+ .buttons-bar {
312+ display : flex ;
313+ flex-direction : row ;
314+ align-items : center ;
315+
316+ gap : 16px ;
317+
318+ .divider {
319+ width : 1px ;
320+ height : 16px ;
321+ border-left : 1px solid rgba (31 , 35 , 41 , 0.15 );
322+ }
323+ }
324+
325+ .chart-select-container {
326+ padding : 3px ;
327+ display : flex ;
328+ flex-direction : row ;
329+ gap : 4px ;
330+ border-radius : 6px ;
331+
332+ border : 1px solid rgba (217 , 220 , 223 , 1 );
333+
334+ .chart-select {
335+ min-width : 40px ;
336+ width : 40px ;
337+ height : 24px ;
338+
339+ :deep(.ed-select__wrapper ) {
340+ padding : 4px ;
341+ min-height : 24px ;
342+ box-shadow : unset ;
343+ border-radius : 6px ;
344+
345+ & :hover {
346+ background : rgba (31 , 35 , 41 , 0.1 );
347+ }
348+ & :active {
349+ background : rgba (31 , 35 , 41 , 0.1 );
350+ }
351+ }
352+ :deep(.ed-select__caret ) {
353+ font-size : 12px !important ;
354+ }
355+ }
356+ }
224357 </style >
0 commit comments