chenjingyu
4 years ago
230 changed files with 671 additions and 18417 deletions
@ -1,3 +0,0 @@
|
||||
<div id="map" class="mapbox"> |
||||
|
||||
</div> |
||||
@ -1,84 +0,0 @@
|
||||
.mapbox{ |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// .content-window-card { |
||||
// position: relative; |
||||
// box-shadow: none; |
||||
// bottom: 0; |
||||
// left: 0; |
||||
// width: auto; |
||||
// padding: 0; |
||||
// } |
||||
|
||||
// .content-window-card p { |
||||
// height: 20px; |
||||
// } |
||||
|
||||
// .custom-info { |
||||
// border: solid 1px silver; |
||||
// } |
||||
// div.info-top { |
||||
// position: relative; |
||||
// background: none repeat scroll 0 0 #F9F9F9; |
||||
// border-bottom: 1px solid #CCC; |
||||
// border-radius: 5px 5px 0 0; |
||||
// } |
||||
|
||||
// div.info-top div { |
||||
// display: inline-block; |
||||
// color: #333333; |
||||
// font-size: 14px; |
||||
// font-weight: bold; |
||||
// line-height: 31px; |
||||
// padding: 0 10px; |
||||
// } |
||||
|
||||
// div.info-top img { |
||||
// position: absolute; |
||||
// top: 10px; |
||||
// right: 10px; |
||||
// transition-duration: 0.25s; |
||||
// } |
||||
|
||||
// div.info-top img:hover { |
||||
// box-shadow: 0px 0px 5px #000; |
||||
// } |
||||
|
||||
// div.info-middle { |
||||
// font-size: 12px; |
||||
// padding: 10px 6px; |
||||
// line-height: 20px; |
||||
// } |
||||
|
||||
// div.info-bottom { |
||||
// height: 0px; |
||||
// width: 100%; |
||||
// clear: both; |
||||
// text-align: center; |
||||
// } |
||||
|
||||
// div.info-bottom img { |
||||
// position: relative; |
||||
// z-index: 104; |
||||
// } |
||||
|
||||
// span { |
||||
// margin-left: 5px; |
||||
// font-size: 11px; |
||||
// } |
||||
|
||||
// .info-middle img { |
||||
// float: left; |
||||
// margin-right: 6px; |
||||
// } |
||||
@ -1,25 +0,0 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { GisLabelingComponent } from './gis-labeling.component'; |
||||
|
||||
describe('GisLabelingComponent', () => { |
||||
let component: GisLabelingComponent; |
||||
let fixture: ComponentFixture<GisLabelingComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ GisLabelingComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(GisLabelingComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -1,14 +0,0 @@
|
||||
import { NgModule } from '@angular/core'; |
||||
import { Routes, RouterModule } from '@angular/router'; |
||||
import { GisLabelingComponent } from './gis-labeling/gis-labeling.component'; |
||||
|
||||
|
||||
const routes: Routes = [ |
||||
{ path: '', component: GisLabelingComponent }, |
||||
]; |
||||
|
||||
@NgModule({ |
||||
imports: [RouterModule.forChild(routes)], |
||||
exports: [RouterModule] |
||||
}) |
||||
export class GisRoutingModule { } |
||||
@ -1,100 +0,0 @@
|
||||
import { NgModule } from '@angular/core'; |
||||
import { CommonModule } from '@angular/common'; |
||||
import { GisLabelingComponent } from './gis-labeling/gis-labeling.component'; |
||||
|
||||
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 {MatIconModule} from '@angular/material/icon'; |
||||
import {MatInputModule} from '@angular/material/input'; |
||||
import {MatListModule} from '@angular/material/list'; |
||||
import {MatMenuModule} from '@angular/material/menu'; |
||||
import {MatNativeDateModule, MatRippleModule, MatOption} 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 {MatSidenavModule} from '@angular/material/sidenav'; |
||||
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'; |
||||
import { FormsModule } from '@angular/forms'; |
||||
import { GisRoutingModule } from './gis-management-routing.module'; |
||||
|
||||
@NgModule({ |
||||
declarations: [GisLabelingComponent], |
||||
imports: [ |
||||
CommonModule, |
||||
CommonModule, |
||||
GisRoutingModule, |
||||
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, |
||||
FormsModule |
||||
] |
||||
}) |
||||
export class GISManagementModule { } |
||||
@ -1,63 +0,0 @@
|
||||
<div class="contentBox"> |
||||
<header> |
||||
<h1>数字化预案编制和管理平台</h1> |
||||
<div class="showTime">{{time}}</div> |
||||
</header> |
||||
<section class="mainbox"> |
||||
<div class="column"> |
||||
<div class="panel bar"> |
||||
<h2>单位类型</h2> |
||||
<div class="chart" id="unitType"></div> |
||||
<div class="panel-footer"></div> |
||||
</div> |
||||
<div class="panel line"> |
||||
<h2>预案状态</h2> |
||||
<div class="chart" id="planStates"></div> |
||||
<div class="panel-footer"></div> |
||||
</div> |
||||
<div class="panel pie"> |
||||
<h2>预案类型</h2> |
||||
<div class="chart" id="planType"></div> |
||||
<div class="panel-footer"></div> |
||||
</div> |
||||
</div> |
||||
<div class="column"> |
||||
<div class="no"> |
||||
<div class="no-hd"> |
||||
<ul> |
||||
<li>123</li> |
||||
<li>456</li> |
||||
</ul> |
||||
</div> |
||||
<div class="no-bd"> |
||||
<ul> |
||||
<li>预案数量</li> |
||||
<li>单位数量</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
<div class="map"> |
||||
<div class="map1"></div> |
||||
<div class="map2"></div> |
||||
<div class="map3" id='map' style='width:98%; height:98%;'></div> |
||||
</div> |
||||
</div> |
||||
<div class="column"> |
||||
<div class="panel bar"> |
||||
<h2>趋势图</h2> |
||||
<div class="chart" id="trend"></div> |
||||
<div class="panel-footer"></div> |
||||
</div> |
||||
<div class="panel line"> |
||||
<h2>玫瑰图</h2> |
||||
<div class="chart" id="xxx"></div> |
||||
<div class="panel-footer"></div> |
||||
</div> |
||||
<div class="panel pie"> |
||||
<h2>柱状图</h2> |
||||
<div class="chart" id="yyy"></div> |
||||
<div class="panel-footer"></div> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
</div> |
||||
@ -1,247 +0,0 @@
|
||||
@font-face { |
||||
font-family: electronicFont; |
||||
src: url(../../../assets/font/DS-DIGIT.TTF); |
||||
} |
||||
.contentBox{ |
||||
width: 100%; |
||||
height: 100%; |
||||
background: url(../../../assets/images/bg.jpg) no-repeat top center; |
||||
line-height: 1.15; |
||||
header{ |
||||
position: relative; |
||||
height:8%; |
||||
min-height: 64px; |
||||
background: url(../../../assets/images/head_bg.png) no-repeat; |
||||
background-size: 100% 100%; |
||||
h1{ |
||||
font-size: 28px; |
||||
color: #fff; |
||||
text-align: center; |
||||
line-height: 64px; |
||||
|
||||
} |
||||
.showTime{ |
||||
position: absolute; |
||||
right: 20px; |
||||
line-height: 60px; |
||||
color: rgba(255,255,255, $alpha: 0.7); |
||||
font-size: 16px; |
||||
top: 0; |
||||
} |
||||
} |
||||
.mainbox{ |
||||
width: 100%; |
||||
height: 92%; |
||||
// background-color: pink; |
||||
padding: 2px 0 2px 0; |
||||
display: flex; |
||||
.column{ |
||||
flex: 3; |
||||
} |
||||
.column:nth-child(2){ |
||||
flex: 6; |
||||
margin: 0 8px 8px 8px; |
||||
} |
||||
.panel{ |
||||
height: 29.8%; |
||||
position: relative; |
||||
// background-color: red; |
||||
border: 1px solid rgba(25,186,139,0.17); |
||||
background: url(../../../assets/images/line.png) rgba(255,255,255, $alpha: 0.03); |
||||
margin-bottom: 8px; |
||||
&::before{ |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
content: ""; |
||||
width:14px; |
||||
height:14px; |
||||
border-left: 2px solid #02a6b5; |
||||
border-top: 2px solid #02a6b5; |
||||
} |
||||
&::after{ |
||||
position: absolute; |
||||
top: 0; |
||||
right: 0; |
||||
content: ""; |
||||
width:14px; |
||||
height:14px; |
||||
border-right: 2px solid #02a6b5; |
||||
border-top: 2px solid #02a6b5; |
||||
} |
||||
.panel-footer{ |
||||
position: absolute; |
||||
bottom: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 14px; |
||||
&::before{ |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
content: ""; |
||||
width:14px; |
||||
height:14px; |
||||
border-left: 2px solid #02a6b5; |
||||
border-bottom: 2px solid #02a6b5; |
||||
} |
||||
&::after{ |
||||
position: absolute; |
||||
top: 0; |
||||
right: 0; |
||||
content: ""; |
||||
width:14px; |
||||
height:14px; |
||||
border-right: 2px solid #02a6b5; |
||||
border-bottom: 2px solid #02a6b5; |
||||
} |
||||
} |
||||
h2{ |
||||
height: 18px; |
||||
color: #fff; |
||||
line-height: 18px; |
||||
text-align: center; |
||||
font-size: 14px; |
||||
font-weight: 400; |
||||
} |
||||
.chart{ |
||||
height: 91%; |
||||
// background-color: pink; |
||||
} |
||||
} |
||||
.no{ |
||||
background: rgba(101,132,226,0.1); |
||||
padding: 4px 16px; |
||||
height: 10%; |
||||
min-height: 100px; |
||||
.no-hd{ |
||||
position: relative; |
||||
border: 1px solid rgba(25,186,139,0.17); |
||||
&::before{ |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
content: ""; |
||||
width:30px; |
||||
height:14px; |
||||
border-left: 2px solid #02a6b5; |
||||
border-top: 2px solid #02a6b5; |
||||
} |
||||
&::after{ |
||||
position: absolute; |
||||
bottom: 0; |
||||
right: 0; |
||||
content: ""; |
||||
width:30px; |
||||
height:14px; |
||||
border-right: 2px solid #02a6b5; |
||||
border-bottom: 2px solid #02a6b5; |
||||
} |
||||
ul{ |
||||
display: flex; |
||||
li{ |
||||
|
||||
flex: 1; |
||||
line-height: 55px; |
||||
font-size: 48px; |
||||
color: #ffeb7b; |
||||
text-align: center; |
||||
font-family: 'electronicFont'; |
||||
} |
||||
li:nth-child(1){ |
||||
position: relative; |
||||
&::after{ |
||||
position: absolute; |
||||
top: 25%; |
||||
height: 50%; |
||||
right: 0; |
||||
content: ""; |
||||
width:1px; |
||||
background: rgba(255,255,255, $alpha: 0.2); |
||||
} |
||||
} |
||||
} |
||||
|
||||
} |
||||
.no-bd{ |
||||
ul{ |
||||
display: flex; |
||||
padding: 4px 0; |
||||
li{ |
||||
flex: 1; |
||||
text-align: center; |
||||
color: rgba(255,255,255, $alpha: 0.7); |
||||
font-size: 14px; |
||||
line-height: 30px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.map { |
||||
position: relative; |
||||
margin-top: 12px; |
||||
height: 78%; |
||||
.map1 { |
||||
width: 480px; |
||||
height: 480px; |
||||
position: absolute; |
||||
top: 50%; |
||||
left: 50%; |
||||
transform: translate(-50%, -50%); |
||||
background: url(../../../assets/images/map.png); |
||||
background-size: 100% 100%; |
||||
opacity: 0.3; |
||||
} |
||||
.map2 { |
||||
position: absolute; |
||||
top: 50%; |
||||
left: 50%; |
||||
transform: translate(-50%, -50%); |
||||
width: 600px; |
||||
height: 600px; |
||||
background: url(../../../assets/images/lbx.png); |
||||
|
||||
animation: rotate1 15s linear infinite; |
||||
opacity: 0.6; |
||||
background-size: 100% 100%; |
||||
} |
||||
|
||||
.map3 { |
||||
position: absolute; |
||||
top: 50%; |
||||
left: 50%; |
||||
transform: translate(-50%, -50%); |
||||
// width: 7.075rem; |
||||
// height: 7.075rem; |
||||
// background: url(../images/jt.png); |
||||
// animation: rotate2 10s linear infinite; |
||||
// opacity: 0.6; |
||||
background-size: 100% 100%; |
||||
} |
||||
// .chart { |
||||
// position: absolute; |
||||
// top: 0; |
||||
// left: 0; |
||||
// // background-color: pink; |
||||
// width: 100%; |
||||
// height: 10.125rem; |
||||
// } |
||||
@keyframes rotate1 { |
||||
0% { |
||||
transform: translate(-50%, -50%) rotate(0deg); |
||||
}; |
||||
100% { |
||||
transform: translate(-50%, -50%) rotate(360deg); |
||||
} |
||||
} |
||||
// @keyframes rotate2 { |
||||
// form { |
||||
// transform: translate(-50%, -50%) rotate(0deg); |
||||
// } |
||||
// to { |
||||
// transform: translate(-50%, -50%) rotate(-360deg); |
||||
// } |
||||
// } |
||||
} |
||||
} |
||||
} |
||||
@ -1,348 +0,0 @@
|
||||
import { Component, OnInit ,ElementRef} from '@angular/core'; |
||||
import { HttpClient } from '@angular/common/http' |
||||
import { HighlightSpanKind } from 'typescript'; |
||||
|
||||
declare var echarts: any; |
||||
declare var westeros: any; |
||||
declare var AMap: any; |
||||
declare var Loca: any; |
||||
@Component({ |
||||
selector: 'app-home2', |
||||
templateUrl: './home2.component.html', |
||||
styleUrls: ['./home2.component.scss'] |
||||
}) |
||||
export class Home2Component implements OnInit { |
||||
|
||||
constructor(private http:HttpClient,public element: ElementRef) { } |
||||
|
||||
unitTypeStatistics:any //单位类型统计
|
||||
myUnitTypeChart:any //单位类型统计图表
|
||||
unitTypeOption:any = { |
||||
title: { |
||||
// text: '单位类型统计',
|
||||
// left: 'center'
|
||||
}, |
||||
tooltip: { |
||||
trigger: 'item', |
||||
formatter: '占比： <br/>{b} : {c} ({d}%)' |
||||
}, |
||||
legend: { |
||||
// orient: 'vertical',
|
||||
// top: 'middle',
|
||||
bottom: 0, |
||||
left: 'center', |
||||
data: [] |
||||
}, |
||||
series: [ |
||||
{ |
||||
type: 'pie', |
||||
radius: '65%', |
||||
center: ['50%', '50%'], |
||||
selectedMode: 'single', |
||||
data: [ |
||||
], |
||||
emphasis: { |
||||
itemStyle: { |
||||
shadowBlur: 10, |
||||
shadowOffsetX: 0, |
||||
shadowColor: 'rgba(0, 0, 0, 0.5)' |
||||
} |
||||
} |
||||
} |
||||
] |
||||
}; //单位类型数据
|
||||
|
||||
planStateStatistics //预案状态统计
|
||||
myPlanStateChart:any //预案状态统计图表
|
||||
planStateOption:any = { |
||||
title: { |
||||
// text: '预案编制情况统计',
|
||||
// left: 'center'
|
||||
}, |
||||
tooltip: { |
||||
trigger: 'item', |
||||
formatter: '占比： <br/>{b} : {c} ({d}%)' |
||||
}, |
||||
legend: { |
||||
// orient: 'vertical',
|
||||
// top: 'middle',
|
||||
bottom: 0, |
||||
left: 'center', |
||||
data: ['审核通过','已提交','已公开'] |
||||
}, |
||||
series: [ |
||||
{ |
||||
type: 'pie',//类型为饼图
|
||||
radius: '65%', |
||||
center: ['50%', '50%'], |
||||
selectedMode: 'single', |
||||
data: [ |
||||
], |
||||
emphasis: { |
||||
itemStyle: { |
||||
shadowBlur: 10, |
||||
shadowOffsetX: 0, |
||||
shadowColor: 'rgba(0, 0, 0, 0.5)' |
||||
} |
||||
} |
||||
} |
||||
] |
||||
}; //预案状态数据
|
||||
|
||||
planTypeStatistics //各类型预案统计
|
||||
myPlanTypeChart:any //各类型预案图表
|
||||
planTypeOption:any = { |
||||
title: { |
||||
// text: '各类型预案情况统计',
|
||||
// left: 'center'
|
||||
}, |
||||
tooltip: { |
||||
trigger: 'item', |
||||
formatter: '占比： <br/>{b} : {c} ({d}%)' |
||||
}, |
||||
legend: { |
||||
// orient: 'vertical',
|
||||
// top: 'middle',
|
||||
bottom: 0, |
||||
left: 'center', |
||||
data: ['卡片预案','二维预案','三维预案','其他预案'] |
||||
}, |
||||
series: [ |
||||
{ |
||||
type: 'pie', |
||||
radius: '65%', |
||||
center: ['50%', '50%'], |
||||
selectedMode: 'single', |
||||
data: [ |
||||
], |
||||
emphasis: { |
||||
itemStyle: { |
||||
shadowBlur: 10, |
||||
shadowOffsetX: 0, |
||||
shadowColor: 'rgba(0, 0, 0, 0.5)' |
||||
} |
||||
} |
||||
} |
||||
] |
||||
}; //预案状态数据
|
||||
|
||||
trendStatistics //趋势统计
|
||||
trendChart:any //趋势图表
|
||||
trendOption:any = { |
||||
title: { |
||||
// text: '预案趋势统计'
|
||||
}, |
||||
tooltip: { |
||||
trigger: 'axis' |
||||
}, |
||||
legend: { |
||||
data: ['新增预案', '修改预案'] |
||||
}, |
||||
grid: { |
||||
left: '3%', |
||||
right: '4%', |
||||
bottom: '3%', |
||||
containLabel: true |
||||
}, |
||||
toolbox: { |
||||
feature: { |
||||
saveAsImage: {} |
||||
} |
||||
}, |
||||
xAxis: { |
||||
type: 'category', |
||||
boundaryGap: false, |
||||
data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月','十二月'] |
||||
}, |
||||
yAxis: { |
||||
type: 'value' |
||||
}, |
||||
series: [ |
||||
{ |
||||
name: '新增预案', |
||||
type: 'line', |
||||
stack: '总量', |
||||
data: [] |
||||
}, |
||||
{ |
||||
name: '修改预案', |
||||
type: 'line', |
||||
stack: '总量', |
||||
data: [] |
||||
} |
||||
] |
||||
}; //预案状态数据
|
||||
|
||||
xxxChart:any |
||||
xxxOption:any = { |
||||
title: { |
||||
// text: '南丁格尔玫瑰图',
|
||||
// subtext: '纯属虚构',
|
||||
// left: 'center'
|
||||
}, |
||||
tooltip: { |
||||
trigger: 'item', |
||||
formatter: '{a} <br/>{b} : {c} ({d}%)' |
||||
}, |
||||
legend: { |
||||
left: 'center', |
||||
top: 'bottom', |
||||
data: ['1', '2', '3', '4'] |
||||
}, |
||||
toolbox: { |
||||
show: true, |
||||
feature: { |
||||
mark: {show: true}, |
||||
dataView: {show: true, readOnly: false}, |
||||
magicType: { |
||||
show: true, |
||||
type: ['pie', 'funnel'] |
||||
}, |
||||
restore: {show: true}, |
||||
saveAsImage: {show: true} |
||||
} |
||||
}, |
||||
series: [ |
||||
{ |
||||
name: '面积模式', |
||||
type: 'pie', |
||||
radius: [30, 110], |
||||
// center: ['75%', '50%'],
|
||||
roseType: 'area', |
||||
data: [ |
||||
{value: 10, name: '1'}, |
||||
{value: 5, name: '2'}, |
||||
{value: 15, name: '3'}, |
||||
{value: 25, name: '4'} |
||||
] |
||||
} |
||||
] |
||||
} |
||||
|
||||
yyyChart:any |
||||
yyyOption:any = { |
||||
color: ['#3398DB'], |
||||
tooltip: { |
||||
trigger: 'axis', |
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
} |
||||
}, |
||||
grid: { |
||||
left: '3%', |
||||
right: '4%', |
||||
bottom: '3%', |
||||
containLabel: true |
||||
}, |
||||
xAxis: [ |
||||
{ |
||||
type: 'category', |
||||
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], |
||||
axisTick: { |
||||
alignWithLabel: true |
||||
} |
||||
} |
||||
], |
||||
yAxis: [ |
||||
{ |
||||
type: 'value' |
||||
} |
||||
], |
||||
series: [ |
||||
{ |
||||
name: '直接访问', |
||||
type: 'bar', |
||||
barWidth: '60%', |
||||
data: [10, 52, 200, 334, 390, 330, 220] |
||||
} |
||||
] |
||||
}; |
||||
|
||||
t:any |
||||
time:any |
||||
theme:any //主题风格
|
||||
ngOnInit(): void { |
||||
// const map = new AMap.Map(this.element.nativeElement.querySelector('#map'), {
|
||||
// mapStyle: 'amap://styles/1de318cbb8d12c02303a22c550b9ccc9',
|
||||
// // pitch: 0,
|
||||
// features: ['bg', 'road'],//地图显示要素
|
||||
// zoom: 6,
|
||||
// center: [116.408075, 39.950187],
|
||||
// // viewMode: '3D'
|
||||
// });
|
||||
// const layer = new Loca.DistrictLayer({
|
||||
// map: map
|
||||
// });
|
||||
// layer.setMap(map);
|
||||
|
||||
|
||||
|
||||
this.getTime() |
||||
setTimeout(() => { |
||||
|
||||
this.myUnitTypeChart = echarts.init(this.element.nativeElement.querySelector('#unitType'),'westeros'); |
||||
this.myPlanStateChart = echarts.init(this.element.nativeElement.querySelector('#planStates') ,'westeros'); |
||||
this.myPlanTypeChart = echarts.init(this.element.nativeElement.querySelector('#planType'),'westeros'); |
||||
this.trendChart = echarts.init(this.element.nativeElement.querySelector('#trend'),'westeros'); |
||||
this.xxxChart = echarts.init(this.element.nativeElement.querySelector('#xxx'),'westeros'); |
||||
this.xxxChart.setOption(this.xxxOption); |
||||
this.yyyChart = echarts.init(this.element.nativeElement.querySelector('#yyy'),'westeros'); |
||||
this.yyyChart.setOption(this.yyyOption); |
||||
}, 0); |
||||
|
||||
|
||||
this.chartsSetOption(); |
||||
} |
||||
getTime():any{ |
||||
this.t = setInterval(()=>{ |
||||
var dt = new Date(); |
||||
var y = dt.getFullYear(); |
||||
var mt = dt.getMonth() + 1; |
||||
var day = dt.getDate(); |
||||
var h = dt.getHours(); //获取时
|
||||
var m = dt.getMinutes(); //获取分
|
||||
var s = dt.getSeconds(); //获取秒
|
||||
this.time = "当前时间：" + y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒"; |
||||
}, 1000); //開始运行
|
||||
} |
||||
chartsSetOption(){ |
||||
this.http.get("/api/StatisticsAnalysis").subscribe((data:any)=>{ |
||||
//单位类型统计
|
||||
this.unitTypeStatistics = data.companyStatistics.buildingTypeStatistics.buildingTypes |
||||
this.unitTypeStatistics.forEach(item => { |
||||
item.name = item.buildingTypeName |
||||
item.value = item.count |
||||
// this.unitTypeOption.legend.data.push(item.buildingTypeName)
|
||||
}); |
||||
this.unitTypeOption.series[0].data = this.unitTypeStatistics |
||||
this.myUnitTypeChart.setOption(this.unitTypeOption,true); |
||||
//预案状态统计
|
||||
this.planStateStatistics = data.planStatistics.planningStatistics |
||||
this.planStateOption.series[0].data.push({name:'审核通过',value:data.planStatistics.planningStatistics.approvedCount}) |
||||
this.planStateOption.series[0].data.push({name:'已提交',value:data.planStatistics.planningStatistics.committedCount}) |
||||
this.planStateOption.series[0].data.push({name:'已公开',value:data.planStatistics.planningStatistics.publicCount}) |
||||
this.myPlanStateChart.setOption(this.planStateOption,true); |
||||
//各类型预案统计
|
||||
this.planTypeStatistics = data.planStatistics.planTypeStatistics |
||||
this.planTypeOption.series[0].data.push({name:'卡片预案',value:data.planStatistics.planTypeStatistics.planCardCount}) |
||||
this.planTypeOption.series[0].data.push({name:'二维预案',value:data.planStatistics.planTypeStatistics.plan2DCount}) |
||||
this.planTypeOption.series[0].data.push({name:'三维预案',value:data.planStatistics.planTypeStatistics.plan3DCount}) |
||||
this.planTypeOption.series[0].data.push({name:'其他预案',value:data.planStatistics.planTypeStatistics.planOtherCount}) |
||||
this.myPlanTypeChart.setOption(this.planTypeOption,true); |
||||
//预案趋势图统计
|
||||
this.trendStatistics = data.planStatistics.trendStatistics |
||||
// this.trendOption.series = []
|
||||
this.trendStatistics.added.forEach(item=>{ |
||||
this.trendOption.series[0].data.push(item.count) |
||||
}) |
||||
this.trendStatistics.modified.forEach(item=>{ |
||||
this.trendOption.series[1].data.push(item.count) |
||||
}) |
||||
this.trendChart.setOption(this.trendOption,true); |
||||
|
||||
}) |
||||
} |
||||
ngOnDestroy(){ |
||||
window.clearInterval(this.t) //清一遍定时器
|
||||
} |
||||
} |
||||
@ -1,70 +0,0 @@
|
||||
<div class="page page01"> |
||||
<!-- 头部 --> |
||||
<!-- <div class="header"> |
||||
<h1 class="logo" text="数字化预案编制管理平台"><img src="images/logo.png" alt="">数字化预案编制管理平台</h1> |
||||
<div class="notice-box"> |
||||
<div class="notice-icon"><svg width="18" height="16" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="a"><stop stop-color="#FEFEFE" offset="0%"/><stop stop-color="#C8CACA" offset="100%"/></linearGradient></defs><path d="M17.287 10.088h-3.472c-.394 0-.713.35-.713.784v.244c0 .433.32.784.713.784h3.472c.394 0 .713-.35.713-.784v-.244c0-.433-.319-.784-.713-.784zM9.232 3.36c-1.08.94-3.34 2.258-4.966 3.525l-.002.001c-.019.012-.038.083-.056.094-.193.119-.279.446-1.323.446H.847c-.522 0-.847.268-.847.872v5.374c0 .604.298.902.847.902h2.046c1.04.002 1.124.327 1.315.445.019.012.037.082.056.095h.002c1.575 1.268 3.85 2.689 4.966 3.59.336.272 1.454.75 1.454-.93V4.22c0-1.68-1.127-1.143-1.454-.858zm3.206 3.704c.184.356.55.446.816.2l2.854-2.634c.267-.246.333-.734.15-1.091l-.105-.202c-.184-.356-.55-.445-.816-.2l-2.854 2.634c-.267.247-.334.735-.15 1.091l.105.202zm.816 7.671c-.267-.246-.632-.156-.817.2l-.104.2c-.184.357-.117.845.15 1.092l2.853 2.633c.267.246.632.157.816-.199l.105-.201c.184-.357.117-.845-.15-1.091l-2.853-2.634z" transform="translate(0 -3)" fill="url(#a)" fill-rule="nonzero"/></svg></div> |
||||
<div class="notice-txt"> |
||||
这里是公告滚动通知这里是公告滚动通知这里是公告滚动通知 |
||||
</div> |
||||
</div> |
||||
</div> --> |
||||
|
||||
<div class="page-top"> |
||||
<div class="num-list"> |
||||
<div class="num-item num-item-detail"> |
||||
<div class="num-tit">重点单位总量</div> |
||||
<div class="num-text"><span class="number-running" id="number01">8,666</span><span class="unit">个</span></div> |
||||
</div> |
||||
<div class="num-item num-item-detail"> |
||||
<div class="num-tit">数据采集总量</div> |
||||
<div class="num-text"><span class="number-running" id="number02">999,999</span><span class="unit">个</span></div> |
||||
</div> |
||||
<div class="num-item num-item-detail"> |
||||
<div class="num-tit">预案编制总量</div> |
||||
<div class="num-text"><span class="number-running" id="number03">345,678</span><span class="unit">个</span></div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<!-- 左侧 --> |
||||
<div class="page-side page-left"> |
||||
<div class="common-list"> |
||||
<a href="#" class="list-item is-active"> |
||||
<div class="list-tit">预案编制</div> |
||||
</a> |
||||
<a href="#" class="list-item"> |
||||
<div class="list-tit">预案审核</div> |
||||
</a> |
||||
<a href="#" class="list-item"> |
||||
<div class="list-tit">GIS调用</div> |
||||
</a> |
||||
</div> |
||||
<div class="panel" style="width: 755px;background-size: 100% 100%;"> |
||||
<div class="panel-bd"> |
||||
<div id="chartQusj" class="chart-item"></div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<!-- 右侧 --> |
||||
<div class="page-side page-right page-right-detail"> |
||||
<div id="chartYadwlx" class="chart-item" style="width: 410px;height: 270px;"></div> |
||||
<div class="panel panel02"> |
||||
<div class="panel-bd"> |
||||
<div id="chartYapyph" class="chart-item"></div> |
||||
</div> |
||||
</div> |
||||
<div class="panel panel03" style="width: 768px;background-size: 100% 100%;"> |
||||
<div class="panel-bd"> |
||||
<div id="chartYalxtj" class="chart-item"></div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<!-- 地图 --> |
||||
<div class="page-center"> |
||||
<div class="chart-item" id="chartMap" style="width: 949px; |
||||
right: 155px; |
||||
height: 400px; |
||||
bottom: 76px; |
||||
border-radius: 10px;"></div> |
||||
</div> |
||||
</div> |
||||
@ -1 +0,0 @@
|
||||
@import "../../../assets/css/style.css"; |
||||
@ -1,563 +0,0 @@
|
||||
import { Component, OnInit ,ViewChild, AfterViewInit,ElementRef,Renderer2 } from '@angular/core'; |
||||
import { HttpClient } from '@angular/common/http' |
||||
import { Router,ActivatedRoute } from '@angular/router' |
||||
declare var echarts: any; |
||||
declare var AMap: any; |
||||
|
||||
declare var AMapUI: any; |
||||
|
||||
|
||||
@Component({ |
||||
selector: 'app-homedetail', |
||||
templateUrl: './homedetail.component.html', |
||||
styleUrls: ['./homedetail.component.scss'] |
||||
}) |
||||
export class HomedetailComponent implements OnInit { |
||||
|
||||
constructor(private http:HttpClient, private render2: Renderer2,public element: ElementRef,private router:Router,private route:ActivatedRoute) { } |
||||
|
||||
//全队数据采集和预案编制数量统计
|
||||
chartQusj:any |
||||
chartQusjOption:any = { |
||||
|
||||
grid: { |
||||
top: 50, |
||||
left: 30, |
||||
right: 20, |
||||
bottom: 20, |
||||
}, |
||||
// 标题
|
||||
title: { |
||||
text: '全队数据采集和预案编制数量统计', |
||||
top: -4, |
||||
left:-2 |
||||
}, |
||||
//图例
|
||||
legend: { |
||||
top: 0, |
||||
right:-2, |
||||
// left:3,
|
||||
data: ['单位预案编制数量', '单位数据采集数量'], |
||||
}, |
||||
//提示框
|
||||
tooltip: { |
||||
trigger: 'axis', |
||||
}, |
||||
// x轴
|
||||
xAxis: { |
||||
type: 'category', |
||||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], |
||||
boundaryGap: false, |
||||
}, |
||||
// y轴
|
||||
yAxis: { |
||||
type: 'value', |
||||
name:'个' |
||||
}, |
||||
// 数据
|
||||
series: [ |
||||
{ |
||||
name: '单位预案编制数量', |
||||
type: 'line', |
||||
data: [38, 42, 46, 40, 35, 30, 38, 38, 42, 46, 40, 35], |
||||
// showSymbol: true,
|
||||
// symbolSize:6,
|
||||
// smooth: false,
|
||||
// label: {
|
||||
// show: true,
|
||||
// },
|
||||
areaStyle: { |
||||
color: { |
||||
type: 'linear', |
||||
x: 0, |
||||
y: 0, |
||||
x2: 0, |
||||
y2: 1, |
||||
colorStops: [{ |
||||
offset: 0, |
||||
color: 'rgba(60,103,195,1)' // 0% 处的颜色
|
||||
}, { |
||||
offset: 1, |
||||
color: 'rgba(0,194,255,.2)' // 100% 处的颜色
|
||||
}], |
||||
global: false // 缺省为 false
|
||||
} |
||||
} |
||||
}, |
||||
{ |
||||
name: '单位数据采集数量', |
||||
type: 'line', |
||||
data: [28, 12, 66, 50, 25, 40, 48, 12, 66, 50, 25, 40 ], |
||||
}, |
||||
], |
||||
}; |
||||
//预案单位类型统计
|
||||
chartYadwlx:any |
||||
data02:any = [{ |
||||
value: 335, |
||||
name: '类型名称1' |
||||
}, |
||||
{ |
||||
value: 110, |
||||
name: '类型名称2' |
||||
}, |
||||
{ |
||||
value: 274, |
||||
name: '类型名称3' |
||||
}, |
||||
{ |
||||
value: 235, |
||||
name: '视频广告' |
||||
}, |
||||
{ |
||||
value: 400, |
||||
name: '类型名称4' |
||||
} |
||||
]; |
||||
chartYadwlxOption:any = { |
||||
// 标题
|
||||
title: { |
||||
text: '预案单位类型统计', |
||||
left: '15%', |
||||
top:0 |
||||
}, |
||||
//图例
|
||||
legend: { |
||||
orient: 'vertical', |
||||
top: 'center', |
||||
right: '0%', |
||||
show: false, |
||||
formatter: function (name) { |
||||
var target; |
||||
for (var i = 0, l = this.data02.length; i < l; i++) { |
||||
if (this.data02[i].name == name) { |
||||
target = this.data02[i].value; |
||||
} |
||||
} |
||||
return name + ' ' + target; |
||||
} |
||||
}, |
||||
//提示框
|
||||
tooltip: { |
||||
trigger: 'item', |
||||
}, |
||||
// 数据
|
||||
series: [{ |
||||
type: 'pie', |
||||
center: ['55%', '55%'], |
||||
radius: ['25%', '60%'], |
||||
roseType:true, |
||||
// labelLine: {
|
||||
// show: true,
|
||||
// length: 20,
|
||||
// length2: 0,
|
||||
// lineStyle: {
|
||||
// color: '#999',
|
||||
// width: 1
|
||||
// }
|
||||
// },
|
||||
labelLine:{ |
||||
lineStyle:{ |
||||
color: '#93FCFF' |
||||
} |
||||
}, |
||||
label: { |
||||
//formatter: '{hr|}\n{a|{b}}\n{b|{c}}万吨\n{c|{d}%}',
|
||||
formatter: '{a|{b}}\n{b|{c}}{c|万吨}\n{d|{d}%}', |
||||
rich: { |
||||
// hr: {
|
||||
// borderColor: '#999',
|
||||
// width: '100%',
|
||||
// borderWidth: 1,
|
||||
// marginLeft: '-15px',
|
||||
// marginRight: '-15px',
|
||||
// height:0
|
||||
// },
|
||||
a: { |
||||
color: '#1F6F9B', |
||||
fontSize: 12, |
||||
height: 18, |
||||
borderColor: '#999', |
||||
//marginTop: '65px',
|
||||
}, |
||||
b: { |
||||
color: '#fff', |
||||
fontSize: 24, |
||||
height: 36, |
||||
}, |
||||
c: { |
||||
color: '#fff', |
||||
fontSize: 12, |
||||
}, |
||||
d: { |
||||
color: '#fff', |
||||
fontSize: 12, |
||||
height: 16, |
||||
marginLeft: '5px', |
||||
}, |
||||
}, |
||||
}, |
||||
data: [{ |
||||
value: 335, |
||||
name: '类型名称1' |
||||
}, |
||||
{ |
||||
value: 110, |
||||
name: '类型名称2' |
||||
}, |
||||
{ |
||||
value: 274, |
||||
name: '类型名称3' |
||||
}, |
||||
{ |
||||
value: 235, |
||||
name: '类型名称4' |
||||
} |
||||
], |
||||
}], |
||||
}; |
||||
// 预案评优排行
|
||||
chartYapyph:any |
||||
chartYapyphOption:any = { |
||||
// 标题
|
||||
title: { |
||||
text: '预案评优排行', |
||||
left:0 |
||||
}, |
||||
grid: { |
||||
left: 30, |
||||
right: 0, |
||||
}, |
||||
//提示框
|
||||
tooltip: { |
||||
trigger: 'axis', |
||||
}, |
||||
// x轴
|
||||
xAxis: { |
||||
type: 'category', |
||||
data: ['机构1', '机构2', '机构3', '机构4', '机构5', '机构6', '机构7'] |
||||
}, |
||||
// y轴
|
||||
yAxis: { |
||||
type: 'value', |
||||
splitLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
color: '#fff' |
||||
} |
||||
}, |
||||
}, |
||||
// 数据
|
||||
series: [{ |
||||
name: '预案评优', |
||||
type: 'bar', |
||||
data: [320, 302, 301, 234, 390, 330, 320], |
||||
label: { |
||||
show: false, |
||||
position: "top", |
||||
formatter: '{c}', |
||||
color: "#fff", |
||||
}, |
||||
itemStyle: { |
||||
color: { |
||||
type: 'linear', |
||||
x: 0, |
||||
y: 0, |
||||
x2: 0, |
||||
y2: 1, |
||||
colorStops: [{ |
||||
offset: 0, |
||||
color: 'rgba(0,220,254,1)' // 0% 处的颜色
|
||||
}, { |
||||
offset: 1, |
||||
color: 'rgba(1,104,191,1)' // 100% 处的颜色
|
||||
}], |
||||
globalCoord: false // 缺省为 false
|
||||
}, |
||||
} |
||||
} |
||||
], |
||||
}; |
||||
//预案类型统计
|
||||
chartYalxtj:any |
||||
chartYalxtjOption:any = { |
||||
color: ['#FB33C2', '#00CFF0', '#2C3DE0'], |
||||
grid: { |
||||
top: 50, |
||||
left: 30, |
||||
right: 20, |
||||
bottom: 20, |
||||
}, |
||||
// 标题
|
||||
title: { |
||||
text: '预案类型统计', |
||||
top: -4, |
||||
left: 0 |
||||
}, |
||||
//图例
|
||||
legend: { |
||||
top: 0, |
||||
data: ['二维预案', '三维预案', '卡片预案'], |
||||
icon:'circle', |
||||
itemGap: 20, |
||||
}, |
||||
//提示框
|
||||
tooltip: { |
||||
trigger: 'axis', |
||||
}, |
||||
// x轴
|
||||
xAxis: { |
||||
type: 'category', |
||||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], |
||||
boundaryGap: false, |
||||
}, |
||||
// y轴
|
||||
yAxis: { |
||||
type: 'value', |
||||
}, |
||||
// 数据
|
||||
series: [{ |
||||
name: '二维预案', |
||||
type: 'line', |
||||
symbolSize: 0, |
||||
smooth:true, |
||||
lineStyle:{ |
||||
width: 4, |
||||
color: { |
||||
type: 'linear', |
||||
x: 0, |
||||
y: 0, |
||||
x2: 1, |
||||
y2: 0, |
||||
colorStops: [{ |
||||
offset: 0, |
||||
color: 'rgba(254,51,194,0)' // 0% 处的颜色
|
||||
}, { |
||||
offset: 0.5, |
||||
color: 'rgba(254,51,194,1)' // 100% 处的颜色
|
||||
}, { |
||||
offset: 1, |
||||
color: 'rgba(254,51,194,0)' // 100% 处的颜色
|
||||
}], |
||||
global: false // 缺省为 false
|
||||
} |
||||
}, |
||||
data: [38, 42, 46, 40, 35, 30, 38, 42, 46, 40, 35, 30 ], |
||||
}, |
||||
{ |
||||
name: '三维预案', |
||||
type: 'line', |
||||
symbolSize: 0, |
||||
smooth:true, |
||||
lineStyle:{ |
||||
width: 4, |
||||
color: { |
||||
type: 'linear', |
||||
x: 0, |
||||
y: 0, |
||||
x2: 1, |
||||
y2: 0, |
||||
colorStops: [{ |
||||
offset: 0, |
||||
color: 'rgba(14,222,252,0)' // 0% 处的颜色
|
||||
}, { |
||||
offset: 0.5, |
||||
color: 'rgba(0,221,255,1)' // 100% 处的颜色
|
||||
}, { |
||||
offset: 1, |
||||
color: 'rgba(1,255,253,0)' // 100% 处的颜色
|
||||
}], |
||||
global: false // 缺省为 false
|
||||
}, |
||||
}, |
||||
data: [28, 72, 66, 50, 25, 40, 48, 66, 50, 25, 40, 48 ], |
||||
}, |
||||
{ |
||||
name: '卡片预案', |
||||
type: 'line', |
||||
symbolSize: 0, |
||||
smooth:true, |
||||
lineStyle:{ |
||||
width: 4, |
||||
color: { |
||||
type: 'linear', |
||||
x: 0, |
||||
y: 0, |
||||
x2: 1, |
||||
y2: 0, |
||||
colorStops: [{ |
||||
offset: 0, |
||||
color: 'rgba(48,63,240,0)' // 0% 处的颜色
|
||||
}, { |
||||
offset: 0.5, |
||||
color: 'rgba(48,63,240,1)' // 100% 处的颜色
|
||||
}, { |
||||
offset: 1, |
||||
color: 'rgba(48,63,240,0)' // 100% 处的颜色
|
||||
}], |
||||
global: false // 缺省为 false
|
||||
}, |
||||
}, |
||||
data: [28, 112, 166, 150, 125, 140, 48, 28, 112, 166, 150, 125 ], |
||||
}, |
||||
], |
||||
}; |
||||
//地图
|
||||
|
||||
chartMap:any |
||||
chartMapOption:any = { |
||||
tooltip: { |
||||
show: true, |
||||
formatter: function (params) { |
||||
return params.name + '：' + params.data['value']; |
||||
}, |
||||
}, |
||||
geo: [{ |
||||
show: true, |
||||
map: 'chongqing', |
||||
zoom: 1, |
||||
itemStyle: { |
||||
areaColor: '#090C15', |
||||
borderColor: '#0584DD', |
||||
borderWidth: 2, |
||||
shadowColor: 'rgba(5, 132, 221, 1)', |
||||
shadowBlur: 1, |
||||
shadowOffsetX: 2, |
||||
shadowOffsetY: 10, |
||||
}, |
||||
emphasis: { |
||||
label: { |
||||
color: '#fff', |
||||
}, |
||||
itemStyle: { |
||||
areaColor: '#0584DD', |
||||
} |
||||
} |
||||
}, |
||||
{ |
||||
show: true, |
||||
map: 'chongqing', |
||||
label: { |
||||
show: true, |
||||
color: '#fff', |
||||
fontSize: 12, |
||||
}, |
||||
zoom: 1, |
||||
itemStyle: { |
||||
areaColor: '#090C15', |
||||
borderColor: '#0584DD', |
||||
}, |
||||
emphasis: { |
||||
label: { |
||||
color: '#fff', |
||||
}, |
||||
itemStyle: { |
||||
areaColor: '#0584DD', |
||||
} |
||||
} |
||||
} |
||||
] |
||||
} |
||||
|
||||
ngOnInit(): void { |
||||
setTimeout(() => { |
||||
this.chartQusj = echarts.init(this.element.nativeElement.querySelector('#chartQusj'),'skinUpp'); |
||||
this.chartQusj.setOption(this.chartQusjOption); |
||||
this.chartYadwlx = echarts.init(this.element.nativeElement.querySelector('#chartYadwlx'),'skinUpp'); |
||||
this.chartYadwlx.setOption(this.chartYadwlxOption); |
||||
this.chartYapyph = echarts.init(this.element.nativeElement.querySelector('#chartYapyph'),'skinUpp'); |
||||
this.chartYapyph.setOption(this.chartYapyphOption); |
||||
this.chartYalxtj = echarts.init(this.element.nativeElement.querySelector('#chartYalxtj'),'skinUpp'); |
||||
this.chartYalxtj.setOption(this.chartYalxtjOption); |
||||
this.chartMap = echarts.init(this.element.nativeElement.querySelector('#chartMap')); |
||||
console.log(this.chartMapOption) |
||||
this.chartMap.setOption(this.chartMapOption); |
||||
this.mapInit() //初始化地图
|
||||
}, 0); |
||||
console.log(echarts) |
||||
} |
||||
mapInit () { |
||||
|
||||
//创建地图
|
||||
var map = new AMap.Map('chartMap', { |
||||
cursor: 'default', |
||||
zooms:[7,10], |
||||
mapStyle:"amap://styles/grey", |
||||
|
||||
}); |
||||
|
||||
var colors = [ |
||||
"#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00", |
||||
"#b82e2e", "#316395", "#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300", "#8b0707", |
||||
"#651067", "#329262", "#5574a6", "#3b3eac" |
||||
]; |
||||
|
||||
AMapUI.loadUI(['geo/DistrictExplorer'], (DistrictExplorer)=> { |
||||
|
||||
//创建一个实例
|
||||
var districtExplorer = new DistrictExplorer({ |
||||
map: map, |
||||
eventSupport: true, //打开事件支持
|
||||
}); |
||||
|
||||
var adcode = this.route.snapshot.queryParams.code; |
||||
|
||||
districtExplorer.loadAreaNode(adcode, (error, areaNode)=>{ |
||||
|
||||
//更新地图视野
|
||||
map.setBounds(areaNode.getBounds(), null, null, true); |
||||
|
||||
//清除已有的绘制内容
|
||||
districtExplorer.clearFeaturePolygons(); |
||||
|
||||
//绘制子区域
|
||||
districtExplorer.renderSubFeatures(areaNode, (feature, i) => { |
||||
// console.log(123,feature,i)
|
||||
var fillColor = colors[i % colors.length]; |
||||
var strokeColor = colors[colors.length - 1 - i % colors.length]; |
||||
|
||||
return { |
||||
cursor: 'default', |
||||
bubble: true, |
||||
strokeColor: strokeColor, //线颜色
|
||||
strokeOpacity: 1, //线透明度
|
||||
strokeWeight: 1, //线宽
|
||||
fillColor: fillColor, //填充色
|
||||
fillOpacity: 0.5, //填充透明度
|
||||
}; |
||||
}); |
||||
|
||||
let fillColor2 |
||||
if(this.route.snapshot.queryParams.level == 'city'){ |
||||
fillColor2 = null |
||||
}else{ |
||||
fillColor2 = '#329262' |
||||
} |
||||
// console.log(789,fillColor2)
|
||||
//绘制父区域
|
||||
districtExplorer.renderParentFeature(areaNode, { |
||||
cursor: 'default', |
||||
bubble: true, |
||||
strokeColor: 'black', //线颜色
|
||||
strokeOpacity: 1, //线透明度
|
||||
strokeWeight: 1, //线宽
|
||||
fillColor: fillColor2, //填充色
|
||||
fillOpacity: 0.5, //填充透明度
|
||||
}); |
||||
|
||||
}); |
||||
districtExplorer.on('featureClick', function(e, feature) { |
||||
var props = feature.properties; |
||||
// //如果存在子节点
|
||||
// // if (props.childrenNum > 0) {
|
||||
// //切换聚焦区域
|
||||
// switch2AreaNode(props.adcode);
|
||||
// // }
|
||||
console.log(props) |
||||
}); |
||||
|
||||
|
||||
}); |
||||
|
||||
} |
||||
} |
||||
@ -1,22 +0,0 @@
|
||||
<div class="pages-lockscreen layout-full"> |
||||
<div class="page h-100-p text-center vertical-align"> |
||||
<div class="page-content auth-box vertical-align-middle"> |
||||
<p class="mt-0 mb-20">锁屏</p> |
||||
<div class="mt-20 mb-20" fxLayout="row" fxLayoutAlign="space-between center"> |
||||
<mat-form-field color-white color="accent" appearance="outline" class="w-100-p"> |
||||
<mat-label>输入密码</mat-label> |
||||
<input matInput type="password" [(ngModel)]="password"> |
||||
<mat-icon matSuffix>lock</mat-icon> |
||||
</mat-form-field> |
||||
</div> |
||||
<p class="mt-0"> |
||||
输入密码以进入 |
||||
</p> |
||||
<button mat-button color="warn" (click)="open()">进入</button> |
||||
<div class="copyright"> |
||||
<p>WEBSITE BY Anxin</p> |
||||
<p>© 2020. All RIGHT RESERVED.</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
@ -1,111 +0,0 @@
|
||||
.pages-lockscreen { |
||||
.page-content { |
||||
display: inline-block; |
||||
width: 400px; |
||||
max-width: 100%; |
||||
padding: 30px; |
||||
} |
||||
.avatar { |
||||
width: 50px; |
||||
height: 50px; |
||||
margin: 0 auto; |
||||
|
||||
img { |
||||
border-radius: 50%; |
||||
} |
||||
|
||||
} |
||||
} |
||||
.layout-full { |
||||
position: absolute; |
||||
z-index: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
color: #fff; |
||||
font-family: Roboto, sans-serif; |
||||
background: url('../../../assets/images/background.jpg'); |
||||
&::before { |
||||
position: fixed; |
||||
top: 0; |
||||
left: 0; |
||||
z-index: -1; |
||||
width: 100%; |
||||
height: 100%; |
||||
content: ""; |
||||
background-position: center top; |
||||
background-size: cover; |
||||
} |
||||
|
||||
&::after { |
||||
position: fixed; |
||||
top: 0; |
||||
left: 0; |
||||
z-index: -1; |
||||
width: 100%; |
||||
height: 100%; |
||||
content: ""; |
||||
background-color: rgba(33, 33, 33, .6); |
||||
} |
||||
|
||||
.page { |
||||
position: relative; |
||||
height: 100%; |
||||
padding: 0; |
||||
margin: 0; |
||||
background: transparent; |
||||
} |
||||
|
||||
} |
||||
|
||||
|
||||
.auth-box { |
||||
|
||||
.copyright { |
||||
margin-top: 60px; |
||||
font-size: 12px; |
||||
font-weight: 500; |
||||
letter-spacing: 1px; |
||||
|
||||
p { |
||||
margin: 0 0 14px; |
||||
} |
||||
} |
||||
|
||||
.social { |
||||
mat-icon { |
||||
color: #fff; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.vertical-align { |
||||
&::before { |
||||
display: inline-block; |
||||
height: 100%; |
||||
vertical-align: middle; |
||||
content: ""; |
||||
} |
||||
|
||||
.vertical-align-middle { |
||||
display: inline-block; |
||||
vertical-align: middle; |
||||
} |
||||
|
||||
} |
||||
|
||||
.pages-login { |
||||
.page-content { |
||||
display: inline-block; |
||||
width: 400px; |
||||
max-width: 100%; |
||||
padding: 30px; |
||||
} |
||||
|
||||
} |
||||
.page-content{ |
||||
position: absolute; |
||||
top: 50%; |
||||
left: 50%; |
||||
transform: translate(-50%,-50%); |
||||
text-align: center; |
||||
} |
||||
@ -1,24 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
import { Router,ActivatedRoute } from '@angular/router' |
||||
import {CacheTokenService} from '../../http-interceptors/cache-token.service'//引入服务
|
||||
@Component({ |
||||
selector: 'app-lockscreen', |
||||
templateUrl: './lockscreen.component.html', |
||||
styleUrls: ['./lockscreen.component.scss'] |
||||
}) |
||||
export class LockscreenComponent implements OnInit { |
||||
|
||||
constructor(private router:Router,private route:ActivatedRoute,private getMenus:CacheTokenService) { } |
||||
password = '' |
||||
ngOnInit() { |
||||
} |
||||
|
||||
open(){ |
||||
if(this.password == "12345678"){ |
||||
this.router.navigate(['/ui/enterpriseuser']) |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
} |
||||
@ -1,280 +0,0 @@
|
||||
<div class="pages-profile"> |
||||
<div fxLayout.gt-sm="row nowrap" fxLayout.lt-md="column nowrap" fxLayoutAlign.gt-sm="space-between start" |
||||
fxLayoutGap="30px" id="xxx"> |
||||
<mat-card fxFlex="30" class="profile-card"> |
||||
<mat-card-content> |
||||
<img mat-card-avatar src=""> |
||||
<mat-card-title class="profile-user">安信科创</mat-card-title> |
||||
<mat-card-subtitle class="profile-job">嘻嘻嘻嘻</mat-card-subtitle> |
||||
<p class="profile-introduction"> |
||||
不要做程序员，要做问题解决者 |
||||
</p> |
||||
<div class="profile-social"> |
||||
<mat-icon size="1" class="secondary-text s-24"></mat-icon> |
||||
<mat-icon size="1" class="secondary-text s-24"></mat-icon> |
||||
<mat-icon size="1" class="secondary-text s-24"></mat-icon> |
||||
<mat-icon size="1" class="secondary-text s-24"></mat-icon> |
||||
</div> |
||||
<button mat-flat-button color="accent">关注</button> |
||||
</mat-card-content> |
||||
<mat-card-actions class="profile-card-footer" fxLayout="row nowrap"> |
||||
<div fxFlex="32"> |
||||
<strong class="profile-stat-count">260</strong> |
||||
<span>粉丝</span> |
||||
</div> |
||||
<div fxFlex="32"> |
||||
<strong class="profile-stat-count">180</strong> |
||||
<span>关注</span> |
||||
</div> |
||||
<div fxFlex="32"> |
||||
<strong class="profile-stat-count">2000</strong> |
||||
<span>博客</span> |
||||
</div> |
||||
</mat-card-actions> |
||||
</mat-card> |
||||
|
||||
<mat-card fxFlex="70" class="profile-board"> |
||||
<mat-tab-group> |
||||
<mat-tab label="活动"> |
||||
<mat-list> |
||||
<mat-list-item> |
||||
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px"> |
||||
<img matListAvatar src=""> |
||||
<div> |
||||
<div>我是假数据 |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
</div> |
||||
<div matLine class="profile-item-content"> |
||||
我是假数据 |
||||
</div> |
||||
</mat-list-item> |
||||
<mat-list-item> |
||||
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px"> |
||||
<img matListAvatar src=""> |
||||
<div> |
||||
<div>我是假数据 |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
</div> |
||||
<div matLine class="profile-item-content"> |
||||
<img src="" alt=""> |
||||
<img src="" alt=""> |
||||
<img src="" alt=""> |
||||
<img src="" alt=""> |
||||
</div> |
||||
</mat-list-item> |
||||
<mat-list-item> |
||||
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px"> |
||||
<img matListAvatar src=""> |
||||
<div> |
||||
<div>我是假数据 |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
</div> |
||||
<div matLine class="profile-item-content"> |
||||
<img src="" alt=""> |
||||
我是假数据 |
||||
</div> |
||||
</mat-list-item> |
||||
<mat-list-item> |
||||
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px"> |
||||
<img matListAvatar src=""> |
||||
<div> |
||||
<div>我是假数据 |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
</div> |
||||
<div matLine class="profile-item-content"> |
||||
我是假数据 |
||||
</div> |
||||
</mat-list-item> |
||||
<mat-list-item> |
||||
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px"> |
||||
<img matListAvatar src=""> |
||||
<div> |
||||
<div>我是假数据 |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
</div> |
||||
<div matLine class="profile-item-content"> |
||||
我是假数据 |
||||
</div> |
||||
</mat-list-item> |
||||
</mat-list> |
||||
<div class="pt-40 pb-40"> |
||||
<button mat-flat-button class="show-more-btn">更多</button> |
||||
</div> |
||||
</mat-tab> |
||||
<mat-tab label="评论"> |
||||
<mat-list> |
||||
<mat-list-item> |
||||
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px"> |
||||
<img matListAvatar src=""> |
||||
<div> |
||||
<div>我是假数据 |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
</div> |
||||
<div matLine class="profile-item-content"> |
||||
<img src="" alt=""> |
||||
我是假数据 |
||||
</div> |
||||
</mat-list-item> |
||||
<mat-list-item> |
||||
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px"> |
||||
<img matListAvatar src=""> |
||||
<div> |
||||
<div>我是假数据 |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
</div> |
||||
<div matLine class="profile-item-content"> |
||||
我是假数据 |
||||
</div> |
||||
</mat-list-item> |
||||
|
||||
|
||||
<mat-list-item> |
||||
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px"> |
||||
<img matListAvatar src=""> |
||||
<div> |
||||
<div>我是假数据 |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
</div> |
||||
<div matLine class="profile-item-content"> |
||||
我是假数据 |
||||
</div> |
||||
</mat-list-item> |
||||
<mat-list-item> |
||||
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px"> |
||||
<img matListAvatar src=""> |
||||
<div> |
||||
<div>我是假数据 |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
</div> |
||||
<div matLine class="profile-item-content"> |
||||
我是假数据 |
||||
</div> |
||||
</mat-list-item> |
||||
<mat-list-item> |
||||
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px"> |
||||
<img matListAvatar src=""> |
||||
<div> |
||||
<div>我是假数据 |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
</div> |
||||
<div matLine class="profile-item-content"> |
||||
<img src="" alt=""> |
||||
<img src="" alt=""> |
||||
<img src="" alt=""> |
||||
<img src="" alt=""> |
||||
</div> |
||||
</mat-list-item> |
||||
</mat-list> |
||||
</mat-tab> |
||||
<mat-tab label="消息"> |
||||
<mat-list> |
||||
<mat-list-item> |
||||
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px"> |
||||
<img matListAvatar src=""> |
||||
<div> |
||||
<div>我是假数据 |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
</div> |
||||
<div matLine class="profile-item-content"> |
||||
我是假数据 |
||||
</div> |
||||
</mat-list-item> |
||||
<mat-list-item> |
||||
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px"> |
||||
<img matListAvatar src=""> |
||||
<div> |
||||
<div>我是假数据 |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
</div> |
||||
<div matLine class="profile-item-content"> |
||||
<img src="" alt=""> |
||||
我是假数据 |
||||
</div> |
||||
</mat-list-item> |
||||
<mat-list-item> |
||||
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px"> |
||||
<img matListAvatar src=""> |
||||
<div> |
||||
<div>我是假数据 |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
</div> |
||||
<div matLine class="profile-item-content"> |
||||
<img src="" alt=""> |
||||
<img src="" alt=""> |
||||
<img src="" alt=""> |
||||
<img src="" alt=""> |
||||
</div> |
||||
</mat-list-item> |
||||
<mat-list-item> |
||||
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px"> |
||||
<img matListAvatar src=""> |
||||
<div> |
||||
<div>我是假数据 |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
</div> |
||||
<div matLine class="profile-item-content"> |
||||
我是假数据 |
||||
</div> |
||||
</mat-list-item> |
||||
<mat-list-item> |
||||
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px"> |
||||
<img matListAvatar src=""> |
||||
<div> |
||||
<div>我是假数据 |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
</div> |
||||
<div matLine class="profile-item-content"> |
||||
我是假数据 |
||||
</div> |
||||
</mat-list-item> |
||||
</mat-list> |
||||
</mat-tab> |
||||
</mat-tab-group> |
||||
</mat-card> |
||||
</div> |
||||
</div> |
||||
@ -1,110 +0,0 @@
|
||||
|
||||
#xxx{ |
||||
display: flex; |
||||
justify-content: space-around; |
||||
} |
||||
.pages-profile { |
||||
padding: 30px; |
||||
|
||||
.profile-card { |
||||
padding: 9px; |
||||
text-align: center; |
||||
font-family: Roboto, sans-serif; |
||||
width: 500px; |
||||
height: 600px; |
||||
mat-card-content { |
||||
padding: 40px 15px; |
||||
margin: 0; |
||||
} |
||||
|
||||
.mat-card-avatar { |
||||
width: 130px; |
||||
height: 130px; |
||||
margin-bottom: 10px; |
||||
} |
||||
|
||||
.profile-user { |
||||
margin: 10px 0; |
||||
font-weight: normal; |
||||
} |
||||
|
||||
.profile-job { |
||||
margin-bottom: 20px; |
||||
color: #9e9e9e; |
||||
font-weight: 500; |
||||
} |
||||
|
||||
.profile-introduction { |
||||
margin: 0 0 1rem; |
||||
color: #757575; |
||||
} |
||||
|
||||
.profile-social { |
||||
margin: 25px 0; |
||||
|
||||
mat-icon { |
||||
margin: 0 10px; |
||||
color: rgba(66, 66, 66, .4); |
||||
} |
||||
} |
||||
|
||||
mat-card-actions { |
||||
padding: 10px; |
||||
background: #f6f9fd; |
||||
} |
||||
|
||||
.profile-card-footer { |
||||
display: flex; |
||||
justify-content: space-around; |
||||
.profile-stat-count { |
||||
display: block; |
||||
margin-bottom: 3px; |
||||
font-size: 20px; |
||||
font-weight: bold; |
||||
color: #616161; |
||||
|
||||
+span { |
||||
color: #9e9e9e; |
||||
} |
||||
} |
||||
} |
||||
|
||||
} |
||||
|
||||
.profile-board { |
||||
padding: 30px; |
||||
width: 500px; |
||||
mat-list { |
||||
padding-bottom: 20px; |
||||
} |
||||
|
||||
mat-list-item { |
||||
height: auto; |
||||
padding: 25px 0; |
||||
margin-left: -16px; |
||||
border-bottom: 1px solid #dfe0df; |
||||
|
||||
.profile-item-content { |
||||
padding: 20px 0 0 56px; |
||||
line-height: 1.571429; |
||||
color: #757575; |
||||
white-space: normal; |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
|
||||
img { |
||||
width: 100%; |
||||
max-width: 220px; |
||||
max-height: 150px; |
||||
padding: 0 20px 20px 0; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.show-more-btn { |
||||
width: 100%; |
||||
background-color: #eee; |
||||
color: #3949ab; |
||||
} |
||||
} |
||||
@ -1,25 +0,0 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { PersonaldataComponent } from './personaldata.component'; |
||||
|
||||
describe('PersonaldataComponent', () => { |
||||
let component: PersonaldataComponent; |
||||
let fixture: ComponentFixture<PersonaldataComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ PersonaldataComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(PersonaldataComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -1,15 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
|
||||
@Component({ |
||||
selector: 'app-personaldata', |
||||
templateUrl: './personaldata.component.html', |
||||
styleUrls: ['./personaldata.component.scss'] |
||||
}) |
||||
export class PersonaldataComponent implements OnInit { |
||||
|
||||
constructor() { } |
||||
|
||||
ngOnInit() { |
||||
} |
||||
|
||||
} |
||||
@ -1,161 +0,0 @@
|
||||
<div class="header"> |
||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm"> |
||||
<div class="queryBox"> |
||||
<div class="queryField"> |
||||
<label style="margin-right: 10px;">单位名称:</label> |
||||
<mat-form-field> |
||||
<input matInput placeholder="请输入单位名称" name="CompanyName" [(ngModel)]="CompanyName"> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div class="queryField ordiv"> |
||||
<label style="margin-right: 10px;">辖区中队:</label> |
||||
<mat-form-field> |
||||
<input readonly matInput placeholder="请选择辖区中队" [(ngModel)]="selectOrganizationIName" name="selectOrganizationIName" (focus)="openorganizationbox()"> |
||||
</mat-form-field> |
||||
<mat-checkbox style="margin-left: 5px;" [(ngModel)]="HasChildrenOrganization" name="HasChildrenOrganization">包含下级</mat-checkbox> |
||||
|
||||
<div class="organizationbox" *ngIf="isorganizationbox"> |
||||
<div (click)="closediv()" class="closediv"><mat-icon>clear</mat-icon></div> |
||||
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl"> |
||||
<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding (click)='add(node)' class="organizationlist"> |
||||
<button type="button" mat-icon-button disabled ></button> |
||||
<li>{{node.name}}</li> |
||||
</mat-tree-node> |
||||
<mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding (click)='add(node)' class="organizationlist"> |
||||
<button type="button" mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.name"> |
||||
<mat-icon class="mat-icon-rtl-mirror"> |
||||
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}} |
||||
</mat-icon> |
||||
</button> |
||||
<li>{{node.name}}</li> |
||||
</mat-tree-node> |
||||
</mat-tree> |
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
<div class="queryField"> |
||||
<label style="margin-right: 10px;">单位类型:</label> |
||||
<mat-form-field> |
||||
<mat-select placeholder='请选择单位类型' [(ngModel)]="BuildingTypeId" name="BuildingTypeId"> |
||||
<mat-option *ngFor="let unit of allunittype" [value]="unit.id" > |
||||
{{unit.name}} |
||||
</mat-option> |
||||
</mat-select> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div class="queryField"> |
||||
<label style="margin-right: 10px;">预案类型:</label> |
||||
<mat-form-field class="maginleft"> |
||||
<mat-select placeholder='请选择预案类型' [(ngModel)]="PlanType" name="PlanType"> |
||||
<mat-option *ngFor="let plan of planpatterns" [value]="plan.value"> |
||||
{{plan.name}} |
||||
</mat-option> |
||||
</mat-select> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div class="queryField"> |
||||
<label style="margin-right: 10px;">审核状态:</label> |
||||
<mat-form-field class="maginleft"> |
||||
<mat-select placeholder='请选择审核状态' [(ngModel)]="AuditStatus" name="AuditStatus"> |
||||
<mat-option *ngFor="let state of passstates" [value]="state.value"> |
||||
{{state.name}} |
||||
</mat-option> |
||||
</mat-select> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
<div style="width: 100%;text-align: center;"> |
||||
<button mat-raised-button color="primary">查询</button> |
||||
<button mat-raised-button style="margin-left: 25px;" type="button" (click)="reset()">重置</button> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
<mat-divider></mat-divider> |
||||
|
||||
<div class="body"> |
||||
<div class="tablebox"> |
||||
<table mat-table [dataSource]="tabledataSource"> |
||||
|
||||
<ng-container matColumnDef="unitname"> |
||||
<th mat-header-cell *matHeaderCellDef>单位名称</th> |
||||
<td mat-cell *matCellDef="let element">{{element.companyName}}</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="planname"> |
||||
<th mat-header-cell *matHeaderCellDef>预案名称</th> |
||||
<td mat-cell *matCellDef="let element">{{element.name}}</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="addpeople"> |
||||
<th mat-header-cell *matHeaderCellDef>添加人</th> |
||||
<td mat-cell *matCellDef="let element">{{element.creatorName}}</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="addtime"> |
||||
<th mat-header-cell *matHeaderCellDef>添加时间</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
{{element.creationTime|date:'yyyy-MM-dd'}} |
||||
</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="plantype"> |
||||
<th mat-header-cell *matHeaderCellDef>预案类型</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
<label *ngIf="element.planType==8">卡片预案</label> |
||||
<label *ngIf="element.planType==1">二维预案</label> |
||||
<label *ngIf="element.planType==2">三维预案</label> |
||||
<label *ngIf="element.planType==4">其他预案</label> |
||||
</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="auditstate"> |
||||
<th mat-header-cell *matHeaderCellDef>审核状态</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
<label *ngIf="element.auditStatus==0">预案未审核</label> |
||||
<label *ngIf="element.auditStatus==1">审核中</label> |
||||
<label *ngIf="element.auditStatus==2">审核通过</label> |
||||
<label *ngIf="element.auditStatus==4">审核退回</label> |
||||
</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="isopen"> |
||||
<th mat-header-cell *matHeaderCellDef>是否公开</th> |
||||
<td mat-cell *matCellDef="let element">{{element.openRange}}</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="preparethelevel"> |
||||
<th mat-header-cell *matHeaderCellDef>编制级别</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
<label *ngIf="element.planLevel==1">总队</label> |
||||
<label *ngIf="element.planLevel==2">支队</label> |
||||
<label *ngIf="element.planLevel==4">大队</label> |
||||
<label *ngIf="element.planLevel==8">中队</label> |
||||
</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="operation"> |
||||
<th mat-header-cell *matHeaderCellDef>操作</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
<label style="color: #0000FF;cursor: pointer;" (click)='toExamine(element)' *ngIf="element.auditStatus!=4">预案审核</label> |
||||
<label style="color: #0000FF;margin-left: 10px;cursor: pointer;" (click)='openReserve(element)' *ngIf="element.auditStatus==2">预案公开</label> |
||||
<label style="color: #0000FF;margin-left: 10px;cursor: pointer;" (click)='closeReserve(element)' *ngIf="element.auditStatus==2">预案取消公开</label> |
||||
<label style="color: #999;"*ngIf="element.auditStatus==4">预案已驳回</label> |
||||
</td> |
||||
</ng-container> |
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> |
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> |
||||
</table> |
||||
<mat-paginator [length]="length" |
||||
[pageSize]="pageSize" |
||||
[pageSizeOptions]="pageSizeOptions" |
||||
(page)="chagePage($event)"> |
||||
</mat-paginator> |
||||
</div> |
||||
</div> |
||||
@ -1,25 +0,0 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { DetachmentLevelComponent } from './detachment-level.component'; |
||||
|
||||
describe('DetachmentLevelComponent', () => { |
||||
let component: DetachmentLevelComponent; |
||||
let fixture: ComponentFixture<DetachmentLevelComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ DetachmentLevelComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(DetachmentLevelComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -1,248 +0,0 @@
|
||||
import { Component, OnInit, ViewChild, Inject } from '@angular/core'; |
||||
import { HttpClient } from '@angular/common/http' |
||||
import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree'; |
||||
import { MatPaginator } from '@angular/material/paginator'; |
||||
import { FlatTreeControl } from '@angular/cdk/tree'; |
||||
import { FormControl } from '@angular/forms'; |
||||
import { Router,ActivatedRoute } from '@angular/router' |
||||
import { PageEvent } from '@angular/material/paginator'; |
||||
import { MatDialogRef, MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog'; |
||||
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; |
||||
import { TreeService } from '../../http-interceptors/tree.service' |
||||
|
||||
|
||||
export interface Food { |
||||
name:string; |
||||
value: string; |
||||
} |
||||
@Component({ |
||||
selector: 'app-detachment-level', |
||||
templateUrl: './detachment-level.component.html', |
||||
styleUrls: ['../plan-audit/plan-audit.component.scss'] |
||||
}) |
||||
export class DetachmentLevelComponent implements OnInit { |
||||
|
||||
constructor(private http:HttpClient,private router:Router,private route:ActivatedRoute,private tree: TreeService,public dialog: MatDialog,public snackBar: MatSnackBar) { } |
||||
|
||||
private _transformer = (node, level: number) => { //初始化tree
|
||||
return { |
||||
expandable: !!node.children && node.children.length > 0, |
||||
name: node.name, |
||||
level: level, |
||||
id: node.id, |
||||
parentId: node.parentId, |
||||
children: node.children |
||||
}; |
||||
} |
||||
treeControl = new FlatTreeControl<any>(node => node.level, node => node.expandable); |
||||
treeFlattener = new MatTreeFlattener(this._transformer, node => node.level, node => node.expandable, node => node.children); |
||||
dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener); |
||||
myControl = new FormControl(); |
||||
hasChild = (_: number, node: any) => node.expandable; |
||||
|
||||
organizationName:any //当前单位所属辖区中队名称
|
||||
allunittype:any //所有单位类型
|
||||
planpatterns:Food[] = [ //预案类型
|
||||
{name:"卡片预案",value:"8"}, |
||||
{name:"二维预案",value:"1" }, |
||||
{name:"三维预案",value:"2" }, |
||||
{name:"其他预案",value:"4" },] |
||||
passstates:Food[]=[ //审核状态
|
||||
{name:"审核中",value:"1"}, |
||||
{name:"审核通过",value:"2"}, |
||||
{name:"审核退回",value:"4"},] |
||||
|
||||
displayedColumns: string[] = ['unitname','planname', 'addpeople', 'addtime','plantype','auditstate', 'isopen','preparethelevel','operation']; |
||||
tabledataSource:any; //所有预案审核信息
|
||||
|
||||
//分页
|
||||
@ViewChild(MatPaginator, {static: true}) |
||||
pageEvent: PageEvent; |
||||
paginator: MatPaginator; |
||||
length:any; //共多少条数据
|
||||
pageSize:any; //每页条数
|
||||
pageSizeOptions: number[] = [10] //设置每页条数
|
||||
PageNumber:number = 1; //第几页
|
||||
|
||||
//查询筛选条件
|
||||
CompanyName:any; //单位名称
|
||||
selectOrganizationID:any //选中的辖区中队id
|
||||
selectOrganizationIName:any //选中的辖区中队name
|
||||
HasChildrenOrganization:boolean = false; //辖区中队是否包含下级
|
||||
BuildingTypeId:any; //选中的单位类型
|
||||
PlanType:any; //选中的预案类型
|
||||
AuditStatus:any = '1'; //选中的审核状态
|
||||
PlanLevel:any='2'; //选中的编制级别
|
||||
|
||||
//分页事件
|
||||
chagePage(e){ |
||||
this.PageNumber = e.pageIndex + 1 |
||||
let header = { |
||||
CompanyName: this.CompanyName || '', |
||||
OrganizationId: this.selectOrganizationID || '', |
||||
HasChildrenOrganization: String(this.HasChildrenOrganization) || 'false', |
||||
BuildingTypeId: this.BuildingTypeId || '', |
||||
PlanType: this.PlanType || '', |
||||
AuditStatus: this.AuditStatus || '1', |
||||
PlanLevel: this.PlanLevel || '2', |
||||
PageNumber: String(this.PageNumber), |
||||
} |
||||
this.http.get('/api/PlanAudits',{params:header}).subscribe((data:any)=>{ |
||||
this.length = data.totalCount |
||||
this.pageSize = data.pageSize |
||||
this.tabledataSource = data.items |
||||
}) |
||||
} |
||||
|
||||
//查询
|
||||
onSubmit(e){ |
||||
this.getAllPlanAudits() |
||||
} |
||||
|
||||
//重置
|
||||
reset () { |
||||
this.CompanyName = '' |
||||
this.selectOrganizationID = '' |
||||
this.selectOrganizationIName = '' |
||||
this.HasChildrenOrganization = false |
||||
this.BuildingTypeId = '' |
||||
this.PlanType = '', |
||||
this.AuditStatus = '1', |
||||
this.PlanLevel = '2', |
||||
this.getAllPlanAudits() |
||||
} |
||||
|
||||
//获取当前所有预案审核
|
||||
getAllPlanAudits () { |
||||
let header = { |
||||
CompanyName: this.CompanyName || '', |
||||
OrganizationId: this.selectOrganizationID || '', |
||||
HasChildrenOrganization: String(this.HasChildrenOrganization) || 'false', |
||||
BuildingTypeId: this.BuildingTypeId || '', |
||||
PlanType: this.PlanType || '', |
||||
AuditStatus: this.AuditStatus || '1', |
||||
PlanLevel: this.PlanLevel || '2', |
||||
PageNumber: '1', |
||||
} |
||||
this.http.get('/api/PlanAudits',{params:header}).subscribe((data:any)=>{ |
||||
this.length = data.totalCount |
||||
this.pageSize = data.pageSize |
||||
this.pageEvent.pageIndex = 0 |
||||
this.tabledataSource = data.items |
||||
}) |
||||
} |
||||
|
||||
ngOnInit(): void { |
||||
this.getunitdata(); |
||||
this.getOrganizations(); |
||||
this.getUnittype(); |
||||
this.getAllPlanAudits() |
||||
} |
||||
|
||||
//得到当前账号所属辖区中队名称
|
||||
getunitdata(){ |
||||
this.http.get("/api/Account/Profiles").subscribe((data:any)=>{ |
||||
this.organizationName = data.organizationName |
||||
}) |
||||
} |
||||
|
||||
//获得所有辖区中队(处理数据结构)
|
||||
getOrganizations(){ |
||||
let treeData = [] |
||||
this.http.get('/api/Organizations').subscribe((data:any)=>{ |
||||
data.forEach(element => { |
||||
element.children = [] |
||||
data.forEach(item => { if (item.parentId == element.id) {element.children.push(item)} }); |
||||
}); |
||||
if (this.organizationName) { //当前账号有辖区中队时
|
||||
data.forEach(element => { |
||||
if (element.name===this.organizationName) { |
||||
treeData.push(element) |
||||
this.dataSource.data = treeData } |
||||
}); |
||||
} else { //当前账号没有有辖区中队时
|
||||
data.forEach(element => { |
||||
if (!element.parentId) { |
||||
treeData.push(element) |
||||
this.dataSource.data = treeData } |
||||
}); |
||||
} |
||||
|
||||
}) |
||||
} |
||||
|
||||
//获得所有单位类型
|
||||
getUnittype(){ |
||||
this.http.get('/api/BuildingTypes/Simple').subscribe(data=>{
|
||||
this.allunittype = data |
||||
}) |
||||
} |
||||
|
||||
isorganizationbox:boolean = false //辖区中队DIV显隐
|
||||
|
||||
//打开辖区中队
|
||||
openorganizationbox() { |
||||
this.isorganizationbox = true |
||||
} |
||||
|
||||
//关闭辖区中队
|
||||
closediv(){ |
||||
this.isorganizationbox = false |
||||
} |
||||
|
||||
//选择辖区中队时
|
||||
add(node) { |
||||
this.selectOrganizationID = node.id |
||||
this.selectOrganizationIName = node.name |
||||
this.isorganizationbox = false |
||||
} |
||||
|
||||
//预案审核
|
||||
toExamine (e) { |
||||
window.open(`/planAudit/planpass?id=${e.companyId}&companyName=${e.companyName}&auditPlanId=${e.id}&auditStatus=${e.auditStatus}`); |
||||
} |
||||
|
||||
//预案公开
|
||||
openReserve (e) { |
||||
this.http.put(`/api/PlanAudits/${e.id}/Public`,[]).subscribe(data=>{ |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('预案公开成功','确定',config); |
||||
this.renew() |
||||
}) |
||||
} |
||||
|
||||
//预案取消公开
|
||||
closeReserve (e) { |
||||
this.http.put(`/api/PlanAudits/${e.id}/Unpublic`,[]).subscribe(data=>{ |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('预案已取消公开','确定',config); |
||||
this.renew() |
||||
}) |
||||
} |
||||
|
||||
//按查询条件及分页 更新当前页面
|
||||
renew () { |
||||
let header = { |
||||
CompanyName: this.CompanyName || '', |
||||
OrganizationId: this.selectOrganizationID || '', |
||||
HasChildrenOrganization: String(this.HasChildrenOrganization) || 'false', |
||||
BuildingTypeId: this.BuildingTypeId || '', |
||||
PlanType: this.PlanType || '', |
||||
AuditStatus: this.AuditStatus || '1', |
||||
PlanLevel: this.PlanLevel || '2', |
||||
PageNumber: String(this.PageNumber), |
||||
} |
||||
this.http.get('/api/PlanAudits',{params:header}).subscribe((data:any)=>{ |
||||
this.length = data.totalCount |
||||
this.pageSize = data.pageSize |
||||
this.tabledataSource = data.items |
||||
}) |
||||
} |
||||
|
||||
|
||||
|
||||
} |
||||
@ -1,17 +0,0 @@
|
||||
import { NgModule } from '@angular/core'; |
||||
import { Routes, RouterModule } from '@angular/router'; |
||||
import {DetachmentLevelComponent} from './detachment-level/detachment-level.component' |
||||
import { PlanAuditComponent } from './plan-audit/plan-audit.component'; |
||||
import { PlanPassComponent } from './plan-pass/plan-pass.component'; |
||||
|
||||
const routes: Routes = [ |
||||
{ path: 'detachmentLevel', component: DetachmentLevelComponent }, |
||||
{ path: 'planaudit', component: PlanAuditComponent }, |
||||
{ path: 'planpass', component: PlanPassComponent }, |
||||
]; |
||||
|
||||
@NgModule({ |
||||
imports: [RouterModule.forChild(routes)], |
||||
exports: [RouterModule] |
||||
}) |
||||
export class PlanAuditRoutingModule { } |
||||
@ -1,104 +0,0 @@
|
||||
import { NgModule } from '@angular/core'; |
||||
import { CommonModule } from '@angular/common'; |
||||
import { PlanAuditRoutingModule } from './plan-audit-routing.module'; |
||||
import { DetachmentLevelComponent } from './detachment-level/detachment-level.component'; |
||||
|
||||
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 {MatIconModule} from '@angular/material/icon'; |
||||
import {MatInputModule} from '@angular/material/input'; |
||||
import {MatListModule} from '@angular/material/list'; |
||||
import {MatMenuModule} from '@angular/material/menu'; |
||||
import {MatNativeDateModule, MatRippleModule, MatOption} 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 {MatSidenavModule} from '@angular/material/sidenav'; |
||||
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'; |
||||
import { PlanAuditComponent, PlanOpen } from './plan-audit/plan-audit.component'; |
||||
import { FormsModule } from '@angular/forms'; |
||||
import { PlanPassComponent } from './plan-pass/plan-pass.component'; |
||||
import {ViewUnitDetailsPlanComponent} from '../key-unit/view-unit-details-plan/view-unit-details-plan.component' |
||||
import {KeyUnitModule} from '../key-unit/key-unit.module' |
||||
|
||||
@NgModule({ |
||||
declarations: [DetachmentLevelComponent, PlanAuditComponent, PlanPassComponent,PlanOpen,], |
||||
imports: [ |
||||
CommonModule, |
||||
PlanAuditRoutingModule, |
||||
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, |
||||
FormsModule, |
||||
KeyUnitModule |
||||
] |
||||
}) |
||||
export class PlanAuditModule { } |
||||
@ -1,173 +0,0 @@
|
||||
<div class="header"> |
||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm"> |
||||
<div class="queryBox"> |
||||
<div class="queryField"> |
||||
<label style="margin-right: 10px;">单位名称:</label> |
||||
<mat-form-field> |
||||
<input matInput placeholder="请输入单位名称" name="CompanyName" [(ngModel)]="CompanyName"> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div class="queryField ordiv"> |
||||
<label style="margin-right: 10px;">辖区中队:</label> |
||||
<mat-form-field> |
||||
<input readonly matInput placeholder="请选择辖区中队" [(ngModel)]="selectOrganizationIName" name="selectOrganizationIName" (focus)="openorganizationbox()"> |
||||
</mat-form-field> |
||||
<mat-checkbox style="margin-left: 5px;" [(ngModel)]="HasChildrenOrganization" name="HasChildrenOrganization">包含下级</mat-checkbox> |
||||
|
||||
<div class="organizationbox" *ngIf="isorganizationbox"> |
||||
<div (click)="closediv()" class="closediv"><mat-icon>clear</mat-icon></div> |
||||
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl"> |
||||
<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding (click)='add(node)' class="organizationlist"> |
||||
<button type="button" mat-icon-button disabled ></button> |
||||
<li>{{node.name}}</li> |
||||
</mat-tree-node> |
||||
<mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding (click)='add(node)' class="organizationlist"> |
||||
<button type="button" mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.name"> |
||||
<mat-icon class="mat-icon-rtl-mirror"> |
||||
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}} |
||||
</mat-icon> |
||||
</button> |
||||
<li>{{node.name}}</li> |
||||
</mat-tree-node> |
||||
</mat-tree> |
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
<div class="queryField"> |
||||
<label style="margin-right: 10px;">单位类型:</label> |
||||
<mat-form-field> |
||||
<mat-select placeholder='请选择单位类型' [(ngModel)]="BuildingTypeId" name="BuildingTypeId"> |
||||
<mat-option *ngFor="let unit of allunittype" [value]="unit.id" > |
||||
{{unit.name}} |
||||
</mat-option> |
||||
</mat-select> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div class="queryField"> |
||||
<label style="margin-right: 10px;">预案类型:</label> |
||||
<mat-form-field class="maginleft"> |
||||
<mat-select placeholder='请选择预案类型' [(ngModel)]="PlanType" name="PlanType"> |
||||
<mat-option *ngFor="let plan of planpatterns" [value]="plan.value"> |
||||
{{plan.name}} |
||||
</mat-option> |
||||
</mat-select> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div class="queryField"> |
||||
<label style="margin-right: 10px;">审核状态:</label> |
||||
<mat-form-field class="maginleft"> |
||||
<mat-select placeholder='请选择审核状态' [(ngModel)]="AuditStatus" name="AuditStatus"> |
||||
<mat-option *ngFor="let state of passstates" [value]="state.value"> |
||||
{{state.name}} |
||||
</mat-option> |
||||
</mat-select> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div class="queryField"> |
||||
<label style="margin-right: 10px;">编制级别:</label> |
||||
<mat-form-field class="maginleft"> |
||||
<mat-select placeholder='请选择编制级别' [(ngModel)]="PlanLevel" name="PlanLevel"> |
||||
<mat-option *ngFor="let level of preparelevels" [value]="level.value"> |
||||
{{level.name}} |
||||
</mat-option> |
||||
</mat-select> |
||||
</mat-form-field> |
||||
<mat-checkbox style="margin-left: 5px;" [(ngModel)]="HasChildrenPlanLevel" name="HasChildrenPlanLevel">包含下级</mat-checkbox> |
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
<div style="width: 100%;text-align: center;"> |
||||
<button mat-raised-button color="primary">查询</button> |
||||
<button mat-raised-button style="margin-left: 25px;" type="button" (click)="reset()">重置</button> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
<mat-divider></mat-divider> |
||||
|
||||
<div class="body"> |
||||
<div class="tablebox"> |
||||
<table mat-table [dataSource]="tabledataSource"> |
||||
|
||||
<ng-container matColumnDef="unitname"> |
||||
<th mat-header-cell *matHeaderCellDef>单位名称</th> |
||||
<td mat-cell *matCellDef="let element">{{element.companyName}}</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="planname"> |
||||
<th mat-header-cell *matHeaderCellDef>预案名称</th> |
||||
<td mat-cell *matCellDef="let element">{{element.name}}</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="addpeople"> |
||||
<th mat-header-cell *matHeaderCellDef>添加人</th> |
||||
<td mat-cell *matCellDef="let element">{{element.creatorName}}</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="addtime"> |
||||
<th mat-header-cell *matHeaderCellDef>添加时间</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
{{element.creationTime|date:'yyyy-MM-dd'}} |
||||
</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="plantype"> |
||||
<th mat-header-cell *matHeaderCellDef>预案类型</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
<label *ngIf="element.planType==8">卡片预案</label> |
||||
<label *ngIf="element.planType==1">二维预案</label> |
||||
<label *ngIf="element.planType==2">三维预案</label> |
||||
<label *ngIf="element.planType==4">其他预案</label> |
||||
</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="auditstate"> |
||||
<th mat-header-cell *matHeaderCellDef>审核状态</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
<label *ngIf="element.auditStatus==0">预案未审核</label> |
||||
<label *ngIf="element.auditStatus==1">审核中</label> |
||||
<label *ngIf="element.auditStatus==2">审核通过</label> |
||||
<label *ngIf="element.auditStatus==4">审核退回</label> |
||||
</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="isopen"> |
||||
<th mat-header-cell *matHeaderCellDef>是否公开</th> |
||||
<td mat-cell *matCellDef="let element">{{element.openRange}}</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="preparethelevel"> |
||||
<th mat-header-cell *matHeaderCellDef>编制级别</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
<label *ngIf="element.planLevel==1">总队</label> |
||||
<label *ngIf="element.planLevel==2">支队</label> |
||||
<label *ngIf="element.planLevel==4">大队</label> |
||||
<label *ngIf="element.planLevel==8">中队</label> |
||||
</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="operation"> |
||||
<th mat-header-cell *matHeaderCellDef>操作</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
<label style="color: #0000FF;cursor: pointer;" (click)='toExamine(element)' *ngIf="element.auditStatus!=4">预案审核</label> |
||||
<label style="color: #0000FF;margin-left: 10px;cursor: pointer;" (click)='openReserve(element)' *ngIf="element.auditStatus==2">预案公开</label> |
||||
<label style="color: #0000FF;margin-left: 10px;cursor: pointer;" (click)='closeReserve(element)' *ngIf="element.auditStatus==2">预案取消公开</label> |
||||
<label style="color: #999;"*ngIf="element.auditStatus==4">预案已驳回</label> |
||||
</td> |
||||
</ng-container> |
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> |
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> |
||||
</table> |
||||
<mat-paginator [length]="length" |
||||
[pageSize]="pageSize" |
||||
[pageSizeOptions]="pageSizeOptions" |
||||
(page)="chagePage($event)"> |
||||
</mat-paginator> |
||||
</div> |
||||
</div> |
||||
@ -1,83 +0,0 @@
|
||||
.header { |
||||
width: 100%; |
||||
padding: 10px 10px; |
||||
box-sizing: border-box; |
||||
.queryBox { |
||||
box-sizing: border-box; |
||||
padding: 5px 25px; |
||||
display: flex; |
||||
flex-direction: row; |
||||
flex-wrap: wrap; |
||||
align-items:center; |
||||
.queryField { |
||||
margin: 3px 40px; |
||||
input { |
||||
width: 180px; |
||||
height: 22px; |
||||
line-height: 22px; |
||||
border-radius: 3px;} |
||||
} |
||||
} //queryBox |
||||
|
||||
.ordiv{ //辖区中队 |
||||
position: relative; |
||||
.organizationbox{ |
||||
width:450px; |
||||
height: 200px; |
||||
background: white; |
||||
position: absolute; |
||||
top: 48px; |
||||
left: 77px; |
||||
z-index: 999; |
||||
border: 1px solid grey; |
||||
overflow-y: auto; |
||||
li{ |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
} |
||||
mat-tree-node{ |
||||
cursor: pointer; |
||||
white-space:pre; |
||||
} |
||||
mat-tree-node:hover{ |
||||
background: rgba(225, 225, 225, 0.8); |
||||
} |
||||
.closediv{ |
||||
z-index: 100; |
||||
position: absolute; |
||||
right: 0; |
||||
top: 0; |
||||
width: 30px; |
||||
height: 30px; |
||||
cursor: pointer; |
||||
line-height: 30px; |
||||
text-align: center; |
||||
} |
||||
.closediv:hover{ |
||||
background:rgba(225, 225, 225, 0.8); |
||||
} |
||||
} |
||||
} //ordiv |
||||
|
||||
} //header |
||||
|
||||
.body{ |
||||
.tablebox{ |
||||
overflow-y: auto; |
||||
table { |
||||
width: 100%; |
||||
text-align: center; |
||||
.cdk-header-cell { text-align: center;} |
||||
} |
||||
} //tablebox |
||||
|
||||
} |
||||
|
||||
textarea { |
||||
border-radius: 5px; |
||||
padding: 5px; |
||||
width: 300px; |
||||
height: 100px; |
||||
resize: none; |
||||
} |
||||
@ -1,25 +0,0 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { PlanAuditComponent } from './plan-audit.component'; |
||||
|
||||
describe('PlanAuditComponent', () => { |
||||
let component: PlanAuditComponent; |
||||
let fixture: ComponentFixture<PlanAuditComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ PlanAuditComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(PlanAuditComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -1,317 +0,0 @@
|
||||
import { Component, OnInit, ViewChild, Inject } from '@angular/core'; |
||||
import { HttpClient } from '@angular/common/http' |
||||
import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree'; |
||||
import { MatPaginator } from '@angular/material/paginator'; |
||||
import { FlatTreeControl } from '@angular/cdk/tree'; |
||||
import { FormControl } from '@angular/forms'; |
||||
import { Router,ActivatedRoute } from '@angular/router' |
||||
import { PageEvent } from '@angular/material/paginator'; |
||||
import { MatDialogRef, MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog'; |
||||
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; |
||||
import { TreeService } from '../../http-interceptors/tree.service' |
||||
|
||||
|
||||
|
||||
export interface Food { |
||||
name:string; |
||||
value: string; |
||||
} |
||||
@Component({ |
||||
selector: 'app-plan-audit', |
||||
templateUrl: './plan-audit.component.html', |
||||
styleUrls: ['./plan-audit.component.scss'] |
||||
}) |
||||
export class PlanAuditComponent implements OnInit { |
||||
|
||||
constructor(private http:HttpClient,private router:Router,private route:ActivatedRoute,private tree: TreeService,public dialog: MatDialog,public snackBar: MatSnackBar) { } |
||||
|
||||
private _transformer = (node, level: number) => { //初始化tree
|
||||
return { |
||||
expandable: !!node.children && node.children.length > 0, |
||||
name: node.name, |
||||
level: level, |
||||
id: node.id, |
||||
parentId: node.parentId, |
||||
children: node.children |
||||
}; |
||||
} |
||||
treeControl = new FlatTreeControl<any>(node => node.level, node => node.expandable); |
||||
treeFlattener = new MatTreeFlattener(this._transformer, node => node.level, node => node.expandable, node => node.children); |
||||
dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener); |
||||
myControl = new FormControl(); |
||||
hasChild = (_: number, node: any) => node.expandable; |
||||
|
||||
organizationName:any //当前单位所属辖区中队名称
|
||||
allunittype:any //所有单位类型
|
||||
preparelevels:Food[] //编制级别
|
||||
planpatterns:Food[] = [ //预案类型
|
||||
{name:"卡片预案",value:"8"}, |
||||
{name:"二维预案",value:"1" }, |
||||
{name:"三维预案",value:"2" }, |
||||
{name:"其他预案",value:"4" },] |
||||
passstates:Food[]=[ //审核状态
|
||||
{name:"审核中",value:"1"}, |
||||
{name:"审核通过",value:"2"}, |
||||
{name:"审核退回",value:"4"},] |
||||
|
||||
displayedColumns: string[] = ['unitname','planname', 'addpeople', 'addtime','plantype','auditstate', 'isopen','preparethelevel','operation']; |
||||
tabledataSource:any; //所有预案审核信息
|
||||
|
||||
//分页
|
||||
@ViewChild(MatPaginator, {static: true}) |
||||
pageEvent: PageEvent; |
||||
paginator: MatPaginator; |
||||
length:any; //共多少条数据
|
||||
pageSize:any; //每页条数
|
||||
pageSizeOptions: number[] = [10] //设置每页条数
|
||||
PageNumber:number = 1; //第几页
|
||||
|
||||
//查询筛选条件
|
||||
CompanyName:any; //单位名称
|
||||
selectOrganizationID:any //选中的辖区中队id
|
||||
selectOrganizationIName:any //选中的辖区中队name
|
||||
HasChildrenOrganization:boolean = false; //辖区中队是否包含下级
|
||||
BuildingTypeId:any; //选中的单位类型
|
||||
PlanType:any; //选中的预案类型
|
||||
AuditStatus:any = '1'; //选中的审核状态
|
||||
PlanLevel:any; //选中的编制级别
|
||||
HasChildrenPlanLevel:boolean = false; //编制级别是否包含下级
|
||||
|
||||
//分页事件
|
||||
chagePage(e){ |
||||
this.PageNumber = e.pageIndex + 1 |
||||
let header = { |
||||
CompanyName: this.CompanyName || '', |
||||
OrganizationId: this.selectOrganizationID || '', |
||||
HasChildrenOrganization: String(this.HasChildrenOrganization) || 'false', |
||||
BuildingTypeId: this.BuildingTypeId || '', |
||||
PlanType: this.PlanType || '', |
||||
AuditStatus: this.AuditStatus || '1', |
||||
PlanLevel: this.PlanLevel || '', |
||||
HasChildrenPlanLevel: String(this.HasChildrenPlanLevel) || 'false', |
||||
PageNumber: String(this.PageNumber), |
||||
} |
||||
this.http.get('/api/PlanAudits',{params:header}).subscribe((data:any)=>{ |
||||
this.length = data.totalCount |
||||
this.pageSize = data.pageSize |
||||
this.tabledataSource = data.items |
||||
}) |
||||
} |
||||
|
||||
//查询
|
||||
onSubmit(e){ |
||||
this.getAllPlanAudits() |
||||
} |
||||
|
||||
//重置
|
||||
reset () { |
||||
this.CompanyName = '' |
||||
this.selectOrganizationID = '' |
||||
this.selectOrganizationIName = '' |
||||
this.HasChildrenOrganization = false |
||||
this.BuildingTypeId = '' |
||||
this.PlanType = '', |
||||
this.AuditStatus = '1', |
||||
this.PlanLevel = '', |
||||
this.HasChildrenPlanLevel = false |
||||
this.getAllPlanAudits() |
||||
} |
||||
|
||||
//获取当前所有预案审核
|
||||
getAllPlanAudits () { |
||||
let header = { |
||||
CompanyName: this.CompanyName || '', |
||||
OrganizationId: this.selectOrganizationID || '', |
||||
HasChildrenOrganization: String(this.HasChildrenOrganization) || 'false', |
||||
BuildingTypeId: this.BuildingTypeId || '', |
||||
PlanType: this.PlanType || '', |
||||
AuditStatus: this.AuditStatus || '1', |
||||
PlanLevel: this.PlanLevel || '', |
||||
HasChildrenPlanLevel: String(this.HasChildrenPlanLevel) || 'false', |
||||
PageNumber: '1', |
||||
} |
||||
this.http.get('/api/PlanAudits',{params:header}).subscribe((data:any)=>{ |
||||
this.length = data.totalCount |
||||
this.pageSize = data.pageSize |
||||
this.pageEvent.pageIndex = 0 |
||||
this.tabledataSource = data.items |
||||
}) |
||||
} |
||||
|
||||
ngOnInit(): void { |
||||
this.getunitdata(); |
||||
this.getOrganizations(); |
||||
this.getUnittype(); |
||||
let level = sessionStorage.getItem("level"); |
||||
if(level == "0"){ //如果是总队
|
||||
this.preparelevels = [ |
||||
{name:"总队",value:"1"}, |
||||
{name:"支队",value:"2"}, |
||||
{name:"大队",value:"4"}, |
||||
{name:"中队",value:"8"},] } |
||||
if(level == "1"){ //如果是支队
|
||||
this.preparelevels = [ |
||||
{name:"支队",value:"2"}, |
||||
{name:"大队",value:"4"}, |
||||
{name:"中队",value:"8"},] } |
||||
if(level == "2"){ //如果是大队
|
||||
this.preparelevels = [ |
||||
{name:"大队",value:"4"}, |
||||
{name:"中队",value:"8"},] } |
||||
if(level == "3"){ //如果是中队
|
||||
this.preparelevels = [{name:"中队",value:"8"}] } |
||||
|
||||
this.getAllPlanAudits() |
||||
} |
||||
|
||||
//得到当前账号所属辖区中队名称
|
||||
getunitdata(){ |
||||
this.http.get("/api/Account/Profiles").subscribe((data:any)=>{ |
||||
this.organizationName = data.organizationName |
||||
}) |
||||
} |
||||
|
||||
//获得所有辖区中队(处理数据结构)
|
||||
getOrganizations(){ |
||||
let treeData = [] |
||||
this.http.get('/api/Organizations').subscribe((data:any)=>{ |
||||
data.forEach(element => { |
||||
element.children = [] |
||||
data.forEach(item => { if (item.parentId == element.id) {element.children.push(item)} }); |
||||
}); |
||||
if (this.organizationName) { //当前账号有辖区中队时
|
||||
data.forEach(element => { |
||||
if (element.name===this.organizationName) { |
||||
treeData.push(element) |
||||
this.dataSource.data = treeData } |
||||
}); |
||||
} else { //当前账号没有有辖区中队时
|
||||
data.forEach(element => { |
||||
if (!element.parentId) { |
||||
treeData.push(element) |
||||
this.dataSource.data = treeData } |
||||
}); |
||||
} |
||||
|
||||
}) |
||||
} |
||||
|
||||
//获得所有单位类型
|
||||
getUnittype(){ |
||||
this.http.get('/api/BuildingTypes/Simple').subscribe(data=>{
|
||||
this.allunittype = data |
||||
}) |
||||
} |
||||
|
||||
isorganizationbox:boolean = false //辖区中队DIV显隐
|
||||
|
||||
//打开辖区中队
|
||||
openorganizationbox() { |
||||
this.isorganizationbox = true |
||||
} |
||||
|
||||
//关闭辖区中队
|
||||
closediv(){ |
||||
this.isorganizationbox = false |
||||
} |
||||
|
||||
//选择辖区中队时
|
||||
add(node) { |
||||
this.selectOrganizationID = node.id |
||||
this.selectOrganizationIName = node.name |
||||
this.isorganizationbox = false |
||||
} |
||||
|
||||
//预案审核
|
||||
toExamine (e) { |
||||
window.open(`/planAudit/planpass?id=${e.companyId}&companyName=${e.companyName}&auditPlanId=${e.id}&auditStatus=${e.auditStatus}`); |
||||
} |
||||
|
||||
//预案公开
|
||||
openReserve (e) { |
||||
this.http.put(`/api/PlanAudits/${e.id}/Public`,[]).subscribe(data=>{ |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('预案已公开','确定',config); |
||||
this.renew() |
||||
}) |
||||
} |
||||
|
||||
//预案取消公开
|
||||
closeReserve (e) { |
||||
this.http.put(`/api/PlanAudits/${e.id}/Unpublic`,[]).subscribe(data=>{ |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('预案已取消公开','确定',config); |
||||
this.renew() |
||||
}) |
||||
} |
||||
|
||||
//按查询条件及分页 更新当前页面
|
||||
renew () { |
||||
let header = { |
||||
CompanyName: this.CompanyName || '', |
||||
OrganizationId: this.selectOrganizationID || '', |
||||
HasChildrenOrganization: String(this.HasChildrenOrganization) || 'false', |
||||
BuildingTypeId: this.BuildingTypeId || '', |
||||
PlanType: this.PlanType || '', |
||||
AuditStatus: this.AuditStatus || '1', |
||||
PlanLevel: this.PlanLevel || '', |
||||
HasChildrenPlanLevel: String(this.HasChildrenPlanLevel) || 'false', |
||||
PageNumber: String(this.PageNumber), |
||||
} |
||||
this.http.get('/api/PlanAudits',{params:header}).subscribe((data:any)=>{ |
||||
this.length = data.totalCount |
||||
this.pageSize = data.pageSize |
||||
this.tabledataSource = data.items |
||||
}) |
||||
} |
||||
|
||||
|
||||
|
||||
} |
||||
|
||||
|
||||
|
||||
@Component({ |
||||
selector: 'planopen', |
||||
templateUrl: './plan-opendialog.html', |
||||
styleUrls: ['./plan-audit.component.scss'] |
||||
}) |
||||
export class PlanOpen { |
||||
|
||||
constructor(private http: HttpClient,public dialogRef: MatDialogRef<PlanOpen>,@Inject(MAT_DIALOG_DATA) public data,public snackBar: MatSnackBar,private tree: TreeService, |
||||
private route:ActivatedRoute,) {} |
||||
|
||||
ngOnInit(): void { |
||||
|
||||
} |
||||
|
||||
//审核预案
|
||||
onSubmit (e) { |
||||
e.auditStatus = Number(e.auditStatus) |
||||
this.http.put(`/api/PlanAudits/${this.data}`,e).subscribe(data=>{ |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('审批结果提交成功','确定',config); |
||||
this.dialogRef.close(); |
||||
}) |
||||
} |
||||
|
||||
//提醒弹窗
|
||||
remind () { |
||||
let type = this.route.snapshot.queryParams.auditStatus //当前预案审核状态 =2为审核通过时
|
||||
if (type==2) { |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('预案驳回,公开预案会设置为未公开状态','确定',config); |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
} |
||||
@ -1,25 +0,0 @@
|
||||
<div mat-dialog-title>审核预案</div> |
||||
<div> |
||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container"> |
||||
|
||||
<div> |
||||
<label style="margin-right: 10px;">审批:</label> |
||||
<mat-radio-group required ngModel name='auditStatus'> |
||||
<mat-radio-button value='2' style="font-size: 18px;">审批通过</mat-radio-button> |
||||
<mat-radio-button value='4' style="font-size: 18px;margin-left: 10px;" (click)='remind()'>审批驳回</mat-radio-button> |
||||
</mat-radio-group> |
||||
</div> |
||||
|
||||
<div> |
||||
<label style="display: block;margin: 10px 0">审批意见:</label> |
||||
<textarea ngModel name="auditOpinion" maxlength="999"></textarea> |
||||
</div> |
||||
|
||||
<div mat-dialog-actions> |
||||
<button mat-raised-button color="primary" type="submit" [disabled]="!form.form.valid"> |
||||
确定 |
||||
</button> |
||||
<button mat-raised-button mat-dialog-close>取消</button> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
@ -1,64 +0,0 @@
|
||||
<mat-accordion> |
||||
<mat-expansion-panel disabled> |
||||
<mat-expansion-panel-header> |
||||
<div class="planHeader"> |
||||
|
||||
<div class="planBox"> |
||||
<span>单位名称: </span> |
||||
<span>{{compantData.name?compantData.name : '暂无数据'}}</span> |
||||
</div> |
||||
<div class="planBox"> |
||||
<span>辖区中队: </span> |
||||
<span>{{compantData.organizationName?compantData.organizationName : '暂无数据'}}</span> |
||||
</div> |
||||
<div class="planBox"> |
||||
<span>单位类型: </span> |
||||
<span>{{compantData.buildingTypes.length?compantData.buildingTypes[0].name : '暂无数据'}}</span> |
||||
</div> |
||||
<div class="planBox"> |
||||
<span>单位地址: </span> |
||||
<span>{{compantData.address?compantData.address : '暂无数据'}}</span> |
||||
</div> |
||||
<div> |
||||
<button mat-raised-button color="primary" (click)='toExamine()' *ngIf="type != 6">审核</button> |
||||
</div> |
||||
|
||||
</div> |
||||
</mat-expansion-panel-header> |
||||
</mat-expansion-panel> |
||||
</mat-accordion> |
||||
|
||||
<div class="planBody" style="width: 100%;height: 90%;padding: 10px;box-sizing: border-box;overflow-y: auto;"> |
||||
|
||||
<div class="table" style="width: 100%;" *ngIf="planType==0"> |
||||
<table mat-table [dataSource]="allFile"> |
||||
|
||||
<ng-container matColumnDef="filename"> |
||||
<th mat-header-cell *matHeaderCellDef>文件名称</th> |
||||
<td mat-cell *matCellDef="let element">{{element.fileName?element.fileName : compantData.name}}</td> |
||||
</ng-container> |
||||
<ng-container matColumnDef="addtime"> |
||||
<th mat-header-cell *matHeaderCellDef>上传时间</th> |
||||
<td mat-cell *matCellDef="let element">{{element.lastModified | date:'yyyy-MM-dd'}}</td> |
||||
</ng-container> |
||||
<ng-container matColumnDef="operation"> |
||||
<th mat-header-cell *matHeaderCellDef>操作</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
<label style="color: #0000FF;cursor: pointer;" (click)='download(element)' *ngIf="!element.isLoading">下载</label> |
||||
<label *ngIf="element.isLoading">正在下载... {{element.progress}}</label> |
||||
<label></label> |
||||
</td> |
||||
</ng-container> |
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> |
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> |
||||
</table> |
||||
</div> |
||||
<div style="width: 100%; height: 100%;" *ngIf="planType==2"> |
||||
<app-view-unit-details-plan></app-view-unit-details-plan> |
||||
</div> |
||||
<div style="width: 100%; height: 100%;" *ngIf="planType==3"> |
||||
<iframe [src]='thirdPartyURL' frameborder="0" width="100%" height="100%" id="iframe"></iframe> |
||||
</div> |
||||
|
||||
</div> |
||||
@ -1,20 +0,0 @@
|
||||
.planHeader { |
||||
width: 100%; |
||||
box-sizing: border-box; |
||||
display: flex; |
||||
align-items: center; |
||||
.planBox { |
||||
margin: 0px 30px; |
||||
color: black; |
||||
:first-child {margin-right: 10px;} |
||||
} |
||||
} |
||||
|
||||
.table { |
||||
overflow-y: auto; |
||||
table { |
||||
width: 100%; |
||||
text-align: center; |
||||
.cdk-header-cell { text-align: center;} |
||||
} |
||||
} |
||||
@ -1,25 +0,0 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { PlanPassComponent } from './plan-pass.component'; |
||||
|
||||
describe('PlanPassComponent', () => { |
||||
let component: PlanPassComponent; |
||||
let fixture: ComponentFixture<PlanPassComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ PlanPassComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(PlanPassComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -1,170 +0,0 @@
|
||||
import { Component, OnInit, ViewChild, Inject } from '@angular/core'; |
||||
import { HttpClient } from '@angular/common/http' |
||||
import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree'; |
||||
import { MatPaginator } from '@angular/material/paginator'; |
||||
import { FlatTreeControl } from '@angular/cdk/tree'; |
||||
import { FormControl } from '@angular/forms'; |
||||
import { Router,ActivatedRoute } from '@angular/router' |
||||
import { PageEvent } from '@angular/material/paginator'; |
||||
import { MatDialogRef, MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog'; |
||||
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; |
||||
import { TreeService } from '../../http-interceptors/tree.service' |
||||
import { MatTableDataSource } from '@angular/material/table'; |
||||
import { DomSanitizer } from '@angular/platform-browser'; |
||||
import {PlanOpen} from '../plan-audit/plan-audit.component' |
||||
import {ViewUnitDetailsPlanComponent} from '../../key-unit/view-unit-details-plan/view-unit-details-plan.component' |
||||
|
||||
|
||||
|
||||
export interface Food { |
||||
name:string; |
||||
value: string; |
||||
} |
||||
@Component({ |
||||
selector: 'app-plan-pass', |
||||
templateUrl: './plan-pass.component.html', |
||||
styleUrls: ['./plan-pass.component.scss'] |
||||
}) |
||||
export class PlanPassComponent implements OnInit { |
||||
|
||||
constructor(private http:HttpClient,private router:Router,private route:ActivatedRoute,private tree: TreeService,public dialog: MatDialog, |
||||
public snackBar: MatSnackBar,private sanitizer: DomSanitizer) { } |
||||
|
||||
type:any //审核按钮是否出现
|
||||
ngOnInit(): void { |
||||
this.type = this.route.snapshot.queryParams.type |
||||
this.getCompanyData() |
||||
this.getPlanData() |
||||
} |
||||
|
||||
displayedColumns: string[] = ['filename','addtime','operation']; //表头
|
||||
compantData:any = {name:'',organizationName: '', buildingTypes:[{name:''}], address:''}; //当前单位信息
|
||||
planData:any; //审核预案信息
|
||||
|
||||
//获取当前单位信息
|
||||
getCompanyData () { |
||||
let header = {
|
||||
CompanyName: this.route.snapshot.queryParams.companyName || '', |
||||
PageSize: '100'} |
||||
this.http.get('/api/Plans',{params:header}).subscribe((data:any)=>{ |
||||
data.items.forEach(element => { |
||||
if (element.companyId===this.route.snapshot.queryParams.id) { |
||||
this.compantData = element.company |
||||
return } }); |
||||
|
||||
}) |
||||
} |
||||
|
||||
//获取当前单位审核预案的信息
|
||||
getPlanData () { |
||||
let header = {
|
||||
CompanyName: this.route.snapshot.queryParams.companyName || '', |
||||
AuditStatus: this.route.snapshot.queryParams.auditStatus || '', |
||||
PageSize: '100', |
||||
} |
||||
this.http.get('/api/PlanAudits',{params:header}).subscribe((data:any)=>{ |
||||
data.items.forEach(element => { |
||||
if (element.id===this.route.snapshot.queryParams.auditPlanId) { |
||||
this.planData = element |
||||
this.handleData() |
||||
return } }); |
||||
|
||||
}) |
||||
} |
||||
|
||||
planType:any; //展示预案类型
|
||||
allFile:any = []; //类型=0时所有文件
|
||||
thirdPartyURL:any; //类型=3时网址
|
||||
handleData () { |
||||
this.planType = this.planData.planMode |
||||
let data = this.planData |
||||
if (this.planData.planMode==0) { //预案planMode=0时, 下载文件
|
||||
data.attachmentUrls.forEach(item => { |
||||
this.http.get(`/api/ObjectMetadata/PlanPlatform/${item}`).subscribe((data:any)=>{ |
||||
data.isLoading = false |
||||
this.allFile.push(data) |
||||
this.allFile = new MatTableDataSource<any>(this.allFile) }) |
||||
}); |
||||
} else if (this.planData.planMode==1) { //预案planMode=1时, 解析文档
|
||||
|
||||
} else if (this.planData.planMode==2) { //预案planMode=2时, 跳查看页面组件
|
||||
sessionStorage.setItem("buildingTypeId", this.compantData.buildingTypes.length? this.compantData.buildingTypes[0].id: undefined); |
||||
sessionStorage.setItem("companyId",this.route.snapshot.queryParams.id); |
||||
sessionStorage.setItem("planId",this.route.snapshot.queryParams.auditPlanId); |
||||
sessionStorage.setItem("editable",'0'); |
||||
} else if (this.planData.planMode==3) { //预案planMode=3时, 第三方网址
|
||||
this.thirdPartyURL = this.sanitizer.bypassSecurityTrustResourceUrl(data.url) |
||||
} |
||||
|
||||
} |
||||
|
||||
//预案审核
|
||||
toExamine () { |
||||
let data = this.route.snapshot.queryParams.auditPlanId |
||||
const dialogRef = this.dialog.open(PlanOpen,{data}); |
||||
} |
||||
|
||||
suffix:string; //文件名后缀
|
||||
//下载
|
||||
download (e) { |
||||
e.isLoading = true |
||||
let file = e |
||||
let fileSize = file.fileLength //下载文件的总大小
|
||||
let shardSize = 10 * 1024 * 1024 //文件大小是否大于10MB
|
||||
this.suffix = this.compantData.name + '.' + (e.objectName.substring(e.objectName.lastIndexOf(".")+1,e.objectName.length)); |
||||
|
||||
if (file && fileSize<=shardSize) { //<=10MB时直接下载
|
||||
this.http.get(`/api/Objects/PlanPlatform/${file.objectName}`,{responseType: 'blob'},).subscribe(data=>{ |
||||
let url = window.URL.createObjectURL(new Blob([data])); //createObjectURL创建一个下载Blob的url地址
|
||||
let link = document.createElement("a"); |
||||
link.style.display = "none"; |
||||
link.href = url; |
||||
link.setAttribute("download", e.fileName?e.fileName : this.suffix); |
||||
document.body.appendChild(link); |
||||
link.click(); |
||||
e.isLoading = false |
||||
}) |
||||
} else if (file && fileSize>shardSize) { //>10MB时分块下载
|
||||
this.blockingDownload(e) //分段下载
|
||||
} |
||||
|
||||
} |
||||
|
||||
//分段下载并合并
|
||||
async blockingDownload (e) { |
||||
let file = e |
||||
let fileSize = file.fileLength //下载文件的总大小
|
||||
let shardSize = 3 * 1024 * 1024 //3MB一个分片
|
||||
let allSlice = Math.ceil(fileSize / shardSize) //总文件/3MB===共分多少段
|
||||
let allFile:any = [] //所有的file分段
|
||||
|
||||
for (let i=0;i<allSlice;i++) { |
||||
let start = i * shardSize //每次下载文件开始位置
|
||||
let end = Math.min(fileSize, start + shardSize-1); //每次下载文件结束为止
|
||||
|
||||
let result = await new Promise ((result,reject)=>{ |
||||
this.http.get(`/api/Objects/PlanPlatform/${file.objectName}`,{headers:{'range':`bytes= ${start}-${end}`},responseType:'blob'}).subscribe(data=>{ |
||||
result(data) })
|
||||
}) |
||||
allFile.push(result) |
||||
e.progress = Number((i/allSlice).toFixed(2))*100 + '%' |
||||
|
||||
if (allFile.length === allSlice) { //合并文件输出给浏览器
|
||||
let url = window.URL.createObjectURL(new Blob(allFile)); //createObjectURL创建一个下载Blob的url地址
|
||||
let link = document.createElement("a"); |
||||
link.style.display = "none"; |
||||
link.href = url; |
||||
link.setAttribute("download", e.fileName?e.fileName : this.suffix); |
||||
document.body.appendChild(link); |
||||
link.click(); |
||||
e.isLoading = false |
||||
e.progress = '' |
||||
} |
||||
|
||||
} //for循环
|
||||
|
||||
} |
||||
|
||||
|
||||
|
||||
} |
||||
@ -1,88 +0,0 @@
|
||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container"> |
||||
<div class="topbox" style="text-align: center;"> |
||||
<span mat-dialog-title>新建预案</span> |
||||
</div> |
||||
<div class="mainbox"> |
||||
<mat-horizontal-stepper [linear]="isLinear" #stepper> |
||||
<mat-step [stepControl]="firstFormGroup"> |
||||
<form [formGroup]="firstFormGroup"> |
||||
<ng-template matStepLabel>填写名称与类型</ng-template> |
||||
<mat-form-field> |
||||
<input matInput id="name" name="name" type='text' |
||||
required autocomplete="off" |
||||
placeholder="请输入预案名称" formControlName="firstCtrlone"> |
||||
</mat-form-field> |
||||
|
||||
<div> |
||||
<!-- <label style="margin-right: 10px;">编制级别:</label> --> |
||||
<mat-form-field> |
||||
<mat-select placeholder='请选择预案类型' required formControlName="firstCtrltwo"> |
||||
<mat-option value="8">卡片预案</mat-option> |
||||
<mat-option value="1">二维预案</mat-option> |
||||
<mat-option value="2">三维预案</mat-option> |
||||
<mat-option value="4">其他预案</mat-option> |
||||
</mat-select> |
||||
</mat-form-field> |
||||
</div> |
||||
<div> |
||||
<button type="button" mat-button matStepperNext (click)="next(firstFormGroup)">下一步</button> |
||||
<button type="button" mat-button (click)="closediv()">取消</button> |
||||
</div> |
||||
</form> |
||||
</mat-step> |
||||
<mat-step [stepControl]="secondFormGroup"> |
||||
<form (ngSubmit)="onSubmit(form)" #form="ngForm"> |
||||
<ng-template matStepLabel>上传预案完成创建</ng-template> |
||||
<div class="upbox"> |
||||
<div style="float: left;margin-top: 8px;"> |
||||
<span class="pigepadding">预案形式：</span> |
||||
</div> |
||||
|
||||
<mat-radio-group required name="planup" [(ngModel)]="defaultisshow" style="float: left;" (change)="selectradio($event)"> |
||||
<div *ngIf="localup"> |
||||
<mat-radio-button value="0" style="margin-right: 10px;">本地上传</mat-radio-button> |
||||
<input style="width: 175px;" type="file" name="" id="uploadFile" *ngIf="isup" (change)="filechange($event)"> |
||||
<span *ngIf="uploadover" style="font-size: 13px;">(已上传)</span> |
||||
</div> |
||||
<div *ngIf="inputword"> |
||||
<mat-radio-button value="1" style="margin-right: 10px;">导入word文档</mat-radio-button> |
||||
<input type="file" name="" id="" *ngIf="isinput" (change)="fileInput($event)"> |
||||
</div> |
||||
<div *ngIf="onlineedit"> |
||||
<mat-radio-button value="2">在线编辑</mat-radio-button> |
||||
</div> |
||||
<div *ngIf="website"> |
||||
<mat-radio-button value="3">网页地址</mat-radio-button> |
||||
<input type="text" *ngIf="isweb" name="webaddress" [(ngModel)]="webaddress" style="width: 175px;height: 20px;margin-left:10px;"> |
||||
</div> |
||||
|
||||
</mat-radio-group> |
||||
</div> |
||||
<!-- --> |
||||
<div class="progressBox" *ngIf="uploadisLoading"> |
||||
|
||||
<span style="font-size: 13px;">上传中...</span> |
||||
<mat-progress-bar mode="determinate" [value]="uploadProgress" class="progress" style="width: 320px;left: 64px;"></mat-progress-bar> |
||||
<button type="button" mat-raised-button (click)="cancel()">取消上传</button> |
||||
</div> |
||||
<div> |
||||
<button type="button" mat-button matStepperPrevious>上一步</button> |
||||
<button type="button" mat-button (click)="closediv()">取消</button> |
||||
<button mat-button *ngIf="!uploadisLoading">完成</button> |
||||
</div> |
||||
</form> |
||||
|
||||
|
||||
</mat-step> |
||||
<!-- <mat-step> |
||||
<ng-template matStepLabel>Done</ng-template> |
||||
You are now done. |
||||
<div> |
||||
<button type="button" mat-button matStepperPrevious>Back</button> |
||||
<button type="button" mat-button (click)="stepper.reset()">Reset</button> |
||||
</div> |
||||
</mat-step> --> |
||||
</mat-horizontal-stepper> |
||||
</div> |
||||
|
||||
</form> |
||||
@ -1,18 +0,0 @@
|
||||
<div style="text-align: center;"> |
||||
<span mat-dialog-title>审批结果</span> |
||||
</div> |
||||
|
||||
<div class="auditDiv"> |
||||
<p>预案名称：{{planName}}</p> |
||||
<p>提交时间：{{commitTime| date:'yyyy-MM-dd HH:mm:ss'}}</p> |
||||
<p>发起申请：{{commitOrganizationName }}</p> |
||||
<mat-divider></mat-divider> |
||||
<p>审批大队：{{auditOrganizationName}}</p> |
||||
<p>审批结果：{{auditResult | auditsatus}}</p> |
||||
<p>审批意见：{{auditOpinion}}</p> |
||||
</div> |
||||
|
||||
|
||||
<div style="text-align: center;margin-top: 8px;"> |
||||
<button mat-button (click)="onNoClick()">关闭</button> |
||||
</div> |
||||
@ -1,16 +0,0 @@
|
||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container"> |
||||
<div class="topbox" style="text-align: center;"> |
||||
<span mat-dialog-title>更改预案名称</span> |
||||
</div> |
||||
<div class="mainbox"> |
||||
|
||||
<mat-form-field> |
||||
<input matInput placeholder="更改预案名称" [(ngModel)]="planName" |
||||
name='name' required> |
||||
</mat-form-field> |
||||
</div> |
||||
<div class="btn" style="margin-top:10px;"> |
||||
<button mat-raised-button color="primary" >确定</button> |
||||
<button type="button" mat-button (click)="onNoClick()" mat-raised-button>取消</button> |
||||
</div> |
||||
</form> |
||||
@ -1,20 +0,0 @@
|
||||
<div class="leftbox"> |
||||
<span mat-dialog-title>选择要下载的文件:</span> |
||||
<!-- <form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container"> --> |
||||
|
||||
<div class="fileDiv" *ngFor="let item of fileDatas;let key = index" style="height: 28px;line-height: 28px;position: relative;" (click)="addurl(item,key)"> |
||||
<mat-icon style="color: #FFC122;">insert_drive_file</mat-icon> |
||||
<span style="position: absolute;left: 30px; font-size: 14px;width: 215px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" title={{item.fileName}}>{{item.fileName ? item.fileName : name2 }}</span> |
||||
<span style="position: absolute;left: 260px;font-size: 14px;">文件大小：{{ item.filePige }} M</span> |
||||
<mat-icon *ngIf="key == selectedFileIndex" style="color: #FFC122;" style="position: absolute;left: 243px;font-size: 16px;top: 6px;">check_circle</mat-icon> |
||||
</div> |
||||
|
||||
|
||||
|
||||
<div class="btn" style="margin-top: 30px;"> |
||||
<button type="button" (click)="confirm()" class="savebtn" mat-raised-button color="primary" style="margin-right: 5px;">确定</button> |
||||
<button type="button" mat-button (click)="onNoClick()" mat-raised-button>取消</button> |
||||
</div> |
||||
|
||||
<!-- </form> --> |
||||
</div> |
||||
@ -1,95 +0,0 @@
|
||||
<!-- <p>录入预案</p> --> |
||||
<div class="header" style="position: relative;"> |
||||
<div> |
||||
<span>单位名称：{{unitdata.unitname == "null" ? "无" : unitdata.unitname}}</span> |
||||
</div> |
||||
<div> |
||||
<span>辖区中队：{{unitdata.organizationName == "null" ? "无" : unitdata.organizationName}}</span> |
||||
</div> |
||||
<div> |
||||
<span>单位类型：{{unitdata.unittype == "null" ? "无" : unitdata.unittype}}</span> |
||||
</div> |
||||
<div> |
||||
<span>单位地址：{{unitdata.unitaddress == "null" ? "无" : unitdata.unitaddress}}</span> |
||||
</div> |
||||
|
||||
<span style="position: absolute;right:60px;bottom:15px;font-size: 13px;color: cornflowerblue;cursor: pointer;" (click)="lookUnitData()">查看详情</span> |
||||
</div> |
||||
<mat-divider style="margin-bottom: 15px;"></mat-divider> |
||||
<div class="body"> |
||||
<div class="btn" style="display: flex;"> |
||||
<button *ngIf="isoperation == 'true'" mat-raised-button color="primary" (click)="addplan()">新建</button> |
||||
<!-- *ngIf="downloadisLoading" {{downloadFileName}}下载中...--> |
||||
<div class="progressBox" style="margin-left: 100px;" *ngIf="downloadisLoading"> |
||||
|
||||
<!-- <button mat-raised-button style="margin-right: 5px;" (click)="cancelDowload()">取消下载</button> --> |
||||
<span title="{{downloadFileName}}" style="font-size: 12px;" class="filename">{{downloadFileName}}</span> |
||||
<span style="font-size: 12px;position: absolute;margin-left: 8px;">下载中...</span> |
||||
<mat-progress-bar mode="determinate" [value]="downloadProgress" class="progress"></mat-progress-bar> |
||||
</div> |
||||
</div> |
||||
<div class="tablebox"> |
||||
<table mat-table [dataSource]="tabledataSource" class="mat-elevation-z8"> |
||||
|
||||
<ng-container matColumnDef="planname"> |
||||
<th mat-header-cell *matHeaderCellDef>预案名称</th> |
||||
<td mat-cell *matCellDef="let element">{{element.name}}</td> |
||||
</ng-container> |
||||
<ng-container matColumnDef="addpeople"> |
||||
<th mat-header-cell *matHeaderCellDef>添加人</th> |
||||
<td mat-cell *matCellDef="let element">{{element.creatorName}}</td> |
||||
</ng-container> |
||||
<ng-container matColumnDef="addtime"> |
||||
<th mat-header-cell *matHeaderCellDef>修改时间</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
{{element.modifiedTime | date:'yyyy-MM-dd'}} |
||||
</td> |
||||
</ng-container> |
||||
<ng-container matColumnDef="plantype"> |
||||
<th mat-header-cell *matHeaderCellDef>预案类型</th> |
||||
<td mat-cell *matCellDef="let element">{{element.planType | plantype}}</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="auditstate"> |
||||
<th mat-header-cell *matHeaderCellDef>审核状态</th> |
||||
<td mat-cell *matCellDef="let element">{{element.auditStatus | auditsatus}}</td> |
||||
</ng-container> |
||||
<ng-container matColumnDef="isopen"> |
||||
<th mat-header-cell *matHeaderCellDef>是否公开</th> |
||||
<td mat-cell *matCellDef="let element">{{element.openRange}}</td> |
||||
</ng-container> |
||||
<ng-container matColumnDef="preparethelevel"> |
||||
<th mat-header-cell *matHeaderCellDef>编制级别</th> |
||||
<td mat-cell *matCellDef="let element">{{element.planLevel | planlevel}}</td> |
||||
</ng-container> |
||||
<ng-container *ngIf="isoperation == 'true'" matColumnDef="operation"> |
||||
<th mat-header-cell *matHeaderCellDef>操作</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
<span (click)="changeName(element)">改名</span> |
||||
<span (click)="editPlan(element)" [ngClass]="{'grey': element.planMode == '0' || element.planMode == '3' || element.auditStatus == '1' || element.auditStatus == '2'}">编辑</span> |
||||
<span (click)="lookPlan(element)">查看</span> |
||||
<span (click)="readFile(element)" [ngClass]="{'grey': element.planMode == '1' || element.planMode == '2' || element.planMode == '3'}">下载</span> |
||||
<span (click)="deletePlan(element)">删除</span> |
||||
<span (click)="auditResult(element)">审批结果</span> |
||||
|
||||
<span (click)="submitAudit(element)" *ngIf="element.auditStatus == 8 || element.auditStatus == 2 || element.auditStatus == 4" [ngClass]="{'grey': element.auditStatus == '2'}">提交审核</span> |
||||
<span (click)="cancelAudit(element)" *ngIf="element.auditStatus == 1">撤销审核</span> |
||||
</td> |
||||
</ng-container> |
||||
<ng-container *ngIf="isoperation == 'false'" matColumnDef="operation"> |
||||
<th mat-header-cell *matHeaderCellDef>操作</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
<span (click)="lookPlan(element)">查看</span> |
||||
<span (click)="readFile(element)" [ngClass]="{'grey': element.planMode == '1' || element.planMode == '2' || element.planMode == '3'}">下载</span> |
||||
</td> |
||||
</ng-container> |
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> |
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> |
||||
</table> |
||||
<mat-paginator [length]="length" |
||||
[pageSize]="pageSize" |
||||
[pageSizeOptions]="pageSizeOptions" |
||||
(page)="changePage($event)"> |
||||
</mat-paginator> |
||||
</div> |
||||
</div> |
||||
@ -1,117 +0,0 @@
|
||||
.header{ |
||||
height: 130px; |
||||
// border-bottom: 1px solid rgba(0, 0, 0, 0.12); |
||||
display: flex; |
||||
flex-direction: row; |
||||
flex-wrap: wrap; |
||||
align-items:center; |
||||
// justify-content:center; |
||||
div{ |
||||
width: 300px; |
||||
height: 30px; |
||||
// margin: 0 30px; |
||||
margin-left: 80px; |
||||
} |
||||
// margin-bottom: 30px; |
||||
} |
||||
.body{ |
||||
.btn{ |
||||
button{ |
||||
width: 80px; |
||||
height: 40px; |
||||
margin-left: 2%; |
||||
} |
||||
} |
||||
.tablebox{ |
||||
table{ |
||||
width: 100%; |
||||
margin-left: 0%; |
||||
margin-top: 15px; |
||||
} |
||||
mat-paginator{ |
||||
width: 100%; |
||||
margin-left: 0%; |
||||
// margin-top: 30px; |
||||
} |
||||
} |
||||
} |
||||
.upbox{ |
||||
height: 100px; |
||||
margin-bottom: 15px; |
||||
mat-radio-group{ |
||||
div{ |
||||
margin: 10px 0; |
||||
} |
||||
} |
||||
} |
||||
.createbtnbox{ |
||||
button{ |
||||
margin: 0 6px; |
||||
} |
||||
} |
||||
.mat-header-cell{ |
||||
text-align: center; |
||||
} |
||||
.mat-cell{ |
||||
text-align: center; |
||||
span{ |
||||
color: #0000BF; |
||||
margin: 0 3px; |
||||
cursor: pointer; |
||||
} |
||||
span:hover{ |
||||
text-decoration:underline |
||||
} |
||||
.grey{ |
||||
color: grey; |
||||
pointer-events: none; |
||||
} |
||||
} |
||||
|
||||
//进度条 |
||||
.progressBox{ |
||||
line-height: 49px; |
||||
height: 49px; |
||||
position: relative; |
||||
display: inline-block; |
||||
width: 100%; |
||||
button{ |
||||
float: right; |
||||
} |
||||
.progress{ |
||||
display: inline-block; |
||||
position: absolute; |
||||
width: 500px; |
||||
top: 22px; |
||||
left: 32px; |
||||
} |
||||
|
||||
.filename{ |
||||
display: inline-block; |
||||
max-width: 180px; |
||||
overflow: hidden; |
||||
white-space: nowrap; |
||||
text-overflow: ellipsis; |
||||
// margin-left: 160px; |
||||
} |
||||
|
||||
} |
||||
|
||||
.fileDiv{ |
||||
cursor: pointer; |
||||
} |
||||
.fileDiv:hover{ |
||||
background-color: #fafafa; |
||||
} |
||||
.auditDiv{ |
||||
p{ |
||||
margin: 8px 0; |
||||
margin-left: 16px; |
||||
} |
||||
} |
||||
.btn{ |
||||
text-align: center; |
||||
button{ |
||||
margin: 0 3px; |
||||
} |
||||
} |
||||
@ -1,25 +0,0 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { EntryPlanLookComponent } from './entry-plan-look.component'; |
||||
|
||||
describe('EntryPlanLookComponent', () => { |
||||
let component: EntryPlanLookComponent; |
||||
let fixture: ComponentFixture<EntryPlanLookComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ EntryPlanLookComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(EntryPlanLookComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -1,258 +0,0 @@
|
||||
<div class="header"> |
||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm"> |
||||
<div class="queryBox"> |
||||
|
||||
<div class="queryField"> |
||||
<label style="margin-right: 10px;">单位名称:</label> |
||||
<mat-form-field class="example-full-width"> |
||||
<input matInput placeholder="请输入单位名称" name="companyName" [(ngModel)]="companyName" autocomplete="off"> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div class="queryField ordiv"> |
||||
<label style="margin-right: 10px;">辖区中队:</label> |
||||
<mat-form-field class="example-full-width"> |
||||
<input readonly matInput placeholder="请选择辖区中队" autocomplete="off" [(ngModel)]="js" name="js" (focus)="openorganizationbox()"> |
||||
</mat-form-field> |
||||
<mat-checkbox style="margin-left: 6px;" [(ngModel)]="jscheck" name="jscheck">包含下级</mat-checkbox> |
||||
<div class="organizationbox" *ngIf="isorganizationbox"> |
||||
<div (click)="closediv()" class="closediv"><mat-icon>clear</mat-icon></div> |
||||
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl"> |
||||
<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding (click)='add(node)' class="organizationlist"> |
||||
<button type="button" mat-icon-button disabled ></button> |
||||
<li>{{node.name}}</li> |
||||
</mat-tree-node> |
||||
<mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding (click)='add(node)' class="organizationlist"> |
||||
<button |
||||
type="button" |
||||
mat-icon-button |
||||
matTreeNodeToggle |
||||
[attr.aria-label]="'toggle ' + node.name"> |
||||
<mat-icon class="mat-icon-rtl-mirror"> |
||||
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}} |
||||
</mat-icon> |
||||
</button> |
||||
<li>{{node.name}}</li> |
||||
</mat-tree-node> |
||||
</mat-tree> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="queryField"> |
||||
<label style="margin-right: 10px;">单位类型:</label> |
||||
<mat-form-field> |
||||
<mat-select placeholder='请选择单位类型' name="unittype" [(ngModel)]="unittype"> |
||||
<mat-option *ngFor="let unit of allunittype" [value]="unit.id" > |
||||
{{unit.name}} |
||||
</mat-option> |
||||
</mat-select> |
||||
</mat-form-field> |
||||
</div> |
||||
<div class="queryField"> |
||||
<label style="margin-right: 10px;">预案类型:</label> |
||||
<mat-form-field> |
||||
<mat-select name="reservePlanType" [(ngModel)]="reservePlanType" placeholder='请选择预案类型'> |
||||
<mat-option value="8">卡片预案</mat-option> |
||||
<mat-option value="1">二维预案</mat-option> |
||||
<mat-option value="2">三维预案</mat-option> |
||||
<mat-option value="4">其他预案</mat-option> |
||||
</mat-select> |
||||
</mat-form-field> |
||||
</div> |
||||
<div class="queryField"> |
||||
<label style="margin-right: 10px;">审核状态:</label> |
||||
<mat-form-field> |
||||
<mat-select name="toExamine" [(ngModel)]="toExamine" placeholder='请选择审核状态'> |
||||
<mat-option value="8">未提交审核</mat-option> |
||||
<mat-option value="1">审核中</mat-option> |
||||
<mat-option value="2">审核通过</mat-option> |
||||
<mat-option value="4">审核退回</mat-option> |
||||
</mat-select> |
||||
</mat-form-field> |
||||
</div> |
||||
<div class="queryField"> |
||||
<label style="margin-right: 10px;">编制级别:</label> |
||||
<mat-form-field> |
||||
<mat-select name="preparelevel" [(ngModel)]="preparelevel" placeholder='请选择编制级别'> |
||||
<!-- <mat-option value="1">总队</mat-option> |
||||
<mat-option value="2">支队</mat-option> |
||||
<mat-option value="4">大队</mat-option> |
||||
<mat-option value="8">中队</mat-option> --> |
||||
<mat-option *ngFor="let item of preparelevels" [value]="item.value">{{item.name}}</mat-option> |
||||
</mat-select> |
||||
</mat-form-field> |
||||
<mat-checkbox style="margin-left: 6px;" [(ngModel)]="plcheck" name="plcheck">包含下级</mat-checkbox> |
||||
</div> |
||||
|
||||
</div> |
||||
<div style="width: 100%;text-align: center;"> |
||||
<button mat-raised-button color="primary" type="submit">查询</button> |
||||
<button mat-raised-button style="margin-left: 25px;" type="button" (click)="reset()">重置</button> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
<mat-divider></mat-divider> |
||||
<div class="body"> |
||||
<div class="tablebox"> |
||||
|
||||
<table mat-table [dataSource]="tabledataSource" class="mat-elevation-z8"> |
||||
<ng-container matColumnDef="unitname"> |
||||
<th mat-header-cell *matHeaderCellDef>单位名称</th> |
||||
<td mat-cell *matCellDef="let element">{{element.company.name}}</td> |
||||
</ng-container> |
||||
<!-- <ng-container matColumnDef="integrity"> |
||||
<th mat-header-cell *matHeaderCellDef>完整度得分</th> |
||||
<td mat-cell *matCellDef="let element;let i = index"> |
||||
<div class="integrityDiv"> |
||||
<span class="integrityNum"> |
||||
{{i*10}}分 |
||||
</span> |
||||
<div class="integrityColorDiv" [style]="integrity(i)"> |
||||
</div> |
||||
<div class="integrityDetails" [ngClass]="{'bottomposition': i <= 5,'topposition': i > 5}"> |
||||
<div class="integrityDetailsTop"> |
||||
<span class="span1">分类名称</span> |
||||
<span class="span2">已得分</span> |
||||
<span class="span3">总分</span> |
||||
</div> |
||||
<div class="integrityDetailsBody"> |
||||
<ul> |
||||
<li> |
||||
<div class="name">单位信息</div> |
||||
<div class="colorDiv"> |
||||
<div class="colorDivBac"> |
||||
<div class="colorDivCon" [style]="integrityDetails(8,10)"></div> |
||||
</div> |
||||
<span>8分</span> |
||||
</div> |
||||
<div class="number">10分</div> |
||||
</li> |
||||
<li> |
||||
<div class="name">建筑信息</div> |
||||
<div class="colorDiv"> |
||||
<div class="colorDivBac"> |
||||
<div class="colorDivCon" [style]="integrityDetails(8,10)"></div> |
||||
</div> |
||||
<span>8分</span> |
||||
</div> |
||||
<div class="number">10分</div> |
||||
</li> |
||||
<li> |
||||
<div class="name">平面图</div> |
||||
<div class="colorDiv"> |
||||
<div class="colorDivBac"> |
||||
<div class="colorDivCon" [style]="integrityDetails(8,10)"></div> |
||||
</div> |
||||
<span>8分</span> |
||||
</div> |
||||
<div class="number">10分</div> |
||||
</li> |
||||
<li> |
||||
<div class="name">四周毗邻</div> |
||||
<div class="colorDiv"> |
||||
<div class="colorDivBac"> |
||||
<div class="colorDivCon" [style]="integrityDetails(8,10)"></div> |
||||
</div> |
||||
<span>8分</span> |
||||
</div> |
||||
<div class="number">10分</div> |
||||
</li> |
||||
<li> |
||||
<div class="name">消防设施</div> |
||||
<div class="colorDiv"> |
||||
<div class="colorDivBac"> |
||||
<div class="colorDivCon" [style]="integrityDetails(8,10)"></div> |
||||
</div> |
||||
<span>8分</span> |
||||
</div> |
||||
<div class="number">10分</div> |
||||
</li> |
||||
<li> |
||||
<div class="name">重点部位</div> |
||||
<div class="colorDiv"> |
||||
<div class="colorDivBac"> |
||||
<div class="colorDivCon" [style]="integrityDetails(8,10)"></div> |
||||
</div> |
||||
<span>8分</span> |
||||
</div> |
||||
<div class="number">10分</div> |
||||
</li> |
||||
<li> |
||||
<div class="name">功能分区</div> |
||||
<div class="colorDiv"> |
||||
<div class="colorDivBac"> |
||||
<div class="colorDivCon" [style]="integrityDetails(8,10)"></div> |
||||
</div> |
||||
<span>8分</span> |
||||
</div> |
||||
<div class="number">10分</div> |
||||
</li> |
||||
<li> |
||||
<div class="name">实景图</div> |
||||
<div class="colorDiv"> |
||||
<div class="colorDivBac"> |
||||
<div class="colorDivCon" [style]="integrityDetails(8,10)"></div> |
||||
</div> |
||||
<span>8分</span> |
||||
</div> |
||||
<div class="number">10分</div> |
||||
</li> |
||||
<li> |
||||
<div class="name">CAD上传</div> |
||||
<div class="colorDiv"> |
||||
<div class="colorDivBac"> |
||||
<div class="colorDivCon" [style]="integrityDetails(8,10)"></div> |
||||
</div> |
||||
<span>8分</span> |
||||
</div> |
||||
<div class="number">10分</div> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
<div style="width: 100%;text-align: center;font-size: 13px;"> |
||||
仅供参考 |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</td> |
||||
</ng-container> --> |
||||
<ng-container matColumnDef="jurisdictionsquadron"> |
||||
<th mat-header-cell *matHeaderCellDef>辖区中队</th> |
||||
<td mat-cell *matCellDef="let element">{{element.company.organizationName}}</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="unittype"> |
||||
<th mat-header-cell *matHeaderCellDef>单位类型</th> |
||||
<td mat-cell *matCellDef="let element">{{element.company.buildingTypes[0] ? element.company.buildingTypes[0].name : ''}}</td> |
||||
</ng-container> |
||||
<ng-container matColumnDef="plantype"> |
||||
<th mat-header-cell *matHeaderCellDef>预案类型</th> |
||||
<td mat-cell *matCellDef="let element">{{element.planType}}</td> |
||||
</ng-container> |
||||
<ng-container matColumnDef="passstate"> |
||||
<th mat-header-cell *matHeaderCellDef>审核状态</th> |
||||
<td mat-cell *matCellDef="let element">{{element.auditStatus}}</td> |
||||
</ng-container> |
||||
<ng-container matColumnDef="projectlevel"> |
||||
<th mat-header-cell *matHeaderCellDef>编制级别</th> |
||||
<td mat-cell *matCellDef="let element">{{element.planLevel}}</td> |
||||
</ng-container> |
||||
<ng-container matColumnDef="operation"> |
||||
<th mat-header-cell *matHeaderCellDef>操作</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
<span (click)="routerTo(element)">查看预案</span> |
||||
</td> |
||||
</ng-container> |
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> |
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> |
||||
</table> |
||||
<mat-paginator pageEvent [length]="length" |
||||
[pageSize]="pageSize" |
||||
[pageSizeOptions]="pageSizeOptions" |
||||
(page)="chagePage($event)" |
||||
> |
||||
|
||||
</mat-paginator> |
||||
|
||||
</div> |
||||
</div> |
||||
@ -1,231 +0,0 @@
|
||||
.header { |
||||
width: 100%; |
||||
padding: 12px 10px; |
||||
// margin-bottom: 10px; |
||||
box-sizing: border-box; |
||||
// border-bottom: 1px solid black; |
||||
.queryBox { |
||||
box-sizing: border-box; |
||||
padding: 5px 25px; |
||||
display: flex; |
||||
flex-direction: row; |
||||
flex-wrap: wrap; |
||||
align-items:center; |
||||
// justify-content:center; |
||||
.queryField { |
||||
margin: 3px 40px; |
||||
input { |
||||
width: 180px; |
||||
height: 22px; |
||||
line-height: 22px; |
||||
border-radius: 3px;} |
||||
} |
||||
|
||||
} //queryBox |
||||
.ordiv{ |
||||
position: relative; |
||||
|
||||
.organizationbox{ |
||||
width:450px; |
||||
height: 200px; |
||||
background: white; |
||||
position: absolute; |
||||
top: 48px; |
||||
left: 77px; |
||||
z-index: 999; |
||||
border: 1px solid grey; |
||||
overflow-y: auto; |
||||
background-color: #fafafa; |
||||
li{ |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
background-color: #fafafa; |
||||
} |
||||
mat-tree-node{ |
||||
cursor: pointer; |
||||
white-space:pre; |
||||
background-color: #fafafa; |
||||
} |
||||
mat-tree-node:hover{ |
||||
background: rgba(225, 225, 225, 0.8); |
||||
li{ |
||||
background: rgba(225, 225, 225, 0.8); |
||||
} |
||||
} |
||||
.closediv{ |
||||
z-index: 100; |
||||
position: absolute; |
||||
right: 0; |
||||
top: 0; |
||||
width: 30px; |
||||
height: 30px; |
||||
cursor: pointer; |
||||
line-height: 30px; |
||||
text-align: center; |
||||
} |
||||
.closediv:hover{ |
||||
background:rgba(225, 225, 225, 0.8); |
||||
} |
||||
} |
||||
|
||||
} |
||||
} |
||||
.body{ |
||||
.buttonbox{ |
||||
padding-left: 50px; |
||||
button{ |
||||
margin:0 10px |
||||
} |
||||
} |
||||
.tablebox{ |
||||
table{ |
||||
width: 100%; |
||||
margin-left: 0%; |
||||
margin-top:15px; |
||||
} |
||||
mat-paginator{ |
||||
width: 100%; |
||||
margin-left: 0%; |
||||
// margin-top: 30px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.mat-header-cell{ |
||||
text-align: center; |
||||
} |
||||
.mat-cell{ |
||||
text-align: center; |
||||
span{ |
||||
color:red; |
||||
margin: 0 3px; |
||||
cursor: pointer; |
||||
} |
||||
span:hover{ |
||||
text-decoration:underline |
||||
} |
||||
.grey{ |
||||
color: grey; |
||||
pointer-events: none; |
||||
} |
||||
} |
||||
|
||||
//完整度 |
||||
.integrityDiv{ |
||||
width: 180px; |
||||
height: 30px; |
||||
background-color: #e2e7ee; |
||||
margin: 0 auto; |
||||
position: relative; |
||||
.integrityNum{ |
||||
position: absolute; |
||||
left: 50%; |
||||
top: 50%; |
||||
transform: translate(-50%, -50%); |
||||
color: black; |
||||
font-weight: 800; |
||||
font-size: 15px; |
||||
cursor: default; |
||||
} |
||||
.integrityColorDiv{ |
||||
height: 100%; |
||||
// background-color: #32cd32; |
||||
} |
||||
.integrityDetails{ |
||||
position: absolute; |
||||
display: none; |
||||
width: 350px; |
||||
height:280px; |
||||
border: 1px solid rgba(0, 0, 0, 0.22); |
||||
background-color: white; |
||||
.integrityDetailsTop{ |
||||
width: 100%; |
||||
height: 23px; |
||||
line-height:23px; |
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.22); |
||||
margin-bottom: 1px; |
||||
font-size: 14px; |
||||
span{ |
||||
display: inline-block; |
||||
text-align: center; |
||||
font-weight: 800; |
||||
margin: 0; |
||||
color: black; |
||||
} |
||||
.span1{ |
||||
width: 25%; |
||||
} |
||||
.span2{ |
||||
width: 60%; |
||||
} |
||||
.span3{ |
||||
width: 15%; |
||||
} |
||||
} |
||||
.integrityDetailsBody{ |
||||
ul{ |
||||
li{ |
||||
width: 100%; |
||||
height: 23px; |
||||
line-height: 23px; |
||||
margin: 3px 0; |
||||
div{ |
||||
float: left; |
||||
font-size: 13px; |
||||
} |
||||
.name{ |
||||
width: 25%; |
||||
height: 100%; |
||||
} |
||||
.colorDiv{ |
||||
width: 60%; |
||||
height: 100%; |
||||
position: relative; |
||||
.colorDivBac{ |
||||
width: 90%; |
||||
height: 100%; |
||||
position: absolute; |
||||
left: 50%; |
||||
top: 50%; |
||||
transform: translate(-50%,-50%); |
||||
background-color: #dfe5ec; |
||||
border-radius: 5px; |
||||
.colorDivCon{ |
||||
border-radius: 5px; |
||||
height: 100%; |
||||
background-color: #2398f1; |
||||
} |
||||
} |
||||
span{ |
||||
position: absolute; |
||||
left: 50%; |
||||
top: 50%; |
||||
transform: translate(-50%,-50%); |
||||
color: black; |
||||
font-weight: 600; |
||||
} |
||||
} |
||||
.number{ |
||||
width: 15%; |
||||
height: 100%; |
||||
} |
||||
} |
||||
} |
||||
|
||||
} |
||||
} |
||||
.bottomposition{ |
||||
top: 2px; |
||||
left: 188px; |
||||
} |
||||
.topposition{ |
||||
top: -252px; |
||||
left: 188px; |
||||
} |
||||
} |
||||
.integrityDiv:hover{ |
||||
.integrityDetails{ |
||||
display: block; |
||||
} |
||||
} |
||||
@ -1,25 +0,0 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { EntryPlanComponent } from './entry-plan.component'; |
||||
|
||||
describe('EntryPlanComponent', () => { |
||||
let component: EntryPlanComponent; |
||||
let fixture: ComponentFixture<EntryPlanComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ EntryPlanComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(EntryPlanComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -1,256 +0,0 @@
|
||||
import { Component, OnInit, ViewChild, Inject } from '@angular/core'; |
||||
import { HttpClient } from '@angular/common/http' |
||||
import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree'; |
||||
import { MatPaginator } from '@angular/material/paginator'; |
||||
import { FlatTreeControl } from '@angular/cdk/tree'; |
||||
import { FormControl } from '@angular/forms'; |
||||
import { Router,ActivatedRoute } from '@angular/router' |
||||
import { PageEvent } from '@angular/material/paginator'; |
||||
import { MatDialogRef, MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog'; |
||||
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; |
||||
import { TreeService } from '../../http-interceptors/tree.service' |
||||
import { ConstantPool } from '@angular/compiler'; |
||||
@Component({ |
||||
selector: 'app-entry-plan', |
||||
templateUrl: './entry-plan.component.html', |
||||
styleUrls: ['./entry-plan.component.scss'] |
||||
}) |
||||
export class EntryPlanComponent implements OnInit { |
||||
|
||||
constructor(private http:HttpClient,private router:Router,private route:ActivatedRoute,private tree: TreeService,public dialog: MatDialog,public snackBar: MatSnackBar) { } |
||||
|
||||
private _transformer = (node, level: number) => { //初始化tree
|
||||
return { |
||||
expandable: !!node.children && node.children.length > 0, |
||||
name: node.name, |
||||
level: level, |
||||
id: node.id, |
||||
parentId: node.parentId, |
||||
children: node.children |
||||
}; |
||||
} |
||||
treeControl = new FlatTreeControl<any>(node => node.level, node => node.expandable); |
||||
treeFlattener = new MatTreeFlattener(this._transformer, node => node.level, node => node.expandable, node => node.children); |
||||
dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener); |
||||
myControl = new FormControl(); |
||||
hasChild = (_: number, node: any) => node.expandable; |
||||
//分页
|
||||
@ViewChild(MatPaginator, {static: true})
|
||||
pageEvent: PageEvent; |
||||
paginator: MatPaginator; |
||||
length:any; //共多少条数据
|
||||
pageSize:any; //每页条数
|
||||
pageSizeOptions: number[] = [10] //设置每页条数
|
||||
PageNumber:any; //第几页
|
||||
|
||||
|
||||
|
||||
displayedColumns: string[] = ['unitname', 'jurisdictionsquadron', 'unittype','plantype', 'passstate','projectlevel','operation']; |
||||
allorganizations:any //所有组织机构
|
||||
allunittype:any //所有单位类型
|
||||
tabledataSource:any //表格数据
|
||||
|
||||
organizationName:any //当前单位组织机构名称
|
||||
preparelevels:any |
||||
integrity(width){ |
||||
let style:any = {} |
||||
style.width = width*10 +'%'; |
||||
if(width < 4){ |
||||
style.background = "#FF4500"; |
||||
} |
||||
if(width >= 4 && width <7){ |
||||
style.background = "#FF8C00"; |
||||
} |
||||
if(width >= 7){ |
||||
style.background = "#32cd32"; |
||||
} |
||||
return style |
||||
} |
||||
integrityDetails(width,zong){ |
||||
let style:any = {} |
||||
style.width = (width/zong)*100 +'%'; |
||||
return style |
||||
} |
||||
ngOnInit(): void { |
||||
this.getunitdata(); |
||||
this.getOrganizations(); |
||||
this.getUnittype(); |
||||
this.getAllPlanInfo(); |
||||
let level = sessionStorage.getItem("level"); |
||||
if(level == "0"){//如果是总队
|
||||
this.preparelevels = [ |
||||
{name:"总队",value:"1"}, |
||||
{name:"支队",value:"2"}, |
||||
{name:"大队",value:"4"}, |
||||
{name:"中队",value:"8"} |
||||
] |
||||
} |
||||
if(level == "1"){//如果是支队
|
||||
this.preparelevels = [ |
||||
{name:"支队",value:"2"}, |
||||
{name:"大队",value:"4"}, |
||||
{name:"中队",value:"8"} |
||||
] |
||||
} |
||||
if(level == "2"){//如果是大队
|
||||
this.preparelevels = [ |
||||
{name:"大队",value:"4"}, |
||||
{name:"中队",value:"8"} |
||||
] |
||||
} |
||||
if(level == "3"){//如果是中队
|
||||
this.preparelevels = [ |
||||
{name:"中队",value:"8"} |
||||
] |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
//得到当前单位信息
|
||||
getunitdata(){ |
||||
this.http.get("/api/Account/Profiles").subscribe( |
||||
(data:any)=>{ |
||||
this.organizationName = data.organizationName |
||||
} |
||||
) |
||||
} |
||||
treedata:any //组织机构树型数据
|
||||
newArr:any = [] |
||||
newallorganizations:any //用于存储在原始数据基础上的每个机构增加children字段
|
||||
//得到当前单位所在组织机构的tree型数据
|
||||
getpresentOrganization(){ |
||||
this.newallorganizations = this.allorganizations |
||||
|
||||
this.newallorganizations.forEach(item => { |
||||
item.children = [] |
||||
this.newallorganizations.forEach(element => { |
||||
if(element.parentId == item.id){ |
||||
item.children.push(element) |
||||
} |
||||
}); |
||||
}); |
||||
this.http.get("/api/Account/Profiles").subscribe( |
||||
(data:any)=>{ |
||||
this.organizationName = data.organizationName |
||||
if(this.organizationName){ |
||||
this.newallorganizations.forEach(item => { |
||||
if(item.name == this.organizationName){ |
||||
this.dataSource.data = [item] |
||||
} |
||||
}); |
||||
}else{ |
||||
this.dataSource.data = this.tree.toTree(this.treedata); |
||||
} |
||||
} |
||||
) |
||||
|
||||
|
||||
} |
||||
//获得所有组织机构
|
||||
getOrganizations(){ |
||||
this.http.get('/api/Organizations').subscribe( |
||||
(data:any)=>{ |
||||
this.allorganizations = data |
||||
this.treedata = this.tree.toTree(data); |
||||
this.getpresentOrganization(); |
||||
} |
||||
) |
||||
} |
||||
//获得所有单位类型
|
||||
getUnittype(){ |
||||
this.http.get('/api/BuildingTypes/Simple').subscribe( |
||||
data=>{ |
||||
this.allunittype = data |
||||
} |
||||
) |
||||
} |
||||
|
||||
//分页事件
|
||||
chagePage(e){ |
||||
this.PageNumber = e.pageIndex+1 |
||||
this.getAllPlanInfo(); |
||||
} |
||||
//辖区中队div是否显示
|
||||
isorganizationbox:boolean = false |
||||
//点击辖区中队树，将选择的辖区中队添加到变量
|
||||
add(node) { |
||||
this.isorganizationbox = false |
||||
this.js = node.name |
||||
this.jsId = node.id |
||||
} |
||||
//打开辖区中队隐藏框
|
||||
openorganizationbox() { |
||||
this.isorganizationbox = true |
||||
} |
||||
//关闭出现的组织机构div
|
||||
closediv(){ |
||||
this.isorganizationbox = false |
||||
} |
||||
|
||||
allPlanInfo:any //存储所有预案信息
|
||||
//获得所有预案信息
|
||||
getAllPlanInfo(){ |
||||
let paramsdata:any = { |
||||
CompanyName: this.companyName || '', |
||||
OrganizationId: this.jsId || '', |
||||
HasChildrenOrganization:this.jscheck || '', |
||||
BuildingTypeId: this.unittype || '', |
||||
PlanType: this.reservePlanType || '', |
||||
AuditStatus: this.toExamine || '', |
||||
PlanLevel: this.preparelevel || '', |
||||
HasChildrenPlanLevel: this.plcheck || '', |
||||
PageNumber: this.PageNumber || '1', |
||||
PageSize: this.pageSizeOptions[0], |
||||
Sort: '' |
||||
} |
||||
this.http.get("/api/Plans",{params:paramsdata}).subscribe((data:any)=>{ |
||||
|
||||
this.length = data.totalCount |
||||
this.allPlanInfo = data |
||||
|
||||
this.tabledataSource = data.items
|
||||
}) |
||||
} |
||||
|
||||
|
||||
//查看预案按钮跳转
|
||||
routerTo(element){ |
||||
// console.log(element)
|
||||
sessionStorage.setItem("companyName",element.company.name) |
||||
window.open(`/planManagement/entryPlandetail?unitId=${element.company.id}&unitTypeId=${element.company.buildingTypes.length == 0 ? null :element.company.buildingTypes[0].id}&operation=true&pagetype=entryplan&unitName=${element.company.name}&orName=${element.company.organizationName}&unitType=${element.company.buildingTypes.length == 0 ? null :element.company.buildingTypes[0].name}&unitAdd=${element.company.address}`); |
||||
} |
||||
//查询
|
||||
onSubmit (value) { |
||||
this.PageNumber = 1 |
||||
this.pageEvent.pageIndex = 0 |
||||
this.getAllPlanInfo(); |
||||
} |
||||
|
||||
companyName:any //单位名称
|
||||
js:any //所选组织机构
|
||||
jsId:any //所选组织机构的id
|
||||
jscheck:boolean //所选组织机构勾选框
|
||||
unittype:any //单位类型
|
||||
reservePlanType:any //预案类型
|
||||
toExamine:any //审核状态
|
||||
preparelevel:any //编制级别
|
||||
plcheck:boolean //编制级别勾选框
|
||||
//重置
|
||||
reset(){ |
||||
this.companyName = '' |
||||
this.js = '' |
||||
this.jsId = '' |
||||
this.jscheck = false |
||||
this.unittype = '' |
||||
this.reservePlanType = '' |
||||
this.toExamine = '' |
||||
this.preparelevel = '' |
||||
this.plcheck = false |
||||
//重新获取初始化列表
|
||||
// console.log(this.pageEvent)
|
||||
this.pageEvent.pageIndex = 0 |
||||
this.PageNumber = 1 |
||||
this.getAllPlanInfo(); |
||||
} |
||||
} |
||||
@ -1,109 +0,0 @@
|
||||
<div class="header"> |
||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm"> |
||||
<div class="queryBox"> |
||||
<div class="queryField"> |
||||
<label style="margin-right: 10px;">单位名称:</label> |
||||
<mat-form-field class="example-full-width"> |
||||
<input matInput placeholder="请输入单位名称" name="companyName" [(ngModel)]="companyName" autocomplete="off"> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
|
||||
<div class="queryField"> |
||||
<label style="margin-right: 10px;">单位类型:</label> |
||||
<mat-form-field> |
||||
<mat-select placeholder='请选择单位类型' [(ngModel)]="unittype" name="unittype"> |
||||
<mat-option *ngFor="let unit of allunittype" [value]="unit.id" > |
||||
{{unit.name}} |
||||
</mat-option> |
||||
</mat-select> |
||||
</mat-form-field> |
||||
</div> |
||||
<div class="queryField"> |
||||
<label style="margin-right: 10px;">预案类型:</label> |
||||
<mat-form-field> |
||||
<mat-select [(ngModel)]="reservePlanType" name="reservePlanType" placeholder='请选择预案类型'> |
||||
<mat-option value="8">卡片预案</mat-option> |
||||
<mat-option value="1">二维预案</mat-option> |
||||
<mat-option value="2">三维预案</mat-option> |
||||
<mat-option value="4">其他预案</mat-option> |
||||
</mat-select> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div class="queryField"> |
||||
<label style="margin-right: 10px;">编制级别:</label> |
||||
<mat-form-field> |
||||
<mat-select [(ngModel)]="preparelevel" name="preparelevel" placeholder='请选择编制级别'> |
||||
<!-- <mat-option value="1">总队</mat-option> |
||||
<mat-option value="2">支队</mat-option> |
||||
<mat-option value="4">大队</mat-option> |
||||
<mat-option value="8">中队</mat-option> --> |
||||
<mat-option *ngFor="let item of preparelevels" [value]="item.value">{{item.name}}</mat-option> |
||||
</mat-select> |
||||
</mat-form-field> |
||||
<mat-checkbox style="margin-left: 6px;" [(ngModel)]="plcheck" name="plcheck">包含下级</mat-checkbox> |
||||
</div> |
||||
|
||||
</div> |
||||
<div style="width: 100%;text-align: center;"> |
||||
<button mat-raised-button color="primary" type="submit">查询</button> |
||||
<button mat-raised-button style="margin-left: 25px;" type="button" (click)="reset()">重置</button> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
<mat-divider></mat-divider> |
||||
<div class="body"> |
||||
<div class="tablebox"> |
||||
<table mat-table [dataSource]="tabledataSource" class="mat-elevation-z8"> |
||||
<ng-container matColumnDef="unitname"> |
||||
<th mat-header-cell *matHeaderCellDef>单位名称</th> |
||||
<td mat-cell *matCellDef="let element">{{element.companyName}}</td> |
||||
</ng-container> |
||||
<ng-container matColumnDef="planname"> |
||||
<th mat-header-cell *matHeaderCellDef>预案名称</th> |
||||
<td mat-cell *matCellDef="let element">{{element.name}}</td> |
||||
</ng-container> |
||||
<ng-container matColumnDef="addpeople"> |
||||
<th mat-header-cell *matHeaderCellDef>添加人</th> |
||||
<td mat-cell *matCellDef="let element">{{element.creatorName}}</td> |
||||
</ng-container> |
||||
<ng-container matColumnDef="addtime"> |
||||
<th mat-header-cell *matHeaderCellDef>添加时间</th> |
||||
<td mat-cell *matCellDef="let element">{{element.creationTime | date:'yyyy-MM-dd'}}</td> |
||||
</ng-container> |
||||
<ng-container matColumnDef="plantype"> |
||||
<th mat-header-cell *matHeaderCellDef>预案类型</th> |
||||
<td mat-cell *matCellDef="let element">{{element.planType | plantype}}</td> |
||||
</ng-container> |
||||
<ng-container matColumnDef="auditStatus"> |
||||
<th mat-header-cell *matHeaderCellDef>审核状态</th> |
||||
<td mat-cell *matCellDef="let element">{{element.auditStatus | auditsatus}}</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="openRange"> |
||||
<th mat-header-cell *matHeaderCellDef>是否公开</th> |
||||
<td mat-cell *matCellDef="let element">{{element.openRange}}</td> |
||||
</ng-container> |
||||
<ng-container matColumnDef="projectlevel"> |
||||
<th mat-header-cell *matHeaderCellDef>编制级别</th> |
||||
<td mat-cell *matCellDef="let element">{{element.planLevel | planlevel}}</td> |
||||
</ng-container> |
||||
<ng-container matColumnDef="operation"> |
||||
<th mat-header-cell *matHeaderCellDef>操作</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
<span (click)="routerTo(element)" style="color: blue;cursor: pointer;">查看预案</span> |
||||
</td> |
||||
</ng-container> |
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> |
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> |
||||
</table> |
||||
<mat-paginator [length]="length" |
||||
[pageSize]="pageSize" |
||||
[pageSizeOptions]="pageSizeOptions" |
||||
(page)="chagePage($event)"> |
||||
</mat-paginator> |
||||
|
||||
</div> |
||||
</div> |
||||
|
||||
@ -1,84 +0,0 @@
|
||||
.header { |
||||
width: 100%; |
||||
padding: 12px 10px; |
||||
// margin-bottom: 10px; |
||||
box-sizing: border-box; |
||||
// border-bottom: 1px solid black; |
||||
.queryBox { |
||||
box-sizing: border-box; |
||||
padding: 5px 25px; |
||||
display: flex; |
||||
flex-direction: row; |
||||
flex-wrap: wrap; |
||||
align-items:center; |
||||
// justify-content:center; |
||||
.queryField { |
||||
margin: 3px 40px; |
||||
input { |
||||
width: 180px; |
||||
height: 22px; |
||||
line-height: 22px; |
||||
border-radius: 3px;} |
||||
} |
||||
|
||||
} //queryBox |
||||
.ordiv{ |
||||
position: relative; |
||||
|
||||
.organizationbox{ |
||||
width:450px; |
||||
height: 200px; |
||||
background: white; |
||||
position: absolute; |
||||
top: 48px; |
||||
left: 77px; |
||||
z-index: 999; |
||||
border: 1px solid grey; |
||||
overflow-y: auto; |
||||
li{ |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
} |
||||
mat-tree-node{ |
||||
cursor: pointer; |
||||
white-space:pre; |
||||
} |
||||
mat-tree-node:hover{ |
||||
background: rgba(225, 225, 225, 0.8); |
||||
} |
||||
.closediv{ |
||||
z-index: 100; |
||||
position: absolute; |
||||
right: 0; |
||||
top: 0; |
||||
width: 30px; |
||||
height: 30px; |
||||
cursor: pointer; |
||||
line-height: 30px; |
||||
text-align: center; |
||||
} |
||||
.closediv:hover{ |
||||
background:rgba(225, 225, 225, 0.8); |
||||
} |
||||
} |
||||
|
||||
} |
||||
} |
||||
.body{ |
||||
.buttonbox{ |
||||
padding-left: 50px; |
||||
button{ |
||||
margin:0 10px |
||||
} |
||||
} |
||||
.tablebox{ |
||||
table{ |
||||
width: 100%; |
||||
margin-top: 15px; |
||||
} |
||||
mat-paginator{ |
||||
width: 100%; |
||||
} |
||||
} |
||||
} |
||||
@ -1,25 +0,0 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { OpenPlanComponent } from './open-plan.component'; |
||||
|
||||
describe('OpenPlanComponent', () => { |
||||
let component: OpenPlanComponent; |
||||
let fixture: ComponentFixture<OpenPlanComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ OpenPlanComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(OpenPlanComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -1,223 +0,0 @@
|
||||
import { Component, OnInit, ViewChild, Inject } from '@angular/core'; |
||||
import { HttpClient } from '@angular/common/http' |
||||
import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree'; |
||||
import { MatPaginator } from '@angular/material/paginator'; |
||||
import { FlatTreeControl } from '@angular/cdk/tree'; |
||||
import { FormControl } from '@angular/forms'; |
||||
import { Router,ActivatedRoute } from '@angular/router' |
||||
import { PageEvent } from '@angular/material/paginator'; |
||||
import { MatDialogRef, MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog'; |
||||
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; |
||||
import { TreeService } from '../../http-interceptors/tree.service' |
||||
@Component({ |
||||
selector: 'app-open-plan', |
||||
templateUrl: './open-plan.component.html', |
||||
styleUrls: ['./open-plan.component.scss'] |
||||
}) |
||||
export class OpenPlanComponent implements OnInit { |
||||
|
||||
constructor(private http:HttpClient,private router:Router,private route:ActivatedRoute,private tree: TreeService,public dialog: MatDialog,public snackBar: MatSnackBar) { } |
||||
|
||||
private _transformer = (node, level: number) => { //初始化tree
|
||||
return { |
||||
expandable: !!node.children && node.children.length > 0, |
||||
name: node.name, |
||||
level: level, |
||||
id: node.id, |
||||
parentId: node.parentId, |
||||
children: node.children |
||||
}; |
||||
} |
||||
treeControl = new FlatTreeControl<any>(node => node.level, node => node.expandable); |
||||
treeFlattener = new MatTreeFlattener(this._transformer, node => node.level, node => node.expandable, node => node.children); |
||||
dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener); |
||||
myControl = new FormControl(); |
||||
hasChild = (_: number, node: any) => node.expandable; |
||||
//分页
|
||||
@ViewChild(MatPaginator, {static: true})
|
||||
pageEvent: PageEvent; |
||||
paginator: MatPaginator; |
||||
length:any; //共多少条数据
|
||||
pageSize:any; //每页条数
|
||||
pageSizeOptions: number[] = [10] //设置每页条数
|
||||
PageNumber:any; //第几页
|
||||
|
||||
displayedColumns: string[] = ['unitname', 'planname', 'addpeople','addtime','plantype','auditStatus','openRange','projectlevel','operation']; |
||||
|
||||
allorganizations:any //所有组织机构
|
||||
allunittype:any //所有单位类型
|
||||
tabledataSource:any //表格数据
|
||||
preparelevels:any //编制级别
|
||||
ngOnInit(): void { |
||||
this.getunitdata(); |
||||
this.getOrganizations(); |
||||
this.getUnittype(); |
||||
this.getAllPlanInfo(); //得到所有单位
|
||||
let level = sessionStorage.getItem("level"); |
||||
if(level == "0"){//如果是总队
|
||||
this.preparelevels = [ |
||||
{name:"总队",value:"1"}, |
||||
{name:"支队",value:"2"}, |
||||
{name:"大队",value:"4"}, |
||||
{name:"中队",value:"8"} |
||||
] |
||||
} |
||||
if(level == "1"){//如果是支队
|
||||
this.preparelevels = [ |
||||
{name:"支队",value:"2"}, |
||||
{name:"大队",value:"4"}, |
||||
{name:"中队",value:"8"} |
||||
] |
||||
} |
||||
if(level == "2"){//如果是大队
|
||||
this.preparelevels = [ |
||||
{name:"大队",value:"4"}, |
||||
{name:"中队",value:"8"} |
||||
] |
||||
} |
||||
if(level == "3"){//如果是中队
|
||||
this.preparelevels = [ |
||||
{name:"中队",value:"8"} |
||||
] |
||||
} |
||||
} |
||||
|
||||
|
||||
allPlanInfo:any //存储所有预案信息
|
||||
//获得所有预案信息
|
||||
getAllPlanInfo(){ |
||||
let paramsdata:any = { |
||||
CompanyName: this.companyName || '', |
||||
OrganizationId: '', |
||||
HasChildrenOrganization:'', |
||||
BuildingTypeId: this.unittype || '', |
||||
PlanType: this.reservePlanType || '', |
||||
AuditStatus:'', //审核状态
|
||||
PlanLevel: this.preparelevel || '', |
||||
HasChildrenPlanLevel: this.plcheck || '', |
||||
PageNumber: this.PageNumber || '1', |
||||
PageSize: this.pageSizeOptions[0], |
||||
Sort: '' |
||||
} |
||||
this.http.get("/api/PublicPlans",{params:paramsdata}).subscribe((data:any)=>{ |
||||
// console.log(111,data)
|
||||
this.length = data.totalCount |
||||
this.allPlanInfo = data |
||||
this.tabledataSource = data.items
|
||||
}) |
||||
} |
||||
//得到当前单位信息
|
||||
getunitdata(){ |
||||
this.http.get("/api/Account/Profiles").subscribe( |
||||
(data:any)=>{ |
||||
this.organizationName = data.organizationName |
||||
} |
||||
) |
||||
} |
||||
organizationName:any //当前单位组织机构名称
|
||||
treedata:any //组织机构树型数据
|
||||
newArr:any = [] |
||||
newallorganizations:any //用于存储在原始数据基础上的每个机构增加children字段
|
||||
//得到当前单位所在组织机构的tree型数据
|
||||
getpresentOrganization(){ |
||||
this.newallorganizations = this.allorganizations |
||||
this.newallorganizations.forEach(item => { |
||||
item.children = [] |
||||
this.newallorganizations.forEach(element => { |
||||
if(element.parentId == item.id){ |
||||
item.children.push(element) |
||||
} |
||||
}); |
||||
}); |
||||
// console.log(666,this.organizationName)
|
||||
if(this.organizationName){ |
||||
this.newallorganizations.forEach(item => { |
||||
if(item.name == this.organizationName){ |
||||
this.dataSource.data = [item] |
||||
} |
||||
}); |
||||
}else{ |
||||
this.dataSource.data = this.tree.toTree(this.treedata); |
||||
} |
||||
|
||||
} |
||||
//获得所有组织机构
|
||||
getOrganizations(){ |
||||
this.http.get('/api/Organizations').subscribe( |
||||
(data:any)=>{ |
||||
this.allorganizations = data |
||||
this.treedata = this.tree.toTree(data); |
||||
this.getpresentOrganization(); |
||||
} |
||||
) |
||||
} |
||||
|
||||
//获得所有单位类型
|
||||
getUnittype(){ |
||||
this.http.get('/api/BuildingTypes/Simple').subscribe( |
||||
data=>{ |
||||
this.allunittype = data |
||||
} |
||||
) |
||||
} |
||||
//跳转查看预案页面
|
||||
routerTo(element){ |
||||
sessionStorage.setItem("companyName",element.companyName) |
||||
// window.open(`/planManagement/entryPlandetail?unitId=${element.company.id}&unitTypeId=${element.company.buildingTypes.length == 0 ? null :element.company.buildingTypes[0].id}&operation=false&pagetype=openplan&unitName=${element.company.name}&orName=${element.company.organizationName}&unitType=${element.company.buildingTypes.length == 0 ? null :element.company.buildingTypes[0].name}&unitAdd=${element.company.address}`);
|
||||
window.open(`/planAudit/planpass?id=${element.companyId}&companyName=${element.companyName}&auditPlanId=${element.id}&auditStatus=${element.auditStatus}&type=6`); |
||||
|
||||
} |
||||
//分页事件
|
||||
chagePage(e){ |
||||
this.PageNumber = e.pageIndex+1 |
||||
this.getAllPlanInfo(); |
||||
}
|
||||
//辖区中队div是否显示
|
||||
isorganizationbox:boolean = false |
||||
//点击辖区中队树，将选择的辖区中队添加到变量
|
||||
add(node) { |
||||
this.isorganizationbox = false |
||||
this.js = node.name |
||||
this.jsId = node.id |
||||
} |
||||
//关闭辖区中队隐藏框
|
||||
closeorganizationbox() { |
||||
this.isorganizationbox = false |
||||
} |
||||
//打开辖区中队隐藏框
|
||||
openorganizationbox() { |
||||
this.isorganizationbox = true |
||||
} |
||||
//关闭出现的组织机构div
|
||||
closediv(){ |
||||
this.isorganizationbox = false |
||||
} |
||||
//查询
|
||||
onSubmit (e) { |
||||
this.getAllPlanInfo() |
||||
} |
||||
companyName:any //单位名称
|
||||
js:any //所选组织机构
|
||||
jsId:any //所选组织机构的id
|
||||
// jscheck:boolean //所选组织机构勾选框
|
||||
unittype:any //单位类型
|
||||
reservePlanType:any //预案类型
|
||||
preparelevel:any //编制级别
|
||||
plcheck:boolean //编制级别勾选框
|
||||
//重置
|
||||
reset(){ |
||||
this.companyName = '' |
||||
// this.js = ''
|
||||
// this.jsId = ''
|
||||
// this.jscheck = false
|
||||
this.unittype = '' |
||||
this.reservePlanType = '' |
||||
this.preparelevel = '' |
||||
this.plcheck = false |
||||
//重新获取初始化列表
|
||||
this.pageEvent.pageIndex = 0 |
||||
this.PageNumber = 1 |
||||
this.getAllPlanInfo(); |
||||
|
||||
} |
||||
} |
||||
@ -1,142 +0,0 @@
|
||||
<div class="header"> |
||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm"> |
||||
<div class="queryBox"> |
||||
|
||||
<div class="queryField"> |
||||
<label style="margin-right: 10px;">单位名称:</label> |
||||
<mat-form-field class="example-full-width"> |
||||
<input matInput placeholder="请输入单位名称" name="companyName" [(ngModel)]="companyName" autocomplete="off"> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div class="queryField ordiv"> |
||||
<label style="margin-right: 10px;">辖区中队:</label> |
||||
<mat-form-field class="example-full-width"> |
||||
<input readonly matInput placeholder="请选择辖区中队" autocomplete="off" [(ngModel)]="js" name="js" (focus)="openorganizationbox()"> |
||||
</mat-form-field> |
||||
<mat-checkbox style="margin-left: 6px;" [(ngModel)]="jscheck" name="jscheck">包含下级</mat-checkbox> |
||||
<div class="organizationbox" *ngIf="isorganizationbox"> |
||||
<div (click)="closediv()" class="closediv"><mat-icon>clear</mat-icon></div> |
||||
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl"> |
||||
<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding (click)='add(node)' class="organizationlist"> |
||||
<button type="button" mat-icon-button disabled ></button> |
||||
<li>{{node.name}}</li> |
||||
</mat-tree-node> |
||||
<mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding (click)='add(node)' class="organizationlist"> |
||||
<button |
||||
type="button" |
||||
mat-icon-button |
||||
matTreeNodeToggle |
||||
[attr.aria-label]="'toggle ' + node.name"> |
||||
<mat-icon class="mat-icon-rtl-mirror"> |
||||
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}} |
||||
</mat-icon> |
||||
</button> |
||||
<li>{{node.name}}</li> |
||||
</mat-tree-node> |
||||
</mat-tree> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="queryField"> |
||||
<label style="margin-right: 10px;">单位类型:</label> |
||||
<mat-form-field> |
||||
<mat-select placeholder='请选择单位类型' [(ngModel)]="unittype" name="unittype"> |
||||
<mat-option *ngFor="let unit of allunittype" [value]="unit.id" > |
||||
{{unit.name}} |
||||
</mat-option> |
||||
</mat-select> |
||||
</mat-form-field> |
||||
</div> |
||||
<div class="queryField"> |
||||
<label style="margin-right: 10px;">预案类型:</label> |
||||
<mat-form-field> |
||||
<mat-select [(ngModel)]="reservePlanType" name="reservePlanType" placeholder='请选择预案类型'> |
||||
<mat-option value="8">卡片预案</mat-option> |
||||
<mat-option value="1">二维预案</mat-option> |
||||
<mat-option value="2">三维预案</mat-option> |
||||
<mat-option value="4">其他预案</mat-option> |
||||
</mat-select> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div class="queryField"> |
||||
<label style="margin-right: 10px;">编制级别:</label> |
||||
<mat-form-field> |
||||
<mat-select [(ngModel)]="preparelevel" name="preparelevel" placeholder='请选择编制级别'> |
||||
<!-- <mat-option value="1">总队</mat-option> |
||||
<mat-option value="2">支队</mat-option> |
||||
<mat-option value="4">大队</mat-option> |
||||
<mat-option value="8">中队</mat-option> --> |
||||
<mat-option *ngFor="let item of preparelevels" [value]="item.value">{{item.name}}</mat-option> |
||||
</mat-select> |
||||
</mat-form-field> |
||||
<mat-checkbox style="margin-left: 6px;" [(ngModel)]="plcheck" name="plcheck">包含下级</mat-checkbox> |
||||
</div> |
||||
|
||||
</div> |
||||
<div style="width: 100%;text-align: center;"> |
||||
<button mat-raised-button color="primary" type="submit">查询</button> |
||||
<button mat-raised-button style="margin-left: 25px;" type="button" (click)="reset()">重置</button> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
<mat-divider></mat-divider> |
||||
<div class="body"> |
||||
<div class="tablebox"> |
||||
|
||||
<table mat-table [dataSource]="tabledataSource" class="mat-elevation-z8"> |
||||
<ng-container matColumnDef="unitname"> |
||||
<th mat-header-cell *matHeaderCellDef>单位名称</th> |
||||
<td mat-cell *matCellDef="let element">{{element.companyName}}</td> |
||||
</ng-container> |
||||
<ng-container matColumnDef="planname"> |
||||
<th mat-header-cell *matHeaderCellDef>预案名称</th> |
||||
<td mat-cell *matCellDef="let element">{{element.name}}</td> |
||||
</ng-container> |
||||
<ng-container matColumnDef="addpeople"> |
||||
<th mat-header-cell *matHeaderCellDef>添加人</th> |
||||
<td mat-cell *matCellDef="let element">{{element.creatorName}}</td> |
||||
</ng-container> |
||||
<ng-container matColumnDef="addtime"> |
||||
<th mat-header-cell *matHeaderCellDef>添加时间</th> |
||||
<td mat-cell *matCellDef="let element">{{element.creationTime | date:'yyyy-MM-dd'}}</td> |
||||
</ng-container> |
||||
<ng-container matColumnDef="plantype"> |
||||
<th mat-header-cell *matHeaderCellDef>预案类型</th> |
||||
<td mat-cell *matCellDef="let element">{{element.planType | plantype}}</td> |
||||
</ng-container> |
||||
<ng-container matColumnDef="auditStatus"> |
||||
<th mat-header-cell *matHeaderCellDef>审核状态</th> |
||||
<td mat-cell *matCellDef="let element">{{element.auditStatus | auditsatus}}</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="openRange"> |
||||
<th mat-header-cell *matHeaderCellDef>是否公开</th> |
||||
<td mat-cell *matCellDef="let element">{{element.openRange}}</td> |
||||
</ng-container> |
||||
<ng-container matColumnDef="projectlevel"> |
||||
<th mat-header-cell *matHeaderCellDef>编制级别</th> |
||||
<td mat-cell *matCellDef="let element">{{element.planLevel | planlevel}}</td> |
||||
</ng-container> |
||||
<ng-container matColumnDef="operation"> |
||||
<th mat-header-cell *matHeaderCellDef>操作</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
<span (click)="routerTo(element)" style="color: blue;cursor: pointer;">查看预案</span> |
||||
</td> |
||||
</ng-container> |
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> |
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> |
||||
</table> |
||||
<mat-paginator |
||||
[length]="length" |
||||
[pageSize]="pageSize" |
||||
[pageSizeOptions]="pageSizeOptions" |
||||
(page)="chagePage($event)"> |
||||
</mat-paginator> |
||||
|
||||
</div> |
||||
</div> |
||||
|
||||
<!-- |
||||
<button (click)="routerTo('222')">跳转查看预案页面</button> --> |
||||
@ -1,92 +0,0 @@
|
||||
.header { |
||||
width: 100%; |
||||
padding: 12px 10px; |
||||
box-sizing: border-box; |
||||
.queryBox { |
||||
box-sizing: border-box; |
||||
padding: 5px 25px; |
||||
// margin-left: 50px; |
||||
display: flex; |
||||
flex-direction: row; |
||||
flex-wrap: wrap; |
||||
align-items:center; |
||||
// justify-content:center; |
||||
.queryField { |
||||
margin: 3px 40px; |
||||
input { |
||||
width: 180px; |
||||
height: 22px; |
||||
line-height: 22px; |
||||
border-radius: 3px;} |
||||
} |
||||
|
||||
} //queryBox |
||||
.ordiv{ |
||||
position: relative; |
||||
.organizationbox{ |
||||
width:450px; |
||||
height: 200px; |
||||
background: white; |
||||
position: absolute; |
||||
top: 48px; |
||||
left: 77px; |
||||
z-index: 999; |
||||
border: 1px solid grey; |
||||
overflow-y: auto; |
||||
li{ |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
} |
||||
mat-tree-node{ |
||||
cursor: pointer; |
||||
white-space:pre; |
||||
} |
||||
mat-tree-node:hover{ |
||||
background: rgba(225, 225, 225, 0.8); |
||||
} |
||||
.closediv{ |
||||
z-index: 100; |
||||
position: absolute; |
||||
right: 0; |
||||
top: 0; |
||||
width: 30px; |
||||
height: 30px; |
||||
cursor: pointer; |
||||
line-height: 30px; |
||||
text-align: center; |
||||
} |
||||
.closediv:hover{ |
||||
background:rgba(225, 225, 225, 0.8); |
||||
} |
||||
} |
||||
|
||||
} |
||||
} |
||||
.body{ |
||||
.buttonbox{ |
||||
padding-left: 50px; |
||||
button{ |
||||
margin:0 10px |
||||
} |
||||
} |
||||
.tablebox{ |
||||
table{ |
||||
width: 100%; |
||||
// margin-left: 2%; |
||||
margin-top: 15px; |
||||
} |
||||
mat-paginator{ |
||||
width:100%; |
||||
// margin-left: 2%; |
||||
// margin-top: 30px; |
||||
} |
||||
} |
||||
} |
||||
.mat-header-cell{ |
||||
text-align: center; |
||||
} |
||||
.mat-cell{ |
||||
text-align: center; |
||||
|
||||
} |
||||
@ -1,25 +0,0 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { PassPlanComponent } from './pass-plan.component'; |
||||
|
||||
describe('PassPlanComponent', () => { |
||||
let component: PassPlanComponent; |
||||
let fixture: ComponentFixture<PassPlanComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ PassPlanComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(PassPlanComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -1,232 +0,0 @@
|
||||
import { Component, OnInit, ViewChild, Inject } from '@angular/core'; |
||||
import { HttpClient } from '@angular/common/http' |
||||
import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree'; |
||||
import { MatPaginator } from '@angular/material/paginator'; |
||||
import { FlatTreeControl } from '@angular/cdk/tree'; |
||||
import { FormControl } from '@angular/forms'; |
||||
import { Router,ActivatedRoute } from '@angular/router' |
||||
import { PageEvent } from '@angular/material/paginator'; |
||||
import { MatDialogRef, MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog'; |
||||
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; |
||||
import { TreeService } from '../../http-interceptors/tree.service' |
||||
@Component({ |
||||
selector: 'app-pass-plan', |
||||
templateUrl: './pass-plan.component.html', |
||||
styleUrls: ['./pass-plan.component.scss'] |
||||
}) |
||||
export class PassPlanComponent implements OnInit { |
||||
|
||||
constructor(private http:HttpClient,private router:Router,private route:ActivatedRoute,private tree: TreeService,public dialog: MatDialog,public snackBar: MatSnackBar) { } |
||||
|
||||
private _transformer = (node, level: number) => { //初始化tree
|
||||
return { |
||||
expandable: !!node.children && node.children.length > 0, |
||||
name: node.name, |
||||
level: level, |
||||
id: node.id, |
||||
parentId: node.parentId, |
||||
children: node.children |
||||
}; |
||||
} |
||||
treeControl = new FlatTreeControl<any>(node => node.level, node => node.expandable); |
||||
treeFlattener = new MatTreeFlattener(this._transformer, node => node.level, node => node.expandable, node => node.children); |
||||
dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener); |
||||
myControl = new FormControl(); |
||||
hasChild = (_: number, node: any) => node.expandable; |
||||
//分页
|
||||
@ViewChild(MatPaginator, {static: true})
|
||||
pageEvent: PageEvent; |
||||
paginator: MatPaginator; |
||||
length:any; //共多少条数据
|
||||
pageSize:any; //每页条数
|
||||
pageSizeOptions: number[] = [10] //设置每页条数
|
||||
PageNumber:any; //第几页
|
||||
|
||||
displayedColumns: string[] = ['unitname', 'planname', 'addpeople','addtime','plantype','auditStatus','openRange','projectlevel','operation']; |
||||
allorganizations:any //所有组织机构
|
||||
allunittype:any //所有单位类型
|
||||
tabledataSource:any //表格数据
|
||||
|
||||
preparelevels:any |
||||
ngOnInit(): void { |
||||
this.getunitdata(); |
||||
this.getOrganizations(); |
||||
this.getUnittype(); |
||||
this.getAllPlanInfo(); |
||||
let level = sessionStorage.getItem("level"); |
||||
if(level == "0"){//如果是总队
|
||||
this.preparelevels = [ |
||||
{name:"总队",value:"1"}, |
||||
{name:"支队",value:"2"}, |
||||
{name:"大队",value:"4"}, |
||||
{name:"中队",value:"8"} |
||||
] |
||||
} |
||||
if(level == "1"){//如果是支队
|
||||
this.preparelevels = [ |
||||
{name:"支队",value:"2"}, |
||||
{name:"大队",value:"4"}, |
||||
{name:"中队",value:"8"} |
||||
] |
||||
} |
||||
if(level == "2"){//如果是大队
|
||||
this.preparelevels = [ |
||||
{name:"大队",value:"4"}, |
||||
{name:"中队",value:"8"} |
||||
] |
||||
} |
||||
if(level == "3"){//如果是中队
|
||||
this.preparelevels = [ |
||||
{name:"中队",value:"8"} |
||||
] |
||||
} |
||||
} |
||||
|
||||
allPlanInfo:any //存储所有预案信息
|
||||
//获得所有预案信息
|
||||
getAllPlanInfo(){ |
||||
let paramsdata:any = { |
||||
CompanyName: this.companyName || '', |
||||
OrganizationId: this.jsId || '', |
||||
HasChildrenOrganization:this.jscheck || '', |
||||
BuildingTypeId: this.unittype || '', |
||||
PlanType: this.reservePlanType || '', |
||||
AuditStatus:'', //审核状态
|
||||
PlanLevel: this.preparelevel || '', |
||||
HasChildrenPlanLevel: this.plcheck || '', |
||||
PageNumber: this.PageNumber || '1', |
||||
PageSize: this.pageSizeOptions[0], |
||||
Sort: '' |
||||
} |
||||
this.http.get("/api/ApprovedPlans",{params:paramsdata}).subscribe((data:any)=>{ |
||||
this.length = data.totalCount |
||||
this.allPlanInfo = data |
||||
this.tabledataSource = data.items
|
||||
}) |
||||
} |
||||
|
||||
|
||||
|
||||
|
||||
//得到当前单位信息
|
||||
getunitdata(){ |
||||
this.http.get("/api/Account/Profiles").subscribe( |
||||
(data:any)=>{ |
||||
this.organizationName = data.organizationName |
||||
} |
||||
) |
||||
} |
||||
organizationName:any //当前单位组织机构名称
|
||||
treedata:any //组织机构树型数据
|
||||
newArr:any = [] |
||||
newallorganizations:any //用于存储在原始数据基础上的每个机构增加children字段
|
||||
//得到当前单位所在组织机构的tree型数据
|
||||
getpresentOrganization(){ |
||||
this.newallorganizations = this.allorganizations |
||||
this.newallorganizations.forEach(item => { |
||||
item.children = [] |
||||
this.newallorganizations.forEach(element => { |
||||
if(element.parentId == item.id){ |
||||
item.children.push(element) |
||||
} |
||||
}); |
||||
}); |
||||
this.http.get("/api/Account/Profiles").subscribe( |
||||
(data:any)=>{ |
||||
this.organizationName = data.organizationName |
||||
if(this.organizationName){ |
||||
this.newallorganizations.forEach(item => { |
||||
if(item.name == this.organizationName){ |
||||
this.dataSource.data = [item] |
||||
} |
||||
}); |
||||
}else{ |
||||
this.dataSource.data = this.tree.toTree(this.treedata); |
||||
} |
||||
} |
||||
) |
||||
|
||||
} |
||||
//获得所有组织机构
|
||||
getOrganizations(){ |
||||
this.http.get('/api/Organizations').subscribe( |
||||
(data:any)=>{ |
||||
this.allorganizations = data |
||||
this.treedata = this.tree.toTree(data); |
||||
this.getpresentOrganization(); |
||||
} |
||||
) |
||||
} |
||||
|
||||
//获得所有单位类型
|
||||
getUnittype(){ |
||||
this.http.get('/api/BuildingTypes/Simple').subscribe( |
||||
data=>{ |
||||
this.allunittype = data |
||||
} |
||||
) |
||||
} |
||||
//跳转查看预案页面
|
||||
routerTo(element){ |
||||
sessionStorage.setItem("companyName",element.companyName) |
||||
// window.open(`/planManagement/entryPlandetail?unitId=${element.company.id}&unitTypeId=${element.company.buildingTypes.length == 0 ? null :element.company.buildingTypes[0].id}&operation=false&pagetype=passplan&unitName=${element.company.name}&orName=${element.company.organizationName}&unitType=${element.company.buildingTypes.length == 0 ? null :element.company.buildingTypes[0].name}&unitAdd=${element.company.address}`);
|
||||
window.open(`/planAudit/planpass?id=${element.companyId}&companyName=${element.companyName}&auditPlanId=${element.id}&auditStatus=${element.auditStatus}&type=6`); |
||||
|
||||
} |
||||
//分页事件
|
||||
chagePage(e){ |
||||
this.PageNumber = e.pageIndex+1 |
||||
this.getAllPlanInfo(); |
||||
} |
||||
|
||||
//辖区中队div是否显示
|
||||
isorganizationbox:boolean = false |
||||
//点击辖区中队树，将选择的辖区中队添加到变量
|
||||
add(node) { |
||||
this.isorganizationbox = false |
||||
this.js = node.name |
||||
this.jsId = node.id |
||||
} |
||||
//关闭辖区中队隐藏框
|
||||
closeorganizationbox() { |
||||
this.isorganizationbox = false |
||||
} |
||||
//打开辖区中队隐藏框
|
||||
openorganizationbox() { |
||||
this.isorganizationbox = true |
||||
} |
||||
//关闭出现的组织机构div
|
||||
closediv(){ |
||||
this.isorganizationbox = false |
||||
} |
||||
//查询
|
||||
onSubmit (e) { |
||||
this.PageNumber = 1 |
||||
this.pageEvent.pageIndex = 0 |
||||
this.getAllPlanInfo(); |
||||
} |
||||
companyName:any //单位名称
|
||||
js:any //所选组织机构
|
||||
jsId:any //所选组织机构的id
|
||||
jscheck:boolean //所选组织机构勾选框
|
||||
unittype:any //单位类型
|
||||
reservePlanType:any //预案类型
|
||||
preparelevel:any //编制级别
|
||||
plcheck:boolean //编制级别勾选框
|
||||
//重置
|
||||
reset(){ |
||||
this.companyName = '' |
||||
this.js = '' |
||||
this.jsId = '' |
||||
this.jscheck = false |
||||
this.unittype = '' |
||||
this.reservePlanType = '' |
||||
this.preparelevel = '' |
||||
this.plcheck = false |
||||
//重新获取初始化列表
|
||||
this.pageEvent.pageIndex = 0 |
||||
this.PageNumber = 1 |
||||
this.getAllPlanInfo(); |
||||
|
||||
} |
||||
} |
||||
@ -1,21 +0,0 @@
|
||||
import { NgModule } from '@angular/core'; |
||||
import { Routes, RouterModule } from '@angular/router'; |
||||
import {EntryPlanComponent} from './entry-plan/entry-plan.component' |
||||
import { OpenPlanComponent } from './open-plan/open-plan.component'; |
||||
import { PassPlanComponent } from './pass-plan/pass-plan.component'; |
||||
import { EntryPlanLookComponent } from './entry-plan-look/entry-plan-look.component'; |
||||
import { WebLookComponent } from './web-look/web-look.component'; |
||||
|
||||
const routes: Routes = [ |
||||
{ path: 'entryPlan', component: EntryPlanComponent}, |
||||
{ path: 'openPlan', component: OpenPlanComponent}, |
||||
{ path: 'passPlan', component: PassPlanComponent}, |
||||
{ path: 'entryPlandetail', component: EntryPlanLookComponent}, |
||||
{ path: 'webLook', component: WebLookComponent} |
||||
]; |
||||
|
||||
@NgModule({ |
||||
imports: [RouterModule.forChild(routes)], |
||||
exports: [RouterModule] |
||||
}) |
||||
export class PlanManagementRoutingModule { } |
||||
@ -1,107 +0,0 @@
|
||||
import { NgModule } from '@angular/core'; |
||||
import { CommonModule } from '@angular/common'; |
||||
import { PlanManagementRoutingModule } from './plan-management-routing.module'; |
||||
import { ReactiveFormsModule, FormsModule } from '@angular/forms'; |
||||
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 {MatIconModule} from '@angular/material/icon'; |
||||
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 {MatSidenavModule} from '@angular/material/sidenav'; |
||||
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'; |
||||
|
||||
import { EntryPlanComponent } from './entry-plan/entry-plan.component'; |
||||
import { PassPlanComponent } from './pass-plan/pass-plan.component'; |
||||
import { OpenPlanComponent } from './open-plan/open-plan.component'; |
||||
import { EntryPlanLookComponent, AddPlanone, DownloadFile, AuditResult, ChangeName } from './entry-plan-look/entry-plan-look.component'; |
||||
import { PlanType, AuditSatus, PlanLevel } from '../pipes/boolean.pipe'; |
||||
import { WebLookComponent } from './web-look/web-look.component'; |
||||
|
||||
|
||||
|
||||
@NgModule({ |
||||
declarations: [EntryPlanComponent, PassPlanComponent, OpenPlanComponent, EntryPlanLookComponent,AddPlanone,PlanType,AuditSatus,PlanLevel,DownloadFile,AuditResult,ChangeName, WebLookComponent], |
||||
imports: [ |
||||
CommonModule, |
||||
PlanManagementRoutingModule, |
||||
ReactiveFormsModule, |
||||
FormsModule, |
||||
A11yModule, |
||||
DragDropModule, |
||||
PortalModule, |
||||
ScrollingModule, |
||||
CdkStepperModule, |
||||
CdkTableModule, |
||||
CdkTreeModule, |
||||
MatAutocompleteModule, |
||||
MatBadgeModule, |
||||
MatBottomSheetModule, |
||||
MatButtonModule, |
||||
MatButtonToggleModule, |
||||
MatCardModule, |
||||
MatCheckboxModule, |
||||
MatChipsModule, |
||||
MatStepperModule, |
||||
MatDatepickerModule, |
||||
MatDialogModule, |
||||
MatDividerModule, |
||||
MatExpansionModule, |
||||
MatGridListModule, |
||||
MatIconModule, |
||||
MatInputModule, |
||||
MatListModule, |
||||
MatMenuModule, |
||||
MatNativeDateModule, |
||||
MatRippleModule, |
||||
MatPaginatorModule, |
||||
MatProgressBarModule, |
||||
MatProgressSpinnerModule, |
||||
MatRadioModule, |
||||
MatSelectModule, |
||||
MatSidenavModule, |
||||
MatSliderModule, |
||||
MatSlideToggleModule, |
||||
MatSnackBarModule, |
||||
MatSortModule, |
||||
MatTableModule, |
||||
MatTabsModule, |
||||
MatToolbarModule, |
||||
MatTooltipModule, |
||||
MatTreeModule |
||||
] |
||||
}) |
||||
export class PlanManagementModule { } |
||||
@ -1,4 +0,0 @@
|
||||
|
||||
<div style="width: 100%; height: 100%;"> |
||||
<iframe [src]='thirdPartyURL' frameborder="0" width="100%" height="100%" id="iframe"></iframe> |
||||
</div> |
||||
@ -1,25 +0,0 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { WebLookComponent } from './web-look.component'; |
||||
|
||||
describe('WebLookComponent', () => { |
||||
let component: WebLookComponent; |
||||
let fixture: ComponentFixture<WebLookComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ WebLookComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(WebLookComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -1,19 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
import { Router,ActivatedRoute } from '@angular/router' |
||||
import { DomSanitizer } from '@angular/platform-browser'; |
||||
|
||||
@Component({ |
||||
selector: 'app-web-look', |
||||
templateUrl: './web-look.component.html', |
||||
styleUrls: ['./web-look.component.scss'] |
||||
}) |
||||
export class WebLookComponent implements OnInit { |
||||
|
||||
constructor(private router:Router,private route:ActivatedRoute,private sanitizer: DomSanitizer) { } |
||||
url:any = sessionStorage.getItem("url") |
||||
thirdPartyURL:any |
||||
ngOnInit(): void { |
||||
this.thirdPartyURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.url) |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,19 @@
|
||||
<div class="dialogbox"> |
||||
<div class="topbox"> |
||||
<div> |
||||
<span>单位名称 : </span> |
||||
<input type="text" placeholder="请输入单位名称" [(ngModel)]="unitName"> |
||||
</div> |
||||
<div> |
||||
<button mat-stroked-button (click)="search()">搜索</button> |
||||
</div> |
||||
<div> |
||||
<button mat-stroked-button (click)="ok()">确定</button> |
||||
</div> |
||||
</div> |
||||
<div class="listbox"> |
||||
<ul> |
||||
<li *ngFor="let item of allUnitList" (click)="selected(item)">{{item.name}}</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,37 @@
|
||||
<div class="bigbox"> |
||||
<app-title [title]="title"></app-title> |
||||
<div class="content"> |
||||
<mat-list class="list" role="list"> |
||||
<mat-list-item role="listitem"> |
||||
<span class="name">熟悉对象</span> |
||||
<input type="text" placeholder="请选择单位 >" (click)="openUnitList()" [(ngModel)]="unitname"> |
||||
</mat-list-item> |
||||
<mat-list-item role="listitem"> |
||||
<span class="name">详细地址</span> |
||||
<input type="text" placeholder="请输入详细地址" [(ngModel)]="address"> |
||||
</mat-list-item> |
||||
<mat-list-item role="listitem"> |
||||
<span class="name">联系人</span> |
||||
<input type="text" placeholder="请输入联系人姓名" [(ngModel)]="contactname"> |
||||
</mat-list-item> |
||||
<mat-list-item role="listitem"> |
||||
<span class="name">联系人电话</span> |
||||
<input type="text" placeholder="请输入联系电话" [(ngModel)]="contactphone"> |
||||
</mat-list-item> |
||||
<mat-list-item role="listitem"> |
||||
<span class="name">熟悉人员数量</span> |
||||
<input type="text" placeholder="请输入人数" [(ngModel)]="peoplenum"> |
||||
</mat-list-item> |
||||
<mat-list-item role="listitem"> |
||||
<span class="name">带队领导</span> |
||||
<input type="text" placeholder="请输入带队人姓名" [(ngModel)]="leadname"> |
||||
</mat-list-item> |
||||
</mat-list> |
||||
<div class="btnbox"> |
||||
<button class="ok" (click)="ok()">确认</button> |
||||
<button class="cancel" (click)="cancel()">取消</button> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
@ -0,0 +1,92 @@
|
||||
.bigbox{ |
||||
width: 10rem; |
||||
height: 7.5rem; |
||||
position: relative; |
||||
background: #F4F5F9; |
||||
.content{ |
||||
width: 10rem; |
||||
height: 6.71875rem; |
||||
.list{ |
||||
margin-top: 0.117188rem; |
||||
mat-list-item{ |
||||
background-color: #fff; |
||||
margin-bottom: 1px; |
||||
position: relative; |
||||
height: 0.46875rem; |
||||
line-height: 0.46875rem; |
||||
font-size: 0.15625rem; |
||||
.name{ |
||||
margin-left: 0.175781rem; |
||||
} |
||||
input{ |
||||
position: absolute; |
||||
right: 0; |
||||
text-align: right; |
||||
height: 0.46875rem; |
||||
line-height: 0.46875rem; |
||||
font-size: 0.15625rem; |
||||
border: none; |
||||
width: 8.300781rem; |
||||
padding-right: 0.292969rem; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.btnbox{ |
||||
display: flex; |
||||
justify-content: center; |
||||
margin-top: 2.929688rem; |
||||
button{ |
||||
width: 1.757813rem; |
||||
height: 0.46875rem; |
||||
line-height: 0.46875rem; |
||||
text-align: center; |
||||
border-radius: 0.292969rem; |
||||
border: none; |
||||
opacity: 1; |
||||
font-size: 16px; |
||||
} |
||||
.ok{ |
||||
background: linear-gradient(337deg, #FC7045 0%, #FF4923 100%); |
||||
color: #fff; |
||||
margin-right: 0.097656rem; |
||||
} |
||||
.cancel{ |
||||
background: #E9EAF3; |
||||
color: black; |
||||
margin-left: 0.097656rem; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.dialogbox{ |
||||
width: 7.617188rem; |
||||
height: 5.859375rem; |
||||
.topbox{ |
||||
height: 0.488281rem; |
||||
line-height: 0.488281rem; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
border-bottom: 1px solid black; |
||||
span{ |
||||
font-size: 0.15625rem; |
||||
} |
||||
input{ |
||||
height: 0.195313rem; |
||||
line-height: 0.195313rem; |
||||
font-size: 0.15625rem; |
||||
} |
||||
} |
||||
.listbox{ |
||||
height: 5.3rem; |
||||
overflow-y: auto; |
||||
li{ |
||||
z-index: 888; |
||||
font-size: 0.175781rem; |
||||
margin: 3px 0; |
||||
} |
||||
li:hover{ |
||||
background-color: #FC7045; |
||||
} |
||||
} |
||||
} |
||||
@ -1,20 +1,20 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { LockscreenComponent } from './lockscreen.component'; |
||||
import { AddSixFamiliarComponent } from './add-six-familiar.component'; |
||||
|
||||
describe('LockscreenComponent', () => { |
||||
let component: LockscreenComponent; |
||||
let fixture: ComponentFixture<LockscreenComponent>; |
||||
describe('AddSixFamiliarComponent', () => { |
||||
let component: AddSixFamiliarComponent; |
||||
let fixture: ComponentFixture<AddSixFamiliarComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ LockscreenComponent ] |
||||
declarations: [ AddSixFamiliarComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(LockscreenComponent); |
||||
fixture = TestBed.createComponent(AddSixFamiliarComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
@ -0,0 +1,104 @@
|
||||
import { HttpClient } from '@angular/common/http'; |
||||
import { Component, OnInit, Inject } from '@angular/core'; |
||||
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; |
||||
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; |
||||
@Component({ |
||||
selector: 'app-add-six-familiar', |
||||
templateUrl: './add-six-familiar.component.html', |
||||
styleUrls: ['./add-six-familiar.component.scss'] |
||||
}) |
||||
export class AddSixFamiliarComponent implements OnInit { |
||||
|
||||
constructor(private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar) { } |
||||
title:String = "新增六熟悉记录" |
||||
|
||||
unitname:any |
||||
address:any |
||||
contactname:any |
||||
contactphone:any |
||||
peoplenum:any |
||||
leadname:any |
||||
ngOnInit(): void { |
||||
} |
||||
//选择单位
|
||||
openUnitList(){ |
||||
let dialogRef = this.dialog.open(SelectUnit); |
||||
dialogRef.afterClosed().subscribe(data=>{ |
||||
if(data){ |
||||
this.unitname = data.name |
||||
this.address = data.address |
||||
this.contactname = data.contacts |
||||
this.contactphone = data.phone |
||||
} |
||||
});
|
||||
} |
||||
//确定
|
||||
ok(){ |
||||
console.log(this.unitname) |
||||
if(this.unitname && this.address && this.contactname && this.contactphone && this.peoplenum && this.leadname){ |
||||
|
||||
}else{ |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('存在未填项','确定',config) |
||||
} |
||||
} |
||||
//取消
|
||||
cancel(){ |
||||
|
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
//选择单位
|
||||
@Component({ |
||||
selector: 'app-editBuilding', |
||||
templateUrl: './Select-unit-list.html', |
||||
styleUrls: ['./add-six-familiar.component.scss'] |
||||
}) |
||||
export class SelectUnit { |
||||
|
||||
constructor(private http:HttpClient,public dialog: MatDialog,public dialogRef: MatDialogRef<SelectUnit>,@Inject(MAT_DIALOG_DATA) public data) { } |
||||
|
||||
unitName:any //输入的单位名
|
||||
allUnitList:any |
||||
ngOnInit(): void { |
||||
this.getAllKeyUnit() |
||||
} |
||||
//获得所有单位
|
||||
getAllKeyUnit(){ |
||||
let paramsdata:any = { |
||||
Name: this.unitName || '', |
||||
OrganizationId: '', |
||||
HasChildren: '', |
||||
USCI:'', |
||||
IsFollowed: '', |
||||
BuildingTypeId: '', |
||||
PageNumber:'1', |
||||
PageSize: 100, |
||||
Sort: '' |
||||
} |
||||
this.http.get("/api/Companies",{params:paramsdata}).subscribe((data:any)=>{ |
||||
this.allUnitList = data.items |
||||
console.log(789,data.items) |
||||
}) |
||||
} |
||||
|
||||
|
||||
selectedUnit:any//选中的单位
|
||||
selected(item){ |
||||
this.selectedUnit = item |
||||
console.log(item) |
||||
} |
||||
|
||||
//搜索
|
||||
search(){ |
||||
this.getAllKeyUnit() |
||||
} |
||||
//确定选择
|
||||
ok(){ |
||||
this.dialogRef.close(this.selectedUnit); |
||||
} |
||||
} |
||||
@ -1,25 +0,0 @@
|
||||
<div style="height: 90%; overflow-y: auto;"> |
||||
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl" > |
||||
<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding> |
||||
<button mat-icon-button disabled ></button> |
||||
{{node.name}} |
||||
<button mat-icon-button class="create" (click)="createauthority(node)"><mat-icon>add_circle_outline</mat-icon></button> |
||||
<button mat-icon-button class="deleted" (click)="deleted(node)"><mat-icon>delete</mat-icon></button> |
||||
</mat-tree-node> |
||||
|
||||
|
||||
<mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding> |
||||
<button mat-icon-button |
||||
matTreeNodeToggle |
||||
[attr.aria-label]="'toggle ' + node.name"> |
||||
<mat-icon class="mat-icon-rtl-mirror"> |
||||
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}} |
||||
</mat-icon> |
||||
</button> |
||||
{{node.name}} |
||||
<button mat-icon-button class="create" (click)="createauthority(node)"><mat-icon>add_circle_outline</mat-icon></button> |
||||
<button mat-icon-button class="deleted" (click)="deleted(node)"><mat-icon>delete</mat-icon></button> |
||||
</mat-tree-node> |
||||
|
||||
</mat-tree> |
||||
</div> |
||||
@ -1,30 +0,0 @@
|
||||
table { |
||||
width: 100%; |
||||
th,td{ |
||||
text-align: center; |
||||
} |
||||
} |
||||
form{ |
||||
text-align: center; |
||||
button{ |
||||
margin: 0 12px; |
||||
} |
||||
} |
||||
mat-tree{ |
||||
width: 500px; |
||||
button{ |
||||
display: block; |
||||
float: right; |
||||
} |
||||
mat-tree-node{ |
||||
position: relative; |
||||
.deleted{ |
||||
position: absolute; |
||||
right: 0; |
||||
} |
||||
.create{ |
||||
position: absolute; |
||||
right: 40px; |
||||
} |
||||
} |
||||
} |
||||
@ -1,144 +0,0 @@
|
||||
import { Component, OnInit, Inject } from '@angular/core'; |
||||
import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree'; |
||||
import {FlatTreeControl} from '@angular/cdk/tree'; |
||||
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog'; |
||||
import {FormControl} from '@angular/forms'; |
||||
import { HttpClient } from '@angular/common/http'; |
||||
import { TreeService } from '../../http-interceptors/tree.service' |
||||
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; |
||||
export interface authority { |
||||
id: string, |
||||
name: string, |
||||
value: string, |
||||
order: number, |
||||
parentId: string |
||||
} |
||||
@Component({ |
||||
selector: 'app-authority', |
||||
templateUrl: './authority.component.html', |
||||
styleUrls: ['./authority.component.scss'] |
||||
}) |
||||
export class AuthorityComponent implements OnInit { |
||||
|
||||
data:any =[] |
||||
newdata = []; |
||||
|
||||
private _transformer = (node, level: number) => { |
||||
return { |
||||
expandable: !!node.children && node.children.length > 0, |
||||
name: node.name, |
||||
level: level, |
||||
id: node.id, |
||||
parentId: node.parentId |
||||
}; |
||||
} |
||||
treeControl = new FlatTreeControl<any>(node => node.level, node => node.expandable); |
||||
treeFlattener = new MatTreeFlattener(this._transformer, node => node.level, node => node.expandable, node => node.children); |
||||
dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener); |
||||
constructor(private http: HttpClient,public dialog: MatDialog,private tree:TreeService) { } |
||||
|
||||
//重新拉去列表函数
|
||||
getlist = ():void=>{ |
||||
this.http.get('/api/Permissions').subscribe((data: any[])=>{
|
||||
this.newdata = this.tree.toTree(data) |
||||
const nodes = this.treeControl.dataNodes; |
||||
const expandNodes = []; |
||||
nodes.forEach((item) => { |
||||
if(item.expandable && this.treeControl.isExpanded(item)){ |
||||
expandNodes.push(item.id); |
||||
} |
||||
}); |
||||
this.dataSource.data = this.newdata; |
||||
let newNodes = this.treeControl.dataNodes; |
||||
newNodes = newNodes.filter(n => { |
||||
return expandNodes.indexOf(n.id) >= 0; |
||||
}); |
||||
newNodes.forEach(item => { |
||||
this.treeControl.expand(item); |
||||
}); |
||||
}) |
||||
} |
||||
|
||||
//初始化视图
|
||||
ngOnInit() { |
||||
this.http.get('/api/Permissions').subscribe((data: any[])=>{
|
||||
this.dataSource.data = this.tree.toTree(data) |
||||
}) |
||||
} |
||||
hasChild = (_: number, node: any) => node.expandable; |
||||
|
||||
//创建按钮
|
||||
createauthority(value){ |
||||
const dialogRef = this.dialog.open(CreateAuthority, {//调用open方法打开对话框并且携带参数过去
|
||||
width: '260px', |
||||
data: {id:value.id} |
||||
}); |
||||
dialogRef.afterClosed().subscribe( |
||||
data=>{ |
||||
if(data){ |
||||
this.newdata = [] |
||||
this.getlist() |
||||
}
|
||||
} |
||||
); |
||||
} |
||||
//删除按钮
|
||||
deleted(authority){ |
||||
var isdeleted = confirm("确定要删除此用户吗？") |
||||
if(isdeleted){ |
||||
//请求删除接口
|
||||
this.newdata = [] |
||||
this.http.delete(`/api/Permissions/${authority.id}`).subscribe( data=>{
|
||||
this.getlist() |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
|
||||
|
||||
//创建组件
|
||||
@Component({ |
||||
selector: 'createauthority', |
||||
templateUrl: './createauthority.component.html', |
||||
styleUrls: ['./authority.component.scss'] |
||||
}) |
||||
export class CreateAuthority { |
||||
myControl = new FormControl(); |
||||
options: string[] = ['0', '1','2', '3','4', '5','6', '7','8']; |
||||
|
||||
//注入MatDialogRef，可以用来关闭对话框
|
||||
//要访问对话框组件中的数据，必须使用MAT_DIALOG_DATA注入令牌
|
||||
constructor(private http: HttpClient,public dialogRef: MatDialogRef<CreateAuthority>,public snackBar: MatSnackBar, |
||||
@Inject(MAT_DIALOG_DATA) public data) {} |
||||
|
||||
onNoClick(): void { |
||||
this.dialogRef.close(); |
||||
} |
||||
onSubmit(value){ |
||||
|
||||
if(value.parentId == "null"){ |
||||
value.parentId = null |
||||
} |
||||
//编写请求创建用户接口(value是参数)//并且刷新一下
|
||||
this.http.post( |
||||
'/api/Permissions',
|
||||
{ |
||||
id: '', |
||||
name: value.name, |
||||
value: value.value, |
||||
order: Number(value.order), |
||||
parentId: this.data.id |
||||
} |
||||
).subscribe( |
||||
data=>{ |
||||
this.dialogRef.close(data);
|
||||
}, |
||||
err=>{ |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('请填写正确格式','确定',config); |
||||
} |
||||
) |
||||
} |
||||
} |
||||
@ -1,36 +0,0 @@
|
||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container"> |
||||
|
||||
<mat-form-field> |
||||
<input matInput id="name" name="name" |
||||
required |
||||
ngModel #name="ngModel" placeholder="权限名称"> |
||||
</mat-form-field> |
||||
|
||||
<mat-form-field> |
||||
<input matInput id="value" name="value" |
||||
required |
||||
ngModel #name="ngModel" placeholder="权限值"> |
||||
</mat-form-field> |
||||
|
||||
|
||||
<mat-form-field class="example-full-width"> |
||||
<input type="text" placeholder="权限顺序" aria-label="Number" matInput [matAutocomplete]="auto1" name="order" ngModel #order="ngModel"> |
||||
<mat-autocomplete #auto1="matAutocomplete"> |
||||
<mat-option *ngFor="let option of options" [value]="option"> |
||||
{{option}} |
||||
</mat-option> |
||||
</mat-autocomplete> |
||||
</mat-form-field> |
||||
|
||||
<!-- <mat-form-field> |
||||
<input matInput id="parentId" name="parentId" type='text' |
||||
required minlength="3" |
||||
ngModel #organizationId="ngModel" placeholder="父级编号"> |
||||
</mat-form-field> |
||||
--> |
||||
<div class="btn"> |
||||
<button type="submit" class="savebtn" mat-raised-button color="primary" [disabled]='form.invalid'>确定</button> |
||||
<button type="button" mat-button (click)="onNoClick()" mat-raised-button>取消</button> |
||||
</div> |
||||
|
||||
</form> |
||||
@ -1,18 +0,0 @@
|
||||
<p> |
||||
<span matBadge="4" matBadgeOverlap="false">未读信息</span> |
||||
</p> |
||||
|
||||
<p> |
||||
<button |
||||
mat-raised-button color="primary" |
||||
matBadge="8" |
||||
matBadgePosition="after" |
||||
matBadgeColor="accent"> |
||||
按钮徽章 |
||||
</button> |
||||
</p> |
||||
|
||||
<p> |
||||
<mat-icon matBadge="15" matBadgeColor="warn">home</mat-icon> |
||||
</p> |
||||
|
||||
@ -1,25 +0,0 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { BadgeComponent } from './badge.component'; |
||||
|
||||
describe('BadgeComponent', () => { |
||||
let component: BadgeComponent; |
||||
let fixture: ComponentFixture<BadgeComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ BadgeComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(BadgeComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -1,14 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
|
||||
@Component({ |
||||
selector: 'app-badge', |
||||
templateUrl: './badge.component.html', |
||||
styleUrls: ['./badge.component.scss'] |
||||
}) |
||||
export class BadgeComponent implements OnInit { |
||||
constructor() { } |
||||
|
||||
ngOnInit() { |
||||
} |
||||
|
||||
} |
||||
@ -1,6 +0,0 @@
|
||||
|
||||
<ul cdkDropList (cdkDropListDropped)="drop($event)"> |
||||
<li *ngFor="let item of data" cdkDrag>{{item.name}}</li> |
||||
</ul> |
||||
|
||||
<mat-checkbox checked="checked" ></mat-checkbox> |
||||
@ -1,25 +0,0 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { ButtonComponent } from './button.component'; |
||||
|
||||
describe('ButtonComponent', () => { |
||||
let component: ButtonComponent; |
||||
let fixture: ComponentFixture<ButtonComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ ButtonComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(ButtonComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -1,89 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
import { HttpClient } from '@angular/common/http'; |
||||
import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop'; |
||||
@Component({ |
||||
selector: 'app-button', |
||||
templateUrl: './button.component.html', |
||||
styleUrls: ['./button.component.scss'] |
||||
}) |
||||
export class ButtonComponent implements OnInit { |
||||
|
||||
constructor(public http: HttpClient) { } |
||||
|
||||
|
||||
data =[ |
||||
{ |
||||
id:"1", |
||||
name:"广西总队", |
||||
order:0, |
||||
parentId:null, |
||||
children:[ |
||||
{ |
||||
id:"2", |
||||
name:"南宁支队", |
||||
order:2, |
||||
parentId:1, |
||||
children:[ |
||||
{ |
||||
id:"6", |
||||
name:"南宁特勤大队", |
||||
order:0, |
||||
parentId:2, |
||||
children:[ |
||||
{ |
||||
id:"6", |
||||
name:"南宁特勤3中队", |
||||
order:3, |
||||
parentId:6, |
||||
}, |
||||
{ |
||||
id:"6", |
||||
name:"南宁特勤2中队", |
||||
order:2, |
||||
parentId:6, |
||||
}, |
||||
{ |
||||
id:"6", |
||||
name:"南宁特勤1中队", |
||||
order:1, |
||||
parentId:6, |
||||
} |
||||
] |
||||
} |
||||
] |
||||
}, |
||||
{ |
||||
id:"3", |
||||
name:"北海支队", |
||||
order:1, |
||||
parentId:1 |
||||
}, |
||||
{ |
||||
id:"4", |
||||
name:"梧州支队", |
||||
order:0, |
||||
parentId:1 |
||||
}, |
||||
{ |
||||
id:"5", |
||||
name:"桂林支队", |
||||
order:3, |
||||
parentId:1 |
||||
}, |
||||
] |
||||
} |
||||
] |
||||
|
||||
|
||||
ngOnInit() { |
||||
var str = "xxxx.jjjj" |
||||
// console.log(2222,str.split('.')[1])
|
||||
} |
||||
|
||||
drop(event: CdkDragDrop<string[]>) { |
||||
moveItemInArray(this.data, event.previousIndex, event.currentIndex); |
||||
|
||||
} |
||||
|
||||
|
||||
} |
||||
@ -1,12 +0,0 @@
|
||||
<mat-card> |
||||
<mat-card-title>简单的卡片</mat-card-title> |
||||
<mat-card-subtitle>卡片的字幕</mat-card-subtitle> |
||||
<mat-card-content>原来爱情的世界很大,大得可以装下一百种委屈;原来爱情的世界很小,小得三个人就会窒息。</mat-card-content> |
||||
<img mat-card-image src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1579480490&di=f80c114e78ea7a439c19cc7f1622227f&src=http://pic1.win4000.com/wallpaper/2017-11-17/5a0e94afc140c.jpg"> |
||||
<mat-card-actions> |
||||
<button mat-raised-button color="primary">我是按钮</button> |
||||
</mat-card-actions> |
||||
<mat-card-footer> |
||||
我要被固定在卡片底部 |
||||
</mat-card-footer> |
||||
</mat-card> |
||||
@ -1,10 +0,0 @@
|
||||
|
||||
mat-card{ |
||||
width: 300px; |
||||
height: 600px; |
||||
img{ |
||||
width: 300px; |
||||
height: 300px; |
||||
padding: 16px; |
||||
} |
||||
} |
||||
@ -1,15 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
|
||||
@Component({ |
||||
selector: 'app-card', |
||||
templateUrl: './card.component.html', |
||||
styleUrls: ['./card.component.scss'] |
||||
}) |
||||
export class CardComponent implements OnInit { |
||||
|
||||
constructor() { } |
||||
|
||||
ngOnInit() { |
||||
} |
||||
|
||||
} |
||||
@ -1,11 +0,0 @@
|
||||
<mat-form-field> |
||||
<input matInput [matDatepicker]="picker" placeholder="选择日期" (dateInput)="addEvent('日期是：',$event)" (dataChange)="addEvent('日期是：',$event)"> |
||||
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> |
||||
<mat-datepicker #picker></mat-datepicker> |
||||
|
||||
</mat-form-field> |
||||
<div class="example-events"> |
||||
<div *ngFor="let e of events">{{e}}</div> |
||||
</div> |
||||
|
||||
|
||||
@ -1,7 +0,0 @@
|
||||
.example-events { |
||||
width: 400px; |
||||
height: 200px; |
||||
border: 1px solid #555; |
||||
overflow: auto; |
||||
} |
||||
|
||||
@ -1,25 +0,0 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { DateselectComponent } from './dateselect.component'; |
||||
|
||||
describe('DateselectComponent', () => { |
||||
let component: DateselectComponent; |
||||
let fixture: ComponentFixture<DateselectComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ DateselectComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(DateselectComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -1,23 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
import {MatDatepickerInputEvent} from '@angular/material/datepicker'; |
||||
|
||||
|
||||
|
||||
@Component({ |
||||
selector: 'app-dateselect', |
||||
templateUrl: './dateselect.component.html', |
||||
styleUrls: ['./dateselect.component.scss'], |
||||
}) |
||||
|
||||
export class DateselectComponent implements OnInit { |
||||
|
||||
constructor() { } |
||||
|
||||
ngOnInit() { |
||||
} |
||||
events: string[] = []; |
||||
|
||||
addEvent(type: string, event: MatDatepickerInputEvent<Date>) { |
||||
this.events.push(`${type}: ${event.value}`); |
||||
} |
||||
} |
||||
@ -1,44 +0,0 @@
|
||||
<h1 mat-dialog-title>创建企业用户</h1> |
||||
|
||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container"> |
||||
|
||||
<div> |
||||
<mat-form-field> |
||||
<input matInput id="name" name="loginName" pattern="^[a-zA-Z][a-zA-Z0-9_]{4,19}$" |
||||
required ngModel placeholder="请输入登录账号"> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div> |
||||
<mat-form-field> |
||||
<input matInput id="tel" name="tel" |
||||
pattern="^(?:\+?86)?1(?:3\d{3}|5[^4\D]\d{2}|8\d{3}|7(?:[0-35-9]\d{2}|4(?:0\d|1[0-2]|9\d))|9[0-35-9]\d{2}|6[2567]\d{2}|4(?:[14]0\d{3}|[68]\d{4}|[579]\d{2}))\d{6}$" |
||||
required ngModel placeholder="请输入联系电话"> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div> |
||||
<mat-form-field> |
||||
<input matInput id="unitname" name="unitname" |
||||
required ngModel placeholder="请输入单位名称"> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div> |
||||
<mat-form-field> |
||||
<input matInput id="creditcode" name="creditcode" |
||||
pattern="^[0-9A-HJ-NP-RTUW-Y]{2}\d{6}[0-9A-HJ-NP-RTUW-Y]{10}$" |
||||
required ngModel placeholder="请输入统一社会信用代码"> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div mat-dialog-content *ngIf="errmsg"> |
||||
<p style="font-size: 14px; color: red;">{{errmsg}}</p> |
||||
</div> |
||||
|
||||
<div mat-dialog-actions> |
||||
<button mat-raised-button color="primary" type="submit" [disabled]="!form.form.valid">确定</button> |
||||
<button mat-raised-button mat-dialog-close>取消</button> |
||||
</div> |
||||
|
||||
</form> |
||||
@ -1,35 +0,0 @@
|
||||
import { Component, OnInit, Inject } from '@angular/core'; |
||||
import { HttpClient } from '@angular/common/http'; |
||||
import {MatDialogRef} from '@angular/material/dialog'; |
||||
|
||||
|
||||
|
||||
@Component({ |
||||
selector: 'addenterpriseuser', |
||||
templateUrl: './addenterpriseuser.component.html', |
||||
styleUrls: ['./enterpriseuser.component.scss'] |
||||
}) |
||||
export class AddEnterpriserUser { |
||||
|
||||
constructor(private http: HttpClient,public dialogRef: MatDialogRef<AddEnterpriserUser>) {} |
||||
|
||||
errmsg:any; //捕获错误信息
|
||||
//提交创建表单
|
||||
onSubmit (e) { |
||||
let date = new Date() |
||||
this.http.post('/api/CompanyUsers',{ |
||||
name:e.loginName, |
||||
phone:e.tel, |
||||
enabled:true, |
||||
creationTime:date, |
||||
usci:e.creditcode, |
||||
companyName:e.unitname |
||||
}).subscribe(data=>{ |
||||
this.dialogRef.close(data)}, |
||||
error=>{this.errmsg=error} |
||||
) |
||||
} |
||||
|
||||
|
||||
|
||||
} |
||||
@ -1,40 +0,0 @@
|
||||
<h1 mat-dialog-title>编辑企业用户</h1> |
||||
|
||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container"> |
||||
|
||||
<div> |
||||
<mat-form-field> |
||||
<input matInput id="name" name="loginName" disabled |
||||
required [(ngModel)]="data.name" placeholder="登录账号"> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div> |
||||
<mat-form-field> |
||||
<input matInput id="tel" name="tel" |
||||
pattern="^(?:\+?86)?1(?:3\d{3}|5[^4\D]\d{2}|8\d{3}|7(?:[0-35-9]\d{2}|4(?:0\d|1[0-2]|9\d))|9[0-35-9]\d{2}|6[2567]\d{2}|4(?:[14]0\d{3}|[68]\d{4}|[579]\d{2}))\d{6}$" |
||||
required [(ngModel)]="companyPhone" placeholder="联系电话"> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div> |
||||
<mat-form-field> |
||||
<input matInput id="unitname" name="unitname" |
||||
required [(ngModel)]="companyName" placeholder="单位名称"> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div> |
||||
<mat-form-field> |
||||
<input matInput id="creditcode" name="creditcode" |
||||
pattern="^[0-9A-HJ-NP-RTUW-Y]{2}\d{6}[0-9A-HJ-NP-RTUW-Y]{10}$" |
||||
required [(ngModel)]="companyUsci" placeholder="统一社会信用代码"> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div mat-dialog-actions> |
||||
<button mat-raised-button color="primary" type="submit" [disabled]="!form.form.valid">确定</button> |
||||
<button mat-raised-button mat-dialog-close>取消</button> |
||||
</div> |
||||
|
||||
</form> |
||||
@ -1,78 +0,0 @@
|
||||
<div class="header"> |
||||
<form #form="ngForm"> |
||||
<div class="queryBox"> |
||||
|
||||
<div class="queryField"> |
||||
<button type="button" mat-raised-button color="primary" (click)='open()'>创建企业用户</button> |
||||
</div> |
||||
|
||||
<div class="queryField"> |
||||
<label style="margin-right: 10px;">登录账号:</label> |
||||
<input type="text" [(ngModel)]="userLogin" name="userLogin"> |
||||
</div> |
||||
|
||||
<div class="queryField"> |
||||
<label style="margin-right: 10px;">单位名称:</label> |
||||
<input type="text" [(ngModel)]="userName" name="userName"> |
||||
</div> |
||||
|
||||
<div class="queryField"> |
||||
<label style="margin-right: 10px;">统一社会信用代码:</label> |
||||
<input type="text" [(ngModel)]="creditcode" name="creditcode"> |
||||
</div> |
||||
|
||||
</div> |
||||
<div style="width: 100%;text-align: center;"> |
||||
<button mat-raised-button color="primary" (click)='initData()'>查询</button> |
||||
<button mat-raised-button style="margin-left: 25px;" type="button" (click)='empty()'>重置</button> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
|
||||
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8"> |
||||
|
||||
<ng-container matColumnDef="loginName"> |
||||
<th mat-header-cell *matHeaderCellDef>登录账号</th> |
||||
<td mat-cell *matCellDef="let element">{{element.name}}<span style="color: red;" *ngIf="element.cancelled">(该账号已被注销)</span></td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="unitName"> |
||||
<th mat-header-cell *matHeaderCellDef>单位名称</th> |
||||
<td mat-cell *matCellDef="let element">{{element.companyName}}</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="creditcode"> |
||||
<th mat-header-cell *matHeaderCellDef>统一社会信用代码</th> |
||||
<td mat-cell *matCellDef="let element">{{element.usci}}</td> |
||||
</ng-container> |
||||
|
||||
|
||||
<ng-container matColumnDef="time"> |
||||
<th mat-header-cell *matHeaderCellDef>创建时间</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
{{element.creationTime|date:'yyyy-MM-dd'}} |
||||
</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="operation"> |
||||
<th mat-header-cell *matHeaderCellDef>操作</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
<button mat-raised-button color="primary" class="maginleft" (click)='reset(element)' *ngIf="!element.cancelled">重置密码</button> |
||||
<button mat-raised-button color="primary" class="maginleft" (click)='see(element)' *ngIf="!element.cancelled">查看</button> |
||||
<button mat-raised-button color="primary" class="maginleft" (click)='edit(element)' *ngIf="!element.cancelled">编辑</button> |
||||
<button mat-raised-button color="primary" class="maginleft" (click)='enabled(element)' *ngIf="!element.cancelled && !element.enabled">启用</button> |
||||
<button mat-raised-button color="warn" class="maginleft" (click)='noEnabled(element)' *ngIf="!element.cancelled && element.enabled">禁用</button> |
||||
<button mat-raised-button color="warn" class="maginleft" (click)='logoff(element)' *ngIf="!element.cancelled">注销</button> |
||||
<button mat-raised-button color="warn" class="maginleft" (click)='delete(element)' *ngIf="element.cancelled">删除</button> |
||||
</td> |
||||
</ng-container> |
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> |
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> |
||||
</table> |
||||
<mat-paginator [length]="length" |
||||
[pageSize]="pageSize" |
||||
[pageSizeOptions]="pageSizeOptions" |
||||
(page)="chagePage($event)"> |
||||
</mat-paginator> |
||||
|
||||
@ -1,38 +0,0 @@
|
||||
table { |
||||
width: 100%; |
||||
text-align: center; |
||||
.cdk-header-cell { |
||||
text-align: center; |
||||
} |
||||
} |
||||
.maginleft { |
||||
margin-left: 5px; |
||||
} |
||||
|
||||
|
||||
|
||||
.header { |
||||
width: 100%; |
||||
padding: 10px; |
||||
margin-bottom: 10px; |
||||
box-sizing: border-box; |
||||
border-bottom: 1px solid rgba(0,0,0,0.12); |
||||
.queryBox { |
||||
box-sizing: border-box; |
||||
padding: 5px 15px; |
||||
display: flex; |
||||
flex-direction: row; |
||||
flex-wrap: wrap; |
||||
align-items:center; |
||||
justify-content:center; |
||||
.queryField { |
||||
margin: 0 15px; |
||||
input { |
||||
width: 180px; |
||||
height: 22px; |
||||
line-height: 22px; |
||||
border-radius: 3px;} |
||||
} |
||||
|
||||
} //queryBox |
||||
} |
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue