ld9修改

whychdw

2019-08-06 7bee6da73493c1704d21fe3c227821d305793154

ld9修改

 package-lock.json

@@ -6683,6 +6683,11 @@
      "integrity": "sha1-FC0RHzpuPa6PSpr9d9RYVbWpzOM=",
      "dev": true
    },
    "jquery": {
      "version": "3.4.1",
      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.4.1.tgz",
      "integrity": "sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw=="
    },
    "js-calendar": {
      "version": "1.2.3",
      "resolved": "https://registry.npmjs.org/js-calendar/-/js-calendar-1.2.3.tgz",

 package.json

@@ -10,6 +10,7 @@
  "dependencies": {
    "core-js": "^2.6.5",
    "iview": "^3.4.2",
    "jquery": "^3.4.1",
    "vue": "^2.6.10",
    "vue-router": "^3.0.7"
  },

 src/App.vue

@@ -38,55 +38,40 @@
    <div class="science-content">
      <Row>
        <i-col span="24">
          <Tabs type="card">
            <TabPane label="首页">
          <Tabs type="card" v-model="activeName" @on-tab-remove="handlerTabRemove">
            <TabPane label="首页" name="home" key="home">
              <div class="page-view">
                <router-view></router-view>
              </div>
            </TabPane>
            <h-tab-pane 
            v-for="tab in tabs" 
            :key="tab.name"  
            :label="tab.label" 
            :name="tab.name"></h-tab-pane>
          </Tabs>
        </i-col>
      </Row>
    </div>
    <Drawer :closable="false" placement="left" v-model="menu" class="main-menu">
        <Menu theme="dark" active-name="1-2" :open-names="['1']" width="auto" style="height:100vh">
          <Submenu name="1">
        <Menu theme="dark" :active-name="activeName" width="auto" style="height:100vh" @on-select="handlerMenuSelect">
          <MenuItem name="home">
              <Icon type="md-home"/>
              首页
          </MenuItem>
          <Submenu v-for="item in menus" :key="item.name" :name="item.name">
            <template slot="title">
                <Icon type="ios-paper" />
                内容管理
                <Icon :type="item.icon" />
                {{ item.label }}
            </template>
            <MenuItem name="1-1">文章管理</MenuItem>
            <MenuItem name="1-2">评论管理</MenuItem>
            <MenuItem name="1-3">举报管理</MenuItem>
          </Submenu>
          <Submenu name="2">
              <template slot="title">
                  <Icon type="ios-people" />
                  用户管理
              </template>
              <MenuItem name="2-1">新增用户</MenuItem>
              <MenuItem name="2-2">活跃用户</MenuItem>
          </Submenu>
          <Submenu name="3">
              <template slot="title">
                  <Icon type="ios-stats" />
                  统计分析
              </template>
              <MenuGroup title="使用">
                  <MenuItem name="3-1">新增和启动</MenuItem>
                  <MenuItem name="3-2">活跃分析</MenuItem>
                  <MenuItem name="3-3">时段分析</MenuItem>
              </MenuGroup>
              <MenuGroup title="留存">
                  <MenuItem name="3-4">用户留存</MenuItem>
                  <MenuItem name="3-5">流失用户</MenuItem>
              </MenuGroup>
            <MenuItem 
            v-for="children in item.children" 
            :key="children.name" :name="children.name">{{ children.label }}</MenuItem>
          </Submenu>
        </Menu>
    </Drawer>
  </div>
</template>

<script>
import HeaderDecorateLeft from './components/HeaderDecorateLeft'
import HeaderDecorateRight from './components/HeaderDecorateRight'
@@ -100,7 +85,77 @@
  },
  data() {
    return {
      menu: false
      menu: false,
      activeName: 'home',
      menus: [
        {
          label: '监测数据',
          name: 'monitorData',
          icon: 'ios-videocam',
          children: [
            {
              label: '实时-监测数据',
              name: 'monitor/real'
            },
            {
              label: '历史-测试数据',
              name: 'monitor/history'
            }
          ]
        }
      ],
      tabs: []
    }
  },
  methods: {
    handlerMenuSelect: function(name) {
      if(name) {
        this.activeName = name;   // 设置激活页面的名称
        this.menu = false;        // 关闭抽屉
        if(name == 'home') {      // 页面为首页时操作
          return;
        }
        var menuInfo = this.getMenuInfo(name);  // 获取菜单的信息
        if(!this.checkTabs(name)) {   // 菜单不在选项卡中
          this.tabs.push(menuInfo);   // 将菜单添加到选择项卡中
        }
      }
    },
    getMenuInfo: function(name) {
      var result = {};
      for(var i=0; i<this.menus.length; i++) {
        var menu = this.menus[i];
        var childrens = menu.children;
        for(var k=0;k<childrens.length; k++) {
          var children = childrens[k];
          if(children.name == name) {
            result.open = menu.name;
            result.label = children.label;
            result.name = children.name;
          }
        }
      }
      return result;
    },
    checkTabs: function(name) {
      var result = false;
      for(var i=0; i<this.tabs.length; i++) {
        var tab = this.tabs[i];
        if(tab.name == name) {      // 判断tab是否重复
          result = true;
        }
      }
      return result;
    },
    handlerTabRemove: function(name) {
      for(var i=0; i<this.tabs.length; i++) {
        var tab = this.tabs[i];
        if(tab.name == name) {
          this.tabs.splice(i, 1);
          //tab.show = false;     // 设置被关闭的tab不可见
          break;
        }
      }
    }
  }
}

 src/assets/css/common.css

