Merge branch 'hdw' of http://118.89.139.230:10101/r/admin_manage into hdw

lishifeng

2020-08-25 752d9012dbc4a0f3eaaa85f2a062abd98aa58276

Merge branch 'hdw' of http://118.89.139.230:10101/r/admin_manage into hdw

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

@@ -86,7 +86,8 @@
}

/* input */
.el-science-blue .el-input.is-disabled .el-input__inner {
.el-science-blue .el-input.is-disabled .el-input__inner,
.el-science-blue .el-input__inner {
    background-color: #00638D;
    border-color: #3ebdc9;
    color: #FFFFFF;

 src/components/chart/BarChart.vue

@@ -20,6 +20,9 @@
//区域缩放
import "echarts/lib/component/dataZoom";

//markeline
import "echarts/lib/component/markLine"

// 引入自定义主题
import "./theme/transparent"

@@ -28,10 +31,15 @@
        id: {
            type: String,
            required: true,
        },
        unit: {
            type: String,
            default: '',
        }
    },
    methods:{
        setOption(opt) {
            let unit = this.unit;
            // 整体配置项
            let option = {
                animation: false,
@@ -40,13 +48,19 @@
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    },
                    formatter(params){
                        var res = params[0].name+'<br/>';
                        res+= params[0].seriesName;
                        res+=' : '+params[0].data[1]+unit+'</br>';
                        return res;
                    }
                },
                grid: {
                    left: '1%',
                    right: '1%',
                    bottom: '1%',
                    bottom: '2%',
                    containLabel: true
                },
                xAxis: [
@@ -71,11 +85,11 @@
                            if(max == -Infinity) {
                                max = 1;
                            }
                            return max;
                            return Math.ceil(max*1.01);
                        }
                    }
                ],
                series: []
                series: this.getSeries(opt),
            };
            // 设置配置项
            this.$G.chartManage.get(this.id).setOption(option);
@@ -105,15 +119,50 @@
            if(!opt || !opt.series) {
                return [];
            }

            // 设置配置项
            let series = opt.series.map(item=>{
                let max = this.getMax(item.data);
                let min = this.getMin(item.data);
                item.type="bar";
                item.markLine = {
                    silent: true,
                    data: []
                };

                // 显示数据
                item.label= {
                    show: true,
                    position: 'top',
                    color: '#fff',
                };

                // 设置背景
                item.itemStyle = {
                    color: function(value) {
                        let val = value.value[1];
                        if(val == max) {
                            return 'green';
                        }else if(val == min) {
                            return 'red';
                        }
                    }
                };
                return item;
            });

            // 返回
            return series;
        },
        getMax(list) {
            let arr = list.map(item=>{
                return item[1];
            });
            return Math.max.apply(null,arr);
        },
        getMin(list) {
            let arr = list.map(item=>{
                return item[1];
            });
            return Math.min.apply(null,arr);
        }
    },
    mounted() {

 src/components/chart/LineChart.vue

@@ -0,0 +1,186 @@
<template>
    <div class="e-chart-root">
        <div class="e-chart-container">
            <div class="e-chart" :id="id" :ref="id"></div>
        </div>
    </div>
</template>

<script>
// 引入 ECharts 主模块
import ECharts from "echarts/lib/echarts";
//引入折线图
import "echarts/lib/chart/line";
//引入提示框
import "echarts/lib/component/tooltip";
//引入标题
import "echarts/lib/component/title";
//引入图例标志
import "echarts/lib/component/legend";
//区域缩放
import "echarts/lib/component/dataZoom";

//markeline
import "echarts/lib/component/markLine"

// 引入自定义主题
import "./theme/transparent"

export default {
    props: {
        id: {
            type: String,
            required: true,
        },
        unit: {
            type: String,
            default: '',
        }
    },
    methods:{
        setOption(opt) {
            let unit = this.unit;
            // 整体配置项
            let option = {
                animation: false,
                color: this.getColor(opt),
                title: this.getTitle(opt),
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    },
                    formatter(params){
                        var res = params[0].name+'<br/>';
                        res+= params[0].seriesName;
                        res+=' : '+params[0].data[1]+unit+'</br>';
                        return res;
                    }
                },
                grid: {
                    left: '1%',
                    right: '1%',
                    bottom: '2%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        splitLine: {
                            show: true,
                        },
                        min: function(data) {
                            let min = data.min;
                            if(min == Infinity) {
                                return 0;
                            }
                        },
                        max: function(data) {
                            let max = data.max;
                            if(max == -Infinity) {
                                max = 1;
                            }
                            return Math.ceil(max*1.01);
                        }
                    }
                ],
                series: this.getSeries(opt),
            };
            // 设置配置项
            this.$G.chartManage.get(this.id).setOption(option);
        },
        getColor(opt) {     // 配置自定义颜色
            // 未配置自定义颜色
            if(!opt || !opt.color) {
                return []
            }

            // 返回颜色
            return opt.color;
        },
        getTitle(opt) {     // 配置标题
            // 未配置标题
            if(!opt || !opt.title) {
                return {
                    show: false,
                };
            }

            // 返回标题
            return opt.title;
        },
        getSeries(opt) {    // 设置series
            // 未配置series
            if(!opt || !opt.series) {
                return [];
            }
            // 设置配置项
            let series = opt.series.map(item=>{
                let max = this.getMax(item.data);
                let min = this.getMin(item.data);
                item.type="line";
                item.markLine = {
                    silent: true,
                    data: []
                };

                // 显示数据
                item.label= {
                    show: true,
                    position: 'top',
                    color: '#fff',
                };

                // 设置背景
                item.itemStyle = {
                    color: function(value) {
                        let val = value.value[1];
                        if(val == max) {
                            return 'green';
                        }else if(val == min) {
                            return 'red';
                        }
                    }
                };
                return item;
            });
            // 返回
            return series;
        },
        getMax(list) {
            let arr = list.map(item=>{
                return item[1];
            });
            return Math.max.apply(null,arr);
        },
        getMin(list) {
            let arr = list.map(item=>{
                return item[1];
            });
            return Math.min.apply(null,arr);
        }
    },
    mounted() {
        // 基于准备好的dom，初始化echarts实例
        let chart = ECharts.init(this.$refs[this.id], 'transparent');
        // 将图表添加到图表管理
        this.$G.chartManage.set(this.id, chart);
        // 设置配置项
        this.setOption();
    }
}
</script>

