修改历史布局

whychdw

2020-10-20 625ac433830bf7557a8197b05ce6242e80f8f6df

修改历史布局

 src/assets/js/api.js

@@ -322,4 +322,12 @@
        url: "BattMap_informationAction!multiAmount",
        data: 'json='+JSON.stringify(data),
    });
}

export const searchMapHomeState = () => {
    return axios({
        method: "post",
        url: 'BattMap_informationAction!findStationState',
        data: null
    });
}

 src/components/ChartWrapper.vue

New file
@@ -0,0 +1,103 @@
<template>
    <div class="chart-wrapper">
        <div class="chart-wrapper-corner top-right"></div>
        <div class="chart-wrapper-corner bottom-right"></div>
        <div class="chart-wrapper-title">
            <span class="title-icon">
                <span class="title-icon-content"></span>
            </span>
            {{title}}
        </div>
        <slot></slot>
    </div>
</template>

<script>
export default {
    name: "ChartWrapper",
    props:{
        title: {
            type: String,
            default: '未知内容'
        },
    }
}
</script>

<style scoped>
.chart-wrapper {
    position: relative;
    box-sizing: border-box;
    height: 100%;
    background-image: radial-gradient(#151f4140, #3667ec40);
}
.chart-wrapper-title {
    position: absolute;
    top: 16px;
    left: 16px;
    color: #00feff;
    font-size: 14px;
    font-weight: bold;
}
.title-icon {
    display: inline-block;
    width: 30px;
    height: 30px;
}
.title-icon:before,
.title-icon:after,
.title-icon-content{
    display: inline-block;
    content: "";
    width: 4px;
    vertical-align: middle;
}

.title-icon:before {
    height: 14px;
    background-color: #0f448d;
}
.title-icon-content {
    margin-left: 4px;
    height: 18px;
    background-color: #1e77b8;
}
.title-icon:after {
    margin-left: 4px;
    height: 22px;
    background-color: #2cabe3;
}
.chart-wrapper:before,
.chart-wrapper:after,
.chart-wrapper-corner {
    position: absolute;
    display: inline-block;
    content: " ";
    width: 16px;
    height: 16px;
}
.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;
}
</style>

 src/components/chart/theme/transparent.js

@@ -39,7 +39,7 @@
// 引入 ECharts 主模块
import ECharts from "echarts/lib/echarts";

var contrastColor = '#15E3F3';
var contrastColor = '#00feff';

