shaojiahao
/
ShangHai-YuAn
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

[完善] 计划更新统计完成, 返回功能完成

master
陈鹏飞 4 years ago
parent
3d10c8caf4
commit
2560a38cd9
11 changed files with 209 additions and 235 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/app/statistic-analysis/scheduled-updates/detailedInformation.html
  2. 24
      src/app/statistic-analysis/scheduled-updates/moreTable.html
  3. 17
      src/app/statistic-analysis/scheduled-updates/notVerified.html
  4. 5
      src/app/statistic-analysis/scheduled-updates/publicEcharts.html
  5. 30
      src/app/statistic-analysis/scheduled-updates/scheduled-updates.component.scss
  6. 345
      src/app/statistic-analysis/scheduled-updates/scheduled-updates.component.ts
  7. 2
      src/app/statistic-analysis/state/page-one/page-one.component.ts
  8. 11
      src/app/statistic-analysis/state/page-two-time/page-two-time.component.html
  9. 2
      src/app/statistic-analysis/state/page-two-time/page-two-time.component.scss
  10. 5
      src/app/statistic-analysis/state/page-two-time/page-two-time.component.ts
  11. 1
      src/app/statistic-analysis/state/page-zhong-dui-details/page-zhong-dui-details.component.ts

2
src/app/statistic-analysis/scheduled-updates/detailedInformation.html
Unescape View File

@ -1 +1 @@
<div style="height: 400px;width: 90%;margin: 0 auto;" id="center"></div>
<div style="height: 90%;width: 90%;margin: 0 auto;" id="center"></div>

24
src/app/statistic-analysis/scheduled-updates/moreTable.html
Unescape View File

@ -0,0 +1,24 @@
<div class="table">
<p class="tableHeader">公告</p>
<table mat-table [dataSource]="dataSource">
<ng-container matColumnDef="team">
<th mat-header-cell *matHeaderCellDef>支队</th>
<td mat-cell *matCellDef="let element">{{element.team}}</td>
</ng-container>
<ng-container matColumnDef="header">
<th mat-header-cell *matHeaderCellDef>标题</th>
<td mat-cell *matCellDef="let element">{{element.content}}</td>
</ng-container>
<ng-container matColumnDef="time">
<th mat-header-cell *matHeaderCellDef>时间</th>
<td mat-cell *matCellDef="let element">{{element.time}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>

17
src/app/statistic-analysis/scheduled-updates/notVerified.html
Unescape View File

@ -1,16 +1,3 @@
<app-detailedInformation *ngIf="!echartsData.scheduledUpdatesToggle"></app-detailedInformation>
<div [hidden]="!echartsData.scheduledUpdatesToggle">
<div style="height: 400px;width: 50%;margin: 0 auto;" id="center"></div>
<div class="publicCss" id="one"></div>
<div class="publicCss" id="two"></div>
<div class="publicCss" id="three"></div>
<div class="publicCss" id="four"></div>
<div class="publicCss" id="five"></div>
<div class="publicCss" id="six"></div>
<div class="publicCss" id="seven"></div>
<div class="publicCss" id="eight"></div>
<div class="publicCss" id="nine"></div>
<div class="publicCss" id="ten"></div>
<div class="publicCss" id="eleven"></div>
<div class="publicCss" id="twelve"></div>
</div>
<div style="height: 90%;width: 90%;margin: 0 auto;" id="center" [hidden]="!echartsData.scheduledUpdatesToggle"></div>

5
src/app/statistic-analysis/scheduled-updates/publicEcharts.html
Unescape View File

@ -9,8 +9,9 @@
</div>
<div class="fixedCss">
<button mat-raised-button (click)='verified()' [ngClass]="{'selectButton': isToggle}">已核查</button>
<button mat-raised-button style="margin-left: 10px;" (click)='notVerified()' [ngClass]="{'selectButton': !isToggle}">未核查</button>
<button mat-raised-button (click)='goBack()' *ngIf="!echartsData.scheduledUpdatesToggle">返回</button>
<button mat-raised-button (click)='verified()' [ngClass]="{'selectButton': isToggle}" style="margin:0 10px;" >已核查</button>
<button mat-raised-button (click)='notVerified()' [ngClass]="{'selectButton': !isToggle}">未核查</button>
</div>
</div>

30
src/app/statistic-analysis/scheduled-updates/scheduled-updates.component.scss
Unescape View File

@ -9,3 +9,33 @@
height: 100%;
}
}
//table
table {
width: 100%;
text-align: center;
.cdk-header-cell {
text-align: center;
}
}
.table {
width: 1000px;
height: 600px;
overflow: auto;
.tableHeader {
font-size: 24px;
text-align: center;
font-weight: 550;
}
}
//滚动条样式
::-webkit-scrollbar{
width: 5px;
background-color: white;
}
::-webkit-scrollbar-thumb{
background-color: #999;
}

