oa/app/project/view/index/view_overview.html

<table class="layui-table layui-table-form">
	<tr>
		<td class="layui-td-gray">项目状态</td>
		<td><span class="check-status-color-{$detail.status}">『{$detail.status_name}』</span></td>
		<td class="layui-td-gray">项目类别</td>
		<td>{$detail.cate}</td>
		<td class="layui-td-gray">始止日期</td>
		<td>{$detail.start_time|date='Y-m-d'} 到 {$detail.end_time|date='Y-m-d'}</td>
		<td class="layui-td-gray">所属部门</td>
		<td>{$detail.department|default='-'}</td>
	</tr>
	<tr>
		<td class="layui-td-gray">项目经理</td>
		<td>{$detail.director_name}</td>
		<td class="layui-td-gray">项目成员</td>
		<td colspan="5">{$detail.team_admin_names|default='-'}</td>
	</tr>
	{gt name="$detail.contract_id" value="0"}
	<tr>
		<td class="layui-td-gray">关联合同</td>
		<td colspan="7">{$detail.contract_name}</td>
	</tr>
	{/gt}
	{notempty name="$detail.content"}
	<tr>
		<td class="layui-td-gray">项目简介</td>
		<td colspan="7">{$detail.content}</td>
	</tr>
	{/notempty}
</table>

<div class="layui-card border" style="margin-top:16px;">
	<div class="layui-card-header" style="height:43px; line-height:43px;">
		<strong>项目阶段</strong>
	</div>
	<div class="px-3 py-1 border-b">
		<div class="flow-flexbox check-items flow-flex-row">
			{volist name="$detail.step_array" id="vo"}
			<div class='flow-flexbox flow-flex-row check-item {eq name="$vo.is_current" value="1"} blue{/eq} {notempty name="$step"}{lt name="$vo.sort" value="$step.sort"} gray{/lt}{else/} gray{/notempty}'>
				<div class="check-item-icon">
					<strong class="iconfont icon-bianji blue"></strong>
					<strong class="iconfont icon-kaoheguanli gray"></strong>
					<strong class="iconfont icon-genjinjilu black"></strong>
				</div>
				<div>
					<div class="check-item-name"><strong class="f16">{$vo.title}</strong> {$vo.director_name|default=''}</div>
					<div class="check-item-time">{$vo.start_time|date='Y-m-d'} 到 {$vo.end_time|date='Y-m-d'}</div>
				</div>
				<div class="layui-icon layui-icon-right"></div>
			</div>
			{/volist}
		</div>
	</div>
	{notempty name="$step"}
	<div class="p-3 border-b">
		<div>
			<span class="gray">当前阶段：</span>{$step.title}
			<span class="gray" style="margin-left:20px">阶段周期：</span>{$step.start_time|date='Y-m-d'} 到 {$step.end_time|date='Y-m-d'}
			<span class="gray" style="margin-left:20px">负责人：</span>{$step.director_name}
			{eq name="$step.director_uid" value="$login_admin.id"}
			<span class="layui-btn layui-btn-normal layui-btn-xs" data-event="step" data-check="1">确认完成</span>
			<span class="layui-btn layui-btn-danger layui-btn-xs" data-event="step" data-check="2">退回上一阶段</span>
			{/eq}
		</div>
		{notempty name="$step.unames"}
		<div class="pt-2">
			<span class="gray">阶段成员：</span>{$step.unames|default=''}
		</div>
		{/notempty}
		{notempty name="$step.remark"}
		<div class="pt-2">
			<span class="gray">阶段说明：</span>{$step.remark|default=''}
		</div>
		{/notempty}
	</div>
	{/notempty}
	<div class="p-3">
		<p><strong>阶段流转记录</strong></p>
		{notempty name="$step_record"}
			<ul class="layui-timeline pt-2">
			{volist name="$step_record" id="vo"}		
				<li class="layui-timeline-item delete_{$vo.delete_time}">
					<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
					{if ($vo.status == 1)}
					<p style="padding-left:24px">{$vo.check_time_str}<span class="black mx-1">{$vo.check_name}</span><span class="mr-1 green">{$vo.status_str}</span>了『{$vo.title}』的工作。操作意见：<span class="green">{$vo.content|default='-'}</span></p>
					{else /}
					<p style="padding-left:24px">{$vo.check_time_str}<span class="black mx-1">{$vo.check_name}</span>在阶段『{$vo.title}』执行了<span class="mx-1 red">{$vo.status_str}</span>操作。操作意见：<span class="red">{$vo.content|default='-'}</span></p>
					{/if}					
				</li>
			{/volist}
			</ul>
		{else/}
		<div class="layui-data-none">暂无阶段流转记录</div>
		{/notempty}
	</div>
</div>

