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

src/app/ui/plan-assistance/plan-assistance.component.html

@@ -1,21 +1,26 @@
 <div class="content">
+
+    <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 class="tableRows" *ngFor="let item of carData;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;">
+                    <div class="rowLeftContent">
-                        <p style="flex: 60%;font-size: 16px;font-weight: 550;" class="contentText">{{item.Name}}</p>
+                        <p style="flex: 60%;" class="contentText" title="{{item.Name}}">{{item.Name}}</p>
-                        <p style="flex: 40%" class="contentText">{{item.FireTeamName}}</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>
@@ -23,13 +28,19 @@
       <!-- canvas -->
       <div class="center" id="center">
           <div class="header" style="position: relative;">
-            <div class="title">总平面图</div>
+              <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 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>
@@ -47,12 +58,12 @@
           <div class="canvas">
               <!-- 底部车辆信息 -->
               <div class="bottomWork" *ngIf="bottomIsShow">
-                <div style="flex: 30%;line-height: 30px;width: 120px;color: #fff;text-align: center;">
+                  <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>
+                      <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;">
+                          <div class="publicRow" style="box-sizing: border-box;border-bottom: 1px solid #30bbec;color: #4D9FFE;font-size: 14px;">
                               <p>载水量</p>
                               <p>载泡沫</p>
                               <p>载人数</p>
@@ -62,25 +73,23 @@
                               <p>水源占用</p>
                           </div>
                           <div class="publicRow" style="color: #fff;font-size: 12px;">
-                            <p>{{canvasData.selectCar.WaterYield}}</p>
+                              <p>{{canvasData.selectCar.WaterYield ? canvasData.selectCar.WaterYield : '0t'}}</p>
-                            <p>{{canvasData.selectCar.Foam}}</p>
+                              <p>{{canvasData.selectCar.Foam ? canvasData.selectCar.Foam : '0t'}}</p>
-                            <p>{{canvasData.selectCar.PeopleNum}}</p>
+                              <p>{{canvasData.selectCar.PeopleNum ? canvasData.selectCar.PeopleNum : '0'}}</p>
-                            <p>{{canvasData.selectCar.Tonnage}}</p>
+                              <p>{{canvasData.selectCar.Tonnage ? canvasData.selectCar.Tonnage : '0t'}}</p>
-                            <p>
+                              <p>{{canvasData.selectCar.Assignment ? canvasData.selectCar.Assignment : '无'}}</p>
-                                <input type="text" class="taskInput" [(ngModel)]="canvasData.selectCar.Assignment">
+                              <p title="{{canvasData.selectCar.LinkCar}}">{{canvasData.selectCar.LinkCar.length ? canvasData.selectCar.LinkCar : '无'}}</p>
-                            </p>
+                              <p title="{{canvasData.selectCar.WaterOccupy}}">{{canvasData.selectCar.WaterOccupy.length ? canvasData.selectCar.WaterOccupy : '无'}}</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;">
+                      <div style="flex: 10%;text-align: center;">
-                        <button mat-button>发送</button>
+                        <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="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>
@@ -88,7 +97,7 @@
                   <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>
+              </div> -->
               <!-- 右侧楼层区域 -->
               <app-working-area #workingArea></app-working-area>
           </div>
@@ -96,3 +105,5 @@
       </div>
       <!-- canvas -->
     </div>
+
+</div>

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;
+    display:flex;
-    text-align: center;
+    align-items:center;
     font-size: 20px;
-    font-weight: 550;
+    padding-left: 20px;
-    color: #F7bA2A;
+    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;
+    margin: 2px 10px;
-    width: 120px;
     height: 38px;
     line-height: 38px;
-    background: url('../../../assets/images/标签正常.png');
+    // background: url('../../../assets/images/标签正常.png');
-    -moz-background-size:100% 100%;  
+    // -moz-background-size:100% 100%;  
-    background-size:100% 100%;
+    // background-size:100% 100%;
-    font-size: 20px;
+    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;
+    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;
+    height: 100%;
-    position: absolute;
+    display: flex;
-    width: 80px;
+    justify-content: center;
-    height: 38px;
+    align-items: center;
-    top: 1px;
-    left: 50%;
-    margin-left: -40px;
-    padding-top: 6px;
     label {
-        display: inline-block;
+        display: block;
-        width: 24px;
+        width: 26px;
-        height: 24px;
+        height: 26px;
-        margin: 0 5px;
+        margin: 0 10px;
-        border-radius: 50%;
         cursor: pointer;
     }
     :first-child {
-        background: url('../../../assets/images/route.png') no-repeat center center;
+        background: url('../../../assets/images/path.png') no-repeat center center;
-        background-size: 16px 16px;
+        background-size: 24px 24px;
-        background-color: #fff;
+    }
+    :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: url('../../../assets/images/speaker.png') no-repeat center center;
-        background-size: 16px 16px;
+        background-size: 24px 24px;
-        background-color: #fff;
     }
 }

src/app/ui/plan-assistance/plan-assistance.component.ts

@@ -7469,15 +7469,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) {
         that.workingArea.cancelPaint();
@@ -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) {
+    // if (e.ReachTime == 0) {
-      const config = new MatSnackBarConfig();
+    //   const list = [];
-      config.verticalPosition = 'top';
+    //   list.push(e.Id);
-      config.duration = 3000;
+    //   isSelect ? this.workingArea.setHighlight(list) : null;
-      this.snackBar.open('车辆目前未到场', '确定', config);
+    // } else if (e.ReachTime && e.ReachTime != 0) {
-    }
+    //   const config = new MatSnackBarConfig();
+    //   config.verticalPosition = 'top';
+    //   config.duration = 3000;
+    //   this.snackBar.open('车辆目前未到场', '确定', config);
+    // }
   }
 
   // 关闭 底部车辆信息