diff --git a/src/app/statistic-analysis/state/page-two-time/echarts.html b/src/app/statistic-analysis/state/page-two-time/echarts.html
new file mode 100644
index 0000000..15d7322
--- /dev/null
+++ b/src/app/statistic-analysis/state/page-two-time/echarts.html
@@ -0,0 +1,7 @@
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/app/statistic-analysis/state/page-two-time/page-two-time.component.html b/src/app/statistic-analysis/state/page-two-time/page-two-time.component.html
index 0059816..6db6075 100644
--- a/src/app/statistic-analysis/state/page-two-time/page-two-time.component.html
+++ b/src/app/statistic-analysis/state/page-two-time/page-two-time.component.html
@@ -1 +1,39 @@
-page-two-time works!
+
diff --git a/src/app/statistic-analysis/state/page-two-time/page-two-time.component.scss b/src/app/statistic-analysis/state/page-two-time/page-two-time.component.scss
index e69de29..ba1260b 100644
--- a/src/app/statistic-analysis/state/page-two-time/page-two-time.component.scss
+++ b/src/app/statistic-analysis/state/page-two-time/page-two-time.component.scss
@@ -0,0 +1,63 @@
+.content {
+ width: 100%;
+ height: 93%;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ .echarts {
+ flex: 100%;
+ box-sizing: border-box;
+ padding: 10px;
+ overflow: hidden;
+ .center {
+ width: 100%;
+ height: 100%;
+ overflow: auto;;
+ }
+ }
+}
+
+.header {
+ padding: 10px;
+ box-sizing: border-box;
+ border-bottom: 1px solid #999;
+ .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;
+ font-size: 14px;
+ input {
+ width: 180px;
+ height: 22px;
+ line-height: 22px;
+ }
+ }
+ .btnbox{
+ float: right;
+ }
+
+ } //queryBox
+}
+
+.publicCss{
+ height: 350px;
+ width: 50%;
+ display: inline-block;
+ box-sizing: border-box;
+ padding: 20px;
+}
+
+//滚动条样式
+::-webkit-scrollbar{
+ width: 5px;
+ background-color: white;
+}
+::-webkit-scrollbar-thumb{
+ background-color: #999;
+}
\ No newline at end of file
diff --git a/src/app/statistic-analysis/state/page-two-time/page-two-time.component.ts b/src/app/statistic-analysis/state/page-two-time/page-two-time.component.ts
index aede2de..bb527b3 100644
--- a/src/app/statistic-analysis/state/page-two-time/page-two-time.component.ts
+++ b/src/app/statistic-analysis/state/page-two-time/page-two-time.component.ts
@@ -1,4 +1,9 @@
import { Component, OnInit } from '@angular/core';
+import { MatDatepickerInputEvent } from '@angular/material/datepicker';
+import { MatSnackBarConfig, MatSnackBar } from '@angular/material/snack-bar';
+import { FormControl } from '@angular/forms';
+import { DateAdapter } from '@angular/material/core';
+declare var echarts: any;
@Component({
selector: 'app-page-two-time',
@@ -7,9 +12,517 @@ import { Component, OnInit } from '@angular/core';
})
export class PageTwoTimeComponent implements OnInit {
- constructor() { }
+ constructor(public snackBar: MatSnackBar,private adapter: DateAdapter,) { }
ngOnInit(): void {
+ this.startTime = new FormControl( (new Date()).getFullYear()+ '-' + '01' + '-' + '01' )
+ this.endTime = new FormControl( new Date() )
+ this.adapter.setLocale('CH')
}
+ isQuery:boolean = true; //横纵向查询
+
+ toggleTrue () {
+ this.isQuery = true
+ }
+
+ toggleFalse () {
+ this.isQuery = false
+ }
+
+ startTime:any; //查询开始时间
+ endTime:any; //查询结束时间
+
+ //选择开始时间
+ startEvent (e: MatDatepickerInputEvent) {
+ let nowTime = new Date()
+ if (nowTime < e.value) {
+ const config = new MatSnackBarConfig();
+ config.verticalPosition = 'top';
+ config.duration = 3000
+ this.snackBar.open('选择时间不能大于现在时间段','确定',config);
+ this.startTime = new FormControl( new Date(new Date().toLocaleDateString()) )
+ } else {
+ this.startTime = new FormControl(e.value)
+ }
+ }
+
+ //选择结束时间
+ endEvent (e: MatDatepickerInputEvent) {
+ let oneDay:number = 86399000; //一天的毫秒数
+ let selectDay = (e.value).toLocaleDateString() //选择的年月日
+ let newDay = (new Date()).toLocaleDateString() //现在的年月日
+ let nowTime = new Date() //现在的时间
+
+ if (nowTime < e.value && selectDay!=newDay) { //选择时间段大于现在时间段时
+ const config = new MatSnackBarConfig();
+ config.verticalPosition = 'top';
+ config.duration = 3000
+ this.snackBar.open('选择时间不能大于现在时间段','确定',config);
+ this.endTime = new FormControl( new Date() )
+ } else if (nowTime > e.value && selectDay!=newDay) { //正常情况下 时间+1天
+ this.endTime = new FormControl( new Date(e.value.getTime()+oneDay) )
+ } else if ( selectDay == newDay ) { //选择时间段是今天时
+ this.endTime = new FormControl( new Date() )
+ }
+ }
+
+ //处理时间 传入 new Date()格式
+ getTime(date){
+ let year = date.getFullYear(); //年
+ let month = date.getMonth() + 1; //月
+ let day = date.getDate(); //日
+ let hour = date.getHours() //时
+ let min = date.getMinutes(); //分
+ let seconds = date.getSeconds(); //秒
+ return year+'-'+month+'-'+ day + " "+ hour +':'+ min +':'+ seconds;
+ }
+
+
+
+}
+
+@Component({
+ selector: 'app-echarts',
+ templateUrl: './echarts.html',
+ styleUrls: ['./page-two-time.component.scss']
+})
+export class echartsComponent implements OnInit {
+
+ constructor(public snackBar: MatSnackBar,private adapter: DateAdapter,) { }
+
+ ngOnInit(): void {
+ window.setTimeout(()=>{
+ this.oneInit()
+ this.twoInit()
+ this.threeInit()
+ this.fourInit()
+ this.fiveInit()
+ this.sixInit()
+ },0)
+ }
+
+ oneInit () {
+ var chartQusj = echarts.init(document.getElementById('one'), 'skinUpp');
+ var option = {
+ grid: {
+ top: 50,
+ left:40,
+ right: 20,
+ bottom: 20,
+ },
+ // 标题
+ title: {
+ text: '预案统计状态',
+ top: -4,
+ left: 'center',
+ subtext:'今年',
+ //副标题文本样式
+ subtextStyle:{
+ color:'#999',
+ fontWeight:'bold',
+ },
+ textStyle:{
+ //文字颜色
+ color:'#000',
+ fontSize: 22,
+ }
+ },
+ //提示框
+ tooltip: {
+ trigger: 'axis',
+ },
+ // x轴
+ xAxis: {
+ type: 'category',
+ data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月'],
+ boundaryGap: false,
+ axisLabel: {
+ color: "#000", //刻度线标签颜色
+ },
+ //设置坐标轴字体颜色和宽度
+ axisLine: {
+ lineStyle: {
+ color: "#000",
+ },
+ },
+ splitLine: {//分割线配置
+ show:true,
+ lineStyle: {
+ color: '#999',
+ }
+ }
+ },
+ // y轴
+ yAxis: {
+ type: 'value',
+ name: '个',
+ axisLabel: {
+ color: "#000" //刻度线标签颜色
+ },
+ //设置坐标轴字体颜色和宽度
+ axisLine: {
+ lineStyle: {
+ color: "#000",
+ }
+ }
+ },
+ // 数据
+ series: [{
+ name: '单位预案编制数量',
+ type: 'line',
+ data: [270, 253, 244, 199, 189, 173, 160, 198,200],
+ }
+ ],
+ };
+ chartQusj.setOption(option);
+ }
+
+ twoInit () {
+ var chartQusj = echarts.init(document.getElementById('two'), 'skinUpp');
+ var option = {
+ grid: {
+ top: 50,
+ left:40,
+ right: 20,
+ bottom: 20,
+ },
+ // 标题
+ title: {
+ text: '预案新增',
+ top: -4,
+ left: 'center',
+ textStyle:{
+ //文字颜色
+ color:'#000',
+ }
+ },
+ //提示框
+ tooltip: {
+ trigger: 'axis',
+ },
+ // x轴
+ xAxis: {
+ type: 'category',
+ data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月'],
+ boundaryGap: false,
+ axisLabel: {
+ color: "#000", //刻度线标签颜色
+ },
+ //设置坐标轴字体颜色和宽度
+ axisLine: {
+ lineStyle: {
+ color: "#000",
+ },
+ },
+ splitLine: {//分割线配置
+ show:true,
+ lineStyle: {
+ color: '#999',
+ }
+ }
+ },
+ // y轴
+ yAxis: {
+ type: 'value',
+ name: '个',
+ axisLabel: {
+ color: "#000" //刻度线标签颜色
+ },
+ //设置坐标轴字体颜色和宽度
+ axisLine: {
+ lineStyle: {
+ color: "#000",
+ }
+ }
+ },
+ // 数据
+ series: [{
+ name: '单位预案编制数量',
+ type: 'line',
+ data: [270, 253, 244, 199, 189, 173, 160, 198,200],
+ }
+ ],
+ };
+ chartQusj.setOption(option);
+ }
+
+ threeInit () {
+ var chartQusj = echarts.init(document.getElementById('three'), 'skinUpp');
+ var option = {
+ grid: {
+ top: 50,
+ left:40,
+ right: 20,
+ bottom: 20,
+ },
+ // 标题
+ title: {
+ text: '预案审核通过',
+ top: -4,
+ left: 'center',
+ textStyle:{
+ //文字颜色
+ color:'#000',
+ }
+ },
+ //提示框
+ tooltip: {
+ trigger: 'axis',
+ },
+ // x轴
+ xAxis: {
+ type: 'category',
+ data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月'],
+ boundaryGap: false,
+ axisLabel: {
+ color: "#000", //刻度线标签颜色
+ },
+ //设置坐标轴字体颜色和宽度
+ axisLine: {
+ lineStyle: {
+ color: "#000",
+ },
+ },
+ splitLine: {//分割线配置
+ show:true,
+ lineStyle: {
+ color: '#999',
+ }
+ }
+ },
+ // y轴
+ yAxis: {
+ type: 'value',
+ name: '个',
+ axisLabel: {
+ color: "#000" //刻度线标签颜色
+ },
+ //设置坐标轴字体颜色和宽度
+ axisLine: {
+ lineStyle: {
+ color: "#000",
+ }
+ }
+ },
+ // 数据
+ series: [{
+ name: '单位预案编制数量',
+ type: 'line',
+ data: [270, 253, 244, 199, 189, 173, 160, 198,200],
+ }
+ ],
+ };
+ chartQusj.setOption(option);
+ }
+
+ fourInit () {
+ var chartQusj = echarts.init(document.getElementById('four'), 'skinUpp');
+ var option = {
+ grid: {
+ top: 50,
+ left:40,
+ right: 20,
+ bottom: 20,
+ },
+ // 标题
+ title: {
+ text: '预案编制',
+ top: -4,
+ left: 'center',
+ textStyle:{
+ //文字颜色
+ color:'#000',
+ }
+ },
+ //提示框
+ tooltip: {
+ trigger: 'axis',
+ },
+ // x轴
+ xAxis: {
+ type: 'category',
+ data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月'],
+ boundaryGap: false,
+ axisLabel: {
+ color: "#000", //刻度线标签颜色
+ },
+ //设置坐标轴字体颜色和宽度
+ axisLine: {
+ lineStyle: {
+ color: "#000",
+ },
+ },
+ splitLine: {//分割线配置
+ show:true,
+ lineStyle: {
+ color: '#999',
+ }
+ }
+ },
+ // y轴
+ yAxis: {
+ type: 'value',
+ name: '个',
+ axisLabel: {
+ color: "#000" //刻度线标签颜色
+ },
+ //设置坐标轴字体颜色和宽度
+ axisLine: {
+ lineStyle: {
+ color: "#000",
+ }
+ }
+ },
+ // 数据
+ series: [{
+ name: '单位预案编制数量',
+ type: 'line',
+ data: [270, 253, 244, 199, 189, 173, 160, 198,200],
+ }
+ ],
+ };
+ chartQusj.setOption(option);
+ }
+
+ fiveInit () {
+ var chartQusj = echarts.init(document.getElementById('five'), 'skinUpp');
+ var option = {
+ grid: {
+ top: 50,
+ left:40,
+ right: 20,
+ bottom: 20,
+ },
+ // 标题
+ title: {
+ text: '预案审核退回',
+ top: -4,
+ left: 'center',
+ textStyle:{
+ //文字颜色
+ color:'#000',
+ }
+ },
+ //提示框
+ tooltip: {
+ trigger: 'axis',
+ },
+ // x轴
+ xAxis: {
+ type: 'category',
+ data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月'],
+ boundaryGap: false,
+ axisLabel: {
+ color: "#000", //刻度线标签颜色
+ },
+ //设置坐标轴字体颜色和宽度
+ axisLine: {
+ lineStyle: {
+ color: "#000",
+ },
+ },
+ splitLine: {//分割线配置
+ show:true,
+ lineStyle: {
+ color: '#999',
+ }
+ }
+ },
+ // y轴
+ yAxis: {
+ type: 'value',
+ name: '个',
+ axisLabel: {
+ color: "#000" //刻度线标签颜色
+ },
+ //设置坐标轴字体颜色和宽度
+ axisLine: {
+ lineStyle: {
+ color: "#000",
+ }
+ }
+ },
+ // 数据
+ series: [{
+ name: '单位预案编制数量',
+ type: 'line',
+ data: [270, 253, 244, 199, 189, 173, 160, 198,200],
+ }
+ ],
+ };
+ chartQusj.setOption(option);
+ }
+
+ sixInit () {
+ var chartQusj = echarts.init(document.getElementById('six'), 'skinUpp');
+ var option = {
+ grid: {
+ top: 50,
+ left:40,
+ right: 20,
+ bottom: 20,
+ },
+ // 标题
+ title: {
+ text: '预案审核中',
+ top: -4,
+ left: 'center',
+ textStyle:{
+ //文字颜色
+ color:'#000',
+ }
+ },
+ //提示框
+ tooltip: {
+ trigger: 'axis',
+ },
+ // x轴
+ xAxis: {
+ type: 'category',
+ data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月'],
+ boundaryGap: false,
+ axisLabel: {
+ color: "#000", //刻度线标签颜色
+ },
+ //设置坐标轴字体颜色和宽度
+ axisLine: {
+ lineStyle: {
+ color: "#000",
+ },
+ },
+ splitLine: {//分割线配置
+ show:true,
+ lineStyle: {
+ color: '#999',
+ }
+ }
+ },
+ // y轴
+ yAxis: {
+ type: 'value',
+ name: '个',
+ axisLabel: {
+ color: "#000" //刻度线标签颜色
+ },
+ //设置坐标轴字体颜色和宽度
+ axisLine: {
+ lineStyle: {
+ color: "#000",
+ }
+ }
+ },
+ // 数据
+ series: [{
+ name: '单位预案编制数量',
+ type: 'line',
+ data: [270, 253, 244, 199, 189, 173, 160, 198,200],
+ }
+ ],
+ };
+ chartQusj.setOption(option);
+ }
+
+
+
}
diff --git a/src/app/statistic-analysis/statistic-analysis.module.ts b/src/app/statistic-analysis/statistic-analysis.module.ts
index ea82237..f513eeb 100644
--- a/src/app/statistic-analysis/statistic-analysis.module.ts
+++ b/src/app/statistic-analysis/statistic-analysis.module.ts
@@ -1,7 +1,7 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PageOneComponent } from './state/page-one/page-one.component';
-import { PageTwoTimeComponent } from './state/page-two-time/page-two-time.component';
+import { PageTwoTimeComponent,echartsComponent } from './state/page-two-time/page-two-time.component';
import { PageTwoNameComponent } from './state/page-two-name/page-two-name.component';
import { StatisticAnalysisRoutingModule } from './statistic-analysis-routing.module';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
@@ -49,7 +49,7 @@ import {MatTreeModule} from '@angular/material/tree';
@NgModule({
- declarations: [PageOneComponent, PageTwoTimeComponent, PageTwoNameComponent],
+ declarations: [PageOneComponent, PageTwoTimeComponent, PageTwoNameComponent,echartsComponent],
imports: [
CommonModule,
StatisticAnalysisRoutingModule,