<div class="layui-card border">
	<div class="layui-card-header" style="height:45px; line-height:45px;">
		<strong>项目附件</strong>
		<button type="button" class="layui-btn layui-btn-xs" id="uploadBtn">上传附件</button>
	</div>
	<div class="layui-row p-2" id="uploadBox">
		{volist name="file_array" id="vo"}
			<div class="layui-col-md4" id="fileItem{$vo.id}">{:file_card($vo)}</div>
		{/volist}
		{empty name="$file_array" }
		<div class="layui-data-none">暂无项目附件</div>
		{/empty}
	</div>
</div>

<div class="layui-row mb-4 border">
	<div class="layui-col-xs6 layui-col-md3">
		<div class="layui-card">
			<div class="layui-card-header" style="height:45px; line-height:45px;">
				<strong>项目概况</strong>
			</div>
			<div class="p-3">
				<dl>
					<dt>任务 <span class="gray">(已完成/全部)</span></dt>
					<dd class="layui-card-value" title="已完成/总任务">{$detail.tasks_finish} / {$detail.tasks}</dd>
				</dl>
			</div>
			<div class="pt-2 px-3">
				<dl>
					<dt>项目工时 <span class="gray">(实际/计划)</span></dt>
					<dd class="layui-card-value" title="实际工时/计划工时">{$detail.hours} / {$detail.plan_hours}</dd>
				</dl>
			</div>
			<div class="pt-2 px-3">
				<dl>
					<dt>工作记录</dt>
					<dd class="layui-card-value" title="工作记录数">{$detail.schedules}</dd>
				</dl>
			</div>
		</div>
	</div>
	<div class="layui-col-xs6 layui-col-md9">
		<div class="layui-card border-l">
			<div class="layui-card-header" style="height:45px; line-height:45px;">
				<strong>项目进度</strong>
			</div>
			<div class="layui-card-body">
				<div class="layui-row">
					<div class="layui-col-md6">
						<div id="progress" class="gougu-data-none" style="width:100%; height:200px;"></div>
					</div>
					<div class="layui-col-md6">
						<div id="delay" class="gougu-data-none" style="width:100%; height:200px;"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>


<div class="layui-card border">
	<div class="layui-card-header" style="height:45px; line-height:45px;">
		<strong>项目燃尽图</strong>
	</div>
	<div class="layui-card-body">
		<div id="cross" class="gougu-data-none" style="width:100%; height:360px;"
			data-tips="任务数：{$detail.tasks}，已完成：{$detail.tasks_finish}，未完成：{$detail.tasks_unfinish}">
		</div>
	</div>
</div>

<div class="layui-row border">
	<div class="layui-col-xs6 layui-col-md6">
		<div class="layui-card  border-r">
			<div class="layui-card-header" style="height:45px; line-height:45px;">
				<strong>任务分配情况</strong>
			</div>
			<div class="layui-card-body">
				<div id="plan" class="gougu-data-none" style="width:100%; height:150px;"></div>
			</div>
		</div>
	</div>
	<div class="layui-col-xs6 layui-col-md6">
		<div class="layui-card">
			<div class="layui-card-header" style="height:45px; line-height:45px;">
				<strong>工时登记情况</strong>
			</div>
			<div class="layui-card-body">
				<div id="work" class="gougu-data-none" style="width:100%; height:150px;"></div>
			</div>
		</div>
	</div>
