提交内容

whychdw

2019-08-20 317f33dba2471e9764f750cad56150b1a88dcaed

提交内容

 public/favicon.ico

 public/favicon2.ico

 public/index.html

@@ -5,7 +5,7 @@
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>蓄电池监控平台</title>
    <title>蓄电池智能管理系统</title>
    <!-- 导入百度地图API -->
    <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=QAerSFEiGDCx1oHPB7Z5XYcBHI6R3qwx"></script>

 src/App.vue

@@ -16,13 +16,26 @@
            </div>
        </i-col>
        <i-col span="12">
            <div style="text-align: center; line-height: 40px;font-size: 20px;font-weight: bold; color: #73D8FE">蓄电池监控平台</div>
            <div style="text-align: center; line-height: 40px;font-size: 20px;font-weight: bold; color: #73D8FE">蓄电池智能管理系统</div>
        </i-col>
        <i-col span="6">
            <div class="blade-card" style="height: 40px;">
                <div class="blade-card-mask" style="left:40px; right: 0;"></div>
                <div class="blade-card-mask-before"></div>
                <div class="blade-card-content"></div>
                <div class="blade-card-content" style="text-align: right">
                  <div class="user-info">
                    <Dropdown>
                      <a href="javascript:void(0)">
                        <Avatar style="background-color: #87d068" icon="ios-person" />
                        <span class="user-name">hdw</span>
                      </a>
                      <DropdownMenu slot="list">
                        <DropdownItem>密码修改</DropdownItem>
                        <DropdownItem>退出系统</DropdownItem>
                      </DropdownMenu>
                    </Dropdown>
                  </div>
                </div>
            </div>
        </i-col>
      </Row>
@@ -179,4 +192,14 @@
    height: calc(100vh - 115px);
    overflow-y: auto;
  }
  .user-info {
    display: inline-block;
    margin-top: 4px;
    margin-right: 16px;
    text-align: center;
  }
  .user-name {
    color: #FFFFFF;
    margin-left: 8px;
  }
</style>

 src/assets/js/map.js