@@ -12,27 +12,10 @@
    background-image: url("../images/bg.gif");
    background-size: cover;
    font-size: 14px;
    color: #FFFFFF;
}
.science-header {
    height: 50px;
    background-color: none;
}


/* science-card */
.science-card {
    position: relative;
}
.science-card .science-card-mask {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #1D2D4F;
    opacity: .6;
    z-index: -1;
}

/* parallel-quadrangle */
@@ -48,7 +31,7 @@
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgb(81, 139, 255, .6);
    background: rgba(81, 139, 255, .6);
    z-index: -1; 
}
.blade-card .blade-card-mask-after {
@@ -61,8 +44,8 @@
    border-width: 20px;
    border-style: solid;
    border-color: transparent;
    border-top-color: rgb(81, 139, 255, .6);
    border-left-color: rgb(81, 139, 255, .6);
    border-top-color: rgba(81, 139, 255, .6);
    border-left-color: rgba(81, 139, 255, .6);
    z-index: -1;
}

@@ -76,8 +59,8 @@
    border-width: 20px;
    border-style: solid;
    border-color: transparent;
    border-top-color: rgb(81, 139, 255, .6);
    border-right-color: rgb(81, 139, 255, .6);
    border-top-color: rgba(81, 139, 255, .6);
    border-right-color: rgba(81, 139, 255, .6);
    z-index: 0;
}
/* science-panel */
@@ -211,3 +194,11 @@
.view-root {
    padding:0 8px;
}
.view-root .view-root-inner {
    height: calc(100vh  - 115px);
    color: #FFFFFF;
    overflow-y: auto;
}
.ivu-tree .ivu-tree-empty {
    text-align: center;
}

 src/components/HTabPane.vue

@@ -1,5 +1,5 @@
<template>
    <TabPane :label="label" >
    <TabPane :label="label" closable :name="name">
        <div class="page-view">
            <router-view :name="name"></router-view>
        </div>
@@ -15,7 +15,7 @@
        name: {
            type: String,
            required: true
        }
        },
    }
}
</script>

 src/components/HomeTree.vue

New file
@@ -0,0 +1,92 @@
<template>
    <div class="tree-container">
        <div class="tree-content">
            <Tree :data="data" :load-data="loadData" @on-select-change="handlerSelectChange"></Tree>
        </div>
        
    </div>
</template>
<script>
import {ajax} from '../libs/common'
export default {
    data() {
        return {
            data: []
        }
    },
    methods: {
        loadData: function(item, callback) {
            switch(item.type) {
                case 'home': 
                    this.battGroup(item, callback);
                break;
            }
        },
        home: function() {
            var self = this;
            // 获取机房列表
            ajax({
                type: "post", 				
                url: "BattInfAction!serchAllStation",				
                async:true,				
                dataType:'json',
                data:null,	
                success: function(res){
                    var rs = JSON.parse(res.result);
                    if(rs.code == 1) {
                        var data = rs.data;
                        for(var i=0; i<data.length; i++) {
                            var _data = data[i];
                            _data.type = "home";
                            _data.loading = false;
                            _data.title = _data.StationName;
                            _data.children = [];
                        }
                        self.data = data;
                    }
                },
                error: function() {
                    
                }
            });
        },
        battGroup: function(item, callback) {
            // 根据机房的id获取电池组列表
            ajax({
                type: "post", 				
                url: "BattInfAction!serchBattByStation",				
                async:true,				
                dataType:'json',
                data:"json = "+JSON.stringify({
                    StationId: item.StationId
                }),	
                success: function(res){
                    var rs = JSON.parse(res.result);
                    if(rs.code == 1) {
                        var data = rs.data;
                        for(var i=0; i<data.length; i++) {
                            var _data = data[i];
                            _data.type="group";
                            _data.title = _data.BattGroupName;
                        }

                        callback(data);
                    }
                }
            });
        },
        handlerSelectChange: function(item) {
            var data = item[0];
            this.$emit('on-select-change', data);
        }
    },
    mounted: function() {
        this.home();        // 查询机房列表
    }
}
</script>
<style scoped>
    .tree-content {
        padding-left: 16px;
    }
