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

src/app/babylon/model/info/model/model-info-facility.ts

@@ -4,7 +4,6 @@ import { ConfigManager } from "src/app/babylon/controller/config-manager";
 import { SceneManager } from "src/app/babylon/controller/scene-manager";
 import { UIManager } from "src/app/babylon/controller/ui-manager";
 import { BabylonUIStyleTool } from "src/app/babylon/tool/babylon-ui-style-tool";
-import { SpeakingTool } from "src/app/babylon/tool/speaking-tool";
 import { TsTool } from "src/app/babylon/tool/ts-tool";
 import { FacilityWindow } from "src/app/babylon/view/facility-window/facility-window";
 import { FacilityInfoInSceneWindow } from "src/app/babylon/view/facilityinfoinscene-window/facilityinfoinscene-window";

src/app/babylon/view/facilityinfoinscene-window/facilityinfo-ui-item.ts

@@ -87,6 +87,7 @@ export class FacilityInfoUIItem {
   }
 
   onSelect(select: boolean) {
+
     this.isSelect = select;
     this.modelInfo.setSelectEnable(select);
     if (select) {
@@ -112,6 +113,7 @@ export class FacilityInfoUIItem {
    */
   lookAt() {
 
+
     if (!this.canLookAt()) {
       return;
     }

src/app/pages/home-page/home-page.component.html

@@ -0,0 +1,288 @@
+<div class="homepagebox">
+    <div class="informbox">
+        <div class="warningnumber">
+            <img src="../../../assets/images/warningnum.png" alt="">
+            <span class="num">26</span>
+            <span class="today">今日预警</span>
+        </div>
+        <div class="inform">
+            <div class="infologo">
+                <img src="../../../assets/images/inform.png" alt="">
+                通知
+            </div>
+            <!-- 循环轮播信息 -->
+            <div id="container"  (mouseenter)="mouseEnter()"  (mouseleave)="mouseleave()">
+                <div id="list-wrapper" style="top: 0">
+                    <ul class="notice-list" id="notice-list">
+                        <li class="info">
+                            <div class="infoitem">
+                                <img src="../../../assets/images/warning1.png" alt="">
+                                您有一条新的预警信息！员工服务：加油员未穿工作服加油或顾客自行加油。
+                            </div>
+                            <div class="btn">
+                                <span>查看</span>
+                                <span>忽略</span>
+                            </div>
+                        </li>
+                        <li class="info">
+                            <div class="infoitem">
+                                <img src="../../../assets/images/warning1.png" alt="">
+                                您有一条新的预警信息！员工服务：加油员未穿工作服加油或顾客自行加油。
+                            </div>
+                            <div class="btn">
+                                <span>查看</span>
+                                <span>忽略</span>
+                            </div>
+                        </li>
+                        <li class="info">
+                            <div class="infoitem">
+                                <img src="../../../assets/images/warning1.png" alt="">
+                                您有一条新的预警信息！员工服务：加油员未穿工作服加油或顾客自行加油。
+                            </div>
+                            <div class="btn">
+                                <span>查看</span>
+                                <span>忽略</span>
+                            </div>
+                        </li>
+                        <li class="info">
+                            <div class="infoitem">
+                                <img src="../../../assets/images/warning1.png" alt="">
+                                您有一条新的预警信息！员工服务：加油员未穿工作服加油或顾客自行加油。
+                            </div>
+                            <div class="btn">
+                                <span>查看</span>
+                                <span>忽略</span>
+                            </div>
+                        </li>
+                        <li class="info">
+                            <div class="infoitem">
+                                <img src="../../../assets/images/warning1.png" alt="">
+                                您有一条新的预警信息！员工服务：加油员未穿工作服加油或顾客自行加油。
+                            </div>
+                            <div class="btn">
+                                <span>查看</span>
+                                <span>忽略</span>
+                            </div>
+                        </li>
+                    </ul>
+                    <ul class="notice-list" id="notice-list-2">
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="centerbox">
+        <div class="leftbox">
+            <div class="title">
+                <app-title [name]="'预警统计'"></app-title>
+            </div>
+            <div class="leftboxcontent">
+                <div class="leftitem">
+                    <div class="warningnum">
+                        <h1>312</h1>
+                        <span>预警总数</span>
+                    </div>
+                    <img class="bucket" src="../../../assets/images/bucket.png" alt="">
+                    <img class="circle" src="../../../assets/images/circle.png" alt="">
+                </div>
+                <div class="leftitem">
+                    <span class="itemname">区域排名</span>
+                    <div class="box areabox">
+                        <div class="areaboxitem" *ngFor="let item of areaList;let key = index">
+                            <div class="areaboxitemtop">
+                                <span>
+                                    <span style="margin-right: 12px;"
+                                        [ngClass]="{'red': key < 2,'yellow': key > 1 && key <4,'blue': key > 3 && key <10 }">
+                                        TOP {{key + 1}}
+                                    </span>
+                                    <span>
+                                        {{item.name}}
+                                    </span>
+                                </span>
+
+                                <span>
+                                    {{item.num}}
+                                </span>
+                            </div>
+                            <div class="progress">
+                                <div class="colorbar" [ngStyle]="width(item.num)"
+                                    [ngClass]="{'red': key < 2,'yellow': key > 1 && key <4,'blue': key > 3 && key <10 }">
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="angle-border left-top-border"></div>
+                    <div class="angle-border right-top-border"></div>
+                    <div class="angle-border left-bottom-border"></div>
+                    <div class="angle-border right-bottom-border"></div>
+                </div>
+                <div class="leftitem">
+                    <span class="itemname">事件排名</span>
+                    <div class="box eventbox">
+                        <div class="eventboxitem" *ngFor="let item of eventList;let key = index">
+                            <div class="eventname">
+                                <div class="block" [ngClass]="{'yellow': key < 3,'blue': key > 2}">
+                                    <ng-container *ngIf="key != 9; else elseTemplate">
+                                        {{'0' + (key + 1)}}
+                                    </ng-container>
+                                    <ng-template #elseTemplate>
+                                        {{key + 1}}
+                                    </ng-template>
+
+
+                                </div>
+                                {{item.name}}
+                            </div>
+                            <div class="progressbox">
+                                <div class="progress">
+                                    <div class="colorbar" [ngStyle]="width(item.num)"
+                                        [ngClass]="{'yellow': key < 3,'blue': key > 2}">
+                                    </div>
+                                </div>
+                            </div>
+                            <div style="margin-left: 6px;">
+                                {{item.num}}
+                            </div>
+                        </div>
+                    </div>
+                    <div class="angle-border left-top-border"></div>
+                    <div class="angle-border right-top-border"></div>
+                    <div class="angle-border left-bottom-border"></div>
+                    <div class="angle-border right-bottom-border"></div>
+                </div>
+                <div class="leftitem">
+                    <span class="itemname">站点排名</span>
+                    <div class="box stationbox">
+                        <div class="stationboxitem" *ngFor="let item of stationList;let key = index">
+                            <div class="stationname">
+                                <div class="block" [ngClass]="{'yellow': key < 3,'blue': key > 2}">
+                                    <ng-container *ngIf="key != 9; else elseTemplate">
+                                        {{'0' + (key + 1)}}
+                                    </ng-container>
+                                    <ng-template #elseTemplate>
+                                        {{key + 1}}
+                                    </ng-template>
+                                </div>
+                                {{item.name}}
+                            </div>
+                            <div class="area">
+                                <span [ngClass]="{'yellow': key < 3,'blue': key > 2}">北京-朝阳</span>
+                            </div>
+                            <div style="margin-left: 6px;">
+                                {{item.num}}
+                            </div>
+                        </div>
+                    </div>
+                    <div class="angle-border left-top-border"></div>
+                    <div class="angle-border right-top-border"></div>
+                    <div class="angle-border left-bottom-border"></div>
+                    <div class="angle-border right-bottom-border"></div>
+                </div>
+            </div>
+
+        </div>
+        <div class="rightbox">
+            <div class="title" style="margin-left: -18px;">
+                <app-title [name]="'设备统计'"></app-title>
+            </div>
+            <div class="rightboxcontent">
+                <div class="rightitem">
+                    <div class="equipmentechart" id="equipmentechart">
+
+                    </div>
+                    <div class="equipmentnum">
+                        <span class="equipment">设备总数</span>
+                        <span class="num">312</span>
+                    </div>
+                    <div class="angle-border left-top-border"></div>
+                    <div class="angle-border right-top-border"></div>
+                    <div class="angle-border left-bottom-border"></div>
+                    <div class="angle-border right-bottom-border"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="bottombox">
+        <div class="bottomitem">
+            <div class="title" style="padding-left: 20px;">
+                <app-title [name]="'预警事件'"></app-title>
+            </div>
+            <div class="bottomitemcontent bottomitemcontent1">
+                <div class="bottomitemchartbox">
+                    <div class="numbox">
+                        <span class="num">206</span>
+                        <span class="name">总数</span>
+                    </div>
+                    <div class="numlistbox">
+                        <div class="numlistboxitem">
+                            <div class="top top1">01</div>
+                            <span class="name">员工服务</span>
+                            <span class="value">20</span>
+                        </div>
+                        <div class="numlistboxitem">
+                            <div class="top top2">01</div>
+                            <span class="name">员工服务</span>
+                            <span class="value">20</span>
+                        </div>
+                        <div class="numlistboxitem">
+                            <div class="top top3">01</div>
+                            <span class="name">员工服务</span>
+                            <span class="value">20</span>
+                        </div>
+                    </div>
+                    <div class="eventechartpie" id="eventechartpie">
+
+
+                    </div>
+                    <div class="eventechartline" id="eventechartline">
+
+                    </div>
+                    <div class="angle-border left-top-border"></div>
+                    <div class="angle-border right-top-border"></div>
+                    <div class="angle-border left-bottom-border"></div>
+                    <div class="angle-border right-bottom-border"></div>
+                </div>
+            </div>
+        </div>
+        <div class="bottomitem">
+            <div class="title">
+                <app-title [name]="'卸油事件'"></app-title>
+            </div>
+            <div class="bottomitemcontent bottomitemcontent2">
+                <div class="bottomitemchartbox">
+                    <div class="numbox">
+                        <span class="num">206</span>
+                        <span class="name">总数</span>
+                    </div>
+                    <!-- <div class="numlistbox">
+                        <div class="numlistboxitem">
+                            <div class="top top1">01</div>
+                            <span class="name">员工服务</span>
+                            <span class="value">20</span>
+                        </div>
+                        <div class="numlistboxitem">
+                            <div class="top top2">01</div>
+                            <span class="name">员工服务</span>
+                            <span class="value">20</span>
+                        </div>
+                        <div class="numlistboxitem">
+                            <div class="top top3">01</div>
+                            <span class="name">员工服务</span>
+                            <span class="value">20</span>
+                        </div>
+                    </div> -->
+                    <div class="oilechartpie" id="oilechartpie">
+
+                    </div>
+                    <div class="oilechartline" id="oilechartline">
+
+                    </div>
+                    <div class="angle-border left-top-border"></div>
+                    <div class="angle-border right-top-border"></div>
+                    <div class="angle-border left-bottom-border"></div>
+                    <div class="angle-border right-bottom-border"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

src/app/pages/home-page/home-page.component.scss

@@ -0,0 +1,579 @@
+.homepagebox {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.informbox {
+  width: 100%;
+  height: 50px;
+  margin: 12px 0;
+  display: flex;
+  box-sizing: border-box;
+  padding: 0 24px;
+  align-items: center;
+  justify-content: space-between;
+
+  .warningnumber {
+    width: 250px;
+    display: flex;
+    align-items: center;
+
+    img {
+      width: 66px;
+    }
+
+    .num {
+      font-size: 40px;
+      text-shadow: 0px 0px 6px #8df;
+      color: white;
+      font-weight: 600;
+      margin: 0 7px;
+    }
+
+    .today {
+      font-size: 20px;
+      font-family: titlefont;
+      color: #D0EAFF;
+      margin-bottom: 13px;
+      margin-left: 4px;
+
+    }
+
+
+  }
+
+  .inform {
+    flex: 1;
+    border: 1px solid rgba(54, 162, 255, 0.4);
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .infologo {
+      img {
+        width: 32px;
+      }
+
+      height: 32px;
+      line-height: 32px;
+      color: #91CCFF;
+      font-size: 14px;
+      margin-left: 16px;
+      margin-right: 40px;
+    }
+
+    #container {
+      flex: 1;
+      position: relative;
+      height: 46px;
+      overflow: hidden;
+    }
+
+    #list-wrapper {
+      position: relative;
+    }
+
+    ul {
+      list-style: none;
+    }
+    .info {
+      flex: 1;
+      display: flex;
+      height: 46px;
+      line-height: 46px;
+      color: #fff;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .infoitem {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        img {
+          width: 40px;
+        }
+        color: #fff;
+      }
+
+      .btn {
+        color: #36A2FF;
+
+        span {
+          cursor: pointer;
+        }
+
+        span:nth-child(1) {
+          margin-right: 24px;
+        }
+
+        span:nth-child(2) {
+          margin-right: 40px;
+        }
+      }
+
+    }
+  }
+}
+
+.centerbox {
+  height: 460px;
+  width: 100%;
+  display: flex;
+
+  .leftbox {
+    height: 100%;
+    width: 90%;
+    display: flex;
+    flex-direction: column;
+
+    .title {
+      box-sizing: border-box;
+      padding: 0 20PX;
+      width: 100%;
+      height: 48px;
+    }
+
+    .leftboxcontent {
+      flex: 1;
+      display: flex;
+      box-sizing: border-box;
+      padding: 16px;
+      padding-right: 6px;
+
+      .leftitem {
+        position: relative;
+        flex: 1;
+        border: 1px solid rgba(54, 162, 255, 0.3);
+        margin: 0 8px;
+        box-sizing: border-box;
+        padding: 12px 16px;
+        display: flex;
+        flex-direction: column;
+
+        .progress {
+          height: 4px;
+          width: 100%;
+          background: rgba(54, 162, 255, 0.2);
+          position: relative;
+
+          .colorbar {
+            height: 4px;
+            // position: absolute;
+            left: 0;
+            top: 0;
+          }
+
+          .red {
+            color: #FF4B65;
+            background: linear-gradient(90deg, rgba(255, 75, 101, 0) 0%, #FF4B65 100%);
+          }
+
+          .yellow {
+            color: #FF9963;
+            background: linear-gradient(90deg, rgba(255, 153, 99, 0) 0%, #FF9963 100%);
+          }
+
+          .blue {
+            color: #36A2FF;
+            background: linear-gradient(90deg, rgba(54, 162, 255, 0) 0%, #36A2FF 100%);
+          }
+        }
+
+        .itemname {
+          font-size: 15px;
+          color: #fff;
+          margin-bottom: 8px;
+          font-size: 15px;
+        }
+
+        .box {
+          flex: 1;
+          width: 100%;
+        }
+
+        .areabox {
+          display: flex;
+          flex-direction: column;
+          justify-content: space-around;
+
+          .areaboxitemtop {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            color: #FFFFFF;
+            font-size: 14px;
+            margin-bottom: 12px;
+
+            .red {
+              color: #FF4B65;
+            }
+
+            .yellow {
+              color: #FF9963;
+            }
+
+            .blue {
+              color: #36A2FF;
+            }
+          }
+        }
+
+        .eventbox {
+          display: flex;
+          flex-direction: column;
+          justify-content: space-around;
+
+          .eventboxitem {
+            display: flex;
+            align-items: center;
+            color: #fff;
+            font-size: 12px;
+
+            .eventname {
+              display: inline-block;
+              width: 30%;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+
+              .block {
+                display: inline-block;
+                width: 14px;
+                height: 14px;
+                line-height: 12px;
+                font-size: 8px;
+                color: #fff;
+              }
+
+              .yellow {
+                background-color: #FF9963;
+              }
+
+              .blue {
+                background-color: #36A2FF;
+
+              }
+            }
+
+            .progressbox {
+              flex: 1;
+            }
+          }
+        }
+
+        .stationbox {
+          display: flex;
+          flex-direction: column;
+          justify-content: space-around;
+
+          .stationboxitem {
+            display: flex;
+            align-items: center;
+            color: #fff;
+            font-size: 12px;
+
+            .stationname {
+              display: inline-block;
+              width: 50%;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+
+              .block {
+                display: inline-block;
+                width: 14px;
+                height: 14px;
+                line-height: 12px;
+                font-size: 8px;
+                color: #fff;
+              }
+
+              .yellow {
+                background-color: #FF9963;
+                // background-image: url(../../../assets/images/yellowbg.png);
+              }
+
+              .blue {
+                background-color: #36A2FF;
+                // background-image: url(../../../assets/images/bluebg.png);
+
+              }
+            }
+
+            .area {
+              flex: 1;
+
+              .yellow {
+                color: #FF9963;
+              }
+
+              .blue {
+                color: #36A2FF;
+
+              }
+            }
+          }
+        }
+
+      }
+
+      .leftitem:nth-child(1) {
+        flex: .8;
+        position: relative;
+        border: 0;
+
+        .warningnum {
+          position: absolute;
+          left: 43%;
+          top: 20%;
+          color: white;
+          text-align: center;
+
+          h1 {
+            text-shadow: 0px 0px 6px #8df;
+            color: white;
+            font-weight: 600;
+            font-size: 48px;
+            margin-bottom: 0;
+          }
+        }
+
+        img {
+          position: absolute;
+        }
+
+        .bucket {
+          left: 13%;
+          top: 14%;
+
+        }
+
+        .circle {
+          left: 16%;
+          top: 3%;
+        }
+      }
+    }
+  }
+
+  .rightbox {
+    width: 20%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    .title {
+      box-sizing: border-box;
+      padding: 0 8PX;
+      width: 100%;
+      height: 48px;
+    }
+
+    .rightboxcontent {
+
+      flex: 1;
+      box-sizing: border-box;
+      padding: 16px;
+      padding-left: 0;
+
+      .rightitem {
+        position: relative;
+        height: 100%;
+        border: 1px solid rgba(54, 162, 255, 0.3);
+
+        .equipmentechart {
+          height: 100%;
+        }
+
+        .equipmentnum {
+          position: absolute;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          left: 39%;
+          top: 25%;
+
+          .equipment {
+            font-size: 20px;
+            font-family: titlefont;
+            color: #D0EAFF;
+          }
+
+          .num {
+            font-size: 40px;
+            text-shadow: 0px 0px 6px #8df;
+            color: white;
+            font-weight: 600;
+            line-height: 35px;
+          }
+
+
+        }
+      }
+    }
+  }
+}
+
+.bottombox {
+  flex: 1;
+  display: flex;
+
+  .title {
+    box-sizing: border-box;
+    width: 100%;
+    height: 48px;
+  }
+
+  .bottomitem {
+    flex: 1;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    .bottomitemcontent {
+      flex: 1;
+      box-sizing: border-box;
+      padding: 16px 0;
+
+      .bottomitemchartbox {
+        position: relative;
+        height: 100%;
+        border: 1px solid rgba(54, 162, 255, 0.3);
+        display: flex;
+        position: relative;
+
+        .numbox {
+          position: absolute;
+          left: 8.5%;
+          top: 28%;
+          z-index: 9999;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+
+          .name {
+            font-size: 20px;
+            font-family: titlefont;
+            color: #D0EAFF;
+          }
+
+          .num {
+            font-size: 36px;
+            text-shadow: 0px 0px 6px #8df;
+            color: white;
+            font-weight: 600;
+            line-height: 28px;
+
+          }
+        }
+
+        .numlistbox {
+          position: absolute;
+          left: 5%;
+          bottom: 6%;
+          display: flex;
+          flex-direction: column;
+
+          .numlistboxitem {
+            display: flex;
+            color: #fff;
+            align-items: center;
+            margin: 3px 0;
+
+            span {
+              font-size: 12px;
+            }
+
+            .top {
+              display: inline-block;
+              width: 15px;
+              height: 15px;
+              line-height: 15px;
+              text-align: center;
+              font-size: 8px;
+              border-radius: 2px;
+            }
+
+            .top1 {
+              background: #FF4B65;
+            }
+
+            .top2 {
+              background: #FF9963;
+            }
+
+            .top3 {
+              background: #36A2FF;
+            }
+
+            .name {
+              margin: 0 16px;
+            }
+          }
+        }
+
+        .eventechartpie,
+        .oilechartpie {
+          height: 100%;
+          width: 23%;
+          position: relative;
+        }
+
+        .eventechartline,
+        .oilechartline {
+          height: 100%;
+          flex: 1;
+        }
+      }
+    }
+
+    .bottomitemcontent1 {
+
+      padding-left: 30px;
+      padding-right: 4px;
+    }
+
+    .bottomitemcontent2 {
+      padding-left: 15px;
+      padding-right: 16px;
+    }
+  }
+}
+
+
+.angle-border {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+}
+
+.left-top-border {
+  top: 0;
+  left: 0;
+  border-left: 2px solid #FFFFFF;
+  border-top: 2px solid #FFFFFF;
+}
+
+.right-top-border {
+  top: 0;
+  right: -2px;
+  border-right: 2px solid #FFFFFF;
+  border-top: 2px solid #FFFFFF;
+}
+
+.left-bottom-border {
+  bottom: 0;
+  left: 0;
+  border-bottom: 2px solid #FFFFFF;
+  border-left: 2px solid #FFFFFF;
+}
+
+.right-bottom-border {
+  bottom: 0;
+  right: -2px;
+  border-right: 2px solid #FFFFFF;
+  border-bottom: 2px solid #FFFFFF;
+}

src/app/pages/home-page/home-page.component.ts

@@ -0,0 +1,479 @@
+import { Component, OnInit } from '@angular/core';
+import * as echarts from 'echarts';
+@Component({
+  selector: 'app-home-page',
+  templateUrl: './home-page.component.html',
+  styleUrls: ['./home-page.component.scss']
+})
+export class HomePageComponent implements OnInit {
+
+  constructor() { }
+
+  equipmentechart//设备饼图
+  equipmentechartdata = [
+    { name: '接入油站', value: '100' },
+    { name: '摄像头', value: '100' },
+    { name: '加油站模型', value: '100' }
+  ]
+  equipmentechartOption = {
+    color: ['#91CCFF', '#46DFFF', '#36A2FF'],
+    tooltip: {
+      trigger: 'item'//触发类型
+    },
+    legend: {
+      bottom: '8%',
+      left: 'center',
+      orient: 'vertical',
+      itemGap: 20,
+      itemWidth: 6,
+      itemHeight: 6,
+      formatter: (name) => {
+        let data = this.equipmentechartdata
+        let value
+        for (var i = 0, l = data.length; i < l; i++) {
+          if (data[i].name == name) {
+            value = data[i].value;
+          }
+        }
+        return '{a|' + name + '}' + '{b|' + value + '}';
+      },
+      textStyle: {
+        color: '#fff',
+        rich: {
+          a: {
+            width: 70
+          },
+          b: {
+            // align: 'right',
+          }
+        }
+      }
+    },
+    series: [
+      {
+        type: 'pie',
+        radius: ['55%', '70%'],
+        bottom: '30%',
+        avoidLabelOverlap: false,//防止标签重叠策略
+        label: {//每一个标签外网延伸的引导说明
+          show: false,
+          position: 'outside'
+        },
+        labelLine: {//引导线
+          show: true,
+          showAbove: true
+        },
+        emphasis: {//中间高亮区域
+          label: {
+            show: false,
+            fontSize: '40',
+            fontWeight: 'bold'
+          }
+        },
+        data: this.equipmentechartdata,
+        tooltip: {//鼠标移入提示
+          position: 'left',
+          padding: [14, 19],
+          backgroundColor: 'rgba(28, 129, 218, 0.4)',
+          textStyle: {
+            color: '#fff',
+            fontSize: 12
+          }
+        }
+      }
+    ]
+  };
+
+  warningechartpie//预警饼图
+  warningechartpieOption = {
+    color: ['#91CCFF', '#46DFFF', '#36A2FF', '#FF6181', '#B4C3FF', '#FF9963', '#5A9CFF', '#4BFFD4', '#46DFFF', '#91CCFF'],
+    tooltip: {
+      trigger: 'item'//触发类型
+    },
+    series: [
+      {
+        type: 'pie',
+        radius: ['65%', '80%'],
+        bottom: '30%',
+        avoidLabelOverlap: false,//防止标签重叠策略
+        label: {//每一个标签外网延伸的引导说明
+          show: false,
+          position: 'outside'
+        },
+        labelLine: {//引导线
+          show: true,
+          showAbove: true
+        },
+        emphasis: {//中间高亮区域
+          label: {
+            show: false,
+            fontSize: '40',
+            fontWeight: 'bold'
+          }
+        },
+        data: [
+          { name: '员工服务', value: '100' },
+          { name: '监控设备检测', value: '100' },
+          { name: '安全隐患', value: '100' },
+          { name: '员工服务2', value: '100' },
+          { name: '监控设备检测2', value: '100' },
+          { name: '安全隐患2', value: '100' }
+        ],
+        tooltip: {//鼠标移入提示
+          position: 'right',
+          padding: [14, 19],
+          backgroundColor: 'rgba(28, 129, 218, 0.4)',
+          textStyle: {
+            color: '#fff',
+            fontSize: 12
+          }
+        }
+      }
+    ]
+  };
+
+
+  oilchartpie//卸油饼图
+  oilchartpieData = [
+    { name: '事前准备', value: '100' },
+    { name: '事中操作', value: '100' },
+    { name: '全程监测', value: '100' }
+  ]
+  oilchartpieOption = {
+    color: ['#91CCFF', '#46DFFF', '#36A2FF', '#FF6181', '#B4C3FF', '#FF9963', '#5A9CFF', '#4BFFD4', '#46DFFF', '#91CCFF'],
+    tooltip: {
+      trigger: 'item'//触发类型
+    },
+    legend: {
+      bottom: '8%',
+      left: 'center',
+      orient: 'vertical',
+      itemGap: 10,
+      itemWidth: 6,
+      itemHeight: 6,
+      formatter: (name) => {
+        let data = this.oilchartpieData
+        let value
+        for (var i = 0, l = data.length; i < l; i++) {
+          if (data[i].name == name) {
+            value = data[i].value;
+          }
+        }
+        return '{a|' + name + '}' + '{b|' + value + '}';
+      },
+      textStyle: {
+        color: '#fff',
+        rich: {
+          a: {
+            width: 60
+          },
+          b: {
+            // align: 'right',
+          }
+        }
+      }
+    },
+    series: [
+      {
+        type: 'pie',
+        radius: ['65%', '80%'],
+        bottom: '30%',
+        avoidLabelOverlap: false,//防止标签重叠策略
+        label: {//每一个标签外网延伸的引导说明
+          show: false,
+          position: 'outside'
+        },
+        labelLine: {//引导线
+          show: true,
+          showAbove: true
+        },
+        emphasis: {//中间高亮区域
+          label: {
+            show: false,
+            fontSize: '40',
+            fontWeight: 'bold'
+          }
+        },
+        data: this.oilchartpieData,
+        tooltip: {//鼠标移入提示
+          position: 'right',
+          padding: [14, 19],
+          backgroundColor: 'rgba(28, 129, 218, 0.4)',
+          textStyle: {
+            color: '#fff',
+            fontSize: 12
+          }
+        }
+      }
+    ]
+  };
+
+  warningechartbar//预警折线图
+  warningechartbarOption = {
+    xAxis: {
+      type: 'category',
+      data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30],
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: '#91CCFF'
+        }
+      },
+      axisTick: {//刻度线
+        show: false
+      },
+      inverse: true
+
+    },
+    yAxis: {
+      type: 'value',
+      nameTextStyle: {
+        color: '#C4E2FC'
+      },
+      splitLine: {//分割线
+        lineStyle: {
+          color: ['#0f4374'],
+          width: 2
+        }
+      },
+      axisTick: {//刻度线
+        show: false
+      },
+      axisLine: {//轴线
+        show: false,
+        lineStyle: {
+          color: '#C4E2FC'
+        }
+      }
+    },
+    series: [
+      {
+        data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 16, 15, 14, 13, 12, 11, 10, 8, 7, 6, 3, 2, 1],
+        type: 'line',
+        smooth: true,
+        showSymbol: false,
+        label: {
+          show: true,
+          position: 'top'
+        },
+        lineStyle: {
+          color: '#46DFFF',
+          width: 1
+        },
+        areaStyle: {
+          opacity: 0.8,
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0, color: '#46DFFF' // 0% 处的颜色
+              },
+              {
+                offset: 0.3, color: '#46DFFF' // 0% 处的颜色
+              },
+              {
+                offset: 1, color: 'rgba(0, 13, 33, 0)' // 100% 处的颜色
+              }],
+            global: false // 缺省为 false
+          }
+        },
+      }
+    ],
+    grid: {
+      left: '36px',
+      right: '30px',
+      bottom: '38px',
+      top: '50px'
+    }
+  };
+
+  oilchartbar//卸油折线图
+  oilchartbarOption = {
+    xAxis: {
+      type: 'category',
+      data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30],
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: '#91CCFF'
+        }
+      },
+      axisTick: {//刻度线
+        show: false
+      },
+      inverse: true
+
+    },
+    yAxis: {
+      type: 'value',
+      nameTextStyle: {
+        color: '#C4E2FC'
+      },
+      splitLine: {//分割线
+        lineStyle: {
+          color: ['#0f4374'],
+          width: 2
+        }
+      },
+      axisTick: {//刻度线
+        show: false
+      },
+      axisLine: {//轴线
+        show: false,
+        lineStyle: {
+          color: '#C4E2FC'
+        }
+      }
+    },
+    series: [
+      {
+        data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 16, 15, 14, 13, 12, 11, 10, 8, 7, 6, 3, 2, 1],
+        type: 'line',
+        smooth: true,
+        showSymbol: false,
+        label: {
+          show: true,
+          position: 'top'
+        },
+        lineStyle: {
+          color: '#36A2FF',
+          width: 1
+        },
+        areaStyle: {
+          opacity: 0.8,
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0, color: '#36A2FF' // 0% 处的颜色
+              },
+              {
+                offset: 0.3, color: '#36A2FF' // 0% 处的颜色
+              },
+              {
+                offset: 1, color: 'rgba(0, 13, 33, 0)' // 100% 处的颜色
+              }],
+            global: false // 缺省为 false
+          }
+        },
+      }
+    ],
+    grid: {
+      left: '36px',
+      right: '30px',
+      bottom: '38px',
+      top: '50px'
+    }
+  };
+  ngOnInit(): void {
+    // 饼图
+    this.equipmentechart = echarts.init(document.getElementById('equipmentechart'));
+    this.equipmentechart.setOption(this.equipmentechartOption);
+    // 预警饼图
+    this.warningechartpie = echarts.init(document.getElementById('eventechartpie'));
+    this.warningechartpie.setOption(this.warningechartpieOption);
+    // 预警线图
+    this.warningechartbar = echarts.init(document.getElementById('eventechartline'));
+    this.warningechartbar.setOption(this.warningechartbarOption);
+    // 卸油饼图
+    this.oilchartpie = echarts.init(document.getElementById('oilechartpie'));
+    this.oilchartpie.setOption(this.oilchartpieOption);
+    // 卸油线图
+    this.oilchartbar = echarts.init(document.getElementById('oilechartline'));
+    this.oilchartbar.setOption(this.oilchartbarOption);
+
+
+    window.onresize = () => {
+      setTimeout(() => {
+        this.warningechartpie.resize();
+        this.warningechartbar.resize();
+        this.oilchartpie.resize();
+        this.oilchartbar.resize();
+      }, 200);
+
+    };
+
+    this.rollStart()
+  }
+
+  timer
+  rollStart() {
+    var ROLL_SPEED = 100
+    var noticeList1 = document.getElementById('notice-list');
+    var noticeList2 = document.getElementById('notice-list-2');
+    var listWrapper = document.getElementById('list-wrapper');
+    noticeList2.innerHTML = noticeList1.innerHTML;
+    this.timer = setInterval(rollStart, ROLL_SPEED);
+
+    function rollStart() {
+      if (Math.abs(_subStr(listWrapper.style.top)) >= noticeList1.clientHeight) {
+        listWrapper.style.top = '0px'
+      } else {
+        var top = listWrapper.style.top
+        listWrapper.style.top = _subStr(top) - 1 + 'px'
+      }
+    }
+    // 截取px前数值
+    function _subStr(str) {
+      var index = str.indexOf('px');
+      if (index > -1) {
+        return parseFloat(str.substr(0, index + 1))
+      }
+    }
+  }
+  mouseEnter() {
+    // console.log('进入了')
+    window.clearInterval(this.timer);
+  }
+  mouseleave() {
+    // console.log('离开了')
+    this.rollStart()
+  }
+
+
+  areaList: any = [
+    { name: '加油区', num: 92 },
+    { name: '油罐区', num: 81 },
+    { name: '出入口', num: 66 },
+    { name: '便利店', num: 34 },
+    { name: '办公区', num: 20 },
+    { name: '其他区域', num: 17 }
+  ]
+  eventList: any = [
+    { name: '员工服务', num: 92 },
+    { name: '监控设备监测', num: 81 },
+    { name: '安全隐患', num: 77 },
+    { name: '车流调查', num: 34 },
+    { name: '员工服务', num: 92 },
+    { name: '监控设备监测', num: 81 },
+    { name: '安全隐患', num: 77 },
+    { name: '车流调查', num: 34 },
+    { name: '安全隐患', num: 77 },
+    { name: '车流调查', num: 34 }
+  ]
+  stationList: any = [
+    { name: '北京市第十九加油站', num: 92 },
+    { name: '北京市第十九加油站', num: 81 },
+    { name: '北京市第十九加油站', num: 77 },
+    { name: '北京市第十九加油站', num: 34 },
+    { name: '北京市第十九加油站', num: 92 },
+    { name: '北京市第十九加油站', num: 81 },
+    { name: '北京市第十九加油站', num: 77 },
+    { name: '北京市第十九加油站', num: 34 },
+    { name: '北京市第十九加油站', num: 77 },
+    { name: '北京市第十九加油站', num: 34 }
+  ]
+  width(width) {
+    let style: any = {}
+    style.width = width + '%';
+    return style
+  }
+}