var axisCommon = function () {
  return {
@@ -63,8 +63,8 @@
    splitLine: {
      show: false,
      lineStyle: {
        type: 'dashed',
        color: '#aaa'
        type: 'solid',
        color: '#0b388a'
      }
    },
    splitArea: {

 src/pages/dataTest/history.vue

@@ -1,13 +1,13 @@
<template>
    <flex-layout direction="row" class="page-history">
        <home-list slot="header"
        @toggleChange="toggleChange"
        @leaf-click="leafClick"></home-list>
                   @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>
                <el-tooltip class="item" effect="dark" content="实时数据" placement="bottom">
                    <i class="iconfont el-icon-jinru" @click="syncPage"></i>
                </el-tooltip>
            </div>
            <flex-layout>
                <div class="content-header" slot="header">
@@ -15,31 +15,32 @@
                        <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>
                                <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>
                                <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>
                                <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>
                                <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" placeholder="请选择测试日期"
                                style="width: 100%; min-width:16rem"
                                @change="testRecordChange">
                                <el-cascader v-model="test_record.value" :options="test_record.list"
                                             size="small" 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>
@@ -48,13 +49,13 @@
                            </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>
                                <el-input v-model="top.test_cap" 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.re_cap" placeholder="" 
                                size="small" :disabled="true"></el-input>
                                <el-input v-model="top.re_cap" placeholder=""
                                          size="small" :disabled="true"></el-input>
                            </div>
                            <div class="table-cell text-right w80">续航时间:</div>
                            <div class="table-cell">
@@ -65,27 +66,36 @@
                </div>
                <div class="page-content">
                    <div class="flex-box-list">
                        <div class="flex-box">
                            <line-chart ref="groupVol" id="groupVol" unit="V"></line-chart>
                        <div class="flex-box" style="margin-bottom: 8px;">
                            <chart-wrapper title="端电压折线图">
                                <line-chart ref="groupVol" id="groupVol" unit="V"></line-chart>
                            </chart-wrapper>
                        </div>
                        <div class="flex-box">
                            <bar-chart ref="monBar" id="monBar" :show-label="false"></bar-chart>
                        <div class="flex-box" style="margin-bottom: 8px;">
                            <chart-wrapper :title="monBarTitle">
                                <bar-chart ref="monBar" id="monBar" :show-label="false"></bar-chart>
                            </chart-wrapper>
                        </div>
                    </div>
                    <div class="flex-box-list">
                        <div class="flex-box">
                            <line-chart ref="groupCurr" id="groupCurr" unit="A"></line-chart>
                        <div class="flex-box" style="margin-top: 8px;">
                            <chart-wrapper title="电池电流折线图">
                                <line-chart ref="groupCurr" id="groupCurr" unit="A"></line-chart>
                            </chart-wrapper>
                        </div>
                        <div class="flex-box">
                            <line-chart ref="monInfo" id="monInfo"></line-chart>
                        <div class="flex-box" style="margin-top: 8px;">
                            <chart-wrapper title="单体电压">
                                <line-chart ref="monInfo" id="monInfo"></line-chart>
                            </chart-wrapper>

                        </div>
                    </div>
                </div>
                <div class="content-footer" slot="footer">
                    <div class="slider-container">
                        <el-slider v-model="slider" size="small" 
                        :format-tooltip="formatTooltip"
                        @input="sliderInput"></el-slider>
                        <el-slider v-model="slider" size="small"
                                   :format-tooltip="formatTooltip"
                                   @input="sliderInput"></el-slider>
                    </div>
                </div>
            </flex-layout>
@@ -98,635 +108,698 @@
import HomeList from "./HomeList";
import BarChart from "../../components/chart/BarChart";
import LineChart from "../../components/chart/LineChart";
import ChartWrapper from "@/components/ChartWrapper";
import chartImage from '@/assets/images/eleOn.gif'

import {
  searchBattTestData,
  searchBattTestDataStop,
  searchHistory
    searchBattTestData,
    searchBattTestDataStop,
    searchHistory
} from "../../assets/js/history";

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

// 端信息
let allData = {
  groupVol: [],
  onlineVol: [],
  testCurr: [],
  testTimeLong: [],
  recordTime: [],
  testCap: [],
  dataList: []
    groupVol: [],
    onlineVol: [],
    testCurr: [],
    testTimeLong: [],
    recordTime: [],
    testCap: [],
    dataList: []
};
// 单体折线信息
let monLineData = {
  vol: []
    vol: []
};
// 单体柱状信息
let monBarData = {
  vol: []
    vol: []
};
// 4个图表
let groupVolLineChart, currLineChart, monLineChart, monBarChart;

export default {
  components: {
    ContentBox,
    HomeList,
    BarChart,
    LineChart
  },
  data() {
    
    return {
      data: [],
      batt: {},
      top: {
        state: "", // 电池状态
        group: "", // 端电压
        curr: "", // 电池电流
        test_long: "", // 测试时长
        test_cap: "", // 测试容量
        re_cap: "", // 剩余容量
        xuhang: "" // 续航时长
      },
      test_record: {
        value: [],
        list: [
          {
            value: "herongDischarge",
            label: "核容放电",
            children: []
          },
          {
            value: "jianceDischarge",
            label: "监测放电",
            children: []
          },
          {
            value: "herongCharge",
            label: "核容充电",
            children: []
          },
          {
            value: "jianceCharge",
            label: "监测充电",
            children: []
          }
        ]
      },
      slider: 100,
      testTimeLong: [],
      battState: {
        test_type: -100,
        stop_reason: ''
      }
    }
  },
  methods: {
    toggleChange() {
      console.log(123);
      this.resize();
    components: {
        ContentBox,
        HomeList,
        BarChart,
        LineChart,
        ChartWrapper
    },
    resize() {
      this.$G.chartManage.resize("groupVol");
      this.$G.chartManage.resize("monBar");
      this.$G.chartManage.resize("groupCurr");
      this.$G.chartManage.resize("monInfo");
    },
    leafClick(data) {
      this.batt = data;
      // 重置页面内容
      this.init();
      // 获取充放电记录
      this.searchBattTestData();
    },
    // 初始化页面数据
    init() {
      // 初始化充放电记录
      this.test_record.value = [];
      this.test_record.list[0].children = [];
      this.test_record.list[1].children = [];
      this.test_record.list[2].children = [];
      this.test_record.list[3].children = [];
      // 初始化顶部文本框内容
      this.top = {
        state: "", // 电池状态
        group: "", // 端电压
        curr: "", // 电池电流
        test_long: "", // 测试时长
        test_cap: "", // 测试容量
        re_cap: "", // 剩余容量
        xuhang: "---" // 续航时长
      };

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

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

      // 端信息
      allData = {
        groupVol: [],
        onlineVol: [],
        testCurr: [],
        testTimeLong: [],
        recordTime: [],
        testCap: [],
        dataList: [],
      };
      // 单体折线信息
      monLineData = {
        vol: []
      };
      // 单体柱状信息
      monBarData = {
        vol: []
      };
      // 端电压折线图
      groupVolLineChart = {
        color: ["#FF0000", "#15E3F3"],
        title: {
          show: true,
          text: "端电压折线图",
          x: "center",
          textStyle: {
            fontSize: "14"
          }
        },
        legend: {
          show: true,
          data: ["组端电压", "在线电压"],
          right: 0,
          orient: "vertical"
        },
        series: [
          {
            name: "组端电压",
            data: []
          },
          {
            name: "在线电压",
            data: []
          }
        ]
      };

      // 电池电流折线图
      currLineChart = {
        title: {
          show: true,
          text: "电池电流折线图",
          x: "center",
          textStyle: {
            fontSize: "14"
          }
        },
        series: [
          {
            name: "电池电流",
            data: []
          }
        ]
      };

      // 单体信息折线图
      monLineChart = {
        title: {
          show: true,
          text: "单体电压",
          x: "center",
          textStyle: {
            fontSize: "14"
          }
        },
        series: []
      };
      // 设置折线图
      this.setLineChart();

      // 单体信息柱状图
      monBarChart = {
        title: {
          show: true,
          text: "最大值=0V;最小值=0V;平均值=0V",
          x: "center",
          textStyle: {
            fontSize: "14"
          }
        },
        series: [
          {
            name: "单体电压",
            zlevel: 1,
            data: []
          }
          // {
          //     name: '初始单体电压',
          //     barGap: '-100%',
          //     zlevel: 0,
          //     hColor: '#FFFFFF',
          //     data: []
          // }
        ]
      };
      // 设置柱状图
      this.setBarChart();
    },
    // 设置折线图
    setLineChart() {
      // 设置端电压折线图
      this.setGroupVolLineChart();
      // 设置电池电流折线图
      this.setCurrLineChart();
      // 设置单体折线图
      this.setMonLineChart();
      // 建立联动
      this.$G.chartManage.connect(["groupVol", "groupCurr", "monInfo"]);
    },
    // 设置端电压折线图
    setGroupVolLineChart() {
      // 根据allData.groupVol数据设置groupVolLineChart的值
      groupVolLineChart.series[0].data = allData.groupVol;
      groupVolLineChart.series[1].data = allData.onlineVol;
      // 更新图表
      this.$refs.groupVol.setOption(groupVolLineChart);
    },
    // 设置电池电流折线图
    setCurrLineChart() {
      // 根据allData.testCurr数据设置currLineChart的值
      currLineChart.series[0].data = allData.testCurr;
      // 更新图表
      this.$refs.groupCurr.setOption(currLineChart);
    },
    // 设置单体折线图
    setMonLineChart() {
      // 根据monLineData的值设置monLineChart
      let dataList = monLineData.vol;
      monLineChart.series = dataList.map((item, index) => {
        let monNum = "#" + (index + 1);
    data() {
        return {
          name: monNum,
          data: item
        };
      });
      // 更新图表
      this.$refs.monInfo.setOption(monLineChart);
    },
    // 设置柱状图
    setBarChart() {
      let batt = this.batt;
      // 根据monBarData的值设置monBarChart
      let dataList = monBarData.vol;
      let index = this.getDataIndex(dataList.length, this.slider);
      if (index != -1) {
        let data = dataList[index];
        let batNum = getBarNum(data);
        monBarChart.title.text = "最大值="+batNum.max+"V;最小值="+batNum.min+"V;平均值="+batNum.avg.toFixed(3)+"V"
        monBarChart.series[0].data = data;
        // monBarChart.series[1].data = dataList[0];
      }
      // 设置柱状图
      this.$refs.monBar.setOption(monBarChart);
    },
    // 查询测试信息
    searchBattTestData() {
      let batt = this.batt;
      // 开启等待框
      let loading = this.$layer.loading(1);
      searchBattTestData({
        num: batt.FBSDeviceId,
        BattGroupId: batt.BattGroupId
      })
        .then(res => {
          // 关闭等待框
          this.$layer.close(loading);
          // 解析数据
          let rs = JSON.parse(res.data.result);
          let herongDischarge = []; // 核容放电
          let herongCharge = []; // 核容充电
          let jianceDischarge = []; // 监测放电
          let jianceCharge = []; // 监测充电
          if (rs.code == 1) {
            rs.data.forEach(item => {
              item.value = item.test_starttime;
              item.label = item.test_starttime;
              if (item.test_type == 3) {
                // 测试类型为放电
                if (item.test_starttype == 3) {
                  //  核容放电
                  herongDischarge.push(item);
                } else {
                  // 监测放电
                  jianceDischarge.push(item);
                }
              } else if (item.test_type == 2) {
                // 测试类型为充电
                if (item.test_starttype == 3) {
                  //  核容充电
                  herongCharge.push(item);
                } else {
                  // 监测充电
                  jianceCharge.push(item);
                }
              }
            });
          } else {
            this.$layer.msg("未获取到充放电记录");
          }
          // 充放电记录
          this.test_record.list[0].children = herongDischarge;
          this.test_record.list[1].children = jianceDischarge;
          this.test_record.list[2].children = herongCharge;
          this.test_record.list[3].children = jianceCharge;
        })
        .catch(error => {
          this.$layer.close(loading);
          console.log(error);
        });
    },
    // 切换测试信息
    testRecordChange() {
      let testRecord = this.getTestRecord();
      // 初始化图表
      this.initChart();

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

      // 查询历史数据
      this.searchHistory(testRecord.BattGroupId, testRecord.test_record_count);
    },
    // 查询顶部信息
    searchBattTestDataStop(BattGroupId, count) {
      searchBattTestDataStop(BattGroupId, count).then(res => {
        let rs = JSON.parse(res.data.result);
        if (rs.code == 1) {
          let data = rs.data[0];
          this.top.test_cap = data.test_cap.toFixed(1) + "AH";
          this.top.test_long = formatSeconds(data.test_timelong);
            data: [],
            batt: {},
            top: {
                state: "", // 电池状态
                group: "", // 端电压
                curr: "", // 电池电流
                test_long: "", // 测试时长
                test_cap: "", // 测试容量
                re_cap: "", // 剩余容量
                xuhang: "" // 续航时长
            },
            test_record: {
                value: [],
                list: [
                    {
                        value: "herongDischarge",
                        label: "核容放电",
                        children: []
                    },
                    {
                        value: "jianceDischarge",
                        label: "监测放电",
                        children: []
                    },
                    {
                        value: "herongCharge",
                        label: "核容充电",
                        children: []
                    },
                    {
                        value: "jianceCharge",
                        label: "监测充电",
                        children: []
                    }
                ]
            },
            slider: 100,
            testTimeLong: [],
            battState: {
                test_type: -100,
                stop_reason: ''
            },
            monBarTitle: "最大值=0V;最小值=0V;平均值=0V",
        }
      });
    },
    // 查询历史信息
    searchHistory(BattGroupId, count) {
      // 开启等待框
      let loading = this.$layer.loading(1);
      searchHistory({
        BattGroupId: BattGroupId,
        test_record_count: count
      }).then(res => {
          // 关闭等待框
          this.$layer.close(loading);
          let rs = JSON.parse(res.data.result);
          let data = [];
          // 数据
          if (rs.code == 1) {
            data = rs.data;
          }
          // 格式化数据
          this.formateHisData(data);
        })
        .catch(error => {
          // 关闭等待框
          this.$layer.close(loading);
          console.log(error);
        });
    },
    // 格式化历史信息数据
    formateHisData(data) {
      let record_time = -1; // 记录时间
      data.forEach(item => {
        let mon_num = item.mon_num;
        // 获取组端电压，在线电压,组端电流的信息和开辟一个单体柱状图
        if (record_time != item.record_time) {
          record_time = item.record_time;
          allData.groupVol.push([record_time, item.group_vol]);
          allData.onlineVol.push([record_time, item.online_vol]);
          allData.testCurr.push([record_time, item.test_curr]);
          allData.recordTime.push(record_time);
          allData.testTimeLong.push(item.test_timelong);
          allData.testCap.push(item.test_cap);
          allData.dataList.push(item);
          this.testTimeLong.push(item.test_timelong);
          // 开辟空间
          monBarData.vol.push([]);
        }
        // 单体电压柱状图设置
        let monBarVol = monBarData.vol[monBarData.vol.length - 1];
        monBarVol.push(["#" + mon_num, item.mon_vol]);

        // 设置单体折线图信息
        if (typeof monLineData.vol[mon_num - 1] != "object") {
          // 开辟空间
          monLineData.vol[mon_num - 1] = [];
        }
        // 获取到需要使用的空间
        let monLineVol = monLineData.vol[mon_num - 1];
        monLineVol.push([record_time, item.mon_vol]);
      });
      // 设置折线图表
      this.setLineChart();
      // 执行滑动事件
      this.sliderInput();
    },
    // 获取测试的信息
    getTestRecord() {
      let value = this.test_record.value;
      // 没有选择充放电记录,返回-1
      if (value.length == 0) {
        return -1;
      }
      let type = value[0];
      let time = value[1];
      let list = this.test_record.list;
      let result = 0;
      // 遍历list
      for (let i in list) {
        let item = list[i];
        if (item.value == type) {
          for (let j in item.children) {
            let child = item.children[j];
            if (child.value == time) {
              result = child;
              break;
            }
          }
          break;
        }
      }
      // 设置电池状态
      this.battState.test_type = result.test_type;
      this.battState.stop_reason = result.test_stoptype_reason;
      // 返回结果集
      return result;
    },
    // 格式化滑块显示的内容
    formatTooltip(value) {
      let testTimeLong = this.testTimeLong;
      let index = this.getDataIndex(testTimeLong.length, value);
      let test_long = formatSeconds(0);
      if (index != -1) {
        test_long = formatSeconds(testTimeLong[index]);
      }
      this.top.test_long = test_long;
      return test_long;
    },
    // 拖动滑块时触发
    sliderInput() {
      // 设置头部信息
      this.setTopData();

      // 设置柱状图
      this.setBarChart();
    },
    // 设置顶部文本框的数据
    setTopData() {
      let batt = this.batt;
      // 组端电压和在线电压
      let groupVol = allData.groupVol;
      let onlineVol = allData.onlineVol;
      let testCurr = allData.testCurr;
      let testCap = allData.testCap;
      let monVols = monBarData.vol;
      let dataList = allData.dataList;
      let index = this.getDataIndex(groupVol.length, this.slider);
      if (index != -1) {
        this.top.group =
          "在线:" +
          onlineVol[index][1].toFixed(2) +
          "V；组端:" +
          groupVol[index][1].toFixed(2) +
          "V";
        this.top.curr = testCurr[index][1].toFixed(1) + "A";
        this.top.test_cap = testCap[index].toFixed(1) + "AH";
        // 剩余容量
        let monVol = monVols[index];
        let list = dataList[index];
        let avg_curr = list.test_timelong>0?list.test_cap*3600/list.test_timelong:list.test_curr;
        let batNum = getBarNum(monVol);
        let over_cap = GetMonomerCap(batt.MonCapStd, GetHourRate(batt.MonCapStd, avg_curr), 
        list.test_cap, batNum.max, batNum.min,batt.MonVolStd, 0);
        this.top.re_cap = over_cap.toFixed(1)+'AH';
      }
    },
    // 根据百分比获取显示的数据的笔数
    getDataIndex(num, percent) {
      return Math.floor(num * percent / 100) - 1;
    },
    // 向父级发送同步页面的指令
    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: 'realTime',
            src: '#/real-time'+search,
            closable: true,
          }
    methods: {
        toggleChange() {
            console.log(123);
            this.resize();
        },
      }, "*");
    }
  },
  computed: {
    battFullName() {
      let batt = this.batt;
      if (batt.StationName && batt.BattGroupName) {
        return batt.StationName + "-" + batt.BattGroupName;
      }
      return "电池组全称";
        resize() {
            this.$G.chartManage.resize("groupVol");
            this.$G.chartManage.resize("monBar");
            this.$G.chartManage.resize("groupCurr");
            this.$G.chartManage.resize("monInfo");
        },
        leafClick(data) {
            this.batt = data;
            // 重置页面内容
            this.init();
            // 获取充放电记录
            this.searchBattTestData();
        },
        // 初始化页面数据
        init() {
            // 初始化充放电记录
            this.test_record.value = [];
            this.test_record.list[0].children = [];
            this.test_record.list[1].children = [];
            this.test_record.list[2].children = [];
            this.test_record.list[3].children = [];
            // 初始化顶部文本框内容
            this.top = {
                state: "", // 电池状态
                group: "", // 端电压
                curr: "", // 电池电流
                test_long: "", // 测试时长
                test_cap: "", // 测试容量
                re_cap: "", // 剩余容量
                xuhang: "---" // 续航时长
            };

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

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

            // 端信息
            allData = {
                groupVol: [],
                onlineVol: [],
                testCurr: [],
                testTimeLong: [],
                recordTime: [],
                testCap: [],
                dataList: [],
            };
            // 单体折线信息
            monLineData = {
                vol: []
            };
            // 单体柱状信息
            monBarData = {
                vol: []
            };
            // 端电压折线图
            groupVolLineChart = {
                color: ["#0081ff", "#df9d02"],
                title: {
                    show: false,
                    text: "端电压折线图",
                    x: "left",
                    textStyle: {
                        fontSize: "14"
                    }
                },
                legend: {
                    show: true,
                    data: ["组端电压", "在线电压"],
                    right: 0,
                    orient: "vertical"
                },
                series: [
                    {
                        name: "组端电压",
                        data: []
                    },
                    {
                        name: "在线电压",
                        data: []
                    }
                ]
            };

            // 电池电流折线图
            currLineChart = {
                title: {
                    show: false,
                    text: "电池电流折线图",
                    x: "center",
                    textStyle: {
                        fontSize: "14"
                    }
                },
                series: [
                    {
                        name: "电池电流",
                        data: []
                    }
                ]
            };

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

            // 单体信息柱状图
            this.monBarTitle = "最大值=0V;最小值=0V;平均值=0V";
            monBarChart = {
                title: {
                    show: false,
                    text: "最大值=0V;最小值=0V;平均值=0V",
                    x: "center",
                    textStyle: {
                        fontSize: "14"
                    }
                },
                series: [
                    {
                        name: "单体电压",
                        zlevel: 1,
                        data: []
                    }
                    // {
                    //     name: '初始单体电压',
                    //     barGap: '-100%',
                    //     zlevel: 0,
                    //     hColor: '#FFFFFF',
                    //     data: []
                    // }
                ]
            };
            // 设置柱状图
            this.setBarChart();
        },
        // 设置折线图
        setLineChart() {
            // 设置端电压折线图
            this.setGroupVolLineChart();
            // 设置电池电流折线图
            this.setCurrLineChart();
            // 设置单体折线图
            this.setMonLineChart();
            // 建立联动
            this.$G.chartManage.connect(["groupVol", "groupCurr", "monInfo"]);
        },
        // 设置端电压折线图
        setGroupVolLineChart() {
            // 根据allData.groupVol数据设置groupVolLineChart的值
            groupVolLineChart.series[0].data = allData.groupVol;
            groupVolLineChart.series[1].data = allData.onlineVol;
            // 更新图表
            this.$refs.groupVol.setOption(groupVolLineChart);
        },
        // 设置电池电流折线图
        setCurrLineChart() {
            // 根据allData.testCurr数据设置currLineChart的值
            currLineChart.series[0].data = allData.testCurr;
            // 更新图表
            this.$refs.groupCurr.setOption(currLineChart);
        },
        // 设置单体折线图
        setMonLineChart() {
            // 根据monLineData的值设置monLineChart
            let dataList = monLineData.vol;
            monLineChart.series = dataList.map((item, index) => {
                let monNum = "#" + (index + 1);
                return {
                    name: monNum,
                    data: item
                };
            });
            // 更新图表
            this.$refs.monInfo.setOption(monLineChart);
        },
        // 设置柱状图
        setBarChart() {
            let batt = this.batt;
            // 根据monBarData的值设置monBarChart
            let dataList = monBarData.vol;
            let index = this.getDataIndex(dataList.length, this.slider);
            if (index != -1) {
                let data = dataList[index];
                let batNum = getBarNum(data);
                monBarChart.title.text = "最大值=" + batNum.max + "V;最小值=" + batNum.min + "V;平均值=" + batNum.avg.toFixed(3) + "V"
                this.monBarTitle = monBarChart.title.text;
                monBarChart.series[0].data = data;
                // monBarChart.series[1].data = dataList[0];
            }
            // 设置柱状图
            this.$refs.monBar.setOption(monBarChart);
        },
        // 查询测试信息
        searchBattTestData() {
            let batt = this.batt;
            // 开启等待框
            let loading = this.$layer.loading(1);
            searchBattTestData({
                num: batt.FBSDeviceId,
                BattGroupId: batt.BattGroupId
            })
                .then(res => {
                    // 关闭等待框
                    this.$layer.close(loading);
                    // 解析数据
                    let rs = JSON.parse(res.data.result);
                    let herongDischarge = []; // 核容放电
                    let herongCharge = []; // 核容充电
                    let jianceDischarge = []; // 监测放电
                    let jianceCharge = []; // 监测充电
                    if (rs.code == 1) {
                        rs.data.forEach(item => {
                            item.value = item.test_starttime;
                            item.label = item.test_starttime;
                            if (item.test_type == 3) {
                                // 测试类型为放电
                                if (item.test_starttype == 3) {
                                    //  核容放电
                                    herongDischarge.push(item);
                                } else {
                                    // 监测放电
                                    jianceDischarge.push(item);
                                }
                            } else if (item.test_type == 2) {
                                // 测试类型为充电
                                if (item.test_starttype == 3) {
                                    //  核容充电
                                    herongCharge.push(item);
                                } else {
                                    // 监测充电
                                    jianceCharge.push(item);
                                }
                            }
                        });
                    } else {
                        this.$layer.msg("未获取到充放电记录");
                    }
                    // 充放电记录
                    this.test_record.list[0].children = herongDischarge;
                    this.test_record.list[1].children = jianceDischarge;
                    this.test_record.list[2].children = herongCharge;
                    this.test_record.list[3].children = jianceCharge;
                })
                .catch(error => {
                    this.$layer.close(loading);
                    console.log(error);
                });
        },
        // 切换测试信息
        testRecordChange() {
            let testRecord = this.getTestRecord();
            // 初始化图表
            this.initChart();

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

            // 查询历史数据
            this.searchHistory(testRecord.BattGroupId, testRecord.test_record_count);
        },
        // 查询顶部信息
        searchBattTestDataStop(BattGroupId, count) {
            searchBattTestDataStop(BattGroupId, count).then(res => {
                let rs = JSON.parse(res.data.result);
                if (rs.code == 1) {
                    let data = rs.data[0];
                    this.top.test_cap = data.test_cap.toFixed(1) + "AH";
                    this.top.test_long = formatSeconds(data.test_timelong);
                }
            });
        },
        // 查询历史信息
        searchHistory(BattGroupId, count) {
            // 开启等待框
            let loading = this.$layer.loading(1);
            searchHistory({
                BattGroupId: BattGroupId,
                test_record_count: count
            }).then(res => {
                // 关闭等待框
                this.$layer.close(loading);
                let rs = JSON.parse(res.data.result);
                let data = [];
                // 数据
                if (rs.code == 1) {
                    data = rs.data;
                }
                // 格式化数据
                this.formateHisData(data);
            })
                .catch(error => {
                    // 关闭等待框
                    this.$layer.close(loading);
                    console.log(error);
                });
        },
        // 格式化历史信息数据
        formateHisData(data) {
            let record_time = -1; // 记录时间
            data.forEach(item => {
                let mon_num = item.mon_num;
                // 获取组端电压，在线电压,组端电流的信息和开辟一个单体柱状图
                if (record_time != item.record_time) {
                    record_time = item.record_time;
                    allData.groupVol.push([record_time, item.group_vol]);
                    allData.onlineVol.push([record_time, item.online_vol]);
                    allData.testCurr.push([record_time, item.test_curr]);
                    allData.recordTime.push(record_time);
                    allData.testTimeLong.push(item.test_timelong);
                    allData.testCap.push(item.test_cap);
                    allData.dataList.push(item);
                    this.testTimeLong.push(item.test_timelong);
                    // 开辟空间
                    monBarData.vol.push([]);
                }
                // 单体电压柱状图设置
                let monBarVol = monBarData.vol[monBarData.vol.length - 1];
                monBarVol.push(["#" + mon_num, item.mon_vol]);

                // 设置单体折线图信息
                if (typeof monLineData.vol[mon_num - 1] != "object") {
                    // 开辟空间
                    monLineData.vol[mon_num - 1] = [];
                }
                // 获取到需要使用的空间
                let monLineVol = monLineData.vol[mon_num - 1];
                monLineVol.push([record_time, item.mon_vol]);
            });
            // 设置折线图表
            this.setLineChart();
            // 执行滑动事件
            this.sliderInput();
        },
        // 获取测试的信息
        getTestRecord() {
            let value = this.test_record.value;
            // 没有选择充放电记录,返回-1
            if (value.length == 0) {
                return -1;
            }
            let type = value[0];
            let time = value[1];
            let list = this.test_record.list;
            let result = 0;
            // 遍历list
            for (let i in list) {
                let item = list[i];
                if (item.value == type) {
                    for (let j in item.children) {
                        let child = item.children[j];
                        if (child.value == time) {
                            result = child;
                            break;
                        }
                    }
                    break;
                }
            }
            // 设置电池状态
            this.battState.test_type = result.test_type;
            this.battState.stop_reason = result.test_stoptype_reason;
            // 返回结果集
            return result;
        },
        // 格式化滑块显示的内容
        formatTooltip(value) {
            let testTimeLong = this.testTimeLong;
            let index = this.getDataIndex(testTimeLong.length, value);
            let test_long = formatSeconds(0);
            if (index != -1) {
                test_long = formatSeconds(testTimeLong[index]);
            }
            this.top.test_long = test_long;
            return test_long;
        },
        // 拖动滑块时触发
        sliderInput() {
            // 设置头部信息
            this.setTopData();

            // 设置柱状图
            this.setBarChart();
        },
        // 设置顶部文本框的数据
        setTopData() {
            let batt = this.batt;
            // 组端电压和在线电压
            let groupVol = allData.groupVol;
            let onlineVol = allData.onlineVol;
            let testCurr = allData.testCurr;
            let testCap = allData.testCap;
            let monVols = monBarData.vol;
            let dataList = allData.dataList;
            let index = this.getDataIndex(groupVol.length, this.slider);
            if (index != -1) {
                this.top.group =
                    "在线:" +
                    onlineVol[index][1].toFixed(2) +
                    "V；组端:" +
                    groupVol[index][1].toFixed(2) +
                    "V";
                this.top.curr = testCurr[index][1].toFixed(1) + "A";
                this.top.test_cap = testCap[index].toFixed(1) + "AH";
                // 剩余容量
                let monVol = monVols[index];
                let list = dataList[index];
                let avg_curr = list.test_timelong > 0 ? list.test_cap * 3600 / list.test_timelong : list.test_curr;
                let batNum = getBarNum(monVol);
                let over_cap = GetMonomerCap(batt.MonCapStd, GetHourRate(batt.MonCapStd, avg_curr),
                    list.test_cap, batNum.max, batNum.min, batt.MonVolStd, 0);
                this.top.re_cap = over_cap.toFixed(1) + 'AH';
            }
        },
        // 根据百分比获取显示的数据的笔数
        getDataIndex(num, percent) {
            return Math.floor(num * percent / 100) - 1;
        },
        // 向父级发送同步页面的指令
        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: 'realTime',
                        src: '#/real-time' + search,
                        closable: true,
                    }
                },
            }, "*");
        }
    },
    formateBattState() {
      let battState = this.battState;
      if(battState.test_type == 3) {
        return "放电(终止原因："+battState.stop_reason+")";
      }else if(battState.test_type == 2) {
        return "充电"
      }else {
        return "";
      }
    computed: {
        battFullName() {
            let batt = this.batt;
            if (batt.StationName && batt.BattGroupName) {
                return batt.StationName + "-" + batt.BattGroupName;
            }
            return "电池组全称";
        },
        formateBattState() {
            let battState = this.battState;
            if (battState.test_type == 3) {
                return "放电(终止原因：" + battState.stop_reason + ")";
            } else if (battState.test_type == 2) {
                return "充电"
            } else {
                return "";
            }
        }
    },
    mounted() {
        // 初始化图表
        this.initChart();
        // 屏幕缩放时触发
        window.addEventListener("resize", () => {
            this.resize();
        });
    }
  },
  mounted() {
    // 初始化图表
    this.initChart();
    // 屏幕缩放时触发
    window.addEventListener("resize", () => {
      this.resize();
    });
  }
};
</script>

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

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

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

