shaojiahao
/
TheCommandPlatform-Anxin
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

Merge branch 'master' of http://39.106.78.171:3000/shaojiahao/TheCommandPlatform-Anxin

develop
邵佳豪 4 years ago
parent
0caf50cc29 f8c086f22c
commit
e7ee61c2b3
12 changed files with 288 additions and 143 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 175
      src/app/ui/plan-assistance/plan-assistance.component.html
  2. 137
      src/app/ui/plan-assistance/plan-assistance.component.scss
  3. 119
      src/app/ui/plan-assistance/plan-assistance.component.ts
  4. BIN
      src/assets/images/Left list.png
  5. BIN
      src/assets/images/frame.png
  6. BIN
      src/assets/images/line.png
  7. BIN
      src/assets/images/path.png
  8. BIN
      src/assets/images/selected.png
  9. BIN
      src/assets/images/send.png
  10. BIN
      src/assets/images/show.png
  11. BIN
      src/assets/images/speaker.png
  12. BIN
      src/assets/images/top.png

175
src/app/ui/plan-assistance/plan-assistance.component.html
Unescape View File

@ -1,98 +1,109 @@
<div class="content">
<!-- [ngClass]="{closeLeft: !rightIsShow,openLeft: rightIsShow}" -->
<div class="left">
<header><label class="headerCenter">总平面图</label></header>
<div class="bottomCenter">
<!-- [ngClass]="{closeLeft: !rightIsShow,openLeft: rightIsShow}" -->
<div class="left">
<div class="header leftHeader" style="overflow: hidden;">到场力量</div>
<div class="list">
<div class="tableDiv">
<div class="tableRows" *ngFor="let item of allCarsData;let key = index" (click)='selectCar(item)' [ngClass]="{selectIcon: selectCarID == item.Id}">
<div style="flex: 60%;display: flex;flex-direction: column;justify-content: center;align-items: center;">
<p style="flex: 60%;font-size: 16px;font-weight: 550;" class="contentText">{{item.Name}}</p>
<p style="flex: 40%" class="contentText">{{item.FireTeamName}}</p>
<div class="tableRows" *ngFor="let item of carData;let key = index" (click)='selectCar(item)' [ngClass]="{selectIcon: selectCarID == item.Id}">
<div class="rowLeftContent">
<p style="flex: 60%;" class="contentText" title="{{item.Name}}">{{item.Name}}</p>
<p style="flex: 40%" class="contentText" title="{{item.FireTeamName}}">{{item.FireTeamName}}</p>
</div>
<div class="countdown" style="color: #37f76D;" *ngIf="item.ReachTime < 1">已到场</div>
<div class="countdown" style="color: #5EFFED;">已到场</div>
<!-- <div class="countdown" style="color: #5EFFED;" *ngIf="item.ReachTime < 1">已到场</div>
<div class="countdown" *ngIf="item.ReachTime > 0">
<label [ngClass]="{smallFive: item.ReachTime<=300,bigTen: item.ReachTime>300}">
<countdown #key [config]="{leftTime: item.ReachTime,notify: [299],format: 'm:ss'}" (event)="handleEvent($event,item)"></countdown>
</label>
</div>
</div> -->
</div>
<div *ngIf="!carData.length" style="text-align: center; color: #fff;margin: 10px 0;">暂无车辆信息</div>
</div>
</div>
</div>
</div>
<!-- canvas -->
<div class="center" id="center">
<div class="header" style="position: relative;">
<div class="title">总平面图</div>
<div class="draw">
<label title="开始绘制" (click)='plot(0)'></label>
<label title="开始绘制" (click)='plot(1)'></label>
</div>
<div style="float: right;width: 66px;height: 100%;line-height: 40px;text-align: center;position: relative;">
<mat-icon style="color: #fff;font-size: 32px;width: 32px;height: 32px;" (click)='toggleSay()'>volume_up</mat-icon>
<div class="rightSpeak" *ngIf="rightSayIsShow">
<div style="flex: 1;">
<div class="iconButton" style="background-color: #fe9400;">冷却</div>
<div class="iconButton" style="background-color: #f95e5a;">登罐</div>
<div class="iconButton" style="background-color: #0676ee;">注入泡沫</div>
</div>
<div style="width: 100%;height: 34px;line-height: 34px;display: flex;">
<mat-icon>settings_voice</mat-icon>
<label class="sayBgc">按住说话</label>
<mat-icon>search</mat-icon>
</div>
</div>
</div>
</div>
<div class="canvas">
<!-- 底部车辆信息 -->
<div class="bottomWork" *ngIf="bottomIsShow">
<div style="flex: 30%;line-height: 30px;width: 120px;color: #fff;text-align: center;">
<label>车辆属性 <mat-icon (click)="closeBottom()">highlight_off</mat-icon></label>
</div>
<div style="flex: 70%;display: flex;">
<div style="flex: 90%;">
<div class="publicRow" style="box-sizing: border-box;border-bottom: 1px solid #30bbec;color: #f7ae4a; font-weight: 550;">
<p>载水量</p>
<p>载泡沫</p>
<p>载人数</p>
<p>吨位</p>
<p>执行任务</p>
<p>连接车辆</p>
<p>水源占用</p>
</div>
<div class="publicRow" style="color: #fff;font-size: 12px;">
<p>{{canvasData.selectCar.WaterYield}}</p>
<p>{{canvasData.selectCar.Foam}}</p>
<p>{{canvasData.selectCar.PeopleNum}}</p>
<p>{{canvasData.selectCar.Tonnage}}</p>
<p>
<input type="text" class="taskInput" [(ngModel)]="canvasData.selectCar.Assignment">
</p>
<p title="{{canvasData.selectCar.LinkCar}}">{{canvasData.selectCar.LinkCar}}</p>
<p title="{{canvasData.selectCar.WaterOccupy}}">{{canvasData.selectCar.WaterOccupy}}</p>
</div>
</div>
<div style="flex: 10%;text-align: center;line-height: 70px;">
<button mat-button>发送</button>
</div>
</div>
</div>
<!-- 底部车辆信息 -->
<!-- 右侧楼层区域 -->
<div class="showRightStorey" *ngIf="!rightIsShow" title="打开楼层/区域"><mat-icon (click)='openRight()'>keyboard_arrow_left</mat-icon></div>
<div class="rightStorey" [ngClass]="{closeRight: !rightIsShow,openRight: rightIsShow}">
<div style="flex: 10%;">
<label><mat-icon (click)='closeRight()' title="关闭楼层/区域">keyboard_arrow_right</mat-icon> 楼层/区域</label>
</div>
<div style="flex: 90%;border-top: 1px solid #30bbec;padding: 1px 0;">
<div style="font-size: 14px;width: 100%;height: 35px;line-height: 35px;background-color: rgba(7,89,155,0.7);"><label>厂区总平面图</label></div>
</div>
</div>
<!-- 右侧楼层区域 -->
<app-working-area #workingArea></app-working-area>
</div>
<!-- canvas -->
<div class="center" id="center">
<div class="header" style="position: relative;">
<div class="title title2">楼层/区域</div>
<div class="title">厂区总平面图</div>
<!-- <div class="draw">
<label title="开始绘制" (click)='plot(0)'></label>
<label title="开始绘制" (click)='plot(1)'></label>
</div> -->
<div style="float: right;width: 150px;height: 100%;position: relative;">
<div class="draw">
<label title="开始绘制" (click)='plot(0)'></label>
<label title="开始绘制" (click)='plot(1)'></label>
<label title="语音" (click)='toggleSay()'></label>
<!-- <mat-icon style="color: #fff;font-size: 32px;width: 32px;height: 32px;" (click)='toggleSay()'>volume_up</mat-icon> -->
</div>
<div class="rightSpeak" *ngIf="rightSayIsShow">
<div style="flex: 1;">
<div class="iconButton" style="background-color: #fe9400;">冷却</div>
<div class="iconButton" style="background-color: #f95e5a;">登罐</div>
<div class="iconButton" style="background-color: #0676ee;">注入泡沫</div>
</div>
<div style="width: 100%;height: 34px;line-height: 34px;display: flex;">
<mat-icon>settings_voice</mat-icon>
<label class="sayBgc">按住说话</label>
<mat-icon>search</mat-icon>
</div>
</div>
</div>
</div>
<div class="canvas">
<!-- 底部车辆信息 -->
<div class="bottomWork" *ngIf="bottomIsShow">
<div style="flex: 30%;line-height: 30px;width: 120px;color: #fff;text-align: center; background-color: #4D9FFE; border-radius: 5px;font-size: 14px;">
<label>注意事项 <mat-icon (click)="closeBottom()">highlight_off</mat-icon></label>
</div>
<div style="flex: 70%;display: flex;">
<div style="flex: 90%;">
<div class="publicRow" style="box-sizing: border-box;border-bottom: 1px solid #30bbec;color: #4D9FFE;font-size: 14px;">
<p>载水量</p>
<p>载泡沫</p>
<p>载人数</p>
<p>吨位</p>
<p>执行任务</p>
<p>连接车辆</p>
<p>水源占用</p>
</div>
<div class="publicRow" style="color: #fff;font-size: 12px;">
<p>{{canvasData.selectCar.WaterYield ? canvasData.selectCar.WaterYield : '0t'}}</p>
<p>{{canvasData.selectCar.Foam ? canvasData.selectCar.Foam : '0t'}}</p>
<p>{{canvasData.selectCar.PeopleNum ? canvasData.selectCar.PeopleNum : '0'}}</p>
<p>{{canvasData.selectCar.Tonnage ? canvasData.selectCar.Tonnage : '0t'}}</p>
<p>{{canvasData.selectCar.Assignment ? canvasData.selectCar.Assignment : '无'}}</p>
<p title="{{canvasData.selectCar.LinkCar}}">{{canvasData.selectCar.LinkCar.length ? canvasData.selectCar.LinkCar : '无'}}</p>
<p title="{{canvasData.selectCar.WaterOccupy}}">{{canvasData.selectCar.WaterOccupy.length ? canvasData.selectCar.WaterOccupy : '无'}}</p>
</div>
</div>
<div style="flex: 10%;text-align: center;">
<img src="../../../assets/images/send.png" style="width: 60px; height: 60px;margin-top: 5px;">
</div>
</div>
</div>
<!-- 底部车辆信息 -->
<!-- 右侧楼层区域 -->
<!-- <div class="showRightStorey" *ngIf="!rightIsShow" title="打开楼层/区域"><mat-icon (click)='openRight()'>keyboard_arrow_left</mat-icon></div>
<div class="rightStorey" [ngClass]="{closeRight: !rightIsShow,openRight: rightIsShow}">
<div style="flex: 10%;">
<label><mat-icon (click)='closeRight()' title="关闭楼层/区域">keyboard_arrow_right</mat-icon> 楼层/区域</label>
</div>
<div style="flex: 90%;border-top: 1px solid #30bbec;padding: 1px 0;">
<div style="font-size: 14px;width: 100%;height: 35px;line-height: 35px;background-color: rgba(7,89,155,0.7);"><label>厂区总平面图</label></div>
</div>
</div> -->
<!-- 右侧楼层区域 -->
<app-working-area #workingArea></app-working-area>
</div>
</div>
<!-- canvas -->
</div>
<!-- canvas -->
</div>

