From 60f1b7ebca0d832069e9811998610b8964a474e0 Mon Sep 17 00:00:00 2001 From: liudong <liudong> Date: 星期五, 09 八月 2024 17:55:45 +0800 Subject: [PATCH] 优化知识库页面兼容性 --- src/views/dmx/knowledgeLib/index.vue | 425 ++++++++++++++++++++++++++++++++++++---------------- 1 files changed, 291 insertions(+), 134 deletions(-) diff --git a/src/views/dmx/knowledgeLib/index.vue b/src/views/dmx/knowledgeLib/index.vue index 901a13d..87016f9 100644 --- a/src/views/dmx/knowledgeLib/index.vue +++ b/src/views/dmx/knowledgeLib/index.vue @@ -8,10 +8,10 @@ :placeholder="$t('cardList.searchInput.placeholder')" style="width: 130px;" /> - <addKnow @knowledgeData="knowledgeData"></addKnow> + <addKnow @getknowledge="getknowledge" @getKbdetail="getKbdetail"></addKnow> </div> - <div class="lf-container-down"> - <div class="tabs"> + <a-spin :loading="listloading" class="lf-container-down"> + <a-scrollbar style="overflow: auto;" :style="{height: documentHeight + 70 + 'px'}"> <div class="tab" v-for="(tab, index) in tabs" @@ -21,22 +21,23 @@ > {{ tab.name }} <a-popover position="bl"> - <icon-more :style="{position: 'absolute',top:'10px',right:'20px'}"/> + <icon-more :style="{position: 'absolute',top:'10px',right:'10px'}"/> <template #content> - <a-popconfirm content="纭畾鍒犻櫎鍚�?" @ok="deleteKnowledge(tab.id)" type="warning"> - <span style="cursor: pointer;color: #0960bd;font-size: 12px"><icon-delete />鍒犻櫎</span> - </a-popconfirm> +<!-- <a-popconfirm content="纭畾鍒犻櫎鍚�?" @ok="deleteKnowledge(tab.id)" type="warning">--> +<!-- <span style="cursor: pointer;color: #4977ba;font-size: 12px"><icon-delete style="font-size: 14px"/>鍒犻櫎</span>--> +<!-- </a-popconfirm>--> + <span style="cursor: pointer;color: #4977ba;font-size: 12px" @click="deleteKnowledge(tab.id)"><icon-delete style="font-size: 14px" />鍒犻櫎</span> </template> </a-popover> </div> - </div> - </div> + </a-scrollbar> + </a-spin> </div> - <div class="rt-container"> - <a-tabs default-active-key="1"> + <div class="rt-container" v-if="tabs.length > 0" > + <a-tabs :active-key="activeKey" @change="handleTabChange"> <a-tab-pane key="1" :title= "t('dmx.list.DataSet')"> - <div class="rt-container-main"> - <a-card ref="account" class="general-card" :title="$t('')" style="padding-top: 20px"> + <div class="rt-container-main" :style="{height: documentHeight + 70 + 'px'}"> + <a-card ref="account" class="general-card" title="" style="padding-top: 20px"> <a-row> <a-col :flex="1" :span="12"> <a-form @@ -50,9 +51,13 @@ <a-input-search :placeholder="$t('cardList.searchInput.placeholder')" style="width: 200px;margin-right: 10px" + v-model="keywords" + @change="search" /> - <!-- 鏂板缓--> - <add :kbobj="kbobj" @changeFetchData="changeFetchData"/> + <!--鏂板缓--> + <span> + <add :kbobj="kbobj" @changeFetchData="changeFetchData"/> + </span> </a-col> </a-row> </a-form> @@ -88,7 +93,7 @@ <!-- {{ $t('searchTable.operation.download') }}--> <!-- </a-button>--> <a-tooltip :content="$t('searchTable.actions.refresh')"> - <div class="action-icon" @click="search" + <div class="action-icon" ><icon-refresh size="18" /></div> </a-tooltip> @@ -152,7 +157,8 @@ :bordered="false" :size="size" @page-change="onPageChange" - :scroll="{ y: 580 }" + :max-height='documentHeight' + :scroll="{ y: documentHeight }" > <template #name="{ record }"> <!-- <icon-file style="color: #0960bd;margin-right: 4px;" />--> @@ -169,39 +175,46 @@ <!-- <span>{{ parser_ids[record.parser_id]}}</span>--> <!-- </template>--> <template #status="{ record }"> - <a-switch v-model="record.status" checked-value="1" unchecked-value="0" @change="handleChangeStatus(record)"/> + <a-switch v-model="record.status" size="small" checked-value="1" unchecked-value="0" @change="handleChangeStatus(record)"/> </template> <template #run="{ record }"> <div style="display: flex;align-items: center;"> <div style="width: 100px"> + <a-popover title="Title" v-if="record.run == '4'"> + <a-tag :loading="record.loading" :color="'blue'" border>{{$t('dmx.list.complete')}}</a-tag> + <template #content> + <p></p> + </template> + </a-popover> <a-popover title="Title" v-if="record.run == '3'"> <a-tag :loading="record.loading" :color="'blue'" border>{{$t('dmx.list.complete')}}</a-tag> <template #content> - <p>Here is the text content</p> + <p></p> </template> </a-popover> <a-popover title="Title" v-if="record.run == '1'"> <a-tag :loading="record.loading" :color="'blue'" border>{{$t('dmx.list.complete')}}</a-tag> <template #content> - <p>Here is the text content</p> + <p></p> </template> </a-popover> <a-popover title="Title" v-if="record.run == '2'"> <a-tag :loading="record.loading" :color="'gold'" border>{{$t('dmx.list.cancel')}}</a-tag> <template #content> - <p>Here is the text content</p> + <p></p> </template> </a-popover> <a-popover title="Title" v-if="record.run == '0'"> <a-tag :loading="record.loading" :color="'green'" border>{{$t('dmx.list.NotStarted')}}</a-tag> <template #content> - <p>Here is the text content</p> + <p></p> </template> </a-popover> </div> <div > <a-button type="text" size="large" @click="run(record)" :loading="record.loading"> <template #icon> + <icon-sync v-if="record.run == '4'"/> <icon-sync v-if="record.run == '3'"/> <icon-sync v-if="record.run == '2'"/> <icon-sync style="color: green" v-if="record.run == '1'"/> @@ -221,65 +234,78 @@ </template> </a-button> </a-popconfirm> - <a-button type="text" size="small"> + <a-button type="text" size="small" @click="onDownloadDocument(record)"> <template #icon> <icon-download /> </template> </a-button> + + <a-button type="text" size="small" @click="seeload(record)"> + <template #icon> + <icon-eye /> + </template> + </a-button> + </template> </a-table> </a-card> </div> </a-tab-pane> <a-tab-pane key="2" :title="t('dmx.list.test')"> - <div class="rt-container-main"> - <test ref="testRefs" :kbobj="kbobj"></test> + <div class="rt-container-main" :style="{height: documentHeight + 70 + 'px'}"> + <test ref="testForm"></test> </div> </a-tab-pane> <a-tab-pane key="3" :title="t('dmx.list.disposition')"> - <div class="rt-container-main"> - <config :kbtenantInfo="kbtenantInfo" :kbdetail="kbdetail" :kbobj="kbobj"></config> + <div class="rt-container-main" :style="{height: documentHeight + 70 + 'px'}"> + <config ref="configForm" :kbtenantInfo="kbtenantInfo" @cancleConfig="cancleConfig" @saveConfig="saveConfig"></config> </div> </a-tab-pane> </a-tabs> - <div v-if="detailsShow" class="details"> - <div class="details-header"> - <div style="display: flex;align-items: center"> - <span><icon-arrow-left size="20px" style="cursor: pointer;color: #0960bd;margin: 10px" @click="goBackClick" /></span> - <icon-file style="color: #0960bd;margin-right: 4px;" /> - <span style="">123.docx</span> - </div> - <div style="display: flex; align-items: center;"> - <a-radio-group v-model="position" type="button" style="margin-right: 10px"> - <a-radio value="top">{{'dmx.list.EntireArticle'}}</a-radio> - <a-radio value="right">{{'dmx.list.omit'}}</a-radio> - </a-radio-group> - <a-popover position="bottom"> - <a-button type="outline" class="button" style="margin-right: 10px">{{'dmx.list.batch'}} <icon-down style="margin-left: 4px" /></a-button> - <template #content> - <p>Here is the text content</p> - <p>Here is the text content</p> - </template> - </a-popover> - <a-button type="outline" class="button" style="margin-right: 10px"> - <template #icon> - <icon-search /> - </template> - </a-button> - <a-popover position="bottom"> - <a-button type="outline" class="button" style="margin-right: 10px"><icon-sort /></a-button> - <template #content> - <p>Here is the text content</p> - <p>Here is the text content</p> - </template> - </a-popover> - <addDetails></addDetails> - </div> - </div> - <a-divider style="margin-top: 10px" /> - </div> +<!-- <div v-if="detailsShow" class="details">--> +<!-- <div class="details-header">--> +<!-- <div style="display: flex;align-items: center">--> +<!-- <span><icon-arrow-left size="20px" style="cursor: pointer;color: #0960bd;margin: 10px" @click="goBackClick" /></span>--> +<!-- <icon-file style="color: #0960bd;margin-right: 4px;" />--> +<!-- <span style="">123.docx</span>--> +<!-- </div>--> +<!-- <div style="display: flex; align-items: center;">--> +<!-- <a-radio-group v-model="position" type="button" style="margin-right: 10px">--> +<!-- <a-radio value="top">{{'dmx.list.EntireArticle'}}</a-radio>--> +<!-- <a-radio value="right">{{'dmx.list.omit'}}</a-radio>--> +<!-- </a-radio-group>--> +<!-- <a-popover position="bottom">--> +<!-- <a-button type="outline" class="button" style="margin-right: 10px">{{'dmx.list.batch'}} <icon-down style="margin-left: 4px" /></a-button>--> +<!-- <template #content>--> +<!-- <p>Here is the text content</p>--> +<!-- <p>Here is the text content</p>--> +<!-- </template>--> +<!-- </a-popover>--> +<!-- <a-button type="outline" class="button" style="margin-right: 10px">--> +<!-- <template #icon>--> +<!-- <icon-search />--> +<!-- </template>--> +<!-- </a-button>--> +<!-- <a-popover position="bottom">--> +<!-- <a-button type="outline" class="button" style="margin-right: 10px"><icon-sort /></a-button>--> +<!-- <template #content>--> +<!-- <p>Here is the text content</p>--> +<!-- <p>Here is the text content</p>--> +<!-- </template>--> +<!-- </a-popover>--> +<!-- <addDetails></addDetails>--> +<!-- </div>--> +<!-- </div>--> +<!-- <a-divider style="margin-top: 10px" />--> +<!-- </div>--> </div> </div> + <a-modal title=" " v-model:visible="visible" :footer="false" fullscreen> +<!-- <docx v-if="documenttype=='docx'" previewSrc="http://192.168.20.116:1080/v1/document/get/405c3efa4d8c11ef97560242ac120006"></docx>--> + <docx v-if="documenttype=='docx'" :previewSrc="previewSrc"></docx> + <excel v-if="documenttype=='excel'" :previewSrc="previewSrc"></excel> + <txtPdf v-if="documenttype=='txtPdf'" :previewSrc="previewSrc"></txtPdf> + </a-modal> </div> </template> @@ -294,7 +320,7 @@ queryKbDocumentList, deleteKnow, queryKbdetail, - queryKbtenantInfo, kbdocumentrm, kbdocumentchangeparser, kbdocumentrun, kbdocumentchangeStatus + queryKbtenantInfo, kbdocumentrm, kbdocumentchangeparser, kbdocumentrun, kbdocumentchangeStatus,downloadFile } from "@/api/kbList"; import { Pagination } from '@/types/global'; import type { SelectOptionData } from '@arco-design/web-vue/es/select/interface'; @@ -307,9 +333,12 @@ import config from '@/views/dmx/knowledgeLib/config.vue' import test from '@/views/dmx/knowledgeLib/test.vue' import tool from '@/views/dmx/knowledgeLib/tool.vue' - import addDetails from '@/views/dmx/knowledgeLib/addDetails.vue' -import { Message } from "@arco-design/web-vue"; -import { parseTime } from "@/utils"; + import docx from '@/views/dmx/knowledgeLib/components/docx.vue' + import excel from '@/views/dmx/knowledgeLib/components/excel.vue' + import txtPdf from '@/views/dmx/knowledgeLib/components/txtPdf.vue' +import { Message, Modal } from "@arco-design/web-vue"; +import { documentHeight, parseTime } from "@/utils"; +import { deleteLlm } from "@/api/model"; type SizeProps = 'mini' | 'small' | 'medium' | 'large'; type Column = TableColumnData & { checked?: true }; const account = ref(null) @@ -328,26 +357,34 @@ const renderData = ref([]); const formModel = ref(generateFormModel()); const cloneColumns = ref([]); - const testRefs = ref(null); const showColumns = ref<Column[]>([]); const size = ref<SizeProps>('medium'); let visible = ref(false) + let listloading = ref(false) + let keywords = ref('') + let activeKey = ref('1') let detailsShow = ref(false) let selectedTab = ref(0) + let testForm = ref(null) + let configForm = ref(null) + let documenttype = ref('docx') + let previewSrc = ref('') + let kbId = ref('') let kbobj = reactive({}) let kbdetail = reactive({}) let parser_ids = reactive({}) + let seeObj = reactive({}) let kbtenantInfo = reactive({ - "asr_id": "paraformer-realtime-8k-v1", - "embd_id": "BAAI/bge-large-zh-v1.5", - "img2txt_id": "qwen-vl-max", - "llm_id": "qwen-plus", - "name": "wanghao鈥榮 Kingdom", - "parser_ids": "naive:General,qa:Q&A,resume:Resume,manual:Manual,table:Table,paper:Paper,book:Book,laws:Laws,presentation:Presentation,picture:Picture,one:One", - "rerank_id": "BAAI/bge-reranker-v2-m3", - "role": "owner", - "tenant_id": "948fc6fa41ab11ef8fb80242ac120004", + asr_id: "paraformer-realtime-8k-v1", + embd_id: "BAAI/bge-large-zh-v1.5", + img2txt_id: "qwen-vl-max", + llm_id: "qwen-plus", + name: "wanghao鈥榮 Kingdom", + parser_ids: "naive:General,qa:Q&A,resume:Resume,manual:Manual,table:Table,paper:Paper,book:Book,laws:Laws,presentation:Presentation,picture:Picture,one:One", + rerank_id: "BAAI/bge-reranker-v2-m3", + role: "owner", + tenant_id: "948fc6fa41ab11ef8fb80242ac120004", parser_idObj:{} }) let tabs = ref([]) @@ -356,11 +393,13 @@ selectedTab.value= index; // console.log(item.id); kbobj= item; + kbId = kbobj.id; fetchData({ kb_id: kbobj.id, page: 1, page_size: 20 }) + getKbdetail(kbobj.id) } const basePagination: Pagination = { @@ -423,8 +462,8 @@ title: t('dmx.column.Operate'), dataIndex: 'action', slotName: 'action', - width: 150, - minWidth: 150, + width: 200, + minWidth: 200, }, ]); const contentTypeOptions = computed<SelectOptionData[]>(() => [ @@ -465,10 +504,7 @@ setLoading(true); try { const data = await queryKbDocumentList(params); - console.log(data, 'data'); if(data.code=='0'){ - // 璇︽儏 - // const kbtenantInfo = await queryKbtenantInfo(); parser_ids = kbtenantInfo.parser_ids.split(',').reduce((acc, pair) => { const [key, value] = pair.split(':'); acc[key] = value; @@ -484,17 +520,10 @@ parser_id: parser_ids[item.parser_id], }; }); - console.log(renderData.value, 'renderData'); + // console.log(renderData.value, 'renderData'); pagination.current = params.page; pagination.total = data.data.total; - // 鏌ヨ鐭ヨ瘑搴撹鎯� - kbdetail = await queryKbdetail({ - kb_id:params.kb_id, - }); - - - } } catch (err) { @@ -505,11 +534,12 @@ }; const search = () => { - alert(1) - // fetchData({ - // ...basePagination, - // ...formModel.value, - // }); + fetchData({ + kb_id: kbobj.id, + page: 1, + page_size: 20, + keywords:keywords.value + }) }; const handleClick = ()=>{ @@ -523,20 +553,24 @@ const knowledgeData = async ( params = { page: 1, page_size: 20 } ) => { - setLoading(true); + listloading.value = true; try { const { data } = await queryKbList(params); - console.log(data, 'data'); + // console.log(data, 'data'); tabs.value = data; - console.log(tabs.value, 'tabs'); + // console.log(tabs.value, 'tabs'); if(tabs.value.length>0 && tabs.value[0]){ kbobj = tabs.value[0] - + kbId = kbobj.id; + activeKey.value = '1'; fetchData({ kb_id: kbobj.id, page: 1, page_size: 20 }) + getKbdetail(kbobj.id) + }else{ + } // renderData.value = data.list; // console.log(renderData, 'renderData'); @@ -545,29 +579,106 @@ } catch (err) { // you can report use errorHandler or other } finally { - setLoading(false); + listloading.value = false; } }; - const deleteKnowledge = async (id) => { - let data = await deleteKnow({ - kb_id:id - }) - if(data.code == 0){ - Message.success('鍒犻櫎鎴愬姛'); - knowledgeData() + + const getKbdetail = async (kb_id) => { + // 鏌ヨ鐭ヨ瘑搴撹鎯� + const data = await queryKbdetail({ + kb_id:kb_id, + }); + kbdetail = data.data; + testForm.value.changekbid(kbdetail.id); + configForm.value.changekbObj(kbdetail); + }; + + + + +const getknowledge = async (id) => { + setLoading(true); + try { + const { data } = await queryKbList({ page: 1, page_size: 20 }); + console.log(data, '鏌ヨ鐭ヨ瘑搴撳垪琛�'); + tabs.value = data; + if(tabs.value.length>0){ + // 瀹氫綅鍒版柊澧炵殑鐭ヨ瘑搴撳崟鍏� + selectedTab.value = tabs.value.findIndex(item=>item.id==id); + getKbdetail(id) // 鑾峰彇璇︽儏 + activeKey.value = '3'; } + + + + + + + } catch (err) { + // you can report use errorHandler or other + } finally { + setLoading(false); + } +}; + + const deleteKnowledge = (id) => { + Modal.confirm({ + title: '鎻愮ず淇℃伅', + content: '纭鍒犻櫎鍚�', + okText: '纭畾', + cancelText: '鍙栨秷', + hideTitle: true, + onOk: async () => { + let data = await deleteKnow({ + kb_id:id + }) + if(data.code == 0){ + Message.success('鍒犻櫎鎴愬姛'); + knowledgeData() + } + }, + onCancel: () => {}, + }); } const reset = () => { formModel.value = generateFormModel(); }; - + function handleTabChange(key) { + // 澶勭悊鏍囩鏀瑰彉浜嬩欢 + console.log('Changed to tab:', key); + activeKey.value=key; + } const handleSelectDensity = ( val: string | number | Record<string, any> | undefined, e: Event ) => { size.value = val as SizeProps; }; + + const cancleConfig = () => { + activeKey.value = '1'; + let id = tabs.value[selectedTab.value].id; + fetchData({ + kb_id: id, + page: 1, + page_size: 20 + }) + } + + const saveConfig = async () => { + activeKey.value = '1'; + let id = tabs.value[selectedTab.value].id; + const { data } = await queryKbList({ page: 1, page_size: 20 }); + tabs.value = data; + fetchData({ + kb_id: id, + page: 1, + page_size: 20 + }) + getKbdetail(id) // 鑾峰彇璇︽儏 + } + const handleChange = ( checked: boolean | (string | boolean | number)[], @@ -638,7 +749,7 @@ let data = await kbdocumentrm({doc_id: row.id}) if(data.code == 0){ Message.success('鍒犻櫎鎴愬姛'); - console.log(kbobj, 'kbobj'); + // console.log(kbobj, 'kbobj'); fetchData({ kb_id: kbobj.id, page: 1, @@ -646,6 +757,33 @@ }) } } + const onDownloadDocument = async (record)=>{ + console.log(record); + downloadFile({ + url: `/api/v1/document/get/${record.id}`, + filename: record.name, + }); + } +const seeload = async (row)=>{ + Object.assign(seeObj, row) + // console.log(seeObj.name, 'seeObj'); + let type = row.name.split('.')[1]; + console.log(type); + if(type=='pdf'){ + documenttype.value = 'txtPdf' + }else if(type=='docx'){ + documenttype.value = 'docx' + }else if(type=='xlsx'){ + documenttype.value = 'excel' + }else if(type=='txt'){ + documenttype.value = 'txtPdf' + }else { + return false + } + previewSrc.value = `${import.meta.env.VITE_API_BASE_URL}/v1/document/get/${row.id}` + visible.value = true; + +} const handleChangeStatus = async (row)=>{ console.log(row); @@ -660,7 +798,7 @@ const run = async (row)=>{ - console.log(row); + // console.log(row); row.loading = true; let run = '1' if(row.run!='2'){ @@ -672,11 +810,6 @@ doc_ids: [row.id], run: run }) - // let data = await kbdocumentchangeparser({ - // parser_id: row.parser_id, - // doc_id: row.id, - // parser_config: row.parser_config, - // }) if(data.code == 0){ Message.success('瑙f瀽鎴愬姛'); row.run = '3'; @@ -684,6 +817,12 @@ Message.error('瑙f瀽澶辫触'); row.run = '1'; } + fetchData({ + kb_id: tabs.value[selectedTab.value].id, + page: 1, + page_size: 20 + }) + row.loading = false; } @@ -707,11 +846,14 @@ { deep: true, immediate: true } ); - onBeforeMount(()=>{ - knowledgeData() + onBeforeMount(async()=>{ + // const {data} = await queryKbtenantInfo(); + // Object.assign(kbtenantInfo,data); + // console.log(kbtenantInfo,'kbtenantInfo鐨勬暟鎹�'); + }) onMounted(()=>{ - + knowledgeData() }) </script> @@ -730,46 +872,61 @@ padding: 0 20px 20px 20px; .main-container{ display: flex; + width: 100%; .lf-container{ display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; - background: #ffffff; + border-radius: 8px; + background: var(--color-bg-2); width: 200px; .lf-container-top{ display: flex; + margin: 10px 0; } .lf-container-down{ display: flex; flex-direction: column; + box-sizing: border-box; width: 90%; - height: calc(100% - 5rem); - border: 1px solid #eeeeee; - overflow: auto; - padding: 10px; - .tabs .tab { + border: 1px solid var(--color-fill-3); + border-radius: 8px; + //padding: 10px; + margin-bottom: 10px; + //.tabs{ + // width: 100%; + // height: 100%; + // overflow: auto; + //} + .tab { cursor: pointer; box-sizing: border-box; - margin: 10px 0; + margin: 10px 10px; padding:0 10px; - color: rgba(0, 0, 0, 0.88); + padding-right: 20%; font-size: 14px; height: 40px; line-height: 40px; list-style: none; position: relative; - background: #ffffff; - border: 1px solid #f0f0f0; + color: var(--color-text-1); + border: 1px solid var(--color-neutral-3); + background: var(--color-bg-2); border-radius: 8px; + overflow: hidden; /* 纭繚瓒呭嚭瀹瑰櫒鐨勬枃鏈闅愯棌 */ + white-space: nowrap; /* 闃叉鏂囨湰鎹㈣ */ + text-overflow: ellipsis; /* 瓒呭嚭閮ㄥ垎鏄剧ず鐪佺暐鍙� */ } - .tabs .tab:hover { - border: 1px solid #ffffff; + .tab:hover { + color: #2a2a2b; + border: 1px solid var(--color-neutral-3); background: #e8e8ea; box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09); } - .tabs .tab.active { - border: 1px solid #e8e8ea; + .tab.active { + color: #2a2a2b; + border: 1px solid var(--color-neutral-1); background: #e8e8ea; cursor: pointer; } @@ -780,9 +937,9 @@ //background: #626aea; margin-left: 20px; width: calc(100% - 200px); - height: calc(100% - 5rem); + overflow: hidden; .rt-container-main{ - height: 76vh; + overflow: auto; } .details{ position: absolute; -- Gitblit v1.8.0