内容提交

whychdw

2020-08-20 0c27b388038adb3ca60be434dae857e62f1f7a0e

内容提交

 src/assets/css/basic.css

@@ -1,6 +1,6 @@
/*basic.css - Written by douchaoyang in September 2015*/
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}
body,button,input,select,textarea{font-family:"Microsoft Yahei",arial;}
body,button,input,select,textarea{font-size: 16px; font-family:"Microsoft Yahei",arial;}
body {
    overflow: hidden;
}

 src/assets/css/common.css

New file
@@ -0,0 +1,22 @@
/* padding */
.pt4 {
    padding-top: 4px;
}
/* wdith */
.w80 {
    width: 80px;
}
/* table layout */
.table-layout {
    width: 100%;
    display: table;
}
.table-layout .table-row {
    display: table-row;
}
.table-row .table-cell {
    display: table-cell;
}
.table-cell.text-right {
    text-align: right;
}

 src/assets/css/m-elementui.css

@@ -1,3 +1,6 @@
.flex-layout.el-tabs {
    box-sizing: border-box;
}
.flex-layout .el-tabs__content {
    flex: 1;
    padding: 0;

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

@@ -83,4 +83,11 @@
}
.el-science-blue .el-tree .el-tree-node.is-current>.el-tree-node__content{
    background-color: #499ca1;
}

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

 src/components/ContentBox.vue

@@ -51,8 +51,12 @@
    },
    methods: {
        toggleChange() {
            console.log(this.hide);
            this.hide = this.hide?false:true;
            this.$nextTick(()=>{
                setTimeout(()=>{
                    this.$emit('toggleChange', this.hide);
                }, 600);
            });
        }
    },
    computed: {

 src/components/chart/BarChart.vue

@@ -0,0 +1,137 @@
<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/bar";
//引入提示框
import "echarts/lib/component/tooltip";
//引入标题
import "echarts/lib/component/title";
//引入图例标志
import "echarts/lib/component/legend";
//区域缩放
import "echarts/lib/component/dataZoom";

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

export default {
    props: {
        id: {
            type: String,
            required: true,
        }
    },
    methods:{
        setOption(opt) {
            // 整体配置项
            let option = {
                animation: false,
                color: this.getColor(opt),
                title: this.getTitle(opt),
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
                    },
                },
                grid: {
                    left: '1%',
                    right: '1%',
                    bottom: '1%',
                    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 max;
                        }
                    }
                ],
                series: []
            };
            // 设置配置项
            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=>{
                item.type="bar";
                return item;
            });

            // 返回
            return series;
        }
    },
    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/components/chart/PieChart.vue

@@ -72,9 +72,7 @@
        getSeries(opt) {    // 设置series
            // 未配置series
            if(!opt || !opt.series) {
                return {
                    show: false,
                };
                return [];
            }

            // 设置配置项

 src/components/chart/theme/transparent.js

@@ -55,7 +55,7 @@
      }
    },
    axisLabel: {
      show: false,
      show: true,
      textStyle: {
        color: contrastColor
      }

 src/main.js

@@ -7,6 +7,7 @@
import "./assets/css/theme/science-blue.css"
import './components'
import './assets/css/basic.css'
import './assets/css/common.css'
import './assets/js/unCtrl'

import G from './global'

 src/pages/dataTest/realTime.vue

@@ -1,82 +1,115 @@
<template>
    <flex-layout direction="row" class="page-real-time">
        <content-box title="站点列表" 
        slot="header" style="width:320px">
        slot="header"
        toggle
        @toggleChange="toggleChange" 
        style="width:320px">
            <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-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>
                </div>
                <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>
                        <el-tab-pane label="电压" name="vol">
                            <bar-chart ref="vol" id="vol"></bar-chart>
                        </el-tab-pane>
                        <el-tab-pane label="内阻" name="res">
                            <bar-chart ref="res" id="res"></bar-chart>
                        </el-tab-pane>
                        <el-tab-pane label="温度" name="temp">
                            <bar-chart ref="temp" id="temp"></bar-chart>
                        </el-tab-pane>
                        <el-tab-pane label="电导" name="conduct">
                            <bar-chart ref="conduct" id="conduct"></bar-chart>
                        </el-tab-pane>
                        <el-tab-pane label="均衡电流" name="curr">
                            <bar-chart ref="curr" id="curr"></bar-chart>
                        </el-tab-pane>
                    </el-tabs>
                </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 {
            data: [
                {
                    id: '湖北省',
                    label: '湖北省',
                    children: [
                        {
                            id: '湖北省-武汉市',
                            label: '武汉市',
                            children: [
                                {
                                    id: '湖北省-武汉市-东西湖区',
                                    label: '东西湖区',
                                    children: [
                                        {
                                            id: '湖北省-武汉市-东西湖区-测试机房',
                                            label: '测试机房',
                                            children: [
                                                {
                                                    id: '湖北省-武汉市-东西湖区-测试机房-电池组1',
                                                    label: '电池组1',
                                                }
                                            ]
                                        }
                                    ]
                                },
                            ]
                        }
                    ]
                },
                {
                    id: '河南省',
                    label: '河南省',
                    children: [
                        {
                            id: '河南省-驻马店市',
                            label: '驻马店市',
                            children: [
                                {
                                    id: '河南省-驻马店市-驿城区',
                                    label: '驿城区',
                                    children: [
                                        {
                                            id: '河南省-驻马店市-驿城区-测试机房',
                                            label: '测试机房',
                                            children: []
                                        }
                                    ]
                                },
                            ]
                        }
                    ]
                }
            ]
            battFullName: '电池组全称',
            acTabs: 'eleLine',
            data: []
        }
    },
    methods: {
        tabClick(tab) {
            this.$nextTick(()=>{
                this.$G.chartManage.resize(tab.name);
            });
        },
        toggleChange() {
            this.$G.chartManage.resize(this.acTabs);
        }
    },
    mounted() {
        
        this.$nextTick(()=>{
            this.$G.chartManage.resize(this.acTabs);
        });
    }
}
</script>
@@ -85,6 +118,18 @@
.page-real-time {
    color: #FFFFFF;
}
.table-cell.text-right {
    font-size: 14px;
}
.table-row .table-cell {
    padding-top: 12px;
}
.page-content {
    padding-top: 8px;
    padding-bottom: 2px;
    box-sizing: border-box;
    height: 100%;
}
</style>