18 changed files with 554 additions and 26 deletions
@ -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 {} |
||||
|
||||
@ -0,0 +1,4 @@
|
||||
<div class="box"> |
||||
<span class="title">{{title}}</span> |
||||
<span class="subtitle">{{subtitle}}</span> |
||||
</div> |
||||
@ -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; |
||||
} |
||||
} |
||||
@ -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 {} |
||||
} |
||||
@ -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> |
||||
@ -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%; |
||||
} |
||||
@ -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); |
||||
} |
||||
} |
||||
@ -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> |
||||
@ -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; |
||||
} |
||||
@ -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(""); |
||||
} |
||||
} |
||||
} |
||||
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 8.1 KiB |
|
After Width: | Height: | Size: 6.6 KiB |
|
After Width: | Height: | Size: 7.6 KiB |
|
After Width: | Height: | Size: 7.7 KiB |
Loading…
Reference in new issue