修改内容

whychdw

2019-08-30 599fdace548a923ea72d9f172e2a4ece395cb614

修改内容

 src/components/HList.vue

New file
@@ -0,0 +1,84 @@
<template>
    <div class="h-list">
        <div class="h-list-content">
            <ul v-if="getDataLen">
                <li v-for="(item, key) in data" :key="key">
                    <a href="javascript:;" 
                    @click="handlerClick(item)"
                    :class="getClass(item)">{{item.text}}</a>
                </li>
            </ul>
            <div v-else class="h-list-no">暂无数据</div>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        data:{
            type: Array,
            default() {
                return []
            }
        },
        active: {
            type: [String, Number],
            default: -9990
        }
    },
    data() {
        return {
            acItem: this.active
        }
    },
    methods:{
        handlerClick: function(item) {
            if(this.acItem != item.id) {
                this.acItem = item.id;
                this.$emit('on-click', item);
            }
        },
        getClass: function(item) {
            var active = this.acItem;
            if(active == item.id) {
                active = true;
            }else {
                active = false;
            }
            // 定义样式
            var result = {
                active: active,
            };
            return result;
        }
    },
    computed: {
        getDataLen: function() {
            return this.data.length;
        },
        
    }
}
</script>
<style scoped>
    .h-list-content li {
        list-style: none;
    }
    .h-list-content a{
        display: block;
        line-height: 32px;
        text-indent: 1em;
        color: rgb(90, 202, 250);
    }
    .h-list-content a:hover {
        background-color: rgb(59, 89, 141);
       
    }
    .h-list-content a.active {
        background-color: rgb(59, 89, 141)
    }
    .h-list-no {
        text-align: center;
        color: rgb(90, 202, 250);
    }
</style>

 src/components/HomeStateList.vue

New file
@@ -0,0 +1,90 @@
<template>
    <div class="home-state-list">
        <div class="home-state-list-header">放电数: {{header.discharge}} 充电数: {{header.charge}}</div>
        <h-list
            :active="testList.active" 
            :data="testList.data" 
            @on-click="handlerTestList"></h-list>
    </div>
</template>
<script>
import HList from "./HList"
import {Timeout, ajax} from "../libs/common"
export default {
    components: {
        HList
    },
    data() {
        return {
            timer: new Timeout(),
            header: {
                charge: 0,
                discharge: 0
            },
            testList: {
                active: '',
                data: []
            }
        }
    },
    methods: {
        handlerTestList: function(item) {
            console.log(item);
            this.$emit('on-click', item);
        },
        searchHomeStates: function() {
            var self = this;
            // 请求后台
            ajax({
                type: 'post',
                async: true,
                url: 'Batt_rtstateAction!serchDisOrChargrNew',
                data: null,
                dataType: 'json',
                success: function(res) {
                    // console.log(res);
                    var rs = JSON.parse(res.result);
                    var result = [];
                    var charge = 0;
                    var discharge = 0;
                    if(rs.code == 1) {
                        var data = rs.data;
                        for(var i=0; i<data.length; i++){
                            var _data = data[i];
                            var tmp = {};
                            if(_data.batt_test_type == 3) {
                                tmp.id = _data.BattGroupId+""+3
                                tmp.text = _data.note+'电池组放电测试';
                                discharge++;
                            }else if(_data.batt_test_type == 2){
                                tmp.text = _data.note+'电池组充电测试';
                                tmp.id = _data.BattGroupId+""+2
                                charge++;
                            }
                            result.push(tmp);
                        }
                    }
                    self.setNumber(charge, discharge);
                    self.testList.data = result;
                }
            })
        },
        setNumber: function(charge, discharge) {
            this.header.charge = charge;
            this.header.discharge = discharge;
        }
    },
    mounted: function() {
        var self = this;
        this.timer.start(function() {
            self.searchHomeStates();
        }, 4000);
    }
}
</script>
<style scoped>
    .home-state-list-header {
        text-align: center;
        margin-bottom: 8px;
    }
</style>

 src/views/index.vue

@@ -18,7 +18,7 @@
                            <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>
                            <pie-chart height="200px" ref="monHealthPie" :colors="options.monHealthPie.colors"></pie-chart>
                        </SquareBox>
                    </div>
                </div>
@@ -45,6 +45,7 @@
            imgs: mapImgSrc,
            options: {
                eleStatePie: {
                    timer: new Timeout(),
                    //浮充,充电,放电,均充
                    colors: ['#31CB36', '#D1D105', '#FF0000', '#800080'],
                    option: {
@@ -59,6 +60,7 @@
                    }
                },
                eleWarnPie: {
                    timer: new Timeout(),
                    option: {
                        title : {
                            text: '电池告警率',
@@ -71,6 +73,7 @@
                    }
                },
                homePowerCutPie: {
                    timer: new Timeout(),
                    colors: ['#FF0000', '#31CB36'],
                    option: {
                        title : {
@@ -83,6 +86,20 @@
                        }]
                    }
                },
                monHealthPie: {
                    timer: new Timeout(),
                    colors: ['#31CB36', '#D1D105', '#FF0000'],
                    option: {
                        title : {
                            text: '单体容量健康率',
                            x:'left'
                        },
                        series:[{
                            name: '单体容量健康率',
                            data: [],
                        }]
                    }
                }
            }
        }
    },
