修改内容

whychdw

2020-09-02 870e041e6086a992beb6d2368325dcc2033f73ff

修改内容

 src/assets/css/common.css

@@ -19,4 +19,29 @@
}
.table-cell.text-right {
    text-align: right;
}

/* 电路图 */
.diagram-content {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.diagram-stc {
    width: 100%;
    height: 100%;
}
.diagram-flush {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
}
.diagram-stc canvas,
.diagram-flush canvas {
    width: 100%;
    height: 100%;
}

 src/assets/css/theme/science-blue.css

@@ -110,4 +110,14 @@
}
.el-science-blue .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: #5990c4;
}

/* el-popover */
.el-popover {
    padding: 0;
    background: none;
    border: none;
}
.el-popper[x-placement^=bottom] .popper__arrow::after {
    border-bottom-color: rgb(30, 125, 219);
}

 src/assets/js/diagram/circuitDiagram.js

New file
@@ -0,0 +1,218 @@
import Diagram from './index'
function circuitDiagram(stc, flush) {
    let diagram = new Diagram();
    diagram.setCanvas(stc, flush);
    let start = [280, 40]

    // 虚线1
    let dashPoints1 = diagram.dashLine({
        strokeStyle: '#FFFFFF',
        points: [
            start,
            [1000, start[1]],
        ]
    });
    // 虚线2
    let dashPoints2 = diagram.dashLine({
        strokeStyle: '#FFFFFF',
        points: [
            dashPoints1[1],
            [dashPoints1[1][0], diagram.height-start[1]],
        ]
    });
    // 虚线3
    let dashPoints3 = diagram.dashLine({
        strokeStyle: '#FFFFFF',
        points: [
            dashPoints2[1],
            [start[0], dashPoints2[1][1]],
        ]
    });

    // 虚线4
    let dashPoints4 = diagram.dashLine({
        strokeStyle: '#FFFFFF',
        points: [
            dashPoints3[1],
            start,
        ],
        flush: true
    });
    // 充放电单元配置项
    let options = {
        top: start,
        bottom: dashPoints3[0],
        start: [start[0]+15, diagram.height/3]
    };

    // 绘制充放电单元
    let chargeAndDischarge = drawChargeAndDischarge(diagram, options);
    
    // 绘制蓄电池组单元
    let battGroup = drawBattGroup(diagram, chargeAndDischarge);
}

// 充放电单元
function drawChargeAndDischarge(diagram, options) {
    let start = options.start;
    // 对角边界
    let top = options.top;
    let bottom = options.bottom;
    // 基础配置
    let springGreen = "#00FF7F";
    let red = '#FF0000';
    let lineWidth = 3;

    // 线条1
    let line1 = diagram.line({
        strokeStyle: springGreen,
        lineWidth: lineWidth,
        points: [
            start,
            [start[0]+40, start[1]]
        ]
    });

    // 充放电单元
    let chargeAndDischarge = diagram.chargeAndDischarge({
        point: line1[1]
    });

    // 线条2
    let line2 = diagram.line({
        strokeStyle: red,
        lineWidth: lineWidth,
        points: [
            chargeAndDischarge[0],
            [chargeAndDischarge[0][0], top[1]+30]
        ]
    });

    // 线的高度
    let lineHt = line2[0][1] - line2[1][1];

    // 线条3
    let line3 = diagram.line({
        strokeStyle: red,
        lineWidth: lineWidth,
        points: [
            line2[1],
            [chargeAndDischarge[1][0], line2[1][1]]
        ]
    });

    // 线条4
    let line4 = diagram.line({
        strokeStyle: red,
        lineWidth: lineWidth,
        points: [
            line3[1],
            [chargeAndDischarge[1][0], chargeAndDischarge[1][1]]
        ]
    });

    // 线条5
    let line5 = diagram.line({
        strokeStyle: red,
        lineWidth: lineWidth,
        points: [
            chargeAndDischarge[2],
            [chargeAndDischarge[2][0], chargeAndDischarge[2][1]+lineHt]
        ]
    });

    // 线条6
    let line6 = diagram.line({
        strokeStyle: red,
        lineWidth: lineWidth,
        points: [
            line5[1],
            [chargeAndDischarge[3][0], line5[1][1]]
        ]
    });

    // 线条7
    let line7 = diagram.line({
        strokeStyle: red,
        lineWidth: lineWidth,
        points: [
            line6[1],
            [chargeAndDischarge[3][0], chargeAndDischarge[3][1]]
        ]
    });

    // 线条8
    let line8 = diagram.line({
        strokeStyle: red,
        lineWidth: lineWidth,
        points: [
            line6[0],
            [line6[0][0]+160, line6[0][1]]
        ]
    });

    // 线条9
    let line9 = diagram.line({
        strokeStyle: springGreen,
        lineWidth: lineWidth,
        points: [
            [line8[1][0], bottom[1]-80],
            [line1[0][0], bottom[1]-80]
        ]
    });

    // 线条10
    let line10 = diagram.line({
        strokeStyle: springGreen,
        lineWidth: lineWidth,
        points: [
            line9[1],
            line1[0]
        ]
    });

    let onOff1 = diagram.onOff({
        point: line8[1],
        direction: 'right',
        state: false,
    });

    let onOff2 = diagram.onOff({
        point: line9[0],
        direction: 'right',
        state: false,
    });

    return {
        top: top,
        bottom: bottom,
        springGreen: springGreen,
        red: red,
        line3: line3,
        onOff1: onOff1,
        onOff2: onOff2,
    }
}

