修改提交 更换f2显示柱状图

whychdw

2019-12-23 ae91eb9a1a1c9aebdabe12c3806b787bfaaefb6c

修改提交 更换f2显示柱状图

 Device_Manage/WebRoot/css/commons.css

@@ -42,6 +42,10 @@
    margin-top: 8px;

}



/* text-align */

.t-center {

    text-align: center;

}

/* table */

.tbl-content {

    overflow: auto;

@@ -211,4 +215,20 @@
}

#appStates .iconfont {

    font-size: 24px;

}



/* 测试记录列表 */

.test-record-list {

    padding: 8px 0;

}

.test-record-list a{

    display: block;

    font-size: 14px;

    padding: 0 8px;

    line-height: 32px;

    color: #000000;

}

.test-record-list a:active,

.test-record-list a:hover {

    color: #000000;

}

 Device_Manage/WebRoot/index.html

@@ -9,7 +9,7 @@
    <link rel="stylesheet" href="css/bui.css">

    <link rel="stylesheet" href="css/style.css">

    <link rel="stylesheet" href="css/iconfont/iconfont.css">

    <link rel="stylesheet" href="css/commons.css?a489883a6f">

    <link rel="stylesheet" href="css/commons.css">

    <link rel="stylesheet" href="css/iview/styles/iview.css">

</head>



@@ -31,7 +31,9 @@
    

    <script src="js/const_var.js"></script>

    

    <script src="js/common_functions.js?b2138700dc"></script>

    <script src="js/f2-all.min.js"></script>

    
    <script src="js/common_functions.js?35ce8edc68"></script>

    

    

    

@@ -40,7 +42,7 @@
    

    

    <script src="js/lazyload.js"></script>

    <script src="js/load_lazy.js?ebc632d1b8"></script>

    <script src="js/load_lazy.js?21c4b411df"></script>

</body>



</html>

 Device_Manage/WebRoot/js/common_functions.js

@@ -481,4 +481,183 @@
        }
    }
    return equal;
};

// F2封装
function FGraph(el, type) {
    this.id = el.getAttribute("id");
    this.minMax = {
        min: 0,
        max: 0
    };
    this.colors = {
        min: 'red',
        max: 'green',
        normal: 'blue'
    };
    this.chart = "";
    this.txtShapes = {
        show: true,
        list: []
    };
    if (this.id) {
        this._init(this.id, type);
    } else {
        this._init(null, type);
    }
};

// 初始化
FGraph.prototype._init = function (id, type) {
    var self = this;
    // 创建 Chart 对象
    this.chart = new F2.Chart({
        id: id,
        pixelRatio: window.devicePixelRatio, // 指定分辨率
        syncY: true,
        animate: false
    });

    // 设置x轴线
    this.chart.axis("x", {
        line: {
            lineWidth: 1,
            stroke: '#bbb',
            top: true // 展示在最上层
        }
    });
    // 设置y轴线
    this.chart.axis("y", {
        line: {
            lineWidth: 1,
            stroke: '#bbb',
            top: true // 展示在最上层
        },
        grid: {
            lineWidth: 1,
            stroke: '#bbb'
        }
    });

    // 设置提示框
    this.chart.tooltip({
        alwaysShow: false
    });

    // 载入数据源
    this.chart.source([]);

    // 设置最大值和最小值
    this.setMinMax([]);

    // 设置图表类型
    this._setType(type);

    // 不显示legend
    this.chart.legend(false);

    // 渲染图表
    this.chart.render();
};
// 设置图表类型
FGraph.prototype._setType = function (type) {
    var self = this;
    // 根据类型设置图表
    switch (type) {
        case 'line':
            this.chart.line().position('x*y');
            // 不显示文本
            this.txtShapes.show = false;
            break;
        default:
            // 设置颜色
            this.chart.interval().position('x*y').color('x*y', function (x, y) {
                var minMax = self.minMax;
                var colors = self.colors;
                var color = colors.normal;
                if (y == minMax.min) {
                    color = colors.min;
                } else if (y == minMax.max) {
                    color = colors.max;;
                }
                return color;
            });
            break;
    }
};
// 更新数据
FGraph.prototype.changeData = function (data) {
    // 设置最大值和最小值
    this.setMinMax(data);
    // 更改数据
    this.chart.changeData(data);
};