.page-content {
  position: relative;
  padding-top: 8px;
  padding-bottom: 2px;
  box-sizing: border-box;
  height: 100%;
    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;
    position: absolute;
    top: 8px;
    left: 24px;
    z-index: 99;
}

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

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

.slider-container {
  padding-left: 16px;
  padding-right: 16px;
  overflow: hidden;
    padding-left: 16px;
    padding-right: 16px;
    overflow: hidden;
}

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

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

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

.box-tools .iconfont:active {
  color: #FF0000;
    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;
}
</style>


 src/pages/index.vue

@@ -11,19 +11,19 @@
                    <div class="map-icon-list">
                        <div class="map-icon-item">
                            <div class="item-wrapper icon-wrapper"><img src="../assets/images/home-discharge.png" /></div>
                            <div class="item-wrapper text-wrapper">核容/停电放电</div>
                            <div class="item-wrapper text-wrapper">电池组落后机房</div>
                        </div>
                        <div class="map-icon-item">
                            <div class="item-wrapper icon-wrapper"><img src="../assets/images/home-warn.png" /></div>
                            <div class="item-wrapper text-wrapper">设备告警</div>
                            <div class="item-wrapper text-wrapper">电池组告警机房</div>
                        </div>
                        <div class="map-icon-item">
                            <div class="item-wrapper icon-wrapper"><img src="../assets/images/home-charge.png" /></div>
                            <div class="item-wrapper text-wrapper">设备充电</div>
                            <div class="item-wrapper text-wrapper">电池组放电延时机房</div>
                        </div>
                        <div class="map-icon-item">
                            <div class="item-wrapper icon-wrapper"><img src="../assets/images/home-normal.png" /></div>
                            <div class="item-wrapper text-wrapper">在线浮充</div>
                            <div class="item-wrapper text-wrapper">正常机房</div>
                        </div>
                    </div>
                </div>
