diff --git a/angular.json b/angular.json index 08c357a..7eb0d98 100644 --- a/angular.json +++ b/angular.json @@ -40,7 +40,6 @@ "src/theme.less" ], "scripts": [ - "node_modules/echarts/dist/echarts.js", "./node_modules/swiper/js/swiper.min.js" ] }, diff --git a/package-lock.json b/package-lock.json index 0b71120..bb5548a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7106,11 +7106,11 @@ } }, "echarts": { - "version": "4.6.0", - "resolved": "https://registry.npm.taobao.org/echarts/download/echarts-4.6.0.tgz?cache=0&sync_timestamp=1577438297540&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fecharts%2Fdownload%2Fecharts-4.6.0.tgz", - "integrity": "sha1-taR6EEbOyTzu75VPnuVHUTQFWOw=", + "version": "4.9.0", + "resolved": "https://registry.npmmirror.com/echarts/download/echarts-4.9.0.tgz?cache=0&sync_timestamp=1635741929711&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fecharts%2Fdownload%2Fecharts-4.9.0.tgz", + "integrity": "sha1-qbm6oD8Doqcx5jQMVb77V6nhNH0=", "requires": { - "zrender": "4.2.0" + "zrender": "4.3.2" } }, "ee-first": { @@ -17940,9 +17940,9 @@ "integrity": "sha1-Z8oISzEW/DP8QENeDV6kCiB+OS4=" }, "zrender": { - "version": "4.2.0", - "resolved": "https://registry.npm.taobao.org/zrender/download/zrender-4.2.0.tgz?cache=0&sync_timestamp=1576159866096&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fzrender%2Fdownload%2Fzrender-4.2.0.tgz", - "integrity": "sha1-0AEwLhVfKN4fn8f81cJUutKEcc8=" + "version": "4.3.2", + "resolved": "https://registry.nlark.com/zrender/download/zrender-4.3.2.tgz", + "integrity": "sha1-7HQy+UFcgsc1hLa3uMR+GwFiCcY=" } } } diff --git a/package.json b/package.json index 3d0bbbb..5c417c2 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,7 @@ "class-transformer": "^0.4.0", "e-ngx-cesium": "^6.3.2", "earcut": "^2.2.3", - "echarts": "^4.6.0", + "echarts": "^4.9.0", "firebase": "^7.6.2", "install": "^0.13.0", "ng-zorro-antd": "^9.3.0", diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 61196b3..12ff333 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -2,11 +2,11 @@ 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 { NavigationComponent } from './navigation/navigation.component'; //路由守卫 import { AuthGuard } from './auth.guard' import { HomeComponent } from './pages/home/home.component'; +import { NavigationComponent } from './system-management/navigation/navigation.component'; @@ -18,7 +18,12 @@ const routes: Routes = [ path: '', component: HomeComponent, children: [ { path: 'home', loadChildren: () => import('./pages/pages.module').then(m => m.PagesModule) } ] - } //首页 + }, //首页 + { + path: '', component: NavigationComponent, children: [ + { path: 'system', loadChildren: () => import('./system-management/system-management.module').then(m => m.SystemManagementModule) } + ] + }//系统管理 ]; @NgModule({ diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 2b0b097..6686fce 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -7,7 +7,6 @@ import { MatButtonModule } from '@angular/material/button'; import { MatCheckboxModule } from '@angular/material/checkbox'; import { MatIconModule } from '@angular/material/icon'; import { MatSidenavModule } from '@angular/material/sidenav'; -import { NavigationModule } from './navigation/navigation.module'; import { PagesModule } from './pages/pages.module'; import { FormsModule } from '@angular/forms'; import { HttpClientModule } from '@angular/common/http'; @@ -29,7 +28,6 @@ import { NzMessageModule } from 'ng-zorro-antd/message'; MatButtonModule, MatCheckboxModule, MatSidenavModule, - NavigationModule, MatIconModule, PagesModule, FormsModule, diff --git a/src/app/navigation/navigation.component.html b/src/app/navigation/navigation.component.html deleted file mode 100644 index b0774ea..0000000 --- a/src/app/navigation/navigation.component.html +++ /dev/null @@ -1,27 +0,0 @@ - - -
- -
-
-
    - - -
  • 基本信息
    • -