</style>

 src/components/ScienceCard.vue

New file
@@ -0,0 +1,50 @@
<template>
    <div class="science-card" :style="style">
        <div class="science-card-mask"></div>
        <div class="science-card-content">
            <slot></slot>
        </div>
    </div>
</template>
<script>
export default {
    props:{
        width:{
            type: String,
            default: '300px'
        },
        height:{
            type: String,
            default: '100px;'
        }
    },
    data() {
        return {
            style: {
                width: this.width,
                height: this.height
            }
        }
    }
}
</script>
<style scoped>
    .science-card {
        position: relative;
    }
    .science-card .science-card-mask {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: #1D2D4F;
        opacity: .6;
        z-index: -1;
    }
    .science-card .science-card-content {
        width: 100%;
        height: 100%;
        overflow: auto;
    }
</style>

 src/libs/common.js

New file
@@ -0,0 +1,125 @@
import $ from 'jquery';
const CORS= 'http://localhost:8080/LD_9/';        // 开启跨域请求(调试时开启)
//const CORS='';           // 关闭跨域请求(发布时开启)

//定义计时器
function Interval() {
    this.timer = null;
    this.time = '';
    this.callback = '';
}
// 开启计时器并添加
Interval.prototype.start = function(callback, time) {
    // 先关闭计时器
    this.stop();
    // 配置执行函数
    if(typeof callback == 'function' && typeof time == 'number') {
        this.callback = callback;
        this.time = time;
        callback();
        this.timer = setInterval(callback, time);
    }else {
        console.warn('未完整配置参数！');
    }
};
// 开启计时器
Interval.prototype.open = function() {
    var callback = this.callback;
    var time = this.time;
    this.start(callback, time);
};

// 关闭计时器
Interval.prototype.stop = function() {
    clearInterval(this.timer);
};


// 延时计时器
function Timeout() {
    this.timer = null;
    this.time = '';
    this.callback = '';
}
// 开启计时器并添加
Timeout.prototype.start = function(callback, time, exe) {
    // 先关闭计时器
    this.stop();
    // 配置执行函数
    if(typeof callback == 'function' && typeof time == 'number') {
        this.callback = callback;
        this.time = time;
        if(exe != 'exe') {
            callback();
        }
        this.timer = setTimeout(callback, time);
    }else {
        console.warn('未完整配置参数！');
    }
};
// 开启计时器
Timeout.prototype.open = function() {
    var callback = this.callback;
    var time = this.time;
    this.start(callback, time, 'exe');
};

// 关闭计时器
Timeout.prototype.stop = function() {
    clearTimeout(this.timer);
};

/*从多维数组中获取最大值*/
function getMaxFromArr(arr) {
    var newArray = arr.join(",").split(",");
    return Math.max.apply({},newArray);
}

/*从多维数组中获取最小值*/
function getMinFromArr (arr) {
    var newArray = arr.join(",").split(",");
    return Math.min.apply({},newArray);
}

function ajax(option) {
    $.ajax({
        type: 'post',
        async: true,
        url: CORS+option.url,
        data: option.data,
        dataType: 'json',
        success: option.success,
        error: option.error,
        complete: option.complete
    });
}

// 格式化时间
Date.prototype.format =function(format)
{
    var o = {
    "M+" : this.getMonth()+1, //month
        "d+" : this.getDate(),    //day
        "h+" : this.getHours(),   //hour
        "m+" : this.getMinutes(), //minute
        "s+" : this.getSeconds(), //second
        "q+" : Math.floor((this.getMonth()+3)/3),  //quarter
        "S" : this.getMilliseconds() //millisecond
    };
    if(/(y+)/.test(format)) format=format.replace(RegExp.$1,
    (this.getFullYear()+"").substr(4- RegExp.$1.length));
    for(var k in o)if(new RegExp("("+ k +")").test(format))
    format = format.replace(RegExp.$1,
    RegExp.$1.length==1? o[k] :
    ("00"+ o[k]).substr((""+ o[k]).length));
    return format;
};

export {
    CORS,           //  跨域请求内容
    Interval,       // 计时器
    Timeout,        // 延时计时器
    getMaxFromArr,  // 获取数组中的最大值
    getMinFromArr,   // 获取数组中的最小值
    ajax,            // 请求
}

 src/router.js

