添加信息显示页面

whychdw

2019-07-25 784ec36c5dfea729429fa1b8ea1b1110cbaccbe7

添加信息显示页面

 src/components/LineGraph.vue

@@ -12,6 +12,7 @@
</template>
<script>
import echarts from 'echarts';
import darkColor from '../libs/echarts/theme/dark-color';
import $ from 'jquery';
import {
    getMaxFromArr,      // 从数组中获取最大值
@@ -74,6 +75,9 @@
                    break;
                    case 'roma':
                        result = 'roma';
                    break;
                    case 'dark-color':
                        result="dark-color";
                    break;
                    default:
                        result = 'macarons';
@@ -172,6 +176,7 @@
        }
    },
    mounted: function() {
        echarts.registerTheme('dark-color', darkColor);
        var _self = this;
        var option = this.option;
        var theme = this.theme;

 src/components/MainMenu.vue

@@ -83,7 +83,7 @@
                        },
                        {
                           txt: '信息显示',
                            url: '#',
                            url: '/monitor/info',
                            active: false 
                        }
                    ] 

 src/libs/common.css

@@ -94,4 +94,20 @@
::-webkit-scrollbar-thumb{/*滚动条里面的小方块*/
    background: rgba(0, 0, 0, .30);
    border-radius: 50px;
}

.echarts-dark {
    /* '#dd6b66', '#759aa0', '#e69d87', '#8dc1a9', '#ea7e53',
    '#eedd78', '#73a373', '#73b9bc', '#7289ab', '#91ca8c', '#f49f42' */
    color: #dd6b66;
    color: #759aa0;
    color: #e69d87;
    color: #8dc1a9;
    color: #ea7e53;
    color: #eedd78;
    color: #73a373;
    color: #73b9bc;
    color: #7289ab;
    color: #91ca8c;
    color: #f49f42;
}

 src/libs/echarts/theme/dark-color.js

New file
@@ -0,0 +1,152 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements.  See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership.  The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License.  You may obtain a copy of the License at
*
*   http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied.  See the License for the
* specific language governing permissions and limitations
* under the License.
*/

var contrastColor = '#003E1F';
var axisCommon = function () {
    return {
        axisLine: {
            lineStyle: {
                color: contrastColor
            }
        },
        axisTick: {
            lineStyle: {
                color: contrastColor
            }
        },
        axisLabel: {
            textStyle: {
                color: contrastColor
            }
        },
        splitLine: {
            lineStyle: {
                color: contrastColor
            }
        },
        splitArea: {
            areaStyle: {
                color: contrastColor
            }
        }
    };
};

var colorPalette = [
    '#7289ab','#dd6b66', '#759aa0', '#e69d87', '#8dc1a9', '#ea7e53',
    '#eedd78', '#73a373', '#73b9bc', '#91ca8c', '#f49f42'
];
var theme = {
    color: colorPalette,
    backgroundColor: '#000000',
    tooltip: {
        axisPointer: {
            lineStyle: {
                color: contrastColor
            },
            crossStyle: {
                color: contrastColor
            }
        }
    },
    legend: {
        textStyle: {
            color: colorPalette[0]
        }
    },
    textStyle: {
        color: contrastColor
    },
    title: {
        textStyle: {
            color: colorPalette[0]
        }
    },
    toolbox: {
        iconStyle: {
            normal: {
                borderColor: contrastColor
            }
        }
    },
    dataZoom: {
        textStyle: {
            color: contrastColor
        }
    },
    visualMap: {
        textStyle: {
            color: contrastColor
        }
    },
    timeline: {
        lineStyle: {
            color: contrastColor
        },
        itemStyle: {
            normal: {
                color: colorPalette[3]
            }
        },
        label: {
            normal: {
                textStyle: {
                    color: contrastColor
                }
            }
        },
        controlStyle: {
            normal: {
                color: contrastColor,
                borderColor: contrastColor
            }
        }
    },
    timeAxis: axisCommon(),
    logAxis: axisCommon(),
    valueAxis: axisCommon(),
    categoryAxis: axisCommon(),

    line: {
        symbol: 'circle'
    },
    graph: {
        color: colorPalette
    },
    gauge: {
        title: {
            textStyle: {
                color: contrastColor
            }
        }
    },
    candlestick: {
        itemStyle: {
            normal: {
                color: '#FD1050',
                color0: '#0CF49B',
                borderColor: '#FD1050',
                borderColor0: '#0CF49B'
            }
        }
    }
};
theme.categoryAxis.splitLine.show = false;
//echarts.registerTheme('dark-color', theme);
export default theme;

 src/router.js

@@ -49,6 +49,13 @@
                    title: '通道选择'
                },
                component: (resolve) => require(['./views/monitor/channel-select.vue'], resolve)
            },
            {
                path: 'info',
                meta: {
                    title: '信息显示'
                },
                component: (resolve) => require(['./views/monitor/info-display.vue'], resolve)
            }
        ]
    }

 src/views/monitor/info-display.vue

