井筒-文件预览

src/main/java/com/bowintek/practice/config/CorsConfig.java

@@ -27,6 +27,7 @@ public class CorsConfig implements WebMvcConfigurer {
     @Override
     public void addCorsMappings(CorsRegistry registry) {
 
+
         registry.addMapping("/appApi/**")
                 .allowedOrigins("*")
                 .allowCredentials(true)

src/main/java/com/bowintek/practice/config/WebConfiguration.java

@@ -67,6 +67,7 @@ public class WebConfiguration implements WebMvcConfigurer {
         excludePath.add("/a4gis/**");  //地图
         excludePath.add("/");  //首页跳转
         excludePath.add("/api/account/testpost");//单点登录
+        excludePath.add("/api/wellInfo/downFile");  //文件下载
         registry.addInterceptor(tokenInterceptor)
                 .addPathPatterns("/**")
                 .excludePathPatterns(excludePath);

src/main/java/com/bowintek/practice/controller/WellInfoController.java

@@ -124,15 +124,18 @@ public class WellInfoController {
     }
 
     @GetMapping("/downFile")
-    public void downFile(HttpServletResponse response, String well_id, String fileName) throws IOException {
+    public void downFile(HttpServletResponse response, Integer isShow, String filePath, String fileName) throws IOException {
         Map<String, String> getParams = new HashMap<>();
-        getParams.put("path", "1");
+        getParams.put("fileName", fileName);
+        getParams.put("filePath2", filePath);
 
-        String reData = remoteHelper.getJson(getParams, appConfig.hdfshelperurl + "read", "UTF-8");
+        String reData = remoteHelper.getJson(getParams, appConfig.hdfshelperurl + "test", "UTF-8");
         byte[] bytes = Base64.getDecoder().decode(reData);
         OutputStream os = response.getOutputStream();
 
-        response.setContentType("application/force-download");// 设置强制下载不打开
+        if (isShow == null || 1 != isShow) {
+            response.setContentType("application/force-download");// 设置强制下载不打开
+        }
         response.setContentType("multipart/form-data;charset=UTF-8");
         response.setHeader("Content-Length", String.valueOf(bytes.length));
         response.addHeader("Content-Disposition",

src/main/resources/application.yml

@@ -144,4 +144,4 @@ appconfig:
     client_id: 2d4a5b3c-dc6c-4231-914c-ca1a4d3a134b
     client_secret: e2afdc026c4e745714d2f3b2a2e393686c11f66f
 
-  hdfshelperurl: http://10.73.178.206:8078/hdfshelper/
+  hdfshelperurl: http://localhost:8078/hdfshelper/

src/main/resources/mapping/cquery/WellInfoCQuery.xml

@@ -112,6 +112,7 @@
         <if test="project_id!='' and project_id!=null">
             and well.project_id =#{project_id}
         </if>
+        order by well.well_common_name
     </select>
 
     <select id="getWellMapList" parameterType="com.bowintek.practice.vo.query.WellInfoParams"
@@ -151,6 +152,7 @@
         <if test="project_id!='' and project_id!=null">
             and well.project_id =#{project_id}
         </if>
+        order by well.well_common_name
     </select>
 
     <select id="selectBoreholeInterList" resultType="java.util.HashMap">

target/classes/application.yml

@@ -144,4 +144,4 @@ appconfig:
     client_id: 2d4a5b3c-dc6c-4231-914c-ca1a4d3a134b
     client_secret: e2afdc026c4e745714d2f3b2a2e393686c11f66f
 
-  hdfshelperurl: http://10.73.178.206:8078/hdfshelper/
+  hdfshelperurl: http://localhost:8078/hdfshelper/

vue/package-lock.json

@@ -2414,6 +2414,21 @@
         "@volar/vue-language-core": "0.40.1"
       }
     },
+    "@vue-office/docx": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmmirror.com/@vue-office/docx/-/docx-1.6.0.tgz",
+      "integrity": "sha512-OKEapOPq223uszA8mRSOWPhdfBchJa6sIqP46eMrMMe5RSUrG9m3QE/o0JBIaMgxDrtNd7aI9CvF2kDvb7G2hw=="
+    },
+    "@vue-office/excel": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmmirror.com/@vue-office/excel/-/excel-1.6.0.tgz",
+      "integrity": "sha512-LE/TqciTQxFLHOdlaE8Z1kBEAH6JOE1EShmkKDEv+tDAzrI3Zn+65jqb0dsSRx72L6TXuCx+zLQwDCmDx+bxxQ=="
+    },
+    "@vue-office/pdf": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmmirror.com/@vue-office/pdf/-/pdf-1.6.0.tgz",
+      "integrity": "sha512-SRv+gOhHlk2J+SdivvVvum93FuI4sU3XIh6u1jFkNr3+cXxRjMT2PTSxQO9b/1NmGB50oc+p+C+DrgNmMW4/vQ=="
+    },
     "@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",
@@ -13554,6 +13569,11 @@
         "@codemirror/view": "6.x"
       }
     },