@@ -233,6 +250,8 @@
                        self.options.eleStatePie.option.series[0].data = result;
                        // 生成电池状态饼状图
                        self.$refs['eleStatePie'].setOption(self.options.eleStatePie.option);
                        // 开启计时器
                        self.options.eleStatePie.timer.open();
                    }
                }
            });
@@ -272,16 +291,18 @@
                                {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
                        });
                    }

                    self.options.eleWarnPie.option.series[0].data = result;
                    // 生成电池状态饼状图
                    self.$refs['eleWarnPie'].setOption(self.options.eleWarnPie.option);
                    // 开启计时器
                    self.options.eleWarnPie.timer.open();
                },
            });
        },
@@ -312,8 +333,68 @@
                    self.options.homePowerCutPie.option.series[0].data = result;
                    // 生成电池状态饼状图
                    self.$refs['homePowerCutPie'].setOption(self.options.homePowerCutPie.option);
                    // 开启计时器
                    self.options.homePowerCutPie.timer.open();
                }
            });
        },
        searchGood: function() {    // 单体容量健康率
            var self = this;
            // 请求后台
            ajax({
                type: 'post',
                async: true,
                url: 'Battalarm_dataAction!serchGood',
                data: null,
                dataType: 'json',
                success: function(res) {
                    var rs = JSON.parse(res.result);
                    // console.log(rs);
                    var result = [];
                    if(rs.code == 1) {
                         result = [
                            {name:"单体容量健康",value: rs.sum-rs.data[0]-rs.data[1]},        /* '健康电池' */
                            {name:"单体容量告警",value: rs.data[0]},
                            {name:"单体容量更换",value: rs.data[1]}
                         ]
                    }else {
                        result = [
                            {name:"单体容量健康",value: 0},        /* '健康电池' */
                            {name:"单体容量告警",value: 0},
                            {name:"单体容量更换",value: 0}
                         ]
                    }
                    self.options.monHealthPie.option.series[0].data = result;
                    // 生成电池状态饼状图
                    self.$refs['monHealthPie'].setOption(self.options.monHealthPie.option);
                    // 开启计时器
                    self.options.monHealthPie.timer.open();
                }
            });
        },
        updatePie: function() {
            var self = this;
            var options = this.options;
            // 查询电池状态饼状图
            options.eleStatePie.timer.start(function() {
                self.eleStatePie();
            }, 4000);

            // 查询电池告警率
            options.eleWarnPie.timer.start(function() {
                self.eleWarnPie();
            }, 4000);

            // 机房停电
            options.homePowerCutPie.timer.start(function() {
                self.homePowerCutPie();
            }, 4000)

            // 单体容量健康率
            options.monHealthPie.timer.start(function() {
                self.searchGood();
            }, 4000)
            
        }
    },
    mounted: function() {
@@ -410,14 +491,8 @@
        // 启动页面计时器查询地图图标
        this.startTimer();

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

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

        // 机房停电
        this.homePowerCutPie();
        // 显示并更新饼状图
        this.updatePie();
    },
}
</script>

 src/views/monitor/history.vue

@@ -7,11 +7,16 @@
                        <home-tree @on-select-change="handlerSelectChange"></home-tree>
                    </science-card>
                </div>
                <div class="view-layout-middle">
                    <science-card width="100%" height="100%">
                        <square-box style="margin: 8px" minHeight="400px" title="充放电状态" :show-title=false>
                            <home-state-list></home-state-list>
                        </square-box>
                    </science-card>
                </div>
                <div class="view-layout-right">
                    <science-card width="100%" height="100%">
                        <square-box style="margin: 8px" minHeight="400px">
                            
                        </square-box>
                        <square-box style="margin: 8px" minHeight="400px"></square-box>
                    </science-card>
                </div>
            </div>
@@ -22,17 +27,30 @@
import ScienceCard from '../../components/ScienceCard'
import HomeTree from "../../components/HomeTree"
import SquareBox from "../../components/SquareBox"
import HomeStateList from "../../components/HomeStateList"
export default {
    components: {
        ScienceCard,
        HomeTree,
        SquareBox
        SquareBox,
        HomeStateList
    },
    data() {
        return {
            testList:{
                active: 1,
                data:[]
            }
        }
    },
    methods: {
        handlerSelectChange: function(item) {
            if(item.type == 'group') {
                console.log(item);
            }
        },
        handlerTestList: function(item) {
            console.log(item);
        }
    }
}
@@ -47,8 +65,13 @@
        height: 100%;
        overflow-y: auto;
    }
    .view-layout-middle {
        float: left;
        width: 360px;
        height: 100%;
        overflow-y: auto;
    }
    .view-layout-right {
        margin-left: 370px;
        height: 100%;
        overflow-y: auto;
    }