Skip to content

S
smart
Commit d92177e8 authored by wangqinghua's avatar wangqinghua
Browse files
Options

update

parent 70cd9676
Hide whitespace changes
Inline Side-by-side
Showing with 235 additions and 94 deletions
src/main/webapp/app/alarm/alarm-list/alarm-list.component.ts
View file @ d92177e8
import {Component, OnInit, ViewChild} from '@angular/core';
import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core';
import {AlarmService} from '../alarm.service';
import {pageSize} from '../../app.constants';
import {WarnListComponent} from '../../modal/warn-list/warn-list.component';
......@@ -10,10 +10,11 @@ import {DatePipe} from '@angular/common';
selector: 'smart-alarm-list',
templateUrl: './alarm-list.component.html',
styles: [`
.tag-warn{
.tag-warn {
padding: 5px;
}
.tag-warn span{
.tag-warn span {
border: 1px solid #ccc;
margin-right: 10px;
display: inline-block;
......@@ -21,12 +22,13 @@ import {DatePipe} from '@angular/common';
padding: 2px 4px;
border-radius: 4px;
}
:host ::ng-deep .tag-warn .ant-tag{
:host ::ng-deep .tag-warn .ant-tag {
margin-right: 0px;
}
`]
})
export class AlarmListComponent implements OnInit {
export class AlarmListComponent implements OnInit, AfterViewInit {
@ViewChild('warnList') warnList: WarnListComponent;
eventList = [];
warnCountList = [];
......@@ -37,89 +39,92 @@ export class AlarmListComponent implements OnInit {
//条件
timeType = '1';
obj = {
priorityName:null,
groupid:null,
equipmentType:null,
startTime:'',
endTime:'',
name:''
priorityName: null,
groupid: null,
equipmentType: null,
startTime: '',
endTime: '',
name: ''
};
constructor(public alarmSer: AlarmService,public overAllSer:OverAllService,public message:NzMessageService,
public datePipe:DatePipe) {
constructor(public alarmSer: AlarmService, public overAllSer: OverAllService, public message: NzMessageService,
public datePipe: DatePipe) {
}
ngOnInit() {
this.getType();
this.getWarnGroup();
this.changeType();
}
ngAfterViewInit(){
this.searchValue();
}
//获取分组
getWarnGroup(){
getWarnGroup() {
this.overAllSer.findGroup().subscribe(
(res)=>{
if(res.errCode == 10000){
(res) => {
if (res.errCode == 10000) {
this.groupList = res.data;
}
}
)
);
}
//获取资源类型
getType(){
getType() {
this.overAllSer.findType().subscribe(
(res)=>{
if(res.errCode == 10000){
(res) => {
if (res.errCode == 10000) {
this.warnCountList = res.data;
}else{
} else {
this.message.info(res.errMsg);
}
}
)
);
}
//时间改变
changeType(){
changeType() {
const nowDate = new Date().getTime();
let day1,day2;
switch (this.timeType){
case'1':{
this.obj.startTime = this.datePipe.transform(nowDate,'yyyy-MM-dd') +' 00:00:00';
this.obj.endTime = this.datePipe.transform(nowDate,'yyyy-MM-dd') +' 23:59:59';
break;
let day1, day2;
switch (this.timeType) {
case'1': {
this.obj.startTime = this.datePipe.transform(nowDate, 'yyyy-MM-dd') + ' 00:00:00';
this.obj.endTime = this.datePipe.transform(nowDate, 'yyyy-MM-dd') + ' 23:59:59';
break;
}
case'2':{
day1 = nowDate - 1*24*60*60*1000;
this.obj.startTime = this.datePipe.transform(day1,'yyyy-MM-dd') + ' 00:00:00';
this.obj.endTime = this.datePipe.transform(day1,'yyyy-MM-dd') + ' 23:59:59';
case'2': {
day1 = nowDate - 1 * 24 * 60 * 60 * 1000;
this.obj.startTime = this.datePipe.transform(day1, 'yyyy-MM-dd') + ' 00:00:00';
this.obj.endTime = this.datePipe.transform(day1, 'yyyy-MM-dd') + ' 23:59:59';
break;
}
case'3':{
day1 = nowDate - 3*24*60*60*1000;
day2 = nowDate - 1*24*60*60*1000;
this.obj.startTime = this.datePipe.transform(day1,'yyyy-MM-dd') + ' 00:00:00';
this.obj.endTime = this.datePipe.transform(day2,'yyyy-MM-dd') + ' 23:59:59';
case'3': {
day1 = nowDate - 3 * 24 * 60 * 60 * 1000;
day2 = nowDate - 1 * 24 * 60 * 60 * 1000;
this.obj.startTime = this.datePipe.transform(day1, 'yyyy-MM-dd') + ' 00:00:00';
this.obj.endTime = this.datePipe.transform(day2, 'yyyy-MM-dd') + ' 23:59:59';
break;
}
case'4':{
day1 = nowDate - 7*24*60*60*1000;
day2 = nowDate - 1*24*60*60*1000;
this.obj.startTime = this.datePipe.transform(day1,'yyyy-MM-dd') + ' 00:00:00';
this.obj.endTime = this.datePipe.transform(day2,'yyyy-MM-dd') + ' 23:59:59';
case'4': {
day1 = nowDate - 7 * 24 * 60 * 60 * 1000;
day2 = nowDate - 1 * 24 * 60 * 60 * 1000;
this.obj.startTime = this.datePipe.transform(day1, 'yyyy-MM-dd') + ' 00:00:00';
this.obj.endTime = this.datePipe.transform(day2, 'yyyy-MM-dd') + ' 23:59:59';
break;
}
case'5':{
case'5': {
break;
}
}
}
//查询
searchValue(){
this.obj.startTime = this.datePipe.transform(Number(this.obj.startTime),'yyyy-MM-dd HH:mm:ss');
this.obj.endTime = this.datePipe.transform(Number(this.obj.endTime),'yyyy-MM-dd HH:mm:ss');
searchValue() {
this.obj.startTime = this.datePipe.transform(Number(this.obj.startTime), 'yyyy-MM-dd HH:mm:ss');
this.obj.endTime = this.datePipe.transform(Number(this.obj.endTime), 'yyyy-MM-dd HH:mm:ss');
this.warnList.getList(this.obj);
}
}
src/main/webapp/app/app.constants.ts
View file @ d92177e8
......@@ -13,4 +13,6 @@ export const color = {
red:'#f44e4e',
gray:'#bfbfbf',
black:'#6064'
};
\ No newline at end of file
};
//图片地址
export const imgUrl = "http://10.10.38.99:8282/file/icon/";
src/main/webapp/app/app.route.ts
View file @ d92177e8
......@@ -22,6 +22,7 @@ import {NetworkDetailComponent} from './overAll/network-check/network-detail/net
import {TopologyImgComponent} from './netTopology/topology-img/topology-img.component';
export const route: Routes = [
{path: '', component: JhiMainComponent,canActivate:[LoginGuard]},
{
path: 'app', component: AppComponent,
children: [
......
src/main/webapp/app/modal/warn-list/warn-list.component.html
View file @ d92177e8
......@@ -16,7 +16,7 @@
<tbody>
<tr *ngFor="let data of warnList">
<td class="table-timeline">
<nz-timeline-item>{{data.clock | date:'yyyy-MM-dd HH:MM:ss'}}</nz-timeline-item>
<nz-timeline-item>{{data.clock}}</nz-timeline-item>
</td>
<td class="round-tag tag-form">
<nz-tag *ngIf="data.priority == 4 || data.priority == 5" [nzColor]="'#fc0d1b'"></nz-tag>
......
src/main/webapp/app/netTopology/model/icon/icon.component.html
View file @ d92177e8
<nz-modal [(nzVisible)]="isVisible" nzTitle="{{title}}" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
<form [formGroup]="validateForm" nz-form>
<form [formGroup]="validateForm" nz-form>
<nz-form-item>
<nz-form-label [nzSpan]="7" nzRequired nzFor="group">选择图片</nz-form-label>
<nz-form-label [nzSpan]="7" nzRequired nzFor="group">选择图标</nz-form-label>
<nz-form-control [nzSpan]="12">
<nz-upload
nzSize = "300"
nzFileType="image/png,image/jpeg,image/gif,image/bmp"
[nzData] ="data"
nzLimit="1"
>
[nzBeforeUpload]="beforeUpload"
[(nzFileList)]="fileList">
<button nz-button>
<i class="anticon anticon-upload"></i><span>Click to Upload</span>
<i class="anticon anticon-upload"></i><span>上传</span>
</button>
</nz-upload>
<nz-form-explain *ngIf="validateForm.get('group').dirty && validateForm.get('group').errors">请选择监测点</nz-form-explain>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="7" nzRequired nzFor="name">选择类型</nz-form-label>
<nz-form-label [nzSpan]="7" nzRequired nzFor="firstTypeId">选择一级类型</nz-form-label>
<nz-form-control [nzSpan]="12">
<nz-select style="width: 200px;" nzShowSearch nzAllowClear nzPlaceHolder="选择类型">
<nz-option></nz-option>
</nz-select>
<nz-form-explain *ngIf="validateForm.get('name').dirty && validateForm.get('name').errors">请输入显示名称</nz-form-explain>
<nz-select name="firstTypeId" nzPlaceHolder="请选择一级类型" nzAllowClear formControlName="firstTypeId" (ngModelChange)="onChanges($event)">
<nz-option *ngFor="let item of options" [nzValue]="item.id" [nzLabel]="item.name"></nz-option>
</nz-select>
<nz-form-explain *ngIf="validateForm.get('firstTypeId').dirty && validateForm.get('firstTypeId').errors">请选择一级类型</nz-form-explain>
</nz-form-control>
</nz-form-item>
<nz-form-item *ngIf="validateForm.value.firstTypeId">
<nz-form-label [nzSpan]="7" nzFor="secondTypeId">选择二级类型</nz-form-label>
<nz-form-control [nzSpan]="12">
<nz-select name="secondTypeId" nzAllowClear formControlName="secondTypeId" nzPlaceHolder="请选择二级类型">
<nz-option *ngFor="let item of childrenList" [nzValue]="item.id" [nzLabel]="item.name"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
</form>
......
src/main/webapp/app/netTopology/model/icon/icon.component.ts
View file @ d92177e8
import { Component, OnInit } from '@angular/core';
import {UploadFile} from 'ng-zorro-antd';
import {Component, EventEmitter, OnInit, Output} from '@angular/core';
import {NzMessageService, UploadFile} from 'ng-zorro-antd';
import {TopologyService} from '../../topology.service';
import {FormGroup} from '@angular/forms';
import {FormBuilder, FormGroup, Validator, Validators} from '@angular/forms';
import { filter } from 'rxjs/operators';
@Component({
selector: 'smart-icon',
......@@ -9,47 +10,104 @@ import {FormGroup} from '@angular/forms';
styles: []
})
export class IconComponent implements OnInit {
@Output() done = new EventEmitter<any>();
isVisible = false;
fileList: UploadFile[] = [];
validateForm:FormGroup;
title = "添加图标";
data = {
iconType:"",
defaultIcon:"0",
firstTypeId:"",
secondTypeId:"",
name:"",
}
constructor(private topologySer:TopologyService) { }
options:any;
childrenList = [];
constructor(private topologySer:TopologyService,private message:NzMessageService,
private fb:FormBuilder) { }
values;
ngOnInit() {
ngOnInit() {
this.initForm();
this.getList();
}
initForm(){
this.validateForm = this.fb.group({
firstTypeId:[null,[Validators.required]] ,
secondTypeId:[null],
iconType:['0'],
defaultIcon:["0"],
name:[""],
});
this.fileList = [];
}
getList(){
this.topologySer.findTreeWithWeb().subscribe(
(res)=>{
if(res.errCode == 10000){
this.options = res.data;
console.log(this.options);
}else{
this.message.error(res.errMSg);
}
}
)
}
handleUpload(): void {
beforeUpload = (file: UploadFile): boolean => {
const isLt2M = file.size / 1024 < 300;
if (!isLt2M) {
this.message.error('图标必须小于300kb!');
}else{
this.fileList.push(file);
}
return false;
};
showModal(){
this.isVisible = true;
}
handleOk(){
if(this.fileList.length == 0){
this.message.error("请选择图标");
return false;
}
for(let i in this.validateForm.controls){
this.validateForm.controls[i].markAsDirty();
this.validateForm.controls[i].updateValueAndValidity();
}
if(this.validateForm.invalid){
return false;
}
const formData = new FormData();
// tslint:disable-next-line:no-any
this.fileList.forEach((file: any) => {
formData.append('files[]', file);
formData.append('file', file);
});
console.log(formData);
// You can use any AJAX library you like
// const req = new HttpRequest('POST', 'https://jsonplaceholder.typicode.com/posts/', formData, {
// // reportProgress: true
// });
formData.append('iconType',this.validateForm.value.iconType);
formData.append('defaultIcon',this.validateForm.value.defaultIcon);
formData.append('firstTypeId',this.validateForm.value.firstTypeId);
formData.append('secondTypeId',this.validateForm.value.secondTypeId);
formData.append('name',this.validateForm.value.name);
console.log(this.validateForm.value)
this.topologySer.iconUpload(formData).subscribe(
(res)=>{
if(res.errCode == 10000){
this.message.success("添加成功");
this.isVisible = false;
this.done.emit();
}else{
this.message.error(res.errMsg);
}
}
)
}
handleOk(){
this.isVisible = false;
onChanges(e){
this.childrenList = [];
this.options.forEach(res=>{
if(res.id == e){
this.childrenList = res.childs;
}
})
}
handleCancel(){
......
src/main/webapp/app/netTopology/topology-img/topology-img.component.html
View file @ d92177e8
......@@ -28,7 +28,7 @@
</nz-select>
</div>
<div nz-col nzSpan="12" class="text-right">
<button nz-button nzType="default"><i class="anticon anticon-plus"></i>添加图标</button>
<button nz-button (click)="addIcon()" nzType="default"><i class="anticon anticon-plus"></i>添加图标</button>
</div>
</div>
<nz-table #nzTable [nzData]="iconList">
......@@ -37,13 +37,23 @@
<th>一级类型</th>
<th>默认图标</th>
<th>所有图标</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of iconList">
<td>{{data.firstTypeName}}</td>
<td>{{data.defaultIcon}}</td>
<td>{{data.url}}</td>
<td>
<img style="width: 40px;" [src]="imgUrl + data.url">
</td>
<td class="handle">
<span (click)="deleteIcon(data)">删除</span>
<ng-container *ngIf="data.defaultIcon == 0">
<span (click)="setDefault()">设为默认</span>
</ng-container>
</td>
</tr>
</tbody>
</nz-table>
<smart-icon #smartIcon (done)="getList()"></smart-icon>
src/main/webapp/app/netTopology/topology-img/topology-img.component.ts
View file @ d92177e8
import {Component, OnInit} from '@angular/core';
import {Component, OnInit, ViewChild} from '@angular/core';
import {TopologyService} from '../topology.service';
import {NzMessageService} from 'ng-zorro-antd';
import {NzMessageService, NzModalService, NzMode} from 'ng-zorro-antd';
import {IconComponent} from '../model/icon/icon.component';
import {imgUrl} from '../../app.constants';
@Component({
selector: 'smart-topology-img',
......@@ -8,9 +10,12 @@ import {NzMessageService} from 'ng-zorro-antd';
styles: []
})
export class TopologyImgComponent implements OnInit {
@ViewChild('smartIcon') smartIcon:IconComponent;
imgUrl = imgUrl;
iconList;
constructor(private topologySer: TopologyService,private message:NzMessageService) {
constructor(private topologySer: TopologyService,private message:NzMessageService,
private modalSer:NzModalService) {
}
ngOnInit() {
......@@ -29,4 +34,62 @@ export class TopologyImgComponent implements OnInit {
}
);
}
addIcon(){
this.smartIcon.showModal();
}
//删除图片
deleteIcon(item){
this.modalSer.confirm({
nzTitle: '删除',
nzContent: '<b style="color: red;">确认删除该图标吗？</b>',
nzOkText: '确定',
nzOkType: 'danger',
nzOnOk: () => {
const arr = {
ids: []
};
arr.ids.push(item.id);
this.topologySer.iconDelete(arr).subscribe(
(res) => {
if (res.errCode == 10000) {
this.message.success('删除成功');
this.getList();
} else {
this.message.error(res.errMsg);
}
}
);
},
nzCancelText: '取消',
nzOnCancel: () => console.log('Cancel')
}
);
}
//设为默认
setDefault(item){
this.modalSer.confirm({
nzTitle: '删除',
nzContent: '<b style="color: red;">确认将该图标设为默认图标吗？</b>',
nzOkText: '确定',
nzOkType: 'danger',
nzOnOk: () => {
this.topologySer.iconDefault(item.id).subscribe(
(res) => {
if (res.errCode == 10000) {
this.message.success('默认成功');
this.getList();
} else {
this.message.error(res.errMsg);
}
}
);
},
nzCancelText: '取消',
nzOnCancel: () => console.log('Cancel')
}
);
}
}
src/main/webapp/app/netTopology/topology.service.ts
View file @ d92177e8
......@@ -50,7 +50,7 @@ export class TopologyService {
}
//设置默认图标
default(params): Observable<any> {
iconDefault(params): Observable<any> {
return this.http.get(SERVER_API_URL + '/default/' + params);
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment