知识库文件的下载和预览

liudong

2024-08-01 4f12de4fb0cbdf8cf2e8ea7745d9478330a08699

知识库文件的下载和预览

 .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.jpg

 public/logo.png

 public/logo.svg

New file
@@ -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>

 public/logo1.png

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

New file
@@ -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

New file
@@ -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

New file
@@ -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 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 @@
  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 @@
      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"