feat: 上传文件显示可视化、表单对齐、读取文件内容

meas_web/src/components/FileUpload/index.vue

@@ -15,7 +15,7 @@
       ref="fileUpload"
     >
       <!-- 上传按钮 -->
-      <el-button size="mini" type="primary">选取文件</el-button>
+      <el-button size="mini" plain type="primary">选取文件</el-button>
       <!-- 上传提示 -->
       <div class="el-upload__tip" slot="tip" v-if="showTip">
         请上传
@@ -32,6 +32,7 @@
           <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
         </el-link>
         <div class="ele-upload-list__item-content-action">
+          <el-link :underline="false" v-if=isShowViev  @click="handleView(file.name)" type="success">可视化</el-link>
           <el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link>
         </div>
       </li>
@@ -66,7 +67,12 @@ export default {
     isShowTip: {
       type: Boolean,
       default: true
-    }
+    },
+    // 是否展示可视乎按钮
+    isShowViev: {
+      type: Boolean,
+      default: false
+    },
   },
   data() {
     return {
@@ -175,10 +181,21 @@ export default {
     // 获取文件名称
     getFileName(name) {
       // 如果是url那么取最后的名字 如果不是直接返回
+      // if (name.lastIndexOf("/") > -1) {
+      //   return name.slice(name.lastIndexOf("/") + 1);
+      // } else {
+      //   return name;
+      // }
       if (name.lastIndexOf("/") > -1) {
-        return name.slice(name.lastIndexOf("/") + 1);
+        const newName = name.slice(name.lastIndexOf("/") + 1)
+        const names = newName.split(".")
+        if ((names.size = 2) && (names[0].length > 19)) {
+          return newName.substring(0, names[0].length - 19) + '.' + names[1]
+        } else {
+          return newName
+        }
       } else {
-        return name;
+        return "";
       }
     },
     // 对象转成指定字符串分隔
@@ -189,6 +206,11 @@ export default {
         strs += list[i].url + separator;
       }
       return strs != '' ? strs.substr(0, strs.length - 1) : '';
+    },
+    // 可视化
+    handleView(index){
+      console.log("index",index);
+      this.$emit("fileView", index);
     }
   }
 };

meas_web/src/views/meas/envData/index.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="测量批次id" prop="measurementBatchId" label-width="100px">
+      <el-form-item label="测量批次id" prop="measurementBatchId" label-width="90px">
         <el-input v-model="queryParams.measurementBatchId" placeholder="请输入测量批次id" clearable
           @keyup.enter.native="handleQuery" />
       </el-form-item>
-      <el-form-item label="发动机状态" prop="engineStatus" label-width="100px">
+      <el-form-item label="发动机状态" prop="engineStatus" label-width="90px">
         <el-select v-model="queryParams.engineStatus" placeholder="请选择发动机状态" clearable>
           <el-option v-for="item in engineStatusOptions" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
@@ -108,11 +108,11 @@
       @pagination="getList" />
 
     <!-- 添加或修改测量环境数据对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="60%" append-to-body>
-      <el-form ref="form" :model="engineForm" :rules="rules" size="mini" label-width="90px">
+    <el-dialog :title="title" :visible.sync="open" width="70%" append-to-body>
+      <el-form ref="form" :model="engineForm" :rules="rules" size="mini" label-width="80px">
         <el-row type="flex" justify="space-around">
-          <el-form-item label="发动机型号" prop="model">
-            <el-select ref="engineModel" allow-create default-first-option v-model="engineForm.model" filterable
+          <el-form-item label="发动机型号" prop="model" label-width="90px">
+            <el-select v-model="engineForm.model"
               placeholder="请选择发动机型号">
               <el-option v-for="item in engineModelList" :key="item.id" :label="item.model" :value="item.id">
               </el-option>
@@ -130,9 +130,9 @@
           </el-form-item>
         </el-row>
       </el-form>
-      <el-form ref="form" :model="form" :rules="rules" size="mini" label-width="90px">
-        <el-form-item label="测量批次" prop="measurementBatch">
-          <el-select ref="measureBatch" allow-create default-first-option filterable v-model="form.measurementBatchId"
+      <el-form ref="form" :model="form" :rules="rules" size="mini" label-width="80px">
+        <el-form-item label="测量批次" prop="measurementBatch" style="margin-left: 5%;">
+          <el-select v-model="form.measurementBatchId"
             placeholder="请选择测量批次">
             <el-option v-for="item in measureBatchOptions" :key="item.id" :label="item.measurementBatch"
               :value="item.id">
@@ -151,7 +151,7 @@
         <el-form ref="form" :model="form" size="mini" :rules="rules" label-width="80px">
           <el-row type="flex" justify="space-around">
             <el-form-item label="发动机状态" label-width="100px" prop="engineStatus">
-              <el-select ref="engineStatus" allow-create default-first-option filterable v-model="form.engineStatus"
+              <el-select v-model="form.engineStatus"
                 placeholder="请选择发动机状态">
                 <el-option v-for="item in engineStatusOptions" :key="item.value" :label="item.label"
                   :value="item.value">
@@ -159,13 +159,13 @@
               </el-select>
             </el-form-item>
             <el-form-item label="角度" prop="angle">
