update

69d2a79f · wangqinghua · 18a66d2d · 69d2a79f · 69d2a79f · 69d2a79f
Commit 69d2a79f authored Dec 21, 2018 by wangqinghua
4 changed files
--- a/src/main/webapp/app/home/home.component.html
+++ b/src/main/webapp/app/home/home.component.html
@@ -15,11 +15,32 @@
 </div>
 <div nz-row nzGutter="4">
    <div nz-col nzSpan="16">
-        <div echarts [options]="leftOneChart" style="height: 400px;width: 100%"></div>
-        <div echarts [options]="leftTwoChart" style="height: 400px;width: 100%"></div>
+        <p>运行情况统计</p>
+        <div nz-row>
+            <div nz-col nzSpan="12">
+                <div echarts [options]="leftOneChart" style="height: 250px;width: 100%"></div>
+                <div>
+                    <p>严重 </p>
+                    <p>告警 </p>
+                    <p>正常 </p>
+                    <p>禁止 </p>
+                </div>
+            </div>
+            <div nz-col nzSpan="12">
+                <div echarts [options]="leftTwoChart" style="height: 250px;width: 100%"></div>
+                <div>
+                    <p>严重 </p>
+                    <p>告警 </p>
+                    <p>正常 </p>
+                    <p>禁止 </p>
+                </div>
+            </div>
+        </div>
    </div>
-    <div nz-col nzSpan="12">
-        <div echarts [options]="rightOneChart" style="height: 400px;width: 100%"></div>
-        <div echarts [options]="rightTwoChart" style="height: 400px;width: 100%"></div>
+    <div nz-col nzSpan="8">
+        <p>资源数量统计 {{totalNum}}个资源</p>
+        <div echarts [options]="rightOneChart" style="height: 250px;width: 100%"></div>
+        <div echarts [options]="rightTwoChart" style="height: 250px;width: 100%"></div>
    </div>
 </div>
+<smart-warn-list #warnList (total)="getTotal($event)"></smart-warn-list>
--- a/src/main/webapp/app/home/home.component.ts
+++ b/src/main/webapp/app/home/home.component.ts
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit, ViewChild} from '@angular/core';
 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 import { JhiEventManager } from 'ng-jhipster';
 import { Account, Principal } from '../shared';
 import {OverAllService} from '../overAll/overAll.service';
+import {WarnListComponent} from '../modal/warn-list/warn-list.component';

 @Component({
    selector: 'jhi-home',
@@ -13,12 +14,15 @@ import {OverAllService} from '../overAll/overAll.service';

 })
 export class HomeComponent implements OnInit {
+    @ViewChild('warnList') warnList:WarnListComponent;

    leftOneChart;
    leftTwoChart;
    rightOneChart;
    rightTwoChart;

+    totalNum;
+
    constructor(
        private overAllSer:OverAllService,
        private principal: Principal,
@@ -27,14 +31,170 @@ export class HomeComponent implements OnInit {
    }

    ngOnInit() {
+        this.search();
+
        this.findGroupCount();
        this.findHostCount();
+
+        this.setLeftOne();
+        this.setLeftTwo();
+    }
+
+    setLeftOne(){
+        this.leftOneChart =
+            {
+                title: {
+                    text: '82台\n主机',
+                    x: '23%',
+                    y: '40%',
+                    itemGap: 50,
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 26,
+                        fontWeight: 'normal',
+                    },
+                    subtextStyle: {
+                        color: '#de4751',
+                        fontSize: 12
+                    }
+                },
+                tooltip: {
+                    trigger: 'item',
+                    formatter: "{a} <br/>{b} : {c} ({d}%)"
+                },
+
+                series: [
+                    {
+                        name: '访问来源',
+                        type: 'pie',
+                        clockWise: true,
+                        center: ["30%", "50%"],
+                        radius: ['40%', '60%'],
+                        color: ['#fcee56', '#ff8400', '#f93215', '#701002', '#2fb35b', '#a0a0a0'],
+                        label: {
+                            normal: {
+                                show: false,
+                                position: 'center'
+                            }
+                        },
+                        labelLine: {
+                            normal: {
+                                show: false
+                            }
+                        },
+                        data: [
+                            {value: 235, name: '告警'},
+                            {value: 110, name: '一般严重'},
+                            {value: 234, name: '严重'},
+                            {value: 35, name: '灾难'},
+                            {value: 505, name: '正常'},
+                            {value: 48, name: '未知'}
+                        ],
+                        itemStyle: {
+                            emphasis: {
+                                shadowBlur: 10,
+                                shadowOffsetX: 0,
+                                shadowColor: 'rgba(0, 0, 0, 0.5)'
+                            }
+                        }
+                    }
+                ]
+            };
+    }
+
+    setLeftTwo(){
+        this.leftTwoChart =
+            {
+                title: {
+                    text: '82台\n主机',
+                    x: '23%',
+                    y: '40%',
+                    itemGap: 50,
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 26,
+                        fontWeight: 'normal',
+                    },
+                    subtextStyle: {
+                        color: '#de4751',
+                        fontSize: 12
+                    }
+                },
+                tooltip: {
+                    trigger: 'item',
+                    formatter: "{a} <br/>{b} : {c} ({d}%)"
+                },
+
+                series: [
+                    {
+                        name: '访问来源',
+                        type: 'pie',
+                        clockWise: true,
+                        center: ["30%", "50%"],
+                        radius: ['40%', '60%'],
+                        color: ['#fcee56', '#ff8400', '#f93215', '#701002', '#2fb35b', '#a0a0a0'],
+                        label: {
+                            normal: {
+                                show: false,
+                                position: 'center'
+                            }
+                        },
+                        labelLine: {
+                            normal: {
+                                show: false
+                            }
+                        },
+                        data: [
+                            {value: 235, name: '告警'},
+                            {value: 110, name: '一般严重'},
+                            {value: 234, name: '严重'},
+                            {value: 35, name: '灾难'},
+                            {value: 505, name: '正常'},
+                            {value: 48, name: '未知'}
+                        ],
+                        itemStyle: {
+                            emphasis: {
+                                shadowBlur: 10,
+                                shadowOffsetX: 0,
+                                shadowColor: 'rgba(0, 0, 0, 0.5)'
+                            }
+                        }
+                    }
+                ]
+            };
    }

    findGroupCount(){
        this.overAllSer.findGroupCount().subscribe(
            (res)=>{
+                this.rightOneChart = {
+                    tooltip : {
+                        trigger: 'item',
+                        formatter: "{a} <br/>{b} : {c} ({d}%)"
+                    },

+                    series : [
+                        {
+                            type: 'pie',
+                            radius : '55%',
+                            center: ['50%', '60%'],
+                            data:res.data.map(e=>{
+                                const arr = {
+                                    value:e.count,
+                                    name:e.name
+                                };
+                                return arr;
+                            }),
+                            itemStyle: {
+                                emphasis: {
+                                    shadowBlur: 10,
+                                    shadowOffsetX: 0,
+                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                                }
+                            }
+                        }
+                    ]
+                };
            }
        )
    }