</div>
<script>
function overview(){
	let form = layui.form,tool = layui.tool,uploadPlus = layui.uploadPlus;
	
	$('body').on('click','[data-event="step"]',function(){
		let check = $(this).data('check');
		let callback = function (e) {
			layer.msg(e.msg);
			if(e.code==0){
				setTimeout(function(){
					location.reload();
				},2000)
				parent.layui.pageTable.reload();
			}
		}
		if(check == 2){
			$(parent.$('.express-close')).addClass('parent-colse');
			layer.open({
				type: 1,
				title: '请输入退回的原因或理由',
				area: ['500px', '252px'],
				content: '<div style="padding:5px;"><textarea class="layui-textarea" id="remarkTextarea" style="width: 100%; height:132px;"></textarea></div>',
				btnAlign: 'c',
				btn: ['确认回退'],
				end: function(){
					$(parent.$('.express-close')).removeClass('parent-colse');
				},
				yes: function () {
					let remark = $("#remarkTextarea").val();
					if (remark != '') {
						tool.post("/project/api/step_check", {id: project_id,check:check,content:remark}, callback);
					} else {
						layer.msg('请输入原因或理由');
					}
				}
			})
		}
		else{
			$(parent.$('.express-close')).addClass('parent-colse');
			layer.open({
				type: 1,
				title: '请输入操作意见',
				area: ['500px', '252px'],
				content: '<div style="padding:5px;"><textarea class="layui-textarea" id="remarkTextarea" style="width: 100%; height:132px;"></textarea></div>',
				btnAlign: 'c',
				btn: ['确认完成'],
				end: function(){
					$(parent.$('.express-close')).removeClass('parent-colse');
				},
				yes: function () {
					let remark = $("#remarkTextarea").val();
					if (remark != '') {
						tool.post("/project/api/step_check", {id: project_id,check:check,content:remark}, callback);
					} else {
						layer.msg('请输入操作意见');
					}
				}
			})
		}
	});

	var attachment = new uploadPlus({
		"target":'uploadBtn',
         "targetBox":'uploadBox',
         "attachment":{
            "type":1,//0ajax多文件模式，1ajax单文件单记录模式
            "uidDelete":true,//是否开启只有上传人自己才能删除自己的附件
			"ajaxSave":function(res){
				let callback = function (e) {
					layer.msg('上传成功');
					setTimeout(function(){
						location.reload();
					},2000)	
				}
				tool.post("/project/api/add_file", { 'topic_id': project_id, 'file_id': res.data.id, 'file_name': res.data.name, 'module': 'project' }, callback);
			},
			"ajaxDelete":function(file_id){
				let callback = function (e) {
					layer.msg(e.msg);
					if (e.code == 0) {						
						$('#fileItem' + file_id).remove();
					}
				}
				tool.delete("/project/api/delete_file", {id: file_id}, callback);			
			}
		}
	});

	let callback = function (res) {
		if (res.data.date_tasks instanceof Array == false) {
			optionA.title.text = res.data.task_pie.ok_lv + '%';
			optionA.series = [
				{
					type: 'pie',
					radius: ['60%', '80%'],
					center: ['50%', '50%'],
					avoidLabelOverlap: false,
					label: {
						show: false
					},
					data: [
						{ value: res.data.task_pie.count - res.data.task_pie.count_ok, name: '待处理' },
						{ value: res.data.task_pie.count_ok, name: '已完成' }
					]
				}
			];
			optionA && progressChart.setOption(optionA);

			optionB.title.text = res.data.task_pie.delay_lv + '%';
			optionB.series = [
				{
					type: 'pie',
					radius: ['60%', '80%'],
					center: ['50%', '50%'],
					avoidLabelOverlap: false,
					label: {
						show: false
					},
					data: [{
						value: res.data.task_pie.delay,
						name: '延迟',
						itemStyle: {
							color: "#ED6666",
						}
					},
					{
						value: (res.data.task_pie.count - res.data.task_pie.delay),
						name: '未延迟',
						itemStyle: {
							color: "#91CC75",
						}
					}
					]
				}
			];
			optionB && delayChart.setOption(optionB);

			var dataD = cross_count(res.data.date_tasks, res.data.date_tasks_ok);
			var tips = $('#cross').data('tips');
			optionD.title = {
				text: '',
				subtext: tips,
				top: -10,
			},
			optionD.xAxis = {
				type: 'category',
				boundaryGap: false,
				splitLine: {
					show: true,
					lineStyle: {
						type: 'dashed'
					}
				},
				data: dataD.x,
				axisLabel: {
					rotate: 30,
					formatter: function (value, index) {
						return value.slice(5);
					}
				}
			};
			optionD.series = [
				{
					name: '任务计划剩余',
					type: 'line',
					showSymbol: false,
					markLine: {
						data: [{ type: 'average', name: 'Avg' }],
					},
					lineStyle: {
						width: 2
					},
					data: dataD.y
				},
				{
					name: '任务实际剩余',
					type: 'line',
					showSymbol: false,
					areaStyle: {
						opacity: 0.1
					},
					markLine: {
						data: [{ type: 'average', name: 'Avg' }],
					},
					lineStyle: {
						width: 2
					},
					data: dataD.y2
				}
			]
			optionD && crossChart.setOption(optionD)

			var dataE = getCalendarData(res.data.date_tasks);
			optionE.calendar.range = dataE.range,
				optionE.series = {
					type: 'heatmap',
					coordinateSystem: 'calendar',
					data: dataE.data
				}
			optionE && planChart.setOption(optionE);

			if (res.data.date_schedules instanceof Array == false) {
				var dataF = getCalendarData(res.data.date_schedules);
				optionF.calendar.range = dataF.range,
					optionF.series = {
						type: 'heatmap',
						coordinateSystem: 'calendar',
						data: dataF.data
					}
				optionF && workChart.setOption(optionF);
			}
		}
	}
	tool.get('/project/api/get_chart_data', { 'project_id': project_id }, callback);

	window.onresize = function () {
		progressChart.resize();
		delayChart.resize();
		crossChart.resize();
		planChart.resize();
		workChart.resize();
	}
}
</script>