diff --git a/src/app/ui/plan-assistance/plan-assistance.component.html b/src/app/ui/plan-assistance/plan-assistance.component.html index d7a3c2e..8eca325 100644 --- a/src/app/ui/plan-assistance/plan-assistance.component.html +++ b/src/app/ui/plan-assistance/plan-assistance.component.html @@ -1,98 +1,109 @@
- -
+ +
+
+ +
到场力量
-
-
-

{{item.Name}}

-

{{item.FireTeamName}}

+
+
+

{{item.Name}}

+

{{item.FireTeamName}}

-
已到场
+
已到场
+
+
暂无车辆信息
-
+
- -
-
-
总平面图
-
- - -
-
- volume_up -
-
-
冷却
-
登罐
-
注入泡沫
-
-
- settings_voice - - search -
-
-
-
-
- -
-
- -
-
-
-
-

载水量

-

载泡沫

-

载人数

-

吨位

-

执行任务

-

连接车辆

-

水源占用

-
-
-

{{canvasData.selectCar.WaterYield}}

-

{{canvasData.selectCar.Foam}}

-

{{canvasData.selectCar.PeopleNum}}

-

{{canvasData.selectCar.Tonnage}}

-

- -

-

{{canvasData.selectCar.LinkCar}}

-

{{canvasData.selectCar.WaterOccupy}}

-
-
-
- -
-
-
- - -
keyboard_arrow_left
-
-
- -
-
-
-
-
- - -
+ +
+
+
楼层/区域
+
厂区总平面图
+ +
+
+ + + + +
+
+
+
冷却
+
登罐
+
注入泡沫
+
+
+ settings_voice + + search +
+
+
+
+
+ +
+
+ +
+
+
+
+

载水量

+

载泡沫

+

载人数

+

吨位

+

执行任务

+

连接车辆

+

水源占用

+
+
+

{{canvasData.selectCar.WaterYield ? canvasData.selectCar.WaterYield : '0t'}}

+

{{canvasData.selectCar.Foam ? canvasData.selectCar.Foam : '0t'}}

+

{{canvasData.selectCar.PeopleNum ? canvasData.selectCar.PeopleNum : '0'}}

+

{{canvasData.selectCar.Tonnage ? canvasData.selectCar.Tonnage : '0t'}}

+

{{canvasData.selectCar.Assignment ? canvasData.selectCar.Assignment : '无'}}

+

{{canvasData.selectCar.LinkCar.length ? canvasData.selectCar.LinkCar : '无'}}

+

{{canvasData.selectCar.WaterOccupy.length ? canvasData.selectCar.WaterOccupy : '无'}}

+
+
+
+ +
+
+
+ + + + + +
+
+
- +
diff --git a/src/app/ui/plan-assistance/plan-assistance.component.scss b/src/app/ui/plan-assistance/plan-assistance.component.scss index 6f70be7..27a5f0a 100644 --- a/src/app/ui/plan-assistance/plan-assistance.component.scss +++ b/src/app/ui/plan-assistance/plan-assistance.component.scss @@ -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; } } \ No newline at end of file diff --git a/src/app/ui/plan-assistance/plan-assistance.component.ts b/src/app/ui/plan-assistance/plan-assistance.component.ts index 5e64cd2..87fe030 100644 --- a/src/app/ui/plan-assistance/plan-assistance.component.ts +++ b/src/app/ui/plan-assistance/plan-assistance.component.ts @@ -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); + // } } // 关闭 底部车辆信息 diff --git a/src/assets/images/Left list.png b/src/assets/images/Left list.png new file mode 100644 index 0000000..26fa14c Binary files /dev/null and b/src/assets/images/Left list.png differ diff --git a/src/assets/images/frame.png b/src/assets/images/frame.png index 1b039b4..c8bf5df 100644 Binary files a/src/assets/images/frame.png and b/src/assets/images/frame.png differ diff --git a/src/assets/images/line.png b/src/assets/images/line.png index 05db7f8..55b7d7c 100644 Binary files a/src/assets/images/line.png and b/src/assets/images/line.png differ diff --git a/src/assets/images/path.png b/src/assets/images/path.png new file mode 100644 index 0000000..6d35bc0 Binary files /dev/null and b/src/assets/images/path.png differ diff --git a/src/assets/images/selected.png b/src/assets/images/selected.png index be926ee..d7afe96 100644 Binary files a/src/assets/images/selected.png and b/src/assets/images/selected.png differ diff --git a/src/assets/images/send.png b/src/assets/images/send.png new file mode 100644 index 0000000..8bcdc42 Binary files /dev/null and b/src/assets/images/send.png differ diff --git a/src/assets/images/speaker.png b/src/assets/images/speaker.png new file mode 100644 index 0000000..f71e81f Binary files /dev/null and b/src/assets/images/speaker.png differ diff --git a/src/assets/images/top.png b/src/assets/images/top.png index 70b5992..bb5ab8c 100644 Binary files a/src/assets/images/top.png and b/src/assets/images/top.png differ