<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<div id="charts_div" style="height: 500px;"></div>
<script type="text/javascript" src="sta/js/json2.js"></script>
<script src="sta/js/echarts-2.2.7/build/dist/echarts-all.js"></script>
<script src="sta/js/echarts-2.2.7/build/dist/echarts.js"></script>
<script src="sta/js/echarts-2.2.7/src/chart/bar.js"></script>
<script type="text/javascript">
require.config({
paths: {
echarts: 'dist'
}
});
var globalmin = null,totalCategory = 0,category=[],planData=[],planBase=[],actualData=[],actualBase=[],legend=[];
var json = {
"currStageList": [
"初步验收",
"试运行"
],
"stageList": []
}
var factBeginTimeTest = new Date('${exeInfo.factBeginTimeTest}').format('yyyy-MM-dd');
var zhijian = {
"name": "质检",
"planBeginDate": factBeginTimeTest,
"planEndDate": new Date('${exeInfo.planTimeTest}').format('yyyy-MM-dd'),
"endDate": new Date('${exeInfo.factEndTimeTest}').format('yyyy-MM-dd'),
"beginDate": factBeginTimeTest
}
if (factBeginTimeTest != 'NaN-aN-aN') {
json.stageList.push(zhijian);
}
var factBeginTimeMc = new Date('${exeInfo.factBeginTimeMc}').format('yyyy-MM-dd');
var zhizao = {
"name": "制造",
"planBeginDate": factBeginTimeMc,
"planEndDate": new Date('${exeInfo.planTimeMc}').format('yyyy-MM-dd'),
"endDate": new Date('${exeInfo.factEndTimeMc}').format('yyyy-MM-dd'),
"beginDate": factBeginTimeMc
}
if (factBeginTimeMc != 'NaN-aN-aN') {
json.stageList.push(zhizao);
}
var factBeginTimePc = new Date('${exeInfo.factBeginTimePc}').format('yyyy-MM-dd');
var caigou = {
"name": "采购",
"planBeginDate": factBeginTimePc,
"planEndDate": new Date('${exeInfo.planTimePc}').format('yyyy-MM-dd'),
"endDate": new Date('${exeInfo.factEndTimePc}').format('yyyy-MM-dd'),
"beginDate": factBeginTimePc
}
if (factBeginTimePc != 'NaN-aN-aN') {
json.stageList.push(caigou);
}
var factBeginTimeEc = new Date('${exeInfo.factBeginTimeEc}').format('yyyy-MM-dd');
var sheji = {
"name": "设计",
"planBeginDate": factBeginTimeEc,//计划开始
"planEndDate": new Date('${exeInfo.planTimeEc}').format('yyyy-MM-dd'),//计划结束模拟数据
"endDate": new Date('${exeInfo.factEndTimeEc}').format('yyyy-MM-dd'),//实际结束时间
"beginDate": factBeginTimeEc//实际开始时间
}
if (factBeginTimeEc != 'NaN-aN-aN') {
json.stageList.push(sheji);
}
$(function(){
if(json && json.stageList){
totalCategory = json.stageList.length;
var minPlan = null, minActual = null, max = null;
for(var i=(totalCategory-1);i>=0;i--){
var planStart = json.stageList[i].planBeginDate;
var actualStart = json.stageList[i].beginDate;
if(i==(json.stageList.length-1)){
var dateTT = new Date();
var dstr = dateTT.getFullYear()+"-"+(dateTT.getMonth()+1)+"-"+dateTT.getDate()
minPlan = planStart || dstr;
minActual = actualStart || dstr;
max = planStart;
}
if(GetDateDiff(max,json.stageList[i].planEndDate)<0){
max = json.stageList[i].planEndDate;
}
if(GetDateDiff(max,json.stageList[i].endDate)<0){
max = json.stageList[i].endDate;
}
if(GetDateDiff(minPlan,planStart)>0){
minPlan = planStart;
}
if(GetDateDiff(minActual,actualStart)>0){
minActual = actualStart;
}
}
var min = null;
if(GetDateDiff(minPlan,minActual)>=0){
min = minActual;
}else{
min = minPlan;
}
globalmin = min;
for(var i=(totalCategory-1);i>=0;i--){
var planStart = json.stageList[i].planBeginDate;
var planEnd = json.stageList[i].planEndDate;
var actualStart = json.stageList[i].beginDate;
var actualEnd = json.stageList[i].endDate;
category.push(json.stageList[i].name);
planBase.push(GetDateDiff(planStart,globalmin));
var pd = {};
pd.value = GetDateDiff(actualEnd,actualStart);
pd.color = '#FF0000';
var currentStage = json.currStageList;
var sName = json.stageList[i].name;
if(currentStage && $.inArray(sName, currentStage)>-1){
pd.color = '#FFFF00';
}
planData.push(GetDateDiff(planEnd,planStart));
actualBase.push(GetDateDiff(actualStart,globalmin));
actualData.push(pd);
}
for(var i=0; i<= GetDateDiff(max,min); i++){
var dt = dateAfter(min,i);
legend.push(dt);
}
init();
}
});
function init(){
require(
[
'echarts',
'echarts/chart/bar'
],
function (ec) {
var myChart = ec.init(document.getElementById('charts_div'));
var option = {
title: {
text: '项目实施进度表',
x: "center",
top: '20'
},
legend: {
y: 'bottom',
data: ['计划时间', '实际时间']
},
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
},
formatter: function (params) {
var tar0 = params[0];
var tar1 = params[1];
var tar2 = params[2];
var tar3 = params[3];
var tar2Value = dateAfter(globalmin,tar2.value-0) != 'NaN-NaN-NaN' ? dateAfter(globalmin,tar2.value-0) : '待定';
var tar3Value = dateAfter(globalmin,tar2.value+tar3.value) != 'NaN-NaN-NaN' ? dateAfter(globalmin,tar2.value+tar3.value) : '待定';
var tar0Value = dateAfter(globalmin,tar0.value-0) != 'NaN-NaN-NaN' ? dateAfter(globalmin,tar0.value-0) : '待定';
var tar1Value = dateAfter(globalmin,tar0.value+tar1.value) != 'NaN-NaN-NaN' ? dateAfter(globalmin,tar0.value+tar1.value) : '待定';
var result = tar2.seriesName + ' : ' + tar2Value + '<br/>' +
'计划完成时间' + ' : ' + tar3Value+ '<br/>' +
tar0.seriesName + ' : ' + tar0Value + '<br/>' +
'实际完成时间' + ' : ' + tar1Value;
return result;
}
},
xAxis : [
{
type : 'value',
splitNumber: legend.length-1,
max: legend.length-1,
axisLabel:{
show: false
},
splitLine:{
show: false
}
},
{
type : 'category',
boundaryGap : false,
data : legend
}
],
yAxis : [
{
type : 'category',
splitLine: {show:false},
data : category
}
],
series : [
{
name:'实际开始时间',
type:'bar',
stack: '总量1',
itemStyle:{
normal:{
barBorderColor:'rgba(0,0,0,0)',
color:'rgba(0,0,0,0)'
},
emphasis:{
barBorderColor:'rgba(0,0,0,0)',
color:'rgba(0,0,0,0)'
}
},
data:actualBase
},
{
name:'实际时间',
type:'bar',
stack: '总量1',
itemStyle : {
normal: {
color:'#dd4b39',
label : {
show: true,
position: 'inside'
}
}
},
data:actualData
},
{
name:'计划开始时间',
type:'bar',
stack: '总量',
itemStyle:{
normal:{
barBorderColor:'rgba(0,0,0,0)',
color:'rgba(0,0,0,0)'
},
emphasis:{
barBorderColor:'rgba(0,0,0,0)',
color:'rgba(0,0,0,0)'
}
},
data:planBase
},
{
name:'计划时间',
type:'bar',
stack: '总量',
itemStyle : {
normal: {
color:'#00AA55',
label : {
show: true,
position: 'inside'
}
}
},
data:planData
}
]
};
myChart.setOption(option);
}
);
}
function dateAfter(dateStr,num){
if (dateStr) {
var date1 = new Date(Date.parse(dateStr.replace(/-/g, "/")));
var date2 = new Date(date1);
date2.setDate(date1.getDate()+num);
var times = date2.getFullYear()+"-"+(date2.getMonth()+1)+"-"+date2.getDate();
return times;
}
}
function GetDateDiff(startDate,endDate){
if (startDate && endDate) {
var startTime = new Date(Date.parse(startDate.replace(/-/g, "/"))).getTime();
var endTime = new Date(Date.parse(endDate.replace(/-/g, "/"))).getTime();
var dates = (startTime - endTime)/(1000*60*60*24);
return dates;
}
}
</script>
Date.prototype.format = function(format) {
format = format || 'yyyy-MM-dd hh:mm:ss';
var date = {
"M+": this.getMonth() + 1,
"d+": this.getDate(),
"h+": this.getHours() ,
"m+": this.getMinutes(),
"s+": this.getSeconds(),
"q+": Math.floor((this.getMonth() + 3) / 3),
"S+": this.getMilliseconds()
};
if (/(y+)/i.test(format)) {
format = format.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
}
for (var k in date) {
if (new RegExp("(" + k + ")").test(format)) {
format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? date[k] : ("00" + date[k]).substr(("" + date[k]).length));
}
}
return format;
};