735 lines
17 KiB
HTML
735 lines
17 KiB
HTML
{extend name="common/base"/}
|
|
{block name="style"}
|
|
<style>
|
|
body{background-color: #eff0f4;}
|
|
.layui-row h2{font-size: 18px; height:36px}
|
|
.layui-card-body {padding:10px 15px 0; overflow: hidden;}
|
|
.layui-card-header{padding-top: 5px;}
|
|
.layui-card-header h2{font-size: 18px; float: left;}
|
|
.layui-card-header h3{font-size: 16px;}
|
|
.layuiadmin-btn-group{float: right;}
|
|
.layui-card-body dl{width: 33.3%; float:left; display: block;}
|
|
.layui-card-tips{font-size: 12px; color:#999;}
|
|
.layui-card-value{padding:5px 0 15px; font-size: 18px; color:#1E9FFF;}
|
|
.creat-table{float: right; font-size: 14px; color:#0088FF; cursor: pointer;}
|
|
.show-item{padding-bottom: 20px;}
|
|
.show-item li{padding: 1px 6px; cursor: pointer; display: inline-block; border: 1px solid #0088FF; color:#0088FF; font-size: 12px; margin: 6px; border-radius: 3px;}
|
|
.show-item li.on{border: 1px solid #999; color:#999;}
|
|
.creat-table{float: right; font-size: 14px; color:#0088FF; cursor: pointer;}
|
|
</style>
|
|
<script src="__ADMIN__/echarts.min.js"></script>
|
|
{/block}
|
|
<!-- 主体 -->
|
|
{block name="body"}
|
|
<div class="vae-content" style="background-color: #f1f2f7;padding:20px 10px;">
|
|
<div class="layui-row layui-col-space15">
|
|
|
|
<div id="section1" class="layui-row layui-col-space15">
|
|
<div class="layui-col-md3">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">
|
|
<h3>项目统计</h3>
|
|
</div>
|
|
<div class="layui-card-body">
|
|
<dl>
|
|
<dt class="layui-card-tips">项目总数</dt>
|
|
<dd class="layui-card-value" id="project_total">-</dd>
|
|
</dl>
|
|
<dl>
|
|
<dt class="layui-card-tips">已完成的</dt>
|
|
<dd class="layui-card-value" id="project_finish">-</dd>
|
|
</dl>
|
|
<dl>
|
|
<dt class="layui-card-tips">正在进行的</dt>
|
|
<dd class="layui-card-value" id="project_doing">-</dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md3">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">
|
|
<h3>工作任务</h3>
|
|
</div>
|
|
<div class="layui-card-body">
|
|
<dl>
|
|
<dt class="layui-card-tips">任务总数</dt>
|
|
<dd class="layui-card-value" id="task_total">-</dd>
|
|
</dl>
|
|
<dl>
|
|
<dt class="layui-card-tips">已完成的</dt>
|
|
<dd class="layui-card-value" id="task_finish">-</dd>
|
|
</dl>
|
|
<dl>
|
|
<dt class="layui-card-tips">未完成的</dt>
|
|
<dd class="layui-card-value" id="task_doing">-</dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md3">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">
|
|
<h3>工时统计</h3>
|
|
</div>
|
|
<div class="layui-card-body">
|
|
<dl>
|
|
<dt class="layui-card-tips">总工时</dt>
|
|
<dd class="layui-card-value" id="work_total">-</dd>
|
|
</dl>
|
|
<dl>
|
|
<dt class="layui-card-tips">外勤工时</dt>
|
|
<dd class="layui-card-value" id="work_out">-</dd>
|
|
</dl>
|
|
<dl>
|
|
<dt class="layui-card-tips">案头工时</dt>
|
|
<dd class="layui-card-value" id="work_in">-</dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md3">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">
|
|
<h3>工作记录</h3>
|
|
</div>
|
|
<div class="layui-card-body">
|
|
<dl>
|
|
<dt class="layui-card-tips">总记录</dt>
|
|
<dd class="layui-card-value" id="record_total">-</dd>
|
|
</dl>
|
|
<dl>
|
|
<dt class="layui-card-tips">项目记录</dt>
|
|
<dd class="layui-card-value" id="record_project">-</dd>
|
|
</dl>
|
|
<dl>
|
|
<dt class="layui-card-tips">日常记录</dt>
|
|
<dd class="layui-card-value" id="record_daily">-</dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-col-md12">
|
|
<div class="layui-row layui-col-space15">
|
|
<div class="layui-col-md6 layui-anim layui-anim-scale">
|
|
<div class="layui-card">
|
|
<div id="plan" style="width: 100%; height:268px"></div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md6 layui-anim layui-anim-scale">
|
|
<div class="layui-card">
|
|
<div id="schedule" style="width: 100%; height:268px"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-col-md12 layui-anim layui-anim-scale">
|
|
<div class="layui-card">
|
|
<div class="layui-card-body">
|
|
<div id="chartYearProject" style="width: 100%;height:320px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-col-md12 layui-anim layui-anim-scale">
|
|
<div class="layui-card">
|
|
<div class="layui-card-body">
|
|
<div id="chartServiceAllProject" style="width: 100%;height:500px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-col-md12 layui-anim layui-anim-scale">
|
|
<div class="layui-card">
|
|
<div class="layui-card-body">
|
|
<div id="chartIndustryAllProject" style="width: 100%;height:500px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-col-md12 layui-anim layui-anim-scale">
|
|
<div class="layui-card">
|
|
<div class="layui-card-body">
|
|
<div id="chartIndustryYear" style="width: 100%;height:500px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/block}
|
|
<!-- /主体 -->
|
|
|
|
<!-- 脚本 -->
|
|
{block name="script"}
|
|
<script src="__ADMIN__/echarts.tool.js?v1"></script>
|
|
<script>
|
|
var currentYear = '{$this_year}',uid="{$this_uid}";
|
|
|
|
function getVirtulData(year,works) {
|
|
var date = +echarts.number.parseDate(year + '-01-01');
|
|
var end = +echarts.number.parseDate((+year + 1) + '-01-01');
|
|
var dayTime = 3600 * 24 * 1000;
|
|
var data = [];
|
|
for (var time = date; time < end; time += dayTime) {
|
|
var this_date = echarts.format.formatTime('yyyy-MM-dd', time);
|
|
if(works[this_date]){
|
|
data.push([this_date,works[this_date]]);
|
|
}else{
|
|
data.push([this_date,0]);
|
|
}
|
|
}
|
|
//console.log(data);
|
|
return data;
|
|
}
|
|
|
|
//按业务类型统计
|
|
var serviceAllProject = echarts.init(document.getElementById('chartServiceAllProject'),echartsTheme);
|
|
function chartServiceAllProject(project,data1,data2){
|
|
var optionD = {
|
|
color: ['#2D9AFF', '#FF5722'],
|
|
grid: {
|
|
left: '5px',
|
|
right: '5px',
|
|
bottom: '20px',
|
|
top: '72px',
|
|
containLabel: true
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross',
|
|
crossStyle: {
|
|
color: '#999'
|
|
}
|
|
}
|
|
},
|
|
title: {
|
|
text: currentYear + '年度各业务类型项目数量及项目工时情况',
|
|
top: 5,
|
|
left: 0,
|
|
textStyle: {
|
|
fontSize: 20,
|
|
color:'#333333',
|
|
fontWeight:800
|
|
}
|
|
},
|
|
legend: {
|
|
data: ['项目数量','项目工时'],
|
|
top: 10
|
|
},
|
|
xAxis: [{
|
|
type: 'category',
|
|
boundaryGap: true,
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
},
|
|
axisLabel: {
|
|
rotate: 30,
|
|
interval: 0
|
|
},
|
|
data: project
|
|
}],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
scale: true,
|
|
name: '数量',
|
|
min: 0,
|
|
boundaryGap: [0.2, 0.2]
|
|
},{
|
|
type: 'value',
|
|
scale: true,
|
|
name: '工时',
|
|
min: 0,
|
|
boundaryGap: [0.2, 0.2]
|
|
}
|
|
],
|
|
series: [{
|
|
name: '项目数量',
|
|
type: 'bar',
|
|
barWidth: 30, // 柱图宽度
|
|
barMaxWidth: 50, // 最大宽度
|
|
data: data1
|
|
},
|
|
{
|
|
name: '项目工时',
|
|
type: 'line',
|
|
yAxisIndex: 1,
|
|
data: data2
|
|
}
|
|
]
|
|
};
|
|
serviceAllProject.setOption(optionD);
|
|
}
|
|
|
|
//按行业类型统计
|
|
var industryAllProject = echarts.init(document.getElementById('chartIndustryAllProject'),echartsTheme);
|
|
function chartIndustryAllProject(project,data1,data2){
|
|
var optionC = {
|
|
color: ['#2D9AFF', '#FF5722'],
|
|
grid: {
|
|
left: '5px',
|
|
right: '5px',
|
|
bottom: '20px',
|
|
top: '72px',
|
|
containLabel: true
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross',
|
|
crossStyle: {
|
|
color: '#999'
|
|
}
|
|
}
|
|
},
|
|
title: {
|
|
text: currentYear + '年度各行业项目数量及项目工时情况',
|
|
top: 5,
|
|
left: 0,
|
|
textStyle: {
|
|
fontSize: 20,
|
|
color:'#333333',
|
|
fontWeight:800
|
|
}
|
|
},
|
|
legend: {
|
|
data: ['项目数量','项目工时'],
|
|
top: 10
|
|
},
|
|
xAxis: [{
|
|
type: 'category',
|
|
boundaryGap: true,
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
},
|
|
axisLabel: {
|
|
rotate: 30,
|
|
interval: 0
|
|
},
|
|
data: project
|
|
}],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
scale: true,
|
|
name: '数量',
|
|
min: 0,
|
|
boundaryGap: [0.2, 0.2]
|
|
},{
|
|
type: 'value',
|
|
scale: true,
|
|
name: '工时',
|
|
min: 0,
|
|
boundaryGap: [0.2, 0.2]
|
|
}
|
|
],
|
|
series: [{
|
|
name: '项目数量',
|
|
type: 'bar',
|
|
barWidth: 30, // 柱图宽度
|
|
barMaxWidth: 50, // 最大宽度
|
|
data: data1
|
|
},
|
|
{
|
|
name: '项目工时',
|
|
type: 'line',
|
|
yAxisIndex: 1,
|
|
data: data2
|
|
}
|
|
]
|
|
};
|
|
industryAllProject.setOption(optionC);
|
|
}
|
|
|
|
//按行业类型统计
|
|
var industryYear = echarts.init(document.getElementById('chartIndustryYear'),echartsTheme);
|
|
function chartIndustryYear(project,data1,data2){
|
|
var last_year = (currentYear-1)+'';
|
|
var optionB = {
|
|
color: ['#2D9AFF', '#FF5722'],
|
|
grid: {
|
|
left: '5px',
|
|
right: '5px',
|
|
bottom: '20px',
|
|
top: '72px',
|
|
containLabel: true
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross',
|
|
crossStyle: {
|
|
color: '#999'
|
|
}
|
|
}
|
|
},
|
|
title: {
|
|
text: currentYear + '年与'+last_year+'年各行业项目项目工时对比',
|
|
top: 5,
|
|
left: 0,
|
|
textStyle: {
|
|
fontSize: 20,
|
|
color:'#333333',
|
|
fontWeight:800
|
|
}
|
|
},
|
|
legend: {
|
|
data: [currentYear,last_year],
|
|
top: 10
|
|
},
|
|
xAxis: [{
|
|
type: 'category',
|
|
boundaryGap: true,
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
},
|
|
axisLabel: {
|
|
rotate: 30,
|
|
interval: 0
|
|
},
|
|
data: project
|
|
}],
|
|
yAxis: [{
|
|
type: 'value',
|
|
scale: true,
|
|
name: '工时',
|
|
min: 0,
|
|
boundaryGap: [0.2, 0.2]
|
|
}
|
|
],
|
|
series: [{
|
|
name: currentYear,
|
|
type: 'bar',
|
|
barWidth: 20, // 柱图宽度
|
|
barMaxWidth: 30, // 最大宽度
|
|
data: data1
|
|
},
|
|
{
|
|
name: last_year,
|
|
type: 'bar',
|
|
type: 'bar',
|
|
barWidth: 20, // 柱图宽度
|
|
barMaxWidth: 30, // 最大宽度
|
|
data: data2
|
|
}
|
|
]
|
|
};
|
|
industryYear.setOption(optionB);
|
|
}
|
|
|
|
//按月份统计
|
|
var yearProject = echarts.init(document.getElementById('chartYearProject'),echartsTheme);
|
|
function chartYearProject(project,data1,data2) {
|
|
var optionE = {
|
|
color: ['#2D9AFF', '#FF5722'],
|
|
grid: {
|
|
left: '5px',
|
|
right: '5px',
|
|
bottom: '20px',
|
|
top: '72px',
|
|
containLabel: true
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross',
|
|
crossStyle: {
|
|
color: '#999'
|
|
}
|
|
}
|
|
},
|
|
title: {
|
|
text: currentYear + '年度各个月项目数量及项目工时情况',
|
|
top: 5,
|
|
left: 0,
|
|
textStyle: {
|
|
fontSize: 20,
|
|
color:'#333333',
|
|
fontWeight:800
|
|
}
|
|
},
|
|
legend: {
|
|
data: ['项目数量','项目工时'],
|
|
top: 10
|
|
},
|
|
xAxis: [{
|
|
type: 'category',
|
|
boundaryGap: true,
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
},
|
|
axisLabel: {
|
|
rotate: 0,
|
|
interval: 0
|
|
},
|
|
data: project
|
|
}],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
scale: true,
|
|
name: '数量',
|
|
min: 0,
|
|
boundaryGap: [0.2, 0.2]
|
|
},{
|
|
type: 'value',
|
|
scale: true,
|
|
name: '工时',
|
|
min: 0,
|
|
boundaryGap: [0.2, 0.2]
|
|
}
|
|
],
|
|
series: [{
|
|
name: '项目数量',
|
|
type: 'bar',
|
|
barWidth: 30, // 柱图宽度
|
|
barMaxWidth: 50, // 最大宽度
|
|
data: data1
|
|
},
|
|
{
|
|
name: '项目工时',
|
|
type: 'line',
|
|
yAxisIndex: 1,
|
|
data: data2
|
|
}
|
|
]
|
|
};
|
|
yearProject.setOption(optionE);
|
|
}
|
|
|
|
//任务情况
|
|
var planChart = echarts.init(document.getElementById('plan'));
|
|
function planChartProject(plan) {
|
|
let today = new Date();
|
|
let tYear = today.getFullYear();
|
|
var planOps = {
|
|
title: {
|
|
top: 15,
|
|
left: 10,
|
|
text: currentYear+'年度工作任务情况'
|
|
},
|
|
tooltip: {
|
|
padding: 6,
|
|
formatter: function (obj) {
|
|
var value = obj.value;
|
|
var tips='<div style="font-size: 12px;">' + value[0] + '<br>';
|
|
tips+='共 '+value[1] + ' 个工作任务';
|
|
tips+='</div>';
|
|
return tips;
|
|
}
|
|
},
|
|
visualMap: {
|
|
min: 0,
|
|
max: 10,
|
|
show: false,
|
|
inRange: {
|
|
color: ['#fafafa','#32AA66']
|
|
}
|
|
},
|
|
calendar: {
|
|
top: 75,
|
|
left: 50,
|
|
right: 30,
|
|
range: tYear,
|
|
cellSize: ['auto', 24],
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: '#aaa',
|
|
type: 'dashed',
|
|
}
|
|
},
|
|
itemStyle: {
|
|
borderWidth: 0.5
|
|
},
|
|
yearLabel: {show: false},
|
|
monthLabel: {
|
|
nameMap: 'cn',
|
|
fontSize: 12
|
|
},
|
|
dayLabel: {
|
|
show: true,
|
|
formatter: '{start} 1st',
|
|
fontWeight: 'lighter',
|
|
nameMap: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
|
|
fontSize: 12
|
|
}
|
|
},
|
|
series: {
|
|
type: 'heatmap',
|
|
coordinateSystem: 'calendar',
|
|
data: getVirtulData(tYear,plan)
|
|
}
|
|
};
|
|
planChart.setOption(planOps);
|
|
}
|
|
|
|
|
|
|
|
//工时记录
|
|
var scheduleChart = echarts.init(document.getElementById('schedule'));
|
|
function scheduleChartProject(works) {
|
|
let today = new Date();
|
|
let tYear = today.getFullYear();
|
|
let scheduleOps = {
|
|
title: {
|
|
top: 15,
|
|
left: 10,
|
|
text: currentYear+'年度工时记录情况'
|
|
},
|
|
tooltip: {
|
|
padding: 6,
|
|
formatter: function (obj) {
|
|
var value = obj.value;
|
|
var tips='<div style="font-size: 12px;">' + value[0] + '<br>';
|
|
tips+='共 '+value[1] + ' 个工时';
|
|
tips+='</div>';
|
|
return tips;
|
|
}
|
|
},
|
|
visualMap: {
|
|
min: 0,
|
|
max: 10,
|
|
show: false,
|
|
inRange: {
|
|
color: ['#fafafa','#009CDB']
|
|
}
|
|
},
|
|
calendar: {
|
|
top: 75,
|
|
left: 50,
|
|
right: 30,
|
|
range: tYear,
|
|
cellSize: ['auto', 24],
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: '#aaa',
|
|
type: 'dashed',
|
|
}
|
|
},
|
|
itemStyle: {
|
|
borderWidth: 0.5
|
|
},
|
|
yearLabel: {show: false},
|
|
monthLabel: {
|
|
nameMap: 'cn',
|
|
fontSize: 12
|
|
},
|
|
dayLabel: {
|
|
show: true,
|
|
formatter: '{start} 1st',
|
|
fontWeight: 'lighter',
|
|
nameMap: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
|
|
fontSize: 12
|
|
}
|
|
},
|
|
series: {
|
|
type: 'heatmap',
|
|
coordinateSystem: 'calendar',
|
|
data: getVirtulData(tYear,works)
|
|
}
|
|
};
|
|
scheduleChart.setOption(scheduleOps);
|
|
}
|
|
|
|
setTimeout(function() {
|
|
window.onresize = function() {
|
|
planChart.resize();
|
|
scheduleChart.resize();
|
|
yearProject.resize();
|
|
serviceAllProject.resize();
|
|
industryYear.resize();
|
|
industryAllProject.resize();
|
|
}
|
|
})
|
|
|
|
function getProject() {
|
|
$.ajax({
|
|
url: "/admin/personal/detail",
|
|
type: 'post',
|
|
data: {
|
|
uid: uid,
|
|
year: currentYear
|
|
},
|
|
success: function(res) {
|
|
if (res.code == 1) {
|
|
$('#project_finish').html(res.data.count.project_finish);
|
|
$('#project_doing').html(numFormat(res.data.count.project_doing));
|
|
$('#project_total').html(numFormat(res.data.count.project_total));
|
|
$('#record_daily').html(numFormat(res.data.count.record_daily));
|
|
$('#record_project').html(res.data.count.record_project);
|
|
$('#record_total').html((res.data.count.record_total));
|
|
$('#task_doing').html((res.data.count.task_doing));
|
|
$('#task_finish').html((res.data.count.task_finish));
|
|
$('#task_total').html((res.data.count.task_total));
|
|
$('#work_in').html((res.data.count.work_in));
|
|
$('#work_out').html((res.data.count.work_out));
|
|
$('#work_total').html((res.data.count.work_total));
|
|
planChartProject(res.data.plan);
|
|
scheduleChartProject(res.data.schedule);
|
|
|
|
//按月份统计
|
|
var year_arr = res.data.year_arr,
|
|
year_arr_array = [],
|
|
year_arr_num_array = [],
|
|
year_arr_labor_array = [];
|
|
|
|
for (var e = 0; e < year_arr.length; e++) {
|
|
year_arr_array.push(year_arr[e].month + '月份');
|
|
year_arr_num_array.push(year_arr[e].num);
|
|
year_arr_labor_array.push( year_arr[e].labor);
|
|
}
|
|
chartYearProject(year_arr_array,year_arr_num_array,year_arr_labor_array);
|
|
|
|
//业务类型统计
|
|
var service_all_cate = res.data.service,
|
|
service_all_array = [],
|
|
service_arr_num_array = [],
|
|
service_arr_labor_array = [];
|
|
|
|
for (var d = 0; d < service_all_cate.length; d++) {
|
|
service_all_array.push(service_all_cate[d].title);
|
|
service_arr_num_array.push(service_all_cate[d].num);
|
|
service_arr_labor_array.push(service_all_cate[d].labor);
|
|
}
|
|
chartServiceAllProject(service_all_array, service_arr_num_array,service_arr_labor_array);
|
|
|
|
//行业统计
|
|
var industry_all_cate = res.data.industry,
|
|
industry_all_array = [],
|
|
industry_arr_num_array = [],
|
|
industry_arr_labor_array = [];
|
|
industry_arr_last_labor_array = [];
|
|
|
|
for (var c = 0; c < industry_all_cate.length; c++) {
|
|
industry_all_array.push(industry_all_cate[c].title);
|
|
industry_arr_num_array.push(industry_all_cate[c].num);
|
|
industry_arr_labor_array.push(industry_all_cate[c].labor);
|
|
industry_arr_last_labor_array.push(industry_all_cate[c].last_labor);
|
|
}
|
|
chartIndustryAllProject(industry_all_array, industry_arr_num_array,industry_arr_labor_array);
|
|
|
|
//年度对比行业统计
|
|
chartIndustryYear(industry_all_array, industry_arr_labor_array,industry_arr_last_labor_array);
|
|
} else {
|
|
layer.msg(res.msg);
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
//初始化
|
|
function init(layui) {
|
|
var form = layui.form,
|
|
layer = layui.layer;
|
|
|
|
getProject();
|
|
}
|
|
</script>
|
|
{include file="common/layui" base='base' extend="[]" use="['form']" callback="init" /}
|
|
{/block}
|
|
<!-- /脚本 -->
|