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}
<!-- /脚本 -->