[新增]首页图表

src/app/app-routing.module.ts

@@ -1,35 +1,50 @@
-import { NgModule } from '@angular/core';
+import { NgModule } from "@angular/core";
-import { Routes, RouterModule } from '@angular/router';
+import { Routes, RouterModule } from "@angular/router";
-import { LoginComponent } from './pages/login/login.component';
+import { LoginComponent } from "./pages/login/login.component";
-import { RegisterComponent } from './pages/register/register.component';
+import { RegisterComponent } from "./pages/register/register.component";
 
 //路由守卫
-import { AuthGuard } from './auth.guard'
+import { AuthGuard } from "./auth.guard";
-import { HomeComponent } from './pages/home/home.component';
+import { HomeComponent } from "./pages/home/home.component";
-import { NavigationComponent } from './system-management/navigation/navigation.component';
+import { NavigationComponent } from "./system-management/navigation/navigation.component";
-import { HomePageNologinComponent } from './pages/home-page-nologin/home-page-nologin.component';
+import { HomePageNologinComponent } from "./pages/home-page-nologin/home-page-nologin.component";
-
+import { GisHomeComponent } from "./pages/gis-home/gis-home.component";
-
 
 const routes: Routes = [
-  { path: '', redirectTo: 'login', pathMatch: 'full' },
+  { path: "", redirectTo: "login", pathMatch: "full" },
-  { path: 'login', component: LoginComponent }, //登录页
+  { path: "login", component: LoginComponent }, //登录页
-  { path: 'register', component: RegisterComponent }, //注册页
+  { path: "register", component: RegisterComponent }, //注册页
-  // { path: 'homepagenologin', component: HomePageNologinComponent }, //注册页
+  { path: "gishome", component: GisHomeComponent }, //地图首页
   {
-    path: '', component: HomeComponent, canActivate: [AuthGuard], children: [
+    path: "",
-      { path: '', loadChildren: () => import('./pages/pages.module').then(m => m.PagesModule) }
+    component: HomeComponent,
-    ] 
+    canActivate: [AuthGuard],
+    children: [
+      {
+        path: "",
+        loadChildren: () =>
+          import("./pages/pages.module").then((m) => m.PagesModule),
+      },
+    ],
   }, //首页
   {
-    path: '', component: NavigationComponent, canActivate: [AuthGuard], children: [
+    path: "",
-      { path: 'system', loadChildren: () => import('./system-management/system-management.module').then(m => m.SystemManagementModule) }
+    component: NavigationComponent,
-    ]
+    canActivate: [AuthGuard],
-  }//系统管理
+    children: [
+      {
+        path: "system",
+        loadChildren: () =>
+          import("./system-management/system-management.module").then(
+            (m) => m.SystemManagementModule
+          ),
+      },
+    ],
+  }, //系统管理
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' })],
+  imports: [RouterModule.forRoot(routes, { relativeLinkResolution: "legacy" })],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
 export class AppRoutingModule {}

src/app/pages/gis-home/card-title/card-title.component.html

@@ -0,0 +1,4 @@
+<div class="box">
+    <span class="title">{{title}}</span>
+    <span class="subtitle">{{subtitle}}</span>
+</div>

src/app/pages/gis-home/card-title/card-title.component.scss

