监控项

src/main/webapp/app/overAll/template/list/item-list/item-list.component.html

@@ -15,7 +15,7 @@
         模版：{{tempName}}
       </nz-breadcrumb-item>
       <nz-breadcrumb-item>
-        自动发现：{{disName}}
+        监控项
       </nz-breadcrumb-item>
     </nz-breadcrumb>
   </div>
@@ -26,42 +26,73 @@
 </div>
 <div nz-row [nzGutter]="4" class="search-form">
   <div nz-col nzSpan="3">
-    <button (click)="showAddModal()" nz-button nzType="default"><i class="anticon anticon-plus-circle-o"></i>添加监控项原型</button>
+    <button (click)="showAddModal()" nz-button nzType="default"><i class="anticon anticon-plus-circle-o"></i>添加监控项</button>
   </div>
-  <div nz-col nzSpan="18"></div>
-  <div nz-col nzSpan="3">
-    <button (click)="deleteBatchCheck()" nz-button nzType="default"><i class="anticon anticon-close-circle-o"></i>批量删除</button>
+  <div nz-col nzSpan="15"></div>
+  <div nz-col nzSpan="6">
+    <input (keyup.enter)="getCheckList()" style="width: 200px;" type="text" nz-input [(ngModel)]="searchName" placeholder="输入监测点名称">
+    <button (click)="getCheckList()" nz-button nzType="default"><i class="anticon anticon-search"
+                                                                   style="color: #6097b7"></i>搜索</button>
+    <!--<button (click)="deleteBatchCheck()" nz-button nzType="default"><i class="anticon anticon-close-circle-o"></i>批量删除</button>-->
   </div>
 </div>
 
-<nz-table #nzTable [nzData]="checkList" [nzFrontPagination]="false" [nzTotal]="totalNum" [nzPageIndex]="pageNum" [nzPageSize]="pageCount" (nzPageIndexChange)="change($event)" [nzLoading]="loading">
+<div nz-row>
+  <div class="padding-15-0">
+    <nz-radio-group [(ngModel)]="itemTypeValue" [nzButtonStyle]="'solid'">
+      <label *ngFor="let item of itemTypeList" (click)="changeType(item)" nz-radio-button nzValue="{{item.applicationid}}">{{item.name}}</label>
+    </nz-radio-group>
+  </div>
+  <nz-table #checkTable [nzData]="checkList" [nzFrontPagination]="false" [nzTotal]="totalNum" [nzPageIndex]="pageIndex" [nzPageSize]="pageSize" (nzPageIndexChange)="change($event)" [nzLoading]="loading">
     <thead>
     <tr>
-    <th nzShowCheckbox [nzIndeterminate]="indeterminate" [nzChecked]="allChecked" (nzCheckedChange)="checkAll($event)"></th>
-    <th>名称</th>
-    <th>键值</th>
-    <th>间隔</th>
-    <th>状态</th>
-    <th>操作</th>
+      <th nzWidth="250px">监测点名称</th>
+      <th >最新数据</th>
+      <th nzWidth="200px">最新数据时间</th>
+      <th>监测点分类</th>
+      <th>更新时间间隔</th>
+      <th>图表</th>
+      <th nzWidth="250px">操作</th>
     </tr>
     </thead>
     <tbody>
-  <tr *ngFor="let data of checkList">
-    <td nzShowCheckbox [(nzChecked)]="data.checked" (nzCheckedChange)="selectItem(data,$event)"></td>
-    <td class="round-tag tag-form">{{data.name}}</td>
-    <td>{{data.key_}}</td>
-    <td>{{data.usedcount}}</td>
-    <td>
-      <span *ngIf="data.status == 0">启用</span>
-      <span *ngIf="data.status == 1">禁用</span>
+    <tr *ngFor="let data of checkTable.data">
+      <td class="tag-form">
+        <ng-container *ngIf="data.status == 0">
+          <nz-tag *ngIf="data.priority == 4 || data.priority == 5" [nzColor]="color.red"></nz-tag>
+          <nz-tag *ngIf="data.priority == 2 || data.priority == 3" [nzColor]="color.yellow"></nz-tag>
+          <ng-container *ngIf="data.priority != 2 && data.priority != 3 && data.priority != 4 && data.priority != 5">
+            <nz-tag  [nzColor]="color.green"></nz-tag>
+          </ng-container>
+        </ng-container>
+        <ng-container *ngIf="data.status == 1">
+          <nz-tag [nzColor]="color.gray"></nz-tag>
+        </ng-container>
+        {{data.name}}</td>
+      <td>{{data.lastvalue}}</td>
+      <td>{{data.lastclock}}</td>
+      <td>{{data.itemType}}</td>
+      <td>{{data.delay}}</td>
+      <td class="main-color cursor main-color">
+        <span *ngIf="data.value_type == 0 || data.value_type == 3" (click)="showImageModal(data)">图表</span>
       </td>
