内容修改

whychdw

2019-08-14 09ee8ba8526e93010a408611e7a812369ea6fe60

内容修改

 package-lock.json

@@ -3924,6 +3924,14 @@
        "safer-buffer": "^2.1.0"
      }
    },
    "echarts": {
      "version": "4.2.1",
      "resolved": "https://registry.npmjs.org/echarts/-/echarts-4.2.1.tgz",
      "integrity": "sha512-pw4xScRPsLegD/cqEcoXRKeA2SD4+s+Kyo0Na166NamOWhzNl2yI5RZ2rE97tBlAopNmhyMeBVpAeD5qb+ee1A==",
      "requires": {
        "zrender": "4.0.7"
      }
    },
    "ee-first": {
      "version": "1.1.1",
      "resolved": "http://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz",
@@ -11676,6 +11684,11 @@
          "dev": true
        }
      }
    },
    "zrender": {
      "version": "4.0.7",
      "resolved": "https://registry.npmjs.org/zrender/-/zrender-4.0.7.tgz",
      "integrity": "sha512-TNloHe0ums6zxbHfnaCryM61J4IWDajZwNq6dHk9vfWhhysO/OeFvvR0drBs/nbXha2YxSzfQj2FiCd6RVBe+Q=="
    }
  }
}

 package.json

@@ -9,6 +9,7 @@
  },
  "dependencies": {
    "core-js": "^2.6.5",
    "echarts": "^4.2.1",
    "iview": "^3.4.2",
    "jquery": "^3.4.1",
    "vue": "^2.6.10",

 src/App.vue

@@ -38,8 +38,8 @@
    <div class="science-content">
      <Row>
        <i-col span="24">
          <Tabs type="card" v-model="activeName" @on-tab-remove="handlerTabRemove">
            <TabPane label="首页" name="home" key="home">
          <Tabs type="card" v-model="activeName" @on-tab-remove="handlerTabRemove" name="mainTabs">
            <TabPane label="首页" name="home" key="home" tab="mainTabs">
              <div class="page-view">
                <router-view></router-view>
              </div>
@@ -48,7 +48,8 @@
            v-for="tab in tabs" 
            :key="tab.name"  
            :label="tab.label" 
            :name="tab.name"></h-tab-pane>
            :name="tab.name"
            tab="mainTabs"></h-tab-pane>
          </Tabs>
        </i-col>
      </Row>

 src/assets/css/common.css

@@ -202,3 +202,16 @@
.ivu-tree .ivu-tree-empty {
    text-align: center;
}
/* ivu-tabs */
.ivu-tabs .ivu-tabs-bar {
    border-bottom: 1px solid #468FB6;
}
.ivu-tabs-yellow .ivu-tabs-nav {
    color: #468FB6;
}
.ivu-tabs-yellow .ivu-tabs-nav .ivu-tabs-tab-active {
    color: #ff9900;
}
.ivu-tabs-yellow .ivu-tabs-ink-bar {
    background-color: #ff9900;
}

 src/assets/images/ob_line_left.gif

 src/assets/images/ob_line_right.gif

 src/components/BarChart.vue

New file
@@ -0,0 +1,202 @@
<template>
    <div class="bar-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'
        },
        'showValue': {
            type: Boolean,
            default: true,
        },
        range:{
            type: Object,
            default(range) {
                var result = {
                    min: 0,
                    minFlag: false,
                    max: 1,
                    maxFlag: false,
                };
                return result;
            }
        },
        colors:{
            type: Object,
            default(option) {
                var defaults = {
                    normal: '#5cadff',
                    max: '#19be6b',
                    min: '#ed4014',
                };
                var colors = {};
                if(option) {
                    colors = $.extend({}, defaults, option);
                }else {
                    colors = defaults;
                }
                return colors;
            }
        }
    },
    data() {
        return {
            graph: '',
            style: {
                width: this.width,
                height: this.height,
            },
            option: {}, 
        }
    },
    methods: {
        setOption: function(opt) {
            var defaults = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '1%',
                    right: '1%',
                    bottom: '1%',
                    containLabel: true
                },
                textStyle: {
                    color: "#FFFFFF"
                },
                xAxis: {
                    type: 'category',
                    axisLine: {
                        lineStyle: {
                            color: "#FFFFFF"
                        }
                    },
                    data: []
                },
                yAxis: {
                    type: 'value',
                    min: 0,
                    max: 1,
                    axisLine: {
                        lineStyle: {
                            color: "#FFFFFF"
                        }
                    },
                    splitLine: {
                        show: false
                    }
                },
                series: []
            };
            this.option = $.extend(true, {}, defaults, opt);

            // 设置图谱显示范围
            this._setRange();

            // 设置文本
            this._setLabel();

            // 设置柱状图的颜色
            this._setColor();
            this.graph.setOption(this.option);
            this.graph.resize();
        },
        _setRange: function() {     // 设置范围
            var option = this.option;
            var series = option.series;
            // option的最值进行处理
            if(series.length == 0 || series[0].data.length == 0) {
                option.yAxis.min = 0;
                option.yAxis.max = 1;
            }else {
                var data = series[0].data;
                var min = getMinFromArr(data);
                var max = getMaxFromArr(data);
                // 设置最小值
                if(this.range.minFlag == false || this.range.min == undefined) {
                    min = Math.floor(min*0.09);
                }else {
                    min = this.range.min>min?Math.floor(min*0.1):this.range.min;
                }

                // 设置最大值
                if(this.range.maxFlag == false || this.range.max == undefined) {
                    max = Math.ceil(max*1.1);
                }else {
                   max= this.range.max<max?Math.ceil(max*1.1):this.range.max;
                }
                option.yAxis.min = min;
                option.yAxis.max = max;
            }
        },
        _setColor: function() {     // 设置颜色
            var option = this.option;
            var colors = this.colors;
            var series = option.series[0];
            if(series) {
                var data = series.data;
                if(series.itemStyle == undefined) {
                    series.itemStyle = {};
                    series.itemStyle.normal = {};
                }
                var maxflag = true;
                var minflag = true;
                series.itemStyle.normal.color = function setColor(value) {
                    var min = getMinFromArr(data);
                    var max = getMaxFromArr(data);
                    if(value.value==max) {
                        return colors.max;
                    }else if(value.value == min) {
                        return colors.min;
                    }else {
                        return colors.normal;
                    }
                };
            }
        },
        _setLabel: function() {
            var option = this.option;
            var series = option.series[0];
            if(series) {
                if(series.itemStyle == undefined) {
                    series.itemStyle = {};
                    series.itemStyle.normal = {};
                }
                series.itemStyle.normal.label = {
                    show: this.showValue,
                    position: 'top'
                };
            }
        },
        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.graph.setOption({});
    },
}
</script>
<style scoped>
    
</style>

 src/components/ContentTitle.vue

New file
@@ -0,0 +1,41 @@
<template>
    <div class="content-title">
        <div class="content-title-container">
            <div class="ob_img"><img src="../assets/images/ob_line_left.gif"></div>
            <div class="content-title-text">测点信息</div>
            <div class="ob_img"><img src="../assets/images/ob_line_right.gif"></div>
        </div>
    </div>
</template>
<script>
export default {
    
}
</script>
<style scoped>
    .content-title {
        text-align: center;
    }
    .content-title-container {
        display: inline-block;
    }
    .ob_img {
        display: inline-block;
        position: relative;
    }
    .ob_img img {
        position:absolute;
        bottom: 0;
        width: 10px;
        height: 10px;
    }
    .content-title-text {
        display: inline-block;
        padding-left: 16px;
        padding-right: 16px;
        font-size: 16px;
        font-weight: bold;
        color: #468FB6;
        border-bottom: 1px solid #468FB6;
    }
</style>

 src/components/HTabPane.vue

@@ -1,5 +1,5 @@
<template>
    <TabPane :label="label" closable :name="name">
    <TabPane :label="label" closable :name="name" :tab="tab">
        <div class="page-view">
            <router-view :name="name"></router-view>
        </div>
@@ -16,6 +16,10 @@
            type: String,
            required: true
        },
        tab: {
            type: String,
            default: ''
        }
    }
}
</script>

 src/components/SquareBox.vue