// 蓄电池组单元
function drawBattGroup(diagram, options) {
    let start = options.line3[1];
    // 对角边界
    let top = options.top;
    let bottom = options.bottom;
    // 基础配置
    let springGreen = options.springGreen;
    let red = options.red;
    let lineWidth = 3;

    // 线条1
    let line1 = diagram.line({
        strokeStyle: red,
        lineWidth: lineWidth,
        points: [
            start,
            [bottom[0], start[1]]
        ]
    });
}
export default circuitDiagram;

 src/assets/js/diagram/index.js

New file
@@ -0,0 +1,384 @@
function Diagram() {
    this.stc = "";       // 静态层canvas
    this.flush = "";        // 刷新层canvas
    this.s_ctx = "";        // 静态层上下文
    this.f_ctx = "";        // 刷新层上下文
    this.width = 1500;      // 默认宽度
    this.height = 750;      // 默认高度
    this.options = [];      // 所有配置对象
    this.flushOptions = []; // 需要刷新的对象
    this.handleObj = [];    // 可以触发事件的对象
    this.opts = {           // 默认配置
        lineWidth: 1,       // 线宽
        onOffBase: {        // 开关的基础配置
            radius: 4,
            width: 28,
            lineWidth: 2,
        },
    };
}

// 设置canvas
Diagram.prototype.setCanvas = function(stc, flush) {
    // 设置静态canvas
    this.stc = document.createElement('canvas');
    stc.appendChild(this.stc);
    this.stc.width = this.width;
    this.stc.height = this.height;
    this.s_ctx = this.stc.getContext('2d');

    // 设置动态canvas
    this.flush = document.createElement('canvas');
    flush.appendChild(this.flush);
    this.flush.width = this.width;
    this.flush.height = this.height;
    this.f_ctx = this.flush.getContext('2d');
};


// 更新整个图表
Diagram.prototype._update = function() {
    // 清空图表
    this.f_ctx.clearRect(0, 0, this.width, this.height);
    let options = this.flushOptions;
    options.forEach(option=> {
        this.update(option);
    });
};
// 根据配置项更新图表
Diagram.prototype.update = function(option) {
    if(option && option.method && typeof this[option.method] == 'function') {
        this[option.method](option);
    }
}

/**
 * 检测对象是否在数组中
 *
 * @param   {[object]}  option  需要检测的对象
 * 
 * @param   {[Array]}  options 对象数组
 *
 * @return  {[Boolean]}       返回对象是否在对象数组中
 */