@@ -0,0 +1,29 @@
+.box {
+  width: 100%;
+  height: 52px;
+  background-image: url(../../../../assets/gismap/cardtitle.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  top: -6px;
+  left: 0px;
+  display: flex;
+  align-items: center;
+  .title {
+    font-size: 20px;
+    margin-left: 60px;
+    margin-top: 10px;
+    color: #fff;
+    font-family: titlefont;
+    // background: linear-gradient(to bottom, #fff, #88c3ec);
+    // -webkit-background-clip: text;
+    // -webkit-text-fill-color: transparent;
+  }
+  .subtitle {
+    font-size: 12px;
+    color: rgba(185, 233, 255, 0.4);
+    font-family: titlefont;
+    margin-left: 6px;
+    margin-top: 16px;
+  }
+}

src/app/pages/gis-home/card-title/card-title.component.ts

@@ -0,0 +1,14 @@
+import { Component, Input, OnInit } from "@angular/core";
+
+@Component({
+  selector: "app-card-title",
+  templateUrl: "./card-title.component.html",
+  styleUrls: ["./card-title.component.scss"],
+})
+export class CardTitleComponent implements OnInit {
+  @Input() title: string;
+  @Input() subtitle: string;
+  constructor() {}
+
+  ngOnInit(): void {}
+}

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

@@ -0,0 +1,57 @@
+<div class="box">
+    <div id="mapDiv"></div>
+    <div class="mask" style="pointer-events: none;"></div>
+    <div class="leftBox">
+        <div class="left1 cardItem">
+            <app-card-title [title]="'预案统计'" [subtitle]="'Plan statistics'"></app-card-title>
+            <app-unit-title [num]="33"></app-unit-title>
+            <div class="content">
+                <div id="echartleft1"></div>
+            </div>
+        </div>
+        <div class="left2 cardItem">
+            <app-card-title [title]="'演练统计'" [subtitle]="'Exercise statistics'"></app-card-title>
+            <app-unit-title [num]="33"></app-unit-title>
+            <div class="content">
+
+            </div>
+        </div>
+        <div class="left3 cardItem">
+            <app-card-title [title]="'风险管控平台统计'" [subtitle]="'Risk management'"></app-card-title>
+            <app-unit-title [num]="33"></app-unit-title>
+            <div class="content">
+
+            </div>
+        </div>
+    </div>
+    <div class="rightBox">
+        <div class="right1 cardItem">
+            <app-card-title [title]="'接入类型'" [subtitle]="'Intervention type'"></app-card-title>
+            <div class="content">
+                <div class="accessList">
+                    <div class="accessitem" *ngFor="let item of accessList">
+                        <div class="img">
+                            <img [src]="item.img" alt="">
+                        </div>
+                        <div class="namebox">
+                            <span class="name">{{item.name}}</span>
+                            <span class="value" [ngStyle]="{'color': item.color}">{{item.value}}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right2 cardItem">
+            <app-card-title [title]="'预警统计'" [subtitle]="'Warning statistics'"></app-card-title>
+            <div class="content">
+
+            </div>
+        </div>
+        <div class="right3 cardItem">
+            <app-card-title [title]="'卸油事件'" [subtitle]="'Oil unloading event'"></app-card-title>
+            <div class="content">
+
+            </div>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,122 @@
+.box {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.mask {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 500;
+  //   background: radial-gradient(
+  //     rgba(255, 255, 255, 0) 0%,
+  //     rgba(6, 24, 50, 0.6) 50%,
+  //     rgb(5, 26, 56) 100%
+  //   );
+  background: radial-gradient(
+    rgba(255, 255, 255, 0),
+    rgba(255, 255, 255, 0),
+    rgba(6, 24, 50, 0.6),
+    rgba(6, 24, 50, 1)
+  );
+}
+#mapDiv {
+  width: 100%;
+  height: 100%;
+}
+
+.leftBox,
+.rightBox {
+  width: 430px;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  z-index: 500;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding-top: 20px;
+  padding-bottom: 10px;
+}
+.leftBox {
+  left: 20px;
+  .left1 {
+    height: 38%;
+  }
+  .left2 {
+    height: 29%;
+  }
+  .left3 {
+    height: 29%;
+  }
+}
+.rightBox {
+  right: 20px;
+  .right1 {
+    height: 25%;
+  }
+  .right2 {
+    height: 36%;
+  }
+  .right3 {
+    height: 36%;
+  }
+}
+
+.cardItem {
+  background-image: url(../../../assets/gismap/cardbg.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+  box-sizing: border-box;
+  padding-top: 50px;
+  display: flex;
+  flex-direction: column;
+  .content {
+    flex: 1;
+  }
+}
+
+.accessList {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 12px 35px 12px 12px;
+  .accessitem {
+    width: 50%;
+    display: flex;
+    align-items: center;
+    .img {
+      margin-left: 20%;
+      margin-right: 12px;
+    }
+    .namebox {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      .name {
+        font-size: 16px;
+        // font-family: Alibaba PuHuiTi;
+        font-weight: 500;
+        color: #ffffff;
+      }
+      .value {
+        font-size: 20px;
+        font-family: DINPro;
+        font-weight: bold;
+        color: #479ffe;
+      }
+    }
+  }
+}
+
+#echartleft1 {
+  width: 100%;
+  height: 100%;
+}

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

@@ -0,0 +1,197 @@
+import { Component, OnInit } from "@angular/core";
+import * as echarts from "echarts";
+declare var T: any;
+@Component({
+  selector: "app-gis-home",
+  templateUrl: "./gis-home.component.html",
+  styleUrls: ["./gis-home.component.scss"],
+})
+export class GisHomeComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {
+    this.initMap();
+    this.initEcharts();
+  }
+
+  echartleft1;
+
+  echartleft1Data = [
+    { value: 1312, name: "综合应急预案" },
+    { value: 1583, name: "专项应急预案" },
+    { value: 1235, name: "现场处置方案" },
+    { value: 1852, name: "应急处置卡" },
+    { value: 1735, name: "应急预案" },
+    { value: 1258, name: "类型预案" },
+    { value: 600, name: "I-V级预案" },
+  ];
+  echartleft1Option = {
+    tooltip: {
+      trigger: "item",
+    },
+    title: {
+      text: "9,333",
+      subtext: "预案总数",
+      left: "28.5%",
+      x: "center",
+      y: "center",
+      textAlign: "center",
+      textStyle: {
+        color: "#fff",
+        fontSize: 26,
+        lineHeight: 15,
+        fontWeight: "bold",
+        textShadowBlur: 20,
+        textShadowColor: "#fff",
+      },
+      subtextStyle: {
+        color: "#759EBB",
+        fontSize: 14,
+        fontWeight: "normal",
+      },
+    },
+    color: [
+      "#1DA7C0",
+      "#01CFA1",
+      "#F67B44",
+      "#CECE41",
+      "#7641CE",
+      "#CE4148",
+      "#FFA192",
+    ],
+    legend: {
+      orient: "vertical",
+      left: "55%", //图例距离左的距离
+      y: "center", //图例上下居中
+      itemWidth: 8,
+      itemHeight: 8,
+      itemGap: 18,
+      textStyle: {
+        color: "#fff",
+        rich: {
+          name: {
+            fontSize: 13,
+            color: "#9698A0",
+            width: 80,
+            padding: [-2, 0, 0, 0],
+          },
+          num: {
+            fontSize: 13,
+            padding: [-2, 0, 0, 0],
+            color: "#fff",
+          },
+        },
+      },
+      formatter: (name) => {
+        //图例后添加数值
+        let data = this.echartleft1Data;
+        let tarValue;
+        for (let i = 0; i < data.length; i++) {
+          if (data[i].name === name) {
+            tarValue = data[i].value;
+          }
+        }
+        return `{name|${name}}` + "   |   " + `{num|${tarValue}}`;
+      },
+    },
+    series: [
+      {
+        // name: "Access From",
+        type: "pie",
+        radius: ["40%", "55%"],
+        center: ["30%", "50%"], //图的位置，距离左跟上的位置
+        avoidLabelOverlap: false,
+        label: {
+          show: false,
+          position: "center",
+        },
+        emphasis: {
+          show: false,
+        },
+        labelLine: {
+          show: false,
+        },
+        data: this.echartleft1Data,
+      },
+      // 边框的设置
+      {
+        radius: ["36%", "41%"],
+        center: ["30%", "50%"], //图的位置，距离左跟上的位置
+        type: "pie",
+        label: {
+          normal: {
+            show: false,
+          },
+          emphasis: {
+            show: false,
+          },
+        },
+        labelLine: {
+          normal: {
+            show: false,
+          },
+          emphasis: {
+            show: false,
+          },
+        },
+        animation: false,
+        tooltip: {
+          show: false,
+        },
+        data: [
+          {
+            value: 1,
+            itemStyle: {
+              color: "#183E57",
+            },
+          },
+        ],
+      },
+     
+    ],
+  };
+  echartleft2;
+  echartleft3;
+  initEcharts() {
+    let echartleft1 = document.getElementById("echartleft1");
+    this.echartleft1 = echarts.init(echartleft1);
+    this.echartleft1Option &&
+      this.echartleft1.setOption(this.echartleft1Option);
+  }
+
+  accessList = [
+    {
+      name: "油站",
+      img: "../../../assets/gismap/icon/1.png",
+      value: 3822,
+      color: "#479FFE",
+    },
+    {
+      name: "油库",
+      img: "../../../assets/gismap/icon/2.png",
+      value: 6422,
+      color: "#A485FF",
+    },
+    {
+      name: "石油化工",
+      img: "../../../assets/gismap/icon/3.png",
+      value: 7855,
+      color: "#90FFAD",
+    },
+    {
+      name: "企业",
+      img: "../../../assets/gismap/icon/4.png",
+      value: 1877,
+      color: "#E5B55B",
+    },
+  ];
+
+  map;
+  zoom = 5;
+  initMap() {
+    this.map = new T.Map("mapDiv", {
+      projection: "EPSG:4326",
+    });
+    this.map.centerAndZoom(new T.LngLat(116.40769, 39.89945), this.zoom);
+  }
+}