+    "vue-demi": {
+      "version": "0.14.6",
+      "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.6.tgz",
+      "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w=="
+    },
     "vue-eslint-parser": {
       "version": "9.0.3",
       "resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-9.0.3.tgz",
@@ -13685,20 +13705,10 @@
         "is-plain-object": "5.0.0"
       }
     },
-    "vuedraggable": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmmirror.com/vuedraggable/-/vuedraggable-4.1.0.tgz",
-      "integrity": "sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==",
-      "requires": {
-        "sortablejs": "1.14.0"
-      },
-      "dependencies": {
-        "sortablejs": {
-          "version": "1.14.0",
-          "resolved": "https://registry.npmmirror.com/sortablejs/-/sortablejs-1.14.0.tgz",
-          "integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w=="
-        }
-      }
+    "vue3-pdf-app": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/vue3-pdf-app/-/vue3-pdf-app-1.0.3.tgz",
+      "integrity": "sha512-qegWTIF4wYKiocZ3KreB70wRXhqSdXWbdERDyyKzT7d5PbjKbS9tD6vaKkCqh3PzTM84NyKPYrQ3iuwJb60YPQ=="
     },
     "w3c-keyname": {
       "version": "2.2.8",

vue/package.json

@@ -36,6 +36,9 @@
     "@codemirror/lang-sql": "^6.x",
     "@codemirror/language": "^6.x",
     "@codemirror/theme-one-dark": "^6.x",
+    "@vue-office/docx": "^1.6.0",
+    "@vue-office/excel": "^1.6.0",
+    "@vue-office/pdf": "^1.6.0",
     "@vueuse/core": "~9.1.0",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^5.1.12",
@@ -61,10 +64,10 @@
     "uuid": "^9.0.1",
     "vue": "3.2.47",
     "vue-codemirror": "^6.1.1",
+    "vue-demi": "^0.14.6",
     "vue-i18n": "9.2.2",
     "vue-router": "^4.1.6",
     "vue-types": "~4.2.1",
-    "vuedraggable": "^4.1.0",
     "xlsx": "~0.18.5"
   },
   "devDependencies": {

vue/public/appconfig.json

@@ -1,6 +1,5 @@
 {
   "isDev": true,
   "SSOLoginUrl": "http://www.baidu.com",
- /* //"huabeiHost": "http://10.73.178.206:8077/"*/
   "huabeiHost": "http://192.168.0.68:8077/"
 }

vue/src/components/basic/file-preview/index.vue

@@ -0,0 +1,91 @@
+<template>
+  <a-button type="link" size="small" @click="loadFile">预览</a-button>
+  <a-modal :visible="visible" :ok-button-props="{ style: { display: 'none' } }"
+           wrap-class-name="full-modal" style="text-align: center"
+           cancel-text="关闭" @cancel="visible = !visible">
+    <a-spin tip="加载中..." size="small" :spinning="spinning">
+      <vue-office-excel v-if="fileSuffix=='xlsx'||fileSuffix=='xls'" :src="previewUrl" style="height: 90vh;"
+                        @rendered="rendered" @error="renderedError"/>
+      <vue-office-docx v-else-if="fileSuffix=='docx'||fileSuffix=='doc'" :src="previewUrl" @rendered="rendered"
+                      @error="renderedError"
+                      style="width: 100%; height: 90vh;"/>
+       <vue-office-pdf v-else  :src="previewUrl" class="docx-calss" @rendered="rendered"
+                        @error="renderedError" style="height: 90vh;"/>
+    </a-spin>
+  </a-modal>
+</template>
+<script lang="ts">
+import {defineComponent, ref} from 'vue';
+import {message as $message} from "ant-design-vue/lib/components";
+//引入VueOfficeDocx组件
+import VueOfficeDocx from '@vue-office/docx'
+import '@vue-office/docx/lib/index.css'
+import VueOfficePdf from '@vue-office/pdf'
+//引入VueOfficeExcel组件
+import VueOfficeExcel from '@vue-office/excel'
+import '@vue-office/excel/lib/index.css'
+import {handleloadByGet} from "@/utils/downloadFile";
+
+export default defineComponent({
+  name: 'b-file-preview',
+  components: {
+    VueOfficeDocx, VueOfficePdf, VueOfficeExcel
+  },
+  props: {
+    fileName: {type: String, default: ""},
+    filePath: {type: String, default: ""},
+    accept: {
+      type: String,
+      default: '.docx,.xlsx,.pdf',
+    },
+  },
+  setup(props) {
+    const visible = ref<boolean>(false);
+    const spinning = ref<boolean>(false);
+    const previewUrl = ref<Blob>();
+    const fileSuffix = props.fileName?.substring(props.fileName?.lastIndexOf('.') + 1);
+
+    function loadFile() {
+      if (props.accept?.indexOf(fileSuffix) < 0) {
+        $message.error("不支持预览的文件格式！");
+        return;
+      }
+      spinning.value =true;
+      handleloadByGet("/api/wellInfo/downFile", {
+        isShow: 1,
+        fileName: props.fileName,
+        filePath: props.filePath
+      }, "获取文件失败！").then(res => {
+        previewUrl.value=res.data;
+        if (previewUrl.value == undefined) {
+          $message.error("文件加载失败！");
+          return;
+        }
+        visible.value = true;
+      })
+    }
+
+    function rendered() {
+      console.log("渲染完成");
+      spinning.value = false;
+    }
+
+    function renderedError(ex) {
+      console.log("渲染出错", ex);
+      spinning.value = false;
+    }
+
+    return {
+      visible, fileSuffix,
+      previewUrl,
+      loadFile,
+      rendered, renderedError,
+      spinning,
+    };
+  }
+})
+</script>
+<style lang="less">
+
+</style>
+

vue/src/utils/downloadFile.ts

@@ -95,8 +95,8 @@ export function downloadByUrl({
   });
 }
 
