feat: 更改图片上传列表名称、echarts简单封装、曲线图展示、灰度图展示（ing）

meas_web/src/components/ImageUpload/index.vue

@@ -99,9 +99,9 @@ export default {
           this.fileList = list.map(item => {
             if (typeof item === "string") {
               if (item.indexOf(this.baseUrl) === -1) {
-                  item = { name: this.baseUrl + item, url: this.baseUrl + item };
+                  item = { name: this.getFileName(item), url: this.baseUrl + item };
               } else {
-                  item = { name: item, url: item };
+                item = { name: this.getFileName(item), url: item };
               }
             }
             return item;
@@ -193,6 +193,20 @@ export default {
         this.$modal.closeLoading();
       }
     },
+    // 获取文件名称
+    getFileName(name) {
+      if (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 "";
+      }
+    },
     // 预览
     handlePictureCardPreview(file) {
       this.dialogImageUrl = file.url;

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

@@ -0,0 +1,71 @@
+<template>
+    <div :class="className" :style="{height:height,width:width}" />
+  </template>
+  
+  <script>
+  import * as echarts from 'echarts'
+  require('echarts/theme/macarons') // echarts theme
+  import resize from '../../dashboard/mixins/resize'
+  
+  export default {
+    name: "ECharts",
+    mixins: [resize],
+    props: {
+      className: {
+        type: String,
+        default: 'chart'
+      },
+      width: {
+        type: String,
+        default: '100%'
+      },
+      height: {
+        type: String,
+        default: '400px'
+      },
+      autoResize: {
+        type: Boolean,
+        default: true
+      },
+      chartData: {
+        type: Object,
+        required: true
+      }
+    },
+    data() {
+      return {
+        chart: null
+      }
+    },
+    watch: {
+      chartData: {
+        deep: true,
+        handler(val) {
+          this.setOptions(val)
+        }
+      }
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.initChart()
+      })
+    },
+    beforeDestroy() {
+      if (!this.chart) {
+        return
+      }
+      this.chart.dispose()
+      this.chart = null
+    },
+    methods: {
+      initChart() {
+        this.chart = echarts.init(this.$el, 'macarons')
+        this.setOptions(this.chartData)
+      },
+      setOptions(chartData) {
+        this.chart.setOption(chartData)
+      }
+    }
+  }
+  </script>
+  

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

@@ -112,8 +112,7 @@
       <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" label-width="90px">
-            <el-select v-model="engineForm.model"
-              placeholder="请选择发动机型号">
+            <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>
               <el-option :value="undefined" disabled style="cursor: pointer">
@@ -131,19 +130,19 @@
         </el-row>
       </el-form>
       <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-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">
               <span style="float: left">{{ item.id }}</span>
-              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.measurementBatch }}</span>
+              <span style="float: right; color: #8492a6; font-size: 13px">{{
+      item.measurementBatch
+    }}</span>
             </el-option>
             <el-option :value="undefined" disabled style="cursor: pointer">
-                <el-button type="text" @click="onClickBtn('measBatch')"><i class="el-icon-plus"></i> 增加测量批次</el-button>
-              </el-option>
+              <el-button type="text" @click="onClickBtn('measBatch')"><i class="el-icon-plus"></i> 增加测量批次</el-button>
+            </el-option>
           </el-select>
-
         </el-form-item>
       </el-form>
       <div class="box">
@@ -151,16 +150,14 @@
         <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 v-model="form.engineStatus"
-                placeholder="请选择发动机状态">
+              <el-select v-model="form.engineStatus" placeholder="请选择发动机状态">
                 <el-option v-for="item in engineStatusOptions" :key="item.value" :label="item.label"
                   :value="item.value">
                 </el-option>
               </el-select>
             </el-form-item>
             <el-form-item label="角度" prop="angle">
-              <el-select v-model="form.angle"
-                placeholder="请输入角度">
+              <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>
@@ -208,7 +205,8 @@
       </div>
       <div class="box">
         <span class="title">光谱辐射计测量数据</span>
-        <el-form ref="radiationForm" size="mini" :model="radiationForm" :rules="rules" label-width="80px">
+        <el-form ref="radiationForm" size="mini" :model="radiationForm" :rules="rules" :disabled="disabled"
+          label-width="80px">
           <el-row type="flex" justify="space-around">
             <el-form-item label="型号" prop="model">
               <el-input v-model="radiationForm.model" placeholder="请输入型号" />