// 设置文本
FGraph.prototype._addTxtShape = function (data) {
    //  判断是否显示文本
    if (!this.txtShapes.show) {
        return;
    }
    var self = this;
    var chart = this.chart;
    // 移除文本
    this._txtShapesDestory();
    // 绘制柱状图文本
    var offset = -5;
    var canvas = chart.get('canvas');
    var group = canvas.addGroup();
    data.forEach(function (obj) {
        var point = chart.getPosition(obj);
        var text = group.addShape('text', {
            attrs: {
                x: point.x,
                y: point.y + offset,
                text: obj.y,
                textAlign: 'center',
                textBaseline: 'bottom',
                fill: '#808080'
            }
        });
        self.txtShapes.list.push(text);
    });
};
// 修改大小
FGraph.prototype.changeSize = function (width, height) {
    width = width ? width : null;
    height = height ? height : null;
    this.chart.changeSize(width, height);
};

// 根据data的值获取最大值和最小值
FGraph.prototype.setMinMax = function (data) {
    var rs = {
        min: 0,
        max: 0
    };
    // 设置data第一个值到rs中
    if (data.length != 0) {
        rs.min = data[0].y;
        rs.max = data[0].y;
    }
    // 遍历data的值
    for (var i = 1; i < data.length; i++) {
        var _data = data[i];
        // 设置最大值和最小值
        rs.min = rs.min > _data.y ? _data.y : rs.min;
        rs.max = rs.max < _data.y ? _data.y : rs.max;
    }
    this.minMax = rs;
};
// 销毁txtShapes
FGraph.prototype._txtShapesDestory = function () {
    var txtShapes = this.txtShapes.list;
    // 遍历txtShapes
    for (var i = 0; i < txtShapes.length; i++) {
        var txtShape = txtShapes[i];
        // 销毁
        txtShape.destroy();
    }
    // 重置数组
    this.txtShapes.list = [];
};

 Device_Manage/WebRoot/js/components.js

@@ -100,520 +100,4 @@
        }
    },
    computed: {}
});

Vue.component('bar-chart', {
    props: {
        width: {
            type: String,
            default: 'auto'
        },
        height: {
            type: String,
            default: '100px'
        },
        'showValue': {
            type: Boolean,
            default: true
        },
        range: {
            type: Object,
            default: function _default(range) {
                var result = {
                    min: 0,
                    minFlag: false,
                    max: 1,
                    maxFlag: false
                };
                return result;
            }
        },
        colors: {
            type: Object,
            default: function _default(option) {
                var defaults = {
                    normal: '#5cadff',
                    max: '#19be6b',
                    min: '#ed4014'
                };
                var colors = {};
                if (option) {
                    colors = $.extend({}, defaults, option);
                } else {
                    colors = defaults;
                }
                return colors;
            }
        }
    },
    template: '\n        <div class="bar-echart" style="background-color: #FFFFFF">\n            <div class="echart" :style="getStyle"></div>\n        </div>\n    ',
    data: function data() {
        return {
            graph: '',
            style: {
                width: this.width,
                height: this.height
            },
            option: {}
        };
    },

    methods: {
        setOption: function setOption(opt) {
            var self = this;
            var defaults = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '1%',
                    right: '1%',
                    bottom: '2%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: []
                },
                yAxis: {
                    type: 'value',
                    min: 0,
                    max: 1,
                    splitLine: {
                        show: true
                    }
                },
                series: []
            };
            this.option = $.extend(true, {}, defaults, opt);

            // 设置图谱显示范围
            this._setRange();

            // 设置文本
            this._setLabel();

            // 设置柱状图的颜色
            this._setColor();

            this.graph.resize();
            this.graph.setOption(this.option, true, true);
        },
        _setRange: function _setRange() {
            // 设置范围
            var option = this.option;
            var series = option.series;
            // option的最值进行处理
            if (series.length == 0 || series[0].data.length == 0) {
                option.yAxis.min = 0;
                option.yAxis.max = 1;
            } else {
                var data = series[0].data;
                var min = getMinFromArr(data);
                var max = getMaxFromArr(data);
                // 设置最小值
                if (this.range.minFlag == false || this.range.min == undefined) {
                    min = Math.floor(min * 0.9);
                } else {
                    min = this.range.min > min ? Math.floor(min * 0.9) : this.range.min;
                }

                // 设置最大值
                if (this.range.maxFlag == false || this.range.max == undefined) {
                    max = Number((max * 1.15).toFixed(1));
                } else {
                    max = this.range.max < max ? Number((max * 1.15).toFixed(1)) : this.range.max;
                }
                option.yAxis.min = min;
                option.yAxis.max = max;
            }
        },
        _setColor: function _setColor() {
            // 设置颜色
            var option = this.option;
            var colors = this.colors;
            var series = option.series[0];
            if (series) {
                var data = series.data;
                if (series.itemStyle == undefined) {
                    series.itemStyle = {};
                    series.itemStyle.normal = {};
                }
                var maxflag = true;
                var minflag = true;
                series.itemStyle.normal.color = function setColor(value) {
                    var min = getMinFromArr(data);
                    var max = getMaxFromArr(data);
                    if (value.value == max) {
                        return colors.max;
                    } else if (value.value == min) {
                        return colors.min;
                    } else {
                        return colors.normal;
                    }
                };
            }
        },
        _setLabel: function _setLabel() {
            var option = this.option;
            var series = option.series[0];
            if (series) {
                if (series.itemStyle == undefined) {
                    series.itemStyle = {};
                    series.itemStyle.normal = {};
                }
                series.itemStyle.normal.label = {
                    show: this.showValue,
                    position: 'top'
                };
            }
        },
        resize: function resize() {
            var option = this.graph.getOption();
            this.setOption(option);
        }
    },
    computed: {
        getStyle: function getStyle() {
            return {
                height: this.height
            };
        }
    },
    mounted: function mounted() {
        // console.log(this.$el);
        var $root = $(this.$el);
        var graphEl = $root.find('.echart').get(0);
        this.graph = echarts.init(graphEl, null, { renderer: 'svg' });
        this.graph.setOption({});
    }
});