src/app/pages/home/home.component.html

@@ -6,25 +6,33 @@
         <div class="boxleft">
             <img src="../../../assets/images/logo2.png" alt="">
         </div>
-        <li *ngIf="!isGasStationNav" [routerLink]="['/plan']" routerLinkActive="router-link-active">
+        <div class="libox" *ngIf="!isGasStationNav">
-            数字油站
+            <li [routerLink]="['/homepage']" routerLinkActive="router-link-active">
-        </li>
+                首页
-        <li *ngIf="!isGasStationNav" [routerLink]="['/warning']" routerLinkActive="router-link-active">
+            </li>
-            今日预警
+            <li [routerLink]="['/plan']" routerLinkActive="router-link-active">
-        </li>
+                数字油站
-        <li *ngIf="!isGasStationNav" [routerLink]="['/records']" routerLinkActive="router-link-active">
+            </li>
-            预警记录
+            <li [routerLink]="['/warning']" routerLinkActive="router-link-active">
-        </li>
+                今日预警
+            </li>
+            <li [routerLink]="['/records']" routerLinkActive="router-link-active">
+                预警记录
+            </li>
+        </div>
+        <div class="libox" *ngIf="isGasStationNav">
+            <li [routerLink]="['/plan/petrolStation']" routerLinkActive="router-link-active">
+                数字油站
+            </li>
+            <li [routerLink]="['/warning/petrolStation']" routerLinkActive="router-link-active">
+                今日预警
+            </li>
+            <li [routerLink]="['/records/petrolStation']" routerLinkActive="router-link-active">
+                预警记录
+            </li>
+        </div>
+
 
