测试 用electron + springboot 构建桌面应用
he wei
2022-03-22 5d912947c883b162026939a367bfe81cc35d2bbc
src/main/demo/src/views/result.vue
@@ -3,42 +3,55 @@
    <div class="content_header" slot="header">
      <three-btn @click="goSelect">重选文件</three-btn>
      <three-btn @click="exportExcel">导出</three-btn>
      <div class="">
        记录开始时间:2021-03-21 17:52:05
        测试类型:充电
        绝缘
      <div class="summary">
        <div class="summary-item">记录开始时间:<span>{{ summary.testStartTime }}</span></div>
        <div class="summary-item">测试类型:<span>{{ summary.testType }}</span></div>
        <div class="summary-item">正极绝缘电阻:<span>{{ summary.PosInsRes }}KΩ</span></div>
        <div class="summary-item">负极绝缘电阻:<span>{{ summary.NegInsRes }}KΩ</span></div>
      </div>
    </div>
    <div class="main">
      <div class="flex-row contain-flex-column">
        <flex-box class="item" size="mini" title="组端电压折线图">
          <normal-lines id="groupVol" ref="groupVol" unit="V"></normal-lines>
        </flex-box>
        <flex-box class="item" size="mini" title="电池电流折线图">
          <normal-lines id="groupCurr" ref="groupCurr" unit="A"></normal-lines>
        </flex-box>
      </div>
      <div class="flex-row contain-flex-column">
        <flex-box class="item" size="mini" title="单体电压折线图">
          <normal-lines id="vol" ref="vol" unit="V"></normal-lines>
        </flex-box>
        <flex-box class="item" size="mini" title="容量折线图">
          <div slot="tools" class="chart-tools-wrapper">
            <el-select
              v-model="chartType"
              size="mini"
              @change="changeChartType"
            >
              <el-option
                v-for="item in chartTypes"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
      <div class="flex-row">
        <div class="flex-row-inner contain-flex-column">
          <div class="item">
            <flex-box class="item-inner" size="mini" title="组端电压折线图">
              <normal-lines id="groupVol" ref="groupVol" unit="V"></normal-lines>
            </flex-box>
          </div>
          <normal-lines id="cap" ref="cap" unit="AH"></normal-lines>
        </flex-box>
          <div class="item">
            <flex-box class="item-inner" size="mini" title="电池电流折线图">
              <normal-lines id="groupCurr" ref="groupCurr" unit="A"></normal-lines>
            </flex-box>
          </div>
        </div>
      </div>
      <div class="flex-row">
        <div class="flex-row-inner contain-flex-column">
          <div class="item">
            <flex-box class="item-inner" size="mini" title="单体电压折线图">
              <normal-lines id="vol" ref="vol" unit="V"></normal-lines>
            </flex-box>
          </div>
          <div class="item">
            <flex-box class="item-inner" size="mini" :title="optsTitle">
              <div slot="tools" class="chart-tools-wrapper">
                <el-select
                  v-model="chartType"
                  size="mini"
                  @change="changeChartType"
                >
                  <el-option
                    v-for="item in chartTypes"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </div>
              <normal-lines id="other" ref="other"></normal-lines>
            </flex-box>
          </div>
        </div>
      </div>
    </div>
    <!-- 导出用的图表 可变的那组图 -->
