U LD9历史页面

he wei

2021-11-27 b576c764c7f5dd53368d3e63b401a67def754e75

U LD9历史页面

 src/assets/js/history.js

@@ -72,3 +72,56 @@
      data: 'json=' + JSON.stringify(data)
  });
}
/**
 * 查询LD9测试数据列表
 * Ld9testdata_infAction_ld9action_searchInfList
 * 参数：json={"BattGroupId":1005129}
 */
export const getLD9TestList = (data) => {
  return axios({
      method: "post",
      url: "Ld9testdata_infAction_ld9action_searchInfList",
      data: 'json=' + JSON.stringify(data)
  });
}

/**
 * 查询LD9 单体测试数据
 * Ld9testdataAction_ld9action_serchByCondition
 * 参数：json={"BattGroupId":1000061,"test_record_count":39,"record_num":3,"test_monnum":1}
 */
export const getLD9Testdata = (data) => {
  return axios({
      method: "post",
      url: "Ld9testdataAction_ld9action_serchByCondition",
      data: 'json=' + JSON.stringify(data)
  });
}

/**
 * 查询LD9测试组端数据
 * Ld9testdatastopAction_ld9action_serchByInfo
 * 参数：json={"BattGroupId":1000061,"test_record_count":39,"record_num":3,"test_monnum":1}
 */
 export const getLD9GrpTestdata = (data) => {
  return axios({
      method: "post",
      url: "Ld9testdatastopAction_ld9action_serchByInfo",
      data: 'json=' + JSON.stringify(data)
  });
}

/**
 * 查询LD9 一次测试中所有单体的实际容量
 * Ld9testdatastopAction_ld9action_serchByCondition
 * 参数：json={"BattGroupId":1000061,"test_record_count":39}
 */
 export const getLD9MonCaps = (data) => {
  return axios({
      method: "post",
      url: "Ld9testdatastopAction_ld9action_serchByCondition",
      data: 'json=' + JSON.stringify(data)
  });
}



 src/pages/dataTest/history.vue

@@ -213,6 +213,7 @@
        getBarNum,
        Title,
        getLow,
        regEquipType,
        sethoubeiTime,
    } from "../../assets/js/tools";