src/app/pages/gis-home/unit-title/unit-title.component.html

@@ -0,0 +1,6 @@
+<div class="box">
+    <div class="numbox">
+        截至{{time}} , 已接入单位数 : <div class="num" *ngFor="let item of numArr">{{item}}</div> 家
+    </div>
+    <button class="btn">选择</button>
+</div> 

src/app/pages/gis-home/unit-title/unit-title.component.scss

@@ -0,0 +1,36 @@
+.box {
+  color: #fff;
+  display: flex;
+  align-items: center;
+  font-size: 13px;
+  margin-top: 3px;
+  margin-left: 30px;
+}
+.numbox {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-right: 12px;
+  .num {
+    width: 22px;
+    height: 22px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 1px solid rgba(129, 197, 200, 0.6);
+    font-family: DS-Digital;
+    font-weight: bold;
+    color: #ef9c00;
+    margin: 0 2px;
+  }
+}
+.btn {
+  width: 50px;
+  height: 24px;
+  border: 1px solid #46bbf1;
+  background: linear-gradient(0deg, #4ad0ff 0%, #2d3d5b 100%);
+  border-radius: 3px;
+  cursor: pointer;
+}

src/app/pages/gis-home/unit-title/unit-title.component.ts

@@ -0,0 +1,41 @@
+import { Component, Input, OnInit } from "@angular/core";
+
+@Component({
+  selector: "app-unit-title",
+  templateUrl: "./unit-title.component.html",
+  styleUrls: ["./unit-title.component.scss"],
+})
+export class UnitTitleComponent implements OnInit {
+  @Input() num: number;
+  constructor() {}
+
+  time: string;
+  ngOnInit(): void {
+    console.log(this.num);
+    this.getTime();
+    this.transformationNum(this.num);
+  }
+
+  getTime() {
+    let today = new Date();
+    let year = today.getFullYear();
+    let month = today.getMonth() + 1; // 月份是从0开始的，所以要加1
+    let day = today.getDate();
+    this.time = year + "/" + month + "/" + day;
+  }
+
+  numArr = [];
+  transformationNum(num) {
+    let str = String(num);
+    switch (str.length) {
+      case 1:
+        this.numArr = ["0", "0", str];
+        break;
+      case 2:
+        this.numArr = ["0", str[0], str[1]];
+        break;
+      default:
+        this.numArr = str.split("");
+    }
+  }
+}

src/app/pages/pages.module.ts

@@ -94,10 +94,13 @@ import { HomePageNologinComponent } from './home-page-nologin/home-page-nologin.
 import { DownImageComponent } from './down-image/down-image.component';
 import { ImgLookComponent } from './audit/img-look/img-look.component';
 import { AnxinImgLookComponent } from './oil-unloading-process/anxin-img-look/anxin-img-look.component';
+import { GisHomeComponent } from './gis-home/gis-home.component';
+import { CardTitleComponent } from './gis-home/card-title/card-title.component';
+import { UnitTitleComponent } from './gis-home/unit-title/unit-title.component';
 @NgModule({
   declarations: [LoginComponent, RegisterComponent, HomeComponent, PlanComponent, TodayWarningComponent, CriminalRecordsComponent,
     TodayWarningAdminComponent, CriminalRecordsAdminComponent, LeftDomainComponent, EquipmentInfoComponent, OilStationInfoComponent,
-    AddequipmentComponent, EditequipmentComponent, PlanAdminComponent, GetOutOfLineDetailsComponent, DispositionComponent, OilUnloadingProcessComponent, HomePageComponent, OilUnloadingProcessListComponent, ChangePasswordComponent, FacilitySortPipe, WarningStatisticsListComponent, DisposeequipmentComponent, NavBarComponent, InformComponent, UpdateCategoryComponent, FileCategoryComponent, HistoriesComponent, EditUpdateCategoryComponent, DetailsUpdateCategoryComponent, EditFileCategoryComponent, DetailsFileCategoryComponent, PdfWordLookComponent, OilStationListComponent, UpdateLicenseListComponent, FileLicenseListComponent, AuditNavComponent, AuditIngComponent, AuditRecordComponent, AuditInformTimeComponent, AuditDisposeComponent, EditInformTimeComponent, AuditDetailsInformTimeComponent, auditStatusPipe, GasBaseInfoComponent, notificationContent, licenseViolationType, handleState, AnnualInspectionComponent, EditAnnualInspectionComponent, RecordsNavComponent, UserDetailsComponent, AppealDetailsComponent, fileName, SystemModelComponent, ForgetComponent, HomePageNologinComponent, DownImageComponent, ImgLookComponent, AnxinImgLookComponent],
+    AddequipmentComponent, EditequipmentComponent, PlanAdminComponent, GetOutOfLineDetailsComponent, DispositionComponent, OilUnloadingProcessComponent, HomePageComponent, OilUnloadingProcessListComponent, ChangePasswordComponent, FacilitySortPipe, WarningStatisticsListComponent, DisposeequipmentComponent, NavBarComponent, InformComponent, UpdateCategoryComponent, FileCategoryComponent, HistoriesComponent, EditUpdateCategoryComponent, DetailsUpdateCategoryComponent, EditFileCategoryComponent, DetailsFileCategoryComponent, PdfWordLookComponent, OilStationListComponent, UpdateLicenseListComponent, FileLicenseListComponent, AuditNavComponent, AuditIngComponent, AuditRecordComponent, AuditInformTimeComponent, AuditDisposeComponent, EditInformTimeComponent, AuditDetailsInformTimeComponent, auditStatusPipe, GasBaseInfoComponent, notificationContent, licenseViolationType, handleState, AnnualInspectionComponent, EditAnnualInspectionComponent, RecordsNavComponent, UserDetailsComponent, AppealDetailsComponent, fileName, SystemModelComponent, ForgetComponent, HomePageNologinComponent, DownImageComponent, ImgLookComponent, AnxinImgLookComponent, GisHomeComponent, CardTitleComponent, UnitTitleComponent],
 
 
   imports: [

src/index.html

@@ -1,5 +1,6 @@
 <!doctype html>
 <html lang="zh-CN">
+
 <head>
   <meta charset="utf-8">
   <title>加油站智能安全管理系统</title>
@@ -7,10 +8,13 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
+
 <body>
   <app-root></app-root>
   <div id="viewerjs" style="display:none"></div>
 </body>
 <script src="./assets/js/abp.js"></script>
 <script src="./assets/js/echarts-tooltip-carousel.js"></script>
+<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=3027d4c8ed89bd8a185a9b73dbf3dcad"></script>
+
 </html>