-              <el-select ref="angle" allow-create default-first-option filterable v-model="form.angle"
+              <el-select v-model="form.angle"
                 placeholder="请输入角度">
                 <el-option v-for="item in angleOptions" :key="item.value" :label="item.label" :value="item.value">
                 </el-option>
               </el-select>
             </el-form-item>
-            <el-form-item label="涡轮后温度" prop="turbinePostTemp" label-width="100px">
+            <el-form-item label="涡轮后温度" prop="turbinePostTemp" label-width="90px">
               <file-upload :fileSize="0" :limit="1" :fileType="['txt']" v-model="form.turbinePostTemp" />
             </el-form-item>
           </el-row>
@@ -200,7 +200,7 @@
             <el-form-item label="CO₂浓度" prop="concentration">
               <el-input v-model="form.concentration" placeholder="请输入浓度（单位：mol）" />
             </el-form-item>
-            <el-col :span="8">
+            <el-col :span="7">
               <el-button type="primary" size="mini" @click="envDataSave">保 存</el-button>
             </el-col>
           </el-row>
@@ -213,7 +213,7 @@
             <el-form-item label="型号" prop="model">
               <el-input v-model="radiationForm.model" placeholder="请输入型号" />
             </el-form-item>
-            <el-form-item label="镜头视场角" prop="lensFView" label-width="100px">
+            <el-form-item label="镜头视场角" prop="lensFView" label-width="90px">
               <el-input v-model="radiationForm.lensFView" placeholder="请输入镜头视场角(单位：mrad)" />
             </el-form-item>
             <el-form-item label="增益" prop="gain">
@@ -229,7 +229,7 @@
               <el-input v-model="radiationForm.calTemp" placeholder="请输入标定温度" />
             </el-form-item>
             <el-form-item label="标定曲线" prop="calCurve">
-              <file-upload :fileSize="0" :limit="5" :fileType="['txt']" v-model="radiationForm.calCurve" />
+              <file-upload :fileSize="0" :limit="5" :fileType="['txt']" :isShowViev=true v-model="radiationForm.calCurve" v-on:fileView="fileView" />
             </el-form-item>
           </el-row>
         </el-form>
@@ -252,13 +252,12 @@
       </div>
       <div class="box">
         <span class="title">热像仪测量数据</span>
-
         <el-form ref="TIForm" :model="TIForm" size="mini" :rules="rules" label-width="80px">
           <el-row type="flex" justify="space-around">
             <el-form-item label="型号" prop="model">
               <el-input v-model="TIForm.model" placeholder="请输入型号" />
             </el-form-item>
-            <el-form-item label="镜头视场角" label-width="100px" prop="lensFView">
+            <el-form-item label="镜头视场角" label-width="90px" prop="lensFView">
               <el-select v-model="TIForm.lensFView" placeholder="请选择镜头视场角">
                 <el-option v-for="item in lensFViewOptions" :key="item.value" :label="item.label" :value="item.value">
                 </el-option>
@@ -339,7 +338,7 @@
         <el-button @click="addDialogVisible = false">取 消</el-button>
       </div>
     </el-dialog>
-    <el-dialog :title="title" :visible.sync="addMeasVisible" width="400px" append-to-body>
+    <el-dialog title="增加测量批次" :visible.sync="addMeasVisible" width="400px" append-to-body>
       <el-form ref="form" :model="addMeasBatchForm" :rules="rules" label-width="80px">
         <el-form-item label="发动机型号ID" label-width="110px" prop="engineId">
           <el-select v-model="addMeasBatchForm.engineId" placeholder="请选择发动机型号ID">
@@ -359,6 +358,9 @@
         <el-button @click="addMeasVisible=false">取 消</el-button>
       </div>
     </el-dialog>
+    <el-dialog title="数据可视化" :visible.sync="fileVisible" width="500px" append-to-body>
+      111
+    </el-dialog>
   </div>
 </template>
 
@@ -400,6 +402,7 @@ export default {
       open: false,
       addDialogVisible: false,
       addMeasVisible:false,
+      fileVisible:false,
       // 查询参数
       queryParams: {
         pageNum: 1,
@@ -514,6 +517,7 @@ export default {
         engineId:null,
         measurementBatch:null
       },
+      fileShowData:[]
     };
   },
   created() {
@@ -751,6 +755,33 @@ export default {
         `envData_${new Date().getTime()}.xlsx`
       );
     },
+    // 查看文件可视化
+    fileView(url1){
+      const url = `${process.env.VUE_APP_BASE_API}${url1}`
+      this.fetchLogFile(url)
+        .then(text => {
+          this.fileShowData=text.split('\n')
+          console.log("11",this.fileShowData);
+          this.fileVisible=true
+          
+        })
+        .catch(error => {
+          console.error('Failed to fetch the log file:', error)
+          this.$modal.msgSuccess("文件读取错误");
+        })
+    },
+    // 读取文件内容
+    async fetchLogFile(url){
+      try {
+        const response = await fetch(url, { method: 'GET' })
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`)
+        }
+        return await response.text()
+      } catch (error) {
+        throw error
+      }
+    }
   },
 };
 </script>
@@ -771,4 +802,13 @@ export default {
     font-size: 1rem;
   }
 }
+::v-deep .el-form-item .el-select {
+  width: 200px;
+}
+::v-deep .el-form-item .el-input {
+  width: 200px;
+}
+::v-deep .el-form-item .upload-file {
+  width: 200px;
+}
 </style>