New file
@@ -0,0 +1,146 @@
<template>
    <div class="square-box">
        <div class="square-box-mask"></div>
        <!-- 左上 -->
        <div class="square-box-left-top"></div>
        <div class="square-box-left-top-tip"></div>
        <!-- 右下 -->
        <div class="square-box-right-bottom"></div>
        <div class="square-box-right-bottom-tip"></div>
        <!-- 右上 -->
        <div class="square-box-right-top"></div>
        <!-- 左下 -->
        <div class="square-box-left-bottom"></div>
        <div class="square-box-container">
            <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>
    </div>
</template>
<script>
export default {
    props: {
        minHeight: {
            type: String,
            default: '200px'
        },
        icon:{
            type: String,
            default: 'ios-help-buoy'
        },
        title: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            style: {
                minHeight: this.minHeight
            }
        }
    }
}
</script>
<style scoped>
    .square-box::before {
        content: "";
        overflow: hidden;
    }
    .square-box {
        position: relative;
    }
    .square-box-mask {
        position: absolute;
        left: 0;
        top:0;
        right: 0;
        bottom:0;
        z-index: -1;
        background-color: #22304F;
        opacity: .5;
    }
    .square-box-container {
        position: relative;
        padding: 1px;
    }
    .square-box-content {
       margin: 15px;
    }
    .square-box-left-top {
        position: absolute;
        left: 0;
        top: 0;
        width: 28px;
        height: 28px;
        border-top: 1px solid #37779B;
        border-left: 1px solid #37779B;
        z-index: 0;
    }
    .square-box-left-top-tip {
        position: absolute;
        left: 2px;
        top: 2px;
        width: 0;
        height: 0;
        border-width: 6px;
        border-style: solid;
        border-color: transparent;
        border-top-color: #37779B;
        border-left-color: #37779B;
        z-index: 0;
    }
    .square-box-right-bottom {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 28px;
        height: 28px;
        border-right: 1px solid #37779B;
        border-bottom: 1px solid #37779B;
        z-index: 0;
    }
    .square-box-right-bottom-tip {
        position: absolute;
        right: 2px;
        bottom: 2px;
        width: 0;
        height: 0;
        border-width: 6px;
        border-style: solid;
        border-color: transparent;
        border-right-color: #37779B;
        border-bottom-color: #37779B;
        z-index: 0;
    }
    .square-box-right-top {
        position: absolute;
        right: 0;
        top: 0;
        width: 14px;
        height: 14px;
        border-right: 1px solid #37779B;
        border-top: 1px solid #37779B;
        z-index: 0;
    }
    .square-box-left-bottom {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 14px;
        height: 14px;
        border-left: 1px solid #37779B;
        border-bottom: 1px solid #37779B;
        z-index: 0;
    }
    .square-box-title {
        color: #438FB0;
        font-size: 22px;
    }
    .square-box-title-text {
        margin-left: 8px;
        font-size: 16px;
    }
</style>

 src/views/index.vue

@@ -1,6 +1,6 @@
<template>
    <div class="view-root">
        <iframe width="100%" height=600 src="http://www.thingjs.com/guide/sampleindex.html?m=Q-2C78AAA471978BB64C07451E1D4FF569/1902802113si54yere190280222.js?n=819"></iframe>
        
    </div>
</template>
<script>

 src/views/monitor/history.vue

@@ -8,7 +8,11 @@
                    </science-card>
                </div>
                <div class="view-layout-right">
                    <science-card width="100%" height="100%"></science-card>
                    <science-card width="100%" height="100%">
                        <square-box style="margin: 8px" minHeight="400px">
                            
                        </square-box>
                    </science-card>
                </div>
            </div>
        </div>
