井身结构图片

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

@@ -225,6 +225,17 @@ public class WellInfoController {
         }
     }
 
+    @GetMapping("/downFileImage")
+    public BaseResponse<String> downFileImage(String fileName) throws IOException {
+        Map<String, String> getParams = new HashMap<>();
+        getParams.put("fileName", fileName+".png");
+        getParams.put("filePath", "/user/ktkf/a1/sjh/JSJGSYT");
+
+        String reData = remoteHelper.getJson(getParams, appConfig.hdfshelperurl + "read", "UTF-8");
+
+        return RespGenerstor.success(reData);
+    }
+
     private byte[] doc2Docx(byte[] bytes) {
         long old = System.currentTimeMillis();
         ByteArrayOutputStream outputStream = new ByteArrayOutputStream();

vue/src/components/basic/chart/chart-image.vue

@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <preview-visible-file :height="height" :width="width" :img-url="imageUrl"></preview-visible-file>
+  </div>
+</template>
+
+<script lang="ts">
+import {defineComponent, ref} from 'vue';
+import PreviewVisibleFile from "@/components/file/previewVisibleFile.vue";
+import {get} from "@/api/common";
+
+export default defineComponent({
+  components: {PreviewVisibleFile},
+  props: {
+    height: {
+      type: Number,
+      default: 295
+    },
+    width: {
+      type: Number,
+      default: 500
+    },
+    wellname: {
+      type: String
+    },
+  },
+  name: 'ChartImage',
+  setup(props, context) {
+    const imageUrl = ref("")
+    console.log("ChartImage setup", props, context);
+     function getImageUrl (name: any) {
+         get('/wellInfo/downFileImage', {fileName: name}).then((data: any) => {
+
+           imageUrl.value = `data:image/png;base64,${data}`;
+         })
+    }
+    return{
+      imageUrl,
+      getImageUrl
+    }
+  },
+  mounted() {
+    // this.getImageUrl()
+  }
+})
+</script>
+
+<style lang="less" scoped></style>

vue/src/views/wellinfo/detail.vue

@@ -176,7 +176,10 @@
           </a-descriptions>
         </div>
         <div style="flex:1;">
-          <a-divider type="vertical" class="info-title" style="margin-top: 0px" dashed>相关文档</a-divider>
+          <a-divider type="vertical" class="info-title" style="margin-top: 0px" dashed>井身结构图片</a-divider>
+          <ChartImage ref="chartImageRef" style="margin-left: 10px"></ChartImage>
+
+          <a-divider type="vertical" class="info-title" dashed>相关文档</a-divider>
           <div style="margin-left:10px;border:1px solid #f0f0f0;padding:5px;">
             <a-input-search
               v-model:value="fileOptions.docKey"
@@ -361,13 +364,15 @@ import {download} from "@/utils/downloadFile";
 import {getPaginationTotalTitle} from "@/utils/common";
 import type {TableProps} from "ant-design-vue";
 import {message} from "ant-design-vue";
+import ChartImage from "@/components/basic/chart/chart-image.vue";
 
 export default defineComponent({
   name: 'wellinfoDetail',
-  components: {ChartProdDynmics, ChartMap, filePreview},
+  components: {ChartImage, ChartProdDynmics, ChartMap, filePreview},
   setup() {
     const tabsViewStore = useTabsViewStore();
     const route = useRoute();
+    const chartImageRef = ref();
     const cardSettings = ref({
       cardHeadStyle: {fontWeight: 'bold'},
       buttonStyle: {fontSize: '20px', cursor: 'pointer'},
@@ -505,6 +510,7 @@ export default defineComponent({
 
         fileOptions.businessType = wellData.dataIndexList.map(x => x.file_business_type);
         fileOptions.businessType = Array.from(new Set(fileOptions.businessType));
+        chartImageRef.value.getImageUrl(data.dataModel.well_common_name);
       })
       get('wellInfo/getExpendSetting', {wellId: id}).then(data => {
         if (data != null) {
@@ -588,7 +594,8 @@ export default defineComponent({
       dayjs, wellId, fileOptions, downFile, onBusTypeChange, handleTestHistoryChange, testHistoryPage,
       handleResizeColumn: (w, col) => {
         col.width = w;
-      }
+      },
+      chartImageRef
     };
   },
   created() {