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

<div class="content">
    <!-- [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>
                    <div class="countdown" style="color: #37f76D;" *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>
    </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>

    </div>
    <!-- canvas -->
</div>