@@ -42,12 +202,48 @@ export class HomeComponent implements OnInit {
    findHostCount(){
        this.overAllSer.findHostCount().subscribe(
            (res)=>{
+                this.rightTwoChart = {
+                    tooltip : {
+                        trigger: 'item',
+                        formatter: "{a} <br/>{b} : {c} ({d}%)"
+                    },

+                    series : [
+                        {
+                            name: '访问来源',
+                            type: 'pie',
+                            radius : '55%',
+                            center: ['50%', '60%'],
+                            data:res.data.map(e=>{
+                                const arr = {
+                                    value:e.count,
+                                    name:e.name
+                                }
+                                return arr;
+                            }),
+                            itemStyle: {
+                                emphasis: {
+                                    shadowBlur: 10,
+                                    shadowOffsetX: 0,
+                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                                }
+                            }
+                        }
+                    ]
+                };
            }
        )
    }

    search(){
+        const obj = {
+            isWaring:'yes',
+            hostid:null,
+        };
+        this.warnList.getList(obj);
+    }

+    getTotal(e){
+        this.totalNum = e;
    }
 }
--- a/src/main/webapp/app/layouts/navbar/navbar.component.html
+++ b/src/main/webapp/app/layouts/navbar/navbar.component.html
@@ -2,7 +2,7 @@
    <!--<i class="anticon trigger" [class.anticon-menu-fold]="!isCollapsed" [class.anticon-menu-unfold]="isCollapsed" (click)="isCollapsed=!isCollapsed"></i>-->
    <div nz-row>
        <div nz-col class="handle" [nzSpan]="12">
-            <span>首页</span>
+            <span routerLink="../main/home">首页</span>
            <span (click)="transition()">+快捷添加</span>
            <span #parent  class="span-hov">
              <span #children class="addBtn">

--- a/src/main/webapp/app/modal/warn-list/warn-list.component.html
+++ b/src/main/webapp/app/modal/warn-list/warn-list.component.html
@@ -16,7 +16,7 @@
  <tbody>
  <tr *ngFor="let data of warnList">
    <td class="table-timeline">
-      <nz-timeline-item>{{data.clock}}</nz-timeline-item>
+      <nz-timeline-item>{{data.clock | date:"yyyy-MM-dd HH:mm:ss"}}</nz-timeline-item>
    </td>
    <td class="round-tag tag-form">
      <nz-tag *ngIf="data.priority == 4 || data.priority == 5" [nzColor]="'#fc0d1b'"></nz-tag>