-    <td class="main-color cursor">
-      <span (click)="showEditModal(data)">编辑</span>
-      <span (click)="deleteCheck(data)">删除</span>
+      <td class="handle cursor main-color">
+        <ng-container *ngIf="!data.flags">
+          <span (click)="showEditModal(data)">编辑监测点</span>
+          <span (click)="deleteCheckItem(data)">删除监测点</span>
+          <br>
+          <span *ngIf="data.triggerCount == 0" (click)="showAddThresholdModal(data)">添加阈值</span>
+          <span *ngIf="data.triggerCount > 0" (click)="showEditThresholdModal(data)">编辑阈值</span>
+        </ng-container>
+        <span *ngIf="data.status == 0 && data.state==0" (click)="updateItem(data.itemid,1)" style="color: red">停止</span>
+        <span *ngIf="data.status == 0 && data.state==1" (click)="updateItem(data.itemid,1)" style="color: red">不支持的</span>
+        <span *ngIf="data.status == 1 && data.state==0" (click)="updateItem(data.itemid,0)" style="color: green">启用</span>
+        <span *ngIf="data.status == 1 && data.state==1" (click)="updateItem(data.itemid,0)" style="color: green">启用</span>
       </td>
     </tr>
     </tbody>
-</nz-table>
+  </nz-table>
+</div>
 
 <!--监控项-->
 <smart-check #smartCheck (done)="getList()"></smart-check>

src/main/webapp/app/overAll/template/list/item-list/item-list.component.ts

 import {Component, OnInit, ViewChild} from '@angular/core';
 import {OverAllService} from '../../../overAll.service';
 import {ActivatedRoute, Router} from '@angular/router';
-import {pageSize} from '../../../../app.constants';
+import {color, pageSize} from '../../../../app.constants';
 import {CheckPrototypeComponent} from '../../modal/check-prototype/check-prototype.component';
 import {SystemService} from '../../../../system/system.service';
 import {CommonService} from '../../../../shared/common/common.service';
