feat: export chart

2026-11-08 01:06:59 +08:00 · 2025-08-04 19:51:42 +08:00
parent 0b12b797c5
commit 3fc3f5d505
12 changed files with 250 additions and 45 deletions
@@ -1,12 +1,16 @@
+import datetime
 import traceback

+import numpy as np
+import pandas as pd
 from fastapi import APIRouter, HTTPException
 from fastapi.responses import StreamingResponse

 from apps.chat.curd.chat import list_chats, get_chat_with_records, create_chat, rename_chat, \
    delete_chat, get_chat_chart_data, get_chat_predict_data
-from apps.chat.models.chat_model import CreateChat, ChatRecord, RenameChat, ChatQuestion
+from apps.chat.models.chat_model import CreateChat, ChatRecord, RenameChat, ChatQuestion, ExcelData
 from apps.chat.task.llm import LLMService
+from common.core.config import settings
 from common.core.deps import CurrentAssistant, SessionDep, CurrentUser

 router = APIRouter(tags=["Data Q&A"], prefix="/chat")
@@ -183,3 +187,27 @@ async def analysis_or_predict(session: SessionDep, current_user: CurrentUser, ch
        )

    return StreamingResponse(llm_service.await_result(), media_type="text/event-stream")
+
+
+@router.post("/excel/export")
+async def export_excel(excel_data: ExcelData):
+    _fields_list = []
+    data = []
+    for _data in excel_data.data:
+        _row = []
+        for field in excel_data.axis:
+            _row.append(_data.get(field.value))
+        data.append(_row)
+    for field in excel_data.axis:
+        _fields_list.append(field.name)
+    df = pd.DataFrame(np.array(data), columns=_fields_list)
+
+    file_name = f"{excel_data.name}-{datetime.datetime.now().strftime('%Y-%m-%d_%H-%M-%S')}.xlsx"
+
+    file_path = f'{(settings.EXCEL_PATH if settings.EXCEL_PATH[-1] == "/" else (settings.EXCEL_PATH + "/"))}{file_name}'
+
+    file_download_path = f'{(settings.SERVER_EXCEL_HOST if settings.SERVER_EXCEL_HOST[-1] == "/" else (settings.SERVER_EXCEL_HOST + "/"))}{file_name}'
+
+    df.to_excel(file_path, index=False)
+
+    return file_download_path
@@ -180,3 +180,15 @@ class McpQuestion(BaseModel):
    question: str = Body(description='用户提问')
    chat_id: int = Body(description='会话ID')
    token: str = Body(description='token')
+
+
+class AxisObj(BaseModel):
+    name: str = ''
+    value: str = ''
+    type: str | None = None
+
+
+class ExcelData(BaseModel):
+    axis: list[AxisObj] = []
+    data: list[dict] = []
+    name: str = 'Excel'
@@ -4,10 +4,9 @@ from typing import List, Optional

 from fastapi import HTTPException
 from sqlalchemy import and_, text, func
-
 from sqlmodel import select

-
+from apps.datasource.crud.permission import get_column_permission_fields, get_row_permission_filters, is_normal_user
 from apps.datasource.utils.utils import aes_decrypt
 from apps.db.constant import DB
 from apps.db.db import get_engine, get_tables, get_fields, exec_sql
@@ -20,7 +19,7 @@ from ..crud.field import delete_field_by_ds_id, update_field
 from ..crud.table import delete_table_by_ds_id, update_table
 from ..models.datasource import CoreDatasource, CreateDatasource, CoreTable, CoreField, ColumnSchema, TableObj, \
    DatasourceConf, TableAndFields
-from apps.datasource.crud.permission import get_column_permission_fields, get_row_permission_filters, is_normal_user
+

 def get_datasource_list(session: SessionDep, user: CurrentUser, oid: Optional[int] = None) -> List[CoreDatasource]:
    current_oid = user.oid if user.oid is not None else 1
