pdf、word文件展示

package-lock.json

@@ -12,6 +12,9 @@
         "@grapecity/spread-sheets-vue": "^15.1.1",
         "@jiaminghi/data-view": "^2.10.0",
         "@riophae/vue-treeselect": "^0.4.0",
+        "@vue-office/docx": "^1.6.2",
+        "@vue-office/pdf": "^2.0.9",
+        "@vue/composition-api": "^1.7.2",
         "axios": "^0.27.2",
         "bignumber.js": "^9.1.0",
         "core-js": "^3.8.3",
@@ -25,6 +28,7 @@
         "relation-graph": "^1.1.0",
         "screenfull": "^6.0.1",
         "vue": "^2.6.14",
+        "vue-demi": "^0.14.10",
         "vue-router": "^3.5.1",
         "vue-smooth-dnd": "^0.8.1",
         "vuex": "^3.6.2"
@@ -2499,6 +2503,38 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@vue-office/docx": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmmirror.com/@vue-office/docx/-/docx-1.6.2.tgz",
+      "integrity": "sha512-OHAoUHeY8nHjhWvwDhlPx+/rmRkxmqLpvPgtfCEOZ4H1c1LCdJ6eDbdV3152ww8dcdZ7fgGQu3fmSSaI7JwdpQ==",
+      "hasInstallScript": true,
+      "peerDependencies": {
+        "@vue/composition-api": "^1.7.1",
+        "vue": "^2.0.0 || >=3.0.0",
+        "vue-demi": "^0.14.6"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vue-office/pdf": {
+      "version": "2.0.9",
+      "resolved": "https://registry.npmmirror.com/@vue-office/pdf/-/pdf-2.0.9.tgz",
+      "integrity": "sha512-sRjIiMV1CDDFv1Ls4U7zglkjkMr1Ntm16q8Krh0m1Lh7vAdVox1EcgEw4MXU6Mqsz7NB6nppxCPlSms6ue9eIQ==",
+      "hasInstallScript": true,
+      "peerDependencies": {
+        "@vue/composition-api": "^1.7.1",
+        "vue": "^2.0.0 || >=3.0.0",
+        "vue-demi": "^0.14.6"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@vue/babel-helper-vue-jsx-merge-props": {
       "version": "1.2.1",
       "resolved": "https://registry.npmmirror.com/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.2.1.tgz",
@@ -3015,6 +3051,14 @@
         "url": "https://opencollective.com/postcss/"
       }
     },
+    "node_modules/@vue/composition-api": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmmirror.com/@vue/composition-api/-/composition-api-1.7.2.tgz",
+      "integrity": "sha512-M8jm9J/laYrYT02665HkZ5l2fWTK4dcVg3BsDHm/pfz+MjDYwX+9FUaZyGwEyXEDonQYRCo0H7aLgdklcIELjw==",
+      "peerDependencies": {
+        "vue": ">= 2.5 < 2.7"
+      }
+    },
     "node_modules/@vue/vue-loader-v15": {
       "name": "vue-loader",
       "version": "15.9.8",
@@ -12139,6 +12183,31 @@
       "integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ==",
       "license": "MIT"
     },
+    "node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/vue-eslint-parser": {
       "version": "8.3.0",
       "resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz",
@@ -14773,6 +14842,18 @@
         "@types/node": "*"
       }
     },
+    "@vue-office/docx": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmmirror.com/@vue-office/docx/-/docx-1.6.2.tgz",
+      "integrity": "sha512-OHAoUHeY8nHjhWvwDhlPx+/rmRkxmqLpvPgtfCEOZ4H1c1LCdJ6eDbdV3152ww8dcdZ7fgGQu3fmSSaI7JwdpQ==",
+      "requires": {}
+    },
+    "@vue-office/pdf": {
+      "version": "2.0.9",
+      "resolved": "https://registry.npmmirror.com/@vue-office/pdf/-/pdf-2.0.9.tgz",
+      "integrity": "sha512-sRjIiMV1CDDFv1Ls4U7zglkjkMr1Ntm16q8Krh0m1Lh7vAdVox1EcgEw4MXU6Mqsz7NB6nppxCPlSms6ue9eIQ==",
+      "requires": {}
+    },
     "@vue/babel-helper-vue-jsx-merge-props": {
       "version": "1.2.1",
       "resolved": "https://registry.npmmirror.com/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.2.1.tgz",
@@ -15146,6 +15227,12 @@
         }
       }
     },
+    "@vue/composition-api": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmmirror.com/@vue/composition-api/-/composition-api-1.7.2.tgz",
+      "integrity": "sha512-M8jm9J/laYrYT02665HkZ5l2fWTK4dcVg3BsDHm/pfz+MjDYwX+9FUaZyGwEyXEDonQYRCo0H7aLgdklcIELjw==",
+      "requires": {}
+    },
     "@vue/vue-loader-v15": {
       "version": "npm:vue-loader@15.9.8",
       "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-15.9.8.tgz",
@@ -21594,6 +21681,12 @@
       "resolved": "https://registry.npmmirror.com/vue/-/vue-2.6.14.tgz",
       "integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ=="
     },
