Add File
This commit is contained in:
337
frontend/src/views/dashboard/editor/ChatChartSelection.vue
Normal file
337
frontend/src/views/dashboard/editor/ChatChartSelection.vue
Normal file
@@ -0,0 +1,337 @@
|
|||||||
|
<template>
|
||||||
|
<el-drawer
|
||||||
|
v-model="dialogShow"
|
||||||
|
direction="btt"
|
||||||
|
size="90%"
|
||||||
|
trigger="click"
|
||||||
|
:title="t('dashboard.add_chart')"
|
||||||
|
modal-class="custom-drawer"
|
||||||
|
:destroy-on-close="true"
|
||||||
|
@closed="handleClose()"
|
||||||
|
>
|
||||||
|
<el-container class="chat-container">
|
||||||
|
<el-aside class="chat-container-left">
|
||||||
|
<el-container class="chat-container-right-container">
|
||||||
|
<el-main class="chat-list">
|
||||||
|
<DashboardChatList
|
||||||
|
v-model:loading="loading"
|
||||||
|
:current-chat-id="currentChatId"
|
||||||
|
:chat-list="chatList"
|
||||||
|
@chat-selected="onClickHistory"
|
||||||
|
/>
|
||||||
|
</el-main>
|
||||||
|
</el-container>
|
||||||
|
</el-aside>
|
||||||
|
<el-container :loading="loading">
|
||||||
|
<el-main v-if="!loading" class="chat-record-list">
|
||||||
|
<el-scrollbar ref="chatListRef" style="padding: 8px">
|
||||||
|
<chart-selection
|
||||||
|
v-for="(viewInfo, index) in chartInfoList"
|
||||||
|
:key="index"
|
||||||
|
:view-info="viewInfo"
|
||||||
|
:select-change="(value: boolean) => selectChange(value, viewInfo)"
|
||||||
|
>
|
||||||
|
</chart-selection>
|
||||||
|
</el-scrollbar>
|
||||||
|
</el-main>
|
||||||
|
</el-container>
|
||||||
|
</el-container>
|
||||||
|
|
||||||
|
<template #footer>
|
||||||
|
<el-row class="multiplexing-footer">
|
||||||
|
<el-col class="adapt-count">
|
||||||
|
<span>{{ t('dashboard.chart_selected', [selectComponentCount]) }} </span>
|
||||||
|
</el-col>
|
||||||
|
<el-button secondary class="close-button" @click="dialogShow = false"
|
||||||
|
>{{ t('common.cancel') }}
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
:disabled="!selectComponentCount"
|
||||||
|
class="confirm-button"
|
||||||
|
@click="saveMultiplexing"
|
||||||
|
>{{ t('common.confirm2') }}
|
||||||
|
</el-button>
|
||||||
|
</el-row>
|
||||||
|
</template>
|
||||||
|
</el-drawer>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { computed, onMounted, reactive, ref } from 'vue'
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
import { Chat, chatApi, ChatInfo } from '@/api/chat.ts'
|
||||||
|
import DashboardChatList from '@/views/dashboard/editor/DashboardChatList.vue'
|
||||||
|
import ChartSelection from '@/views/dashboard/editor/ChartSelection.vue'
|
||||||
|
import { concat } from 'lodash-es'
|
||||||
|
|
||||||
|
const dialogShow = ref(false)
|
||||||
|
const { t } = useI18n()
|
||||||
|
const selectComponentCount = computed(() => state.curMultiplexingComponents.length)
|
||||||
|
const state = reactive({
|
||||||
|
curMultiplexingComponents: [],
|
||||||
|
})
|
||||||
|
|
||||||
|
const loading = ref<boolean>(false)
|
||||||
|
const chatList = ref<Array<ChatInfo>>([])
|
||||||
|
|
||||||
|
const currentChatId = ref<number | undefined>()
|
||||||
|
const currentChat = ref<ChatInfo>(new ChatInfo())
|
||||||
|
const chartInfoList = ref<Array<any>>([])
|
||||||
|
const emits = defineEmits(['addChatChart'])
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getChatList()
|
||||||
|
})
|
||||||
|
|
||||||
|
function selectChange(value: boolean, viewInfo: any) {
|
||||||
|
if (value) {
|
||||||
|
// @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
|
state.curMultiplexingComponents.push(viewInfo)
|
||||||
|
} else {
|
||||||
|
state.curMultiplexingComponents = state.curMultiplexingComponents.filter(
|
||||||
|
// @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
|
(component) => component.id !== viewInfo.id
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const getData = (record: any) => {
|
||||||
|
const recordData = record.data
|
||||||
|
if (record?.predict_record_id !== undefined && record?.predict_record_id !== null) {
|
||||||
|
let _list = []
|
||||||
|
if (record?.predict_data && typeof record?.predict_data === 'string') {
|
||||||
|
if (
|
||||||
|
record?.predict_data.length > 0 &&
|
||||||
|
record?.predict_data.trim().startsWith('[') &&
|
||||||
|
record?.predict_data.trim().endsWith(']')
|
||||||
|
) {
|
||||||
|
try {
|
||||||
|
_list = JSON.parse(record?.predict_data)
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (record?.predict_data.length > 0) {
|
||||||
|
_list = record?.predict_data
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (_list.length == 0) {
|
||||||
|
return _list
|
||||||
|
}
|
||||||
|
|
||||||
|
if (recordData.data && recordData.data.length > 0) {
|
||||||
|
recordData.data = concat(recordData.data, _list)
|
||||||
|
} else {
|
||||||
|
recordData.data = _list
|
||||||
|
}
|
||||||
|
|
||||||
|
return recordData
|
||||||
|
} else {
|
||||||
|
return recordData
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function adaptorChartInfoList(chatInfo: ChatInfo) {
|
||||||
|
chartInfoList.value = []
|
||||||
|
if (chatInfo && chatInfo.records) {
|
||||||
|
chatInfo.records.forEach((record: any) => {
|
||||||
|
const data = getData(record)
|
||||||
|
if (
|
||||||
|
((record?.analysis_record_id === undefined || record?.analysis_record_id === null) &&
|
||||||
|
(record?.predict_record_id === undefined || record?.predict_record_id === null) &&
|
||||||
|
(record?.sql || record?.chart)) ||
|
||||||
|
(record?.predict_record_id !== undefined &&
|
||||||
|
record?.predict_record_id !== null &&
|
||||||
|
data?.data?.length > 0)
|
||||||
|
) {
|
||||||
|
const recordeInfo = { id: chatInfo.id + '_' + record.id, data: data, chart: {} }
|
||||||
|
const chartBaseInfo = JSON.parse(record.chart)
|
||||||
|
if (chartBaseInfo) {
|
||||||
|
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] : [],
|
||||||
|
}
|
||||||
|
chartInfoList.value.push(recordeInfo)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onClickHistory(chat: Chat) {
|
||||||
|
currentChat.value = new ChatInfo(chat)
|
||||||
|
if (chat !== undefined && chat.id !== undefined && !loading.value) {
|
||||||
|
currentChatId.value = chat.id
|
||||||
|
loading.value = true
|
||||||
|
chatApi
|
||||||
|
.get_with_Data(chat.id)
|
||||||
|
.then((res) => {
|
||||||
|
const info = chatApi.toChatInfo(res)
|
||||||
|
if (info) {
|
||||||
|
currentChat.value = info
|
||||||
|
adaptorChartInfoList(info)
|
||||||
|
state.curMultiplexingComponents = []
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
loading.value = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function getChatList() {
|
||||||
|
loading.value = true
|
||||||
|
chatApi
|
||||||
|
.list()
|
||||||
|
.then((res) => {
|
||||||
|
chatList.value = chatApi.toChatInfoList(res)
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
loading.value = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const dialogInit = () => {
|
||||||
|
dialogShow.value = true
|
||||||
|
state.curMultiplexingComponents = []
|
||||||
|
}
|
||||||
|
|
||||||
|
const saveMultiplexing = () => {
|
||||||
|
dialogShow.value = false
|
||||||
|
if (state.curMultiplexingComponents.length > 0) {
|
||||||
|
emits('addChatChart', state.curMultiplexingComponents)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const handleClose = () => {}
|
||||||
|
defineExpose({
|
||||||
|
dialogInit,
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.close-button {
|
||||||
|
position: absolute;
|
||||||
|
top: 18px;
|
||||||
|
right: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-button {
|
||||||
|
position: absolute;
|
||||||
|
top: 18px;
|
||||||
|
right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.multiplexing-area {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.multiplexing-footer {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.adapt-count {
|
||||||
|
position: absolute;
|
||||||
|
top: 18px;
|
||||||
|
left: 20px;
|
||||||
|
color: #646a73;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.adapt-select {
|
||||||
|
position: absolute;
|
||||||
|
top: 18px;
|
||||||
|
right: 220px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.adapt-text {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #1f2329;
|
||||||
|
line-height: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-container {
|
||||||
|
height: 100%;
|
||||||
|
.chat-container-left {
|
||||||
|
padding-top: 20px;
|
||||||
|
--ed-aside-width: 260px;
|
||||||
|
border-radius: 12px 0 0 12px;
|
||||||
|
border-right: 1px solid rgba(31, 35, 41, 0.15);
|
||||||
|
.chat-container-right-container {
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.chat-list-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-list {
|
||||||
|
padding: 0 0 20px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-record-list {
|
||||||
|
padding: 0 0 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-footer {
|
||||||
|
--ed-footer-height: 120px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.input-wrapper {
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.input-area {
|
||||||
|
height: 100%;
|
||||||
|
padding-bottom: 8px;
|
||||||
|
|
||||||
|
:deep(.ed-textarea__inner) {
|
||||||
|
height: 100% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-icon {
|
||||||
|
min-width: unset;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 14px;
|
||||||
|
right: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.send-btn {
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.custom-drawer {
|
||||||
|
.ed-drawer__footer {
|
||||||
|
height: 64px !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
box-shadow: 0 -1px 0px #d7d7d7 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ed-drawer__body {
|
||||||
|
background: rgba(245, 246, 247, 1) !important;
|
||||||
|
padding: 0 0 64px 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user