Diagram.prototype.checkObjInArr = function(option, options) {
    // 如果未设置id
    if(!option.id) {
        return true;
    }

    // 根据id判断
    let isIn = false;
    for(let i=0; i<options.length; i++) {
        let _option = options[i];
        if(option.id == _option.id) {
            isIn  = true;
            break;
        }
    }
    // 返回结果
    return isIn;
}

// 添加配置项
Diagram.prototype.addOptions = function(option) {
    // 检测配置项是否在配置项中
    let options = this.options;
    // 检测对象不在对象中
    if(!this.checkObjInArr(option, options)) {
        options.push(option);
        // 可刷新,添加到刷新配置项
        if(option.flush) {
            this.flushOptions.push(option);
        }
    }
};

// 绘制线
Diagram.prototype.line = function(option) {
    let ctx = option.flush?this.f_ctx:this.s_ctx;       // 获取上下文
    let points = option.points;
    let opts = this.opts;
    ctx.beginPath();
    ctx.lineWidth = option.lineWidth?option.lineWidth:opts.lineWidth;
    ctx.strokeStyle = option.strokeStyle?option.strokeStyle:"#FF0000";
    points.forEach((point, index)=> {
        if(index != 0) {
            ctx.lineTo(point[0], point[1]);
        }else {
            ctx.moveTo(point[0], point[1]);
        }
    });
    ctx.stroke();
    return points;
};

// 绘制点线
Diagram.prototype.dashLine = function(option) {
    let ctx = option.flush?this.f_ctx:this.s_ctx;       // 获取上下文
    let opts = this.opts;
    let points = option.points;
    ctx.beginPath();
    // 设置间距（参数为无限数组，虚线的样式会随数组循环）
    ctx.setLineDash([2, 4]);
    ctx.lineWidth = option.lineWidth?option.lineWidth:opts.lineWidth;
    ctx.strokeStyle = option.strokeStyle?option.strokeStyle:"#FF0000";
    points.forEach((point, index)=> {
        if(index != 0) {
            ctx.lineTo(point[0], point[1]);
        }else {
            ctx.moveTo(point[0], point[1]);
        }
    });
    ctx.stroke();
    // 切回实线
    ctx.setLineDash([]);
    return points;
};

// 绘制字体
Diagram.prototype.text = function(option) {
    let ctx = option.flush?this.f_ctx:this.s_ctx;       // 获取上下文
    let point = option.point;
    ctx.beginPath();
    ctx.fillStyle = option.fillStyle?option.fillStyle: '#FFFFFF';
    let fontSize = option.fontSize?option.fontSize:12;
    ctx.lineWidth = option.lineWidth?option.lineWidth:1;
    ctx.font = fontSize+'px Arial';
    ctx.textAlign = option.align?option.align:'start';
    ctx.textBaseline = option.baseline?option.baseline: 'top';
    ctx.fillText(option.value, point[0], point[1]);
};

