知识库文件的下载和预览

.env.development

@@ -1,2 +1,2 @@
 VUE_APP_BASE_API=/api/v1
-VITE_API_BASE_URL= 'http://aiotlink.com:8189'
+VITE_API_BASE_URL= 'http://192.168.20.116:1080'

package.json

@@ -37,6 +37,7 @@
   "dependencies": {
     "@arco-design/web-vue": "^2.44.7",
     "@vue-office/docx": "^1.6.2",
+    "@vue-office/excel": "^1.7.11",
     "@vueuse/core": "^9.3.0",
     "arco-design-pro-vue": "^2.7.3",
     "axios": "^0.24.0",

public/logo.svg

@@ -0,0 +1,29 @@
+<svg width="32" height="34" viewBox="0 0 32 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M3.43265 20.7677C4.15835 21.5062 4.15834 22.7035 3.43262 23.4419L3.39546 23.4797C2.66974 24.2182 1.49312 24.2182 0.767417 23.4797C0.0417107 22.7412 0.0417219 21.544 0.767442 20.8055L0.804608 20.7677C1.53033 20.0292 2.70694 20.0293 3.43265 20.7677Z"
+        fill="#B2DDFF" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M12.1689 21.3375C12.8933 22.0773 12.8912 23.2746 12.1641 24.0117L7.01662 29.2307C6.2896 29.9678 5.11299 29.9657 4.38859 29.2259C3.66419 28.4861 3.66632 27.2888 4.39334 26.5517L9.54085 21.3327C10.2679 20.5956 11.4445 20.5977 12.1689 21.3375Z"
+        fill="#53B1FD" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M19.1551 30.3217C19.7244 29.4528 20.8781 29.218 21.7321 29.7973L21.8436 29.8729C22.6975 30.4522 22.9283 31.6262 22.359 32.4952C21.7897 33.3641 20.6359 33.5989 19.782 33.0196L19.6705 32.944C18.8165 32.3647 18.5858 31.1907 19.1551 30.3217Z"
+        fill="#B2DDFF" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M31.4184 20.6544C32.1441 21.3929 32.1441 22.5902 31.4184 23.3286L28.8911 25.9003C28.1654 26.6388 26.9887 26.6388 26.263 25.9003C25.5373 25.1619 25.5373 23.9646 26.263 23.2261L28.7903 20.6544C29.516 19.916 30.6927 19.916 31.4184 20.6544Z"
+        fill="#53B1FD" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M31.4557 11.1427C32.1814 11.8812 32.1814 13.0785 31.4557 13.8169L12.7797 32.8209C12.054 33.5594 10.8774 33.5594 10.1517 32.8209C9.42599 32.0825 9.42599 30.8852 10.1517 30.1467L28.8277 11.1427C29.5534 10.4043 30.73 10.4043 31.4557 11.1427Z"
+        fill="#1570EF" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M27.925 5.29994C28.6508 6.0384 28.6508 7.23568 27.925 7.97414L17.184 18.9038C16.4583 19.6423 15.2817 19.6423 14.556 18.9038C13.8303 18.1653 13.8303 16.9681 14.556 16.2296L25.297 5.29994C26.0227 4.56148 27.1993 4.56148 27.925 5.29994Z"
+        fill="#1570EF" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M22.256 1.59299C22.9822 2.33095 22.983 3.52823 22.2578 4.26718L8.45055 18.3358C7.72533 19.0748 6.54871 19.0756 5.82251 18.3376C5.09631 17.5996 5.09552 16.4024 5.82075 15.6634L19.6279 1.59478C20.3532 0.855827 21.5298 0.855022 22.256 1.59299Z"
+        fill="#1570EF" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M8.58225 6.09619C9.30671 6.83592 9.30469 8.0332 8.57772 8.77038L3.17006 14.2541C2.4431 14.9913 1.26649 14.9893 0.542025 14.2495C-0.182438 13.5098 -0.180413 12.3125 0.546548 11.5753L5.95421 6.09159C6.68117 5.3544 7.85778 5.35646 8.58225 6.09619Z"
+        fill="#53B1FD" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M11.893 0.624023C12.9193 0.624023 13.7513 1.47063 13.7513 2.51497V2.70406C13.7513 3.7484 12.9193 4.59501 11.893 4.59501C10.8667 4.59501 10.0347 3.7484 10.0347 2.70406V2.51497C10.0347 1.47063 10.8667 0.624023 11.893 0.624023Z"
+        fill="#B2DDFF" />
+</svg>

src/views/dmx/knowledgeLib/components/docx.vue

@@ -0,0 +1,48 @@
+
+<template>
+  <vue-office-docx
+    :src="previewSrc"
+    :style="comStyle"
+    @rendered="renderedHandler"
+    @error="errorHandler"
+  />
+</template>
+
+<script setup>
+//	获取父组件传递的资源url
+const props = defineProps({
+  previewSrc: {
+    type: String,
+    required: false,
+    default: () => ''
+  }
+});
+//引入VueOfficeDocx组件相关
+import VueOfficeDocx from '@vue-office/docx'
+import '@vue-office/docx/lib/index.css'
+
+const comStyle = {
+  width: '100%',
+  height: '100%'
+}
+
+const renderedHandler = () => {
+  console.log('rendered');
+};
+const errorHandler = (err) => {
+  console.log('error', err);
+};
+
+
+
+
+
+</script>
+
+<style scoped lang="less">
+.aUpload {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+</style>

src/views/dmx/knowledgeLib/components/excel.vue

@@ -0,0 +1,48 @@
+
+<template>
+  <vue-office-excel
+    :src="previewSrc"
+    :style="comStyle"
+    @rendered="renderedHandler"
+    @error="errorHandler"
+  />
+</template>
+
+<script setup>
+//	获取父组件传递的资源url
+const props = defineProps({
+  previewSrc: {
+    type: String,
+    required: false,
+    default: () => ''
+  }
+});
+//引入VueOfficeExcel组件相关
+import VueOfficeExcel from '@vue-office/excel'
+import '@vue-office/excel/lib/index.css'
+
+const comStyle = {
+  width: '100%',
+  height: '100%'
+}
+
+const renderedHandler = () => {
+  console.log('rendered');
+};
+const errorHandler = (err) => {
+  console.log('error', err);
+};
+
+
+
+
+
+</script>
+
+<style scoped lang="less">
+.aUpload {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+</style>

src/views/dmx/knowledgeLib/components/txtPdf.vue

@@ -0,0 +1,45 @@
+
+<template>
+  <iframe
+    :src="previewSrc"
+  ></iframe>
+</template>
+
+<script setup>
+//	获取父组件传递的资源url
+const props = defineProps({
+  previewSrc: {
+    type: String,
+    required: false,
+    default: () => ''
+  }
+});
+//引入VueOfficeExcel组件相关
+import VueOfficeExcel from '@vue-office/excel'
+import '@vue-office/excel/lib/index.css'
+
+const comStyle = {
+  width: '100%',
+  height: '100%'
+}
+
+const renderedHandler = () => {
+  console.log('rendered');
+};
+const errorHandler = (err) => {
+  console.log('error', err);
+};
+
+
+
+
+
+</script>
+
+<style scoped lang="less">
+.aUpload {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+</style>

src/views/dmx/knowledgeLib/index.vue

@@ -228,11 +228,13 @@
                         <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>
@@ -287,6 +289,12 @@
         </div>
       </div>
     </div>
+    <a-modal 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>
 
@@ -315,6 +323,9 @@ import {
   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 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 } from "@arco-design/web-vue";
   import { parseTime } from "@/utils";
   import { usePinia } from "@/store";
@@ -346,10 +357,13 @@ import {
   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",
@@ -671,8 +685,25 @@ const   deleteItem =  async (row)=>{
       filename: record.name,
     });
   }
-const   seeload =  async (row)=>{
-  console.log(row);
+const   seeload = async (row)=>{
+  Object.assign(seeObj, row)
+  console.log(seeObj.name, 'seeObj');
+  let type = seeObj.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)=>{

yarn.lock

@@ -1020,6 +1020,11 @@
   resolved "https://registry.npmmirror.com/@vue-office/docx/-/docx-1.6.2.tgz#c97d28db60db5325dd351d90b0202dd3d54ad427"
   integrity sha512-OHAoUHeY8nHjhWvwDhlPx+/rmRkxmqLpvPgtfCEOZ4H1c1LCdJ6eDbdV3152ww8dcdZ7fgGQu3fmSSaI7JwdpQ==
 
+"@vue-office/excel@^1.7.11":
+  version "1.7.11"
+  resolved "https://registry.npmmirror.com/@vue-office/excel/-/excel-1.7.11.tgz#e37e5a2c212907a62c9b65e42d9df21f9c68a2cc"
+  integrity sha512-LF3R9IV573Sf4qTu6Ik5Ee8UMfkrsZQ6HEQE25/2m1c0CMcHX6KanIy6Cz0b0Q+FrLH3TjIsLTm6oPcqAbDGSA==
+
 "@vue/babel-helper-vue-transform-on@1.2.2":
   version "1.2.2"
   resolved "https://registry.npmmirror.com/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.2.2.tgz#7f1f817a4f00ad531651a8d1d22e22d9e42807ef"