// 柱状图
Vue.component('high-bar-chart', {
    props: {
        id: {
            type: String,
            required: true
        },
        name: {
            type: String,
            default: ''
        },
        unit: {
            type: String,
            default: ''
        },
        title: {
            type: String,
            default: ''
        },
        subtitle: {
            type: String,
            default: ''
        },
        height: {
            type: String,
            default: '200px'
        },
        colors: {
            type: Object,
            default: function _default() {
                return {};
            }
        },
        monHanderClick: {
            type: Function
        }
    },
    template: '\n        <div class="high-chart-container">\n            <div :id="id" class="high-chart" :style="getStyle"></div>\n        </div>\n    ',
    data: function data() {
        return {
            chart: ''
        };
    },

    watch: {
        height: function height(value) {
            this.chart.setSize(undefined, value);
        }
    },
    methods: {
        init: function init() {
            var self = this;
            var yText = this.name + this.getUnit();
            this.chart = Highcharts.chart(this.id, {
                chart: {
                    type: 'column'
                },
                credits: { // 版本信息
                    enabled: false
                },
                legend: { // 指示
                    enabled: false
                },
                title: {
                    text: this.title
                },
                subtitle: {
                    text: this.subtitle
                },
                xAxis: [{
                    categories: [],
                    crosshair: true
                }],
                yAxis: [{
                    title: {
                        text: yText
                    },
                    lineWidth: 1
                }],
                tooltip: {},
                plotOptions: {
                    column: {
                        borderWidth: 0
                    }
                },
                series: [{
                    name: this.name,
                    data: [],
                    events: {
                        click: self.monHanderClick
                    },
                    dataLabels: {
                        enabled: true
                    }
                }]
            });
        },
        setOption: function setOption(options) {
            var categories = options.categories;
            var data = options.data;
            this.setCategories(categories);
            this.setExtremes(null, null);
            this.setData(data);
        },
        setCategories: function setCategories(categories) {
            this.chart.xAxis[0].setCategories(categories, false); // 不更新
        },
        setExtremes: function setExtremes(min, max) {
            this.chart.yAxis[0].setExtremes(min, max, false); // 不更新
        },
        setData: function setData(data) {
            var result = [];
            var max = getMaxFromArr(data);
            var min = getMinFromArr(data);
            var colors = this.getColors();
            for (var i = 0; i < data.length; i++) {
                var _data = data[i];
                var tmp = {
                    y: _data
                };
                if (_data == min) {
                    tmp.color = colors.min;
                } else if (_data == max) {
                    tmp.color = colors.max;
                } else {
                    tmp.color = colors.normal;
                }
                result.push(tmp);
            }
            this.chart.series[0].setData(result);
        },
        getUnit: function getUnit() {
            // 格式化单位
            var unit = this.unit ? '（' + this.unit + '）' : '';
            return unit;
        },
        getColors: function getColors() {
            var defaults = {
                min: '#ed4014',
                max: '#19be6b',
                normal: '#2db7f5'
            };
            var colors = this.colors;
            var result = $.extend({}, defaults, colors);
            return result;
        }
    },
    computed: {
        getStyle: function getStyle() {
            return {
                height: this.height
            };
        }
    },
    mounted: function mounted() {
        var self = this;
        this.init();
    }
});