// 绘制充放电单元
Diagram.prototype.chargeAndDischarge = function(option) {
    let ctx = option.flush?this.f_ctx:this.s_ctx;       // 获取上下文
    let defaultOption = {
        width: 160,
    };
    let point = option.point;
    let strokeStyle = '#FFFFFF';
    let lineWidth = option.lineWidth?option.lineWidth:2;
    // 线条1
    let line1 = this.line({
        strokeStyle: strokeStyle,
        lineWidth: lineWidth,
        points: [
            point,
            [point[0], point[1]-defaultOption.width/2]
        ],
    });

    // 线条2
    let line2 = this.line({
        strokeStyle: strokeStyle,
        lineWidth: lineWidth,
        points: [
            line1[1],
            [line1[1][0]+defaultOption.width, line1[1][1]]
        ],
    });

    // 线条3
    let line3 = this.line({
        strokeStyle: strokeStyle,
        lineWidth: lineWidth,
        points: [
            line2[1],
            [line2[1][0]+defaultOption.width, line2[1][1]]
        ],
    });

    // 线条4
    let line4 = this.line({
        strokeStyle: strokeStyle,
        lineWidth: lineWidth,
        points: [
            line3[1],
            [line3[1][0], line3[1][1]+defaultOption.width]
        ],
    });

    // 线条5
    let line5 = this.line({
        strokeStyle: strokeStyle,
        lineWidth: lineWidth,
        points: [
            line4[1],
            [line1[1][0], line1[1][1]+defaultOption.width]
        ],
    });

    // 线条6
    let line6 = this.line({
        strokeStyle: strokeStyle,
        lineWidth: lineWidth,
        points: [
            line5[1],
            [line1[0][0], line1[0][1]]
        ],
    });

    // 线条7
    let line7 = this.line({
        strokeStyle: strokeStyle,
        lineWidth: lineWidth,
        points: [
            [line1[1][0]+defaultOption.width, line1[1][1]],
            [line1[1][0]+defaultOption.width, line1[1][1]+defaultOption.width]
        ],
    });

    return [
        [line1[1][0]+defaultOption.width/2, line1[1][1]],
        [line1[1][0]+defaultOption.width*3/2, line1[1][1]],
        [line1[1][0]+defaultOption.width*3/2, line1[1][1]+defaultOption.width],
        [line1[1][0]+defaultOption.width/2, line1[1][1]+defaultOption.width],
    ]
};

// 绘制圆
Diagram.prototype.arc = function(option) {
    let ctx = option.flush?this.f_ctx:this.s_ctx;       // 获取上下文
    let point = option.point;   //圆心坐标
    // 不隐藏绘制圆圈
    if(!option.hide) {
        ctx.beginPath();
        ctx.lineWidth = option.lineWidth?option.lineWidth:1;
        ctx.strokeStyle = option.strokeStyle;
        ctx.fillStyle = option.fillStyle;
        ctx.arc(point[0], point[1], option.radius, 0, 2*Math.PI);
        
        switch(option.type) {
            case 'stroke':
                ctx.stroke();
                break;
            case 'fill':
                ctx.fill();
                break;
            default:
                ctx.stroke();
                ctx.fill();
                break;
        }
    }
    
    let info = {
        center: [point[0], point[1]],
        left: [point[0]-option.radius, point[1]],
        right: [point[0]+option.radius, point[1]],
        top: [point[0], point[1]-option.radius],
        bottom: [point[0], point[1]+option.radius],
        tl: [point[0]-option.radius/2, point[1]-option.radius/2],
        tr: [point[0]+option.radius/2, point[1]-option.radius/2],
        bl: [point[0]-option.radius/2, point[1]+option.radius/2],
        br: [point[0]+option.radius/2, point[1]+option.radius/2],
        strokeStyle: option.strokeStyle,
        fillStyle: option.fillStyle,
        radius: option.radius
    };

    return info;
};

// 绘制开关
Diagram.prototype.onOff = function(option) {
    let result;
    switch(option.direction) {
        case 'top':
        case 'bottom':
            result = this.onOff_h(option);
        break;
        default:
            result = this.onOff_v(option);
        break;
    }

    return result;
};