-        <li *ngIf="isGasStationNav" [routerLink]="['/plan/petrolStation']" routerLinkActive="router-link-active">
-            数字油站
-        </li>
-        <li *ngIf="isGasStationNav" [routerLink]="['/warning/petrolStation']" routerLinkActive="router-link-active">
-            今日预警
-        </li>
-        <li *ngIf="isGasStationNav" [routerLink]="['/records/petrolStation']" routerLinkActive="router-link-active">
-            预警记录
-        </li>
 
         <!-- 登录信息按钮 -->
         <div class="boxright">

src/app/pages/home/home.component.scss

@@ -19,17 +19,21 @@
   background: url('../../../assets/images/navbg.png') no-repeat;
   background-size: 100% 115%;
   position: relative;
-
+  .libox{
-  li {
+    width: 33%;
-    width: 10%;
+    display: flex;
-    height: 52px;
+    li {
-    line-height: 52px;
+      flex: 1;
-    text-align: center;
+      height: 52px;
-    cursor: pointer;
+      line-height: 52px;
-    font-family: sybold;
+      text-align: center;
-    color: #EBFAFF;
+      cursor: pointer;
+      font-family: sybold;
+      color: #EBFAFF;
+    }
   }
  
+
 }
 
 .boxleft {

src/app/pages/pages-routing.module.ts

@@ -9,8 +9,10 @@ import { CriminalRecordsAdminComponent } from './criminal-records-admin/criminal
 import { OilStationInfoComponent } from './oil-station-info/oil-station-info.component';
 import { EquipmentInfoComponent } from './equipment-info/equipment-info.component';
 import { PlanAdminComponent } from './plan-admin/plan-admin.component';
+import { HomePageComponent } from './home-page/home-page.component';
 
 const routes: Routes = [
+    { path: 'homepage', component: HomePageComponent },
     { path: 'plan', component: PlanAdminComponent },
     { path: 'plan/petrolStation', component: PlanComponent },
     { path: 'warning', component: TodayWarningAdminComponent },

src/app/pages/pages.module.ts

@@ -51,11 +51,12 @@ import { GetOutOfLineDetailsComponent } from './today-warning/get-out-of-line-de
 import { NzNotificationModule } from 'ng-zorro-antd/notification';
 import { DispositionComponent } from './disposition/disposition.component';
 import { OilUnloadingProcessComponent } from './oil-unloading-process/oil-unloading-process.component';
+import { HomePageComponent } from './home-page/home-page.component';
 
 @NgModule({
   declarations: [LoginComponent, RegisterComponent, HomeComponent, PlanComponent, TodayWarningComponent, CriminalRecordsComponent, 
     TodayWarningAdminComponent, CriminalRecordsAdminComponent, LeftDomainComponent, EquipmentInfoComponent, OilStationInfoComponent, 
-    AddequipmentComponent, EditequipmentComponent,PlanAdminComponent, GetOutOfLineDetailsComponent, DispositionComponent, OilUnloadingProcessComponent],
+    AddequipmentComponent, EditequipmentComponent,PlanAdminComponent, GetOutOfLineDetailsComponent, DispositionComponent, OilUnloadingProcessComponent, HomePageComponent],
 
 
   imports: [