@@ -221,7 +219,6 @@
             </el-form-item>
           </el-row>
           <el-row type="flex" justify="space-around">
-
             <el-form-item label="背景数据" prop="backgroundData">
               <file-upload :fileSize="0" :limit="1" :fileType="['lgm']" v-model="radiationForm.backgroundData" />
             </el-form-item>
@@ -229,13 +226,15 @@
               <el-input v-model="radiationForm.calTemp" placeholder="请输入标定温度" />
             </el-form-item>
             <el-form-item label="标定曲线" prop="calCurve">
-              <file-upload :fileSize="0" :limit="5" :fileType="['txt']" :isShowViev=true v-model="radiationForm.calCurve" v-on:fileView="fileView" />
+              <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>
-        <div class="box" style="margin-bottom: 15px;">
+        <div class="box" style="margin-bottom: 15px">
           <span class="title">目标数据</span>
-          <el-form ref="radiationForm" size="mini" :model="radiationForm" :rules="rules" label-width="80px">
+          <el-form ref="radiationForm" size="mini" :model="radiationForm" :disabled="disabled" :rules="rules"
+            label-width="80px">
             <el-row type="flex" justify="space-around">
               <el-form-item label="原始数据" prop="rawData">
                 <file-upload :fileSize="0" :limit="5" :fileType="['txt']" v-model="radiationForm.rawData" />
@@ -252,7 +251,7 @@
       </div>
       <div class="box">
         <span class="title">热像仪测量数据</span>
-        <el-form ref="TIForm" :model="TIForm" size="mini" :rules="rules" label-width="80px">
+        <el-form ref="TIForm" :model="TIForm" size="mini" :rules="rules" :disabled="disabled" label-width="80px">
           <el-row type="flex" justify="space-around">
             <el-form-item label="型号" prop="model">
               <el-input v-model="TIForm.model" placeholder="请输入型号" />
@@ -275,8 +274,7 @@
               <el-select v-model="TIForm.fps" placeholder="请选择帧率">
                 <el-option v-for="item in fpsOptions" :key="item.value" :label="item.label" :value="item.value">
                 </el-option>
-              </el-select>
-            </el-form-item><el-form-item label="波段" prop="spectralBand">
+              </el-select> </el-form-item><el-form-item label="波段" prop="spectralBand">
               <el-select v-model="TIForm.spectralBand" placeholder="请选择波段">
                 <el-option v-for="item in spectralBandOptions" :key="item.value" :label="item.label"
                   :value="item.value">
@@ -292,7 +290,8 @@
               <file-upload :fileSize="0" :limit="1" :fileType="['txt']" v-model="TIForm.tempCal" />
             </el-form-item>
             <el-form-item label="辐射亮度" prop="radiance">
-              <file-upload :fileSize="0" :limit="1" :fileType="['txt']" v-model="TIForm.radiance" />
+              <file-upload :fileSize="0" :limit="1" :fileType="['txt']" v-model="TIForm.radiance" :isShowViev="true"
+                v-on:fileView="fileView2" />
             </el-form-item>
             <el-form-item label="辐射照度" prop="radIllumination">
               <file-upload :fileSize="0" :limit="1" :fileType="['txt']" v-model="TIForm.radIllumination" />
@@ -309,7 +308,8 @@
       </div>
       <div class="box">
         <span class="title">透过率数据</span>
-        <el-form ref="TransmittanceForm" :model="TransmittanceForm" :rules="rules" label-width="80px">
+        <el-form ref="TransmittanceForm" :model="TransmittanceForm" :rules="rules" :disabled="disabled"
+          label-width="80px">
           <el-row type="flex" justify="space-around">
             <el-form-item label="原始数据" prop="rawData">
               <file-upload :fileSize="0" :limit="1" :fileType="['txt']" v-model="TransmittanceForm.rawData" />
@@ -342,10 +342,11 @@
       <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">
-            <el-option v-for="item in engineModelList" :key="item.id" :label="item.model"
-              :value="item.id">
+            <el-option v-for="item in engineModelList" :key="item.id" :label="item.model" :value="item.id">
               <span style="float: left">{{ item.id }}</span>