// 折线状图
Vue.component('high-line-chart', {
    props: {
        id: {
            type: String,
            required: true
        },
        name: {
            type: String,
            default: ''
        },
        unit: {
            type: String,
            default: ''
        },
        title: {
            type: String,
            default: ''
        },
        subtitle: {
            type: String,
            default: ''
        },
        height: {
            type: String,
            default: '200px'
        },
        colors: {
            type: Object,
            default: function _default() {
                return {};
            }
        },
        monHanderClick: {
            type: Function
        }
    },
    template: '\n        <div class="high-chart-container">\n            <div :id="id" class="high-chart" :style="getStyle"></div>\n        </div>\n    ',
    data: function data() {
        return {
            chart: ''
        };
    },

    watch: {
        height: function height(value) {
            this.chart.setSize(undefined, value);
        }
    },
    methods: {
        init: function init() {
            var self = this;
            var yText = this.name + this.getUnit();
            this.chart = Highcharts.chart(this.id, {
                chart: {
                    type: 'line'
                },
                credits: { // 版本信息
                    enabled: false
                },
                legend: { // 指示
                    enabled: false
                },
                title: {
                    text: this.title
                },
                subtitle: {
                    text: this.subtitle
                },
                xAxis: [{
                    categories: [],
                    crosshair: true,
                    labels: {
                        autoRotation: [-5]
                    }
                }],
                yAxis: [{
                    title: {
                        text: yText
                    },
                    lineWidth: 1
                }],
                tooltip: {},
                plotOptions: {
                    column: {
                        borderWidth: 0
                    }
                },
                series: [{
                    name: this.name,
                    data: [],
                    events: {
                        click: self.monHanderClick
                    },
                    dataLabels: {
                        enabled: false
                    },
                    marker: {
                        enabled: false
                    }
                }]
            });
        },
        setOption: function setOption(options) {
            var categories = options.categories;
            var data = options.data;
            this.setCategories(categories);
            this.setExtremes(null, null);
            this.setData(data);
        },
        setCategories: function setCategories(categories) {
            this.chart.xAxis[0].setCategories(categories, false); // 不更新
        },
        setExtremes: function setExtremes(min, max) {
            this.chart.yAxis[0].setExtremes(min, max, false); // 不更新
        },
        setData: function setData(data) {
            var result = [];
            var max = getMaxFromArr(data);
            var min = getMinFromArr(data);
            var colors = this.getColors();
            for (var i = 0; i < data.length; i++) {
                var _data = data[i];
                var tmp = {
                    y: _data
                };
                if (_data == min) {
                    tmp.color = colors.min;
                } else if (_data == max) {
                    tmp.color = colors.max;
                } else {
                    tmp.color = colors.normal;
                }
                result.push(tmp);
            }
            this.chart.series[0].setData(result);
        },
        getUnit: function getUnit() {
            // 格式化单位
            var unit = this.unit ? '（' + this.unit + '）' : '';
            return unit;
        },
        getColors: function getColors() {
            var defaults = {
                min: '#ed4014',
                max: '#19be6b',
                normal: '#2db7f5'
            };
            var colors = this.colors;
            var result = $.extend({}, defaults, colors);
            return result;
        }
    },
    computed: {
        getStyle: function getStyle() {
            return {
                height: this.height
            };
        }
    },
    mounted: function mounted() {
        var self = this;
        this.init();
    }
});

 Device_Manage/WebRoot/js/load_lazy.js