-
- - - - -
-
- -
-
- -
-
- \ No newline at end of file diff --git a/src/app/navigation/navigation.component.scss b/src/app/navigation/navigation.component.scss deleted file mode 100644 index c77ba06..0000000 --- a/src/app/navigation/navigation.component.scss +++ /dev/null @@ -1,152 +0,0 @@ - -.example-container { - width: 100%; - height:100%; - border: 1px solid rgba(0, 0, 0, 0.5); - overflow: hidden; - } - mat-accordion{ - height: 100%; - } -mat-sidenav{ - box-shadow: 2px 0px 5px #888888; - color: white; - background-color: #3c4252; - width: 240px; - overflow-x: hidden; - p{ - height: 48px; - cursor: pointer; - font-size: 16px; - line-height: 48px; - } - ul{ - width: 100%; - - li{ - list-style: none; - height: 48px; - line-height: 48px; - cursor: pointer; - background: white; - padding-left: 55px; - background-color: #3c4252; - color: white; - border: none; - outline: none; - } - .superli{ - padding-left: 66px; - } - } - -} - - .logobox{ - border-radius: 50%; - width: 64px; - height: 64px; - - background:url("https://img5.tianyancha.com/logo/lll/cce72488294fb8f4bc670a5bb7f0cc4d.png@!f_200x200") no-repeat; - background-size: 100%; - margin: 0px auto; - - img{ - width: 100%; - height: 100%; - } - - } - .shownav{ - position: absolute; - top: 13px; - z-index: 200; - - } - .mat-accordion .mat-expansion-panel:first-of-type { - border-top-right-radius:0px; - border-top-left-radius:0px; - } - .mat-accordion .mat-expansion-panel:last-of-type { - border-bottom-right-radius: 0px; - border-bottom-left-radius: 0px; - } - .mat-expansion-panel{ - border-radius: 0px; - } - .mat-expansion-panel-spacing { - margin: 0px; - } - .superdiv{ - padding-left: 31px; - } - mat-icon{ - color: white; - } - .navbox{ - position: absolute; - left: 0px; - top: 153px; - right: -18px; - bottom: 0px; - overflow-y: scroll; - } - mat-sidenav-container.myapp-dark-theme{ - background-color: #fafafa; - color: black; - mat-panel-title{ - color: black; - } - ul li{ - background-color: white; - color: black; - } - .biglogobox{ - background-color: #d50000; - } - color: black; - } - .biglogobox{ - width: 250px; - background-color: #42a5f5; - padding-top: 15px; - display: block; - text-align: center; - line-height:40px; - position: relative; - color: #FFF; - font-size: 2em; - margin: 0 auto; - margin-bottom: 100px; - img{ - margin-right: 11px; - } - } - mat-panel-title mat-icon{ - color: #afb2bb; - font-size: 16px; - line-height: 24px; - margin-right: 6px; - } - mat-expansion-panel{ - background-color: #3c4252; - mat-panel-title{ - color: white; - - } - } - - .mat-expansion-indicator::after { - color: white; - } - -.example-container .navbox .router-link-active { - background-color: rgba(225,225,225,.5); - border:0 -} -.example-sidenav-content{ - height: 100%; - overflow: hidden; - display: flex; - flex-direction: column; -} \ No newline at end of file diff --git a/src/app/navigation/navigation.component.spec.ts b/src/app/navigation/navigation.component.spec.ts deleted file mode 100644 index 3857718..0000000 --- a/src/app/navigation/navigation.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { NavigationComponent } from './navigation.component'; - -describe('NavigationComponent', () => { - let component: NavigationComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ NavigationComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(NavigationComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/navigation/navigation.module.ts b/src/app/navigation/navigation.module.ts deleted file mode 100644 index e862481..0000000 --- a/src/app/navigation/navigation.module.ts +++ /dev/null @@ -1,107 +0,0 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { NavigationComponent } from './navigation.component'; -import { MatIconModule } from '@angular/material/icon'; -import { MatSidenavModule } from '@angular/material/sidenav'; -import { RouterModule } from '@angular/router'; -import { FormsModule } from '@angular/forms'; -import { UiModule } from '../ui/ui.module'; -import {A11yModule} from '@angular/cdk/a11y'; -import {DragDropModule} from '@angular/cdk/drag-drop'; -import {PortalModule} from '@angular/cdk/portal'; -import {ScrollingModule} from '@angular/cdk/scrolling'; -import {CdkStepperModule} from '@angular/cdk/stepper'; -import {CdkTableModule} from '@angular/cdk/table'; -import {CdkTreeModule} from '@angular/cdk/tree'; -import {MatAutocompleteModule} from '@angular/material/autocomplete'; -import {MatBadgeModule} from '@angular/material/badge'; -import {MatBottomSheetModule} from '@angular/material/bottom-sheet'; -import {MatButtonModule} from '@angular/material/button'; -import {MatButtonToggleModule} from '@angular/material/button-toggle'; -import {MatCardModule} from '@angular/material/card'; -import {MatCheckboxModule} from '@angular/material/checkbox'; -import {MatChipsModule} from '@angular/material/chips'; -import {MatStepperModule} from '@angular/material/stepper'; -import {MatDatepickerModule} from '@angular/material/datepicker'; -import {MatDialogModule} from '@angular/material/dialog'; -import {MatDividerModule} from '@angular/material/divider'; -import {MatExpansionModule} from '@angular/material/expansion'; -import {MatGridListModule} from '@angular/material/grid-list'; -import {MatInputModule} from '@angular/material/input'; -import {MatListModule} from '@angular/material/list'; -import {MatMenuModule} from '@angular/material/menu'; -import {MatNativeDateModule, MatRippleModule} from '@angular/material/core'; -import {MatPaginatorModule} from '@angular/material/paginator'; -import {MatProgressBarModule} from '@angular/material/progress-bar'; -import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; -import {MatRadioModule} from '@angular/material/radio'; -import {MatSelectModule} from '@angular/material/select'; -import {MatSliderModule} from '@angular/material/slider'; -import {MatSlideToggleModule} from '@angular/material/slide-toggle'; -import {MatSnackBarModule} from '@angular/material/snack-bar'; -import {MatSortModule} from '@angular/material/sort'; -import {MatTableModule} from '@angular/material/table'; -import {MatTabsModule} from '@angular/material/tabs'; -import {MatToolbarModule} from '@angular/material/toolbar'; -import {MatTooltipModule} from '@angular/material/tooltip'; -import {MatTreeModule} from '@angular/material/tree'; - -@NgModule({ - declarations: [ - NavigationComponent - ], - imports: [ - CommonModule, - MatSidenavModule, - RouterModule, - MatIconModule, - FormsModule, - UiModule, - A11yModule, - CdkStepperModule, - CdkTableModule, - CdkTreeModule, - DragDropModule, - MatAutocompleteModule, - MatBadgeModule, - MatBottomSheetModule, - MatButtonModule, - MatButtonToggleModule, - MatCardModule, - MatCheckboxModule, - MatChipsModule, - MatStepperModule, - MatDatepickerModule, - MatDialogModule, - MatDividerModule, - MatExpansionModule, - MatGridListModule, - MatIconModule, - MatInputModule, - MatListModule, - MatMenuModule, - MatNativeDateModule, - MatPaginatorModule, - MatProgressBarModule, - MatProgressSpinnerModule, - MatRadioModule, - MatRippleModule, - MatSelectModule, - MatSidenavModule, - MatSliderModule, - MatSlideToggleModule, - MatSnackBarModule, - MatSortModule, - MatTableModule, - MatTabsModule, - MatToolbarModule, - MatTooltipModule, - MatTreeModule, - PortalModule, - ScrollingModule, - ], - exports: [ - NavigationComponent - ] -}) -export class NavigationModule { } diff --git a/src/app/pages/criminal-records-admin/criminal-records-admin.component.html b/src/app/pages/criminal-records-admin/criminal-records-admin.component.html new file mode 100644 index 0000000..8ad4b46 --- /dev/null +++ b/src/app/pages/criminal-records-admin/criminal-records-admin.component.html @@ -0,0 +1,159 @@ +
+
+ +
+
+
+ +
+
+
+
+ + + 违规事件统计 + +
+
违规事件总数
+
206
+
+
+ +
+
+
+ + + 违规趋势 + +
+ +
+
+
+
+ +
+ +
+
+
+
+
+ 事件编号 +
+
+ 事件级别 +
+
+ 事件类型 +
+
+ 区域 +
+
+ +
+
+ 加油站 +
+
+ 地点 +
+
+ 违规时间 +
+
+ 操作 +
+
+
+
+
+ {{item.id}} +
+
+ {{item.level}} +
+
+ {{item.type}} +
+
+ 山东淄博 +
+
+ 自营 +
+
+ {{item.name}} +
+
+ {{item.site}} +
+
+ {{item.time}} +
+
+ 查看 +
+
+
+
+ +
+
+
diff --git a/src/app/pages/criminal-records-admin/criminal-records-admin.component.scss b/src/app/pages/criminal-records-admin/criminal-records-admin.component.scss new file mode 100644 index 0000000..74cb622 --- /dev/null +++ b/src/app/pages/criminal-records-admin/criminal-records-admin.component.scss @@ -0,0 +1,176 @@ +.recordsbox { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; +} + +.search { + box-sizing: border-box; + padding: 0 36px; + width: 100%; + height: 32px; + margin-top: 14px; + + form { + width: 100%; + height: 32px; + display: flex; + justify-content: space-around; + + .searchParams { + width: 22%; + } + + .btn { + width: 5%; + } + + nz-select { + color: rgba(145, 204, 255, 0.95); + } + + nz-range-picker { + background-color: rgba(0, 0, 0, 0); + width: 97%; + } + + } + + +} + +.content { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; + + .title { + width: 100%; + height: 64px; + box-sizing: border-box; + padding: 0 28px; + margin: 13px 0; + } + + .chartsbox { + width: 100%; + display: flex; + justify-content: center; + + .chart { + width: 97%; + height: 360px; + border: 0px; + box-shadow: 0 0 26px 0px #1a7fd7 inset; + box-sizing: border-box; + padding: 18px 26px; + display: flex; + + div { + display: flex; + flex-direction: column; + + span { + font-family: titlefont; + display: flex; + align-items: center; + height: 28px; + color: #bee1ff; + font-size: 16px; + } + + div { + flex: 1; + } + + .piechart {} + + .barchart { + border: 1px solid rgba(145, 204, 255, 0.95); + } + } + + .leftbox { + width: 360px; + position: relative; + + .centerContent { + position: absolute; + top: 42%; + left: 11%; + width: 170px; + + div { + text-align: center; + } + + .numname { + font-family: titlefont; + color: #bee1ff; + } + + .num { + color: #FFFFFF; + font-size: 42px; + text-shadow: 0px 0px 16px #3A9AFF; + font-weight: bold; + height: 49px; + line-height: 50px; + } + } + } + + .rightbox { + flex: 1; + } + } + } + + .tablebox { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + overflow: hidden; + + .table { + color: white; + flex: 1; + width: 96%; + display: flex; + flex-direction: column; + overflow: hidden; + + .th { + height: 38px; + line-height: 38px; + background: #054783; + } + + .tbody { + flex: 1; + overflow-y: auto; + + .tr { + height: 38px; + line-height: 38px; + border-bottom: 1px solid #0d3761; + } + } + } + + .pagination { + margin: 15px 0; + display: flex; + align-items: center; + justify-content: center; + } + + ::-webkit-scrollbar { + width: 0px; + } + + } +} diff --git a/src/app/pages/criminal-records-admin/criminal-records-admin.component.ts b/src/app/pages/criminal-records-admin/criminal-records-admin.component.ts new file mode 100644 index 0000000..683423a --- /dev/null +++ b/src/app/pages/criminal-records-admin/criminal-records-admin.component.ts @@ -0,0 +1,131 @@ +import { Component, OnInit } from '@angular/core'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { Router } from '@angular/router' +import * as echarts from 'echarts'; +@Component({ + selector: 'app-criminal-records-admin', + templateUrl: './criminal-records-admin.component.html', + styleUrls: ['./criminal-records-admin.component.scss'] +}) +export class CriminalRecordsAdminComponent implements OnInit { + + validateForm!: FormGroup; + constructor(private fb: FormBuilder, private router: Router) { } + + ngOnInit(): void { + this.validateForm = this.fb.group({ + level: [null], + type: [null], + site: [null], + datePicker: [null] + }); + + // 基于准备好的dom，初始化echarts实例 + let myChart = echarts.init(document.getElementById('piechart')); + let option = { + color: ['#FF4B65', '#23D9FF', '#608AFF', '#B2FF6D', '#FFFF99', '#C4E2FC', '#FF7F00', '#0090FF', '#FFD634', '#105597', '#FF4B65', '#23D9FF', '#71FFF5', '#B2FF6D'], + tooltip: { + trigger: 'item'//触发类型 + }, + series: [ + { + // name: 'Access From', + type: 'pie', + radius: [85, 112],//内半径外，外半径 + left: '-30%', + avoidLabelOverlap: false,//防止标签重叠策略 + label: {//每一个标签外网延伸的引导说明 + show: false, + position: 'outside' + }, + labelLine: {//引导线 + show: true, + showAbove: true + }, + emphasis: {//中间高亮区域 + label: { + show: false, + fontSize: '40', + fontWeight: 'bold' + } + }, + data: [ + { value: 26, name: '工作人员倚靠加油机或者立柱1' }, + { value: 86, name: '工作人员倚靠加油机或者立柱2' }, + { value: 34, name: '工作人员倚靠加油机或者立柱3' }, + { value: 55, name: '工作人员倚靠加油机或者立柱4' }, + { value: 60, name: '工作人员倚靠加油机或者立柱5' }, + { value: 26, name: '工作人员倚靠加油机或者立柱6' }, + { value: 86, name: '工作人员倚靠加油机或者立柱7' }, + { value: 34, name: '工作人员倚靠加油机或者立柱8' }, + { value: 55, name: '工作人员倚靠加油机或者立柱9' }, + { value: 60, name: '工作人员倚靠加油机或者立柱10' }, + { value: 26, name: '工作人员倚靠加油机或者立柱11' }, + { value: 86, name: '工作人员倚靠加油机或者立柱12' }, + { value: 34, name: '工作人员倚靠加油机或者立柱13' }, + { value: 55, name: '工作人员倚靠加油机或者立柱14' }, + { value: 60, name: '工作人员倚靠加油机或者立柱15' }, + { value: 26, name: '工作人员倚靠加油机或者立柱16' }, + { value: 86, name: '工作人员倚靠加油机或者立柱17' }, + { value: 34, name: '工作人员倚靠加油机或者立柱18' }, + { value: 55, name: '工作人员倚靠加油机或者立柱19' }, + { value: 60, name: '工作人员倚靠加油机或者立柱20' } + ], + tooltip: {//鼠标移入提示 + position: 'right', + padding: [14, 19], + backgroundColor: 'rgba(28, 129, 218, 0.4)', + textStyle: { + color: '#fff', + fontSize: 12 + } + } + } + ] + }; + // 绘制图表 + myChart.setOption(option); + } + submitForm(): void { + for (const i in this.validateForm.controls) { + this.validateForm.controls[i].markAsDirty(); + this.validateForm.controls[i].updateValueAndValidity(); + } + + console.log(this.validateForm) + } + resetForm(e: MouseEvent): void { + e.preventDefault(); + this.validateForm.reset(); + for (const key in this.validateForm.controls) { + this.validateForm.controls[key].markAsPristine(); + this.validateForm.controls[key].updateValueAndValidity(); + } + } + + + list: any = [ + { id: 'SDFFDCDC484C8DCCCDGG', level: 'Ⅰ级', type: '工作人员倚靠加油机或立柱', name: '中化山东省淄博市第6加油站', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }, + { id: 'SDFFDCDC484C8DCCCDGG', level: 'Ⅰ级', type: '工作人员倚靠加油机或立柱', name: '中化山东省淄博市第6加油站', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }, + { id: 'SDFFDCDC484C8DCCCDGG', level: 'Ⅰ级', type: '工作人员倚靠加油机或立柱', name: '中化山东省淄博市第6加油站', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }, + { id: 'SDFFDCDC484C8DCCCDGG', level: 'Ⅰ级', type: '工作人员倚靠加油机或立柱', name: '中化山东省淄博市第6加油站', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }, + { id: 'SDFFDCDC484C8DCCCDGG', level: 'Ⅰ级', type: '工作人员倚靠加油机或立柱', name: '中化山东省淄博市第6加油站', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }, + { id: 'SDFFDCDC484C8DCCCDGG', level: 'Ⅰ级', type: '工作人员倚靠加油机或立柱', name: '中化山东省淄博市第6加油站', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }, + { id: 'SDFFDCDC484C8DCCCDGG', level: 'Ⅰ级', type: '工作人员倚靠加油机或立柱', name: '中化山东省淄博市第6加油站', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }, + { id: 'SDFFDCDC484C8DCCCDGG', level: 'Ⅰ级', type: '工作人员倚靠加油机或立柱', name: '中化山东省淄博市第6加油站', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }, + { id: 'SDFFDCDC484C8DCCCDGG', level: 'Ⅰ级', type: '工作人员倚靠加油机或立柱', name: '中化山东省淄博市第6加油站', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }, + { id: 'SDFFDCDC484C8DCCCDGG', level: 'Ⅰ级', type: '工作人员倚靠加油机或立柱', name: '中化山东省淄博市第6加油站', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }, + { id: 'SDFFDCDC484C8DCCCDGG', level: 'Ⅰ级', type: '工作人员倚靠加油机或立柱', name: '中化山东省淄博市第6加油站', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }, + { id: 'SDFFDCDC484C8DCCCDGG', level: 'Ⅰ级', type: '工作人员倚靠加油机或立柱', name: '中化山东省淄博市第6加油站', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }, + { id: 'SDFFDCDC484C8DCCCDGG', level: 'Ⅰ级', type: '工作人员倚靠加油机或立柱', name: '中化山东省淄博市第6加油站', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }, + { id: 'SDFFDCDC484C8DCCCDGG', level: 'Ⅰ级', type: '工作人员倚靠加油机或立柱', name: '中化山东省淄博市第6加油站', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }, + { id: 'SDFFDCDC484C8DCCCDGG', level: 'Ⅰ级', type: '工作人员倚靠加油机或立柱', name: '中化山东省淄博市第6加油站', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }, + { id: 'SDFFDCDC484C8DCCCDGG', level: 'Ⅰ级', type: '工作人员倚靠加油机或立柱', name: '中化山东省淄博市第6加油站', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }, + { id: 'SDFFDCDC484C8DCCCDGG', level: 'Ⅰ级', type: '工作人员倚靠加油机或立柱', name: '中化山东省淄博市第6加油站', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }, + { id: 'SDFFDCDC484C8DCCCDGG', level: 'Ⅰ级', type: '工作人员倚靠加油机或立柱', name: '中化山东省淄博市第6加油站', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }, + { id: 'SDFFDCDC484C8DCCCDGG', level: 'Ⅰ级', type: '工作人员倚靠加油机或立柱', name: '中化山东省淄博市第6加油站', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' } + ] + look() { + this.router.navigate(['home/records/petrolStation']) + } +} diff --git a/src/app/pages/criminal-records/criminal-records.component.scss b/src/app/pages/criminal-records/criminal-records.component.scss index b0ac76e..2c8bc97 100644 --- a/src/app/pages/criminal-records/criminal-records.component.scss +++ b/src/app/pages/criminal-records/criminal-records.component.scss @@ -27,16 +27,17 @@ } nz-select { - color: #fff; + color: rgba(145, 204, 255, 0.95); } + nz-range-picker { - background-color: #002552; + background-color: rgba(0, 0, 0, 0); width: 97%; } } - + } .content { @@ -44,6 +45,7 @@ display: flex; flex-direction: column; overflow: hidden; + .title { margin-bottom: 15px; width: 100%; @@ -69,38 +71,44 @@ display: flex; flex-direction: column; align-items: center; - overflow:hidden; - .table{ + overflow: hidden; + + .table { color: white; flex: 1; width: 96%; display: flex; flex-direction: column; overflow: hidden; - .th{ + + .th { height: 38px; line-height: 38px; background: #054783; } - .tbody{ + + .tbody { flex: 1; overflow-y: auto; - .tr{ + + .tr { height: 38px; line-height: 38px; border-bottom: 1px solid #0d3761; } } } - .pagination{ + + .pagination { margin: 15px 0; display: flex; align-items: center; justify-content: center; } + ::-webkit-scrollbar { width: 0px; } - + } } diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html index 29618f4..15e5cfd 100644 --- a/src/app/pages/home/home.component.html +++ b/src/app/pages/home/home.component.html @@ -9,7 +9,7 @@
  • 今日预警
    • -
  • +
  • 违规记录
    • diff --git a/src/app/pages/pages-routing.module.ts b/src/app/pages/pages-routing.module.ts index 5f95c79..35bce70 100644 --- a/src/app/pages/pages-routing.module.ts +++ b/src/app/pages/pages-routing.module.ts @@ -5,12 +5,14 @@ import { TodayWarningComponent } from './today-warning/today-warning.component'; import { CriminalRecordsComponent } from './criminal-records/criminal-records.component'; import {AuthGuard} from '../auth.guard' import { TodayWarningAdminComponent } from './today-warning-admin/today-warning-admin.component'; +import { CriminalRecordsAdminComponent } from './criminal-records-admin/criminal-records-admin.component'; const routes: Routes = [ { path: 'plan', component: PlanComponent , data: { permission: 'xxxx' },canActivate: [AuthGuard]}, { path: 'warning/petrolStation', component: TodayWarningComponent }, { path: 'warning/admin', component: TodayWarningAdminComponent }, - { path: 'records/petrolStation', component: CriminalRecordsComponent } + { path: 'records/petrolStation', component: CriminalRecordsComponent }, + { path: 'records/admin', component: CriminalRecordsAdminComponent } ]; @NgModule({ diff --git a/src/app/pages/pages.module.ts b/src/app/pages/pages.module.ts index 5b54a7f..b509d59 100644 --- a/src/app/pages/pages.module.ts +++ b/src/app/pages/pages.module.ts @@ -29,8 +29,9 @@ import { NzPaginationModule } from 'ng-zorro-antd/pagination'; import { NzDropDownModule } from 'ng-zorro-antd/dropdown'; import { NzMessageModule } from 'ng-zorro-antd/message'; import { TodayWarningAdminComponent } from './today-warning-admin/today-warning-admin.component'; +import { CriminalRecordsAdminComponent } from './criminal-records-admin/criminal-records-admin.component'; @NgModule({ - declarations: [LoginComponent, RegisterComponent, HomeComponent, PlanComponent, TodayWarningComponent, CriminalRecordsComponent, TodayWarningAdminComponent,], + declarations: [LoginComponent, RegisterComponent, HomeComponent, PlanComponent, TodayWarningComponent, CriminalRecordsComponent, TodayWarningAdminComponent, CriminalRecordsAdminComponent,], imports: [ PagesRoutingModule, CommonModule, diff --git a/src/app/pages/today-warning-admin/today-warning-admin.component.html b/src/app/pages/today-warning-admin/today-warning-admin.component.html index f8b0826..75a90ad 100644 --- a/src/app/pages/today-warning-admin/today-warning-admin.component.html +++ b/src/app/pages/today-warning-admin/today-warning-admin.component.html @@ -145,7 +145,7 @@ 2021-10-12 09:28:13
    - +
    diff --git a/src/app/pages/today-warning-admin/today-warning-admin.component.scss b/src/app/pages/today-warning-admin/today-warning-admin.component.scss index 32ef775..fb8f536 100644 --- a/src/app/pages/today-warning-admin/today-warning-admin.component.scss +++ b/src/app/pages/today-warning-admin/today-warning-admin.component.scss @@ -35,14 +35,14 @@ } nz-select { - color: #fff; + color: rgba(145, 204, 255, 0.95);; } nz-date-picker { - background-color: #002552; + background-color: rgba(0, 0, 0, 0); width: 145%; } - + } } diff --git a/src/app/pages/today-warning-admin/today-warning-admin.component.ts b/src/app/pages/today-warning-admin/today-warning-admin.component.ts index e6d3406..6b9169b 100644 --- a/src/app/pages/today-warning-admin/today-warning-admin.component.ts +++ b/src/app/pages/today-warning-admin/today-warning-admin.component.ts @@ -1,5 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { Router } from '@angular/router' @Component({ selector: 'app-today-warning-admin', templateUrl: './today-warning-admin.component.html', @@ -8,7 +9,7 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms'; export class TodayWarningAdminComponent implements OnInit { validateForm!: FormGroup; - constructor(private fb: FormBuilder) { } + constructor(private fb: FormBuilder, private router: Router) { } ngOnInit(): void { this.validateForm = this.fb.group({ @@ -66,4 +67,7 @@ export class TodayWarningAdminComponent implements OnInit { this.isVisible = false; } + look() { + this.router.navigate(['home/warning/petrolStation']) + } } diff --git a/src/app/pages/today-warning/today-warning.component.scss b/src/app/pages/today-warning/today-warning.component.scss index 8d719b0..16a8d2c 100644 --- a/src/app/pages/today-warning/today-warning.component.scss +++ b/src/app/pages/today-warning/today-warning.component.scss @@ -35,11 +35,11 @@ } nz-select { - color: #fff; + color: rgba(145, 204, 255, 0.95); } nz-date-picker { - background-color: #002552; + background-color: rgba(0, 0, 0, 0); width: 145%; } @@ -79,12 +79,14 @@ color: #91CCFF; margin-bottom: 12px; background: linear-gradient(180deg, rgba(3, 0, 0, 0) 0%, rgba(0, 46, 91, 0.68) 100%); + div { font-size: 15px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + button { font-size: 15px; background-color: #013064; diff --git a/src/app/system-management/navigation/navigation.component.html b/src/app/system-management/navigation/navigation.component.html new file mode 100644 index 0000000..2b28ba1 --- /dev/null +++ b/src/app/system-management/navigation/navigation.component.html @@ -0,0 +1 @@ +

    系统管理页面

    diff --git a/src/app/system-management/navigation/navigation.component.scss b/src/app/system-management/navigation/navigation.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/navigation/navigation.component.ts b/src/app/system-management/navigation/navigation.component.ts similarity index 62% rename from src/app/navigation/navigation.component.ts rename to src/app/system-management/navigation/navigation.component.ts index d16e6af..18be053 100644 --- a/src/app/navigation/navigation.component.ts +++ b/src/app/system-management/navigation/navigation.component.ts @@ -1,5 +1,4 @@ import { Component, OnInit } from '@angular/core'; -import {CacheTokenService} from '../service/cache-token.service'//引入服务 @Component({ selector: 'app-navigation', @@ -7,11 +6,10 @@ import {CacheTokenService} from '../service/cache-token.service'//引入服务 styleUrls: ['./navigation.component.scss'] }) export class NavigationComponent implements OnInit { - - constructor(public navmenus:CacheTokenService) { } - ngOnInit() { + constructor() { } + ngOnInit(): void { } } diff --git a/src/app/system-management/organization/organization.component.html b/src/app/system-management/organization/organization.component.html new file mode 100644 index 0000000..414c783 --- /dev/null +++ b/src/app/system-management/organization/organization.component.html @@ -0,0 +1 @@ +

    organization works!

    diff --git a/src/app/system-management/organization/organization.component.scss b/src/app/system-management/organization/organization.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/system-management/organization/organization.component.ts b/src/app/system-management/organization/organization.component.ts new file mode 100644 index 0000000..b7e9eee --- /dev/null +++ b/src/app/system-management/organization/organization.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-organization', + templateUrl: './organization.component.html', + styleUrls: ['./organization.component.scss'] +}) +export class OrganizationComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/system-management/role/role.component.html b/src/app/system-management/role/role.component.html new file mode 100644 index 0000000..ce1bd50 --- /dev/null +++ b/src/app/system-management/role/role.component.html @@ -0,0 +1 @@ +

    role works!

    diff --git a/src/app/system-management/role/role.component.scss b/src/app/system-management/role/role.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/system-management/role/role.component.ts b/src/app/system-management/role/role.component.ts new file mode 100644 index 0000000..dbd7a84 --- /dev/null +++ b/src/app/system-management/role/role.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-role', + templateUrl: './role.component.html', + styleUrls: ['./role.component.scss'] +}) +export class RoleComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/system-management/system-management-routing.module.ts b/src/app/system-management/system-management-routing.module.ts new file mode 100644 index 0000000..54f7104 --- /dev/null +++ b/src/app/system-management/system-management-routing.module.ts @@ -0,0 +1,18 @@ +import { Routes, RouterModule } from '@angular/router'; +import { NgModule } from '@angular/core'; + +import {AuthGuard} from '../auth.guard' + +const routes: Routes = [ + // { path: 'plan', component: PlanComponent }, + // { path: 'warning/petrolStation', component: TodayWarningComponent }, + // { path: 'warning/admin', component: TodayWarningAdminComponent }, + // { path: 'records/petrolStation', component: CriminalRecordsComponent }, + // { path: 'records/admin', component: CriminalRecordsAdminComponent } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class SystemRoutingModule { } diff --git a/src/app/system-management/system-management.module.ts b/src/app/system-management/system-management.module.ts new file mode 100644 index 0000000..a757a84 --- /dev/null +++ b/src/app/system-management/system-management.module.ts @@ -0,0 +1,18 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { SystemRoutingModule } from './system-management-routing.module'; +import { OrganizationComponent } from './organization/organization.component'; +import { UserComponent } from './user/user.component'; +import { RoleComponent } from './role/role.component'; +import { NavigationComponent } from './navigation/navigation.component'; + + + +@NgModule({ + declarations: [OrganizationComponent, UserComponent, RoleComponent, NavigationComponent], + imports: [ + CommonModule, + SystemRoutingModule + ] +}) +export class SystemManagementModule { } diff --git a/src/app/system-management/user/user.component.html b/src/app/system-management/user/user.component.html new file mode 100644 index 0000000..d039bb7 --- /dev/null +++ b/src/app/system-management/user/user.component.html @@ -0,0 +1 @@ +

    user works!

    diff --git a/src/app/system-management/user/user.component.scss b/src/app/system-management/user/user.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/system-management/user/user.component.ts b/src/app/system-management/user/user.component.ts new file mode 100644 index 0000000..5df0c83 --- /dev/null +++ b/src/app/system-management/user/user.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-user', + templateUrl: './user.component.html', + styleUrls: ['./user.component.scss'] +}) +export class UserComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/ui/changepassword/changepassword.component.ts b/src/app/ui/changepassword/changepassword.component.ts index 07ae9c5..fae2f9c 100644 --- a/src/app/ui/changepassword/changepassword.component.ts +++ b/src/app/ui/changepassword/changepassword.component.ts @@ -1,6 +1,5 @@ import { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http' -import { MatDialogRef } from '@angular/material/dialog'; import { NzMessageService } from 'ng-zorro-antd/message'; @@ -12,8 +11,7 @@ import { NzMessageService } from 'ng-zorro-antd/message'; export class ChangepasswordComponent implements OnInit { - constructor(private http: HttpClient, - public dialogRef: MatDialogRef, private message: NzMessageService) { } + constructor(private http: HttpClient, private message: NzMessageService) { } ngOnInit() { } @@ -27,7 +25,7 @@ export class ChangepasswordComponent implements OnInit { password: e.password } ).subscribe(data => { - this.dialogRef.close(data); + // this.dialogRef.close(data); this.message.create('success', `密码修改成功`); }, (err) => { this.errmsg = err } ) diff --git a/src/app/ui/tabbar/tabbar.component.html b/src/app/ui/tabbar/tabbar.component.html index 4955849..15c0c56 100644 --- a/src/app/ui/tabbar/tabbar.component.html +++ b/src/app/ui/tabbar/tabbar.component.html @@ -16,6 +16,7 @@
      +
    • 系统管理
    • 退出系统
     diff --git a/src/app/ui/tabbar/tabbar.component.ts b/src/app/ui/tabbar/tabbar.component.ts index 66ac60e..5d2dada 100644 --- a/src/app/ui/tabbar/tabbar.component.ts +++ b/src/app/ui/tabbar/tabbar.component.ts @@ -2,7 +2,6 @@ import { Component, OnInit, Output, EventEmitter } from '@angular/core'; import { HttpClient } from '@angular/common/http' import { Router, ActivatedRoute } from '@angular/router' import { CacheTokenService } from '../../service/cache-token.service' //引入服务 -import { MatDialog } from '@angular/material/dialog'; import { ChangepasswordComponent } from '../changepassword/changepassword.component' import { CookieService } from 'ngx-cookie-service'; import { NzMessageService } from 'ng-zorro-antd/message'; @@ -15,7 +14,7 @@ import { NzMessageService } from 'ng-zorro-antd/message'; }) export class TabbarComponent implements OnInit { - constructor(private http: HttpClient, private router: Router, private route: ActivatedRoute, public token: CacheTokenService, public dialog: MatDialog, + constructor(private http: HttpClient, private router: Router, private route: ActivatedRoute, public token: CacheTokenService, private cookieService: CookieService, private message: NzMessageService) { } ngOnInit() { @@ -60,11 +59,13 @@ export class TabbarComponent implements OnInit { this.cookieService.set("refreshToken", '', new Date(new Date().getTime() + 1), '/'); this.router.navigate(['/login']) } - + system(){ + this.router.navigate(['/system']) + } //修改密码 changpsw() { - let dialogRef = this.dialog.open(ChangepasswordComponent, { width: '348.000051px' }); - dialogRef.afterClosed().subscribe(); + // let dialogRef = this.dialog.open(ChangepasswordComponent, { width: '348.000051px' }); + // dialogRef.afterClosed().subscribe(); } diff --git a/src/app/ui/userdata/userdata.component.ts b/src/app/ui/userdata/userdata.component.ts index 55485dc..41cc852 100644 --- a/src/app/ui/userdata/userdata.component.ts +++ b/src/app/ui/userdata/userdata.component.ts @@ -1,5 +1,4 @@ import { Component, OnInit, ViewChild, Inject } from '@angular/core'; -import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog'; import { HttpClient,HttpHeaders } from '@angular/common/http'; @@ -11,7 +10,7 @@ import { HttpClient,HttpHeaders } from '@angular/common/http'; }) export class UserdataComponent implements OnInit { - constructor(private http: HttpClient,public dialog: MatDialog) { } + constructor(private http: HttpClient) { } userInfo:any={}; // 用户信息 @@ -29,12 +28,12 @@ export class UserdataComponent implements OnInit { //修改资料弹窗 edit () { let data = this.userInfo - let dialogRef = this.dialog.open(EditUser,{data}); - dialogRef.afterClosed().subscribe( - (data)=>{ - if (data) {this.getUserInfo()} - } - ); + // let dialogRef = this.dialog.open(EditUser,{data}); + // dialogRef.afterClosed().subscribe( + // (data)=>{ + // if (data) {this.getUserInfo()} + // } + // ); } @@ -49,34 +48,34 @@ export class UserdataComponent implements OnInit { styleUrls: ['./userdata.component.scss'] }) export class EditUser { - constructor(private http: HttpClient,public dialogRef: MatDialogRef,@Inject(MAT_DIALOG_DATA) public data) {} - - ngOnInit() { - this.tel = this.data.phone - this.companyName = this.data.companyName - this.usci = this.data.usci - } - - tel:any; //联系电话 - companyName:any; //单位名称 - usci:any; //统一社会信用代码 - errMsg:any; //错误信息 - - //提交表单修改信息 - onSubmit (e) { - this.http.put('/api/CompanyAccount/Profiles',{ - name:this.data.name, - phone:e.tel, - enabled:this.data.enabled, - creationTime:this.data.creationTime, - usci:e.usci, - companyId:this.data.companyId, - companyName:e.companyName - }).subscribe(data=>{ - this.dialogRef.close('success') - },(err) => - {this.errMsg = err}) - } + constructor(private http: HttpClient) {} + + // ngOnInit() { + // this.tel = this.data.phone + // this.companyName = this.data.companyName + // this.usci = this.data.usci + // } + + // tel:any; //联系电话 + // companyName:any; //单位名称 + // usci:any; //统一社会信用代码 + // errMsg:any; //错误信息 + + // //提交表单修改信息 + // onSubmit (e) { + // this.http.put('/api/CompanyAccount/Profiles',{ + // name:this.data.name, + // phone:e.tel, + // enabled:this.data.enabled, + // creationTime:this.data.creationTime, + // usci:e.usci, + // companyId:this.data.companyId, + // companyName:e.companyName + // }).subscribe(data=>{ + // this.dialogRef.close('success') + // },(err) => + // {this.errMsg = err}) + // } diff --git a/src/assets/images/AnXinQQ.jpg b/src/assets/images/AnXinQQ.jpg deleted file mode 100644 index 5f527ce..0000000 Binary files a/src/assets/images/AnXinQQ.jpg and /dev/null differ diff --git a/src/assets/images/AnXinWX.jpg b/src/assets/images/AnXinWX.jpg deleted file mode 100644 index 1809be4..0000000 Binary files a/src/assets/images/AnXinWX.jpg and /dev/null differ diff --git a/src/assets/images/flower.png b/src/assets/images/flower.png new file mode 100644 index 0000000..d6f2509 Binary files /dev/null and b/src/assets/images/flower.png differ diff --git a/src/assets/images/upload2.png b/src/assets/images/upload2.png deleted file mode 100644 index ccd74f5..0000000 Binary files a/src/assets/images/upload2.png and /dev/null differ diff --git a/src/theme.less b/src/theme.less index 21b1e8b..6c9653c 100644 --- a/src/theme.less +++ b/src/theme.less @@ -4,7 +4,7 @@ -@border-color-base: #8aacce; +@border-color-base: #91CCFF; @select-background: transparent; @@ -13,25 +13,25 @@ .ant-btn { border-radius: 0px; } - +.ant-btn:hover, .ant-btn:focus, .ant-btn:active, .ant-btn.active{ + // background: #083461; +} //select picker 小剪头 .ant-select-arrow, .ant-picker-separator { - color: #478bcf; + color: #36A2FF; } //日期选择器 -@input-placeholder-color: #8aacce; - -.ant-picker-suffix { - color: #8aacce; -} +@input-placeholder-color: #345d85; +.ant-picker-suffix, .ant-picker-input>input { - color: #fff; + color: rgba(145, 204, 255, 0.95); } + //弹窗遮罩层 .ant-modal-mask { background: rgba(0, 0, 0, 0.05); @@ -55,6 +55,8 @@ background: #107495; } + +//查询重置按钮 .submit { background: rgba(0, 129, 255, 0.61); border: 1px solid #36A2FF;