@@ -54,9 +67,9 @@
import ThreeBtn from "@/components/ThreeBtn";
import axios from "@/assets/js/axios";
const dataType = {
  0xFD: '放电',
  0xFC: '充电',
  0xFB: '普通数据'
  0xfd: "放电",
  0xfc: "充电",
  0xfb: "普通数据",
};
export default {
@@ -68,40 +81,40 @@
  },
  data() {
    let info = this.$route.query.data;
    let { fboData, fboDataStart } = info;
    let lastRecord = fboData[fboData.length - 1];
    let chartTypes = [
      {
        label: "环境温度",
        value: "tempEnvi",
      },
      {
        label: "环境湿度",
        value: "humiEnvi",
      }
    ];
    let capTest = fboDataStart.DataType == 0xfd || fboDataStart.DataType == 0xfc;
    return {
      info,
      chartType: "testCap",
      chartTypes: [
      capTest,
      chartType: capTest ? "testCap" : "tempEnvi",
      chartTypes: capTest ? [
        {
          label: "测试容量",
          value: "testCap",
          unit: "AH",
          fixed: 0,
        },
        {
          label: "实际容量(预估)",
          value: "actualCap",
          unit: "AH",
          fixed: 0,
        },
        // {
        //   label: "剩余容量",
        //   value: "residualCap",
        //   unit: "AH",
        //   fixed: 0,
        // },
        // {
        //   label: "剩余时间",
        //   value: "residualTime",
        //   unit: "",
        //   fixed: 0,
        // },
      ],
        ...chartTypes
      ] : [...chartTypes],
      testCapOption: null,
      actualCapOption: null,
      residualCapOption: null,
      residualTimeOption: null,
      unit: ''
      tempEnviOption: null,
      humiEnviOption: null,
      summary: {
        testStartTime: fboDataStart.testStartTime,
        testType: dataType[fboDataStart.DataType],
        PosInsRes: lastRecord.PosInsRes,
        NegInsRes: lastRecord.NegInsRes,
      },
      optsTitle: capTest ? '测试容量拆线图' : '环境温度折线图'
    };
  },
  methods: {
@@ -113,11 +126,13 @@
        groupVol = [],
        groupCurr = [],
        testCap = [],
        actualCap = [],
        residualCap = [],
        residualTime = [],
        PosInsRes = [],
        NegInsRes = [],
        // actualCap = [],
        // residualCap = [],
        // residualTime = [],
        // PosInsRes = [],
        // NegInsRes = [],
        tempEnvi = [],
        humiEnvi = [],
        SingleVol = [];
      for (let i = 0, j = monCount; i < j; i++) {
        SingleVol[i] = {
@@ -147,15 +162,19 @@
        // 测试容量
        testCap.push(item.testCap);
        // 实际容量
        actualCap.push(item.actualCap);
        // actualCap.push(item.actualCap);
        // 剩余容量
        residualCap.push(item.residualCap);
        // residualCap.push(item.residualCap);
        // 剩余时间
        residualTime.push(item.residualTime);
        // residualTime.push(item.residualTime);
        // 正极绝缘电阻
        PosInsRes.push(item.PosInsRes);
        // PosInsRes.push(item.PosInsRes);
        // 负极绝缘电阻
        NegInsRes.push(item.NegInsRes);
        // NegInsRes.push(item.NegInsRes);
        // 环境温度
        tempEnvi.push(item.Temp_Envi);
        // 环境湿度
        humiEnvi.push(item.Humi_Envi);
        // 单体电压
        for (let m = 0, n = monCount; m < n; m++) {
          SingleVol[m].data.push(item.SingleVol[m]);
@@ -190,7 +209,7 @@
        series: SingleVol,
      };
      let testCapOption = {
          unit: 'AH',
          unit: "AH",
          xData: times,
          series: [
            {
@@ -202,71 +221,57 @@
            },
          ],
        },
        actualCapOption = {
          unit: 'AH',
        tempEnviOption = {
          unit: "℃",
          xData: times,
          series: [
            {
              name: "实际容量",
              name: "环境温度",
              type: "line",
              symbolSize: 0,
              sampling: "lttb",
              data: actualCap,
              data: tempEnvi,
            },
          ],
        },
        residualCapOption = {
          unit: 'AH',
        humiEnviOption = {
          unit: "%",
          xData: times,
          series: [
            {
              name: "剩余容量",
              name: "环境湿度",
              type: "line",
              symbolSize: 0,
              sampling: "average",
              data: residualCap,
            },
          ],
        },
        residualTimeOption = {
          unit: '',
          xData: times,
          series: [
            {
              name: "剩余时间",
              type: "line",
              symbolSize: 0,
              sampling: "average",
              data: residualTime,
              data: humiEnvi,
            },
          ],
        };
      this.testCapOption = testCapOption;
      this.actualCapOption = actualCapOption;
      this.residualCapOption = residualCapOption;
      this.residualTimeOption = residualTimeOption;
      this.tempEnviOption = tempEnviOption;
      this.humiEnviOption = humiEnviOption;
      this.$refs.groupVol.setData(groupVolOption);
      this.$refs.groupCurr.setData(currOption);
      this.$refs.vol.setData(volOption);
      this.$refs.cap.setData(testCapOption);
      this.$refs.other.setData(this.capTest ? testCapOption : tempEnviOption);
      // 建立联动
      this.$G.chartManage.connect(["groupVol", "groupCurr", "vol", "cap"]);
      this.$G.chartManage.connect(["groupVol", "groupCurr", "vol", "other"]);
    },
    changeChartType(v) {
      this.$refs.cap.setData(this[v + "Option"]);
      this.optsTitle = v.label + '折线图';
      this.$refs.other.setData(this[v + "Option"]);
    },
    goSelect() {
      this.$router.push("/selectFile");
      this.$router.push({path: "/selectFile", query: {reselect: 1}});
    },
    // 导出报表
    exportExcel() {
      // 容量折线图
      let arr = ['testCap', 'actualCap'];
      let arr = ["testCap", "tempEnvi", "humiEnvi"];
      let o_pic = {};
      arr.forEach((v) => {
        let option = this[v + 'Option'];
        this.unit = option.unit;
        let option = this[v + "Option"];
        this.$refs.hideChart.setData(option);
        o_pic[v] = this.$refs.hideChart.getDataURL();
      });
@@ -275,9 +280,13 @@
        groupVol_echart: this.$refs.groupVol.getDataURL(),
        curr_echart: this.$refs.groupCurr.getDataURL(),
        vol_echart: this.$refs.vol.getDataURL(),
        cap_echart: o_pic.testCap,
        actualCap_echart: o_pic.actualCap
        tempEnvi_echart: o_pic.tempEnvi,
        humiEnvi_echart: o_pic.humiEnvi,
      };
      if (this.capTest) {
        params.cap_echart = o_pic.testCap;
      }
      let baseURL = axios.defaults.baseURL;
      baseURL = baseURL ? baseURL : "";
      var actionUrl = baseURL + "export";
@@ -324,6 +333,15 @@
}
.flex-row {
  flex: 1;
  position: relative;
}
.item-inner,
.flex-row-inner {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
.contain-flex-column {
  display: flex;
@@ -332,9 +350,26 @@
.item {
  background: #0d43a7;
  flex: 1;
  position: relative;
}
.content_header {
  padding: 8px;
  padding: 8px 8px 12px;
  display: flex;
  color: #fff;
  align-items: center;
}
.summary {
  display: flex;
  flex-wrap: wrap;
}
.summary-item {
  margin-left: 1em;
}
.summary-item span {
  color: #ff0;
}
>>> .three-btn {
  flex-shrink: 0;
}
>>> .three-btn + .three-btn {
  margin-left: 8px;