Skip to content

IoTSharp
IoTSharp

IoTSharp / IoTSharp
12 个月 前同步成功

通知 15
Star 2
Fork 0
IoTSharp
IoTSharp

体验新版 GitCode，发现更多精彩内容 >>

提交 cadb270a 编写于 作者: W wq1234wq
浏览文件
操作

devicegraph

上级 93ab8f4b
隐藏空白更改
内联 并排
Showing with 504 addition and 247 deletion
IoTSharp/ClientApp/src/app/routes/device/devicegraph/devicegraph.component.html
浏览文件 @ cadb270a
......@@ -28,6 +28,10 @@
style="float: left; width: 100%"></div>
</nz-content>
<nz-sider nzTheme="light" nzWidth="400px" style="padding: 1rem">
<nz-tabset>
<nz-tab nzTitle="设备属性"></nz-tab>
<nz-tab nzTitle="端口配置">
......
IoTSharp/ClientApp/src/app/routes/device/devicegraph/devicegraph.component.ts
浏览文件 @ cadb270a
import { ChangeDetectorRef, Component, ElementRef, Input, OnInit, Type, ViewChild } from '@angular/core';
import { Graph, Edge, Shape, NodeView, Cell, Color } from '@antv/x6';
import { Graph, NodeView, Shape } from '@antv/x6';
import { STColumn, STColumnTag, STComponent, STData } from '@delon/abc/st';
import { SettingsService } from '@delon/theme';
import { Subscription } from 'rxjs';
import { DeviceItem, port } from './models/data';
import { Device, GateWay } from './models/shape';
@Component({
selector: 'app-devicegraph',
......@@ -525,11 +528,22 @@ export class DevicegraphComponent implements OnInit {
]);
});
this.graph.on('cell:click', ({ e, x, y, cell, view }) => {
var device = cell as Device;
var port = device.getPort(e.target.attributes.port.value);
device.setPortProp(port.id, 'attrs/circle', { fill: '#0000ff', stroke: '#fff' })
});
this.graph.on('edge:click', ({ e, x, y, edge, view }) => {
})
this.graph.on('cell:mousedown', ({ cell }) => {
// cell.removeTools(); //只读状态下移除Node中的操作按钮
});
this.graph.on('node:click', (e) => {
this.graph.on('node:click', (e, x, y, node, view) => {
var matadata = e.node.getProp('Biz');
this.graph.getNodes;
......@@ -781,6 +795,9 @@ export class DevicegraphComponent implements OnInit {
);
node.setPortLabelMarkup;
this.data.splice(this.data.indexOf(data.Biz), 1);
}
dragEnd(event) { }
......@@ -836,248 +853,6 @@ export class DevicegraphComponent implements OnInit {
console.log(graph);
}
}
export interface DeviceItem {
devicename: string;
id: string;
type: string;
logo: string;
image: string;
remark: string;
prop: any;
ports: any;
}
export interface DeviceInfo {
Income: string[];
OutGoing: string[];
Label: string;
LocationX: number;
LocationY: number;
Width: number;
Height: number;
Type: string;
}
class Device extends Shape.Rect {
getInPorts() {
return this.getPortsByGroup('in');
}
getOutPorts() {
return this.getPortsByGroup('out');
}
getUsedInPorts(graph: Graph) {
const incomingEdges = graph.getIncomingEdges(this) || [];
return incomingEdges.map((edge: Edge) => {
const portId = edge.getTargetPortId();
return this.getPort(portId!);
});
}
getNewInPorts(length: number) {
return Array.from(
{
length,
},
() => {
return {
group: 'in',
};
},
);
}
updateInPorts(graph: Graph) {
const minNumberOfPorts = 1;
const ports = this.getInPorts();
const usedPorts = this.getUsedInPorts(graph);
const newPorts = this.getNewInPorts(Math.max(minNumberOfPorts - usedPorts.length, 1));
if (ports.length === minNumberOfPorts && ports.length - usedPorts.length > 0) {
// noop
} else if (ports.length === usedPorts.length) {
// this.addPorts(newPorts);
} else if (ports.length + 1 > usedPorts.length) {
this.prop(['ports', 'items'], this.getOutPorts().concat(usedPorts).concat(newPorts), {
rewrite: true,
});
}
return this;
}
}
Device.config({
label: '',
attrs: {
root: {
magnet: false,
},
body: {
fill: '#eeffee',
stroke: '#d9d9d9',
strokeWidth: 1,
},
},
ports: {
groups: {
in: {
position: {
name: 'right',
},
attrs: {
portBody: {
magnet: 'passive',
r: 6,
stroke: '#ff0000',
fill: '#fff',
strokeWidth: 2,
},
},
},
out: {
position: {
name: 'left',
},
attrs: {
portBody: {
magnet: true,
r: 6,
fill: '#fff',
stroke: '#3199FF',
strokeWidth: 2,
},
},
},
},
},
portMarkup: [
{
tagName: 'circle',
selector: 'portBody',
},
],
});
class GateWay extends Shape.Rect {
initports(data: any) {
const ports = this.getInPorts();
console.log(data);
console.log(this.ports);
for (var item of data.ports) {
this.addPort(item);
}
return this;
}
getInPorts() {
return this.getPortsByGroup('in');
}
getOutPorts() {
return this.getPortsByGroup('out');
}
getUsedInPorts(graph: Graph) {
const incomingEdges = graph.getIncomingEdges(this) || [];
return incomingEdges.map((edge: Edge) => {
const portId = edge.getTargetPortId();
return this.getPort(portId!);
});
}
getNewInPorts(length: number) {
return Array.from(
{
length,
},
() => {
return {
group: 'in',
};
},
);
}
// updateInPorts(graph: Graph) {
// const minNumberOfPorts = 8;
// const ports = this.getInPorts();
// const usedPorts = this.getUsedInPorts(graph);
// const newPorts = this.getNewInPorts(Math.max(minNumberOfPorts - usedPorts.length, 1));
// if (ports.length === minNumberOfPorts && ports.length - usedPorts.length > 0) {
// // noop
// } else if (ports.length === usedPorts.length) {
// this.addPorts(newPorts);
// } else if (ports.length + 1 > usedPorts.length) {
// this.prop(['ports', 'items'], this.getOutPorts().concat(usedPorts).concat(newPorts), {
// rewrite: true,
// });
// }
// return this;
// }
}
GateWay.config({
attrs: {
root: {
magnet: false,
},
body: {
fill: '#ffa940',
stroke: '#d9d9d9',
strokeWidth: 1,
},
},
ports: {
groups: {
in: {
label: {
position: 'left',
},
position: {
name: 'right',
},
attrs: {
portBody: {
magnet: 'passive',
r: 6,
stroke: '#ff0000',
fill: '#fff',
strokeWidth: 2,
},
},
},
out: {
position: {
name: 'left',
},
label: {
position: 'right',
},
attrs: {
portBody: {
magnet: true,
r: 6,
fill: '#fff',
stroke: '#3199FF',
strokeWidth: 2,
},
},
},
},
},
portMarkup: [
{
tagName: 'circle',
selector: 'portBody',
},
],
});
export interface port {
portid: number;
portName: string;
portType: number;
portPhyType: number;
}
IoTSharp/ClientApp/src/app/routes/device/devicegraph/models/data.ts 0 → 100644
浏览文件 @ cadb270a
export interface DeviceItem {
devicename: string;
id: string;
type: string;
logo: string;
image: string;
remark: string;
prop: any;
ports: any;
}
export interface DeviceInfo {
Income: string[];
OutGoing: string[];
Label: string;
LocationX: number;
LocationY: number;
Width: number;
Height: number;
Type: string;
}
export interface port {
portid: number;
portName: string;
portType: number;
portPhyType: number;
}
\ No newline at end of file
IoTSharp/ClientApp/src/app/routes/device/devicegraph/models/shape.ts 0 → 100644
浏览文件 @ cadb270a
import { Graph, Edge, Shape, NodeView, Cell, Color } from '@antv/x6';
export class Device extends Shape.Rect {
getInPorts() {
return this.getPortsByGroup('in');
}
getOutPorts() {
return this.getPortsByGroup('out');
}
getUsedInPorts(graph: Graph) {
const incomingEdges = graph.getIncomingEdges(this) || [];
return incomingEdges.map((edge: Edge) => {
const portId = edge.getTargetPortId();
return this.getPort(portId!);
});
}
getNewInPorts(length: number) {
return Array.from(
{
length,
},
() => {
return {
group: 'in',
};
},
);
}
updateInPorts(graph: Graph) {
const minNumberOfPorts = 1;
const ports = this.getInPorts();
const usedPorts = this.getUsedInPorts(graph);
const newPorts = this.getNewInPorts(Math.max(minNumberOfPorts - usedPorts.length, 1));
if (ports.length === minNumberOfPorts && ports.length - usedPorts.length > 0) {
// noop
} else if (ports.length === usedPorts.length) {
// this.addPorts(newPorts);
} else if (ports.length + 1 > usedPorts.length) {
this.prop(['ports', 'items'], this.getOutPorts().concat(usedPorts).concat(newPorts), {
rewrite: true,
});
}
return this;
}
}
Device.config({
label: '',
attrs: {
root: {
magnet: false,
},
body: {
fill: '#eeffee',
stroke: '#d9d9d9',
strokeWidth: 1,
},
},
ports: {
groups: {
in: {
position: {
name: 'right',
},
attrs: {
portBody: {
magnet: 'passive',
r: 6,
stroke: '#ff0000',
fill: '#fff',
strokeWidth: 2,
},
},
},
out: {
position: {
name: 'left',
},
attrs: {
portBody: {
magnet: true,
r: 6,
fill: '#fff',
stroke: '#3199FF',
strokeWidth: 2,
},
},
},
},
},
portMarkup: [
{
tagName: 'circle',
selector: 'portBody',
},
],
});
export class GateWay extends Shape.Rect {
initports(data: any) {
const ports = this.getInPorts();
for (var item of data.ports) {
this.addPort(item);
}
return this;
}
getInPorts() {
return this.getPortsByGroup('in');
}
getOutPorts() {
return this.getPortsByGroup('out');
}
getUsedInPorts(graph: Graph) {
const incomingEdges = graph.getIncomingEdges(this) || [];
return incomingEdges.map((edge: Edge) => {
const portId = edge.getTargetPortId();
return this.getPort(portId!);
});
}
getNewInPorts(length: number) {
return Array.from(
{
length,
},
() => {
return {
group: 'in',
};
},
);
}
// updateInPorts(graph: Graph) {
// const minNumberOfPorts = 8;
// const ports = this.getInPorts();
// const usedPorts = this.getUsedInPorts(graph);
// const newPorts = this.getNewInPorts(Math.max(minNumberOfPorts - usedPorts.length, 1));
// if (ports.length === minNumberOfPorts && ports.length - usedPorts.length > 0) {
// // noop
// } else if (ports.length === usedPorts.length) {
// this.addPorts(newPorts);
// } else if (ports.length + 1 > usedPorts.length) {
// this.prop(['ports', 'items'], this.getOutPorts().concat(usedPorts).concat(newPorts), {
// rewrite: true,
// });
// }
// return this;
// }
}
GateWay.config({
attrs: {
root: {
magnet: false,
},
body: {
fill: '#ffa940',
stroke: '#d9d9d9',
strokeWidth: 1,
},
},
ports: {
groups: {
in: {
label: {
position: 'left',
},
position: {
name: 'right',
},
attrs: {
portBody: {
magnet: 'passive',
r: 6,
stroke: '#ff0000',
fill: '#fff',
strokeWidth: 2,
},
},
},
out: {
position: {
name: 'left',
},
label: {
position: 'right',
},
attrs: {
portBody: {
magnet: true,
r: 6,
fill: '#fff',
stroke: '#3199FF',
strokeWidth: 2,
},
},
},
},
},
portMarkup: [
{
tagName: 'circle',
selector: 'portBody',
},
],
});
\ No newline at end of file
IoTSharp/ClientApp/src/app/routes/device/devicegraph/panels/connectionedge/connectionedge.component.spec.ts 0 → 100644
浏览文件 @ cadb270a
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ConnectionedgeComponent } from './connectionedge.component';
describe('ConnectionedgeComponent', () => {
let component: ConnectionedgeComponent;
let fixture: ComponentFixture<ConnectionedgeComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ ConnectionedgeComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(ConnectionedgeComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
IoTSharp/ClientApp/src/app/routes/device/devicegraph/panels/connectionedge/connectionedge.component.ts 0 → 100644
浏览文件 @ cadb270a
import { Component, OnInit } from '@angular/core';
import { IBizData, IShapeData, IToolsPanel } from '../toolspanel';
@Component({
selector: 'app-connectionedge',
templateUrl: './connectionedge.component.html',
styleUrls: ['./connectionedge.component.less']
})
export class ConnectionedgeComponent implements OnInit,IToolsPanel {
constructor() { }
BizData: IBizData;
ShapeData: IShapeData;
ngOnInit(): void {
}
}
IoTSharp/ClientApp/src/app/routes/device/devicegraph/panels/devivceshape/devivceshape.component.spec.ts 0 → 100644
浏览文件 @ cadb270a
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { DevivceshapeComponent } from './devivceshape.component';
describe('DevivceshapeComponent', () => {
let component: DevivceshapeComponent;
let fixture: ComponentFixture<DevivceshapeComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ DevivceshapeComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(DevivceshapeComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
IoTSharp/ClientApp/src/app/routes/device/devicegraph/panels/devivceshape/devivceshape.component.ts 0 → 100644
浏览文件 @ cadb270a
import { Component, OnInit } from '@angular/core';
import { IBizData, IShapeData, IToolsPanel } from '../toolspanel';
@Component({
selector: 'app-devivceshape',
templateUrl: './devivceshape.component.html',
styleUrls: ['./devivceshape.component.less']
})
export class DevivceshapeComponent implements OnInit,IToolsPanel {
constructor() { }
BizData: IBizData;
ShapeData: IShapeData;
ngOnInit(): void {
}
}
IoTSharp/ClientApp/src/app/routes/device/devicegraph/panels/gatewayshape/gatewayshape.component.html 0 → 100644
浏览文件 @ cadb270a
<nz-tabset>
<nz-tab nzTitle="设备属性"></nz-tab>
<nz-tab nzTitle="端口配置">
<button nz-button [nzType]="'primary'" acl [acl-ability]="37">
<i nz-icon nzType="plus"></i>
<span>{{ 'button.new' | translate }}</span>
</button>
<st #st [page]="{ show: false }">
<ng-template st-row="portNameTpl" let-item let-index="index">
<input *ngIf="item.edit" nz-input [ngModel]="item.portname" (ngModelChange)="st.setRow(index, { portname: $event })" />
<ng-container *ngIf="!item.edit">{{ item.portname }}</ng-container>
</ng-template>
<ng-template st-row="portTypeTpl" let-item let-index="index">
<nz-select ngModel="item.iotype" *ngIf="item.edit" (ngModelChange)="st.setRow(index, { iotype: $event })">
<nz-option nzValue="1" nzLabel="输入"></nz-option>
<nz-option nzValue="2" nzLabel="输出"></nz-option>
</nz-select>
<ng-container *ngIf="!item.edit">{{ item.iotype }}</ng-container>
</ng-template>
<ng-template st-row="portPhyTypeTpl" let-item let-index="index">
<nz-select ngModel="item.type" *ngIf="item.edit" (ngModelChange)="st.setRow(index, { type: $event })">
<nz-option nzValue="1" nzLabel="以太网"></nz-option>
<nz-option nzValue="2" nzLabel="RS232"></nz-option>
<nz-option nzValue="3" nzLabel="RS485"></nz-option>
</nz-select>
<ng-container *ngIf="!item.edit">{{ item.type }}</ng-container>
</ng-template>
</st>
</nz-tab>
<nz-tab nzTitle="杂项"> </nz-tab>
</nz-tabset>
\ No newline at end of file
IoTSharp/ClientApp/src/app/routes/device/devicegraph/panels/gatewayshape/gatewayshape.component.spec.ts 0 → 100644
浏览文件 @ cadb270a
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { GatewayshapeComponent } from './gatewayshape.component';
describe('GatewayshapeComponent', () => {
let component: GatewayshapeComponent;
let fixture: ComponentFixture<GatewayshapeComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ GatewayshapeComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(GatewayshapeComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
IoTSharp/ClientApp/src/app/routes/device/devicegraph/panels/gatewayshape/gatewayshape.component.ts 0 → 100644
浏览文件 @ cadb270a
import { Component, OnInit } from '@angular/core';
import { IBizData, IShapeData, IToolsPanel } from '../toolspanel';
@Component({
selector: 'app-gatewayshape',
templateUrl: './gatewayshape.component.html',
styleUrls: ['./gatewayshape.component.less']
})
export class GatewayshapeComponent implements OnInit,IToolsPanel {
constructor() { }
BizData: IBizData;
ShapeData: IShapeData;
ngOnInit(): void {
}
}
IoTSharp/ClientApp/src/app/routes/device/devicegraph/panels/portshape/portshape.component.spec.ts 0 → 100644
浏览文件 @ cadb270a
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { PortshapeComponent } from './portshape.component';
describe('PortshapeComponent', () => {
let component: PortshapeComponent;
let fixture: ComponentFixture<PortshapeComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ PortshapeComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(PortshapeComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
IoTSharp/ClientApp/src/app/routes/device/devicegraph/panels/portshape/portshape.component.ts 0 → 100644
浏览文件 @ cadb270a
import { Component, OnInit } from '@angular/core';
import { IBizData, IShapeData, IToolsPanel } from '../toolspanel';
@Component({
selector: 'app-portshape',
templateUrl: './portshape.component.html',
styleUrls: ['./portshape.component.less']
})
export class PortshapeComponent implements OnInit ,IToolsPanel{
constructor() { }
BizData: IBizData;
ShapeData: IShapeData;
ngOnInit(): void {
}
}
IoTSharp/ClientApp/src/app/routes/device/devicegraph/panels/toolspanel.ts 0 → 100644
浏览文件 @ cadb270a
export interface IToolsPanel {
BizData:IBizData
ShapeData:IShapeData
}
export interface IShapeData {
}
export interface IBizData {
}
\ No newline at end of file
IoTSharp/ClientApp/src/app/routes/routes.module.ts
浏览文件 @ cadb270a
......@@ -70,6 +70,10 @@ import { WidgetsModule } from './widgets/widgets.module';
import { DevicemodellistComponent } from './devicemodel/devicemodellist/devicemodellist.component';
import { DevicemodelformComponent } from './devicemodel/devicemodelform/devicemodelform.component';
import { DevicemodelcommandComponent } from './devicemodel/devicemodelcommand/devicemodelcommand.component';
import { ConnectionedgeComponent } from './device/devicegraph/panels/connectionedge/connectionedge.component';
import { DevivceshapeComponent } from './device/devicegraph/panels/devivceshape/devivceshape.component';
import { GatewayshapeComponent } from './device/devicegraph/panels/gatewayshape/gatewayshape.component';
import { PortshapeComponent } from './device/devicegraph/panels/portshape/portshape.component';
const COMPONENTS: Array<Type<null>> = [];
const Directive: Type<void>[] = [fielddirective, controldirective];
......@@ -139,7 +143,11 @@ const Directive: Type<void>[] = [fielddirective, controldirective];
ConditionbuilderComponent,
DevicemodellistComponent,
DevicemodelformComponent,
DevicemodelcommandComponent
DevicemodelcommandComponent,
ConnectionedgeComponent,
DevivceshapeComponent,
GatewayshapeComponent,
PortshapeComponent
]
})
export class RoutesModule {}
IoTSharp/Controllers/Models/IPageParam.cs
浏览文件 @ cadb270a
......@@ -12,10 +12,10 @@ namespace IoTSharp.Controllers.Models
public class DeviceParam : IPageParam
{
public Guid TenantId { get; set; }
public Guid customerId { get; set; }
public int DeviceType { get; set; }
public DateTime[] LastActive { get; set; }
public bool Online { get; set; }
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或