-export function download(well_id, fileName) {
-  return handleDownloadByGet("/api/wellInfo/downFile", {well_id: well_id,fileName:fileName}, fileName, "下载失败！");
+export function download(filePath, fileName) {
+  return handleDownloadByGet("/api/wellInfo/downFile", {filePath: filePath,fileName:fileName}, fileName, "下载失败！");
 };
 
 export function downloadTempFile(fileName) {
@@ -203,3 +203,33 @@ const downloadFile = (res, fileName, errorMsg) => {
 
 }
 
+
+export const  handleloadByGet = async <T = any>(url, params, errorMsg): Promise<T> => {
+  try {
+    const token = Storage.get(ACCESS_TOKEN_KEY);
+    const res = await axios.get(url, {
+      params: params,
+      responseType: 'blob',//设置返回类型
+      //设置token
+      headers: {
+        Authorization: token,
+      },
+    },).then((res) => {
+      if(res.status==200) {
+       // const url = window.URL || window.webkitURL;
+        //let link = url.createObjectURL(res.data);
+        return Promise.resolve({data: res.data, success: true});
+      }else{
+        return Promise.resolve({success: false});
+      }
+    }, (error: any) => {
+      $message.error((errorMsg || "") + error.message);
+      return Promise.resolve({success: false, ...error});
+    });
+
+    return Promise.resolve(res);
+  } catch (e: any) {
+    $message.error((errorMsg || "") + e.message);
+    return Promise.resolve({success: false, ...e});
+  }
+};

vue/src/views/position/test.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="card-search">
-    <a-divider orientation="left">历史搜索使用方式</a-divider>
+<!--    <a-divider orientation="left">历史搜索使用方式</a-divider>
     <a-form ref="formRef" name="advanced_search" class="ant-advanced-search-form"
             :model="formState"
             @finish="onFinish">
@@ -10,7 +10,7 @@
             name="keyString"
             label="关键字"
             :label-col="{span:3}">
-            <!--AutoComplete继承至vue-->
+            &lt;!&ndash;AutoComplete继承至vue&ndash;&gt;
             <QueryHistoryComplete ref="queryHistoryComplete" v-model:value="formState.keyString"></QueryHistoryComplete>
           </a-form-item>
         </a-col>
@@ -22,7 +22,7 @@
 
     <a-divider orientation="left">热门搜索使用方式，实际应用改样式即可</a-divider>
     <div style="width: 600px;">
-      <!--热门搜索历史使用示例，实际应用改样式即可-->
+      &lt;!&ndash;热门搜索历史使用示例，实际应用改样式即可&ndash;&gt;
       <QueryHistoryList ref="queryHistoryList" :maxRows="20"></QueryHistoryList>
     </div>
 
@@ -32,9 +32,9 @@
         <template #bodyCell="{ column, text }">
           <template v-if="column.dataIndex === 'chart'">
             <div style="height:40px">
-              <!--列表单元格中显示曲线图，数据需要根据业务库整理-->
-              <!--timeType day month year-->
-              <!--dataType gas oil-->
+              &lt;!&ndash;列表单元格中显示曲线图，数据需要根据业务库整理&ndash;&gt;
+              &lt;!&ndash;timeType day month year&ndash;&gt;
+              &lt;!&ndash;dataType gas oil&ndash;&gt;
               <ChartCell :timeType="('month')" :dataType="('oil')" :wellId="('吉45-144(A2)')" :lineColor="('#FF0000')"></ChartCell>
             </div>
           </template>
@@ -50,7 +50,11 @@
     <a-divider orientation="left">地图</a-divider>
     <div style="width:1000px;height: 400px">
       <ChartMap :wellId="('吉45-144(A2)')"></ChartMap>
-    </div>
+    </div>-->
+    <vue-office-excel src="https://501351981.github.io/vue-office/examples/dist/static/test-files/test.xlsx" style="height: 100vh;" @error="rendered"/>
+    <vue-office-pdf src="https://501351981.github.io/vue-office/examples/dist/static/test-files/test.pdf" @error="rendered" style="width: 100%; height: 100%"/>
+<!--    <vue-office-docx src="https://501351981.github.io/vue-office/examples/dist/static/test-files/test.docx" class="docx-calss" />
+    <vue-pdf-app :config="config" style="height: 100vh;" pdf="/api/wellInfo/downFile?isShow=1&fileName=1.pdf"></vue-pdf-app>-->
   </div>
 </template>
 
@@ -62,17 +66,42 @@ import QueryHistoryComplete from '@/components/basic/querylog/history-complete.v
 import ChartCell from '@/components/basic/chart/chart-cell.vue'
 import ChartProdDynmics from '@/components/basic/chart/chart-prod-dynamics.vue'
 import ChartMap from '@/components/basic/chart/chart-map.vue'
+//import VuePdfApp from "vue3-pdf-app";
+// import this to use default icons for buttons
+//import "vue3-pdf-app/dist/icons/main.css";
+import {handleloadByGet} from "@/utils/downloadFile";
+//引入VueOfficeDocx组件
+import VueOfficeDocx from '@vue-office/docx'
+//引入相关样式
+import '@vue-office/docx/lib/index.css'
+
+import VueOfficePdf from '@vue-office/pdf'
+//引入VueOfficeExcel组件
+import VueOfficeExcel from '@vue-office/excel'
+//引入相关样式
+import '@vue-office/excel/lib/index.css'
 
 export default defineComponent({
   name: 'QueryTest',
-  components: {QueryHistoryList, QueryHistoryComplete, ChartCell, ChartProdDynmics, ChartMap},
+  components: {QueryHistoryList, QueryHistoryComplete, ChartCell,
+    ChartProdDynmics,ChartMap,VueOfficeDocx,VueOfficePdf,VueOfficeExcel},
   setup() {
     const route = useRoute();
     const queryHistoryComplete = ref<typeof QueryHistoryComplete>();
     const formState = ref({
       keyString: ""
     });
+    const config = {
+      sidebar: false,
+      secondaryToolbar: false,
+      toolbar: false,
+      errorWrapper: false,
+    };
+    const fileUrl=ref('');
 
+    handleloadByGet( "/api/wellInfo/downFile", {fileId: 'fileId'}, "下载失败！").then(res=>{
+      fileUrl.value=res.link;
+    })
     console.log(route, formState);
 
     watch(formState.value, async (newQuestion) => {
@@ -97,14 +126,17 @@ export default defineComponent({
       { key: '2', name: 'Jim Green', age: 42, address: 'London No. 2 Lake Park, London No. 2 Lake Park', tags: ['loser']},
       { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park', tags: ['cool', 'teacher']},
     ];
-
+    const rendered=(ex)=>
+    {
+      console.log("渲染完成",ex);
+    }
     return {
       formState,
       onFinish,
       queryHistoryComplete,
-
+      rendered,
       columns,
-      data
+      data,fileUrl,config
     };
   }
 });

vue/src/views/wellinfo/index.vue

@@ -266,24 +266,31 @@
       </div>
     </div>
     <a-modal v-model:visible="isShowDoc" title="相关文档" :footer="null" @onCancel="isShowDoc=false">
-      <a-list item-layout="horizontal" :data-source="docList">
-        <template #renderItem="{ item }">
-          <a-list-item>
-            <template #actions>
-              <a style="color:#1890ff" @click="downFile(item)">下载</a>
-            </template>
-            <a-list-item-meta
-              :description="item.file_business_type">
-              <template #title>
-                <a href="">{{ item.file_name }}</a>
-              </template>
-              <template #avatar>
-                <img src="~@/assets/images/file.png"/>
+      <a-input-search
+        v-model:value="docKey"
+        placeholder="查找文档" allow-clear
+      />
+      <div style="max-height:300px;overflow-y:scroll;margin-top:10px;">
+        <a-list item-layout="horizontal" :data-source="docList">
+          <template #renderItem="{ item }">
+            <a-list-item v-if="item.file_name.indexOf(docKey)>-1||docKey==''">
+              <template #actions>
+                <filePreview :fileName="item.file_name" :filePath="item.storage_path"></filePreview>
+                <a-button type="link" @click="downFile(item)" functioncode="T010502" danger>下载</a-button>
               </template>
-            </a-list-item-meta>
-          </a-list-item>
-        </template>
-      </a-list>
+              <a-list-item-meta
+                :description="item.file_business_type">
+                <template #title>
+                  <a href="">{{ item.file_name }}</a>
+                </template>
+                <template #avatar>
+                  <img src="~@/assets/images/file.png"/>
+                </template>
+              </a-list-item-meta>
+            </a-list-item>
+          </template>
+        </a-list>
+      </div>
     </a-modal>
   </div>
 </template>
@@ -299,11 +306,12 @@ import {useTabsViewStore} from "@/store/modules/tabsView";
 import ChartCell from '@/components/basic/chart/chart-cell.vue'
 import ChartMap from '@/components/basic/chart/chart-map.vue'
 import {download} from "@/utils/downloadFile";
-import {columns,filterColumns,formState,getTdColor} from './table'
+import {columns, filterColumns, formState, getTdColor} from './table'
+import filePreview from '@/components/basic/file-preview/index.vue'
 
 export default defineComponent({
   name: 'wellinfoindex',
-  components: {ChartCell, ChartMap},
+  components: {ChartCell, ChartMap, filePreview},
   setup() {
 
     const route = useRoute();
@@ -320,6 +328,7 @@ export default defineComponent({
     const data = ref([{children: [], label: '', value: ''}]);
     const viewModel = ref("list");
     const tabsViewStore = useTabsViewStore();
+    const docKey = ref('');
     const docList = ref([]);
     const wellTypeList = ref([{label: "直井", value: "直井"}, {label: "定向井", value: "定向井"}, {
       label: "分支井",
@@ -332,8 +341,7 @@ export default defineComponent({
     };
 
     const downFile = (record: any) => {
-
-      download(record.fileId, record.file_name);
+      download(record.file_business_type, record.file_name);
     };
     const resetFields = function () {
       let keys: string[] = Object.keys(formState);
@@ -545,7 +553,7 @@ export default defineComponent({
       route, selectedRowKeys, loading, activeTab, showTree, onSelectChange, data,
       expand, onQuery, loadData, onRangeChange, showQuery, wellTypeList, replaceFields,
       formRef, viewModel, handleTableChange, detail,
-      formState, isShowDoc, showDoc, docList, resetFields, showColumnType, filterColumns,
+      formState, isShowDoc, showDoc, docKey, docList, resetFields, showColumnType, filterColumns,
       labelCol, getTdColor, downFile,
       tabChange, onCheckboxChange, treeRef, colspan,
       treeOnExpand,