diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 1c85645..cfd15f6 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,35 +1,50 @@ -import { NgModule } from '@angular/core'; -import { Routes, RouterModule } from '@angular/router'; -import { LoginComponent } from './pages/login/login.component'; -import { RegisterComponent } from './pages/register/register.component'; +import { NgModule } from "@angular/core"; +import { Routes, RouterModule } from "@angular/router"; +import { LoginComponent } from "./pages/login/login.component"; +import { RegisterComponent } from "./pages/register/register.component"; //路由守卫 -import { AuthGuard } from './auth.guard' -import { HomeComponent } from './pages/home/home.component'; -import { NavigationComponent } from './system-management/navigation/navigation.component'; -import { HomePageNologinComponent } from './pages/home-page-nologin/home-page-nologin.component'; - - +import { AuthGuard } from "./auth.guard"; +import { HomeComponent } from "./pages/home/home.component"; +import { NavigationComponent } from "./system-management/navigation/navigation.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: 'login', component: LoginComponent }, //登录页 - { path: 'register', component: RegisterComponent }, //注册页 - // { path: 'homepagenologin', component: HomePageNologinComponent }, //注册页 + { path: "", redirectTo: "login", pathMatch: "full" }, + { path: "login", component: LoginComponent }, //登录页 + { path: "register", component: RegisterComponent }, //注册页 + { path: "gishome", component: GisHomeComponent }, //地图首页 { - path: '', component: HomeComponent, canActivate: [AuthGuard], children: [ - { path: '', loadChildren: () => import('./pages/pages.module').then(m => m.PagesModule) } - ] + path: "", + component: HomeComponent, + canActivate: [AuthGuard], + children: [ + { + path: "", + loadChildren: () => + import("./pages/pages.module").then((m) => m.PagesModule), + }, + ], }, //首页 { - path: '', component: NavigationComponent, canActivate: [AuthGuard], children: [ - { path: 'system', loadChildren: () => import('./system-management/system-management.module').then(m => m.SystemManagementModule) } - ] - }//系统管理 + path: "", + 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' })], - exports: [RouterModule] + imports: [RouterModule.forRoot(routes, { relativeLinkResolution: "legacy" })], + exports: [RouterModule], }) -export class AppRoutingModule { } +export class AppRoutingModule {} diff --git a/src/app/pages/gis-home/card-title/card-title.component.html b/src/app/pages/gis-home/card-title/card-title.component.html new file mode 100644 index 0000000..a39632f --- /dev/null +++ b/src/app/pages/gis-home/card-title/card-title.component.html @@ -0,0 +1,4 @@ +
+ {{title}} + {{subtitle}} +
\ No newline at end of file diff --git a/src/app/pages/gis-home/card-title/card-title.component.scss b/src/app/pages/gis-home/card-title/card-title.component.scss new file mode 100644 index 0000000..b0ca13d --- /dev/null +++ b/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; + } +} diff --git a/src/app/pages/gis-home/card-title/card-title.component.ts b/src/app/pages/gis-home/card-title/card-title.component.ts new file mode 100644 index 0000000..ecc4d7f --- /dev/null +++ b/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 {} +} diff --git a/src/app/pages/gis-home/gis-home.component.html b/src/app/pages/gis-home/gis-home.component.html new file mode 100644 index 0000000..ca1677e --- /dev/null +++ b/src/app/pages/gis-home/gis-home.component.html @@ -0,0 +1,57 @@ +
+
+
+
+
+ + +
+
+
+
+
+ + +
+ +
+
+
+ + +
+ +
+
+
+
+
+ +
+
+
+
+ +
+
+ {{item.name}} + {{item.value}} +
+
+
+
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+
\ No newline at end of file diff --git a/src/app/pages/gis-home/gis-home.component.scss b/src/app/pages/gis-home/gis-home.component.scss new file mode 100644 index 0000000..5515c9f --- /dev/null +++ b/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%; +} diff --git a/src/app/pages/gis-home/gis-home.component.ts b/src/app/pages/gis-home/gis-home.component.ts new file mode 100644 index 0000000..6cf16c1 --- /dev/null +++ b/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); + } +} diff --git a/src/app/pages/gis-home/unit-title/unit-title.component.html b/src/app/pages/gis-home/unit-title/unit-title.component.html new file mode 100644 index 0000000..75c8d6e --- /dev/null +++ b/src/app/pages/gis-home/unit-title/unit-title.component.html @@ -0,0 +1,6 @@ +
+
+ 截至{{time}} , 已接入单位数 :
{{item}}
家 +
+ +
\ No newline at end of file diff --git a/src/app/pages/gis-home/unit-title/unit-title.component.scss b/src/app/pages/gis-home/unit-title/unit-title.component.scss new file mode 100644 index 0000000..1061260 --- /dev/null +++ b/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; +} diff --git a/src/app/pages/gis-home/unit-title/unit-title.component.ts b/src/app/pages/gis-home/unit-title/unit-title.component.ts new file mode 100644 index 0000000..f1b7099 --- /dev/null +++ b/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(""); + } + } +} diff --git a/src/app/pages/pages.module.ts b/src/app/pages/pages.module.ts index abc590f..d3dd6dc 100644 --- a/src/app/pages/pages.module.ts +++ b/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: [ diff --git a/src/assets/gismap/cardbg.png b/src/assets/gismap/cardbg.png new file mode 100644 index 0000000..da468aa Binary files /dev/null and b/src/assets/gismap/cardbg.png differ diff --git a/src/assets/gismap/cardtitle.png b/src/assets/gismap/cardtitle.png new file mode 100644 index 0000000..570e8a3 Binary files /dev/null and b/src/assets/gismap/cardtitle.png differ diff --git a/src/assets/gismap/icon/1.png b/src/assets/gismap/icon/1.png new file mode 100644 index 0000000..0322150 Binary files /dev/null and b/src/assets/gismap/icon/1.png differ diff --git a/src/assets/gismap/icon/2.png b/src/assets/gismap/icon/2.png new file mode 100644 index 0000000..3d4b341 Binary files /dev/null and b/src/assets/gismap/icon/2.png differ diff --git a/src/assets/gismap/icon/3.png b/src/assets/gismap/icon/3.png new file mode 100644 index 0000000..6ce2970 Binary files /dev/null and b/src/assets/gismap/icon/3.png differ diff --git a/src/assets/gismap/icon/4.png b/src/assets/gismap/icon/4.png new file mode 100644 index 0000000..1bbf24c Binary files /dev/null and b/src/assets/gismap/icon/4.png differ diff --git a/src/index.html b/src/index.html index 79008b4..07e4973 100644 --- a/src/index.html +++ b/src/index.html @@ -1,5 +1,6 @@ + 加油站智能安全管理系统 @@ -7,10 +8,13 @@ + - + + + \ No newline at end of file