345
src/app/statistic-analysis/scheduled-updates/scheduled-updates.component.ts
Unescape View File

@ -115,6 +115,11 @@ export class publicEchartsComponent implements OnInit {
this.echartsData.scheduledUpdatesToggle = true
}
//返回
goBack () {
this.echartsData.scheduledUpdatesToggle = true
}
//更多 窗口
moreOpen () {
let dialogRef = this.dialog.open(moreTableComponent);
@ -199,7 +204,6 @@ export class verifiedComponent implements OnInit {
// y轴
yAxis: {
type: 'value',
name: '个',
axisLabel: {
color: "#000" //刻度线标签颜色
},
@ -265,61 +269,63 @@ export class verifiedComponent implements OnInit {
lineStyle: {color: "#000"},
},
type: 'value',
name: '个',
axisLabel: {
color: "#000", //刻度线标签颜色
formatter: '{value}'
}
},
{
//设置坐标轴字体颜色和宽度
axisLine: {
lineStyle: {color: "#000"},
},
type: 'value',
name: '个',
axisLabel: {
color: "#000", //刻度线标签颜色
formatter: '{value}'
}
}
// {
// //设置坐标轴字体颜色和宽度
// axisLine: {
// lineStyle: {color: "#000"},
// },
// type: 'value',
// name: '个',
// axisLabel: {
// color: "#000", //刻度线标签颜色
// formatter: '{value}'
// }
// }
],
series: [
{
name: '已核查无需修改',
type: 'bar',
stack: '总数',
data: [68, 56, 69, 57, 43, 79, 78, 66, 49, 34, 49, 78, 45],
},
{
name: '已核查修改中',
type: 'bar',
stack: '总数',
data: [39, 43, 49, 27, 53, 29, 38, 49, 29, 40, 40, 27, 54],
itemStyle:{color: '#DC143C'}
},
{
name: '已核查提交审核',
type: 'bar',
stack: '总数',
data: [48, 42, 43, 53, 47, 39, 25, 26, 54, 34, 39, 24, 14],
itemStyle:{color:'#00BB00'}
},
{
name: '平均值',
type: 'line',
yAxisIndex: 1,
// yAxisIndex: 1,
data: [49, 45, 53, 47, 49, 43, 48, 41, 38, 39, 41, 43, 37],
itemStyle:{color: '#FFDC35'}
},
{
name: '平均值2倍',
type: 'line',
yAxisIndex: 1,
// yAxisIndex: 1,
data: [98, 90, 106, 94, 98, 86, 96, 82, 76, 78, 82, 86, 74],
itemStyle:{color: '#FF00FF'}
},
{
name: '平均值3倍',
type: 'line',
yAxisIndex: 1,
// yAxisIndex: 1,
data: [143, 135, 159, 143, 127, 144, 144, 123, 114, 117, 124, 129, 111],
itemStyle:{color: '#999'}
},
@ -353,173 +359,92 @@ export class notVerifiedComponent implements OnInit {
ngOnInit(): void {
window.setTimeout(()=>{
this.oneInit()
this.twoInit()
},0)
}
ngOnDestroy () {
this.oneEcharts.clear()
this.items.forEach((element,index) => {
element.echart.clear()
});
}
oneEcharts:any;
oneInit () {
this.oneEcharts = echarts.init(document.getElementById('center'), 'skinUpp');
var option = {
grid: {
top: 50,
left:40,
right: 20,
bottom: 20,
},
// 标题
title: {
text: '未核查',
top: -4,
subtext: '总数剩余 5850',
left: 'center',
textStyle:{
//文字颜色
color:'#000',
fontSize: 22,
}
},
subtextStyle: {color:'#999',}
},
//提示框
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['剩余未核查','总数'],
textStyle: { color: '#000' }
},
// x轴
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月','10月','11月','12月'],
boundaryGap: false,
type: 'value',
boundaryGap: [0, 0.01],
axisLabel: {
color: "#000", //刻度线标签颜色
},
//设置坐标轴字体颜色和宽度
axisLine: {
lineStyle: {
color: "#000",
},
lineStyle: {color: "#000",}
},
splitLine: {//分割线配置
show:true,
lineStyle: {
color: '#999',
}
}
},
// y轴
yAxis: {
type: 'value',
name: '个',
type: 'category',
//设置坐标轴字体颜色和宽度
axisLine: {
lineStyle: {color: "#000"},
},
axisLabel: {
color: "#000" //刻度线标签颜色
color: "#000", //刻度线标签颜色
formatter: '{value}'
},
//设置坐标轴字体颜色和宽度
axisLine: {
lineStyle: {
color: "#000",
}
}
data: ['浦东支队','黄浦支队','徐汇支队','长宁支队','静安支队','普陀支队','虹口支队','杨浦支队','闵行支队','宝山支队','嘉定支队','崇明支队','金山支队'],
},
// 数据
series: [{
name: '单位预案编制数量',
type: 'line',
data: [1245, 1345, 1004, 790, 998, 660, 773, 789, 799, 1144, 953, 1170,],
}
],
};
this.oneEcharts.setOption(option);
}
months:any = ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
echartIds:any = ['one','two','three','four','five','six','seven','eight','nine','ten','eleven','twelve']
items:any = [{echart:null},{echart:null},{echart:null},{echart:null},{echart:null},{echart:null},{echart:null},{echart:null},{echart:null},{echart:null},{echart:null},{echart:null}]
twoInit () {
this.months.forEach((element,index) => {
this.items[index].echart = echarts.init(document.getElementById(this.echartIds[index]), 'skinUpp');
var option = {
title: {
text: element,
top: -4,
left: 'center',
textStyle:{
color:'#000',
fontSize: 18,
}
},
//提示框
tooltip: {
trigger: 'axis',
},
legend: {
data: ['未核查'],
textStyle: { color: '#000' }
},
xAxis: [{
axisLabel: {
color: "#000", //刻度线标签颜色
interval: 0,
formatter:function(value){
var ret = "";//拼接加\n返回的类目项
var maxLength = 2;//每项显示文字个数
var valLength = value.length;//X轴类目项的文字个数
var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
if (rowN > 1) { //如果类目项的文字大于3,
for (var i = 0; i < rowN; i++) {
var temp = "";//每次截取的字符串
var start = i * maxLength;//开始截取的位置
var end = start + maxLength;//结束截取的位置
//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
temp = value.substring(start, end) + "\n";
ret += temp;
} //凭借最终的字符串
return ret;
}else {
return value;
}
} //function
series: [
{
name: '剩余未核查',
type: 'bar',
stack: '差值',
data: [289, 307, 334, 356, 389, 413, 456, 477, 489, 503, 540, 570, 599],
itemStyle:{color:'#C80000'},
label: {
show: true,
position: 'insideRight',
color: '#fff'
},
//设置坐标轴字体颜色和宽度
axisLine: {
lineStyle: {color: "#000",}
},
type: 'category',
data: ['浦东支队','黄浦支队','徐汇支队','长宁支队','静安支队','普陀支队','虹口支队','杨浦支队','闵行支队','宝山支队','嘉定支队','崇明支队','金山支队'],
axisPointer: {type: 'shadow'}
}],
yAxis: [
{
//设置坐标轴字体颜色和宽度
axisLine: {
lineStyle: {color: "#000"},
},
type: 'value',
name: '个',
axisLabel: {
color: "#000", //刻度线标签颜色
formatter: '{value}'
}
}
],
series: [
{
name: '未核查',
type: 'bar',
data: [48, 36, 49, 37, 33, 59, 58, 46, 39, 34, 39, 68, 45],
},
{
name: '总数',
type: 'bar',
stack: '差值',
data: [1520, 1430, 1170, 1441, 1094, 1147, 1098, 1142, 1274, 1400, 1265, 1341, 1200],
itemStyle:{color:'#999'},
label: {
show: true,
position: 'insideRight',
color: '#fff'
},
]
};
this.items[index].echart.setOption(option);
this.items[index].echart.on('click', (params) => {
this.echartsData.scheduledUpdatesType = 1
this.echartsData.scheduledUpdatesName = this.months[index]
this.echartsData.scheduledUpdatesToggle = false
});
},
]
};
this.oneEcharts.setOption(option);
this.oneEcharts.on('click', (params) => {
this.echartsData.scheduledUpdatesType = 1
this.echartsData.scheduledUpdatesName = params.name
this.echartsData.scheduledUpdatesToggle = false
});
}
@ -585,61 +510,51 @@ export class detailedInformationComponent implements OnInit {
lineStyle: {color: "#000"},
},
type: 'value',
name: '个',
axisLabel: {
color: "#000", //刻度线标签颜色
formatter: '{value}'
}
},
{
//设置坐标轴字体颜色和宽度
axisLine: {
lineStyle: {color: "#000"},
},
type: 'value',
name: '个',
axisLabel: {
color: "#000", //刻度线标签颜色
formatter: '{value}'
}
}
],
series: [
{
name: '已核查无需修改',
type: 'bar',
stack: '总数',
data: [68, 56, 69, 57, 43, 79, 78, 66, 49, 34, 49, 78, 45],
},
{
name: '已核查修改中',
type: 'bar',
stack: '总数',
data: [39, 43, 49, 27, 53, 29, 38, 49, 29, 40, 40, 27, 54],
itemStyle:{color: '#DC143C'}
},
{
name: '已核查提交审核',
type: 'bar',
stack: '总数',
data: [48, 42, 43, 53, 47, 39, 25, 26, 54, 34, 39, 24, 14],
itemStyle:{color:'#00BB00'}
},
{
name: '平均值',
type: 'line',
yAxisIndex: 1,
// yAxisIndex: 1,
data: [49, 45, 53, 47, 49, 43, 48, 41, 38, 39, 41, 43, 37],
itemStyle:{color: '#FFDC35'}
},
{
name: '平均值2倍',
type: 'line',
yAxisIndex: 1,
// yAxisIndex: 1,
data: [98, 90, 106, 94, 98, 86, 96, 82, 76, 78, 82, 86, 74],
itemStyle:{color: '#FF00FF'}
},
{
name: '平均值3倍',
type: 'line',
yAxisIndex: 1,
// yAxisIndex: 1,
data: [143, 135, 159, 143, 127, 144, 144, 123, 114, 117, 124, 129, 111],
itemStyle:{color: '#999'}
},
@ -650,72 +565,69 @@ export class detailedInformationComponent implements OnInit {
var options = {
title: {
text: this.echartsData.scheduledUpdatesName,
top: -4,
left: 'center',
textStyle:{
color:'#000',
fontSize: 18,
}
},
},
//提示框
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['未核查'],
data: ['剩余未核查','总数'],
textStyle: { color: '#000' }
},
xAxis: [{
xAxis: {
type: 'value',
boundaryGap: [0, 0.01],
axisLabel: {
color: "#000", //刻度线标签颜色
interval: 0,
formatter:function(value){
var ret = "";//拼接加\n返回的类目项
var maxLength = 2;//每项显示文字个数
var valLength = value.length;//X轴类目项的文字个数
var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
if (rowN > 1) { //如果类目项的文字大于3,
for (var i = 0; i < rowN; i++) {
var temp = "";//每次截取的字符串
var start = i * maxLength;//开始截取的位置
var end = start + maxLength;//结束截取的位置
//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
temp = value.substring(start, end) + "\n";
ret += temp;
} //凭借最终的字符串
return ret;
}else {
return value;
}
} //function
},
//设置坐标轴字体颜色和宽度
axisLine: {
lineStyle: {color: "#000",}
},
},
yAxis: {
type: 'category',
data: ['浦东支队','黄浦支队','徐汇支队','长宁支队','静安支队','普陀支队','虹口支队','杨浦支队','闵行支队','宝山支队','嘉定支队','崇明支队','金山支队'],
axisPointer: {type: 'shadow'}
}],
yAxis: [
//设置坐标轴字体颜色和宽度
axisLine: {
lineStyle: {color: "#000"},
},
axisLabel: {
color: "#000", //刻度线标签颜色
formatter: '{value}'
},
data: ['浦东中队','黄浦中队','徐汇中队','长宁中队','静安中队','普陀中队','虹口中队','杨浦中队','闵行中队','宝山中队','嘉定中队','崇明中队','金山中队'],
},
series: [
{
//设置坐标轴字体颜色和宽度
axisLine: {
lineStyle: {color: "#000"},
name: '剩余未核查',
type: 'bar',
stack: '差值',
data: [13, 19, 21, 27, 35, 39, 41, 43, 47, 47, 49, 50, 51],
itemStyle:{color:'#C80000'},
label: {
show: true,
position: 'insideRight',
color: '#fff'
},
type: 'value',
name: '个',
axisLabel: {
color: "#000", //刻度线标签颜色
formatter: '{value}'
}
}
],
series: [
},
{
name: '未核查',
name: '总数',
type: 'bar',
data: [48, 36, 49, 37, 33, 59, 58, 46, 39, 34, 39, 68, 45],
stack: '差值',
data: [120, 130, 170, 141, 194, 147, 109, 142, 174, 100, 125, 131, 120],
itemStyle:{color:'#999'},
label: {
show: true,
position: 'insideRight',
color: '#fff'
},
},
]
};
@ -743,6 +655,23 @@ export class moreTableComponent implements OnInit {
}
displayedColumns: string[]=['team','header','time'];
dataSource:any = [
{content: '1月份已核查案件 高于平均值2倍', time: '2020-02-03',team: '浦东支队'},
{content: '1月份已核查案件 高于平均值2倍', time: '2020-02-05',team: '徐汇支队'},
{content: '1月份已核查案件 高于平均值2倍', time: '2020-02-05',team: '普陀支队'},
{content: '1月份已核查案件 高于平均值', time: '2020-02-05',team: '黄浦支队'},
{content: '1月份已核查案件 高于平均值', time: '2020-02-05',team: '长宁支队'},
{content: '1月份已核查案件 高于平均值2倍', time: '2020-02-05',team: '静安支队'},
{content: '1月份已核查案件 高于平均值2倍', time: '2020-02-05',team: '虹口支队'},
{content: '1月份已核查案件 高于平均值2倍', time: '2020-02-07',team: '杨浦支队'},
{content: '1月份已核查案件 高于平均值2倍', time: '2020-02-07',team: '闵行支队'},
{content: '1月份已核查案件 高于平均值2倍', time: '2020-02-07',team: '宝山支队'},
{content: '1月份已核查案件 高于平均值', time: '2020-02-07',team: '嘉定支队'},
{content: '1月份已核查案件 高于平均值', time: '2020-02-07',team: '崇明支队'},
{content: '1月份已核查案件 高于平均值2倍', time: '2020-02-07',team: '金山支队'},
]
}

2
src/app/statistic-analysis/state/page-one/page-one.component.ts
Unescape View File

@ -30,8 +30,6 @@ export class PageOneComponent implements OnInit {
/* 首页饼状图 */
initCharts(){
//console.log(document.getElementById('indexBzt'))
var ec = echarts as any;
var indexBzt = ec.init(document.getElementById('indexBzt'));
var options={

11
src/app/statistic-analysis/state/page-two-time/page-two-time.component.html
Unescape View File

@ -2,14 +2,14 @@
<div class="header">
<div class="queryField" *ngIf="!isQuery">
<div class="queryField" *ngIf="!isQuery && echartsData.statefulInspectionToggle">
<mat-radio-group [(ngModel)]="selectType">
<mat-radio-button value="month">月</mat-radio-button>
<mat-radio-button value="year" style="margin-left: 10px;">年</mat-radio-button>
</mat-radio-group>
</div>
<div class="queryField" *ngIf="selectType=='month' && !isQuery">
<div class="queryField" *ngIf="selectType=='month' && !isQuery && echartsData.statefulInspectionToggle">
<form #form="ngForm" (ngSubmit)="monthSubmit(form.value)">
<span>开始年份:</span>
<mat-form-field>
@ -39,7 +39,7 @@
</form>
</div>
<div class="queryField" *ngIf="selectType=='year' && !isQuery">
<div class="queryField" *ngIf="selectType=='year' && !isQuery && echartsData.statefulInspectionToggle">
<form #form2="ngForm" (ngSubmit)="yearSubmit(form2.value)">
<span>开始年份:</span>
<mat-form-field>
@ -58,8 +58,9 @@
</div>
<div class="fixedCss">
<button mat-raised-button (click)='toggleTrue()' [ngClass]="{'selectButton': isQuery}">横向查询</button>
<button mat-raised-button style="margin-left: 10px;" (click)='toggleFalse()' [ngClass]="{'selectButton': !isQuery}">纵向查询</button>
<button mat-raised-button (click)='goBack()' *ngIf="!echartsData.statefulInspectionToggle">返回</button>
<button mat-raised-button (click)='toggleTrue()' [ngClass]="{'selectButton': isQuery}" style="margin:0 10px;" >横向查询</button>
<button mat-raised-button (click)='toggleFalse()' [ngClass]="{'selectButton': !isQuery}">纵向查询</button>
</div>
</div>

2
src/app/statistic-analysis/state/page-two-time/page-two-time.component.scss
Unescape View File

@ -40,7 +40,7 @@
}
.fixedCss{
position: fixed;
top: 78px;
top: 81px;
right: 32px;
}
}

5
src/app/statistic-analysis/state/page-two-time/page-two-time.component.ts
Unescape View File

@ -37,6 +37,11 @@ export class PageTwoTimeComponent implements OnInit {
this.echartsData.statefulInspectionToggle = true
}
//返回
goBack () {
this.echartsData.statefulInspectionToggle = true
}
selectType:string = 'month'; //选择当前的 查询类型 按月/年
//查询数据

1
src/app/statistic-analysis/state/page-zhong-dui-details/page-zhong-dui-details.component.ts
Unescape View File

@ -41,7 +41,6 @@ export class PageZhongDuiDetailsComponent implements OnInit {
tooltip: {
trigger: 'item',
formatter: (params)=>{
console.log(666,params)
return this.tableTooltip(params)
},
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度

Write Preview
Loading…
Cancel
Save