<style scoped>
.e-chart-root,
.e-chart-container,
.e-chart {
    height: 100%;
    box-sizing: border-box;
}
</style>

 src/pages/dataTest/history.vue

@@ -1,25 +1,101 @@
<template>
    <flex-layout direction="row" class="page-history">
        <content-box title="站点列表" 
        slot="header" style="width:320px">
        slot="header" style="width:320px"
        @toggleChange="toggleChange" 
        toggle>
            <my-el-tree
            :data="data"></my-el-tree>
        </content-box>
        历史内容
        <content-box style="margin-left: 4px; margin-right: 4px;" :title="battFullName">
            <flex-layout>
                <div class="content-header" slot="header">
                    <div class="table-layout">
                        <div class="table-row">
                            <div class="table-cell text-right w80">电池状态:</div>
                            <div class="table-cell">
                                <el-input placeholder="" size="small" :disabled="true"></el-input>
                            </div>
                            <div class="table-cell text-right w80">端电压:</div>
                            <div class="table-cell">
                                <el-input placeholder="" size="small" :disabled="true"></el-input>
                            </div>
                            <div class="table-cell text-right w80">电池电流:</div>
                            <div class="table-cell">
                                <el-input placeholder="" size="small" :disabled="true"></el-input>
                            </div>
                            <div class="table-cell text-right w80">测试时长:</div>
                            <div class="table-cell">
                                <el-input placeholder="" size="small" :disabled="true"></el-input>
                            </div>
                        </div>
                        <div class="table-row">
                            <div class="table-cell text-right w80">测试日期:</div>
                            <div class="table-cell">
                                <el-cascader :options="list" 
                                size="small" placeholder="请选择测试日期"
                                style="width: 100%; min-width:16rem">
                                    <template slot-scope="{ node, data }">
                                        <span>{{ data.label }}</span>
                                        <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                                    </template>
                                </el-cascader>
                            </div>
                            <div class="table-cell text-right w80">测试容量:</div>
                            <div class="table-cell">
                                <el-input placeholder="" size="small" :disabled="true"></el-input>
                            </div>
                            <div class="table-cell text-right w80">剩余容量:</div>
                            <div class="table-cell">
                                <el-input placeholder="" size="small" :disabled="true"></el-input>
                            </div>
                            <div class="table-cell text-right w80">续航时间:</div>
                            <div class="table-cell">
                                <el-input placeholder="" size="small" :disabled="true"></el-input>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="page-content">
                    <div class="history-list">
                        
                    </div>
                    <div class="flex-box-list">
                        <div class="flex-box">
                            <bar-chart ref="groupVol" id="groupVol" unit="V"></bar-chart>
                        </div>
                        <div class="flex-box">
                            <bar-chart ref="monBar" id="monBar"></bar-chart>
                        </div>
                    </div>
                    <div class="flex-box-list">
                        <div class="flex-box">
                            <bar-chart ref="groupCurr" id="groupCurr" unit="A"></bar-chart>
                        </div>
                        <div class="flex-box">
                            <bar-chart ref="monInfo" id="monInfo"></bar-chart>
                        </div>
                    </div>
                </div>
            </flex-layout>
        </content-box>
    </flex-layout>