137
src/app/ui/plan-assistance/plan-assistance.component.scss
Unescape View File

@ -5,37 +5,78 @@
padding: 1px;
overflow: hidden;
display: flex;
background-color: rgba(11,75,118,0.9);
flex-direction: column;
background-color: #09254B;
header {
width: 100%;
height: 55px;
min-height: 55px;
line-height: 55px;
background: url('../../../assets/images/top.png');
background-size:100% 100%;
}
.bottomCenter {
flex: 1;
display: flex;
box-sizing: border-box;
min-height: 768px;
padding: 10px;
overflow: hidden;
}
}
//头部标题 总平面图
.headerCenter {
display: inline-block;
margin-left: 5px;
width: 180px;
height: 100%;
text-align: center;
color: #fff;
font-size: 20px;
background: url('../../../assets/images/selected.png');
background-size:100% 100%;
}
//左右侧 header
.header {
width: 100%;
height: 40px;
height: 5%;
min-height: 40px;
box-sizing: border-box;
}
.leftHeader {
line-height: 40px;
text-align: center;
display:flex;
align-items:center;
font-size: 20px;
font-weight: 550;
color: #F7bA2A;
padding-left: 20px;
background-image: -webkit-linear-gradient(bottom, #fff, #9ABCE5);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bolder;
font-style:italic;
cursor: pointer;
}
.title {
display: inline-block;
margin: 1px 0;
width: 120px;
margin: 2px 10px;
height: 38px;
line-height: 38px;
background: url('../../../assets/images/标签正常.png');
-moz-background-size:100% 100%;
background-size:100% 100%;
font-size: 20px;
// background: url('../../../assets/images/标签正常.png');
// -moz-background-size:100% 100%;
// background-size:100% 100%;
font-size: 16px;
color: #fff;
padding-left: 25px;
font-weight: 550;
cursor: pointer;
}
.title2 {
font-size: 18px;
background-image: -webkit-linear-gradient(bottom, #fff, #9ABCE5);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bolder;
}
//左侧菜单
.left {
@ -44,16 +85,17 @@
min-width: 200px;
box-sizing: border-box;
padding: 1px;
margin-right: 10px;
display: flex;
flex-direction: column;
background: url('../../../assets/images/Left\ list.png');
background-size:100% 100%;
.list {
flex: 1;
overflow: hidden;
.tableDiv {
height: 100%;
overflow-y: auto;
border-left: 1px solid #30bbec;
border-top: 1px solid #30bbec;
}
}
//每一行
@ -63,7 +105,7 @@
display: flex;
margin: 13px 0;
.contentText {
font-size: 12px;
font-size: 14px;
color: #fff;
cursor: pointer;
overflow: hidden;
@ -72,12 +114,24 @@
}
.countdown{
flex: 40%;
cursor: pointer;
line-height: 50px;
font-weight: 550;
text-align: center;
}
}
}
.rowLeftContent {
flex: 60%;
display: flex;
flex-direction: column;
justify-content: center;
box-sizing: border-box;
margin-left: 25px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
//打开关闭左侧 车辆
.openLeft {
width: 300px;
@ -110,10 +164,13 @@
box-sizing: border-box;
display: flex;
flex-direction: column;
.canvas {
flex: 1;
position: relative;
}
background: url('../../../assets/images/frame.png');
background-size:100% 100%;
}
.canvas {
flex: 1;
position: relative;
overflow: hidden;
}
.mat-icon { vertical-align: middle; cursor: pointer; }
@ -122,13 +179,13 @@
width: 800px;
height: 100px;
position: absolute;
bottom: 5px;
bottom: 3px;
left: 50%;
margin-left: -400px;
z-index: 10;
display: flex;
flex-direction: column;
>div{ background-color:rgba(2, 44, 73, 0.9); }
>div{ background-color:#4E596A; }
button { width: 50px; height: 40px; background-color: #67c23a; color: #fff; }
//table表格
.publicRow {
@ -202,7 +259,7 @@
.rightSpeak {
position: absolute;
top: 40px;
left: -275px;
left: -175px;
width: 310px;
height: 320px;
z-index: 11;
@ -221,6 +278,7 @@
}
.sayBgc {
flex: 1;
text-align: center;
box-sizing: border-box;
background: url('../../../assets/images/输入框.png');
background-size: 100% 100%;
@ -242,30 +300,27 @@
//右侧 绘制工具
.draw {
display: inline-block;
position: absolute;
width: 80px;
height: 38px;
top: 1px;
left: 50%;
margin-left: -40px;
padding-top: 6px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
label {
display: inline-block;
width: 24px;
height: 24px;
margin: 0 5px;
border-radius: 50%;
display: block;
width: 26px;
height: 26px;
margin: 0 10px;
cursor: pointer;
}
:first-child {
background: url('../../../assets/images/route.png') no-repeat center center;
background-size: 16px 16px;
background-color: #fff;
background: url('../../../assets/images/path.png') no-repeat center center;
background-size: 24px 24px;
}
:nth-child(2) {
background: url('../../../assets/images/line.png') no-repeat center center;
background-size: 24px 24px;
}
:last-child {
background: url('../../../assets/images/direction.png') no-repeat center center;
background-size: 16px 16px;
background-color: #fff;
background: url('../../../assets/images/speaker.png') no-repeat center center;
background-size: 24px 24px;
}
}

119
src/app/ui/plan-assistance/plan-assistance.component.ts
Unescape View File

@ -7468,15 +7468,6 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit {
ngOnInit(): void {
const that = this;
// iframe接收消息
window.addEventListener('message', function(e) {
if (e.source != window.parent)
return;
console.log('children',e)
}, false);
window.setTimeout(() => {
document.getElementById('center').oncontextmenu = function(event) {
@ -7487,9 +7478,14 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit {
}
ngAfterViewInit(): void {
const that = this;
this.workingArea.loadDemoScene(this.demoData, 0.149);
this.dataInit();
// this.dataInit();
// iframe接收消息
window.parent.postMessage({eventKey: 'GET_VECHILE_REQUEST'}, '*');
window.addEventListener('message', function(e) { that.carDataKeDa(e) }, false);
// 监听canvas组件选中素材事件
this.workingArea.on('select', obj => {
// 选中素材属性注入函数
@ -7515,6 +7511,86 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit {
e == 0 ? this.workingArea.beginPaintingArrows() : this.workingArea.beginPaintPipeline();
}
carData = [] //科达 车辆数据
//科达对接 车辆数据处理
carDataKeDa (e) {
console.log('iframe子页面接收数据',e.data)
if (e.data.data && e.data.data.length) {
e.data.data.forEach(element => {
element.TemplateId = null,
element.FloorId = null,
element.Angle = 0,
element.Pipelines = [],
element.Type = element.Type,
element.Color = 0,
element.Enabled = true,
element.FillMode = 0,
element.FireElementId = 0,
element.FixedSize = false,
element.CanConnection = true,
element.ConnectionObjs = [],
element.Height = 45,
element.Width = 45,
element.Id = element.Id || ObjectID.default.generate(),
element.ImageUrl = this.carImgUrl(element.Type),
element.InteractiveMode = 0,
element.MultiPoint = null,
element.Point = {
x: 1295,
y: 1237
},
element.Name = element.Name,
element.FireTeamName = element.FireTeamName, // 所属消防队
element.ReachTime = element.ReachTime || 0, // 到场剩余时间
element.WaterYield = element.WaterYield || '0t', // 载水量
element.Foam = element.Foam || '0t', // 载泡沫
element.PeopleNum = element.PeopleNum || 0, // 载人数
element.Tonnage = element.Tonnage || '0t', // 吨位
element.Assignment = element.Assignment || '无', // 执行任务
element.LinkCar = [], // 连接车辆
element.WaterOccupy = [], // 水源占用
element.PropertyInfos = [
{
Enabled: true,
Order: 0,
PhysicalUnit: '',
PropertyName: '名称/编号',
PropertyType: 0,
PropertyValue: element.FireTeamName,
Required: false,
RuleName: '',
RuleValue: '',
Tag: '',
Visible: true
}
],
element.Border = null,
element.DrawMode = null,
element.Thickness = 0,
element.IsFromBuilding = false,
element.GameMode = 2
let isHave = this.carData.find(item=>{ return item.Id === element.Id })
if (isHave == undefined) { //没有当前车辆时
this.carData.push(element)
this.workingArea.ShowCarIcon(element)
}
});
}
}
//车辆 匹配素材 图片
carImgUrl (e) {
if (e == 1) {
return './assets/images/举高喷射消防车.png'
} else if (e == 2) {
return './assets/images/泡沫消防车.png'
} else if (e == 3) {
return './assets/images/水罐消防车.png'
} else {
return './assets/images/压缩空气泡沫消防车.png'
}
}
// 到场车辆初始化
dataInit() {
this.allCarsData.forEach(item => {
@ -7534,16 +7610,19 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit {
// 选择 车辆
selectCar(e, isSelect: boolean = true) {
if (e.ReachTime == 0) {
const list = [];
list.push(e.Id);
isSelect ? this.workingArea.setHighlight(list) : null;
} else if (e.ReachTime && e.ReachTime != 0) {
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000;
this.snackBar.open('车辆目前未到场', '确定', config);
}
const list = [];
list.push(e.Id);
isSelect ? this.workingArea.setHighlight(list) : null;
// if (e.ReachTime == 0) {
// const list = [];
// list.push(e.Id);
// isSelect ? this.workingArea.setHighlight(list) : null;
// } else if (e.ReachTime && e.ReachTime != 0) {
// const config = new MatSnackBarConfig();
// config.verticalPosition = 'top';
// config.duration = 3000;
// this.snackBar.open('车辆目前未到场', '确定', config);
// }
}
// 关闭 底部车辆信息

BIN
src/assets/images/Left list.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
src/assets/images/frame.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 53 KiB

After

Width:  |  Height:  |  Size: 59 KiB

BIN
src/assets/images/line.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
src/assets/images/path.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
src/assets/images/selected.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.4 KiB

After

Width:  |  Height:  |  Size: 8.4 KiB

BIN
src/assets/images/send.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
src/assets/images/show.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 510 B

After

Width:  |  Height:  |  Size: 405 B

BIN
src/assets/images/speaker.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 938 B

BIN
src/assets/images/top.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 161 KiB

After

Width:  |  Height:  |  Size: 168 KiB

Write Preview
Loading…
Cancel
Save