@@ -17,10 +21,12 @@
<script>
import ScienceCard from '../../components/ScienceCard'
import HomeTree from "../../components/HomeTree"
import SquareBox from "../../components/SquareBox"
export default {
    components: {
        ScienceCard,
        HomeTree
        HomeTree,
        SquareBox
    },
    methods: {
        handlerSelectChange: function(item) {

 src/views/monitor/realTime.vue

@@ -8,7 +8,72 @@
                    </science-card>
                </div>
                <div class="view-layout-right">
                    <science-card width="100%" height="100%"></science-card>
                    <science-card width="100%" height="100%">
                        <square-box style="margin: 8px" title="实时图谱" icon="ios-podium">
                            <Tabs value="monVolBar" class="ivu-tabs-yellow" name="controlTabs">
                                <TabPane label="电压" name="monVolBar" tab="controlTabs">
                                    <bar-chart height="400px" ref="monVolBar" :show-value=true :range="{'min': 40,'max': 60}"></bar-chart>
                                </TabPane>
                                <TabPane label="内阻" name="name2" tab="controlTabs">
                                    内阻
                                </TabPane>
                                <TabPane label="温度" name="name3" tab="controlTabs">
                                    温度
                                </TabPane>
                                <TabPane label="电导" name="name4" tab="controlTabs">
                                    电导
                                </TabPane>
                                <TabPane label="均衡电流" name="name5" tab="controlTabs">
                                    均衡电流
                                </TabPane>
                            </Tabs>
                        </square-box>
                        <table style="width: 100%; vertical-algin: top">
                            <tr>
                                <td style="width: 500px;" valign="top">
                                    <square-box style="margin: 8px" minHeight="250px" title="机房基础信息">
                                        <table style="color: #468FB6">
                                            <tr>
                                                <td>电池状态：</td>
                                                <td>浮充(开关闭合)</td>
                                            </tr>
                                            <tr>
                                                <td>组端电压：</td>
                                                <td>在线:53.12V;组端:53.12V</td>
                                            </tr>
                                            <tr>
                                                <td>电池电流：</td>
                                                <td>0.30A</td>
                                            </tr>
                                            <tr>
                                                <td>更新日期：</td>
                                                <td>2019-08-12 14:37:24</td>
                                            </tr>
                                            <tr>
                                                <td>测试时长：</td>
                                                <td>00:02:01</td>
                                            </tr>
                                            <tr>
                                                <td>测试容量：</td>
                                                <td>-0.4AH</td>
                                            </tr>
                                            <tr>
                                                <td>剩余容量：</td>
                                                <td>137.7AH</td>
                                            </tr>
                                            <tr>
                                                <td>续航时长：</td>
                                                <td>------</td>
                                            </tr>
                                        </table>
                                    </square-box>
                                </td>
                                <td valign="top">
                                    <square-box style="margin: 8px" minHeight="250px" title="图谱数据信息" icon="md-grid"></square-box>
                                </td>
                            </tr>
                        </table>
                    </science-card>
                </div>
            </div>
        </div>
@@ -17,16 +82,42 @@
<script>
import ScienceCard from '../../components/ScienceCard'
import HomeTree from "../../components/HomeTree"
import ContentTitle from "../../components/ContentTitle"
import BarChart from "../../components/BarChart"
import {ajax} from "../../libs/common"
import $ from 'jquery'
import echarts from "echarts"
import SquareBox from "../../components/SquareBox"
import { setTimeout } from 'timers';
export default {
    components: {
        ScienceCard,
        HomeTree
        HomeTree,
        SquareBox,
        ContentTitle,
        BarChart,
    },
    data() {
        return {
            batt: {},       // 电池组信息
            alarmlist: []   // 电池告警参数
            alarmlist: [],   // 电池告警参数
            option: {
                xAxis: {
                    type: 'category',
                    data: ['#1', '#2', '#3', '#4', '#5', '#5', '#6']
                },
                yAxis: {
                    type: 'value',
                    name: '单位(V)',
                    min: 0,
                    max: 1500
                },
                series: [{
                    name: '电压',
                    type: 'bar',
                    data: [52.3, 10, 40.6, 38.9,  55.6, 54.5, 55.6]
                }]
            }
        }
    },
    methods: {
@@ -71,6 +162,9 @@
            }
            return new Object();
        }
    },
    mounted: function() {
        this.$refs['monVolBar'].setOption(this.option);
    }
}
</script>