// 水平方向
Diagram.prototype.onOff_v = function(option) {
    let point = option.point;
    let state = option.state?true:false;
    let onOffBase = this.opts.onOffBase;

    // 开关的第一个圆
    let arc1 = this.arc({
        point: [point[0]+onOffBase.radius/2, point[1]],
        flush: option.flush,
        fillStyle: '#ccc',
        strokeStyle: '#ccc',
        radius: onOffBase.radius
    });

    // 开关的第二个圆
    let arc2 = this.arc({
        point: [arc1.right[0]+onOffBase.width*4/3, arc1.right[1]],
        flush: option.flush,
        fillStyle: arc1.fillStyle,
        strokeStyle: arc1.fillStyle,
        radius: arc1.radius
    });
    let line1;
    switch(option.direction) {
        case 'right':
            // 绘制线条
            line1 = this.line({
                points: [
                    arc2.left,
                    [
                        state?arc1.top[0]:arc1.center[0],
                        state?arc1.top[1]:arc1.center[1]-(arc1.radius+onOffBase.width*3/4)
                    ],
                ],
                flush: option.flush,
                strokeStyle: state?'#FF0000':'#7AD038',
                lineWidth: onOffBase.lineWidth
            });
        break;
        default:
            // 绘制线条
            line1 = this.line({
                points: [
                    arc1.right,
                    [
                        state?arc2.top[0]:arc2.center[0],
                        state?arc2.top[1]:arc2.center[1]-(arc2.radius+onOffBase.width*3/4)
                    ],
                ],
                flush: option.flush,
                strokeStyle: state?'#FF0000':'#7AD038',
                lineWidth: onOffBase.lineWidth
            });
        break;
    }
    return {
        arc1: arc1,
        arc2: arc2,
        line1: line1
    }
};
// 竖直方向
Diagram.prototype.onOff_h = function(option) {
    console.log(option);
};

// BAT
Diagram.prototype.bat = function(option) {
    let ctx = option.flush?this.f_ctx:this.s_ctx;
    let point = option.point;
    let bat = {
        width: 16,
    };
    ctx.fillStyle = option.fillStyle?option.fillStyle:"#FF0000";
    ctx.strokeStyle = option.strokeStyle;
    ctx.lineWidth = option.lineWidth;
	
    ctx.fillRect(point[0]-bat.width/2, point[1]-bat.width/2, bat.width, bat.width);
	
    ctx.strokeRect(point[0]-bat.width/2, point[1]-bat.width/2, bat.width, bat.width);
};


export default Diagram;

 src/components/ScienceBox.vue

New file
@@ -0,0 +1,105 @@
<template>
    <div class="science-box" ref="scienceBox" :style="getStyle">
        <div class="box-content">
            <div class="box-header" v-if="!noHeader">
                {{title}}
            </div>
            <div class="box-body">
                <slot></slot>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        title: {
            type: String,
            default: ''
        },
        top: {
            type: Number,
            default: 0,
        },
        left:  {
            type: Number,
            default: 0,
        },
        cssWidth: {
            type: [Number, String],
            default () {
                return 'auto';
            }
        },
        cssHeight: {
            type: [Number, String],
            default: 'auto'
        },
        bMax: {
            type: Number,
            default: 20000,
        },
        noHeader: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            height: 0,
        }
    },
    computed: {
        getStyle() {
            let bottom = this.top+this.height;
            let realTop = bottom>(this.bMax-8)?this.bMax-8-this.height
                        :this.top;
            return {
                top: realTop+'px',
                left: this.left+'px',
                width: typeof this.cssWidth == 'number' ? this.cssWidth + 'px' : this.cssWidth,
                height: typeof this.cssHeight == 'number' ? this.cssHeight + 'px' : this.cssHeight
            }
        }
    },
    mounted() {
        this.height = this.$refs.scienceBox.offsetHeight;
    },
}
</script>