</template>

<script>
import ContentBox from '../../components/ContentBox'
import MyElTree from '../../components/MyElTree'
import BarChart from '../../components/chart/BarChart'

export default {
    components: {
        ContentBox,
        MyElTree,
        BarChart,
    },
    data() {
        return {
            battFullName: '电池组全称',
            data: [
                {
                    id: '湖北省',
@@ -36,12 +112,6 @@
                                        {
                                            id: '湖北省-武汉市-东西湖区-测试机房',
                                            label: '测试机房',
                                            children: [
                                                {
                                                    id: '湖北省-武汉市-东西湖区-测试机房-电池组1',
                                                    label: '电池组1',
                                                }
                                            ]
                                        }
                                    ]
                                },
@@ -72,8 +142,60 @@
                        }
                    ]
                }
            ],
            list: [
                {
                    value: 'herongDischarge',
                    label: '核容放电',
                    children: [
                        {
                            value: "2020-02-02 00:00:00",
                            label: "2020-02-02 00:00:00"
                        },
                        {
                            value: "2020-02-02 00:10:00",
                            label: "2020-02-02 00:10:00"
                        },
                        {
                            value: "2020-02-02 00:20:00",
                            label: "2020-02-02 00:20:00"
                        }
                    ]
                },
                {
                    value: 'herongCharge',
                    label: '核容充电',
                    children: []
                },
                {
                    value: 'jianceDischarge',
                    label: '监测放电',
                    children: []
                },
                {
                    value: 'jianceCharge',
                    label: '监测充电',
                    children: []
                },
            ]
        }
    },
    methods: {
        toggleChange() {
            this.resize();
        },
        resize() {
            this.$G.chartManage.resize('groupVol');
            this.$G.chartManage.resize('monBar');
            this.$G.chartManage.resize('groupCurr');
            this.$G.chartManage.resize('monInfo');
        }
    },
    mounted() {
        // 屏幕缩放时触发
        window.addEventListener('resize', ()=>{
            this.resize();
        });
    }
}
</script>
@@ -82,6 +204,35 @@
.page-history {
    color: #FFFFFF;
}
.table-cell.text-right {
    font-size: 14px;
}
.table-row .table-cell {
    padding-top: 12px;
}
.page-content {
    position: relative;
    padding-top: 8px;
    padding-bottom: 2px;
    box-sizing: border-box;
    height: 100%;
}
.history-list {
    position: absolute;
    top: 8px;
    left: 24px;
    z-index: 99;
}
.flex-box-list {
    display: flex;
    flex-direction: row;
    height: 50%;
    box-sizing: border-box;
}
.page-content .flex-box {
    flex:1;
    overflow: hidden;
}
</style>



 src/pages/dataTest/realTime.vue