New file
@@ -0,0 +1,97 @@
// 地图模块
var mapImgSrc = function() {
    var imagesBase64 = {
            normal: 'data:img/jpg;base64,R0lGODlhGQAZANUgAOv26nvFefX69ZnSmMLkwWa8ZKTXovX79XDAb7jgt+Dx4Em0Y7fft8zoy3fH'+
                'iqPXouDy4Oj27I3Qnq3brK/eu7TfudLs2PT69Y/Ojt3x4sDkwoXJg67brdbt1v///1y3Wv///wAA'+
                'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+
                'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAACAALAAAAAAZABkAAAbbQJBw'+
                'KBQ0JpvkgKEgOp2AQeFDrVIDjaeTMLV6qRiBFsT4mq/i7XkdSAsBH8SDQ6/b6wPEx0DMHzqAgYKC'+
                'EAdTAG8fGx0Jgx0aFYMJABt7QgSKgB6bnBIWnJuAlQFCBpkdoB4ZCxQXoIAHVEKVi6igDgsLEa+o'+
                'siC0mqkOEqmavqa1qR4Ou7wPvpjJqRTKHRCjiQEHCXfddAkeenxCAx8cjuiA5R+Ib11rZhNODfBm'+
                'G1qY9VVtY/n1G260KHhnZsAYKAHOEDj4RMC6KgWaMNRS5kq7iVo6FDAQ8EkQADs=',
            behind: 'data:img/jpg;base64,R0lGODlhGQAZANUqAIyfLu325YjGVfb78sjlsJHLYqPTfHW9Oq3YieJXMHysLepQMO93Wr7go+Py'+
                '1+lKI9Hpvb/go/GOdvWwn9JkL7efVpuSLvzo5LXclqOLLtrtyprPb9bMof708djXr4SlLvrSyHSy'+
                'LdpdMPvd1rCwYquFL9ruy8tqL////2y5Lf///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+
                'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAACoALAAAAAAZABkAAAbnQJVw'+
                'KBxAMIWkoeEgOp0BwyFFrVIFkKeTMLV6qZuBVtX4mq/i7XktSAsDKUWmRK/b6xZFCkE0KBIngYKD'+
                'gxQJISkBbykAJxEmkJEeHJGQESIAe0IEjCcmKKChEiChoCYnmQJCCJ2fpSMPEx2lpwlUQgWtpSgM'+
                'Dw8XtCcLtyq5ja6lDBK7p8Mpq7q7DMDBGcScx7soE9omFKmLHwkVJOXm5+YVC3p8QgYpJYTygxZU'+
                'im9da2YYThD6ZgW0cPpXpc2Ygf8KuNHiIJ8ZA2OgCDhDIOKTAe+sHGhiUUuZK/c6atFwAMHCJ0EAADs=',
            powercut: 'data:img/jpg;base64,R0lGODlhGQAZAMQeAPr1+fTr87p9tM+ly8qbxdq51q9pqN/D3LVzrqBPmrh7s+/h7eTN4u/h7sSR'+
                'wNSv0NWy0/Pp8t7B2+3e7OfT5sWRv7p9s9i21fn0+b+HudWv0erX6P///6pfov///wAAACH5BAEA'+
                'AB4ALAAAAAAZABkAAAXPoCeOIsA8WUoUC+m6AWF0dE0LzOses+3TFYDOU/gZb8LdcSlIigIdxEBD'+
                'rVqrBERnQMoCNuCwWNwAzALPTmZTGG8kl3EhkNmKDmowZ893UPh7YHUCIgN5G4AcEwkQGIBgADQi'+
                'dWuIgAoJCRGPiJIelHqJCg6Jep6GlYkcCpuchh13h6oQqhsNg2kWAAVXvVQFHFpcIgQdGm7IYMUd'+
                'aE89S0YPLgzQRhk6eNU1TUPZ1RlOOgvPRgRDMAJHB+cvAMs1Bi3sOkU3zfM6GwYD4S8hADs=',
            timeout: 'data:img/jpg;base64,R0lGODlhGQAZANUgAPH0+ePo80tssC9VpKu72nWOw4OZydXd7Z6w1T1hqp2w1BA9lkxusLnG4eHn'+
                '8paq0YKZyHSOwpCkzmqGvZut0/Dz+NLb68PP5aq62sfS52eDvFl3tpClz8jS5////yFKnv///wAA'+
                'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+
                'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAACAALAAAAAAZABkAAAbbQJBw'+
                'KAQ0JJtkQXEgOp2BwuBDrVIFjaeTMLV6qRqAFqT4mq/i7XktSAsDnwSEQ6/b65HEx0AsJAAdgYKD'+
                'gwcAUwFvHxsdCIQdGBSECAEbe0IEi4EenJ0TF52cgZYCQgaaHaEeFgsPFaGBAFRCloypoQwLCw6w'+
                'qbMgtZuqDBOqm7+ntqoeDLy9EL+ZyqoPyx0HpIptCHfddAgeenxCBR8cj+iBEVSJb11rZhJODfBm'+
                'G1qZ9VVtY/n1G260HHhnpsAYKALOEDj4BEA5KwOaMNRS5kq7iVoyDDAQ8EkQADs=',
            warn: 'data:img/jpg;base64,R0lGODlhGQAZANUqAI3GN+325fb78ojGVcjlsJHLYqPTfK3YiXW9OunpUn2/MuPy177go9HpvfXw'+
                'd/HrSfHsVNjiTabPPvn2r7/go57MPLXclrnZY/bzjf396HS8L4XDNNnrtNjqqJrPb9rtyvz73eDm'+
                'T/z60v7+9LLXa6/TQdruy9DfSv///2y5Lf///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+
                'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAACoALAAAAAAZABkAAAbnQJVw'+
                'KBQ0LIWkgbEgOp0BAyJFrVIHjaeTMLV6qR6BVsX4mq/i7Xk9SAsDKYWkRK/b6xVF6kA0KBIngYKD'+
                'gxEJGikBbykAJxQmkJEcHZGQFCEAe0IEjCcmKKChGCKhoCYnmQNCB52fpSAPEyOlpwlUQgWtpSgO'+
                'Dw8ZtCcQtyq5ja6lDhi7p8Mpq7q7DsDBEsScx7soE9omEamLGwkXJOXm5+YXEHp8QgYpJYTygxVU'+
                'im9da2YWTg36ZgW0cPpXpc2Ygf8KuNGyIJ8ZA2OgDDhDIOITAe+sIGhiUUuZK/c6avmA4MDCJ0EAADs=',
            weak: 'data:img/jpg;base64,R0lGODlhGQAZANUqAGJUiOjr9PP1+mp8unWGv7rC35ilz1Nor4ybylVZma05K7Q2Itzh78XM5P//'+
                '//rZxq642vSqfvjGqY9RXO56N3BPd6Ou1KRjWaA+PHdNb05cooGRxcV4W+1xKNHX6qY7M1tXkfGN'+
                'U8aBafCERYxWZH5KZsNlPplAROxnGkdeqv///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+
                'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAACoALAAAAAAZABkAAAbnQJVw'+
                'KBQ0LIQkAsIgOp0BxCFFrVIHjaezMLV6qRuBVgX5mq/i7Xk9SAsDqUSmRK/b65VEykBEJBQngYKD'+
                'gxgKGikBbykAJxcmkJEcIpGQFx8Ae0IFjCcmKKChEiGhoCYnmQNCBp2fpSMOER2lpwpUQgStpSgP'+
                'Dg4UtCcLtyq5ja6lDxK7p8Mpq7q7D8DBGcScx7soEdomGKmLIAoTJOXm5+YTC3p8QggpJYTygxVU'+
                'im9da2YWTg36ZgS0cPpXpc2Ygf8IuNHCIJ8ZBGOgDDhTIOITAe+sHGhiUUuZK/c6avFwwMDCJ0EAADs=',
            uninstall: 'data:image/gif;base64,R0lGODlhGQAZAMQSAPDv7svHxbWvrJ6Xk9LPzby3tI+Hgunn5pePi9rX1cO/vK2npPj396a'+
                'fm8S/veHf3v///4h/ev///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAABIALAAAAAAZABkAAAXLoCSOIpMoTSoEB+'+
                'm6gGBEdE0PyesSs+3TC4ZOEvgZb8LdcTlIigARRMFBrVqrAkSkQMoyHuCwWHxgzADPSOMRGD8IbXEA0NiKCGowZM8XPPh7YHUDIgV5f4AHEQEMgGAMNCJ'+
                '1a4h8dREAjn+REpN6gBANAqB6nIaUoKGZmoYRd4epAakPB4NpTQFXulSyWlwiAhEObsRgwZgjAD1LRgouCcxGDTp40TVNQ9XRDU46B8tGAkMwA0cE4y8Mxz'+
                'UGLeg6RTdo70MPBgXdLyEAOw==',

        };
    // 普通
    var normal = new Image();
    normal.src = imagesBase64.normal;

    // 落后
    var behind = new Image();
    behind.src = imagesBase64.behind;
    
    // 停电
    var powercut = new Image();
    powercut.src = imagesBase64.powercut;
    
    // 延时
    var timeout = new Image();
    timeout.src = imagesBase64.timeout;

    // 告警
    var warn = new Image();
    warn.src = imagesBase64.warn;
    
    // 续航不足
    var weak = new Image();
    weak.src = imagesBase64.weak;

    // 未安装
    var uninstall = new Image();
    uninstall.src = imagesBase64.uninstall;

    return {
        normal: normal,
        behind: behind,
        powercut: powercut,
        timeout: timeout,
        warn: warn,
        weak: weak,
        uninstall: uninstall,
    }
}();
export {
    mapImgSrc       // 地图图标（base64）
}

 src/components/PieChart.vue