New file
@@ -0,0 +1,114 @@
<template>
    <div class="component-container">
        <Row>
            <i-col :xl="14" :xxl="17" span="10">
                1
            </i-col>
            <i-col :xl="10" :xxl="7" span="14">
                <divider-card title="输入数据" style="margin-right:16px;">
                    <div class="card-content">
                        <div class="content-item">
                            <span class="mrr16">IN1</span>
                            <span class="mrr8">直流输入</span>
                            <radius-input></radius-input> V 
                            <radius-input></radius-input> A
                        </div>
                        <div class="content-item mrt8">
                            <span class="mrr16">IN2</span>
                            <span class="mrr8">交流输入</span>
                            <radius-input></radius-input> V 
                            <radius-input></radius-input> A
                        </div>
                        <div class="content-item mrt8">
                            <span class="mrr16">IN3</span>
                            <span class="mrr8">直流输入</span>
                            <radius-input></radius-input> V 
                            <radius-input></radius-input> A
                        </div>
                        <div class="content-item mrt8">
                            <span class="mrr16">IN4</span>
                            <span class="mrr8">直流输入</span>
                            <radius-input></radius-input> V 
                            <radius-input></radius-input> A
                        </div>
                    </div>
                </divider-card>
                <divider-card title="输出数据" style="margin-right:16px;margin-top:30px;">
                    <div class="card-content">
                        <div class="content-item">
                            <span class="mrr16">OUT1</span>
                            <span class="mrr8">直流输入</span>
                            <radius-input></radius-input> V 
                            <radius-input></radius-input> A
                        </div>
                        <div class="content-item mrt8">
                            <span class="mrr16">OUT2</span>
                            <span class="mrr8">交流输入</span>
                            <radius-input></radius-input> V 
                            <radius-input></radius-input> A
                        </div>
                        <div class="content-item mrt8">
                            <span class="mrr16">OUT3</span>
                            <span class="mrr8">直流输入</span>
                            <radius-input></radius-input> V 
                            <radius-input></radius-input> A
                        </div>
                        <div class="content-item mrt8">
                            <span class="mrr16">OUT4</span>
                            <span class="mrr8">直流输入</span>
                            <radius-input></radius-input> V 
                            <radius-input></radius-input> A
                        </div>
                    </div>
                </divider-card>
                <divider-card title="采集数据" style="margin-right:16px;margin-top:30px;">
                    <div class="card-content">
                        <div class="content-item">
                            <span class="mrr16">sens1</span>
                            <span class="mrr8">电压量</span>
                            <span class="hidden">占</span>
                            <radius-input></radius-input> V 
                            <radius-input></radius-input> A
                        </div>
                        <div class="content-item mrt8">
                            <span class="mrr16">sens2</span>
                            <span class="mrr8">开关量</span>
                            <span class="hidden">占</span>
                            <radius-input></radius-input> V 
                            <radius-input></radius-input> A
                        </div>
                        <div class="content-item mrt8">
                            <span class="mrr16">sens3</span>
                            <span class="mrr8">信号波形</span>
                            <radius-input></radius-input> V 
                            <radius-input></radius-input> A
                        </div>
                        <div class="content-item mrt8">
                            <span class="mrr16">sens4</span>
                            <span class="mrr8">通信</span>
                            <span class="hidden">占位</span>
                            <radius-input></radius-input> V 
                            <radius-input></radius-input> A
                        </div>
                    </div>
                </divider-card>
            </i-col>
        </Row>
    </div>
</template>
<script>
import DividerCard from '../../components/DividerCard';
import RadiusInput from '../../components/RadiusInput';
export default {
    components:{
        DividerCard,
        RadiusInput
    },
}
</script>
<style scoped>
    .card-content .content-item{
        font-size: 16px;
        text-align: center;
    }
</style>

 src/views/monitor/process.vue

@@ -6,16 +6,16 @@
                    <line-graph class="h300 bg-white"
                    ref="processLine1"
                    unit=""
                    min="0"
                    max="100"
                    theme="dark"
                    title="测试折线"></line-graph>
                    min="-10"
                    max="10"
                    theme="dark-color"
                    title="测试折线1"></line-graph>
                    <line-graph class="h300 bg-white"
                    ref="processLine2"
                    unit=""
                    min="0"
                    max="100"
                    theme="dark"
                    theme="dark-color"
                    title="测试折线2"></line-graph>
                </h-card>
            </i-col>
@@ -122,6 +122,31 @@
        DividerCard,
        HCard,
        RadiusInput 
    },
    methods:{
        setProcessLine: function() {
            var processLine1Opt = {
                xAxis: {
                        data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
                    },
                    series: {
                        data: [0,2,0,-2,0,2,0,-2,0,2,0]
                    }
            };

            this.$refs['processLine1'].setOption(processLine1Opt);
        },
        resize: function() {
            this.$refs['processLine1'].resize();
            this.$refs['processLine2'].resize();
        }
    },
    mounted: function() {
        var _self = this;
        this.setProcessLine();
        window.onresize = function() {
           _self.resize();  
        }
    }
}
</script>