mirs/mirs-ui/src/views/index.vue

<template>
  <div class="app-container">
    <el-form
      v-show="showSearch"
      ref="queryForm"
      :model="queryParams"
      size="small"
      :inline="true"
      label-width="100px"
    >
      <el-form-item label="数据类型" prop="dataType">
        <el-radio-group v-model="queryParams.dataType" @change="changeDataType">
          <el-radio
            v-for="item in dict.type.biz_data_type"
            :key="item.value"
            :label="item.value"
          >
            {{ item.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="类型" prop="sampleType">
        <!-- <el-input
          v-model="queryParams.sampleType"
          placeholder="请输入类型"
          clearable
          @keyup.enter.native="handleQuery"
        /> -->
        <el-select
          v-model="queryParams.sampleType"
          placeholder="请选择"
          clearable
          @keyup.enter.native="handleQuery"
          @change="changeSampleType"
        >
          <el-option
            v-for="item in options.sampleTypeOption"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="型号" prop="sampleModel">
        <!-- <el-input
          v-model="queryParams.sampleModel"
          placeholder="请输入型号"
          clearable
          @keyup.enter.native="handleQuery"
        /> -->
        <el-select
          v-model="queryParams.sampleModel"
          placeholder="请选择"
          clearable
          @keyup.enter.native="handleQuery"
          @change="changeSampleModel"
        >
          <el-option
            v-for="item in options.sampleModelOption"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="表面温度" prop="temperatureK">
        <!-- <el-input
          v-model="queryParams.temperatureK"
          placeholder="请输入表面温度"
          clearable
          @keyup.enter.native="handleQuery"
        /> -->
        <el-select
          v-model="queryParams.temperatureK"
          placeholder="请选择"
          clearable
          @keyup.enter.native="handleQuery"
        >
          <el-option
            v-for="item in options.temperatureKOption"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="光谱波段" prop="wavelengthUm">
        <!-- <el-input
          v-model="queryParams.wavelengthUm"
          placeholder="请输入光谱波段"
          clearable
          @keyup.enter.native="handleQuery"
        /> -->
        <el-select
          v-model="queryParams.wavelengthUm"
          placeholder="请选择"
          clearable
          @keyup.enter.native="handleQuery"
        >
          <el-option
            v-for="item in dict.type.biz_wavelength_um"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="入射天顶角θi" prop="thetaIncident">
        <!-- <el-input
          v-model="queryParams.thetaIncident"
          placeholder="请输入射天顶角θi"
          clearable
          :disabled="queryParams.dataType == 1"
          @keyup.enter.native="handleQuery"
        /> -->
        <el-select
          v-model="queryParams.thetaIncident"
          placeholder="请选择"
          clearable
          :disabled="queryParams.dataType == 1"
          @keyup.enter.native="handleQuery"
        >
          <el-option
            v-for="item in options.allAngleOption.thetaIncidentOptions"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="入射方位角φi" prop="phiIncident">
        <!-- <el-input
          v-model="queryParams.phiIncident"
          placeholder="请输入入射方位角φi"
          clearable
          :disabled="queryParams.dataType == 1"
          @keyup.enter.native="handleQuery"
        /> -->
        <el-select
          v-model="queryParams.phiIncident"
          placeholder="请选择"
          clearable
          :disabled="queryParams.dataType == 1"
          @keyup.enter.native="handleQuery"
        >
          <el-option
            v-for="item in options.allAngleOption.phiIncidentOptions"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="反射天顶角θr" prop="thetaReflected">
        <!-- <el-input
          v-model="queryParams.thetaReflected"
          placeholder="请输入反射天顶角θr"
          clearable
          :disabled="queryParams.dataType == 1"
          @keyup.enter.native="handleQuery"
        /> -->
        <el-select
          v-model="queryParams.thetaReflected"
          placeholder="请选择"
          clearable
          :disabled="queryParams.dataType == 1"
          @keyup.enter.native="handleQuery"
        >
          <el-option
            v-for="item in options.allAngleOption.thetaReflectedOptions"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="反射方位角φr" prop="phiReflected">
        <!-- <el-input
          v-model="queryParams.phiReflected"
          placeholder="请输入反射方位角φr"
          clearable
          :disabled="queryParams.dataType == 1"
          @keyup.enter.native="handleQuery"
        /> -->
        <el-select
          v-model="queryParams.phiReflected"
          placeholder="请选择"
          clearable
          :disabled="queryParams.dataType == 1"
          @keyup.enter.native="handleQuery"
        >
          <el-option
            v-for="item in options.allAngleOption.phiReflectedOptions"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 查询结果区域 -->
    <template v-loading="loading">
      <div
        v-if="showResult && queryParams.dataType == 1"
        class="result-section"
      >
        <!-- 上半部分 -->
        <div class="result-top">
          <!-- 左上区块 -->
          <el-card class="result-block block-1">
            <div slot="header" class="clearfix">
              <span>样片实物图</span>
            </div>
            <div class="image-container">
              <el-image
                :src="sampleImage"
                fit="contain"
                :preview-src-list="[sampleImage]"
                style="width: 100%; height: 100%"
              />
            </div>
          </el-card>

          <!-- 右上区块 -->
          <el-card class="result-block block-2">
            <div slot="header" class="clearfix">
              <span>EMI修正折线图</span>
            </div>
            <div ref="chart" />
          </el-card>
        </div>

        <!-- 下半部分 -->
        <div class="result-bottom">
          <!-- 左下区块 -->
          <el-card class="result-block block-3">
            <div slot="header" class="clearfix">
              <span>测量数据表</span>
            </div>
            <div class="table-container">
              <el-table
                :data="emiMeasurementList"
                style="width: 100%"
                height="100%"
                lazy
              >
                <el-table-column prop="sampleModel" label="样片型号" />
                <el-table-column prop="temperatureK" label="温度(K)" />
                <el-table-column prop="wavelengthUm" label="波段(μm)" />
                <el-table-column prop="emiCorrection1" label="EMI-修正1" />
                <el-table-column prop="emiCorrection2" label="EMI-修正2" />
                <el-table-column prop="emiCorrection3" label="EMI-修正3" />
                <el-table-column prop="emiCorrection4" label="EMI-修正4" />
                <el-table-column prop="emiCorrection5" label="EMI-修正5" />
                <el-table-column prop="meanValue" label="均值" />
              </el-table>
            </div>
          </el-card>

          <!-- 右下区块 -->
          <el-card class="result-block block-4">
            <div slot="header" class="clearfix">
              <span>积分数据表</span>
            </div>
            <div class="table-container">
              <el-table
                :data="integratedDataList"
                style="width: 100%"
                height="100%"
                lazy
              >
                <el-table-column prop="sampleModel" label="样片型号" />
                <el-table-column prop="temperatureK" label="温度(K)" />
                <el-table-column prop="wavelengthUm" label="波段(μm)" />
                <el-table-column prop="integralValue1" label="积分值1" />
                <el-table-column prop="integralValue2" label="积分值2" />
                <el-table-column prop="integralValue3" label="积分值3" />
                <el-table-column prop="integralValue4" label="积分值4" />
                <el-table-column prop="integralValue5" label="积分值5" />
                <el-table-column prop="standardDev" label="STDEV" />
              </el-table>
            </div>
          </el-card>
        </div>
      </div>
      <div
        v-if="showResult && queryParams.dataType == 2"
        class="result-section"
      >
        <!-- 上半部分 -->
        <div class="result-top">
          <!-- 左上区块 -->
          <el-card class="result-block block-1">
            <div slot="header" class="clearfix">
              <span>样片实物图</span>
            </div>
            <div class="image-container">
              <el-image
                :src="sampleImage"
                fit="contain"
                :preview-src-list="[sampleImage]"
                style="width: 100%; height: 100%"
              />
            </div>
          </el-card>

          <!-- 右上区块 -->
          <el-card class="result-block block-2">
            <div slot="header" class="clearfix">
              <span>BRDF角度分布</span>
            </div>
            <div class="image-container">
              <el-image
                :src="brdfImagePath"
                fit="contain"
                :preview-src-list="[brdfImagePath]"
                style="width: 100%; height: 100%"
              />
            </div>
          </el-card>
        </div>

        <!-- 下半部分 -->
        <div class="result-bottom">
          <el-card class="result-block block-22">
            <div slot="header" class="clearfix">
              <span>测量数据表</span>
            </div>
            <div class="table-container">
              <el-table
                :data="brdfDataList"
                style="width: 100%"
                height="100%"
                lazy
              >
                <el-table-column prop="sampleModel" label="样片型号" />
                <el-table-column prop="temperatureK" label="温度(K)" />
                <el-table-column prop="wavelengthUm" label="光谱(μm)" />
                <el-table-column prop="thetaIncident" label="入射天顶角θi" />
                <el-table-column prop="phiIncident" label="入射方位角φi" />
                <el-table-column prop="thetaReflected" label="反射天顶角θr" />
                <el-table-column prop="phiReflected" label="反射方位角φr" />
                <el-table-column prop="measurement1" label="重复测量1" />
                <el-table-column prop="measurement2" label="重复测量2" />
                <el-table-column prop="measurement3" label="重复测量3" />
                <el-table-column prop="measurement4" label="重复测量4" />
                <el-table-column prop="measurement5" label="重复测量5" />
                <el-table-column prop="meanValue" label="均值" />
                <el-table-column prop="repeatabilityPct" label="重复性%" />
              </el-table>
            </div>
          </el-card>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {
  getIndexInfo,
  getSampleType,
  getSampleModel,
  getOthersOptions,
} from "@/api/manage/index";
export default {
  name: "Index",
  dicts: ["biz_data_type", "biz_wavelength_um"],
  data() {
    return {
      // 遮罩层
      loading: false,
      // 显示搜索条件
      showSearch: true,
      // 版本号
      queryParams: {
        dataType: "1",
        sampleType: null,
        sampleModel: null,
        temperatureK: null,
        wavelengthUm: null,
        thetaIncident: null,
        phiIncident: null,
        thetaReflected: null,
        phiReflected: null,
      },
      options: {
        sampleTypeOption: [],
        sampleModelOption: [],
        temperatureKOption: [],
        allAngleOption: {
          thetaIncidentOptions: [],
          phiIncidentOptions: [],
          thetaReflectedOptions: [],
          phiReflectedList: [],
        },
      },
      showResult: false,
      sampleImage: null,
      brdfImagePath: null,
      chart: null,
      emiMeasurementList: [],
      integratedDataList: [],
      brdfDataList: [],
    };
  },
  created() {},
  mounted() {
    this.changeDataType("1");
  },

  methods: {
    // 查询按钮
    handleQuery() {
      if (!this.queryParams.sampleType || !this.queryParams.sampleModel) {
        this.$message({
          message: "请选择类型和型号",
          type: "warning",
        });
      } else {
        this.loading = true;
        this.getList();
      }
    },
    /** 重置按钮操作 */
    resetQuery() {
      const dataType = this.queryParams.dataType;
      // this.resetForm("queryForm");
      this.showResult = false;
      this.changeDataType(dataType);
    },
    getList() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      getIndexInfo(this.queryParams).then((response) => {
        const data = response.data;
        this.sample = data.sample;
        if (data.sample == null) {
          this.$message({
            message: "没有查到相关数据",
            type: "warning",
          });
          this.sampleImage = require("@/assets/404_images/404.png");
        } else {
          this.sampleImage =
            process.env.VUE_APP_BASE_API + data.sample.sampleImage;
        }
        this.brdfImagePath = process.env.VUE_APP_BASE_API + data.brdfImagePath;

        this.brdfDataList = data.brdfDataList;
        this.emiMeasurementList = data.emiMeasurementList;
        this.integratedDataList = data.integratedDataList;
        this.showResult = true;
        this.$nextTick(() => {
          this.initChart();
        });
        loading.close();
        this.loading = false;
      });
    },
    changeDataType(val) {
      this.showResult = false;
      this.queryParams = {
        dataType: val,
        sampleType: null,
        sampleModel: null,
        temperatureK: null,
        wavelengthUm: null,
        thetaIncident: null,
        phiIncident: null,
        thetaReflected: null,
        phiReflected: null,
      };
      getSampleType(this.queryParams).then((resp) => {
        this.options = {
          sampleTypeOption: resp.data,
          sampleModelOption: [],
          temperatureKOption: [],
          allAngleOption: {
            thetaIncidentOptions: [],
            phiIncidentOptions: [],
            thetaReflectedOptions: [],
            phiReflectedList: [],
          },
        };
      });
    },
    changeSampleType(val) {
      this.showResult = false;
      const dataType = this.queryParams.dataType;
      this.queryParams = {
        dataType,
        sampleType: val,
        sampleModel: null,
        temperatureK: null,
        wavelengthUm: null,
        thetaIncident: null,
        phiIncident: null,
        thetaReflected: null,
        phiReflected: null,
      };
      getSampleModel(this.queryParams).then((resp) => {
        this.options.sampleModelOption = resp.data;
        this.options.allAngleOption = {
          thetaIncidentOptions: [],
          phiIncidentOptions: [],
          thetaReflectedOptions: [],
          phiReflectedList: [],
        };
      });
    },
    changeSampleModel(val) {
      this.showResult = false;
      const dataType = this.queryParams.dataType;
      const sampleType = this.queryParams.sampleType;
      this.queryParams = {
        dataType,
        sampleType,
        sampleModel: val,
        temperatureK: null,
        wavelengthUm: null,
        thetaIncident: null,
        phiIncident: null,
        thetaReflected: null,
        phiReflected: null,
      };
      getOthersOptions(this.queryParams).then((resp) => {
        this.options.temperatureKOption = resp.data.temperatureKOptions;
        this.options.allAngleOption = resp.data.allAngleOptions;
      });
    },

    // 修改 initChart 方法
    initChart() {
      // 确保容器存在
      if (!this.$refs.chart) {
        console.error("图表容器未找到");
        return;
      }

      // 如果已有图表实例，先销毁
      if (this.chart) {
        this.chart.dispose();
      }

      this.chart = echarts.init(this.$refs.chart);

      // 准备x轴数据
      const xAxisData = this.emiMeasurementList.map(
        (item) => item.wavelengthUm
      );

      // 准备系列数据
      const series = [];
      const emiFields = [
        { field: "emiCorrection1", name: "EMI-修正1" },
        { field: "emiCorrection2", name: "EMI-修正2" },
        { field: "emiCorrection3", name: "EMI-修正3" },
        { field: "emiCorrection4", name: "EMI-修正4" },
        { field: "emiCorrection5", name: "EMI-修正5" },
      ];

      emiFields.forEach((item) => {
        series.push({
          name: item.name, // 使用中文名称
          type: "line",
          data: this.emiMeasurementList.map((row) => row[item.field]),
          smooth: true,
          symbol: "circle",
          symbolSize: 8,
          lineStyle: {
            width: 3,
          },
        });
      });

      // 准备图例数据（使用中文名称）
      const legendData = emiFields.map((item) => item.name);

      const option = {
        title: {
          text: "Emi Correction 折线图",
          left: "center",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        legend: {
          data: legendData, // 使用中文名称的图例
          bottom: 10,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "15%",
          top: "15%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
            dataView: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xAxisData,
          name: "Wavelength (μm)",
          nameLocation: "middle",
          nameGap: 30,
        },
        yAxis: {
          type: "value",
          name: "Emi Correction",
          nameLocation: "middle",
          nameGap: 30,
        },
        series: series,
      };

      this.chart.setOption(option);

      // 添加窗口大小变化监听
      window.addEventListener("resize", this.handleResize);
    },

    // 修改 handleResize 方法
    handleResize() {
      if (this.chart) {
        this.chart.resize();
      }
    },

    // 在 beforeDestroy 钩子中清理
    beforeDestroy() {
      if (this.chart) {
        this.chart.dispose();
        this.chart = null;
      }
      window.removeEventListener("resize", this.handleResize);
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  height: calc(100vh - 84px);
  display: flex;
  flex-direction: column;

  .query-section {
    padding: 20px;
    background-color: #f5f7fa;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
  }

  .image-container {
    height: 100%;
    width: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f7fa;

    &:hover {
      opacity: 0.9;
    }

    .image-slot {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      background: #f5f7fa;
      color: #909399;
      font-size: 30px;
    }
  }

  .result-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 10px 10px 10px;
    overflow: hidden;

    .result-top,
    .result-bottom {
      flex: 1;
      display: flex;
      margin-bottom: 10px;
      min-height: 0;

      &:last-child {
        margin-bottom: 0;
      }
    }

    .result-block {
      flex: 1;
      margin: 0 5px;
      display: flex;
      flex-direction: column;
      overflow: hidden;

      ::v-deep .el-card__body {
        // height: calc(100% - 57px);
        // padding: 0;

        > div {
          height: 100%;
        }
        height: calc(100% - 57px);
        padding: 0;
        display: flex;
        flex-direction: column;

        > .table-container {
          flex: 1;
          min-height: 0;
          overflow: hidden;

          .el-table {
            height: 100%;

            ::v-deep .el-table__body-wrapper {
              overflow-y: auto;
            }
          }
        }
      }

      &.block-1 {
        margin-left: 0;
      }

      &.block-2 {
        margin-right: 0;
        .chart-container {
          width: 100%;
          height: 100%;

          > div {
            width: 100%;
            height: 100%;
            min-height: 300px; // 设置最小高度确保可见
          }
        }
      }

      &.block-3 {
        margin-left: 0;
      }

      &.block-4 {
        margin-right: 0;
      }
    }
  }

  .el-table {
    flex: 1;
  }
}
</style>