|
|
/* |
|
|
* @Descripttion: |
|
|
* @version: |
|
|
* @Author: sueRimn |
|
|
* @Date: 2020-09-02 16:21:18 |
|
|
* @LastEditors: sueRimn |
|
|
* @LastEditTime: 2020-09-07 08:55:28 |
|
|
*/ |
|
|
import { Component, OnInit, ViewChild } from '@angular/core'; |
|
|
import { Router } from '@angular/router'; |
|
|
import { MatDatepickerInputEvent } from '@angular/material/datepicker'; |
|
|
import { MatSnackBarConfig, MatSnackBar } from '@angular/material/snack-bar'; |
|
|
import { DateAdapter } from '@angular/material/core'; |
|
|
import {EchartsDataService,} from '../../echarts-data.service' |
|
|
declare var echarts: any; |
|
|
|
|
|
@Component({ |
|
|
selector: 'app-delete-two', |
|
|
templateUrl: './delete-two.component.html', |
|
|
styleUrls: ['./delete-two.component.scss'] |
|
|
}) |
|
|
export class DeleteTwoComponent implements OnInit { |
|
|
options:any; |
|
|
datayuex=['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月']; |
|
|
datayuey=[210, 160, 150, 140, 130, 120, 110,120,150]; |
|
|
datanianx=[2019,2020]; |
|
|
dataniany=[201,174] |
|
|
|
|
|
constructor(private router: Router,public snackBar: MatSnackBar,private adapter: DateAdapter<any>,public echartsData:EchartsDataService) { } |
|
|
/* @ViewChild('appEcharts')appEcharts :echartsComponent; //父组件中获得子组件的引用 |
|
|
@ViewChild('pageTwoName')pageTwoName :PageTwoNameComponent; //父组件中获得子组件的引用 */ |
|
|
|
|
|
ngOnInit(): void { |
|
|
this.dateInit() |
|
|
|
|
|
window.setTimeout(()=>{ |
|
|
|
|
|
this.headZhexian('heads','删除数量总统计',this.datayuex,this.datayuey) |
|
|
this.headZhexian('leftOne','高层',this.datayuex,this.datayuey) |
|
|
this.headZhexian('leftTwo','轨道交通',this.datayuex,this.datayuey) |
|
|
this.headZhexian('leftThere','储罐类',this.datayuex,this.datayuey) |
|
|
this.headZhexian('leftFour','古建筑',this.datayuex,this.datayuey) |
|
|
this.headZhexian('rightOne','地下',this.datayuex,this.datayuey) |
|
|
this.headZhexian('rightTwo','化工生产',this.datayuex,this.datayuey) |
|
|
this.headZhexian('rightThree','厂房',this.datayuex,this.datayuey) |
|
|
this.headZhexian('rightFour','商市场',this.datayuex,this.datayuey) |
|
|
|
|
|
/* else if(this.selectType=='year'){ |
|
|
this.headZhexian('heads','删除数量总统计',this.datanianx,this.dataniany) |
|
|
this.headZhexian('leftOne','高层',this.datayuex,this.datayuey) |
|
|
this.headZhexian('leftTwo','轨道交通',this.datayuex,this.datayuey) |
|
|
this.headZhexian('leftThere','储罐类',this.datayuex,this.datayuey) |
|
|
this.headZhexian('leftFour','古建筑',this.datayuex,this.datayuey) |
|
|
this.headZhexian('rightOne','地下',this.datayuex,this.datayuey) |
|
|
this.headZhexian('rightTwo','化工生产',this.datayuex,this.datayuey) |
|
|
this.headZhexian('rightThree','厂房',this.datayuex,this.datayuey) |
|
|
this.headZhexian('rightFour','商市场',this.datayuex,this.datayuey) |
|
|
} */ |
|
|
|
|
|
},0) |
|
|
} |
|
|
ngOnDestroy():void{ |
|
|
this.headZx.clear() |
|
|
this.headZx.dispose() |
|
|
} |
|
|
|
|
|
selectType:string = 'month'; //选择当前的 查询类型 按月/年 |
|
|
headZx//echarts实例 |
|
|
|
|
|
//查询数据 |
|
|
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() //开始年份 |
|
|
selectTwoYear:any = (new Date()).getFullYear() //结束年份 |
|
|
selectStartMonth:any = 1 //开始月份 |
|
|
selectEndMonth:any = (new Date()).getMonth()+1 //结束月份 |
|
|
//点击月 |
|
|
monthClick(){ |
|
|
this.headZhexian('heads','删除数量总统计',this.datayuex,this.datayuey) |
|
|
this.headZhexian('leftOne','高层',this.datayuex,this.datayuey) |
|
|
this.headZhexian('leftTwo','轨道交通',this.datayuex,this.datayuey) |
|
|
this.headZhexian('leftThere','储罐类',this.datayuex,this.datayuey) |
|
|
this.headZhexian('leftFour','古建筑',this.datayuex,this.datayuey) |
|
|
this.headZhexian('rightOne','地下',this.datayuex,this.datayuey) |
|
|
this.headZhexian('rightTwo','化工生产',this.datayuex,this.datayuey) |
|
|
this.headZhexian('rightThree','厂房',this.datayuex,this.datayuey) |
|
|
this.headZhexian('rightFour','商市场',this.datayuex,this.datayuey) |
|
|
} |
|
|
//按月查询 |
|
|
monthSubmit (e) { |
|
|
this.headZhexian('heads','删除数量总统计',this.datayuex,this.datayuey) |
|
|
this.headZhexian('leftOne','高层',this.datayuex,this.datayuey) |
|
|
this.headZhexian('leftTwo','轨道交通',this.datayuex,this.datayuey) |
|
|
this.headZhexian('leftThere','储罐类',this.datayuex,this.datayuey) |
|
|
this.headZhexian('leftFour','古建筑',this.datayuex,this.datayuey) |
|
|
this.headZhexian('rightOne','地下',this.datayuex,this.datayuey) |
|
|
this.headZhexian('rightTwo','化工生产',this.datayuex,this.datayuey) |
|
|
this.headZhexian('rightThree','厂房',this.datayuex,this.datayuey) |
|
|
this.headZhexian('rightFour','商市场',this.datayuex,this.datayuey) |
|
|
if (e.selectTwoYear > e.selectOneYear) { |
|
|
let startTime = e.selectOneYear + '-' + e.selectStartMonth + '-' + 1 + ' ' + 0 + ':' + 0 +':'+ 0 |
|
|
let endTime = e.selectTwoYear + '-' + e.selectEndMonth + '-' + 31 + ' ' + 23 + ':' + 59 +':'+ 59 |
|
|
console.log(startTime) |
|
|
console.log(endTime) |
|
|
} else if (e.selectTwoYear === e.selectOneYear) { |
|
|
if(e.selectEndMonth >= e.selectStartMonth) { |
|
|
let startTime = e.selectOneYear + '-' + e.selectStartMonth + '-' + 1 + ' ' + 0 + ':' + 0 +':'+ 0 |
|
|
let endTime = e.selectTwoYear + '-' + e.selectEndMonth + '-' + 31 + ' ' + 23 + ':' + 59 +':'+ 59 |
|
|
console.log(startTime) |
|
|
console.log(endTime) |
|
|
} else { |
|
|
const config = new MatSnackBarConfig(); |
|
|
config.verticalPosition = 'top'; |
|
|
config.duration = 3000 |
|
|
this.snackBar.open('请选择正确时间区段','确定',config); |
|
|
} |
|
|
}else { |
|
|
const config = new MatSnackBarConfig(); |
|
|
config.verticalPosition = 'top'; |
|
|
config.duration = 3000 |
|
|
this.snackBar.open('请选择正确时间区段','确定',config); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
selectStartYear:any = (new Date()).getFullYear() //开始年份 |
|
|
selectEndYear:any = (new Date()).getFullYear() //结束年份 |
|
|
//点击年 |
|
|
yearClick(){ |
|
|
this.headZhexian('heads','删除数量总统计',this.datanianx,this.dataniany) |
|
|
this.headZhexian('leftOne','高层',this.datanianx,this.dataniany) |
|
|
this.headZhexian('leftTwo','轨道交通',this.datanianx,this.dataniany) |
|
|
this.headZhexian('leftThere','储罐类',this.datanianx,this.dataniany) |
|
|
this.headZhexian('leftFour','古建筑',this.datanianx,this.dataniany) |
|
|
this.headZhexian('rightOne','地下',this.datanianx,this.dataniany) |
|
|
this.headZhexian('rightTwo','化工生产',this.datanianx,this.dataniany) |
|
|
this.headZhexian('rightThree','厂房',this.datanianx,this.dataniany) |
|
|
this.headZhexian('rightFour','商市场',this.datanianx,this.dataniany) |
|
|
} |
|
|
//按年查询 |
|
|
yearSubmit (e) { |
|
|
console.log(this.selectType) |
|
|
this.headZhexian('heads','删除数量总统计',this.datanianx,this.dataniany) |
|
|
this.headZhexian('leftOne','高层',this.datanianx,this.dataniany) |
|
|
this.headZhexian('leftTwo','轨道交通',this.datanianx,this.dataniany) |
|
|
this.headZhexian('leftThere','储罐类',this.datanianx,this.dataniany) |
|
|
this.headZhexian('leftFour','古建筑',this.datanianx,this.dataniany) |
|
|
this.headZhexian('rightOne','地下',this.datanianx,this.dataniany) |
|
|
this.headZhexian('rightTwo','化工生产',this.datanianx,this.dataniany) |
|
|
this.headZhexian('rightThree','厂房',this.datanianx,this.dataniany) |
|
|
this.headZhexian('rightFour','商市场',this.datanianx,this.dataniany) |
|
|
if (e.selectEndYear >= e.selectStartYear) { |
|
|
let startTime = e.selectStartYear + '-' + 1 + '-' + 1 + ' ' + 0 + ':' + 0 +':'+ 0 |
|
|
let endTime = e.selectEndYear + '-' + 12 + '-' + 31 + ' ' + 23 + ':' + 59 +':'+ 59 |
|
|
} else { |
|
|
const config = new MatSnackBarConfig(); |
|
|
config.verticalPosition = 'top'; |
|
|
config.duration = 3000 |
|
|
this.snackBar.open('请选择正确时间区段','确定',config); |
|
|
} |
|
|
} |
|
|
|
|
|
/** |
|
|
* @name: 折线图 |
|
|
* @test: test font |
|
|
* @msg: |
|
|
* @param {divid(传入的div),headtext(标题)} |
|
|
* @return {type} |
|
|
*/ |
|
|
headZhexian(divid:string,headtext:string,datayuex,datayuey){ |
|
|
var dianji:boolean=headtext=="删除数量总统计" ? false:true; |
|
|
var ec = echarts as any; |
|
|
this.headZx = ec.init(document.getElementById(`${divid}`),'skinUpp'); |
|
|
<<<<<<< HEAD |
|
|
this.options = { |
|
|
grid: { |
|
|
top: 50, |
|
|
left:40, |
|
|
right: 20, |
|
|
bottom: 20, |
|
|
}, |
|
|
// 标题 |
|
|
title: { |
|
|
text: `${headtext}`, |
|
|
left:'center', |
|
|
top: -4, |
|
|
//副标题文本样式 |
|
|
subtextStyle:{ |
|
|
color:'#999', |
|
|
fontWeight:'bold', |
|
|
}, |
|
|
======= |
|
|
var options = { |
|
|
grid: { |
|
|
top: 50, |
|
|
left:40, |
|
|
right: 20, |
|
|
bottom: 20, |
|
|
}, |
|
|
// 标题 |
|
|
title: { |
|
|
text: `${headtext}`, |
|
|
left:'center', |
|
|
top: -4, |
|
|
//副标题文本样式 |
|
|
subtextStyle:{ |
|
|
color:'#999', |
|
|
fontWeight:'bold', |
|
|
}, |
|
|
>>>>>>> b56d7ae0c7cd644e4ed01e4efc5232a7cfdf07d3 |
|
|
textStyle:{ |
|
|
//文字颜色 |
|
|
color:'#000', |
|
|
fontSize: 22, |
|
|
} |
|
|
}, |
|
|
//提示框 |
|
|
tooltip: { |
|
|
trigger: 'axis', |
|
|
formatter: (params)=>{ |
|
|
return this.biaogeTishi(`${headtext}`) |
|
|
}, |
|
|
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 |
|
|
borderWidth:'1', |
|
|
borderRadius :'0', |
|
|
position: this.echartsData.tableTooltipNoShow |
|
|
}, |
|
|
xAxis: { |
|
|
type: 'category', |
|
|
boundaryGap:true, |
|
|
data: datayuex, |
|
|
axisLabel: { |
|
|
color: "#000", //刻度线标签颜色 |
|
|
}, |
|
|
//设置坐标轴字体颜色和宽度 |
|
|
axisLine: { |
|
|
lineStyle: { |
|
|
color: "#000", |
|
|
}, |
|
|
}, |
|
|
splitLine: {//分割线配置 |
|
|
show:true, |
|
|
lineStyle: { |
|
|
color: '#999', |
|
|
} |
|
|
} |
|
|
}, |
|
|
yAxis: { |
|
|
type: 'value', |
|
|
axisLabel: { |
|
|
color: "#000" //刻度线标签颜色 |
|
|
}, |
|
|
//设置坐标轴字体颜色和宽度 |
|
|
axisLine: { |
|
|
lineStyle: { |
|
|
color: "#000", |
|
|
} |
|
|
} |
|
|
}, |
|
|
series: [{ |
|
|
data: datayuey, |
|
|
type: 'line', |
|
|
clickable:false, |
|
|
/* lineStyle:{ |
|
|
color:'#1369bf' |
|
|
}, */ |
|
|
/* markLine: { |
|
|
symbol: ['none', 'none'], |
|
|
label: {show: false}, |
|
|
lineStyle:{ |
|
|
color:'#9A9A9A', |
|
|
type:'solid', |
|
|
}, |
|
|
data: [ |
|
|
{xAxis: 1}, |
|
|
{xAxis: 2}, |
|
|
{xAxis: 3}, |
|
|
{xAxis: 4}, |
|
|
{xAxis: 5}, |
|
|
{xAxis: 6}, |
|
|
{xAxis: 7} |
|
|
] |
|
|
}, */ |
|
|
}] |
|
|
}; |
|
|
this.headZx.getZr().on('click', (params) => { |
|
|
console.log(params.name) |
|
|
if(`${headtext}`!=="删除数量总统计"){ |
|
|
/* this.echartsData.statefulInspectionName =params.name+headtext; |
|
|
this.router.navigateByUrl(`/statisticanalysis/delete_one/delete_there`); */ |
|
|
const pointInPixel= [params.offsetX, params.offsetY]; |
|
|
if (this.headZx.containPixel('grid',pointInPixel)) { |
|
|
let xIndex=this.headZx.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; |
|
|
/*事件处理代码书写位置*/ |
|
|
this.router.navigate(['/statisticanalysis/delete_one/delete_there'],{queryParams:{'level':this.options.xAxis.data[xIndex],'headtext':headtext}}); |
|
|
} |
|
|
} |
|
|
}); |
|
|
this.headZx.setOption(this.options); |
|
|
} |
|
|
/** |
|
|
* @name: 表格提示框封装 |
|
|
* @test: test font |
|
|
* @msg: |
|
|
* @param {string(表头)} |
|
|
* @return {type} |
|
|
*/ |
|
|
biaogeTishi(biaotou:string){ |
|
|
var shuju='[{"name":"浦东支队","number":"156","zhanbi":"3%"},{"name":"黄埔支队","number":"144","zhanbi":"2.8%"},' |
|
|
shuju+='{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},' |
|
|
shuju+='{"name":"静安支队","number":"120","zhanbi":"1.3%"},{"name":"普陀支队","number":"100","zhanbi":"1.1%"},' |
|
|
shuju+='{"name":"虹口支队","number":"95","zhanbi":"1%"},{"name":"杨浦支队","number":"90","zhanbi":"0.9%"},' |
|
|
shuju+='{"name":"闵行支队","number":"88","zhanbi":"0.8%"},{"name":"宝山支队","number":"83","zhanbi":"0.7%"},' |
|
|
shuju+='{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},' |
|
|
shuju+='{"name":"嘉定支队","number":"78","zhanbi":"0.6%"},{"name":"松江支队","number":"75","zhanbi":"0.5%"},' |
|
|
shuju+='{"name":"金山支队","number":"65","zhanbi":"0.4%"},{"name":"崇明支队","number":"55","zhanbi":"0.3%"}]' |
|
|
var jsonObj = JSON.parse(shuju); |
|
|
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;">'+biaotou+'</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<jsonObj.length;i++){ |
|
|
res+='<tr>' |
|
|
res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].name+'</td>' |
|
|
res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].number+'</td>' |
|
|
res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[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 |
|
|
} |
|
|
|
|
|
}
|
|
|
|
