Commit e921b293 authored by wangqinghua's avatar wangqinghua

服务器

parent c5e0ddb9
......@@ -20,6 +20,15 @@ export const ThemeList = [
{value: 'dark', label: '深色主题'},
];
export const colorObj = {
dark:{
fontColor:'#b7d1f1',
},
white:{
fontColor:'#333'
}
}
//流量单位
export const UnitList = [
{'label': 'bps', value: 'bps'},
......
......@@ -148,7 +148,7 @@ export class TopologyViewComponent implements OnInit, AfterViewInit {
response.forEach(e1 => {
arr.forEach(e2 => {
if (e1.linkId == e2.id) {
e2.text = '进口流量:' + e1.fullValueIn + ' 出口流量:' + e1.fullValueOut;
e2.text = 'In:' + e1.fullValueIn + ' Out:' + e1.fullValueOut;
}
});
});
......
......@@ -11,11 +11,11 @@
</span>
</div>
<div nz-col [nzSpan]="12" style="text-align: right">
<nz-select style="width: 100px;" [(ngModel)]="theme" (ngModelChange)="changeTheme()">
<ng-container *ngFor="let item of themeList">
<nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>
</ng-container>
</nz-select>
<!-- <nz-select style="width: 150px;margin-right: 20px" [(ngModel)]="theme" (ngModelChange)="changeTheme()">-->
<!-- <ng-container *ngFor="let item of themeList">-->
<!-- <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>-->
<!-- </ng-container>-->
<!-- </nz-select>-->
<nz-dropdown [nzTrigger]="'click'">
<a nz-dropdown>{{user.loginName}}<i class="anticon anticon-down"></i>
</a>
......
......@@ -38,6 +38,7 @@
<div nz-col nzSpan="12" class="layui-header ">
<ng-container *ngIf="editType == '只读模式'">
<nz-select style="width: 200px;" nzPlaceHolder="选择背景色" [(ngModel)]="backgroundColor" (ngModelChange)="changeColor()">
<nz-option nzLabel="深蓝" nzValue="#3d76ab"></nz-option>
<nz-option nzLabel="白色" nzValue="#ffffff"></nz-option>
<nz-option nzLabel="淡绿" nzValue="#cadf91"></nz-option>
<nz-option nzLabel="棕色" nzValue="#cbb492"></nz-option>
......@@ -76,7 +77,7 @@
</ng-container>
</div>
</div>
<div class="container">
<div class="topo-container">
<div class="layui-row">
<div class="layui-col-md12">
<div #topologyBody id="topology-body" class="topology-context">
......@@ -131,4 +132,4 @@
<smart-check #smartCheck (done)="setCheckList($event)"></smart-check>
<!--选择资源-->
<smart-select-radio-group #smartSelectRadioGroup (done)="setImg($event)"></smart-select-radio-group>
\ No newline at end of file
<smart-select-radio-group #smartSelectRadioGroup (done)="setImg($event)"></smart-select-radio-group>
......@@ -426,7 +426,7 @@ export class NeTopologyComponent implements OnInit, DoCheck, AfterViewInit, OnDe
response.forEach(e1=>{
arr.forEach(e2=>{
if(e1.linkId == e2.id){
e2.text = "进口流量:"+e1.fullValueIn+" 出口流量:"+e1.fullValueOut;
e2.text = "In:"+e1.fullValueIn+" Out:"+e1.fullValueOut;
}
})
});
......
......@@ -89,16 +89,16 @@
<div class="host-item-content" style="height: 300px;">
<nz-row>
<nz-col nzSpan="16">CPU利用率(%):</nz-col>
<nz-col nzSpan="8">{{hostObj.cpu}}</nz-col>
<nz-col nzSpan="8">{{hostObj.cpu || '-'}}</nz-col>
</nz-row>
<nz-row>
<nz-col nzSpan="16">Ping延时(ms):</nz-col>
<nz-col nzSpan="8">{{hostObj.response}}</nz-col>
<nz-col nzSpan="8">{{hostObj.response || '-'}}</nz-col>
</nz-row>
<nz-row>
<nz-col nzSpan="16">内存利用率(%):</nz-col>
<nz-col nzSpan="8">{{hostObj.used}}</nz-col>
<nz-col nzSpan="8">{{hostObj.used || '-'}}</nz-col>
</nz-row>
<!-- <nz-row>-->
<!-- <nz-col nzSpan="16">CPU个数:</nz-col>-->
......
......@@ -115,7 +115,7 @@ export class ServerComponent implements OnInit {
this.overAllSer.responseTime(this.hostId).subscribe(
(res) => {
if (res.data) {
this.hostObj.response = res.data.response;
this.hostObj.response = res.data.responseTime;
} else {
this.hostObj.response = 0;
}
......
......@@ -176,7 +176,7 @@ function TopologyEditor() {
nodeShadow: false, // 节点是否显示阴影
nodeShadowColor: 'rgba(0,0,0,0.5)', // 节点阴影的颜色
nodeFont: '18px Consolas', // 节点字体
nodeFontColor: 'black', // 节点文字颜色,如"255,255,0"
nodeFontColor: '177,209,239', // 节点文字颜色,如"255,255,0"
nodeDefaultWidth: 32, // 新建节点默认宽
nodeDefaultHeight: 32, // 新建节点默认高
nodeBorderColor: 'black', // 节点容器边框颜色,如"255,255,0"
......@@ -185,8 +185,8 @@ function TopologyEditor() {
nodeScale: 0.2, // 节点缩放幅度(此处保证X和Y均等缩放)
// Link属性
linkAlpha: 1, // 连线透明度,取值范围[0-1]
linkStrokeColor: '0,0,0', // 连线的颜色
linkFillColor: '0,0,0',
linkStrokeColor: '177,209,239', // 连线的颜色
linkFillColor: '177,209,239',
linkShadow: false, // 是否显示连线阴影
linkShadowColor: 'rgba(0,0,0,0.5)',
linkFont: '25px Consolas', // 节点字体
......@@ -647,14 +647,14 @@ TopologyEditor.prototype.init = function (topologyGuid, backImg, topologyJson,ca
// 只处理双击节点事件
if (event.target instanceof JTopo.Node && editor.stageMode === 'edit') {
const nodeObj = {
var nodeObj = {
name:event.target.text,
hostId:event.target.hostId
}
localStorage.setItem("node",'true');
localStorage.setItem("nodeObj",JSON.stringify(nodeObj));
} else if (event.target instanceof JTopo.Link && editor.stageMode === 'edit') {
const lineObj = {
var lineObj = {
hostIds:[],
itemId:event.target.itemId
}
......@@ -1184,11 +1184,11 @@ editor.utils = {
link[0].itemId = "";
link[0].text = "";
if(inItem){
link[0].text = "进口流量:"+inItem.name;
link[0].text = "In:"+inItem.name;
link[0].itemId = (inItem.itemId)
}
if(outItem){
link[0].text += " 出口流量:"+outItem.name;
link[0].text += " Out:"+outItem.name;
link[0].itemId += "," +(outItem.itemId);
}
},
......
......@@ -182,4 +182,7 @@ $fontColor: #b7d1f1;
transition: all 500ms;
}
}
.topology-context {
background: rgba(0, 0, 0, 0.2);
}
}
......@@ -62,3 +62,110 @@
flex: #{$j};
}
}
//UI框架
.container {
height: 100%;
padding: 0 16px;
}
nz-header {
padding: 0 16px;
}
//自己写的
//主机详情
.host-item-title {
padding: 10px 15px;
height: 50px;
line-height: 30px;
}
.database-name {
padding: 2px 5px;
border-radius: 5px;
font-size: 12px;
}
.host-item-content {
padding: 10px;
height: 400px;
position: relative;
nz-row {
nz-col:nth-child(2n +1) {
text-align: right;
margin-bottom: 10px;
}
nz-col:nth-child(2n) {
text-align: left;
margin-bottom: 10px;
}
}
}
.host-item-table {
padding: 10px;
height: 400px;
nz-col {
padding: 5px 10px;
}
.table-title {
nz-col {
border: 1px solid #597cb5;
}
}
.table-content {
border-bottom: 1px solid #597cb5;
}
}
.dataChart {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
font-size: 12px;
p {
margin-bottom: 10px;
}
p:nth-child(2n) {
text-align: right;
border-bottom: 1px solid #b7d1f1;
}
p:nth-child(2n +1) {
text-align: left;
}
}
.time-group {
position: absolute;
right: 10px;
top: 10px;
z-index: 9;
}
.width-host {
position: relative;
width: 80%;
margin: 0 auto;
height: 23px;
.space{
height: 23px;
transition: all 500ms;
}
}
.white{
.container{
background-color: #fff;
padding: 0 16px;
.white {
//自己写的
//主机详情
.host-item-title {
color: #4b4b4b;
padding: 10px 15px;
height: 50px;
line-height: 30px;
}
nz-header{
background: #fff;
padding: 0 16px;
border-bottom: 1px solid #e5e5e5;
.database-name {
border: 1px solid #4b4b4b;
color: #4b4b4b;
padding: 2px 5px;
border-radius: 5px;
font-size: 12px;
}
.host-item-content {
color: #4b4b4b;
padding: 10px;
height: 400px;
border: 1px solid #eee;
border-radius: 5px;
position: relative;
nz-row {
nz-col:nth-child(2n +1) {
color: #4b4b4b;
text-align: right;
margin-bottom: 10px;
}
nz-col:nth-child(2n) {
color: #4b4b4b;
text-align: left;
margin-bottom: 10px;
}
}
}
.host-item-table {
color: #4b4b4b;
padding: 10px;
height: 400px;
border: 1px solid #eee;
border-radius: 5px;
nz-col {
padding: 5px 10px;
}
.table-title {
background-color: rgba(0, 0, 0, .4);
nz-col {
border: 1px solid #dddddd;
}
}
.table-content {
border-bottom: 1px solid #dddddd;
}
}
.dataChart {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
font-size: 12px;
p {
margin-bottom: 10px;
}
p:nth-child(2n) {
text-align: right;
border-bottom: 1px solid #dddddd;
}
p:nth-child(2n +1) {
text-align: left;
}
}
.time-group {
position: absolute;
right: 10px;
top: 10px;
z-index: 9;
}
.width-host {
position: relative;
width: 80%;
margin: 0 auto;
background-color: #e5e5e5;
height: 23px;
.space{
height: 23px;
background-color: #89d885;
transition: all 500ms;
}
}
}
......@@ -10,7 +10,7 @@
"noImplicitAny": false,
"skipLibCheck": true,
"suppressImplicitAnyIndexErrors": true,
"outDir": "build/www/app",
"outDir": "build/wx/app",
"lib": ["es7", "dom"],
"typeRoots": [
"node_modules/@types"
......
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