@@ -5,7 +5,9 @@
            title: ''
        },
        components: {
            default: (resolve)=>require(['./views/index.vue'], resolve)
            default: (resolve)=>require(['./views/index.vue'], resolve),
            'monitor/real': (resolve)=>require(['./views/monitor/realTime.vue'], resolve),
            'monitor/history': (resolve)=>require(['./views/monitor/history.vue'], resolve)
        }
    }
];

 src/views/about.vue

New file
@@ -0,0 +1,22 @@
<template>
    <div class="view-root">
        <h1>详情页</h1>
    </div>
</template>
<script>
export default {
    data() {
        return {
            interval: ''
        }
    },
    mounted() {
        this.interval = setInterval(function() {
            console.log(123);
        }, 1000);
    },
    beforeDestroy() {
        clearInterval(this.interval);
    },
}
</script>

 src/views/eleDischage.vue

New file
@@ -0,0 +1,5 @@
<template>
    <div class="view-root">
        <h1>电池放电测试</h1>
    </div>
</template>

 src/views/eleInfoConfig.vue

New file
@@ -0,0 +1,5 @@
<template>
    <div class="view-root">
        <h1>电池信息配置</h1>
    </div>
</template>

 src/views/index.vue

@@ -1,6 +1,6 @@
<template>
    <div class="view-root">
        <h1>首页</h1>
        <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

New file
@@ -0,0 +1,49 @@
<template>
    <div class="view-root">
        <div class="view-root-inner">
            <div class="view-layout">
                <div class="view-layout-left">
                    <science-card width="100%" height="100%">
                        <home-tree @on-select-change="handlerSelectChange"></home-tree>
                    </science-card>
                </div>
                <div class="view-layout-right">
                    <science-card width="100%" height="100%"></science-card>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import ScienceCard from '../../components/ScienceCard'
import HomeTree from "../../components/HomeTree"
export default {
    components: {
        ScienceCard,
        HomeTree
    },
    methods: {
        handlerSelectChange: function(item) {
            if(item.type == 'group') {
                console.log(item);
            }
        }
    }
}
</script>
<style scoped>
    .view-layout {
        height: 100%;
    }
    .view-layout-left {
        float: left;
        width: 360px;
        height: 100%;
        overflow-y: auto;
    }
    .view-layout-right {
        margin-left: 370px;
        height: 100%;
        overflow-y: auto;
    }
</style>

 src/views/monitor/realTime.vue

New file
@@ -0,0 +1,92 @@
<template>
    <div class="view-root">
        <div class="view-root-inner">
            <div class="view-layout">
                <div class="view-layout-left">
                    <science-card width="100%" height="100%">
                        <home-tree @on-select-change="handlerSelectChange"></home-tree>
                    </science-card>
                </div>
                <div class="view-layout-right">
                    <science-card width="100%" height="100%"></science-card>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import ScienceCard from '../../components/ScienceCard'
import HomeTree from "../../components/HomeTree"
import {ajax} from "../../libs/common"
export default {
    components: {
        ScienceCard,
        HomeTree
    },
    data() {
        return {
            batt: {},       // 电池组信息
            alarmlist: []   // 电池告警参数
        }
    },
    methods: {
        handlerSelectChange: function(item) {   // 处理左侧机房列表点击事件
            if(item.type == 'group') {
                // console.log(item);
                this.batt = item;
                this.searchBattAlarmParam();        //查询并存储电池告警参数
            }
        },
        searchBattAlarmParam: function() {      //查询并存储电池告警参数
            var batt = this.batt;
            if(!batt.BattGroupId) {
                this.$Message.error('请先选择电池组');
                return;
            }
            var temp = {
                dev_id: batt.FBSDeviceId,
            };
            // 请求后台 获取电池告警参数
            ajax({ 	
                type:"post", 				
                url: "Dev_paramAction!serchParamById",			
                async:true,			
                dataType:'json',
                data:"json="+JSON.stringify(temp),	
                success: function(res){
                    var rs = JSON.parse(res.result);
                    if(rs.code == 1) {
                        this.alarmlist = rs.data;
                    }
                }
            });
        },
        getAlarmParamByType: function(type) {       // 根据告警类型获取告警参数
            var alarmlist = this.alarmlist;
            // 遍历alarmlist,根据type返回参数
            for(var i=0;i<alarmlist.length;i++){
                if(alarmlist[i].alm_name == type){
                    return alarmlist[i];
                }
            }
            return new Object();
        }
    }
}
</script>
<style scoped>
    .view-layout {
        height: 100%;
    }
    .view-layout-left {
        float: left;
        width: 360px;
        height: 100%;
        overflow-y: auto;
    }
    .view-layout-right {
        margin-left: 370px;
        height: 100%;
        overflow-y: auto;
    }
</style>

 vue.config.js

New file
@@ -0,0 +1,4 @@
var path = require('path');
module.exports = {
    publicPath: './'
}