+    "vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "requires": {}
+    },
     "vue-eslint-parser": {
       "version": "8.3.0",
       "resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz",

package.json

@@ -12,6 +12,9 @@
     "@grapecity/spread-sheets-vue": "^15.1.1",
     "@jiaminghi/data-view": "^2.10.0",
     "@riophae/vue-treeselect": "^0.4.0",
+    "@vue-office/docx": "^1.6.2",
+    "@vue-office/pdf": "^2.0.9",
+    "@vue/composition-api": "^1.7.2",
     "axios": "^0.27.2",
     "bignumber.js": "^9.1.0",
     "core-js": "^3.8.3",
@@ -25,6 +28,7 @@
     "relation-graph": "^1.1.0",
     "screenfull": "^6.0.1",
     "vue": "^2.6.14",
+    "vue-demi": "^0.14.10",
     "vue-router": "^3.5.1",
     "vue-smooth-dnd": "^0.8.1",
     "vuex": "^3.6.2"

src/views/als/intelligentQA/index.scss

@@ -169,7 +169,7 @@
   justify-content: space-around;
 
   .contentLeft{
-    width: 49%;
+    width: 620px;
     height: 100%;
     // background-color: #cfcbcb;
     border-right: 1px solid #cfcbcb;
@@ -181,11 +181,12 @@
     }
   }
   .contentRight{
-    width: 49%;
+    width: calc(100% - 620px);
     height: 100%;
     .source{
       float: right;
       color: #fff;
+      margin-bottom: 20px;
     }
   }
 }

src/views/als/intelligentQA/index.vue

@@ -38,7 +38,7 @@
     <div class="statistics">
       <div class="statisticsTitle">统计列表</div>
     </div>
-    <el-dialog title="更多" :visible.sync="dialogVisible" width="1300px" :before-close="handleClose">
+    <el-dialog title="更多" :visible.sync="dialogVisible" width="1500px" :before-close="handleClose">
       <div class="dialogContent">
         <div class="contentLeft">
           <div>
@@ -48,8 +48,21 @@
         </div>
         <div class="contentRight">
           <div>
-            <div class="source">来源：《{{ moreData.file_name }}{{ moreData.fileName }}》</div>
-            <div class="fileContent"></div>
+            <div class="source">
+              <el-link :href="`${fileInfo.url}`" style="color: #209cc1" :underline="false" target="_blank">
+                <el-tooltip class="item" effect="dark" content="点击可下载" placement="top">
+                  <span> 来源：《{{ moreData.file_name }}{{ moreData.fileName }}》</span>
+                </el-tooltip>
+              </el-link>
+            </div>
+            <div class="fileContent">
+              <div v-if="fileInfo.fileSuffix == '.docx' || fileInfo.fileSuffix == '.doc'">
+                <VueOfficeDocx style="width: 100%; height: calc(100vh - 400px)" :src="fileInfo.url" />
+              </div>
+              <div v-if="fileInfo.fileSuffix == '.pdf'">
+                <VueOfficePdf style="width: 100%; height: calc(100vh - 400px)" :src="fileInfo.url" />
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -67,10 +80,15 @@ import store from '@/store'
 import { handlerAsk, getQAHistoryList, getQAHistoryDetail } from '@/api/als/intelligentQA'
 import graphECharts from '@/views/als/components/Charts/graph.vue'
 import axios from 'axios'
+import { getListByIdsApi } from '@/api/als/oss'
+//引入VueOfficeDocx组件
+import VueOfficeDocx from '@vue-office/docx'
+import VueOfficePdf from '@vue-office/pdf'
+import '@vue-office/docx/lib/index.css'
 
 export default {
   name: 'IntelligentQA',
-  components: { graphECharts },
+  components: { graphECharts, VueOfficeDocx, VueOfficePdf },
   data() {
     return {
       dialogVisible: false,
@@ -86,7 +104,8 @@ export default {
         ossID: '',
         graph: {}
       },
-      historyData: []
+      historyData: [],
+      fileInfo: {}
     }
   },
   mounted() {
@@ -158,11 +177,37 @@ export default {
           answer: '正在解析您的问题，请稍后......'
         })
         this.questionInput = ''
-        const { code, data } = await handlerAsk(sendInput)
+        // const { code, data } = await handlerAsk(sendInput)
+        const { code, data } = {
+          code: 200,
+          msg: '',
+          data: {
+            user_id: 'user',
+            answer: '解决办法为：更换电池或遥控器',
+            file_name: '排故手册',
+            // ossID: '225825878820585472',//pdf
+            ossID: '225840762526433280', //word
+            graph: {
+              data: [
+                { name: '202310150010', category: 'HMC' },
+                { name: '电视', category: '成品' },
+                { name: '电视遥控器失灵', category: '故障描述' },
+                { name: '家用电器', category: '系统' },
+                { name: '更换电池或遥控器', category: '维修策略' }
+              ],
+              links: [
+                { source: '202310150010', target: '电视', value: '成品' },
+                { source: '202310150010', target: '电视遥控器失灵', value: '故障描述' },
+                { source: '202310150010', target: '家用电器', value: '系统' },
+                { source: '202310150010', target: '更换电池或遥控器', value: '维修策略' }
+              ]
+            }
+          }
+        }
 
         if (code == 200) {
-          // let newData = JSON.parse(data)
-          const newData = this.handleData(JSON.parse(data))
+          // const newData = this.handleData(JSON.parse(data))
+          const newData = this.handleData(data)
           this.chatInfo.pop()
           this.chatInfo.push(newData)
         }
@@ -175,8 +220,8 @@ export default {
     },
 
     handleData(data) {
-      const graphData = eval('(' + data.graph + ')')
-      data.graph = graphData
+      // const graphData = eval('(' + data.graph + ')')
+      // data.graph = graphData
       const categories = []
       data.graph.data.forEach((node) => {
         const flag = categories.find((item) => {
@@ -191,11 +236,16 @@ export default {
     },
 
     handleMore(data) {
-      console.log('data', data)
+      this.getListById(data.ossID)
       this.moreData = data
       this.dialogVisible = true
     },
 
+    async getListById(id) {
+      const { data } = await getListByIdsApi(id)
+      this.fileInfo = data[0]
+    },
+
     handleClose() {
       this.dialogVisible = false
     },