You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
938 lines
26 KiB
938 lines
26 KiB
import { HttpClient } from '@angular/common/http'; |
|
import { Component, OnInit, ViewContainerRef } from '@angular/core'; |
|
import { Router } from '@angular/router'; |
|
declare var AMap: any; |
|
declare var AMapUI: any; |
|
import * as echarts from 'echarts'; |
|
// import * as d3 from 'd3'; |
|
import { NzModalService } from 'ng-zorro-antd/modal'; |
|
import { TaskListComponent } from './task-list/task-list.component'; |
|
import { UnitListComponent } from './unit-list/unit-list.component'; |
|
@Component({ |
|
selector: 'app-home', |
|
templateUrl: './home.component.html', |
|
styleUrls: ['./home.component.scss'], |
|
}) |
|
export class HomeComponent implements OnInit { |
|
constructor( |
|
private http: HttpClient, |
|
private modal: NzModalService, |
|
private viewContainerRef: ViewContainerRef, |
|
private router: Router |
|
) {} |
|
taskNumCharts; |
|
taskNumChartsOption = { |
|
title: [ |
|
{ |
|
text: `{val|0}\n{name|任务总数}`, |
|
top: 'center', |
|
left: '61%', |
|
textStyle: { |
|
rich: { |
|
val: { |
|
fontSize: 23, |
|
fontWeight: 'bold', |
|
color: '#333333', |
|
}, |
|
name: { |
|
fontSize: 12, |
|
color: '#666666', |
|
padding: [2, 0], |
|
}, |
|
}, |
|
}, |
|
}, |
|
], |
|
color: ['#5483EA', '#34E0A3', '#E4E7EC'], |
|
tooltip: { |
|
trigger: 'item', |
|
}, |
|
legend: { |
|
top: 'center', |
|
left: '5%', |
|
itemGap: 15, |
|
itemWidth: 10, |
|
itemHeight: 10, |
|
orient: 'vertical', |
|
formatter: (name) => { |
|
let data = this.taskNumChartsOption.series[0].data; |
|
let total = 0; |
|
let tarValue; |
|
for (let i = 0; i < data.length; i++) { |
|
total += data[i].value; |
|
if (data[i].name == name) { |
|
tarValue = data[i].value; |
|
} |
|
} |
|
let v = tarValue + '个'; |
|
//计算出百分比 |
|
// let p = Math.round((tarValue / total) * 100) + '%' |
|
return `${name} ${v}`; |
|
//name是名称，v是数值 |
|
}, |
|
}, |
|
series: [ |
|
{ |
|
type: 'pie', |
|
radius: ['50%', '65%'], |
|
center: ['72%', '50%'], |
|
avoidLabelOverlap: false, |
|
label: { |
|
show: false, |
|
position: 'center', |
|
}, |
|
labelLine: { |
|
show: false, |
|
}, |
|
data: [ |
|
{ value: 37, name: '上级派发任务' }, |
|
{ value: 56, name: '自主任务' }, |
|
{ value: 102, name: '协助任务' }, |
|
], |
|
}, |
|
], |
|
}; |
|
|
|
disqualificationUnitCharts; |
|
disqualificationUnitChartsOption = { |
|
grid: { |
|
left: '8%', |
|
right: '5%', |
|
top: '15%', |
|
bottom: '22%', |
|
}, |
|
xAxis: { |
|
type: 'category', |
|
data: [ |
|
'1月', |
|
'2月', |
|
'3月', |
|
'4月', |
|
'5月', |
|
'6月', |
|
'7月', |
|
'8月', |
|
'9月', |
|
'10月', |
|
'11月', |
|
'12月', |
|
], |
|
axisTick: { |
|
//x轴刻度尺 |
|
show: false, |
|
}, |
|
axisLine: { |
|
//x轴线条颜色 |
|
show: false, |
|
lineStyle: { |
|
color: '#C7CAD0', |
|
}, |
|
}, |
|
}, |
|
yAxis: { |
|
type: 'value', |
|
splitLine: { |
|
//网格线 |
|
lineStyle: { |
|
type: 'solid', //设置网格线类型 dotted：虚线 solid:实线 |
|
color: '#ECEFF1', //网格线颜色 |
|
}, |
|
}, |
|
axisLine: { |
|
//y轴线条颜色 |
|
show: false, |
|
lineStyle: { |
|
color: '#C7CAD0', |
|
}, |
|
}, |
|
}, |
|
series: [ |
|
{ |
|
data: [8, 7, 8, 6, 11, 16, 18, 10, 14, 10, 9, 5], |
|
type: 'line', |
|
showSymbol: false, //去除面积图节点圆 |
|
smooth: true, //面积图改成弧形状 |
|
areaStyle: { |
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|
{ |
|
offset: 0, |
|
color: 'rgba(84,131,234,0.6)', |
|
}, |
|
{ |
|
offset: 1, |
|
color: 'rgba(255,255,255,0)', |
|
}, |
|
]), |
|
}, |
|
}, |
|
], |
|
}; |
|
|
|
completionOfTaskPie; |
|
completionOfTaskPieOption = { |
|
title: [ |
|
{ |
|
text: `{val|0}\n{name|任务总数}`, |
|
top: '42%', |
|
left: '26%', |
|
textStyle: { |
|
rich: { |
|
val: { |
|
fontSize: 28, |
|
fontWeight: 'bold', |
|
color: '#333333', |
|
}, |
|
name: { |
|
fontSize: 14, |
|
color: '#666666', |
|
padding: [2, 0], |
|
}, |
|
}, |
|
}, |
|
}, |
|
], |
|
color: ['#34E0A3', '#E4E7EC'], |
|
tooltip: { |
|
trigger: 'item', |
|
}, |
|
legend: { |
|
top: 'center', |
|
right: '10%', |
|
itemGap: 15, |
|
itemWidth: 10, |
|
itemHeight: 10, |
|
orient: 'vertical', |
|
formatter: (name) => { |
|
let data = this.completionOfTaskPieOption.series[0].data; |
|
let total = 0; |
|
let tarValue; |
|
for (let i = 0; i < data.length; i++) { |
|
total += data[i].value; |
|
if (data[i].name == name) { |
|
tarValue = data[i].value; |
|
} |
|
} |
|
let v = tarValue; |
|
//计算出百分比 |
|
// let p = Math.round((tarValue / total) * 100) + '%' |
|
return `${name} ${v}`; |
|
//name是名称，v是数值 |
|
}, |
|
}, |
|
|
|
series: [ |
|
{ |
|
type: 'pie', |
|
radius: ['50%', '65%'], |
|
center: ['35%', '55%'], |
|
avoidLabelOverlap: false, |
|
label: { |
|
show: false, |
|
position: 'center', |
|
}, |
|
labelLine: { |
|
show: false, |
|
}, |
|
data: [ |
|
{ value: 157, name: '已完成' }, |
|
{ value: 38, name: '未完成' }, |
|
], |
|
}, |
|
], |
|
}; |
|
|
|
completionOfTaskBar; |
|
completionOfTaskBarOption = { |
|
grid: { |
|
left: '3%', |
|
right: '7%', |
|
top: '15%', |
|
bottom: '20%', |
|
}, |
|
legend: { |
|
top: 'center', |
|
right: '2%', |
|
itemGap: 15, |
|
itemWidth: 10, |
|
itemHeight: 10, |
|
orient: 'vertical', |
|
}, |
|
tooltip: { |
|
trigger: 'axis', |
|
axisPointer: { |
|
// Use axis to trigger tooltip |
|
type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow' |
|
}, |
|
}, |
|
color: ['#34E0A3', '#39CCF4'], |
|
xAxis: { |
|
type: 'category', |
|
data: [ |
|
'历下区大队', |
|
'南部山区大队', |
|
'市中区大队', |
|
'槐荫区大队', |
|
'天桥区大队', |
|
'历城区大队', |
|
'高新技术产业开发区大队', |
|
'长清区大队', |
|
'章丘区大队', |
|
'平阴县大队', |
|
'商河县大队', |
|
'济阳县大队', |
|
'莱芜区大队', |
|
], |
|
axisTick: { |
|
//x轴刻度尺 |
|
show: false, |
|
}, |
|
axisLine: { |
|
//x轴线条颜色 |
|
show: false, |
|
lineStyle: { |
|
color: '#C7CAD0', |
|
}, |
|
}, |
|
axisLabel: { |
|
show: true, |
|
interval: 0, //使x轴上的文字显示完全, |
|
//设置一行显示几个字,自己设置 |
|
formatter: function (params) { |
|
var newParamsName = ''; |
|
var paramsNameNumber = params.length; |
|
var provideNumber = 6; |
|
var rowNumber = Math.ceil(paramsNameNumber / provideNumber); |
|
if (paramsNameNumber > provideNumber) { |
|
for (var p = 0; p < rowNumber; p++) { |
|
var tempStr = ''; |
|
var start = p * provideNumber; |
|
var end = start + provideNumber; |
|
if (p == rowNumber - 1) { |
|
tempStr = params.substring(start, paramsNameNumber); |
|
} else { |
|
tempStr = params.substring(start, end) + '\n'; |
|
} |
|
newParamsName += tempStr; |
|
} |
|
} else { |
|
newParamsName = params; |
|
} |
|
return newParamsName; |
|
}, |
|
}, |
|
}, |
|
yAxis: { |
|
type: 'value', |
|
splitLine: { |
|
//网格线 |
|
lineStyle: { |
|
type: 'solid', //设置网格线类型 dotted：虚线 solid:实线 |
|
color: '#ECEFF1', //网格线颜色 |
|
}, |
|
}, |
|
axisLine: { |
|
//y轴线条颜色 |
|
show: false, |
|
lineStyle: { |
|
color: '#C7CAD0', |
|
}, |
|
}, |
|
}, |
|
series: [ |
|
{ |
|
name: '已完成', |
|
type: 'bar', |
|
barWidth: 16, // 柱子宽度 |
|
stack: 'total', |
|
label: { |
|
show: false, |
|
}, |
|
emphasis: { |
|
focus: 'series', |
|
}, |
|
data: [8, 17, 10, 14, 8, 16, 10, 11, 10, 15, 9, 10, 18], |
|
}, |
|
{ |
|
name: '未完成', |
|
type: 'bar', |
|
barWidth: 16, // 柱子宽度 |
|
stack: 'total', |
|
label: { |
|
show: false, |
|
}, |
|
emphasis: { |
|
focus: 'series', |
|
}, |
|
data: [3, 2, 1, 5, 3, 3, 4, 5, 2, 3, 4, 2, 2], |
|
}, |
|
], |
|
}; |
|
|
|
level; //任务完成情况当前级别 |
|
leveldata; |
|
async ngOnInit(): Promise<void> { |
|
// this.level = JSON.parse(sessionStorage.getItem('userData')).organizationLevel |
|
|
|
console.log('游览器宽度:', document.body.clientWidth); |
|
console.log('游览器高度:', document.body.clientHeight); |
|
|
|
window.setTimeout(() => { |
|
this.mapInit(); //初始化地图 |
|
}, 0); |
|
|
|
// 任务总数 |
|
this.taskNumCharts = echarts.init( |
|
document.getElementById('taskNumCharts'), |
|
null, |
|
{ devicePixelRatio: 2 } |
|
); |
|
this.disqualificationUnitCharts = echarts.init( |
|
document.getElementById('disqualificationUnit'), |
|
null, |
|
{ devicePixelRatio: 2 } |
|
); |
|
this.completionOfTaskPie = echarts.init( |
|
document.getElementById('completionOfTask1'), |
|
null, |
|
{ devicePixelRatio: 2 } |
|
); |
|
this.completionOfTaskBar = echarts.init( |
|
document.getElementById('completionOfTask2'), |
|
null, |
|
{ devicePixelRatio: 2 } |
|
); |
|
|
|
this.completionOfTaskBar.getZr().on('click', (params) => { |
|
let pointInPixel = [params.offsetX, params.offsetY]; |
|
if (this.completionOfTaskBar.containPixel('grid', pointInPixel)) { |
|
let pointInGrid = this.completionOfTaskBar.convertFromPixel( |
|
{ |
|
seriesIndex: 0, |
|
}, |
|
pointInPixel |
|
); |
|
let xIndex = pointInGrid[0]; //索引 |
|
let handleIndex = Number(xIndex); |
|
let seriesObj = this.completionOfTaskBar.getOption(); //图表object对象 |
|
var op = this.completionOfTaskBar.getOption(); |
|
//获得图表中点击的列 |
|
var month = op.xAxis[0].data[handleIndex]; //获取点击的列名 |
|
let taskBar = this.statisticalData_taskStatByOrg['组织机构数据']; |
|
// console.log(month, taskBar[handleIndex]) |
|
|
|
if (taskBar[handleIndex].organization.level == 'battalion') { |
|
//点击大队 |
|
this.leveldata = taskBar[handleIndex].organization; |
|
this.getData_taskStatByOrg(taskBar[handleIndex].organization.id).then( |
|
(data) => { |
|
this.echartsSetData_taskStatByOrg(); |
|
} |
|
); |
|
} else if (taskBar[handleIndex].organization.level == 'squadron') { |
|
//点击消防站 |
|
this.modal.create({ |
|
nzTitle: '任务列表', |
|
nzContent: TaskListComponent, |
|
nzViewContainerRef: this.viewContainerRef, |
|
nzWidth: 1200, |
|
nzFooter: null, |
|
nzComponentParams: { |
|
data: taskBar[handleIndex].organization, |
|
}, |
|
}); |
|
} |
|
} |
|
}); |
|
|
|
await this.getData(); |
|
|
|
let orid = JSON.parse(sessionStorage.getItem('userData')).organizationId; |
|
Promise.all([this.getData(), this.getData_taskStatByOrg(orid)]).then( |
|
(data) => { |
|
this.echartsSetData(); |
|
|
|
this.echartsSetData_buhege('buhege'); |
|
|
|
this.echartsSetData_taskStatByOrg(); |
|
} |
|
); |
|
} |
|
|
|
goback() { |
|
this.getData_taskStatByOrg(this.leveldata.parentId).then((data) => { |
|
this.echartsSetData_taskStatByOrg(); |
|
this.leveldata = null; |
|
}); |
|
} |
|
|
|
assistTaskRankingData: any = [ |
|
{ |
|
name: '济南市消防救援支队', |
|
num: 0, |
|
url: '../../../../assets/statistic-analysis/one.png', |
|
}, |
|
{ |
|
name: '历下区大队', |
|
num: 0, |
|
url: '../../../../assets/statistic-analysis/two.png', |
|
}, |
|
{ |
|
name: '南部山区大队', |
|
num: 0, |
|
url: '../../../../assets/statistic-analysis/three.png', |
|
}, |
|
{ |
|
name: '市中区大队', |
|
num: 0, |
|
url: '../../../../assets/statistic-analysis/four.png', |
|
}, |
|
{ |
|
name: '天桥区大队', |
|
num: 0, |
|
url: '../../../../assets/statistic-analysis/five.png', |
|
}, |
|
]; |
|
|
|
rankingList1 = [ |
|
{ name: '济南市消防救援支队', num: 80, type: 'up', changeNum: 1 }, |
|
{ name: '历下区大队', num: 75, type: 'down', changeNum: 1 }, |
|
{ name: '南部山区大队', num: 75, type: 'up', changeNum: 2 }, |
|
{ name: '市中区大队', num: 75, type: 'up', changeNum: 1 }, |
|
{ name: '槐荫区大队', num: 70, type: 'up', changeNum: 3 }, |
|
{ name: '天桥区大队', num: 60, type: 'up', changeNum: 1 }, |
|
]; |
|
|
|
rankingList2 = [ |
|
{ name: '历下区大队', num: 100, percentage: 100, type: 'up', changeNum: 2 }, |
|
{ |
|
name: '高新技术产业开发区大队', |
|
num: 90, |
|
percentage: 100, |
|
type: 'down', |
|
changeNum: 1, |
|
}, |
|
{ |
|
name: '槐荫区大队', |
|
num: 88, |
|
percentage: 100, |
|
type: 'down', |
|
changeNum: 1, |
|
}, |
|
{ name: '天桥区大队', num: 80, percentage: 100, type: 'up', changeNum: 2 }, |
|
{ name: '历城区大队', num: 70, percentage: 100, type: 'up', changeNum: 1 }, |
|
{ name: '长清区大队', num: 53, percentage: 100, type: 'up', changeNum: 2 }, |
|
{ |
|
name: '南部山区大队', |
|
num: 80, |
|
percentage: 100, |
|
type: 'up', |
|
changeNum: 1, |
|
}, |
|
{ name: '章丘区大队', num: 70, percentage: 100, type: 'up', changeNum: 1 }, |
|
{ |
|
name: '平阴县大队', |
|
num: 53, |
|
percentage: 100, |
|
type: 'down', |
|
changeNum: 1, |
|
}, |
|
{ name: '济阳区大队', num: 80, percentage: 100, type: 'up', changeNum: 1 }, |
|
{ |
|
name: '市中区大队', |
|
num: 70, |
|
percentage: 100, |
|
type: 'down', |
|
changeNum: 2, |
|
}, |
|
{ |
|
name: '商河县大队', |
|
num: 53, |
|
percentage: 100, |
|
type: 'down', |
|
changeNum: 3, |
|
}, |
|
{ |
|
name: '莱芜区大队', |
|
num: 80, |
|
percentage: 100, |
|
type: 'down', |
|
changeNum: 1, |
|
}, |
|
{ name: '钢城区大队', num: 70, percentage: 100, type: 'up', changeNum: 3 }, |
|
{ |
|
name: '起步区大队', |
|
num: 50, |
|
percentage: 100, |
|
type: 'down', |
|
changeNum: 2, |
|
}, |
|
{ name: '特勤大队', num: 50, percentage: 100, type: 'up', changeNum: 2 }, |
|
]; |
|
|
|
mapcard = [ |
|
{ |
|
name: '不合格单位数量', |
|
num: 0, |
|
url: '../../../../assets/statistic-analysis/ununit.png', |
|
data: [], |
|
}, |
|
{ |
|
name: '隐患单位数量', |
|
num: 0, |
|
url: '../../../../assets/statistic-analysis/ununit.png', |
|
data: [], |
|
}, |
|
{ |
|
name: '协作任务数量', |
|
num: 0, |
|
url: '../../../../assets/statistic-analysis/task.png', |
|
data: [], |
|
}, |
|
]; |
|
|
|
//获得统计数据 |
|
statisticalData: any; |
|
isLoading = false; |
|
async getData() { |
|
this.isLoading = true; |
|
return new Promise<void>((resolve, reject) => { |
|
this.http.get('/api/PlanTasks/Dashboard').subscribe((data: any) => { |
|
this.statisticalData = data; |
|
this.isLoading = false; |
|
resolve(data); |
|
}); |
|
}); |
|
} |
|
|
|
statisticalData_taskStatByOrg; |
|
isLoading2 = false; |
|
//按组织获取任务完成情况 |
|
async getData_taskStatByOrg(orid) { |
|
this.isLoading2 = true; |
|
return new Promise<void>((resolve, reject) => { |
|
let arr = this.textbox.filter((item) => item.isSelected); |
|
let creationTypes = arr.map((v) => taskName[v.name]); |
|
this.http |
|
.get('/api/PlanTasks/Dashboard_TaskStatByOrg', { |
|
params: { |
|
organizaionId: orid, |
|
creationTypes: creationTypes, |
|
}, |
|
}) |
|
.subscribe((data: any) => { |
|
console.log('按组织获取任务完成情况', data); |
|
this.statisticalData_taskStatByOrg = data; |
|
this.isLoading2 = false; |
|
resolve(data); |
|
}); |
|
}); |
|
} |
|
|
|
top1_1_leftNum = 0; //任务总数 |
|
|
|
buhegedata = { |
|
badCount: 0, |
|
date: '2022-06-01T00:00:00', |
|
month: 6, |
|
totalCount: 0, |
|
percentOfPass: 0, |
|
}; |
|
|
|
echartsSetData() { |
|
console.log('统计数据', this.statisticalData); |
|
//左上角 任务总数 + 协助任务数量排名TOP5 |
|
let top1_1_left = this.statisticalData['任务']; |
|
this.top1_1_leftNum = |
|
top1_1_left['上级派发任务'] + |
|
top1_1_left['申领任务'] + |
|
top1_1_left['自主任务']; |
|
this.taskNumChartsOption.title[0].text = `{val|${this.top1_1_leftNum}}\n{name|任务总数}`; |
|
this.taskNumChartsOption.series[0].data = [ |
|
{ value: top1_1_left['上级派发任务'], name: '上级派发任务' }, |
|
{ value: top1_1_left['自主任务'], name: '自主任务' }, |
|
{ value: top1_1_left['申领任务'], name: '协助任务' }, |
|
]; |
|
this.taskNumCharts && |
|
this.taskNumCharts.setOption(this.taskNumChartsOption); |
|
let top1_1_right = this.statisticalData['协助任务Top5']; |
|
this.assistTaskRankingData.forEach((element, key) => { |
|
if (top1_1_right[key]) { |
|
element.name = top1_1_right[key].organization.name; |
|
element.num = top1_1_right[key].totalCount; |
|
} else { |
|
element.name = '暂无机构'; |
|
element.num = 0; |
|
} |
|
}); |
|
|
|
//地图上方卡片 |
|
let mapcard = this.statisticalData['单位']; |
|
this.mapcard[0].num = mapcard['不合格数量'].length || 0; |
|
this.mapcard[0].data = mapcard['不合格数量'] || []; |
|
this.mapcard[1].num = mapcard['隐患单位数量'].length || 0; |
|
this.mapcard[1].data = mapcard['隐患单位数量'] || []; |
|
this.mapcard[2].num = mapcard['协作任务数量'] || 0; |
|
|
|
//持证人数排名 |
|
let rankingList2 = this.statisticalData['持证人数排名']; |
|
this.rankingList2 = []; |
|
rankingList2.forEach((element) => { |
|
let obj: any = {}; |
|
obj.name = element.organization.name; |
|
obj.num = element.totalCount; |
|
obj.percentage = Math.round( |
|
(element.totalCount / rankingList2[0].totalCount) * 100 |
|
); |
|
if (element.differenceCount == 0) { |
|
obj.type = '='; |
|
} else if (element.differenceCount < 0) { |
|
obj.type = 'down'; |
|
} else if (element.differenceCount > 0) { |
|
obj.type = 'up'; |
|
} |
|
obj.changeNum = element.differenceCount; |
|
this.rankingList2.push(obj); |
|
}); |
|
} |
|
|
|
selectedLeft = 'buhege'; |
|
echartsSetData_buhege(type) { |
|
this.disqualificationUnitCharts.clear(); |
|
this.selectedLeft = type; |
|
let center_left; |
|
if (type == 'buhege') { |
|
center_left = this.statisticalData['不合格单位趋势']; |
|
} else if (type == 'yinhuan') { |
|
center_left = this.statisticalData['隐患单位趋势']; |
|
} |
|
|
|
//左边中间不合格单位趋势图 |
|
let xAxis = []; |
|
let yAxis = []; |
|
center_left.forEach((element) => { |
|
let monthnum = new Date(element.date).getMonth() + 1; |
|
if (monthnum == new Date().getMonth() + 1) { |
|
element.percentOfPass = |
|
Math.round( |
|
((element.totalCount - element.badCount) / element.totalCount) * 100 |
|
) || 0; |
|
this.buhegedata = element; |
|
} |
|
element.month = monthnum; |
|
xAxis.push(monthnum + '月'); |
|
yAxis.push(element.badCount); |
|
}); |
|
this.disqualificationUnitChartsOption.xAxis.data = xAxis; |
|
this.disqualificationUnitChartsOption.series[0].data = yAxis; |
|
this.disqualificationUnitCharts && |
|
this.disqualificationUnitCharts.setOption( |
|
this.disqualificationUnitChartsOption |
|
); |
|
} |
|
|
|
echartsSetData_taskStatByOrg() { |
|
this.completionOfTaskPie.clear(); |
|
this.completionOfTaskBar.clear(); |
|
//任务完成情况两个echarts |
|
let task = this.statisticalData_taskStatByOrg; |
|
this.completionOfTaskPieOption.title[0].text = `{val|${task['总数']}}\n{name|任务总数}`; |
|
this.completionOfTaskPieOption.series[0].data = [ |
|
{ value: task['已完成'], name: '已完成' }, |
|
{ value: task['未完成'], name: '未完成' }, |
|
]; |
|
this.completionOfTaskPie && |
|
this.completionOfTaskPie.setOption(this.completionOfTaskPieOption); |
|
|
|
let taskBar = task['组织机构数据']; |
|
let taskBarx = []; |
|
let taskBary1 = []; |
|
let taskBary2 = []; |
|
taskBar.forEach((element) => { |
|
taskBarx.push(element.organization.name); |
|
taskBary1.push(element.completeCount); //已完成 |
|
taskBary2.push(element.uncompleteCount); //未完成 |
|
}); |
|
this.completionOfTaskBarOption.xAxis.data = taskBarx; |
|
this.completionOfTaskBarOption.series[0].data = taskBary1; |
|
this.completionOfTaskBarOption.series[1].data = taskBary2; |
|
this.completionOfTaskBar && |
|
this.completionOfTaskBar.setOption(this.completionOfTaskBarOption); |
|
} |
|
|
|
// map; |
|
// mapInit() { |
|
// //创建地图 |
|
// this.map = new AMap.Map('mapbox', { |
|
// cursor: 'default', |
|
// zooms: [8, 16], |
|
// mapStyle: 'amap://styles/light', |
|
// // bubble: true |
|
// }); |
|
|
|
// let colors = [ |
|
// '#EE30B3', |
|
// '#B37CF0', |
|
// '#BD2CE6', |
|
// '#7768EE', |
|
// '#359EEF', |
|
// '#7B95CA', |
|
// '#CAFBF8', |
|
// '#43D0E1', |
|
// '#72C6EF', |
|
// ]; |
|
|
|
// AMapUI.loadUI(['geo/DistrictExplorer'], (DistrictExplorer) => { |
|
// //创建一个实例 |
|
// let districtExplorer = new DistrictExplorer({ |
|
// map: this.map, |
|
// eventSupport: true, //打开事件支持 |
|
// }); |
|
|
|
// // let adcode = this.adcode; //行政编码 |
|
// let adcode = 370100; |
|
|
|
// districtExplorer.loadAreaNode(adcode, (error, areaNode) => { |
|
// //更新地图视野 |
|
// this.map.setBounds(areaNode.getBounds(), null, null, true); |
|
|
|
// //设置定位节点，支持鼠标位置识别 |
|
// //注意节点的顺序，前面的高优先级 |
|
// districtExplorer.setAreaNodesForLocating(areaNode); |
|
|
|
// //清除已有的绘制内容 |
|
// districtExplorer.clearFeaturePolygons(); |
|
|
|
// //绘制子区域 |
|
// districtExplorer.renderSubFeatures(areaNode, (feature, i) => { |
|
// // console.log(111, feature) |
|
// let fillColor = colors[i % colors.length]; |
|
// let strokeColor = colors[colors.length - 1 - (i % colors.length)]; |
|
// return { |
|
// cursor: 'default', |
|
// bubble: true, |
|
// strokeColor: strokeColor, //线颜色 |
|
// strokeOpacity: 1, //线透明度 |
|
// strokeWeight: 1, //线宽 |
|
// fillColor: fillColor, //填充色 |
|
// fillOpacity: 0.8, //填充透明度 |
|
// }; |
|
// }); |
|
|
|
// //绘制父区域 |
|
// districtExplorer.renderParentFeature(areaNode, { |
|
// cursor: 'default', |
|
// bubble: true, |
|
// strokeColor: 'black', //线颜色 |
|
// strokeOpacity: 1, //线透明度 |
|
// strokeWeight: 1, //线宽 |
|
// fillColor: null, //填充色 |
|
// fillOpacity: 0.5, //填充透明度 |
|
// }); |
|
|
|
// // 更新地图视野以适合区划面 |
|
// this.map.setFitView(districtExplorer.getAllFeaturePolygons()); |
|
// }); |
|
// }); |
|
// } |
|
countries = []; |
|
map; |
|
mapInit() { |
|
var T = window['T']; |
|
var d3 = window['d3']; |
|
var countries = []; |
|
var countriesOverlay = new T.D3Overlay(init, redraw); |
|
|
|
this.map = new T.Map('mapbox'); |
|
this.map.centerAndZoom(new T.LngLat(117.03862, 36.664169), 9); |
|
|
|
d3.json( |
|
'https://geo.datav.aliyun.com/areas_v3/bound/370100_full.json', |
|
(data) => { |
|
countries = data.features; |
|
this.map.addOverLay(countriesOverlay); |
|
countriesOverlay.bringToBack(); |
|
} |
|
); |
|
|
|
function init(sel, transform) { |
|
var upd = sel.selectAll('path.geojson').data(countries); |
|
upd |
|
.enter() |
|
.append('path') |
|
.attr('class', 'geojson') |
|
.attr('stroke', 'black') |
|
.attr('fill', function (d, i) { |
|
return d3.hsl(Math.random() * 360, 0.9, 0.5); |
|
}) |
|
.attr('fill-opacity', '0.5'); |
|
} |
|
|
|
function redraw(sel, transform) { |
|
sel.selectAll('path.geojson').each(function (d, i) { |
|
d3.select(this).attr('d', transform.pathFromGeojson); |
|
// .on("mouseover",function(){ |
|
// console.log('这是点击了',); |
|
// }) |
|
}); |
|
} |
|
} |
|
|
|
formroute() { |
|
this.router.navigate(['/statistic/form']); |
|
} |
|
|
|
clickCard(item) { |
|
console.log(item); |
|
if (item.name.indexOf('单位') !== -1) { |
|
this.modal.create({ |
|
nzTitle: item.name + '列表', |
|
nzContent: UnitListComponent, |
|
nzViewContainerRef: this.viewContainerRef, |
|
nzWidth: 1200, |
|
nzFooter: null, |
|
nzComponentParams: { |
|
name: item.name, |
|
data: item.data, |
|
}, |
|
}); |
|
} else { |
|
this.modal.create({ |
|
nzTitle: '任务列表', |
|
nzContent: TaskListComponent, |
|
nzViewContainerRef: this.viewContainerRef, |
|
nzWidth: 1200, |
|
nzFooter: null, |
|
nzComponentParams: { |
|
data: { |
|
id: JSON.parse(sessionStorage.getItem('userData')).organizationId, |
|
}, |
|
type: '协助任务', |
|
}, |
|
}); |
|
} |
|
} |
|
|
|
textbox = [ |
|
{ name: '上级派发任务', isSelected: true }, |
|
{ name: '自主任务', isSelected: true }, |
|
{ name: '协助任务', isSelected: true }, |
|
]; |
|
clickText(item) { |
|
item.isSelected = !item.isSelected; |
|
|
|
console.log(this.leveldata); |
|
let id; |
|
this.leveldata |
|
? (id = this.leveldata.id) |
|
: (id = JSON.parse(sessionStorage.getItem('userData')).organizationId); |
|
this.getData_taskStatByOrg(id).then((data) => { |
|
this.echartsSetData_taskStatByOrg(); |
|
}); |
|
} |
|
} |
|
|
|
enum taskName { |
|
'上级派发任务' = '上级指派', |
|
'自主任务' = '自主任务', |
|
'协助任务' = '申领任务', |
|
}
|
|
|