@@ -10,7 +10,31 @@ import {NzMessageService} from 'ng-zorro-antd';
 @Component({
   selector: 'smart-item-list',
   templateUrl: './item-list.component.html',
-  styles: []
+  styles: [
+      `
+          .checkTags {
+              position: absolute;
+              top: 12px;
+              left: 233px;
+              z-index: 989;
+          }
+          .time-select{
+              position: absolute;
+              top: 55px;
+              right: 15px;
+              z-index: 999;
+          }
+          .select-border{
+              border: 1px solid #6097b7;
+              border-radius: 5px;
+              padding: 2px;
+              margin-right: 5px;
+          }
+          :host ::ng-deep .tabs-smart .ant-tabs-nav-scroll div.ant-tabs-tab:nth-child(3){
+              margin-right: 180px !important;
+          }
+      `
+  ]
 })
 export class ItemListComponent implements OnInit {
     @ViewChild('smartCheckProtoType') smartCheckProtoType: CheckPrototypeComponent;
@@ -19,17 +43,26 @@ export class ItemListComponent implements OnInit {
     disName;
     hostId;
     discoveryids;
-
     loading = false;
-    pageNum = 1;
-    pageCount = pageSize;
-    totalNum;
-
-    checkList;
+    color = color;
+
+    //
+    checkList: any[];
+    itemTypeList: any[];
+    isCheck = false;
+    searchName;
+    changeStates;
+    checkStatus = {
+        warning: null,
+        normal: null,
+        disabled: null,
+        high: null
+    };
 
-    selectList = [];
-    allChecked;
-    indeterminate;
+    //分页--监控点
+    pageIndex = 1;  //当前页数
+    totalNum;   //总数据长度
+    applicationId;    //分类ID
 
     constructor(private overAllSer: OverAllService, private routerInfo: ActivatedRoute, private router: Router,
                 private message: NzMessageService, private systemSer: SystemService,
@@ -38,58 +71,42 @@ export class ItemListComponent implements OnInit {
             (res) => {
                 this.discoveryids = res.discoveryids;
                 this.tempName = res.name;
-                this.hostId = res.hostId;
+                this.hostId = res.templateid;
             }
         );
     }
 
-    checkAll(value: boolean): void {
-        this.checkList.forEach(data => data.checked = value);
-        this.refreshStatus();
-    }
-
-    currentPageDataChange($event: Array<{ checked: boolean }>): void {
-        this.checkList = $event;
-    }
-
-    selectItem(item, e) {
-        if (e) {
-            this.selectList.push(item);
-        } else {
-            this.selectList.forEach((value, index) => {
-                if (value.id == item.id) {
-                    this.selectList.splice(index, 1);
-                }
-            });
-        }
-        this.refreshStatus();
-    }
-
-    refreshStatus(): void {
-        const allChecked = this.checkList.every(value => value.checked === true);
-        const allUnChecked = this.checkList.every(value => !value.checked);
-        this.allChecked = allChecked;
-        this.indeterminate = (!allChecked) && (!allUnChecked);
+    ngOnInit(){
+        this.getList();
     }
 
-    ngOnInit() {
-        this.getList();
+    //添加or编辑监测点 之后
+    getList(){
+        this.getCheckList();
+        this.findItemType();
     }
 
-    //翻页
+    //分页
     change(e) {
-        this.pageNum = e;
-        this.getList();
+        this.pageIndex = e;
+        this.getCheckList();
     }
 
-    getList() {
+    //监测点列表
+    getCheckList() {
+        this.getCheckStatus();
         this.loading = true;
         const data = {
-            pageNum: this.pageNum,
-            pageCount: this.pageCount,
-            discoveryids: [this.discoveryids]
+            pageNum: this.pageIndex,
+            pageCount: pageSize,
+            obj:{
+                applicationid: this.applicationId,
+                hostid: this.hostId,
+                priorityName:this.changeStates,
+                name:this.searchName
+            }
         };
-        this.overAllSer.findItemPrototype(data).subscribe(
+        this.overAllSer.findCheckByType(data).subscribe(
             (res) => {
                 this.checkList = res.data.data;
                 this.totalNum = res.data.totalNum;
@@ -98,59 +115,45 @@ export class ItemListComponent implements OnInit {
         );
     }
 
-    //新增监控项原型
-    showAddModal() {
-        this.smartCheckProtoType.showAddModal(this.hostId, this.discoveryids, '添加监控项原型');
+    changeType(item) {
+        this.pageIndex = 1;
+        if(item.name == "全部"){
+            this.changeStates = null;
         }
-
-    //编辑监控项原型
-    showEditModal(data) {
-        this.smartCheckProtoType.showEditModal(this.hostId, this.discoveryids, data.itemid, '编辑监控项原型');
+        this.applicationId = item.applicationid;
+        this.getCheckList();
     }
 
-    //单个删除
-    deleteCheck(item) {
-        this.commonSer.confirmThing('删除', '确定删除当前的监控项原型', () => {
+    //监控项分类
+    findItemType() {
         const data = {
-                ids: []
+            'hostids': []
         };
-            data.ids.push(item.itemid);
-            this.overAllSer.deleteItemPrototype(data).subscribe(
+        data.hostids.push(this.hostId);
+        this.overAllSer.findItemType(data).subscribe(
             (res) => {
-                    if (res.errCode == 10000) {
-                        this.message.success('删除成功');
-                        this.getList();
-                    } else {
-                        this.message.error(res.errMsg);
+                this.itemTypeList = res.data;
+                const data = {
+                    applicationid:'',
+                    name:'全部'
                 }
+                if (null!=res.data){
+                    this.itemTypeList.push(data);
+                }
+
             }
         );
-        });
     }
 
-    //批量删除
-    deleteBatchCheck() {
-        if (this.selectList.length == 0) {
-            this.message.warning('请选择需要删除的监控项原型');
-            return false;
-        }
-        this.commonSer.confirmThing('删除', '确定删除选择的监控项原型', () => {
-            const data = {
-                ids: this.selectList.map(e => {
-                    return e.itemid;
-                })
-            };
-            this.overAllSer.deleteItemPrototype(data).subscribe(
+    //监测点状态
+    getCheckStatus() {
+        this.overAllSer.findItemCount(this.hostId).subscribe(
             (res) => {
-                    if (res.errCode == 10000) {
-                        this.message.success('删除成功');
-                        this.getList();
-                    } else {
-                        this.message.error(res.errMsg);
+                if(res.errCode == 10000){
+                    this.checkStatus = res.data;
                 }
             }
         );
-        });
     }
 
 }

src/main/webapp/app/overAll/template/template.component.html

@@ -92,11 +92,10 @@
                 <span (click)="showDeleteGroupConfirm(item)">删除</span>
               </ng-container>
               <ng-container *ngIf="item.level">
-                <span (click)="showBasicCheckModal(item.templateid,item.host)">添加监测点</span>
+                <!--<span (click)="showBasicCheckModal(item.templateid,item.host)">添加监测点</span>-->
                 <!--<span (click)="showDiscoveryAddModal(item)">添加自动发现</span>-->
                 <span (click)="showTempEditModal(item)">编辑</span>
                 <span (click)="showDeleteConfirm(item)">删除</span>
-                <span (click)="showAlarm(item)">添加告警</span>
               </ng-container>
             </td>
           </tr>
@@ -124,11 +123,11 @@
           <span (click)="goToTri(item)">{{item.triggersCount}}</span>
         </td>
         <td class="handle main-color">
-          <span (click)="showBasicCheckModal(item.templateid,item.host)">添加监测点</span>
+          <!--<span (click)="showBasicCheckModal(item.templateid,item.host)">添加监测点</span>-->
           <span (click)="showDiscoveryAddModal(item.templateid,item.host)">添加自动发现</span>
           <span (click)="editBasicModal(item)">编辑</span>
           <span (click)="showDeleteConfirm(item)">删除</span>
-          <span (click)="showAlarm(item)">添加告警</span>
+          <!--<span (click)="showAlarm(item)">添加告警</span>-->
         </td>
       </tr>
     </ng-container>