@@ -10,7 +10,7 @@
  lazyload.js([
  // 'js/zepto.js',
  // 'js/bui.js',
  'css/highchart/highcharts.js',
  // 'css/highchart/highcharts.js',
  // 'js/const_var.js',
  // 'js/common_functions.js',
  'js/vue.min.js', 'css/iview/iview.min.js', 'js/components.js', 'index.js'], loadComplete);

 Device_Manage/WebRoot/pages/battery/battery.js

@@ -81,15 +81,28 @@
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                    marginRight: '16px'
                                },
                                on: {
                                    click: function click() {
                                        // console.log(vm);
                                        vm.showBatteryInfo(params);
                                        vm.showBatteryInfo(params, 'control');
                                    }
                                }
                            }, '实时数据')]);
                            }, '实时数据')]
                            // h('i-button', {
                            //     props: {
                            //         type: 'primary',
                            //         size: 'small'
                            //     },
                            //     on: {
                            //         click: function(){
                            //             // console.log(vm);
                            //             vm.showBatteryInfo(params, "history");
                            //         }
                            //     }
                            // }, '运维数据'),
                            );
                        }
                    }],
                    data: []
@@ -209,16 +222,25 @@
                    result.battModel = data.BattModel;
                    return result;
                },
                showBatteryInfo: function showBatteryInfo(params) {
                showBatteryInfo: function showBatteryInfo(params, page) {
                    var row = params.row;
                    //console.log(row);
                    var param = {
                        homeName: "",
                        battGroupId: row.BattGroupId,
                        battGroupName: row.BattGroupName,
                        devId: row.FBSDeviceId
                    };
                    // 根据page的跳转页面
                    var url = "../battery/batteryInfo.html";
                    switch (page) {
                        case 'history':
                            url = "../history/history.html";
                            break;
                    }
                    // 加载路由
                    router.load({
                        url: '../battery/batteryInfo.html',
                        url: url,
                        param: param
                    });
                },

 Device_Manage/WebRoot/pages/battery/batteryInfo.html

@@ -64,20 +64,20 @@
                <div class="bui-tab-main" ref="tabMain">

                    <ul>

                        

                        <li>

                        <li id="listContainer">

                            <iview-table :height="getTabHt()" style="margin-top:8px;margin-left:0;margin-right:0" :columns="tbls.monList.columns" :data="tbls.monList.data"></iview-table>

                        </li>

                        <li style="display:none">

                            <iview-table style="margin-top:8px;margin-left:0;margin-right:0" :columns="tbls.totalInfo.columns" :data="tbls.totalInfo.data"></iview-table>

                        </li>

                        <li style="display:none">

                            <high-bar-chart :height="getTabHt('px')" id="monVolBar" name="电压" unit="V" ref="monVolBar" :mon-hander-click="monHandlerClick"></high-bar-chart>

                            <canvas id="monVolBar" ref="monVolBar" style="width:100%;height:99%"></canvas>

                        </li>

                        <li style="display:none">

                            <high-bar-chart :height="getTabHt('px')" id="monResBar" name="内阻" unit="mΩ" :colors="{min:'#19be6b', max: '#ed4014'}" ref="monResBar" :mon-hander-click="monHandlerClick"></high-bar-chart>

                            <canvas id="monResBar" ref="monResBar" style="width:100%;height:99%"></canvas>

                        </li>

                        <li style="display:none">

                            <high-bar-chart :height="getTabHt('px')" id="monTmpBar" name="温度" unit="℃" :colors="{min:'#19be6b', max: '#ed4014'}" ref="monTmpBar" :mon-hander-click="monHandlerClick"></high-bar-chart>

                            <canvas id="monTmpBar" ref="monTmpBar" style="width:100%;height:99%"></canvas>

                        </li>

                    </ul>

                </div>


 Device_Manage/WebRoot/pages/battery/batteryInfo.js

@@ -25,6 +25,10 @@
         * 规定params={battGroupId:'',battGroupName: '', devId: ''}

         */
        var params = router.getPageParams();
        // 定义F2chart
        var monVolBar = '';
        var monResBar = '';
        var monTmpBar = '';
        var vm = this.vm = new Vue({
            el: bs.$el[0],
            data: {
@@ -167,40 +171,16 @@
                    }
                },
                options: {
                    monVol: { // 单体电压
                        title: new Title(),
                        option: {
                            categories: [],
                            data: []
                        }
                    },
                    monRes: { // 单体内阻
                        title: new Title(),
                        option: {
                            categories: [],
                            data: []
                        }
                    },
                    monVol: [], // 单体电压
                    monRes: [], // 单体内阻
                    monResLine: {
                        option: {
                            categories: [],
                            data: []
                        }
                    },
                    monTmp: { // 单体内阻
                        title: new Title(),
                        option: {
                            categories: [],
                            data: []
                        }
                    },
                    monSer: { // 单体内阻
                        title: new Title(),
                        option: {
                            categories: [],
                            data: []
                        }
                    }
                    monTmp: [], // 单体温度
                    monSer: [] // 单体电导
                }
            },
            methods: {
@@ -518,21 +498,27 @@
                    for (var i = 0; i < data.length; i++) {
                        var _data = data[i];
                        monNum.push('#' + _data.mon_num);
                        monVol.push(_data.mon_vol);
                        monRes.push(_data.mon_res);
                        monTmp.push(_data.mon_tmp);
                        monVol.push({
                            x: '#' + _data.mon_num,
                            y: _data.mon_vol
                        });
                        monRes.push({
                            x: '#' + _data.mon_num,
                            y: _data.mon_res
                        });
                        monTmp.push({
                            x: '#' + _data.mon_num,
                            y: _data.mon_tmp
                        });
                    }
                    // 单体电压
                    this.options.monVol.option.categories = monNum;
                    this.options.monVol.option.data = monVol;
                    this.options.monVol = monVol;

                    // 单体内阻
                    this.options.monRes.option.categories = monNum;
                    this.options.monRes.option.data = monRes;
                    this.options.monRes = monRes;

                    // 单体温度
                    this.options.monTmp.option.categories = monNum;
                    this.options.monTmp.option.data = monTmp;
                    this.options.monTmp = monTmp;

                    this.updateGraph();
                },
@@ -543,17 +529,18 @@
                    // 更新单体电压
                    if (tabsState.monVol.state) {
                        // bui.alert(7788);
                        this.$refs['monVolBar'].setOption(this.options.monVol.option);
                        //this.$refs['monVolBar'].setOption(this.options.monVol.option);
                        monVolBar.changeData(this.options.monVol);
                    }

                    // 更新单体内阻
                    if (tabsState.monRes.state) {
                        this.$refs['monResBar'].setOption(this.options.monRes.option);
                        monResBar.changeData(this.options.monRes);
                    }

                    // 更新单体温度
                    if (tabsState.monTmp.state) {
                        this.$refs['monTmpBar'].setOption(this.options.monTmp.option);
                        monTmpBar.changeData(this.options.monTmp);
                    }

                    // 更新单体电导
@@ -621,6 +608,11 @@
                    }
                });

                // 创建 Chart 对象
                monVolBar = new FGraph(this.$refs.monVolBar);
                monResBar = new FGraph(this.$refs.monResBar);
                monTmpBar = new FGraph(this.$refs.monTmpBar);

                this.startSearch();
                setTimeout(function () {
                    // 设置模块的高度

 Device_Manage/WebRoot/pages/history/history.html

@@ -1,67 +1,71 @@


<div id="sidebarWrap" class="bui-sidebar-wrap">

    
    <div class="bui-sidebar swiperight">

        <bui-list :data="devInfos.list" @on-click="handlerListClick"></bui-list>

    </div>

    
    <div class="bui-page">

        <header class="bui-bar">

            <div class="bui-bar-left">

                
                <div class="bui-btn btn-back"><i class="icon-back"></i></div>

            </div>

            <div class="bui-bar-main">运维数据</div>

            <div class="bui-bar-right">

                
                <div class="bui-btn" id="menu" class="menu"><i class="icon-menu"></i></div>

            </div>

        </header>

        <main>

            <div class="bui-fluid bui-fluid-full">

                
                <div class="span3">

<div class="bui-page">

    <header class="bui-bar">

        <div class="bui-bar-left">

            
            <div class="bui-btn btn-back"><i class="icon-back"></i></div>

        </div>

        <div class="bui-bar-main" v-text="getTitle">运维数据</div>

        <div class="bui-bar-right">

            
            
        </div>

    </header>

    <main>

        <div class="bui-fluid bui-fluid-full">

            
            <div class="span3">

                <div style="height:100%;border-right:1px solid #e0ebfa">

                    

                    <dl id="accordion" class="bui-accordion">

                        <dt class="bui-btn bui-box">

                            <i class="icon-accordion"></i><span style="width:8px"></span>

                            <div class="span1">核容放电</div>

                            <badge :count="0" show-zero></badge>

                        </dt>

                        <dd>

                            <img src="images/placeholder-list.png" alt="占位图">

                        </dd>

                        <dt class="bui-btn bui-box">

                            <i class="icon-accordion"></i><span style="width:8px"></span>

                            <div class="span1">监测放电</div>

                            <badge :count="0" show-zero></badge>

                        </dt>

                        <dd>

                            <img src="images/placeholder-list.png" alt="占位图">

                        </dd>

                        <dt class="bui-btn bui-box">

                            <i class="icon-accordion"></i><span style="width:8px"></span>

                            <div class="span1">核容充电</div>

                            <badge :count="0" type="info" show-zero></badge>

                        </dt>

                        <dd>

                            <img src="images/placeholder-list.png" alt="占位图">

                        </dd>

                        <dt class="bui-btn bui-box">

                            <i class="icon-accordion"></i><span style="width:8px"></span>

                            <div class="span1">监测充电</div>

                            <badge :count="0" type="info" show-zero></badge>

                        </dt>

                        <dd>

                            <img src="images/placeholder-list.png" alt="占位图">

                        </dd>

                        <template v-for="(testRecord, key) in testRecordList" :key="key">

                            <dt class="bui-btn bui-box">

                                <i class="icon-accordion"></i><span style="width:8px"></span>

                                <div class="span1">{{ testRecord.type }}</div>

                                <badge :count="testRecord.data.length" :type="testRecord.color" show-zero></badge>

                            </dt>

                            <dd>

                                <div class="test-record-list">

                                    <ul>

                                        <li v-if="testRecord.data.length == 0">

                                            <a href="javascript:;" class="t-center">暂无{{ testRecord.type }}</a>

                                        </li>

                                        <li v-for="(data, dkey) in testRecord.data" :key="dkey">

                                            <a href="javascript:;">{{dkey+1}}.{{testRecord.type}}-{{data.text}}</a>

                                        </li>

                                    </ul>

                                </div>

                            </dd>

                        </template>

                    </dl>

                </div>

                
                <div class="span9" style="background-color:bisque">

                    
            </div>

            
            <div class="span9" ref="chartTab">

                <div id="uiTab" class="bui-tab">

                    <div class="bui-tab-head">

                        <ul class="bui-nav">

                            <li class="bui-btn">端电压</li>

                            <li class="bui-btn">电池电流</li>

                            <li class="bui-btn">单体信息</li>

                        </ul>

                    </div>

                    <div class="bui-tab-main">

                        <ul>

                            
                            <li ref="chartTabItem">

                                <high-line-chart id="groupVolLine" :height="lineChart.height" name="端电压" unit="V" :colors="{min:'#19be6b', max: '#ed4014'}" ref="groupVolLine"></high-line-chart>

                            </li>

                            <li style="display:none">

                                <high-line-chart id="groupCurr" :height="lineChart.height" name="电池电流" unit="A" :colors="{min:'#19be6b', max: '#ed4014'}" ref="groupCurr"></high-line-chart>

                            </li>

                            <li style="display:none">

                                <high-bar-chart :height="lineChart.height" id="monInfoBar" name="单体电压" unit="V" :colors="{min:'#19be6b', max: '#ed4014'}" ref="monInfoBar"></high-bar-chart>

                            </li>

                        </ul>

                    </div>

                </div>

            </div>

        </main>

    </div>

        </div>

    </main>

</div>


 Device_Manage/WebRoot/pages/history/history.js

@@ -15,73 +15,88 @@
            scope: 'page',
            data: {}
        });

        var params = router.getPageParams();
        // 定义Vue模块
        this.vm = new Vue({
            el: bs.$parent[0],
            el: bs.$el[0],
            data: {
                uiSidebar: '', // 侧边栏
                devInfos: { // 设备列表
                    page: {
                        pageSize: 6,
                        pageCurr: 1
                    },
                    title: '设备信息',
                    list: []
                }
                params: params,
                lineChart: {
                    height: 300
                },
                testRecordList: [{
                    type: '核容放电',
                    color: '',
                    data: [{
                        text: '2018-09-27 00:00:00'
                    }, {
                        text: '2018-09-28 00:00:00'
                    }]
                }, {
                    type: '监测放电',
                    color: '',
                    data: [{
                        text: '2018-09-27 00:00:00'
                    }]
                }, {
                    type: '核容充电',
                    color: 'info',
                    data: [{
                        text: '2018-09-27 00:00:00'
                    }, {
                        text: '2018-09-28 00:00:00'
                    }]
                }, {
                    type: '监测充电',
                    color: 'info',
                    data: []
                }]
            },
            methods: {
                handlerListClick: function handlerListClick(item) {
                    // 点击设备列表
                    console.log(item);
                    this.uiSidebar.close();
                },
                searchDevice: function searchDevice() {
                    // 查询设备信息
                    var self = this;
                    var page = this.devInfos.page;
                    var json = JSON.stringify(page);
                    // 请求后台获取告警
                searchBattTestList: function searchBattTestList() {
                    var params = this.params;
                    var searchParams = {
                        num: 0,
                        BattGroupId: params.battGroupId
                    };
                    ajax({
                        type: 'post',
                        async: true,
                        url: 'BattInfAction!serchDevice',
                        data: 'json=' + json,
                        dataType: 'json',
                        url: 'Batttestdata_infAction!serchByCondition',
                        data: 'json=' + JSON.stringify(searchParams),
                        success: function success(res) {
                            // console.log(res);
                            var rs = JSON.parse(res.result);
                            if (rs.code == 1) {
                                var data = rs.data;
                                for (var i = 0; i < data.length; i++) {
                                    var _data = data[i];
                                    //console.log(_data);
                                    _data.title = _data.StationName3;
                                }
                                self.devInfos.list = data;
                            }
                            //console.log(rs);
                        }
                    });
                    // console.log(params);
                }
            },
            computed: {
                getTitle: function getTitle() {
                    var title = this.params.battGroupName ? this.params.battGroupName : '未知';
                    return title;
                }
            },
            mounted: function mounted() {
                // 获取所有设备的信息
                this.searchDevice();

                // 侧边栏
                this.uiSidebar = bui.sidebar({
                    id: "#sidebarWrap", //菜单的ID(必须)
                    width: 240,
                    trigger: "#menu",
                    isActive: true
                });

                var self = this;
                // 查询电池充放电测试
                this.searchBattTestList();
                //折叠菜单示例
                var uiAccordion = bui.accordion({
                    id: "#accordion"
                });
                var chartTab = this.$refs['chartTab'];

                // 打开侧边栏
                this.uiSidebar.open();
                // 选项卡
                var uiTab = bui.tab({
                    id: "#uiTab",
                    width: chartTab.offsetWidth,
                    onInited: function onInited(option) {
                        self.lineChart.height = self.$refs['chartTabItem'].offsetHeight;
                    }
                });
                // 设置为容器的100%
                //$("#uiTab").width('100%')
            }
        });
    }

 Device_Manage/WebRoot/pages/main/main.html

@@ -24,7 +24,7 @@
                <li class="bui-btn bui-box span3" @click="handlerTabs('menu')">

                    <div class="thumbnail success"><i class="icon">&#xe665;</i></div>

                    <div class="span1">

                        <h3 class="item-title approve">5</h3>

                        <h3 class="item-title approve">4</h3>

                        <p class="item-text">菜单</p>

                    </div>

                </li>

@@ -57,10 +57,7 @@
                            <div class="bui-icon primary round"><i class="iconfont icon-zhexianzhuzhuangtu"></i></div>

                            <div class="span1">监测数据</div>

                        </li>

                        <li class="bui-btn" @click="handerClick('history')">

                            <div class="bui-icon success round"><i class="iconfont icon-yunweiguanli"></i></div>

                            <div class="span1">运维数据</div>

                        </li>

						
                        <li class="bui-btn" @click="handerClick('warn')">

                            <div class="bui-icon warning round"><i class="icon-bell">&#xe63f;</i><span class="bui-badges" v-text="numbers.alarms">0</span></div>

                            <div class="span1">告警管理</div>