New file
@@ -0,0 +1,99 @@
<template>
    <div class="pie-echart">
        <div class="echart" :style="style"></div>
    </div>
</template>
<script>
import $ from 'jquery'
import echarts from "echarts"
import {getMaxFromArr, getMinFromArr} from "../libs/common"
export default{
    props: {
        width: {
            type: String,
            default: 'auto'
        },
        height: {
            type: String,
            default: '100px'
        },
        colors: {
            type: Array,
            default() {
                return [];
            }
        }
    },
    data() {
        return {
            graph: '',
            style: {
                width: this.width,
                height: this.height,
            },
            option: {},
        }
    },
    methods: {
        setOption: function(opt) {
            var colors = this.colors;
            var defaults = {
                title: {
                    text: '',
                    x:'left',
                    textStyle: {
                        color: "#FFFFFF"
                    },
                },
                
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                color: function() {
                    var sys_color = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'];
                    // 遍历插入颜色
                    for(var i = colors.length-1; i >-1; i--) {
                        var color = colors[i];
                        sys_color.splice(0, 0, color);
                    }
                    return sys_color;
                }(),
                series: [
                    {
                        name: '',
                        type: 'pie',
                        radius : '70%',
                        center: ['50%', '60%'],
                        data:[],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            // 合并配置项
            this.option = $.extend(true, {}, defaults, opt);
            // console.log(this.option);
            // 生成饼状图
            this.graph.setOption(this.option);
            this.graph.resize();
        },
        resize: function() {
            var option = this.graph.getOption();
            this.setOption(option);
        },
    },
    mounted: function() {
        // console.log(this.$el);
        var $root = $(this.$el);
        var graphEl = $root.find('.echart').get(0);
        this.graph = echarts.init(graphEl);
        this.setOption({});
    },
}
</script>

 src/components/SquareBox.vue

@@ -12,8 +12,8 @@
        <!-- 左下 -->
        <div class="square-box-left-bottom"></div>
        <div class="square-box-container">
            <div class="square-box-title" v-if="showTitle"><Icon :type="icon" /><span class="square-box-title-text">{{title}}</span></div>
            <div class="square-box-content" :style="style">
                <div class="square-box-title"><Icon :type="icon" /><span class="square-box-title-text">{{title}}</span></div>
                <slot></slot>
            </div>
        </div>
@@ -33,6 +33,10 @@
        title: {
            type: String,
            default: ''
        },
        showTitle: {
            type: Boolean,
            default: true
        }
    },
    data() {
@@ -66,6 +70,9 @@
        position: relative;
        padding: 1px;
    }
    .square-box-title {
        margin: 15px;
    }
    .square-box-content {
       margin: 15px;
    }

 src/libs/util.js

@@ -1,6 +1,6 @@
let util = {};
util.title = function(title) {
    title = title?title:"蓄电池监控平台";
    title = title?title:"蓄电池智能管理系统";
    window.document.title = title;
};
export default util;

 src/views/index.vue

@@ -1,15 +1,319 @@
<template>
    <div class="view-root" style="padding: 0">
        <div class="view-root-inner">
            <div id="allmap"></div>
            <div class="table table-full">
                <div class="table-cell">
                    <div id="allmap"></div>
                </div>
                <div class="table-cell" style="width: 8px"></div>
                <div class="table-cell" style="width: 400px">
                    <div class="table-cell-inner">
                        <SquareBox :show-title=false>
                            <pie-chart height="200px" ref="eleStatePie" :colors="options.eleStatePie.colors"></pie-chart>
                        </SquareBox>
                        <SquareBox :show-title=false style="margin-top: 4px;">
                            <pie-chart height="200px" ref="eleWarnPie"></pie-chart>
                        </SquareBox>
                        <SquareBox :show-title=false style="margin-top: 4px;">
                            <pie-chart height="200px" ref="homePowerCutPie" :colors="options.homePowerCutPie.colors"></pie-chart>
                        </SquareBox>
                        <SquareBox :show-title=false style="margin-top: 4px;">
                            <pie-chart height="200px" ref="monHealthPie"></pie-chart>
                        </SquareBox>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import {ajax, Timeout} from '../libs/common'
import {mapImgSrc} from '../assets/js/map'
import SquareBox from '../components/SquareBox'
import PieChart from '../components/PieChart'
export default {
    components: {
        SquareBox,
        PieChart,
    },
    data() {
        return {
            inmap: '',
            overlay: '',
            timer: new Timeout(),

            imgs: mapImgSrc,
            options: {
                eleStatePie: {
                    //浮充,充电,放电,均充
                    colors: ['#31CB36', '#D1D105', '#FF0000', '#800080'],
                    option: {
                        title : {
                            text: '电池状态',
                            x:'left'
                        },
                        series:[{
                            name: '电池状态',
                            data: [],
                        }]
                    }
                },
                eleWarnPie: {
                    option: {
                        title : {
                            text: '电池告警率',
                            x:'left'
                        },
                        series:[{
                            name: '电池告警率',
                            data: [],
                        }]
                    }
                },
                homePowerCutPie: {
                    colors: ['#FF0000', '#31CB36'],
                    option: {
                        title : {
                            text: '机房停电',
                            x:'left'
                        },
                        series:[{
                            name: '机房停电',
                            data: [],
                        }]
                    }
                },
            }
        }
    },
    methods: {
        showMapPanel: function(data) {
            console.log(data);
        },
        startTimer: function() {
            var self = this;
            this.timer.start(function() {
                self.searchStation();
            }, 4000);
        },
        searchStation: function() {
            var self = this;
            var temp = this.createSearchParam();
            var json = JSON.stringify(temp);
            // 请求后台获取数据
            ajax({ 	
                type: "post",				
                url: "BattMap_informationAction!searchUserManageStation",				
                async:true,				
                data: "json="+json,		
                dataType:'json',
                success: function(res){
                    var rs = JSON.parse(res.result);
                    var result = [];
                    for(var i=0; i<rs.length; i++) {
                        var _rs = rs[i];
                        var count = self.getCounter(_rs.msg);
                        var point = [_rs.data.longitude, _rs.data.latitude];
                        // 告警
                        var warn = {
                            name: '蓄电池告警数目：',
                            value: _rs.code,
                        };
                        // 落后
                        var behind = {
                            name: '蓄电池落后数目：',
                            value: _rs.sum,
                        };
                        // 延时
                        var timeout = {
                            name: '蓄电池延时数目：',
                            value: _rs.newsum,
                        };
                        // 设置地图覆盖物对象
                        var tmp = {
                            count: count,       // 图标类型
                            name: _rs.data.StationName, // 机房名称
                            behind: behind,
                            warn: warn,
                            timeout: timeout,
                            plus: _rs,
                            geometry: {
                                type: 'Point',
                                coordinates: point
                            },
                        };
                        result.push(tmp);
                    }
                    // console.log(result);
                    // 设置地图覆盖物图标
                    self.overlay.setData(result);
                    // 启动计时器
                    self.timer.open();
                }
            });
        },
        createSearchParam: function() {
            var bmd = {
                adata:{
                    alm_cleared_type: 0,
                    alm_id: 1,
                },
                bplan:{
                    discharge_reason: 3,
                }
            };
            return bmd;
        },
        getCounter: function(str) {
            var result = 10;
            switch(str){
                case 'item-normal':
                    result = 0;
                break;
                case 'item-behind':
                    result = 1;
                break;
                case 'item-timeout':
                    result = 3;
                break;
                case 'item-warn':
                    result = 4;
                break;
            }
            return result;
        },
        eleStatePie: function() {   // 电池状体饼状图
            var self = this;
            //电池状态
            var batt_states = [
                {state:1, value:"浮充"},                    //浮充
                {state:2, value:"充电"},                    //充电									
                {state:3, value:"放电"},                    //放电
                {state:4, value:"均充"},                    //均充
            ];
            // 请求后台
            ajax({
                type: 'post',
                async: true,
                url: 'Batt_rtstateAction!serchBattStateRate',
                data: null,
                dataType: 'json',
                success: function(res) {
                    var rs = JSON.parse(res.result);
                    if(rs.code == 1) {
                        var data = rs.data;
                        var result = [];
                        // console.log(data);
                        for(var i=0; i<data.length; i++) {
                            var _data = data[i];
                            var name = false;
                            switch(_data.batt_state) {
                                case 1:
                                    name = '浮充';
                                break;
                                case 2:
                                    name = '充电';
                                break;
                                case 3:
                                    name = '放电';
                                break;
                                case 4:
                                    name = '均充';
                                break;
                            }
                            // 名称存在
                            if(name) {
                                var tmp = {
                                    name: name,
                                    value: _data.num,
                                };
                                result.push(tmp);
                            }
                        }
                        self.options.eleStatePie.option.series[0].data = result;
                        // 生成电池状态饼状图
                        self.$refs['eleStatePie'].setOption(self.options.eleStatePie.option);
                    }
                }
            });
        },
        eleWarnPie: function() {    // 电池告警率
            var self = this;
            // 请求后台
            ajax({
                type: 'post',
                async: true,
                url: 'Battalarm_dataAction!serchAlm',
                data: 'bmd.binf.StationName='+'',
                dataType: 'json',
                success: function(res) {
                    // console.log(res);
                    var rs = JSON.parse(res.result);
                    var result = [];
                    if(rs.code == 1) {
                        var data = rs.data;
                        var total = parseInt(data.MonNum) 
                                    + parseInt(data.alm_id) 
                                    + parseInt(data.alm_signal_id) 
                                    + parseInt(data.alm_level)
                                    + parseInt(data.alm_value)
                                    + parseInt(data.BattGroupId);
                        if(total == 0) {
                            result.push({
                                name: '暂无告警',
                                value: 0
                            });
                        }else {
                            result.push(
                                {name: '组端电压', value: parseInt(data.MonNum)},
                                {name: '充电电流', value: parseInt(data.alm_id)},
                                {name: '放电电流', value: parseInt(data.alm_signal_id)},
                                {name: '单体电压', value: parseInt(data.alm_level)},
                                {name: '容量更换告警', value: parseInt(data.alm_value) + parseInt(data.BattGroupId)}    
                            );
                        }

                        self.options.eleWarnPie.option.series[0].data = result;
                        // 生成电池状态饼状图
                        self.$refs['eleWarnPie'].setOption(self.options.eleWarnPie.option);
                    }else {
                        result.push({
                            name: '暂无告警',
                            value: 0
                        });
                    }
                },
            });
        },
        homePowerCutPie: function() {   // 机房停电
            var self = this;
            // 请求后台
            ajax({
                type: 'post',
                async: true,
                url: 'BattPower_offAction!serchPowerOff',
                data: null,
                dataType: 'json',
                success: function(res) {
                    var rs = JSON.parse(res.result);
                    var result = [];
                    if((rs.sum>=0) && (rs.newsum>=0) && (rs.newsum>=rs.sum)){
                        result=[
                            {name:"已停电机房",value: rs.sum},                    /*已停电机房*/
                            {name:"未停电机房 ",value: rs.newsum-rs.sum}     /* 未停电机房 */
                        ];		
                    }else{
                        result=[
                            {name:"已停电机房",value :0},                            /* 已停电机房 */
                            {name:"未修复",value: rs.sum,}
                        ];                        /* '未修复' */
                    }

                    self.options.homePowerCutPie.option.series[0].data = result;
                    // 生成电池状态饼状图
                    self.$refs['homePowerCutPie'].setOption(self.options.homePowerCutPie.option);
                }
            });
        }
    },
    mounted: function() {
@@ -24,6 +328,96 @@
                max: 22
            }
        });

        // 设置地图覆盖物信息
        this.overlay = new inMap.ImgOverlay({
            tooltip: {
                show: true,
                formatter: function(data) {
                    var behind = data.behind;
                    var warn = data.warn;
                    var timeout = data.timeout;
                    return data.name+'<br>'+        // 机房名称
                        behind.name+behind.value+'<br>'+    // 蓄电池落后数目
                        warn.name+warn.value+'<br>'+        // 蓄电池告警数目
                        timeout.name+timeout.value;         // 蓄电池延时数目
                }
            },
            style: {
                normal: {
                    width: 25,
                    height: 25,
                    offsets: {
                        top: "-100%",
                        left: "-50%"
                    }
                },
                splitList: [
                    {
                        // 正常图标
                        start: 0,
                        end: 1,
                        icon: this.imgs.normal
                    },
                    {
                        // 落后
                        start: 1,
                        end: 2,
                        icon: this.imgs.behind 
                    },
                    {
                        // 停电
                        start: 2,
                        end: 3,
                        icon: this.imgs.powercut
                    },
                    {
                        // 延时
                        start: 3,
                        end: 4,
                        icon: this.imgs.timeout
                    },
                    {
                        // 告警
                        start: 4,
                        end: 5,
                        icon: this.imgs.warn
                    },
                    {
                        // 续航不足
                        start: 5,
                        end: 6,
                        icon: this.imgs.weak
                    },
                    {
                        // 未安装
                        start: 6,
                        icon: this.imgs.uninstall
                    },
                ]
            },
            data: [],
            event: {
                onMouseClick: function(item) {
                    _self.showMapPanel(item[0]);
                }
            }
            
        });

        this.inmap.add(this.overlay);

        // 启动页面计时器查询地图图标
        this.startTimer();

        // 查询电池状态饼状图
        this.eleStatePie();

        // 查询电池告警率
        this.eleWarnPie();

        // 机房停电
        this.homePowerCutPie();
    },
}
</script>
@@ -31,4 +425,23 @@
    #allmap {
        height: 100%;
    }
    .table {
        display: table;
        vertical-align: top;
    }
    .table-cell {
        display: table-cell;
        vertical-align: top;
    }
    .table.table-full {
        width: 100%;
        height: 100%;
    }
    .table.table-full .table-cell {
        height: 100%;
    }
    .table.table-full .table-cell .table-cell-inner {
        height: 100%;
        overflow-y: auto;
    }
</style>

 src/views/monitor/realTime.vue

@@ -34,7 +34,7 @@
                            <tr>
                                <td valign="top">
                                    <div style="width: 300px"></div>
                                    <square-box style="margin: 8px;" minHeight="250px" title="机房基础信息">
                                    <square-box style="margin: 8px;" minHeight="220px" title="机房基础信息">
                                        <table style="color: #468FB6;">
                                            <tr>
                                                <td>电池状态：</td>
@@ -72,7 +72,7 @@
                                    </square-box>
                                </td>
                                <td valign="top">
                                    <square-box style="margin: 8px" minHeight="250px" title="图谱数据信息" icon="md-grid">
                                    <square-box style="margin: 8px" minHeight="220px" title="图谱数据信息" icon="md-grid">
                                        <Table border :columns="tbl.columns" :data="tbl.data" height="215"></Table>
                                    </square-box>
                                </td>