-              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.model }}</span>
+              <span style="float: right; color: #8492a6; font-size: 13px">{{
+      item.model
+    }}</span>
             </el-option>
           </el-select>
         </el-form-item>
@@ -355,11 +356,11 @@
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="addMeas()">确 定</el-button>
-        <el-button @click="addMeasVisible=false">取 消</el-button>
+        <el-button @click="addMeasVisible = false">取 消</el-button>
       </div>
     </el-dialog>
-    <el-dialog title="数据可视化" :visible.sync="fileVisible" width="500px" append-to-body>
-      111
+    <el-dialog title="数据可视化" :visible.sync="fileVisible" width="70%" append-to-body>
+      <ECharts :chartData="chartData" />
     </el-dialog>
   </div>
 </template>
@@ -372,14 +373,34 @@ import {
   addEnvData,
   updateEnvData,
 } from "@/api/meas/envData";
-import { listEngineModel, addEngineModel, getEngineModel, updateEngineModel } from "@/api/meas/engineModel";
-import { listMeasBatch,addMeasBatch } from "@/api/meas/measBatch";
-import { addRadiation, getRadiation, updateRadiation, listRadiation } from "@/api/meas/radiation";
-import { addThermalImagerTesDdata, listThermalImagerTesDdata, updateThermalImagerTesDdata } from "@/api/meas/thermalImagerTesDdata";
-import { addTransmissionRate, listTransmissionRate, updateTransmissionRate } from "@/api/meas/transmissionRate";
+import {
+  listEngineModel,
+  addEngineModel,
+  getEngineModel,
+  updateEngineModel,
+} from "@/api/meas/engineModel";
+import { listMeasBatch, addMeasBatch } from "@/api/meas/measBatch";
+import {
+  addRadiation,
+  getRadiation,
+  updateRadiation,
+  listRadiation,
+} from "@/api/meas/radiation";
+import {
+  addThermalImagerTesDdata,
+  listThermalImagerTesDdata,
+  updateThermalImagerTesDdata,
+} from "@/api/meas/thermalImagerTesDdata";
+import {
+  addTransmissionRate,
+  listTransmissionRate,
+  updateTransmissionRate,
+} from "@/api/meas/transmissionRate";
+import ECharts from "./ECharts.vue";
 
 export default {
   name: "EnvData",
+  components: { ECharts },
   data() {
     return {
       // 遮罩层
@@ -401,8 +422,8 @@ export default {
       // 是否显示弹出层
       open: false,
       addDialogVisible: false,
-      addMeasVisible:false,
-      fileVisible:false,
+      addMeasVisible: false,
+      fileVisible: false,
       // 查询参数
       queryParams: {
         pageNum: 1,
@@ -512,18 +533,20 @@ export default {
       spectralBandOptions: [],
       measureBatchOptions: [],
       engineModelList: [],
-      engineModel: '',
-      addMeasBatchForm:{
-        engineId:null,
-        measurementBatch:null
+      engineModel: "",
+      addMeasBatchForm: {
+        engineId: null,
+        measurementBatch: null,
       },
-      fileShowData:[]
+      fileShowData: [],
+      disabled: false,
+      chartData: {},
     };
   },
   created() {
     this.getList();
-    this.getListEngineModel()
-    this.getListMeasBatch()
+    this.getListEngineModel();
+    this.getListMeasBatch();
   },
   methods: {
     /** 查询测量环境数据列表 */
@@ -536,19 +559,19 @@ export default {
       });
     },
     // 获取发电机List
-    getListEngineModel(){
+    getListEngineModel() {
       this.loading = true;
-      const data = {}
-      listEngineModel(data).then(response => {
-        this.engineModelList = response.rows
+      const data = {};
+      listEngineModel(data).then((response) => {
+        this.engineModelList = response.rows;
         this.loading = false;
       });
     },
     // 获取测量批次List
-    getListMeasBatch(){
-      const data = {}
+    getListMeasBatch() {
+      const data = {};
       this.loading = true;
-      listMeasBatch(data).then(response => {
+      listMeasBatch(data).then((response) => {
         this.measureBatchOptions = response.rows;
         this.loading = false;
       });
@@ -561,35 +584,51 @@ export default {
     // 保存环境参数
     envDataSave() {
       // 保存环境参数，返回一个环境数据ID
+      this.$refs["form"].validate((valid) => {
+        console.log("11", valid, this.form);
+        if (valid) {
+          if (this.form.id != null) {
+            updateEnvData(this.form).then((response) => {
+              this.$modal.msgSuccess("修改成功");
+              this.getList();
+            });
+          } else {
+            addEnvData(this.form).then((response) => {
+              this.$modal.msgSuccess("新增成功");
+              this.getList();
+            });
+          }
+        }
+      });
     },
     // 点击增加按钮
     onClickBtn(type) {
-      if(type==='engine') this.addDialogVisible = true
-      else if(type==='measBatch') this.addMeasVisible = true
+      if (type === "engine") this.addDialogVisible = true;
+      else if (type === "measBatch") this.addMeasVisible = true;
     },
     // 增加发动机型号
     addEngine() {
       this.loading = true;
       const form = {
-        model: this.engineModel
-      }
-      addEngineModel(form).then(response => {
+        model: this.engineModel,
+      };
+      addEngineModel(form).then((response) => {
         this.$modal.msgSuccess("新增成功");
         this.addDialogVisible = false;
-        this.getListEngineModel()
-        this.engineModel=null
+        this.getListEngineModel();
+        this.engineModel = null;
       });
     },
     // 增加测量批次
-    addMeas(){
-      addMeasBatch(this.addMeasBatchForm).then(response => {
+    addMeas() {
+      addMeasBatch(this.addMeasBatchForm).then((response) => {
         this.$modal.msgSuccess("新增成功");
         this.addMeasVisible = false;
         this.getListMeasBatch();
-        this.addMeasBatchForm={
-          engineId:null,
-          measurementBatch:null
-        }
+        this.addMeasBatchForm = {
+          engineId: null,
+          measurementBatch: null,
+        };
       });
     },
     // 表单重置
@@ -617,7 +656,7 @@ export default {
         model: null,
         geometryFiles: null,
         geometryImage: null,
-      }
+      };
       this.radiationForm = {
         model: null,
         lensFView: null,
@@ -628,7 +667,7 @@ export default {
         rawData: null,
         radiance1: null,
         radiance2: null,
-      }
+      };
       this.TIForm = {
         model: null,
         lensFView: null,
@@ -640,12 +679,12 @@ export default {
         radiance: null,
         radIllumination: null,
         radTemp: null,
-      }
+      };
       this.TransmittanceForm = {
         rawData: null,
         curve1: null,
         curve2: null,
-      }
+      };
       this.resetForm("form");
       this.resetForm("engineForm");
       this.resetForm("radiationForm");
@@ -678,22 +717,22 @@ export default {
     handleUpdate(row) {
       this.reset();
       const measId = {
-        measurementBatchId: row.measurementBatchId
-      }
+        measurementBatchId: row.measurementBatchId,
+      };
       console.log("measId", measId);
       const id = row.id || this.ids;
       // 通过measId来查找，不具有唯一性吧。一个测量批次可以绑定多个光谱辐射数据吧。。。。
-      listEngineModel(measId).then(response => {
+      listEngineModel(measId).then((response) => {
         console.log("getEngineModelRes", response);
         this.engineForm = response.rows[0];
       });
-      listRadiation(measId).then(response => {
+      listRadiation(measId).then((response) => {
         this.radiationForm = response.rows[0];
       });
-      listThermalImagerTesDdata(measId).then(response => {
+      listThermalImagerTesDdata(measId).then((response) => {
         this.TIForm = response.rows[0];
       });
-      listTransmissionRate(measId).then(response => {
+      listTransmissionRate(measId).then((response) => {
         this.TransmittanceForm = response.rows[0];
       });
       getEnvData(id).then((response) => {
@@ -704,15 +743,18 @@ export default {
     },
     /** 提交按钮 */
     submitForm() {
-      this.TIForm['measurementBatchId'] = this.form.measurementBatchId
-      this.TransmittanceForm['measurementBatchId'] = this.form.measurementBatchId
-      this.radiationForm['measurementBatchId'] = this.form.measurementBatchId
+      this.TIForm["measurementBatchId"] = this.form.measurementBatchId;
+      this.TransmittanceForm["measurementBatchId"] =
+        this.form.measurementBatchId;
+      this.radiationForm["measurementBatchId"] = this.form.measurementBatchId;
       this.$refs["form"].validate((valid) => {
         if (valid) {
           if (this.form.id != null) {
             updateRadiation(this.radiationForm).then((response) => { });
             updateThermalImagerTesDdata(this.TIForm).then((response) => { });
-            updateTransmissionRate(this.TransmittanceForm).then((response) => { });
+            updateTransmissionRate(this.TransmittanceForm).then(
+              (response) => { }
+            );
             updateEnvData(this.form).then((response) => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
@@ -756,32 +798,154 @@ export default {
       );
     },
     // 查看文件可视化
-    fileView(url1){
-      const url = `${process.env.VUE_APP_BASE_API}${url1}`
+    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
-          
+        .then((text) => {
+          this.fileShowData = text.split("\r\n");
+          this.handleLineChart(this.fileShowData);
+          this.fileVisible = true;
         })
-        .catch(error => {
-          console.error('Failed to fetch the log file:', error)
+        .catch((error) => {
+          console.error("Failed to fetch the log file:", error);
           this.$modal.msgSuccess("文件读取错误");
+        });
+    },
+    fileView2(url1) {
+      const url = `${process.env.VUE_APP_BASE_API}${url1}`;
+      this.fetchLogFile(url)
+        .then((text) => {
+          this.fileShowData = text.split("\r\n");
+          this.handlePointChart(this.fileShowData);
+          this.fileVisible = true;
         })
+        .catch((error) => {
+          console.error("Failed to fetch the log file:", error);
+          this.$modal.msgSuccess("文件读取错误");
+        });
     },
     // 读取文件内容
-    async fetchLogFile(url){
+    async fetchLogFile(url) {
       try {
-        const response = await fetch(url, { method: 'GET' })
+        const response = await fetch(url, { method: "GET" });
         if (!response.ok) {
-          throw new Error(`HTTP error! status: ${response.status}`)
+          throw new Error(`HTTP error! status: ${response.status}`);
         }
-        return await response.text()
+        return await response.text();
       } catch (error) {
-        throw error
+        throw error;
+      }
+    },
+    // echarts数据
+    handleLineChart(data) {
+      const data1 = data[0].replace(/\s+/g, " ").split(" ");
+      // console.log("data1",data1);
+      // const data1 = ['wavelenth(μm)','R','Cd'];
+      let wavelenthData = [],
+        RData = [],
+        CdData = [];
+      // if(data1.includes('wavelenth(μm)')){
+      //   wavelenthData
+      // }
+      for (let i = 1; i < data.length; i++) {
+        let row = data[i].split("\t");
+        wavelenthData.push(parseFloat(row[0]));
+        RData.push(parseFloat(row[1]));
+        CdData.push(parseFloat(row[2]));
+      }
+      this.chartData = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+          },
+        },
+        xAxis: [
+          {
+            type: "category",
+            axisTick: {
+              alignWithLabel: true,
+            },
+            data: wavelenthData,
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "Cd",
+            position: "right",
+            alignTicks: true,
+            axisLine: {
+              show: true,
+            },
+          },
+          {
+            type: "value",
+            name: "R",
+            position: "left",
+            alignTicks: true,
+            axisLine: {
+              show: true,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "R",
+            type: "line",
+            data: RData,
+          },
+          {
+            name: "Cd",
+            type: "line",
+            yAxisIndex: 1,
+            data: CdData,
+          },
+        ],
+      };
+    },
+    handlePointChart(data) {
+      // console.log("data",data);
+      let data1 = [];
+      for (let i = 15; i < data.length; i++) {
+        let row = data[i].split(",");
+        data1.push([parseFloat(row), parseFloat(row)]);
       }
-    }
+      console.log(data1);
+      this.chartData = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+          },
+        },
+        xAxis: [
+          {
+            type: "value",
+            scale: true,
+            splitLine: {
+              show: true,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            scale: true,
+            splitLine: {
+              show: true,
+            },
+          },
+        ],
+        series: [
+          {
+            symbolSize: 5,
+            data: data1,
+            type: "scatter",
+          },
+        ],
+      };
+    },
   },
 };
 </script>
@@ -802,12 +966,15 @@ 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;
 }