@@ -452,6 +453,35 @@
            },
            leafClick(data) {
                this.batt = data;
                // 如果是LD9就跳转到LD9的历史页面
                if (regEquipType(data.FBSDeviceId, 'LD9')) {
                  let search =
                    "?province=" +
                    data.StationName1 +
                    "&city=" +
                    data.StationName2 +
                    "&county=" +
                    data.StationName5 +
                    "&home=" +
                    data.StationName3 +
                    "&batt=" +
                    data.BattGroupId;
                  window.parent.postMessage(
                    {
                      cmd: "syncPage",
                      params: {
                        pageInfo: {
                          label: "历史数据",
                          name: "history",
                          src: '#/history-ld9' + search,
                          closable: true,
                        },
                      },
                    },
                    "*"
                  );
                  return;
                }
                // 重置页面内容
                this.init();
                // 获取充放电记录

 src/pages/dataTest/historyLD9.vue

New file
@@ -0,0 +1,1167 @@
<template>
  <flex-layout
    direction="row"
    class="page-history"
    :no-bg="true"
    :loading="loading"
  >
    <home-list
      slot="header"
      @toggleChange="toggleChange"
      @leaf-click="leafClick"
    ></home-list>
    <content-box
      style="margin-left: 4px; margin-right: 4px"
      :title="battFullName"
    >
      <div slot="box-tools" class="box-tools">
        <el-tooltip
          class="item"
          effect="dark"
          content="实时数据"
          placement="bottom"
        >
          <i class="iconfont el-icon-jinru" @click="syncPage"></i>
        </el-tooltip>
      </div>
      <div slot="box-tools" class="box-tools" style="right: 36px">
        <el-tooltip
          class="item"
          effect="dark"
          content="数据导出"
          placement="bottom"
        >
          <i
            class="iconfont el-icon-daochu"
            @click="exportExcel"
            style="font-size: 24px"
          ></i>
        </el-tooltip>
      </div>

      <flex-layout :no-bg="true">
        <div class="content-header" slot="header">
          <div class="table-layout">
            <div class="table-row">
              <div class="table-cell text-right w80">电池状态:</div>
              <div class="table-cell">
                <el-input
                  v-model="formateBattState"
                  placeholder=""
                  size="small"
                  :disabled="true"
                >
                </el-input>
              </div>
              <div class="table-cell text-right w80">端电压:</div>
              <div class="table-cell">
                <el-input
                  v-model="top.group"
                  placeholder=""
                  size="small"
                  :disabled="true"
                  style="min-width: 12rem"
                ></el-input>
              </div>
              <div class="table-cell text-right w80">电池电流:</div>
              <div class="table-cell">
                <el-input
                  v-model="top.curr"
                  placeholder=""
                  size="small"
                  :disabled="true"
                ></el-input>
              </div>
              <div class="table-cell text-right w80">测试时长:</div>
              <div class="table-cell">
                <el-input
                  v-model="top.test_long"
                  placeholder=""
                  size="small"
                  :disabled="true"
                >
                </el-input>
              </div>
            </div>
            <div class="table-row">
              <div class="table-cell text-right w80">测试日期:</div>
              <div class="table-cell">
                <el-cascader
                  v-model="test_record.value"
                  :options="test_record.list"
                  size="small"
                  ref="elRecord"
                  placeholder="请选择测试日期"
                  style="width: 100%; min-width: 16rem"
                  @change="testRecordChange"
                >
                  <template slot-scope="{ node, data }">
                    <span>{{ data.label }}</span>
                    <span v-if="!node.isLeaf">
                      ({{ data.children.length }})
                    </span>
                  </template>
                </el-cascader>
              </div>
              <div class="table-cell text-right w80">测试容量:</div>
              <div class="table-cell">
                <el-input
                  v-model="top.test_cap"
                  placeholder=""
                  size="small"
                  :disabled="true"
                >
                </el-input>
              </div>
            </div>
          </div>
        </div>
        <div class="page-content">
          <div class="flex-box-list">
            <div class="flex-box" style="margin-bottom: 8px">
              <chart-wrapper :title="groupVolTitle">
                <line-chart ref="groupVol" id="groupVol" unit="V"></line-chart>
              </chart-wrapper>
            </div>
            <div class="flex-box" style="margin-bottom: 8px">
              <chart-wrapper :title="monBarTitle">
                <bar-chart
                  ref="monBar"
                  id="monBar"
                  unit="AH"
                  :show-label="false"
                ></bar-chart>
              </chart-wrapper>
            </div>
          </div>
          <div class="flex-box-list">
            <div class="flex-box" style="margin-top: 8px">
              <chart-wrapper :title="monCurrTitle">
                <line-chart
                  ref="curr"
                  id="curr"
                  unit="A"
                  start-zero
                ></line-chart>
              </chart-wrapper>
            </div>
            <div class="flex-box" style="margin-top: 8px">
              <chart-wrapper :title="monInfo.title">
                <line-chart
                  ref="monInfo"
                  id="monInfo"
                  :unit="monInfo.unit"
                ></line-chart>
              </chart-wrapper>
            </div>
          </div>
        </div>
      </flex-layout>
    </content-box>
  </flex-layout>
</template>

<script>
import echarts from "echarts";
import ContentBox from "../../components/ContentBox";
import HomeList from "./HomeList";
import BarChart from "../../components/chart/BarChart";
import LineChart from "../../components/chart/LineChart";
import ChartWrapper from "@/components/ChartWrapper";
import comparison from "../../components/comparisonData/comparison.vue";
import {
  getLD9TestList,
  getLD9Testdata,
  getLD9GrpTestdata,
  getLD9MonCaps,
} from "../../assets/js/history";

import {
  formatSeconds,
  GetMonomerCap,
  GetHourRate,
  Title,
  regEquipType,
} from "../../assets/js/tools";

let Titleobj = new Title();
import ECharts from "echarts/lib/echarts";
//引入折线图
import "echarts/lib/chart/bar";
import "echarts/lib/chart/line";
//引入提示框
import "echarts/lib/component/tooltip";
//引入标题
import "echarts/lib/component/title";
//引入图例标志
import "echarts/lib/component/legend";
//区域缩放
import "echarts/lib/component/dataZoom";

//markeline
import "echarts/lib/component/markLine";

// 引入自定义主题
import "@/components/chart/theme/transparent";
// 端信息
let allData = {
  groupVol: [],
  onlineVol: [],
  testCurr: [],
  testTimeLong: [],
  monNumList: [],
  recordTime: [],
  testCap: [],
  dataList: [],
  endData: {},
};
// 单体折线信息
let monLineData = {
  vol: [], // 单体电压
  temp: [], // 单体测试电流折线图
  grpVol: [], // 组端电压折线图
};
// 单体柱状信息
let monBarData = {
  vol: [], // 单体电压
};
// 4个图表
let groupVolLineChart, currLineChart, monLineChart, monBarChart;
export default {
  components: {
    ContentBox,
    HomeList,
    BarChart,
    LineChart,
    ChartWrapper,
    comparison,
  },
  data() {
    let baseURL = this.$axios.defaults.baseURL;
    baseURL = baseURL ? baseURL : "";
    return {
      HistoryData: [],
      loading: false,
      isNew: true,
      volDiffer: [],
      tempDiffer: [],
      data: [],
      batt: {},
      groupVolTitle: "组端电压折线图(V)",
      groupVolQth: {
        code: 0,
        low: 0,
        lowTime: "00:00:00",
        high: 0,
        highTime: "00:00:00",
        qt: 0,
        qg: 0,
        qh: 0,
        title: "正常",
      },
      top: {
        state: "", // 电池状态
        group: "", // 端电压
        curr: "", // 电池电流
        test_long: "", // 测试时长
        test_cap: "", // 测试容量
        re_cap: "", // 剩余容量
        xuhang: "", // 续航时长
      },
      // 当前选中的单体编号
      currMonNum: NaN,
      test_record: {
        value: [],
        subList: [],
        list: [
          {
            value: "herongDischarge",
            label: "核容测试",
            test_type: 1,
            children: []
          },
          {
            value: "jianceDischarge",
            label: "监测放电",
            test_type: 3,
            children: []
          },
          {
            value: "jianceCharge",
            label: "监测充电",
            test_type: 4,
            children: []
          },
        ],
      },
      // slider: 100,
      testTimeLong: [],
      battState: {
        test_type: -100,
        stop_reason: "",
      },
      monBarTitle: "单体实际容量柱状图(AH)",
      monCurrTitle: '单体测试电流折线图(A)',
      capInfo: {
        label: "单体实际容量柱状图",
        value: "realCap",
        unit: "AH",
        fixed: 0,
      },
      monVolInfo: {
        label: "单体电压",
        value: "vol",
        unit: "V",
        fixed: 3,
      },
      grpData: null,
      low_list: [],
      monInfo: {
        title: "单体测试电压折线图(V)",
        unit: "V",
      },
    };
  },
  methods: {
    toggleChange() {
      this.resize();
    },
    resize() {
      this.$G.chartManage.resize("groupVol");
      this.$G.chartManage.resize("monBar");
      this.$G.chartManage.resize("curr");
      this.$G.chartManage.resize("monInfo");
    },
    leafClick(data) {
      this.batt = data;
      // 如果不是LD9就跳转到LD9的历史页面
      if (!regEquipType(data.FBSDeviceId, "LD9")) {
        let search =
          "?province=" +
          data.StationName1 +
          "&city=" +
          data.StationName2 +
          "&county=" +
          data.StationName5 +
          "&home=" +
          data.StationName3 +
          "&batt=" +
          data.BattGroupId;
        window.parent.postMessage(
          {
            cmd: "syncPage",
            params: {
              pageInfo: {
                label: "历史数据",
                name: "history",
                src: "#/history" + search,
                closable: true,
              },
            },
          },
          "*"
        );
        return;
      }
      // 重置页面内容
      this.init();
      // 获取充放电记录
      this.searchBattTestData();
      this.isNew = false;
    },
    // 初始化页面数据
    init() {
      // 初始化充放电记录
      this.test_record.value = [];
      this.test_record.list[0].children = [];
      this.test_record.list[1].children = [];
      this.test_record.list[2].children = [];
      // 初始化顶部文本框内容
      this.top = {
        state: "", // 电池状态
        group: "", // 端电压
        curr: "", // 电池电流
        test_long: "", // 测试时长
        test_cap: "", // 测试容量
        re_cap: "", // 剩余容量
        xuhang: "---", // 续航时长
      };

      // 初始化电池状态
      this.battState.test_type = -100;

      // 初始化图表
      this.initChart();
    },
    // 初始化图表和图表数据
    initChart() {
      let batt = this.batt;
      // 拖动条默认值100
      // this.slider = 100;
      this.testTimeLong = [];

      // 端信息
      allData = {
        groupVol: [],
        onlineVol: [],
        // 单体电流折线图
        testCurr: [],
        testTimeLong: [],
        recordTime: [],
        testCap: [],
        monNumList: [],
        dataList: [],
      };
      for (let i = 1; i <= batt.MonCount; i++) {
        allData.monNumList[i - 1] = "#" + i;
      }
      // 单体折线信息
      monLineData = {
        vol: [], // 单体电压
        temp: [], // 单体测试电流折线图
        grpVol: [], // 组端电压折线图
      };
      // 单体柱状信息
      monBarData = {
        vol: [], // 单体电压
      };

      // 初始化图表的配置项
      this.initChartOptions();

      // 设置折线图
      this.setLineChart();

      // 设置柱状图
      this.setBarChart();

      // 绑定事件
      let chart = this.$G.chartManage.get('monBar');
      chart.off('click', 'series', this.clickHandler);
      chart.on('click', 'series', this.clickHandler);
    },
    clickHandler (obj) {
      // console.log('click me ?', obj);
      let monNum = obj.data[0].replace('#', '') * 1;
      let value = this.test_record.value.join('$$').split('$$');
      let param = null;
      if (this.currMonNum && monNum !== this.currMonNum) {
        // console.log('准备跳转');
        // console.log(this.test_record);
        let list = this.test_record.list;
        let {test_type, test_record_count} = this.getTestRecord();
        // this.$refs.elRecord.clearCheckedNodes();
        // console.log(this.$refs.elRecord);
        let over = false;
        for (let i = 0, j = list.length; i < j; i++) {
          if (over) {
            break;
          }
          if (test_type !== list[i].test_type) {
            continue;
          }
          for (let m = 0, children = list[i].children, n = children.length; m < n; m++) {
            if (over) {
              break;
            }
            if (test_record_count != children[m].test_record_count) {
              continue;
            }
            // console.log(children[m], test_record_count);
            for (let mm = 0, children1 = children[m].children, nn = children1.length; mm < nn; mm++) {
              if (children1[mm].value1.test_monnum == monNum) {
                value[2] = monNum;
                this.test_record.value = value;
                param = children1[mm].value1;
                over = true;
                break;
              }
            }
          }
        }
        // 执行新的查询
        this.testRecordChange('', param);
      }
    },
    initChartOptions() {
      // 端电压折线图
      groupVolLineChart = {
        color: ["#0081ff", "#df9d02"],
        title: {
          show: false,
          text: "端电压折线图(V)",
          x: "left",
          textStyle: {
            fontSize: "14",
          },
        },
        legend: {
          show: false,
          data: ["在线电压", "组端电压"],
          right: 0,
          orient: "vertical",
        },
        series: [
          {
            name: "在线电压",
            data: [],
          },
          {
            name: "组端电压",
            data: [],
          },
        ],
      };

      // 电池电流折线图
      currLineChart = {
        title: {
          show: false,
          text: "单体电流折线图(A)",
          x: "center",
          textStyle: {
            fontSize: "14",
          },
        },
        series: [
          {
            name: "单体电流",
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#00feff",
                },
                {
                  offset: 1,
                  color: "transparent",
                },
              ]),
            },
            data: [],
          },
        ],
      };

      // 单体信息折线图
      monLineChart = {
        title: {
          show: false,
          text: "单体电压(V)",
          x: "center",
          textStyle: {
            fontSize: "14",
          },
        },
        series: [],
      };

      // 图表类型
      // 单体信息柱状图
      monBarChart = {
        title: {
          show: false,
          text: "单体实际容量柱状图(AH)",
          x: "center",
          textStyle: {
            fontSize: "14",
          },
        },
        series: [
          {
            name: "实际容量",
            // hColor: "#0B388B",
            data: [],
          },
        ],
      };
    },
    // 设置折线图
    setLineChart() {
      // 设置端电压折线图
      this.setGroupVolLineChart();
      // 设置电池电流折线图
      this.setCurrLineChart();
      // 设置单体折线图
      this.setMonLineChart();
      // 建立联动
      this.$G.chartManage.connect(["groupVol", "curr", "monInfo"]);
    },
    // 设置端电压折线图
    setGroupVolLineChart() {
      // 根据allData.groupVol数据设置groupVolLineChart的值
      groupVolLineChart.series[0].data = allData.onlineVol;
      groupVolLineChart.series[1].data = allData.groupVol;

      // 更新图表
      this.$refs.groupVol.setOption(groupVolLineChart);
    },
    // 设置单体测试电流折线图
    setCurrLineChart() {
      const monNum = this.currMonNum ? '#' + this.currMonNum : '';
      this.monCurrTitle = `单体${monNum}测试电流折线图(A)`;
      // 根据allData.testCurr数据设置currLineChart的值
      currLineChart.series[0].name = monNum + '电流';
      currLineChart.series[0].data = allData.testCurr;
      // 更新图表
      this.$refs.curr.setOption(currLineChart);
    },
    // 设置单体实际容量折线图
    setMonLineChart() {
      // 根据monLineData的值设置monLineChart
      let dataList = monLineData.vol;
      let monNum = this.currMonNum ? '#' + this.currMonNum : '';
      let title = `单体${monNum}测试电压折线图(V)`;
      this.monInfo.title = title;
      monLineChart.title.show = false;
      monLineChart.series = dataList.map((item, index) => {
        let monNum = "#" + (index + 1) + '电压';
        return {
          name: monNum,
          data: item,
        };
      });

      this.$nextTick(() => {
        // 更新图表
        this.$refs.monInfo.setOption(monLineChart);
      });
    },
    // 设置柱状图
    setBarChart() {
      this.$refs.monBar.setOption(monBarChart);
    },
    // 查询测试信息
    searchBattTestData() {
      let batt = this.batt;
      // 开启等待框
      let loading = this.$layer.loading(1);
      getLD9TestList({
        BattGroupId: batt.BattGroupId,
      })
        .then((res) => {
          // 关闭等待框
          this.$layer.close(loading);
          // 解析数据
          let rs = JSON.parse(res.data.result);
          // console.log(rs, "====rs ld9");
          let herongDischarge = []; // 核容测试
          let jianceDischarge = []; // 监测放电
          let jianceCharge = []; // 监测充电
          if (rs.code == 1) {
            rs.data.forEach((item) => {
              item.value = item.test_starttime;
              item.label = item.test_starttime;
              let list = item.ld9testdata.map((v) => {
                v.test_type = item.test_type;
                return {
                  label: "电池单体#" + v.test_monnum,
                  value: v.test_monnum,
                  value1: v
                };
              });

              item.children = list;
              switch (item.test_type) {
                case 1:
                  herongDischarge.push(item);
                  break;
                case 3:
                  jianceDischarge.push(item);
                  break;
                case 4:
                  jianceCharge.push(item);
                  break;
              }
            });
          } else {
            this.$layer.msg("未获取到充放电记录");
          }
          // 充放电记录
          this.test_record.list[0].children = herongDischarge;
          this.test_record.list[1].children = jianceDischarge;
          this.test_record.list[2].children = jianceCharge;
        })
        .catch((error) => {
          this.$layer.close(loading);
          console.log(error);
        });
    },
    // 切换测试信息
    testRecordChange(...arg) {
      let testRecord = this.getTestRecord();
      
      if (!testRecord) {
        return;
      }
      // 手动调用的change方法
      if (arg[1]) {
        testRecord = arg[1];
      }
      // console.log(testRecord, "testRecord changed");
      this.battState.test_type = testRecord.test_type;
      this.currMonNum = testRecord.test_monnum;
      // 初始化图表
      this.initChart();

      // 获取顶部电池组信息
      // this.searchBattTestDataStop(
      //     testRecord.BattGroupId,
      //     testRecord.test_record_count
      // );

      // 查询历史数据
      this.searchHistory(testRecord);
    },
    // 查询历史信息
    searchHistory(data) {
      this.loading = true;
      this.$axios
        .all([
          getLD9Testdata(data),
          getLD9GrpTestdata(data),
          getLD9MonCaps(data),
        ])
        .then(
          this.$axios.spread((...res) => {
            // console.log(res, "8899");
            let res0 = JSON.parse(res[0].data.result);
            let res1 = JSON.parse(res[1].data.result);
            let res2 = JSON.parse(res[2].data.result);
            this.loading = false;
            // 放电数据
            if (res0.code) {
              this.HistoryData = res0.data;
              // console.log(res0.data, "===data");
              // 格式化数据
              this.formateHisData(res0.data);
              // this.searchBattresdata();
            }
            // 组端数据
            if (res1.code) {
              // console.log(res1.data[0]);
              let data = res1.data[0];
              this.grpData = data;
              allData.groupVol = data.group_vol;
              allData.testCurr = data.test_curr;
              allData.testCap = data.test_cap;
              allData.test_timelong = data.test_timelong;
              // console.log(allData.testCap, 'cap');

              this.setTopData();
              const obj = {
                0: "无",
                1: "手动停止",
                2: "单体下限到",
                3: "充电完成停止",
                4: "测试完成停止",
                5: "远程停止",
                6: "在线电压低",
              };
              this.battState.test_type = data.test_type;
              this.battState.stop_reason = obj[data.test_stopreason];
              // console.log(this.battState, "battState ========111====");
            }
            // 所有单体的实际容量数据
            let monBarVol = [];
            if (res2.code) {
              let data = res2.data;
              // console.log(data, 'cap list');
              monBarChart.series[0].data = monBarVol;
              let batt = this.batt;
              for (let i = 1, j = batt.MonCount; i <= j; i++) {
                monBarVol.push(["#" + i, 0]);
              }
              data.forEach((v) => {
                let idx = v.test_monnum - 1;
                monBarVol[idx][1] = v.test_cap;
              });
            }
            this.setBarChart();
          })
        )
        .catch((err) => {
          this.loading = false;
          console.error(err);
        });
    },
    // 格式化历史信息数据
    formateHisData(data) {
      let filterData = data;
      let record_time = -1; // 记录时间
      let record_num = -100; // 记录笔数
      allData.endData = filterData[filterData.length - 1];
      filterData.forEach((item) => {
        let mon_num = item.mon_num;
        let testTimeLong = formatSeconds(item.test_timelong);
        // 获取组端电压，在线电压,组端电流的信息和开辟一个单体柱状图
        if (record_num != item.record_num) {
          record_time = item.record_time;
          record_num = item.record_num;
          allData.groupVol.push([testTimeLong, item.group_vol]);
          allData.onlineVol.push([testTimeLong, item.online_vol]);
          allData.testCurr.push([testTimeLong, item.test_curr]);
          allData.recordTime.push(testTimeLong);
          allData.testTimeLong.push(item.test_timelong);
          allData.testCap.push(item.test_cap);
          allData.dataList.push(item);
          this.testTimeLong.push(item.test_timelong);
        }

        // 设置单体折线图信息
        if (typeof monLineData.vol[mon_num - 1] != "object") {
          let index = mon_num - 1;
          // 开辟空间
          monLineData.vol[index] = [];
          // monLineData.resCap[index] = [];
        }
        // 获取到需要使用的空间
        let monLineVol = monLineData.vol[mon_num - 1];
        monLineVol.push([testTimeLong, item.mon_vol]);
      });

      // 初始化图表的配置项
      this.initChartOptions();

      // 设置容量
      // this.setCapList();
      // 设置折线图表
      this.setLineChart();
    },
    setCapList() {
      let batt = this.batt;
      let batt_test_data = monBarData.vol;
      let batt_test_evary_record = allData.dataList;
      for (let i = 0; i < batt_test_data.length; i++) {
        let vol_list = batt_test_data[i].map((item) => {
          return item[1];
        });
        let max_vol = Math.max.apply(null, vol_list);
        for (let j = 0; j < vol_list.length; j++) {
          let avg_curr =
            batt_test_evary_record[i].test_timelong > 0
              ? (batt_test_evary_record[i].test_cap * 3600) /
                batt_test_evary_record[i].test_timelong
              : batt_test_evary_record[i].test_curr;
          let actionvalue = GetMonomerCap(
            batt.MonCapStd,
            GetHourRate(batt.MonCapStd, avg_curr),
            batt_test_evary_record[i].test_cap,
            max_vol,
            vol_list[j],
            batt.MonVolStd,
            1
          );
          let restvalue = GetMonomerCap(
            batt.MonCapStd,
            GetHourRate(batt.MonCapStd, avg_curr),
            batt_test_evary_record[i].test_cap,
            max_vol,
            vol_list[j],
            batt.MonVolStd,
            0
          );
          let batt_num_text = "#" + (j + 1);
          monBarData.realCap[i].push([batt_num_text, actionvalue.toFixed(0)]);
          monBarData.resCap[i].push([batt_num_text, restvalue.toFixed(0)]);
          monBarData.preCap[i].push([
            batt_num_text,
            ((actionvalue * 100) / batt.MonCapStd).toFixed(0),
          ]);
        }
      }
      // console.log(monLineData.vol);
      // console.log(monLineData.resCap);
      // 容量
      monLineData.vol.forEach((item, key) => {
        item.forEach((volItem, volItemKey) => {
          let resCapItem = monBarData.resCap[volItemKey];
          if (resCapItem) {
            monLineData.resCap[key].push([volItem[0], resCapItem[key][1]]);
          }
        });
      });
    },
    // 获取测试的信息
    getTestRecord() {
      let value = this.test_record.value;
      // 没有选择充放电记录,返回-1
      if (value.length == 0) {
        return false;
      }
      let el = this.$refs.elRecord;
      let [{data: {value1: result}}] = el.getCheckedNodes();
      // 返回结果集
      // console.log(result, "battState get", value);
      return result;
    },
    // 设置顶部文本框的数据
    setTopData() {
      // 组端电压和在线电压
      let groupVol = allData.groupVol;
      let testCurr = allData.testCurr;
      let testCap = allData.testCap;

      this.top.group = "组端:" + groupVol.toFixed(2) + "V";
      this.top.curr = testCurr.toFixed(1) + "A";
      this.top.test_cap = testCap.toFixed(1) + "AH";
      this.top.test_long = formatSeconds(allData.test_timelong);
    },
    // 向父级发送同步页面的指令
    syncPage() {
      let batt = this.batt;
      let search =
        "?province=" +
        batt.StationName1 +
        "&city=" +
        batt.StationName2 +
        "&county=" +
        batt.StationName5 +
        "&home=" +
        batt.StationName3 +
        "&batt=" +
        batt.BattGroupId;
      window.parent.postMessage(
        {
          cmd: "syncPage",
          params: {
            pageInfo: {
              label: "实时监控",
              name: "movingRingSysteRrealTime",
              src: "#/moving-ring-system" + search,
              closable: true,
            },
          },
        },
        "*"
      );
    },
    // 导出报表
    exportExcel () {
      if (!this.currMonNum) {
        this.$layer.msg("暂无数据导出,请先选择充放电数据！");
        return false;
      }
      var monVolLinePng = this.$G.chartManage.get('monInfo').getDataURL({
        pixelRatio: 1,
        backgroundColor: "#fff",
      });

      var groupVolLinePng = this.$G.chartManage.get('groupVol').getDataURL({
        pixelRatio: 1,
        backgroundColor: "#fff",
      });

      var currLinePng = this.$G.chartManage.get('curr').getDataURL({
        pixelRatio: 1,
        backgroundColor: "#fff",
      });

      var monCapBarPng = this.$G.chartManage.get('monBar').getDataURL({
        pixelRatio: 1,
        backgroundColor: "#fff",
      });

      var battInfo = this.batt;
      const type = {
        1: '放电',
        3: '放电',
        4: '充电',
      };
      battInfo.BattGroupName5 = type[this.battState.test_type];
      battInfo.BattGroupName6 = this.battState.stop_reason;
      var params = {
        pageName: "charge-test-monData",
        mon_vol_line: monVolLinePng,
        group_vol_line: groupVolLinePng,
        test_curr_line: currLinePng,
        batt_real_cap: monCapBarPng,
        battinf: JSON.stringify(battInfo),
        testdatainfo: JSON.stringify(this.grpData),
        mon_test_data: JSON.stringify(this.HistoryData),
      };
      //console.info(params);
      let baseURL = this.$axios.defaults.baseURL;
      baseURL = baseURL ? baseURL : "";
      var actionUrl = baseURL + "EchartPictureDowload.servlet";
      this.construtFormSubmit(actionUrl, params);
    },
    construtFormSubmit(actionUrl, parms) {
      var form = document.createElement("form");
      form.id = "specialGraph";
      form.style.display = "none";
      form.action = actionUrl;
      form.enctype = "multipart/form-data";
      form.method = "post";
      document.body.appendChild(form);

      for (var key in parms) {
        var input = document.createElement("input");
        input.type = "hidden";
        input.name = key;
        input.value = parms[key];
        form.appendChild(input);
      }
      form.submit();
      document.body.removeChild(form);
    }
  },
  computed: {
    battFullName() {
      let batt = this.batt;
      if (batt.StationName && batt.BattGroupName) {
        return batt.StationName + "-" + batt.BattGroupName;
      }
      return "电池组全称";
    },
    formateBattState() {
      let battState = this.battState;
      let res = "";
      switch (battState.test_type) {
        case 1:
        case 3:
          res = "放电 (终止原因：" + battState.stop_reason + ")";
          break;
        case 4:
          res = "充电";
          break;
        default:
          res = "";
          break;
      }
      return res;
    },
  },
  mounted() {
    // 初始化图表
    this.initChart();
    // 屏幕缩放时触发
    window.addEventListener("resize", () => {
      this.resize();
    });
  },
};
</script>