@@ -53,14 +53,14 @@
                <div class="page-content">
                    <el-tabs v-model="acTabs" type="border-card" class="flex-layout"
                    @tab-click="tabClick">
                        <el-tab-pane label="电路拓扑图" name="eleLine">
                        <!-- <el-tab-pane label="电路拓扑图" name="eleLine">
                            电路拓扑图
                        </el-tab-pane>
                        </el-tab-pane> -->
                        <el-tab-pane label="电压" name="vol">
                            <bar-chart ref="vol" id="vol"></bar-chart>
                            <bar-chart ref="vol" id="vol" unit="V"></bar-chart>
                        </el-tab-pane>
                        <el-tab-pane label="内阻" name="res">
                            <bar-chart ref="res" id="res"></bar-chart>
                            <bar-chart ref="res" id="res" unit="mΩ"></bar-chart>
                        </el-tab-pane>
                        <el-tab-pane label="温度" name="temp">
                            <bar-chart ref="temp" id="temp"></bar-chart>
@@ -70,6 +70,9 @@
                        </el-tab-pane>
                        <el-tab-pane label="均衡电流" name="curr">
                            <bar-chart ref="curr" id="curr"></bar-chart>
                        </el-tab-pane>
                        <el-tab-pane label="数据表格" name="tblData">
                            数据表格
                        </el-tab-pane>
                    </el-tabs>
                </div>
@@ -83,6 +86,7 @@
import MyElTree from '../../components/MyElTree'
import BarChart from '../../components/chart/BarChart'

let vol, res, temp, conduct, curr;
export default {
    components: {
        ContentBox,
@@ -92,7 +96,7 @@
    data() {
        return {
            battFullName: '电池组全称',
            acTabs: 'eleLine',
            acTabs: 'vol',
            data: []
        }
    },
@@ -103,13 +107,134 @@
            });
        },
        toggleChange() {
            this.resize();
        },
        resize() {
            this.$G.chartManage.resize(this.acTabs);
        },
        initChart() {

            // 电压
            vol = {
                title: {
                    show: true,
                    text: '最大值=0V;最小值=0V;平均值=0V;累加和=0V',
                    x: 'center',
                    textStyle: {
                        fontSize: '14',
                    }
                },
                series: [
                    {
                        name: '电压',
                        type: 'bar',
                        data: [
                            ["#1", 2.2],
                            ["#2", 2.3],
                            ["#3", 2.9],
                            ["#4", 2.8],
                        ]
                    }
                ]
            };

            // 内阻
            res = {
                title: {
                    show: true,
                    text: '最大值=0mΩ;最小值=mΩ;平均值=0mΩ',
                    x: 'center',
                    textStyle: {
                        fontSize: '14',
                    }
                },
                series: [
                    {
                        name: '内阻',
                        type: 'bar',
                        data: []
                    }
                ]
            };

            // 温度
            temp = {
                title: {
                    show: true,
                    text: '最大值=0℃;最小值=0℃;平均值=0℃',
                    x: 'center',
                    textStyle: {
                        fontSize: '14',
                    }
                },
                series: [
                    {
                        name: '温度',
                        type: 'bar',
                        data: [],
                    }
                ]
            };
            
            // 电导
            conduct = {
                title: {
                    show: true,
                    text: '最大值=0;最小值=0;平均值=0',
                    x: 'center',
                    textStyle: {
                        fontSize: '14',
                    }
                },
                series: [
                    {
                        name: '电导',
                        type: 'bar',
                        data: []
                    }
                ]
            };
            // 均衡电流
            curr = {
                title: {
                    show: true,
                    text: '最大值=0mA;最小值=0mA;平均值=0mA',
                    x: 'center',
                    textStyle: {
                        fontSize: '14',
                    }
                },
                series: [
                    {
                        name: '均衡电流',
                        type: 'bar',
                        data: []
                    }
                ]
            };
            // 设置配置项
            this.setChart();
        },
        setChart() {
            this.$refs.vol.setOption(vol);
            this.$refs.res.setOption(res);
            this.$refs.temp.setOption(temp);
            this.$refs.conduct.setOption(conduct);
            this.$refs.curr.setOption(curr);
        }
    },
    mounted() {
        // 初始化图表
        this.initChart();
        
        this.$nextTick(()=>{
            this.$G.chartManage.resize(this.acTabs);
        });

        // 屏幕缩放时触发
        window.addEventListener('resize', ()=>{
            this.resize();
        });
    }
}
</script>