38 changed files with 1692 additions and 149 deletions
@ -0,0 +1,30 @@
|
||||
<div class="box"> |
||||
<div class="header"> |
||||
<div class="queryField"> |
||||
<form #form="ngForm" (ngSubmit)="Submit(form.value)"> |
||||
<span>查询年份:</span> |
||||
<mat-form-field> |
||||
<mat-select [(ngModel)]="selectOneYear" name='selectOneYear'> |
||||
<mat-option *ngFor="let item of years" [value]="item">{{item}}</mat-option> |
||||
</mat-select> |
||||
</mat-form-field> |
||||
<span>查询月份:</span> |
||||
<mat-form-field> |
||||
<mat-select [(ngModel)]="selectStartMonth" name='selectStartMonth'> |
||||
<mat-option *ngFor="let item of selectMonth" [value]="item">{{item}}</mat-option> |
||||
</mat-select> |
||||
</mat-form-field> |
||||
<button type="submit" mat-raised-button color="primary">查询</button> |
||||
</form> |
||||
</div> |
||||
|
||||
<div class="btnbox"> |
||||
<button mat-stroked-button (click)="backBtn()">返回</button> |
||||
</div> |
||||
</div> |
||||
<div class="echartsbox"> |
||||
<div id="barEchart"> |
||||
|
||||
</div> |
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,76 @@
|
||||
.box{ |
||||
width: 100%; |
||||
height: 92%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
overflow: hidden; |
||||
position: relative; |
||||
.echartsbox{ |
||||
width: 100%; |
||||
height: 100%; |
||||
// overflow: auto; |
||||
} |
||||
#Line{ |
||||
width: 50%; |
||||
height: 420px; |
||||
margin: 50px auto; |
||||
} |
||||
} |
||||
.publicCss{ |
||||
height: 350px; |
||||
width: 50%; |
||||
display: inline-block; |
||||
box-sizing: border-box; |
||||
padding: 20px; |
||||
} |
||||
|
||||
//头部搜索栏 |
||||
.header { |
||||
border-bottom: 1px solid #999; |
||||
height: 80px; |
||||
min-height: 81px;; |
||||
box-sizing: border-box; |
||||
// padding: 0 15px; |
||||
display: flex; |
||||
flex-direction: row; |
||||
flex-wrap: wrap; |
||||
align-items:center; |
||||
justify-content:center; |
||||
.queryField { |
||||
margin: 0 10px; |
||||
font-size: 14px; |
||||
.mat-form-field { |
||||
width: 130px; |
||||
max-height: 50px;; |
||||
margin: 0 15px 0 10px; |
||||
} |
||||
} |
||||
.btnbox{ |
||||
height: 80px; |
||||
display: flex; |
||||
flex-direction:column; |
||||
justify-content: space-around; |
||||
position: fixed; |
||||
top: 64px; |
||||
right: 4%; |
||||
width: 88px; |
||||
button{ |
||||
width: 88px; |
||||
height: 36px; |
||||
} |
||||
|
||||
} |
||||
} |
||||
.echartsbox{ |
||||
width: 100%; |
||||
height: 100%; |
||||
overflow: auto; |
||||
#barEchart{ |
||||
width: 100%; |
||||
height: 350px; |
||||
position: absolute; |
||||
left: 50%; |
||||
top: 50%; |
||||
transform: translate(-50%,-50%); |
||||
} |
||||
} |
||||
@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { AddUnitThreeBarDetailsComponent } from './add-unit-three-bar-details.component'; |
||||
|
||||
describe('AddUnitThreeBarDetailsComponent', () => { |
||||
let component: AddUnitThreeBarDetailsComponent; |
||||
let fixture: ComponentFixture<AddUnitThreeBarDetailsComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ AddUnitThreeBarDetailsComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(AddUnitThreeBarDetailsComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,179 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
import { Router } from '@angular/router'; |
||||
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog'; |
||||
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; |
||||
import { ActivatedRoute } from '@angular/router'; |
||||
import { EchartsDataService } from '../../echarts-data.service'; |
||||
declare var echarts: any; |
||||
@Component({ |
||||
selector: 'app-add-unit-three-bar-details', |
||||
templateUrl: './add-unit-three-bar-details.component.html', |
||||
styleUrls: ['./add-unit-three-bar-details.component.scss'] |
||||
}) |
||||
export class AddUnitThreeBarDetailsComponent implements OnInit { |
||||
|
||||
constructor(private router: Router,public dialog: MatDialog,public snackBar: MatSnackBar,private serviceData: EchartsDataService,public route: ActivatedRoute) { } |
||||
time:String |
||||
buildingTypeName:String |
||||
level:String |
||||
|
||||
setTimeoutObj//延时器需要清除
|
||||
|
||||
ngOnInit(): void { |
||||
this.dateInit () |
||||
this.route.queryParams.subscribe(params => { |
||||
this.time = params['time']; |
||||
this.buildingTypeName = params['buildingTpye']; |
||||
this.level = params['level']; |
||||
}); |
||||
this.setTimeoutObj = window.setTimeout(()=>{ |
||||
this.detailEcharts() |
||||
},0) |
||||
} |
||||
ngOnDestroy(){ |
||||
window.clearTimeout(this.setTimeoutObj); |
||||
this.detailPlanEchart.clear() |
||||
this.detailPlanEchart.dispose() |
||||
} |
||||
|
||||
selectType:string = 'month'; //选择当前的 查询类型 按月/年
|
||||
|
||||
//查询数据
|
||||
years:any = [] |
||||
selectMonth:any = [1,2,3,4,5,6,7,8,9,10,11,12] |
||||
|
||||
//日期初始化
|
||||
dateInit () { |
||||
let date = (new Date()).getFullYear() |
||||
for (let i=date; i>=date-10;i--) { |
||||
this.years.unshift(i) |
||||
} |
||||
} |
||||
selectOneYear:any = (new Date()).getFullYear() //开始年份
|
||||
selectStartMonth:any = 1 //开始月份
|
||||
Submit (e) { |
||||
|
||||
} |
||||
selectStartYear:any = (new Date()).getFullYear() //开始年份
|
||||
|
||||
|
||||
topTextlabel = { |
||||
show: true, // 开启显示
|
||||
position: 'top', // 在上方显示
|
||||
distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
|
||||
verticalAlign: 'middle', |
||||
textStyle: { // 数值样式
|
||||
color: 'black', |
||||
fontSize: 12 |
||||
} |
||||
}//柱状图数值顶部显示
|
||||
zhongNameData = ["浦东中队","黄埔中队","徐汇中队","长宁中队","静安中队","普陀中队","虹口中队","杨浦中队","闵行中队","宝山中队","嘉定中队"] |
||||
zhongNumData = [200,190,180,170,160,150,140,130,120,110,100] |
||||
|
||||
zhiNameData = ["浦东支队","黄埔支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队"] |
||||
zhiNumData = [300,290,280,270,260,250,240,230,220,210,200] |
||||
|
||||
|
||||
detailPlanEchart |
||||
option |
||||
detailEcharts(){ |
||||
this.detailPlanEchart = echarts.init(document.getElementById('barEchart'));
|
||||
this.option = { |
||||
title: { |
||||
text: this.time + '(' +this.buildingTypeName + ')', |
||||
left: "center", |
||||
textStyle: { |
||||
fontSize: 28 |
||||
} |
||||
}, |
||||
xAxis: { |
||||
type: 'category', |
||||
data: this.zhiNameData, |
||||
// axisLabel: this.axisLabel
|
||||
}, |
||||
yAxis: { |
||||
type: 'value' |
||||
}, |
||||
tooltip: { |
||||
trigger: 'item', |
||||
formatter: (params)=>{ |
||||
return this.tableTooltip(params) |
||||
}, |
||||
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
|
||||
borderWidth:'1', |
||||
borderRadius :'0', |
||||
position:this.serviceData.tableTooltipNoShow2 |
||||
}, |
||||
series: [{ |
||||
data: this.zhiNumData, |
||||
type: 'bar', |
||||
showBackground: true, |
||||
barWidth :'58', |
||||
backgroundStyle: { |
||||
color: 'rgba(220, 220, 220, 0.8)' |
||||
}, |
||||
label: this.topTextlabel |
||||
}] |
||||
|
||||
}; |
||||
this.detailPlanEchart.setOption(this.option); |
||||
this.detailPlanEchart.on("click",(params)=>{ |
||||
if(this.level == "zhidui"){//如果是支队则跳转
|
||||
// this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time/three_barDetails'],{queryParams:{'level':'zhongdui','time':params.name,'buildingTpye':this.buildingTypeName}});
|
||||
this.level = "zhongdui" |
||||
this.option.title.text = params.name + '(' +this.buildingTypeName + ')' |
||||
this.option.xAxis.data = this.zhongNameData |
||||
this.option.series[0].data = this.zhongNumData |
||||
this.detailPlanEchart.setOption(this.option) |
||||
}else{ |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('已到达最底层','确定',config); |
||||
} |
||||
}) |
||||
} |
||||
//返回按钮
|
||||
backBtn(){ |
||||
if(this.level == "zhongdui"){ |
||||
this.level = "zhidui" |
||||
this.option.title.text = this.time + '(' +this.buildingTypeName + ')' |
||||
this.option.xAxis.data = this.zhiNameData |
||||
this.option.series[0].data = this.zhiNumData |
||||
this.detailPlanEchart.setOption(this.option) |
||||
}else{ |
||||
window.history.go(-1) |
||||
} |
||||
}
|
||||
|
||||
tableTooltip(params:any){ |
||||
var data |
||||
if(this.level == "zhidui"){ |
||||
data = this.serviceData.tableDataZhong |
||||
}else{ |
||||
data = [ |
||||
{name:params.name,number:params.value,zhanbi:(params.value/1340 * 100).toFixed(2) + "%"} |
||||
] |
||||
} |
||||
var res = '<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#000000;font-size:30px;text-align: center;display:block;">'+params.name+'</span></div>' |
||||
res+='</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px; background:#FFFFFF; color:#000000;border-collapse:collapse;"cellspacing="0"; >'; |
||||
res+='<thead><tr>'; |
||||
res+='<td style="text-align:center;width:30%;border:1px solid #000000">名称</td>'; |
||||
res+='<td style="text-align:center;width:30%;border:1px solid #000000">数量</td>' |
||||
res+='<td style="text-align:center;width:30%;border:1px solid #000000">总占比</td>' |
||||
res+='</tr></thead>' |
||||
res+='<tbody>'; |
||||
for(var i=0;i<data.length;i++){ |
||||
res+='<tr>' |
||||
res+='<td style="text-align:center;border:1px solid #000000">'+data[i].name+'</td>' |
||||
res+='<td style="text-align:center;border:1px solid #000000">'+data[i].number+'</td>' |
||||
res+='<td style="text-align:center;border:1px solid #000000">'+data[i].zhanbi+'</td></tr>' |
||||
} |
||||
|
||||
res+='</tbody>' |
||||
// res+='<tfoot><td style="text-align:center;border:1px solid #000000">总计</td><td style="text-align:center;border:1px solid #000000">1356</td><td style="text-align:center;border:1px solid #000000">19%</td></tfoot>'
|
||||
res+='</table></div></div>' |
||||
return res |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,24 @@
|
||||
<div class="box"> |
||||
<div class="header"> |
||||
<div class="queryField"> |
||||
<form #form="ngForm" (ngSubmit)="Submit(form.value)"> |
||||
<span>查询年份:</span> |
||||
<mat-form-field> |
||||
<mat-select [(ngModel)]="selectOneYear" name='selectOneYear'> |
||||
<mat-option *ngFor="let item of years" [value]="item">{{item}}</mat-option> |
||||
</mat-select> |
||||
</mat-form-field> |
||||
<button type="submit" mat-raised-button color="primary">查询</button> |
||||
</form> |
||||
</div> |
||||
|
||||
<div class="btnbox"> |
||||
<button mat-stroked-button (click)="backBtn()">返回</button> |
||||
</div> |
||||
</div> |
||||
<div class="echartsbox"> |
||||
<div id="barEchart"> |
||||
|
||||
</div> |
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,76 @@
|
||||
.box{ |
||||
width: 100%; |
||||
height: 92%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
overflow: hidden; |
||||
position: relative; |
||||
.echartsbox{ |
||||
width: 100%; |
||||
height: 100%; |
||||
overflow: auto; |
||||
} |
||||
#Line{ |
||||
width: 50%; |
||||
height: 420px; |
||||
margin: 50px auto; |
||||
} |
||||
} |
||||
.publicCss{ |
||||
height: 350px; |
||||
width: 50%; |
||||
display: inline-block; |
||||
box-sizing: border-box; |
||||
padding: 20px; |
||||
} |
||||
|
||||
//头部搜索栏 |
||||
.header { |
||||
border-bottom: 1px solid #999; |
||||
height: 80px; |
||||
min-height: 81px;; |
||||
box-sizing: border-box; |
||||
// padding: 0 15px; |
||||
display: flex; |
||||
flex-direction: row; |
||||
flex-wrap: wrap; |
||||
align-items:center; |
||||
justify-content:center; |
||||
.queryField { |
||||
margin: 0 10px; |
||||
font-size: 14px; |
||||
.mat-form-field { |
||||
width: 130px; |
||||
max-height: 50px;; |
||||
margin: 0 15px 0 10px; |
||||
} |
||||
} |
||||
.btnbox{ |
||||
height: 80px; |
||||
display: flex; |
||||
flex-direction:column; |
||||
justify-content: space-around; |
||||
position: fixed; |
||||
top: 64px; |
||||
right: 4%; |
||||
width: 88px; |
||||
button{ |
||||
width: 88px; |
||||
height: 36px; |
||||
} |
||||
|
||||
} |
||||
} |
||||
.echartsbox{ |
||||
width: 100%; |
||||
height: 100%; |
||||
overflow: auto; |
||||
#barEchart{ |
||||
width: 60%; |
||||
height: 350px; |
||||
position: absolute; |
||||
left: 50%; |
||||
top: 50%; |
||||
transform: translate(-50%,-50%); |
||||
} |
||||
} |
||||
@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { AddUnitThreeLineDetailsComponent } from './add-unit-three-line-details.component'; |
||||
|
||||
describe('AddUnitThreeLineDetailsComponent', () => { |
||||
let component: AddUnitThreeLineDetailsComponent; |
||||
let fixture: ComponentFixture<AddUnitThreeLineDetailsComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ AddUnitThreeLineDetailsComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(AddUnitThreeLineDetailsComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,194 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
import { Router } from '@angular/router'; |
||||
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog'; |
||||
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; |
||||
import { ActivatedRoute } from '@angular/router'; |
||||
import { EchartsDataService } from '../../echarts-data.service'; |
||||
declare var echarts: any; |
||||
@Component({ |
||||
selector: 'app-add-unit-three-line-details', |
||||
templateUrl: './add-unit-three-line-details.component.html', |
||||
styleUrls: ['./add-unit-three-line-details.component.scss'] |
||||
}) |
||||
export class AddUnitThreeLineDetailsComponent implements OnInit { |
||||
|
||||
constructor(private router: Router,public dialog: MatDialog,public snackBar: MatSnackBar,private serviceData: EchartsDataService,public route: ActivatedRoute) { } |
||||
year:String |
||||
buildingTypeName:String |
||||
level:String |
||||
setTimeoutObj//延时器需要清除
|
||||
ngOnInit(): void { |
||||
this.dateInit () |
||||
this.route.queryParams.subscribe(params => { |
||||
this.year = params['year']; |
||||
this.buildingTypeName = params['buildingType']; |
||||
}); |
||||
this.setTimeoutObj = window.setTimeout(()=>{ |
||||
this.detailEcharts() |
||||
}) |
||||
} |
||||
|
||||
ngOnDestroy(){ |
||||
window.clearTimeout(this.setTimeoutObj); |
||||
this.detailPlanEchart.clear() |
||||
this.detailPlanEchart.dispose() |
||||
} |
||||
|
||||
selectType:string = 'month'; //选择当前的 查询类型 按月/年
|
||||
|
||||
//查询数据
|
||||
years:any = [] |
||||
selectMonth:any = [1,2,3,4,5,6,7,8,9,10,11,12] |
||||
|
||||
//日期初始化
|
||||
dateInit () { |
||||
let date = (new Date()).getFullYear() |
||||
for (let i=date; i>=date-10;i--) { |
||||
this.years.unshift(i) |
||||
} |
||||
} |
||||
selectOneYear:any = (new Date()).getFullYear() //开始年份
|
||||
selectStartMonth:any = 1 //开始月份
|
||||
Submit (e) { |
||||
|
||||
} |
||||
selectStartYear:any = (new Date()).getFullYear() //开始年份
|
||||
|
||||
topTextlabel = { |
||||
show: true, // 开启显示
|
||||
position: 'top', // 在上方显示
|
||||
distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
|
||||
verticalAlign: 'middle', |
||||
textStyle: { // 数值样式
|
||||
color: 'black', |
||||
fontSize: 12 |
||||
} |
||||
}//柱状图数值顶部显示
|
||||
zhongNameData = ["浦东中队","黄埔中队","徐汇中队","长宁中队","静安中队","普陀中队","虹口中队","杨浦中队","闵行中队","宝山中队","嘉定中队"] |
||||
zhongNumData = [200,190,180,170,160,150,140,130,120,110,100] |
||||
|
||||
zhiNameData = ["浦东支队","黄埔支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队"] |
||||
zhiNumData = [300,290,280,270,260,250,240,230,220,210,200] |
||||
|
||||
|
||||
detailPlanEchart |
||||
option |
||||
date = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月'] |
||||
dateNum = [270, 253, 244, 199, 189, 173, 160, 198,200] |
||||
|
||||
detailEcharts(){ |
||||
this.detailPlanEchart = echarts.init(document.getElementById('barEchart'), 'skinUpp');
|
||||
this.option = { |
||||
grid: { |
||||
top: 50, |
||||
left:40, |
||||
right: 20, |
||||
bottom: 20, |
||||
}, |
||||
// 标题
|
||||
title: { |
||||
text: this.buildingTypeName + '(' + this.year + ')', |
||||
top: -4, |
||||
left: 'center', |
||||
textStyle:{ |
||||
//文字颜色
|
||||
color:'#000', |
||||
} |
||||
}, |
||||
//提示框
|
||||
tooltip: { |
||||
trigger: 'axis', |
||||
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
|
||||
borderWidth:'1', |
||||
borderRadius :'0', |
||||
formatter: (params)=>{ |
||||
if(params[0].seriesName == "year"){ |
||||
return this.serviceData.tableTooltip(this.serviceData.monthTooltip,params[0].name) |
||||
}else{ |
||||
return this.serviceData.tableTooltip(this.serviceData.tableDataZhi,params[0].name) |
||||
} |
||||
}, |
||||
position:this.serviceData.tableTooltipNoShow2 |
||||
}, |
||||
// x轴
|
||||
xAxis: { |
||||
type: 'category', |
||||
data: this.date, |
||||
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: 'xxx', |
||||
type: 'line', |
||||
data: this.dateNum, |
||||
} |
||||
], |
||||
}; |
||||
this.detailPlanEchart.setOption(this.option); |
||||
this.detailPlanEchart.getZr().on('click',params=>{ |
||||
const pointInPixel= [params.offsetX, params.offsetY]; |
||||
if (this.detailPlanEchart.containPixel('grid',pointInPixel)) { |
||||
let xIndex=this.detailPlanEchart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; |
||||
/*事件处理代码书写位置*/ |
||||
this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time/three_barDetails'],{queryParams:{'level':'zhidui','time':this.option.xAxis.data[xIndex],'buildingTpye':this.buildingTypeName}}); |
||||
} |
||||
}); |
||||
} |
||||
//返回按钮
|
||||
backBtn(){ |
||||
window.history.go(-1) |
||||
}
|
||||
|
||||
tableTooltip(params:any){ |
||||
var data = [ |
||||
{name:params.name,number:params.value,zhanbi:(params.value/1340 * 100).toFixed(2) + "%"} |
||||
] |
||||
var res = '<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#000000;font-size:30px;text-align: center;display:block;">'+params.name+'</span></div>' |
||||
res+='</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px; background:#FFFFFF; color:#000000;border-collapse:collapse;"cellspacing="0"; >'; |
||||
res+='<thead><tr>'; |
||||
res+='<td style="text-align:center;width:30%;border:1px solid #000000">名称</td>'; |
||||
res+='<td style="text-align:center;width:30%;border:1px solid #000000">数量</td>' |
||||
res+='<td style="text-align:center;width:30%;border:1px solid #000000">总占比</td>' |
||||
res+='</tr></thead>' |
||||
res+='<tbody>'; |
||||
for(var i=0;i<data.length;i++){ |
||||
res+='<tr>' |
||||
res+='<td style="text-align:center;border:1px solid #000000">'+data[i].name+'</td>' |
||||
res+='<td style="text-align:center;border:1px solid #000000">'+data[i].number+'</td>' |
||||
res+='<td style="text-align:center;border:1px solid #000000">'+data[i].zhanbi+'</td></tr>' |
||||
} |
||||
|
||||
res+='</tbody>' |
||||
// res+='<tfoot><td style="text-align:center;border:1px solid #000000">总计</td><td style="text-align:center;border:1px solid #000000">1356</td><td style="text-align:center;border:1px solid #000000">19%</td></tfoot>'
|
||||
res+='</table></div></div>' |
||||
return res |
||||
} |
||||
} |
||||
@ -1 +1,13 @@
|
||||
<p>delete-four works!</p> |
||||
<!-- |
||||
* @Descripttion: |
||||
* @version: |
||||
* @Author: sueRimn |
||||
* @Date: 2020-09-02 16:22:58 |
||||
* @LastEditors: sueRimn |
||||
* @LastEditTime: 2020-09-05 08:48:27 |
||||
--> |
||||
<div class="detailBox"> |
||||
<div id="detailBox"> |
||||
|
||||
</div> |
||||
</div> |
||||
|
||||
@ -0,0 +1,13 @@
|
||||
.detailBox{ |
||||
width: 100%; |
||||
height: 100%; |
||||
position: relative; |
||||
#detailBox{ |
||||
width: 100%; |
||||
height: 350px; |
||||
position: absolute; |
||||
left: 50%; |
||||
top: 45%; |
||||
transform: translate(-50%,-50%); |
||||
} |
||||
} |
||||
@ -1 +1,26 @@
|
||||
<p>delete-there works!</p> |
||||
<!-- |
||||
* @Descripttion: |
||||
* @version: |
||||
* @Author: sueRimn |
||||
* @Date: 2020-09-02 16:22:35 |
||||
* @LastEditors: sueRimn |
||||
* @LastEditTime: 2020-09-04 16:19:53 |
||||
--> |
||||
<div class="head"> |
||||
<select style="width: 80px;height: 50px; margin-left: 200px;"> |
||||
<option value ="2020">2020</option> |
||||
</select> |
||||
<select style="width: 80px;height: 50px; margin-left: 50px;" > |
||||
<option value ="1">1</option> |
||||
<option value ="1">2</option> |
||||
<option value ="1">3</option> |
||||
<option value ="1">4</option> |
||||
<option value ="1">5</option> |
||||
<option value ="1">6</option> |
||||
<option value ="1">7</option> |
||||
<option value ="1">8</option> |
||||
</select> |
||||
<button class="chaxun">查询</button> |
||||
|
||||
</div> |
||||
<div id="zhidui" class="zhu"></div> |
||||
|
||||
@ -0,0 +1,22 @@
|
||||
.head{ |
||||
//display: flex; |
||||
border-bottom:2px solid #d4dde4; |
||||
width: 100%; |
||||
height: 100px; |
||||
background-color:white ; |
||||
} |
||||
.chaxun{ |
||||
background-color: #008CBA; |
||||
color: white; |
||||
border-radius:5px; |
||||
font-size: 16px; |
||||
margin-left: 50px; |
||||
padding: 15px 32px; |
||||
} |
||||
.zhu{ |
||||
padding-top: 200px; |
||||
padding-left: 200px; |
||||
text-align: center; |
||||
height: 270px; |
||||
width: 880px; |
||||
} |
||||
@ -1 +1,90 @@
|
||||
<p>delete-two works!</p> |
||||
<!-- |
||||
* @Descripttion: |
||||
* @version: |
||||
* @Author: sueRimn |
||||
* @Date: 2020-09-02 16:21:18 |
||||
* @LastEditors: sueRimn |
||||
* @LastEditTime: 2020-09-04 15:36:05 |
||||
--> |
||||
<body> |
||||
|
||||
<div style="position: fixed; " class="daohang"> |
||||
<label><input name="riqi" type="radio" value="" style="margin-left: 20px;" (click)='anyue()'/>月 </label> |
||||
<label><input name="riqi" type="radio" value="" (click)='annian()'/>年 </label> |
||||
<select style="width: 80px;height: 50px; margin-left: 100px;"> |
||||
<option value ="2020">2020</option> |
||||
</select> |
||||
<div id="yue1"> |
||||
<select style="width: 80px;height: 50px; margin-left: 50px;" > |
||||
<option value ="1">1</option> |
||||
<option value ="1">2</option> |
||||
<option value ="1">3</option> |
||||
<option value ="1">4</option> |
||||
<option value ="1">5</option> |
||||
<option value ="1">6</option> |
||||
<option value ="1">7</option> |
||||
<option value ="1">8</option> |
||||
</select> |
||||
</div> |
||||
<select style="width: 80px;height: 50px; margin-left: 100px;"> |
||||
<option value ="2020">2020</option> |
||||
</select> |
||||
<div id="yue2"> |
||||
<select style="width: 80px;height: 50px; margin-left: 50px;" > |
||||
<option value ="1">1</option> |
||||
<option value ="1">2</option> |
||||
<option value ="1">3</option> |
||||
<option value ="1">4</option> |
||||
<option value ="1">5</option> |
||||
<option value ="1">6</option> |
||||
<option value ="1">7</option> |
||||
<option value ="1">8</option> |
||||
</select> |
||||
</div> |
||||
<button class="chaxun" >查询</button> |
||||
<!-- <button type="button" class="button" style="margin-left: 500px;">按区间查询</button> |
||||
<button type="button" class="button" style="margin-left: 10px;" >年查询</button> --> |
||||
|
||||
|
||||
</div> |
||||
<div class="head" id="head"></div> |
||||
<section class="mainbox"> |
||||
<div class="column"> |
||||
<div class="panel bar" id="leftOne"> |
||||
<div class="chart"></div> |
||||
<div class="panel-footer"></div> |
||||
</div> |
||||
<div class="panel line" id="leftTwo"> |
||||
<div class="chart"></div> |
||||
<div class="panel-footer"></div> |
||||
</div> |
||||
<div class="panel pie" id="leftThere"> |
||||
<div class="chart"></div> |
||||
<div class="panel-footer"></div> |
||||
</div> |
||||
<div class="panel four" id="leftFour"> |
||||
<div class="chart"></div> |
||||
<div class="panel-footer"></div> |
||||
</div> |
||||
</div> |
||||
<div class="column"> |
||||
<div class="panel bar1" id="rightOne"> |
||||
<div class="chart"></div> |
||||
<div class="panel-footer"></div> |
||||
</div> |
||||
<div class="panel line1" id="rightTwo"> |
||||
<div class="chart"></div> |
||||
<div class="panel-footer"></div> |
||||
</div> |
||||
<div class="panel pie1" id="rightThree"> |
||||
<div class="chart"></div> |
||||
<div class="panel-footer"></div> |
||||
</div> |
||||
<div class="panel four1" id="rightFour"> |
||||
<div class="chart"></div> |
||||
<div class="panel-footer"></div> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
<div style="padding-top: 50px; height: 50px; width: 100%;"></div> |
||||
</body> |
||||
|
||||
@ -0,0 +1,95 @@
|
||||
body{ |
||||
overflow:auto; |
||||
} |
||||
.daohang{ |
||||
display: flex; |
||||
z-index: 5; |
||||
border-bottom:2px solid #d4dde4; |
||||
width: 100%; |
||||
height: 180px; |
||||
background-color:white ; |
||||
} |
||||
|
||||
.chaxun{ |
||||
background-color: #008CBA; |
||||
color: white; |
||||
border-radius:5px; |
||||
//font-size: 16px; |
||||
margin-left: 50px; |
||||
} |
||||
.head{ |
||||
text-align:center; |
||||
margin:0 auto; |
||||
width: 900px; |
||||
height: 400px; |
||||
padding-top: 250px; |
||||
} |
||||
.mainbox { |
||||
padding-bottom: 50px; |
||||
min-width: 1024px; |
||||
max-width: 1920px; |
||||
padding: 0.125rem 0.125rem 0; |
||||
display: flex; |
||||
.column { |
||||
flex: 2; |
||||
|
||||
} |
||||
} |
||||
.panel { |
||||
position: relative; |
||||
height: 400px; |
||||
border: 1px solid rgba(25, 186, 139, 0.17); |
||||
padding: 0 0.1875rem 0.5rem; |
||||
margin-bottom: 0.1875rem; |
||||
&::before { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
content: ""; |
||||
width: 10px; |
||||
height: 10px; |
||||
border-top: 2px ; |
||||
border-left: 2px ; |
||||
} |
||||
&::after { |
||||
position: absolute; |
||||
top: 0; |
||||
right: 0; |
||||
content: ""; |
||||
width: 10px; |
||||
height: 10px; |
||||
border-top: 2px ; |
||||
border-right: 2px ; |
||||
} |
||||
.panel-footer { |
||||
position: absolute; |
||||
left: 0; |
||||
bottom: 0; |
||||
width: 100%; |
||||
&::before { |
||||
position: absolute; |
||||
bottom: 0; |
||||
left: 0; |
||||
content: ""; |
||||
width: 10px; |
||||
height: 10px; |
||||
border-bottom: 2px ; |
||||
border-left: 2px ; |
||||
} |
||||
&::after { |
||||
position: absolute; |
||||
bottom: 0; |
||||
right: 0; |
||||
content: ""; |
||||
width: 10px; |
||||
height: 10px; |
||||
border-bottom: 2px ; |
||||
border-right: 2px ; |
||||
} |
||||
} |
||||
|
||||
|
||||
.chart { |
||||
height: 3rem; |
||||
} |
||||
} |
||||
Loading…
Reference in new issue