Skip to content

W
witiumCloud2
Commit e21fd05b authored by zhuangzhuang's avatar zhuangzhuang
Browse files
Options

网关正则修改 

网关绑定的功能
登录页面
首页
parent 1ab544da
Hide whitespace changes
Inline Side-by-side
Showing with 381 additions and 36 deletions
src/app/extra/login/login.component.html
View file @ e21fd05b
<div class="mainCon">
<div class="loginPart">
<div class="online">
<div class="label">用户名</div>
<div class="value">
<input nz-input style="width: 100%;" [(ngModel)]="req.userName">
<div class="title">
辉度工业云平台<br>
</div>
<div class="loginPartOut">
<div class="loginPart">
<div class="online">
<div class="label">用户名</div>
<div class="value">
<input nz-input style="width: 100%;" [(ngModel)]="req.userName">
</div>
</div>
</div>
<div class="online">
<div class="label">密码</div>
<div class="value">
<input nz-input type="password" style="width: 100%;" [(ngModel)]="req.password">
<div class="online">
<div class="label">密码</div>
<div class="value">
<input nz-input type="password" style="width: 100%;" [(ngModel)]="req.password">
</div>
</div>
<div class="online">
<button nz-button nzType="primary" nzBlock (click)="login()">登录</button>
</div>
</div>
<div class="online">
<button nz-button nzType="primary" nzBlock (click)="login()">登录</button>
</div>
</div>
</div>
src/app/extra/login/login.component.scss
View file @ e21fd05b
.mainCon {
height: 100%;
width: 100%;
display: flex;
//display: flex;
justify-content:center;
align-items:Center;
background-color: lightgoldenrodyellow;
.loginPart {
width: 400px;
height: 300px;
margin: auto;
.online {
margin-bottom: 25px;
.label,.value {
display: inline-block;
}
.label {
width: 25%;
}
.value {
width: 75%;
background: url("../../../assets/bg/login.jpg");
.title{
color: #efefef;
display: block;
text-align: center;
font-size: 30px;
padding-top: 80px;
}
.loginPartOut{
width: 1000px;
height: 450px;
margin: 3% auto;
background: url("../../../assets/bg/sbg.jpg");
.loginPart {
width: 300px;
height: 500px;
//margin: auto;
margin-left: 60%;
padding-top: 100px;
//padding-left: 60%;
.online {
margin-bottom: 25px;
.label,.value {
display: inline-block;
}
.label {
width: 25%;
}
.value {
width: 75%;
}
}
}
}
......
src/app/main/home/home.component.html
View file @ e21fd05b
111
<div>
<div class="center">
<nz-card class="flag" nzTitle="设备总数" >
<p>30012 </p><p>台 </p>
</nz-card>
<nz-card class="flag" nzTitle="在线数量" >
<p>30012 </p><p>台 </p>
</nz-card>
<nz-card class="flag" nzTitle="离线数量" >
<p>30012 </p><p>台 </p>
</nz-card>
<nz-card class="flag" nzTitle="报警消息" >
<p>30012 </p><p>台 </p>
</nz-card>
<div echarts [options] = "charLineOption" class="demo-chart"></div>
<div class= "Statistics"></div>
<div class= "Statistics"></div>
</div>
<!--<nz-card style="width:300px;" class="flag" nzTitle="��������" [nzExtra]="extraTemplate">-->
<!--<p>21 ��</p>-->
<!--</nz-card>-->
<div class = "right" >
<div echarts [options] = "chartRadarOption" class="demo-chart"></div>
<p>Static</p>
<div class= "Statistics"></div>
<div class= "Statistics"></div>
</div>
</div>
src/app/main/home/home.component.scss
View file @ e21fd05b
.div2{
height: 50%;
.flagTop{
width: 10%;
height: 50%;
display: inline-block;
vertical-align: top;
background-color: #ffffff;
margin-right: 1%;
margin-left: 1%;
border-radius:0 0 10px 10px;
.data{
// font-size := {{datasize}};
position:relative;
top:10%;
}
.title{
position:relative;
top:10%;
color: #bfc0c2;
// font-size: 10px;
}
}
}
//.div1{
// vertical-align: top;
// margin-right: 1%;
// margin-left: 1%;
// .flag{
// margin-top: 2%;
// display: inline-block;
// vertical-align: top;
// margin-right: 1%;
// margin-left: 1%;
// }
// .divright{
// float: left;
// position: relative;
// right:-100px;
// margin-left: -100px;
// width: 100px;
// background: gray;
// }
//}
.center{
padding-right : 50px;
display:inline-block;
vertical-align: top;
}
.flag{
display: inline-block;
width:200px;
margin: 10px 10px 15px 10px;
border-radius:0 0 10px 10px;
}
.Statistics{
border-radius:10px 10px 10px 10px;
width:260px;
height: 80px;
background-color:azure;
margin:auto;
margin-top: 10px;
}
.right{
display:inline-block;
width:300px;
background: white;
}
src/app/main/home/home.component.ts
View file @ e21fd05b
......@@ -17,10 +17,97 @@ export class HomeComponent implements OnInit {
private translate: TranslateService, private router: Router) {
}
chartRadarOption;
charLineOption;
ngOnInit() {
this.init();
}
init() {
this.chartRadarOption = {
title: {
text: '浏览器占比变化',
subtext: '纯属虚构',
top: 10,
left: 10
},
tooltip: {
trigger: 'item',
backgroundColor : 'rgba(0,0,250,0.2)'
},
legend: {
type: 'scroll',
bottom: 10,
data: (function (){
var list = [];
for (var i = 1; i <=28; i++) {
list.push(i + 2000 + '');
}
return list;
})()
},
visualMap: {
top: 'middle',
right: 10,
color: ['blue', 'green'],
calculable: true
},
radar: {
indicator : [
{ text: '离线报警', max: 400},
{ text: '阈值报警', max: 400},
{ text: '', max: 400},
{ text: 'Firefox', max: 400},
{ text: 'Chrome', max: 400}
]
},
series : (function (){
var series = [];
for (var i = 1; i <= 1; i++) {
series.push({
name:'浏览器',
type: 'radar',
symbol: 'none',
lineStyle: {
width: 1
},
emphasis: {
areaStyle: {
color: 'rgba(0,250,0,0.3)'
}
},
data:[
{
value:[
(40 - i) * 10,
(38 - i) * 4 + 60,
i * 5 + 10,
i * 9,
i * i /2
],
name: i + 2000 + ''
}
]
});
}
return series;
})()
};
this.charLineOption = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
}]
};
}
}
src/app/main/sensor-detail/sensor-detail.component.html
View file @ e21fd05b
......@@ -144,10 +144,10 @@
</nz-tab>
<nz-tab nzTitle="图表">
<div class="cards">
<div class="card" *ngFor="let one of actualData">
<div class="card" *ngFor="let one of actualData;let i = index">
<div class="title">
{{one.name}}
<div class="rightSpan canClick" (click)="isClose = true">查看数据</div>
{{one.alias}}
<div class="rightSpan canClick" (click)="OnReqHistroyChart(i)">查看数据</div>
</div>
<div class="middle">
<div class="left">{{one.value}}{{one.unit === '-' ? '' : one.unit}}</div>
......@@ -172,8 +172,7 @@
<button nz-button class="searchBtn" [nzType]="'primary'" [nzLoading]="isLoading" (click)="onSearch()">
<span>{{'search' | translate}}</span></button>
<nz-tabset style="border-top: 1px solid #cccccc">
<nz-tab nzTitle="表格">111</nz-tab>
<nz-tab nzTitle="图表">222</nz-tab>
<nz-tab nzTitle="图表"><div echarts [options] = "chartOption" class="demo-chart"></div></nz-tab>
</nz-tabset>
<div class="btnLine">
<button nz-button class="searchBtn" [nzType]="'default'" [nzLoading]="isLoading" (click)="isClose = false;">
......
src/app/main/sensor-detail/sensor-detail.component.scss
View file @ e21fd05b
......@@ -20,6 +20,7 @@
.right {
text-align: right;
}
.left, .right {
width: 50%;
display: inline-block;
......
src/app/main/sensor-detail/sensor-detail.component.ts
View file @ e21fd05b
......@@ -5,6 +5,7 @@ import {ActivatedRoute, Router} from '@angular/router';
import {fadeIn} from '../../animation/fade-in';
import {TranslateService} from '@ngx-translate/core';
import {CheckService} from '../../service/check';
import {formatDate} from '@angular/common';
@Component({
selector: 'app-sensor-detail',
......@@ -32,6 +33,7 @@ export class SensorDetailComponent implements OnInit {
probsModels = [];
topicModels = [];
actualData = [];
histData = [];
toSeeData = [];
wayData = [];
selectTime3 = 24;
......@@ -42,6 +44,14 @@ export class SensorDetailComponent implements OnInit {
try = {};
sn;
type;
chartOption;
historyDate = [];
historyData = [];
hisDataBeforeNow;
hisDataBeforeTime;
hisTopicName;
hisAlias;
hisDevInfo;
constructor(private api: ApiService, private message: NzMessageService, private router: Router, private ck: CheckService,
private ac: ActivatedRoute, private modalService: NzModalService, private translate: TranslateService) {
......@@ -135,7 +145,7 @@ export class SensorDetailComponent implements OnInit {
getCurrent() {
this.isLoading = true;
this.api.data.getRealData([{sn: this.sn, type: this.type}, (data) => {
this.api.data.getRealData([{sn: this.sn, type: this.type }, (data) => {
if (data && data.constructor === Array) {
this.actualData = data;
} else {
......@@ -144,6 +154,125 @@ export class SensorDetailComponent implements OnInit {
this.isLoading = false;
}]);
}
// frank
format(timestamp, format) {
const date = new Date(timestamp);
const o = {
'M+': date.getMonth() +1,
'd+': date.getDate(),
'h+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds(),
'q+': Math.floor((date.getMonth() +3) /3),
S: date.getMilliseconds(),};
let formatString = format;
if (/(y+)/.test(format)) {
formatString = format.replace(RegExp.$1, (`${date.getFullYear()}`).substr(4 - RegExp.$1.length));
}
Object.keys(o).forEach((key) => {
if (new RegExp(`(${key})`).test(format)) {
formatString = formatString.replace(RegExp.$1, RegExp.$1.length === 1 ? o[key] : (`00${o[key]}`).substr(`${o[key]}`.length));
}
}
);
return formatString;
}
getHistoryData(): void {
this.hisTopicName = 'Witium/' + this.type + '/' + this.sn + '/' + 'Data';
this.api.data.getHisData([{ alias: this.hisDevInfo.alias, deviceList: [{sn: this.hisDevInfo.SN,
type: this.hisDevInfo.dType}], endTime: this.selectTime3 ? new Date().getTime() : this.req3.startTime,
offset: 0 - new Date().getTimezoneOffset() / 60,
startTime: this.selectTime3 ? new Date().getTime() - this.selectTime3 * 60 * 60 * 1000 : this.req3.startTime,
topicName: this.hisTopicName}, (data) => {
if (data && data.constructor === Array) {
this.historyDate = [];
this.historyData = [];
this.histData = data;
data.map((item, index) => {
item.dataList.map((item2, index2) => {
// this.message.error(item2.value);
// this.message.error(parseFloat(item2.value).toFixed(2));
// this.historyDate.push(formatDate(new Date(item2.time), 'yyyy-MM-dd', 'cn'));
this.historyDate.push(this.format(item2.time, 'yyyy-MM-dd hh:mm:ss'));
this.historyData.push(parseFloat(item2.value).toFixed(2));
});
});
this.chartOption = {
tooltip: {
trigger: 'axis',
position: (pt) => {
return [pt[0], '10%'];
},
formatter: (a) => {
// console.log(a);
return a[0].value + this.hisDevInfo.unit;
}
// '{c}' + this.hisDevInfo.unit
},
title: {
left: 'center',
text: '历史数据图',
},
toolbox: {
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: this.historyDate,
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%'],
},
dataZoom: [{
type: 'inside',
start: 0,
end: 10
}, {
start: 0,
end: 10,
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.' +
'3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
handleSize: '80%',
handleStyle: {
color: '#fff',
shadowBlur: 3,
shadowColor: 'rgba(0, 0, 0, 0.6)',
shadowOffsetX: 2,
shadowOffsetY: 2
}
}],
series: [
{
name: '数据',
type: 'line',
smooth: true,
symbol: 'none',
sampling: 'average',
itemStyle: {
color: 'rgb(0, 86, 145)'
},
data: this.historyData
}
]
};
} else {
this.message.error(data && data.message ? data.message : '获取数据失败');
}
this.isLoading = false;
}]);
}
toDetail(one) {
this.router.navigate(['/app/deviceCenter/sensorMgr/sensorDetail/sensorTopicWay'],
......@@ -151,6 +280,7 @@ export class SensorDetailComponent implements OnInit {
}
onSearch() {
this.getHistoryData();
}
close() {
......@@ -272,6 +402,11 @@ export class SensorDetailComponent implements OnInit {
this.ToSeeList = value;
}
OnReqHistroyChart(index) {
this.isClose = true;
this.hisDevInfo = this.actualData[index];
}
onSearchToSee() {
const req = {
alias: this.ToSeeList.alias,
......
src/assets/bg/login.jpg 0 → 100644
View file @ e21fd05b
This diff is collapsed.
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