Sinopec-Anxin/src/app/pages/home/home.component.html

<div class="box">
  <div class="menu">
    <div class="boxleft">
      <img *ngIf="isProd" src="../../../assets/images/logo2.png" alt="">
    </div>
    <div class="libox" *ngIf="!isGasStationNav">
      <li *ngFor="let item of menuList1" (click)="routerChange(item)"
        [ngClass]="{'router-link-active': item.name == selectedItem}">
        {{item.name}}
      </li>
    </div>
    <div class="libox" *ngIf="isGasStationNav">
      <ng-container *ngIf="isGasStationBack; else elseTemplate">
        <li [routerLink]="['/plan/petrolStation']" routerLinkActive="router-link-active">
          数字油站
        </li>
      </ng-container>
      <ng-template #elseTemplate>
        <li *ngFor="let item of menuList1" (click)="routerChange(item)"
          [ngClass]="{'router-link-active': item.name == selectedItem}">
          {{item.name}}
        </li>
      </ng-template>
    </div>

    <!-- 登录信息按钮 -->
    <div class="boxright">

      <i (click)="warningSwitch('voice')" nz-icon [ngClass]="{'grey': !isWarningVoice}" class="blue"
        style="margin-top: 2px;" nz-tooltip nzTooltipTitle="预警声音开关" nzTooltipPlacement="bottom">
        <svg width="20" height="20">
          <path
            d="M260.256 356.576l204.288-163.968a32 32 0 0 1 52.032 24.96v610.432a32 32 0 0 1-51.968 24.992l-209.92-167.552H96a32 32 0 0 1-32-32v-264.864a32 32 0 0 1 32-32h164.256zM670.784 720.128a32 32 0 0 1-44.832-45.664 214.08 214.08 0 0 0 64.32-153.312 213.92 213.92 0 0 0-55.776-144.448 32 32 0 1 1 47.36-43.04 277.92 277.92 0 0 1 72.416 187.488 278.08 278.08 0 0 1-83.488 198.976zM822.912 858.88a32 32 0 1 1-45.888-44.608A419.008 419.008 0 0 0 896 521.152c0-108.704-41.376-210.848-114.432-288.384a32 32 0 0 1 46.592-43.872c84.16 89.28 131.84 207.04 131.84 332.256 0 127.84-49.76 247.904-137.088 337.728z">
          </path>
        </svg>
      </i>
      <i (click)="warningSwitch('window')" nz-icon [ngClass]="{'grey': !isWarningWindow}" class="blue"
        style="margin: 0 8px;" nz-tooltip nzTooltipTitle="预警弹窗开关" nzTooltipPlacement="bottom">
        <svg width="18" height="18">
          <path
            d="M460.8 0h102.4v102.4H460.8zM113.8688 186.368l72.3968-72.3968L258.6624 186.368 186.2656 258.7648zM0 460.8h102.4v102.4H0zM921.6 460.8h102.4v102.4h-102.4zM765.3376 186.6752l72.3968-72.448 72.3968 72.448-72.3968 72.3968z">
          </path>
          <path
            d="M870.4 512a358.4 358.4 0 0 0-716.8 0v409.6H0v102.4h1024v-102.4h-153.6zM460.8 307.2h102.4v358.4H460.8z m0 460.8h102.4v102.4H460.8z">
          </path>
        </svg>
      </i>

      <img *ngIf="!isfullscreen" (click)="fullscreenToggle()" style="margin-right: 8px;cursor: pointer;"
        src="../../../assets/images/fullscreen.png" alt="" title="全屏">
      <img *ngIf="isfullscreen" (click)="closefullscreen()" style="margin-right: 8px;cursor: pointer;"
        src="../../../assets/images/fullscreen.png" alt="" title="全屏">

      <span class="time">
        {{time}}
      </span>

      <span style="margin: 0 12px;">|</span>

      <span style="margin-right: 8px;"> {{surname}} </span>
      <a nz-dropdown [nzDropdownMenu]="menu" [nzTrigger]="'click'" [nzBackdrop]='false'>
        <img src="../../../assets/images/head.png" alt="">
      </a>
      <nz-dropdown-menu #menu="nzDropdownMenu">
        <ul nz-menu nzSelectable>
          <li *ngIf="isGasStation" nz-menu-item (click)="navChange('/oliStationInfo')">基本信息</li>
          <li *ngIf="isGasStation" nz-menu-item (click)="navChange('/equipmentInfo')">器材信息</li>
          <li nz-menu-item (click)="changePassword()">修改密码</li>
          <li *ngIf="xitongguanli" nz-menu-item (click)="navChange2()">系统管理</li>
          <li nz-menu-item (click)="signOut()">退出系统</li>
        </ul>
      </nz-dropdown-menu>
      <span style="margin: 0 12px;" *ngIf="isGasStationBack">|</span>
      <img style="cursor: pointer;" *ngIf="isGasStationBack" src="../../../assets/images/goback.png" alt=""
        (click)="goback()">
    </div>

  </div>
  <div class="content">
    <router-outlet></router-outlet>
  </div>
</div>

<ng-template #warning let-item="data">
  <div class="topbox">
    <div>
      <img src="../assets/images/warning.png" alt="">
    </div>
    <div class="text">
      <span class="name">您有一条新的预警提醒!</span>
      <span class="details">{{item.notification.data.properties.ViolationName}}</span>
    </div>
  </div>
  <ng-container
    *ngIf="item.notification.data.type == 'AX.SinochemServer.License.Notifications.LicenseNotificationData'; else elseTemplate">
    <div class="btnbox">
      <div class="look" (click)="updateState(item,1)">
        处置
      </div>
      <div class="look" (click)="updateState(item,2)">
        申请延期
      </div>
      <div class="lose" (click)="updateState(item,0)">
        忽略
      </div>
    </div>
  </ng-container>
  <ng-template #elseTemplate>
    <div class="btnbox">
      <div class="look" (click)="look(item)">
        查看
      </div>
      <div class="lose" (click)="close(item)">
        忽略
      </div>
    </div>
  </ng-template>


</ng-template>

<!-- 修改密码 -->
<nz-modal [(nzVisible)]="isVisible" [nzTitle]="modalTitle" [nzContent]="modalContent" [nzFooter]="modalFooter"
  [nzWidth]="350">
  <ng-template #modalTitle>
    修改初始密码
  </ng-template>

  <ng-template #modalContent>
    <form nz-form [formGroup]="passwordValidateForm">
      <nz-form-item>
        <nz-form-control nzErrorTip="">
          <nz-input-group>
            <input name="oldpassword" type="password" nz-input formControlName="oldpassword" placeholder="请输入原密码"
              autocomplete="off" />
          </nz-input-group>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control>
          <nz-input-group>
            <input name="newpassword" nz-input type="password" formControlName="newpassword" placeholder="请输入新密码"
              autocomplete="off" />
          </nz-input-group>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control>
          <nz-input-group>
            <input name="affirmpassword" nz-input type="password" formControlName="affirmpassword" placeholder="确认新密码"
              autocomplete="new-password" />
          </nz-input-group>
        </nz-form-control>
      </nz-form-item>
    </form>
  </ng-template>

  <ng-template #modalFooter>
    <button nz-button nzType="primary" (click)="handleOk()" [nzLoading]="isConfirmLoading">确定</button>
  </ng-template>
</nz-modal>