@@ -249,11 +248,13 @@ def preview(session: SessionDep, current_user: CurrentUser, id: int, data: Table
    f_list = [f for f in data.fields if f.checked]
    if is_normal_user(current_user):
        # column is checked, and, column permission for data.fields
-        f_list = get_column_permission_fields(session=session, current_user=current_user, table=data.table, fields=f_list) or f_list
+        f_list = get_column_permission_fields(session=session, current_user=current_user, table=data.table,
+                                              fields=f_list) or f_list

        # row permission tree
        where_str = ''
-        filter_mapping = get_row_permission_filters(session=session, current_user=current_user, ds=ds, tables=None, single_table=data.table)
+        filter_mapping = get_row_permission_filters(session=session, current_user=current_user, ds=ds, tables=None,
+                                                    single_table=data.table)
        if filter_mapping:
            mapping_dict = filter_mapping[0]
            where_str = mapping_dict.get('filter')
@@ -325,13 +326,12 @@ def get_table_obj_by_ds(session: SessionDep, current_user: CurrentUser, ds: Core
        fields = session.query(CoreField).filter(and_(CoreField.table_id == table.id, CoreField.checked == True)).all()

        # do column permissions, filter fields
-        fields = get_column_permission_fields(session=session, current_user=current_user, table=table, fields=fields) or fields
+        fields = get_column_permission_fields(session=session, current_user=current_user, table=table,
+                                              fields=fields) or fields
        _list.append(TableAndFields(schema=schema, table=table, fields=fields))
    return _list


-    
-
 def get_table_schema(session: SessionDep, current_user: CurrentUser, ds: CoreDatasource) -> str:
    schema_str = ""
    table_objs = get_table_obj_by_ds(session=session, current_user=current_user, ds=ds)
@@ -360,4 +360,5 @@ def get_table_schema(session: SessionDep, current_user: CurrentUser, ds: CoreDat
                field_list.append(f"({field.field_name}:{field.field_type}, {field_comment})")
        schema_str += ",\n".join(field_list)
        schema_str += '\n]\n'
+    # todo 外键
    return schema_str
@@ -79,8 +79,10 @@ class Settings(BaseSettings):
        )

    MCP_IMAGE_PATH: str = '/opt/sqlbot/images'
+    EXCEL_PATH: str
    MCP_IMAGE_HOST: str = 'http://localhost:3000'
    SERVER_IMAGE_HOST: str
+    SERVER_EXCEL_HOST: str

 settings = Settings()  # type: ignore
 print(settings)
@@ -44,6 +44,9 @@ app = FastAPI(
    lifespan=lifespan
 )

+app.mount("/excel", StaticFiles(directory=settings.EXCEL_PATH), name="excel")
+
+
 mcp_app = FastAPI()
 # mcp server, images path
 mcp_app.mount("/images", StaticFiles(directory=settings.MCP_IMAGE_PATH), name="images")
@@ -329,4 +329,5 @@ export const chatApi = {
    return request.fetchStream(`/chat/recommend_questions/${record_id}`, {}, controller)
  },
  checkLLMModel: () => request.get('/system/aimodel/default', { requestOptions: { silent: true } }),
+  export2Excel: (data: any) => request.post('/chat/excel/export', data),
 }
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.66666 1.66667C2.66666 1.29848 2.96513 1 3.33332 1H9.86192C9.95032 1 10.0351 1.03512 10.0976 1.09763L13.2357 4.2357C13.2982 4.29821 13.3333 4.383 13.3333 4.4714V14.3333C13.3333 14.7015 13.0348 15 12.6667 15H3.33332C2.96513 15 2.66666 14.7015 2.66666 14.3333V1.66667Z" fill="#34C724"/>
+<path d="M10 1.03003C10.036 1.04641 10.0691 1.06922 10.0976 1.09772L13.2357 4.23579C13.2642 4.2643 13.287 4.29743 13.3034 4.33342H10.6667C10.2985 4.33342 10 4.03495 10 3.66676V1.03003Z" fill="#2CA91F"/>
+<path d="M7.53869 9.06384L5.55469 11.9998H6.40269L7.98669 9.63984L9.52269 11.9998H10.4507L8.44269 9.06384L10.3307 6.28784H9.48269L7.99469 8.51984L6.57069 6.28784H5.65869L7.53869 9.06384Z" fill="white"/>
+</svg>
@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.66666 1.66667C2.66666 1.29848 2.96513 1 3.33332 1H9.86192C9.95032 1 10.0351 1.03512 10.0976 1.09763L13.2357 4.2357C13.2982 4.29821 13.3333 4.383 13.3333 4.4714V14.3333C13.3333 14.7015 13.0348 15 12.6667 15H3.33332C2.96513 15 2.66666 14.7015 2.66666 14.3333V1.66667Z" fill="#14C0FF"/>
+<path d="M10 1.03003C10.036 1.04641 10.0691 1.06922 10.0976 1.09772L13.2357 4.23579C13.2642 4.2643 13.287 4.29743 13.3034 4.33342H10.6667C10.2985 4.33342 10 4.03495 10 3.66676V1.03003Z" fill="#11A3D9"/>
+<path d="M5.66666 8C6.21894 8 6.66666 7.55228 6.66666 7C6.66666 6.44772 6.21894 6 5.66666 6C5.11437 6 4.66666 6.44772 4.66666 7C4.66666 7.55228 5.11437 8 5.66666 8Z" fill="white"/>
+<path d="M11.1392 7.46583C11.2108 7.39418 11.3333 7.44493 11.3333 7.54625V12.0322C11.3333 12.095 11.2824 12.146 11.2196 12.146H6.73361L6.72926 12.1459H4.78062C4.67929 12.1459 4.62855 12.0234 4.7002 11.9517L7.18293 9.469C7.22735 9.42458 7.29936 9.42458 7.34377 9.469L8.23989 10.3651L11.1392 7.46583Z" fill="white"/>
+</svg>
@@ -12,7 +12,9 @@ import ICON_PIE from '@/assets/svg/chart/icon_pie_outlined.svg'
 import ICON_TABLE from '@/assets/svg/chart/icon_form_outlined.svg'
 import icon_sql_outlined from '@/assets/svg/icon_sql_outlined.svg'
 import icon_export_outlined from '@/assets/svg/icon_export_outlined.svg'
-// import icon_into_item_outlined from '@/assets/svg/icon_into-item_outlined.svg'
+import icon_file_image_colorful from '@/assets/svg/icon_file-image_colorful.svg'
+import icon_file_excel_colorful from '@/assets/svg/icon_file-excel_colorful.svg'
+import icon_into_item_outlined from '@/assets/svg/icon_into-item_outlined.svg'
 import icon_window_max_outlined from '@/assets/svg/icon_window-max_outlined.svg'
 import icon_window_mini_outlined from '@/assets/svg/icon_window-mini_outlined.svg'
 import icon_copy_outlined from '@/assets/svg/icon_copy_outlined.svg'
@@ -20,6 +22,8 @@ import { useI18n } from 'vue-i18n'
 import SQLComponent from '@/views/chat/component/SQLComponent.vue'
 import { useAssistantStore } from '@/stores/assistant'
 import AddViewDashboard from '@/views/dashboard/common/AddViewDashboard.vue'
+import html2canvas from 'html2canvas'
+import { chatApi } from '@/api/chat'

 const props = withDefaults(
  defineProps<{
@@ -55,6 +59,8 @@ const dataObject = computed<{
 const assistantStore = useAssistantStore()
 const isAssistant = computed(() => assistantStore.getAssistant)

+const chartId = computed(() => props.message?.record?.id + (props.enlarge ? '-fullscreen' : ''))
+
 const data = computed(() => {
  if (props.isPredict) {
    let _list = []
@@ -191,27 +197,27 @@ function showSql() {
  sqlShow.value = true
 }

-// function addToDashboard() {
-//   const recordeInfo = {
-//     id: '1-1',
-//     data: {
-//       data: data.value,
-//     },
-//     chart: {},
-//   }
-//   // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
-//   const chartBaseInfo = JSON.parse(props.message?.record?.chart)
-//   recordeInfo['chart'] = {
-//     type: chartBaseInfo.type,
-//     title: chartBaseInfo.title,
-//     columns: chartBaseInfo.columns,
-//     xAxis: chartBaseInfo.axis?.x ? [chartBaseInfo.axis.x] : [],
-//     yAxis: chartBaseInfo.axis?.y ? [chartBaseInfo.axis.y] : [],
-//     series: chartBaseInfo.axis?.series ? [chartBaseInfo.axis.series] : [],
-//   }
-//   // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
-//   addViewRef.value?.optInit(recordeInfo)
-// }
+function addToDashboard() {
+  const recordeInfo = {
+    id: '1-1',
+    data: {
+      data: data.value,
+    },
+    chart: {},
+  }
+  // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  const chartBaseInfo = JSON.parse(props.message?.record?.chart)
+  recordeInfo['chart'] = {
+    type: chartBaseInfo.type,
+    title: chartBaseInfo.title,
+    columns: chartBaseInfo.columns,
+    xAxis: chartBaseInfo.axis?.x ? [chartBaseInfo.axis.x] : [],
+    yAxis: chartBaseInfo.axis?.y ? [chartBaseInfo.axis.y] : [],
+    series: chartBaseInfo.axis?.series ? [chartBaseInfo.axis.series] : [],
+  }
+  // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  addViewRef.value?.optInit(recordeInfo)
+}

 function copy() {
  if (props.message?.record?.sql) {
@@ -219,6 +225,37 @@ function copy() {
    ElMessage.info(t('qa.copied'))
  }
 }
+
+const exportRef = ref()
+
+function exportToExcel() {
+  chatApi
+    .export2Excel({ ...chartRef.value?.getExcelData(), name: chartObject.value.title })
+    .then((res) => {
+      console.log('download_path: ' + res)
+      //todo download
+    })
+  exportRef.value?.hide()
+}
+function exportToImage() {
+  const obj = document.getElementById('chart-component-' + chartId.value)
+  if (obj) {
+    html2canvas(obj).then((canvas) => {
+      canvas.toBlob(function (blob) {
+        if (blob) {
+          const link = document.createElement('a')
+          link.download = (chartObject.value.title ?? 'chart') + '.png' // Specify filename
+          link.href = URL.createObjectURL(blob)
+          document.body.appendChild(link) // Append to body to make it clickable
+          link.click() // Programmatically click the link
+          document.body.removeChild(link) // Clean up
+          URL.revokeObjectURL(link.href) // Release the object URL
+        }
+      }, 'image/png')
+    })
+  }
+  exportRef.value?.hide()
+}
 </script>

 <template>
@@ -270,17 +307,48 @@ function copy() {
            </el-button>
          </el-tooltip>
        </div>
-        <div v-if="false">
-          <!--    todo      -->
-          <el-tooltip effect="dark" :content="t('chat.export_to')" placement="top">
-            <el-button class="tool-btn" text>
-              <el-icon size="16">
-                <icon_export_outlined />
-              </el-icon>
-            </el-button>
-          </el-tooltip>
+        <div>
+          <el-popover
+            ref="exportRef"
+            trigger="click"
+            popper-class="export_to_select"
+            placement="bottom"
+          >
+            <template #reference>
+              <div>
+                <el-tooltip effect="dark" :content="t('chat.export_to')" placement="top">
+                  <el-button class="tool-btn" text>
+                    <el-icon size="16">
+                      <icon_export_outlined />
+                    </el-icon>
+                  </el-button>
+                </el-tooltip>
+              </div>
+            </template>
+            <div class="popover">
+              <div class="popover-content">
+                <div class="title">{{ t('chat.export_to') }}</div>
+                <div class="popover-item" @click="exportToExcel">
+                  <el-icon size="16">
+                    <icon_file_excel_colorful />
+                  </el-icon>
+                  <div class="model-name">{{ t('chat.excel') }}</div>
+                </div>
+                <div
+                  v-if="currentChartType !== 'table'"
+                  class="popover-item"
+                  @click="exportToImage"
+                >
+                  <el-icon size="16">
+                    <icon_file_image_colorful />
+                  </el-icon>
+                  <div class="model-name">{{ t('chat.picture') }}</div>
+                </div>
+              </div>
+            </div>
+          </el-popover>
        </div>
-        <!-- <div>
+        <div>
          <el-tooltip effect="dark" :content="t('chat.add_to_dashboard')" placement="top">
            <el-button class="tool-btn" text @click="addToDashboard">
              <el-icon size="16">
@@ -288,7 +356,7 @@ function copy() {
              </el-icon>
            </el-button>
          </el-tooltip>
-        </div> -->
+        </div>
        <div class="divider" />
        <div v-if="!enlarge">
          <el-tooltip effect="dark" :content="t('chat.full_screen')" placement="top">
@@ -313,7 +381,7 @@ function copy() {

    <div v-if="message?.record?.chart" class="chart-block">
      <DisplayChartBlock
-        :id="message.record.id + (enlarge ? '-fullscreen' : '')"
+        :id="chartId"
        ref="chartRef"
        :chart-type="chartType"
        :message="message"
@@ -377,6 +445,70 @@ function copy() {
 .chart-sql-drawer-body {
  padding: 24px;
 }
+
+.export_to_select.export_to_select {
+  padding: 4px 0;
+  width: 120px !important;
+  min-width: 120px !important;
+  box-shadow: 0px 4px 8px 0px #1f23291a;
+  border: 1px solid #dee0e3;
+
+  .popover {
+    .popover-content {
+      padding: 0 4px;
+      max-height: 300px;
+      overflow-y: auto;
+
+      .title {
+        width: 100%;
+        height: 32px;
+        margin-bottom: 2px;
+        display: flex;
+        align-items: center;
+        padding-left: 8px;
+        color: #8f959e;
+      }
+    }
+    .popover-item {
+      height: 32px;
+      display: flex;
+      align-items: center;
+      padding-left: 12px;
+      padding-right: 8px;
+      margin-bottom: 2px;
+      position: relative;
+      border-radius: 4px;
+      cursor: pointer;
+      &:last-child {
+        margin-bottom: 0;
+      }
+      &:hover {
+        background: #1f23291a;
+      }
+
+      .model-name {
+        margin-left: 8px;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 22px;
+        max-width: 220px;
+      }
+
+      .done {
+        margin-left: auto;
+        display: none;
+      }
+
+      &.isActive {
+        color: var(--ed-color-primary);
+
+        .done {
+          display: block;
+        }
+      }
+    }
+  }
+}
 </style>
 <style scoped lang="less">
 .chart-component-container {
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import icon_done_outlined from '@/assets/svg/icon_done_outlined.svg'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import icon_expand_down_filled from '@/assets/svg/icon_down_outlined.svg'
 const props = defineProps({
  chartTypeList: {
@@ -34,13 +34,15 @@ const firstItem = () => {
  }
 }
 const emits = defineEmits(['typeChange'])
+const selectRef = ref()
 const handleDefaultChatChange = (val: any) => {
  emits('typeChange', val.value)
+  selectRef.value?.hide()
 }
 </script>

 <template>
-  <el-popover trigger="click" popper-class="chat-type_select" placement="bottom">
+  <el-popover ref="selectRef" trigger="click" popper-class="chat-type_select" placement="bottom">
    <template #reference>
      <div
        class="chat-select_type"
@@ -62,6 +62,13 @@ function destroyChart() {
  }
 }

+function getExcelData() {
+  return {
+    axis: axis.value,
+    data: params.data,
+  }
+}
+
 useEmitt({
  name: 'view-render-all',
  callback: renderChart,
@@ -75,6 +82,7 @@ useEmitt({
 defineExpose({
  renderChart,
  destroyChart,
+  getExcelData,
 })

 onMounted(() => {
@@ -67,9 +67,14 @@ function getViewInfo() {
    data: { data: props.data },
  }
 }
+function getExcelData() {
+  return chartRef.value?.getExcelData()
+}
+
 defineExpose({
  onTypeChange,
  getViewInfo,
+  getExcelData,
 })
 </script>