<style scoped>
.page-history {
  color: #ffffff;
}

.table-cell.text-right {
  font-size: 14px;
}

.table-row .table-cell {
  padding-top: 12px;
}

.page-content {
  position: relative;
  padding-top: 8px;
  padding-bottom: 2px;
  box-sizing: border-box;
  height: 100%;
}

.history-list {
  position: absolute;
  top: 8px;
  left: 24px;
  z-index: 99;
}

.flex-box-list {
  display: flex;
  flex-direction: row;
  height: 50%;
  box-sizing: border-box;
}

.page-content .flex-box {
  flex: 1;
  overflow-x: hidden;
}

.box-tools {
  line-height: 32px;
}

.box-tools .iconfont {
  font-size: 20px;
}

.box-tools .iconfont:hover {
  cursor: pointer;
  color: #cfcfcf;
}

.box-tools .iconfont:active {
  color: #ff0000;
}

.chart-wrapper {
  position: relative;
  box-sizing: border-box;
  margin: 0 16px;
  height: 100%;
  padding: 12px;
  background-image: radial-gradient(#151f4140, #3667ec40);
}

.chart-wrapper:before,
.chart-wrapper:after,
.chart-wrapper-corner {
  position: absolute;
  display: inline-block;
  content: " ";
  width: 18px;
  height: 18px;
}

.chart-wrapper:before {
  left: 0;
  top: 0;
  border-top: 2px solid #00feff;
  border-left: 2px solid #00feff;
}

.chart-wrapper:after {
  left: 0;
  bottom: 0;
  border-bottom: 2px solid #00feff;
  border-left: 2px solid #00feff;
}

.chart-wrapper-corner.top-right {
  top: 0;
  right: 0;
  border-top: 2px solid #00feff;
  border-right: 2px solid #00feff;
}

.chart-wrapper-corner.bottom-right {
  bottom: 0;
  right: 0;
  border-bottom: 2px solid #00feff;
  border-right: 2px solid #00feff;
}

.chart-tools-wrapper {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 99;
}

.chart-contain {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}

.chart {
  width: 100%;
  height: 100%;
}
</style>

 src/pages/dataTest/realTime.vue

@@ -2480,6 +2480,10 @@
        batt.StationName3 +
        "&batt=" +
        batt.BattGroupId;
      let url = '#/history';
      if (regEquipType(batt.FBSDeviceId, "LD9")) {
        url = '#/history-ld9';
      }
      window.parent.postMessage(
        {
          cmd: "syncPage",
@@ -2487,7 +2491,7 @@
            pageInfo: {
              label: "历史数据",
              name: "history",
              src: "#/history" + search,
              src: url + search,
              closable: true,
            },
          },

 src/router/routes.js

@@ -130,6 +130,11 @@
    component: (resolve) => require(['../pages/dataTest/history.vue'], resolve)
},
{
  path: '/history-ld9',
  meta: {},
  component: (resolve) => require(['../pages/dataTest/historyLD9.vue'], resolve)
},
{
    path: '/history-aio',
    meta: {
        name: '一体机导入记录'