<style scoped>
.science-box {
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    border: 2px solid #34ccee;
    border-image: linear-gradient(#12566d, #197796, #6decff, #197796, #12566d) 9;
    color: #FFFFFF;
    z-index: 999;
}
.box-content {
    height: 100%;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 12px;
    padding-right: 12px;
    background-image: linear-gradient(#164586, #143a6e, #0f2e5a, #07172e);
    box-sizing: border-box;
}
.box-header {
    font-size: 16px;
    text-align: center;
    font-weight: bold;
    padding-top: 6px;
    padding-bottom: 6px;
}
.box-body {
    min-width: 100px;
    min-height: 100px;
}
</style>



 src/pages/dataTest/CircuitDiagram.vue

New file
@@ -0,0 +1,18 @@
<template>
    <div class="diagram-content">
        <div class="diagram-stc" ref="static"></div>
        <div class="diagram-flush" ref="flush"></div>
    </div>
</template>

<script>
import circuitDiagram from '../../assets/js/diagram/circuitDiagram'

export default {
    mounted() {
        circuitDiagram(this.$refs.static, this.$refs.flush);
    }
}
</script>



 src/pages/dataTest/HomeList.vue

@@ -193,9 +193,7 @@
    },
    computed: {
        expandedKeys() {
            console.log(this.defaultExpandedKeys);
            let parentKey = this.defaultExpandedKeys.join("-");
            console.log(parentKey);
            if(parentKey.length>0 && parentKey != '---') {
                return [parentKey];
            }else {

 src/pages/dataTest/history.vue

@@ -115,7 +115,8 @@
  onlineVol: [],
  testCurr: [],
  testTimeLong: [],
  recordTime: []
  recordTime: [],
  testCap: []
};
// 单体折线信息
let monLineData = {
@@ -237,7 +238,8 @@
        onlineVol: [],
        testCurr: [],
        testTimeLong: [],
        recordTime: []
        recordTime: [],
        testCap: [],
      };
      // 单体折线信息
      monLineData = {
@@ -500,6 +502,7 @@
    // 格式化历史信息数据
    formateHisData(data) {
      let record_time = -1; // 记录时间
      console.log(data);
      data.forEach(item => {
        let mon_num = item.mon_num;
        // 获取组端电压，在线电压,组端电流的信息和开辟一个单体柱状图
@@ -510,6 +513,7 @@
          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);
          this.testTimeLong.push(item.test_timelong);
          // 开辟空间
          monBarData.vol.push([]);
@@ -588,6 +592,7 @@
      let groupVol = allData.groupVol;
      let onlineVol = allData.onlineVol;
      let testCurr = allData.testCurr;
      let testCap = allData.testCap;
      let index = this.getDataIndex(groupVol.length, this.slider);
      if (index != -1) {
        this.top.group =
@@ -597,6 +602,7 @@
          groupVol[index][1].toFixed(2) +
          "V";
        this.top.curr = testCurr[index][1].toFixed(1) + "A";
        this.top.test_cap = testCap[index].toFixed(1) + "AH";
      }
    },
    // 根据百分比获取显示的数据的笔数

 src/pages/dataTest/realTime.vue

@@ -51,10 +51,59 @@
          </div>
        </div>
        <div class="page-content">
          <div class="page-content-tools">
            <el-popover
            placement="bottom"
            trigger="hover">
              <div class="hdw-menu-list">
                <ul>
                  <li class="hdw-menu-item"><a href="javascript:void(0);">启动核容测试</a></li>
                  <li class="hdw-menu-item"><a href="javascript:void(0);">停止测试</a></li>
                  <li class="hdw-menu-item"><a href="javascript:void(0);">启动养护/除硫</a></li>
                  <li class="hdw-menu-item"><a href="javascript:void(0);">停止养护/除硫</a></li>
                  <li class="hdw-menu-item"><a href="javascript:void(0);">启动离线养护</a></li>
                  <li class="hdw-menu-item"><a href="javascript:void(0);">停止离线养护</a></li>
                  <li class="hdw-menu-item"><a href="javascript:void(0);">重启设备</a></li>
                </ul>
              </div>
              <button class="hdw-btn" slot="reference">
                <span>功能列表</span>
                <i class="hdw-icon el-icon-caret-bottom"></i>
              </button>
            </el-popover>
          </div>
          <el-tabs v-model="acTabs" type="border-card" class="flex-layout" @tab-click="tabClick">
            <!-- <el-tab-pane label="电路拓扑图" name="eleLine">
                            电路拓扑图
            </el-tab-pane>-->
            <el-tab-pane label="电路拓扑图" name="eleLine">
                <science-box :top="8" :left="8" no-header>
                  <div class="hdw-state-list table-layout">
                    <div class="table-row">
                      <div class="table-cell text-right">设备工作状态：</div>
                      <div class="table-cell">未知</div>
                    </div>
                    <div class="table-row">
                      <div class="table-cell text-right">核容终止原因：</div>
                      <div class="table-cell">无</div>
                    </div>
                    <div class="table-row">
                      <div class="table-cell text-right">通信计数：</div>
                      <div class="table-cell">0</div>
                    </div>
                    <div class="table-row">
                      <div class="table-cell text-right">通信丢包率：</div>
                      <div class="table-cell">0</div>
                    </div>
                    <div class="table-row">
                      <div class="table-cell text-right">SD卡状态：</div>
                      <div class="table-cell">正常</div>
                    </div>
                    <div class="table-row">
                      <div class="table-cell text-right">设备版本号：</div>
                      <div class="table-cell">D:8,V2.53.47</div>
                    </div>
                  </div>
                </science-box>
                <circuit-diagram></circuit-diagram>
            </el-tab-pane>
            <el-tab-pane label="电压" name="vol">
              <bar-chart ref="vol" id="vol" unit="V"></bar-chart>
            </el-tab-pane>
@@ -78,8 +127,7 @@
                  :prop="header.prop"
                  :label="header.label"
                  :width="header.width"
                  align="center"
                ></el-table-column>
                  align="center"></el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
@@ -93,6 +141,8 @@
import ContentBox from "../../components/ContentBox";
import HomeList from "./HomeList";
import BarChart from "../../components/chart/BarChart";
import CircuitDiagram from './CircuitDiagram'
import ScienceBox from '../../components/ScienceBox'

import { realTimeSearch, realTimeGroup, realTimeAlarm } from "../../assets/js/realTime";
import {
@@ -105,7 +155,9 @@
  components: {
    ContentBox,
    HomeList,
    BarChart
    BarChart,
    CircuitDiagram,
    ScienceBox
  },
  data() {
    return {
@@ -119,8 +171,7 @@
        batt_test_cap: 0 /* 测试容量 */,
        batt_state: 0 /* 电池状态 */
      },
      battFullName: "电池组全称",
      acTabs: "vol",
      acTabs: "eleLine",
      table: {
        headers: [
          {
@@ -393,6 +444,13 @@
    }
  },
  computed: {
    battFullName() {
      let batt = this.batt;
      if (batt.StationName && batt.BattGroupName) {
        return batt.StationName + "-" + batt.BattGroupName;
      }
      return "电池组全称";
    },
    backInputs() {
      const obj = {
          0: "未知",
@@ -456,6 +514,7 @@
  padding-top: 12px;
}
.page-content {
  position: relative;
  padding-top: 8px;
  padding-bottom: 2px;
  box-sizing: border-box;
@@ -474,6 +533,66 @@
.box-tools .iconfont:active {
  color: #FF0000;
}
.page-content-tools {
  position: absolute;
  top: 14px;
  right: 8px;
  z-index: 99;
}
.hdw-btn {
  display: inline-block;
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  transition: .1s;
  font-weight: 500;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 6px 10px;
  font-size: 14px;
  border-radius: 4px;
}
.hdw-btn:hover {
  background-color: #3c91e6;
}
.hdw-menu-list {
  border: 1px solid #409eff;
}
.hdw-menu-list .hdw-menu-item {
  border-top: 1px solid #0e5194;
}
.hdw-menu-list .hdw-menu-item:first-child {
  border-top: none;
}
.hdw-menu-item a{
  display: block;
  text-align: center;
  padding: 8px;
  color: #FFFFFF;
  cursor: pointer;
  background-color: rgba(30, 125, 219, 0.767);
}
.hdw-menu-item a:hover {
  background-color: rgb(60, 135, 211);
}
.hdw-menu-item a:active {
  background-color: rgb(34, 100, 167);
}
.hdw-state-list {
  box-sizing: border-box;
  font-size: 14px;
  padding-bottom: 8px;
}
</style>



 src/router/routes.js

@@ -31,6 +31,11 @@
        component: (resolve)=>require(['../pages/dataTest/history.vue'], resolve)
    },
    {
        path: '/test',
        meat: {},
        component: (resolve)=>require(['../pages/dataTest/CircuitDiagram.vue'], resolve)
    },
    {
        path: '*',
        name: '',
        meta: {