@@ -59,10 +59,6 @@
import AddPanel from "@/components/indexPanel/AddPanel";
import HomeList from "./HomeList"
import {
    searchPowerOff,
    searchBattGood,
    searchBattState,
    searchAlarm,
    searchCoordinateMove,
    searchMap,
    searchRoomLocation,
@@ -70,6 +66,7 @@
    addMapHomeList,
    setMapCenterPoint,
    delMapHome,
    searchMapHomeState,
} from '../assets/js/api'
import {
    Timeout
@@ -107,6 +104,22 @@
import HomeDischargeImage from '@/assets/images/home-discharge.png';
let homeDischargeImage = new Image();
homeDischargeImage.src = HomeDischargeImage;
const behindOverlay = {
    animate: "",
    img: ""
};
const warnOverlay = {
    animate: "",
    img: ""
};
const timeoutOverlay = {
    animate: "",
    img: ""
};
const normalOverlay = {
    animate: "",
    img: ""
};

export default {
    components: {
@@ -195,12 +208,81 @@
                            }
                        }
                    });
                    //this.createMapDot(mapDotList);
                    this.createNormalHome(mapDotList);
                    // 设置正常机房
                    this.createMapHome("", mapDotList);
                    // 设置落后机房
                    this.createMapHome("timeout", []);
                    // 设置告警机房
                    this.createMapHome("warn", []);
                    // 设置延时机房
                    this.createMapHome("behind", []);
                    addHomeData = mapDotList;
                    this.startSearchMapHomeState();
                }
            }).catch(error => {
                console.log(error);
            });
        },
        startSearchMapHomeState() {
            this.timer.start(()=>{
                this.$axios.all([
                    this.searchMapHomeState(),
                ]).then(()=>{
                    this.timer.open();
                }).catch(()=>{
                    this.timer.open();
                });
            }, 4000);
        },
        searchMapHomeState() {
            searchMapHomeState().then(res=>{
                let rs = JSON.parse(res.data.result);
                let behind = [];
                let warn = [];
                let timeout = [];
                let normal = [];
                if(rs.code === 1) {
                    let data = rs.data;
                    data.forEach(item=>{
                        let infos = this.getHomeInfoByName(item.StationName);
                        if(infos.length !== 0) {
                            let info = infos[0];
                            switch(item.num) {
                                case 1:     // 落后
                                    behind.push(info);
                                    break;
                                case 2:     // 告警
                                    warn.push(info)
                                    break;
                                case 3:
                                    timeout.push(info);
                                    break;
                                default:
                                    normal.push(info);
                                    break;
                            }
                        }
                    });
                }
                // 更新正常地图图标
                behindOverlay.animate.setData(behind);
                behindOverlay.img.setData(behind);
                // 更新正常地图图标
                warnOverlay.animate.setData(warn);
                warnOverlay.img.setData(warn);
                // 更新正常地图图标
                timeoutOverlay.animate.setData(timeout);
                timeoutOverlay.img.setData(timeout);
                // 更新正常地图图标
                normalOverlay.animate.setData(normal);
                normalOverlay.img.setData(normal);
            }).catch(error=>{
                console.log(error);
            })
        },
        getHomeInfoByName(name) {
            return addHomeData.filter(item=>{
                return item.name === name;
            });
        },
        mergeMapInfos(list) {
@@ -228,16 +310,39 @@
            }
            return rs;
        },
        createNormalHome(data) {   // 添加正常的图标
        createMapHome(type, data) {
            let overlay = normalOverlay;
            let color = "";
            let img = homeNormalImage;
            switch(type) {
                case 'behind':
                    overlay = behindOverlay;
                    color = "#FD696A";
                    img = homeDischargeImage;
                    break;
                case 'warn':
                    overlay = warnOverlay;
                    color = "#C5A26E";
                    img = homeWarnImage;
                    break;
                case 'timeout':
                    overlay = timeoutOverlay;
                    color = "#3274CA";
                    img = homeChargeImage;
                    break;
            }
            // 设置动画
            let animationOverlay = new inMap.PointAnimationOverlay({
                style: {
                    fps: 25, //动画帧数
                    color: "#ff6a6a",
                    size: 20,
                    color: color,
                    size: color?20:0,
                    speed: 0.5
                },
                data: data
            });
            // 设置动画层
            overlay.animate = animationOverlay;
            inmap.add(animationOverlay);

            let imgOverlay = new inMap.ImgOverlay({
@@ -247,7 +352,7 @@
                },
                style: {
                    normal: {
                        icon: homeDischargeImage,
                        icon: img,
                        width: 26,
                        height: 26,
                        offsets: {
@@ -265,6 +370,8 @@
                    this.searchHomeNum(homeInfo.data.StationId, homeInfo.data.FBSDeviceId, homeInfo.data);
                }
            });
            // 添加图片层
            overlay.img = imgOverlay;
            inmap.add(imgOverlay);
        },
        createMapDot(list) {