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

600 lines
18 KiB
HTML
Raw Normal View History

2023-10-24 15:17:16 +08:00
<div class="layui-card border-b">
<div class='layui-card-body {$role=="0"?"hover-view":"hover-edit"}'>
<div class="py-1">
<span class="gray">项目状态:</span>
<span class="layui-color-{$detail.status}" id="status_{$detail.id}"
data-val="{$detail.status}">{$detail.status_name}</span>
<span class="gray" style="margin-left:32px">负责人:</span>
<span id="director_uid_{$detail.id}" data-val="{$detail.director_uid}">{$detail.director_name}</span>
<i class="iconfont icon-wodedianping" title="编辑" data-id="{$detail.id}" data-name="director_uid"></i>
<span class="gray" style="margin-left:32px">项目成员:</span>{$detail.team_admin_names}
</div>
<div class="py-1">
<span class="gray">计划完成周期:</span>
<span id="start_time_{$detail.id}" data-val="">{$detail.start_time_str}</span>
<i class="iconfont icon-wodedianping" title="修改计划开始日期" data-name="start_time"></i>&nbsp;&nbsp;&nbsp;&nbsp; <span id="end_time_{$detail.id}"
data-val="">{$detail.end_time_str}</span><i class="iconfont icon-wodedianping"
title="修改计划结束日期" data-name="end_time"></i>
{gt name=":isModule('contract')" value="0"}
<span class="gray" style="margin-left:32px">关联合同:</span>
<span id="contract_id_{$detail.id}" data-val="{$detail.contract_id}">{$detail.contract}</span>
<i class="iconfont icon-wodedianping" title="编辑" data-id="{$detail.id}" data-name="contract_id"></i>
{/gt}
</div>
<div class="py-1">
<span class="gray">项目简介:</span>
<span id="content_{$detail.id}" data-val="{$detail.content}">{$detail.content}</span>
<i class="iconfont icon-wodedianping" title="编辑" data-id="{$detail.id}" data-name="content"></i>
</div>
</div>
</div>
<div class="layui-card border-y">
<div class="layui-card-header" style="height:45px;">
<div class="layui-row">
<div class="layui-col-md6">
<strong>项目阶段</strong>
</div>
{gt name="$role" value="0"}
<div class="layui-col-md6" style="text-align:right">
<a href="/project/index/edit/id/{$detail.id}" class="layui-btn layui-btn-normal layui-btn-sm">编辑项目阶段</a>
</div>
{/gt}
</div>
</div>
{notempty name="$step" id="vo"}
<div class="p-3 border-b">
<span class="gray">当前阶段:</span>{$step.flow_name}
<span class="gray" style="margin-left:20px">负责人:</span>{$step.check_name}
<span class="gray" style="margin-left:20px">成员:</span>{$step.flow_names}
<span class="gray" style="margin-left:20px">周期:</span>{$step.start_time|time_format=###,'Y-m-d'} 到 {$step.end_time|time_format=###,'Y-m-d'}
{eq name="$step.flow_uid" value="$login_admin.id"}
<div class="pt-3">
<span class="layui-btn layui-btn-normal layui-btn-sm" data-event="step" data-check="1">确认</span>
{gt name="$detail.step_sort" value="0"}
<span class="layui-btn layui-btn-danger layui-btn-sm" data-event="step" data-check="2">退回</span>
{/gt}
</div>
{/eq}
</div>
{/notempty}
<div class="px-3 py-1 border-b">
<div class="flow-flexbox check-items flow-flex-row">
{volist name="$step_array" id="vo"}
<div class="flow-flexbox check-item flow-flex-row">
{gt name="$vo.sort" value="$detail.step_sort"}
<i class="layui-icon layui-icon-time"></i>
{/gt}
{eq name="$vo.sort" value="$detail.step_sort"}
<i class="layui-icon layui-icon-username" data-on=""></i>
{/eq}
{lt name="$vo.sort" value="$detail.step_sort"}
<i class="layui-icon layui-icon-ok-circle" data-ok=""></i>
{/lt}
<div class="check-item-name">{$vo.flow_name}</div>
<div class="check-item-status">{$vo.check_name}</div>
<span class="layui-icon layui-icon-right"></span>
</div>
{/volist}
</div>
</div>
<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.flow_name}的工作。</p>
{elseif ($vo.status == 2) /}
<p style="padding-left:24px">{$vo.check_time_str}<span class="black mx-1">{$vo.check_name}</span>在{$vo.flow_name}执行了<span class="mx-1 red">{$vo.status_str}</span>操作。操作意见:<span class="red">{$vo.content}</span></p>
{else /}
<p style="padding-left:24px">{$vo.check_time_str}<span class="black mx-1">{$vo.check_name}</span><span class="mr-1 layui-color-{$vo.status}">{$vo.status_str}</span>了该阶段流程。操作意见:<span class="red">{$vo.content}</span></p>
{/if}
</li>
{/volist}
</ul>
{else/}
<div class="layui-data-none">暂无记录</div>
{/notempty}
</div>
</div>
<div class="layui-card border-y">
<div class="layui-card-header" style="height:45px;">
<div class="layui-row">
<div class="layui-col-md6">
<strong>项目附件</strong>
</div>
<div class="layui-col-md6" style="text-align:right">
<button type="button" class="layui-btn layui-btn-normal layui-btn-sm" id="uploadBtn">上传附件</button>
</div>
</div>
</div>
<div class="layui-row p-2" id="fileBox">
{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-card border-y">
<div class="layui-card-header" style="height:45px;">
<div class="layui-row">
<div class="layui-col-md6">
<strong>关联链接</strong>
</div>
<div class="layui-col-md6" style="text-align:right">
<button type="button" class="layui-btn layui-btn-sm layui-btn-sm2" id="linkBtn">新增链接</button>
</div>
</div>
</div>
<div class="layui-card-body">
<table class="layui-table">
<thead>
<tr>
<th width="50%">链接URL</th>
<th width="30%" style="text-align:center">链接说明</th>
<th width="10%" style="text-align:center">添加人</th>
<th width="10%" style="text-align:center">操作</th>
</tr>
</thead>
<tbody id="linkList">
{volist name="link_array" id="vo"}
<tr>
<td><a href="{$vo.url}" target="_blank">{$vo.url}</a></td>
<td>{$vo.desc}</td>
<td style="text-align: center;">{$vo.admin_name}</td>
<td style="text-align: center;">
<div class="layui-btn-group" style="width:66px">
<button type="button" class="layui-btn layui-btn-xs link-edit" data-id="{$vo.id}" data-url="{$vo.url}" data-desc="{$vo.desc}"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn layui-btn-danger layui-btn-xs link-delete" data-id="{$vo.id}"><i class="layui-icon"></i></button>
</div>
</td>
</tr>
{/volist}
{empty name="$link_array" }
<tr>
<td colspan="4"><div class="layui-data-none">暂无链接</div></td>
</tr>
{/empty}
</tbody>
</table>
</div>
</div>
<div class="layui-row mb-3 border-y">
<div class="layui-col-xs6 layui-col-md4">
<div class="layui-card">
<div class="layui-card-header">
<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-md8">
<div class="layui-card border-l">
<div class="layui-card-header">
<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-y">
<div class="layui-card-header">
<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-y">
<div class="layui-col-xs6 layui-col-md6">
<div class="layui-card border-r">
<div class="layui-card-header">
<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">
<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,table = layui.table, comment = layui.oaComment, edit = layui.oaEdit,oaTool = layui.oaTool;
$('.hover-edit').hover(function () {
$(this).addClass('hover-on');
}, function () {
$(this).removeClass('hover-on');
})
$('.hover-edit').on('click', 'i', function () {
let name = $(this).data('name');
let show_txt = $('#' + name + '_' + project_id).text().replace(/[\r\n\t]/g, "");
let real_txt = $('#' + name + '_' + project_id).data('val');
if (real_txt === '') {
real_txt = show_txt;
}
editShow(project_id, name, show_txt, real_txt);
})
let loading = false;
let editPost = function (id, name, show_val, real_val) {
let callback = function (e) {
layer.closeAll();
layer.msg(e.msg);
if (e.code == 0) {
setTimeout(function () {
location.reload();
}, 1000)
}
}
let postData = { id: id };
postData[name] = real_val;
tool.post("/project/index/edit", postData, callback);
}
function editShow(id, name, show_txt, real_txt) {
if (loading == true) {
return false;
}
if (name == "name") {
edit.text(id, name, real_txt, editPost);
}
if (name == "start_time" || name == "end_time") {
edit.date(id, name, real_txt, editPost);
}
if (name == "director_uid") {
edit.employee_one(id, name, show_txt, real_txt, editPost);
}
if (name == "status") {
edit.dropdown(id, name, real_txt, opsData[name], editPost);
}
if (name == "content") {
edit.textarea(id, name, real_txt, editPost);
}
if (name == "contract_id") {
layer.open({
title: '选择合同',
area: ['600px', '580px'],
type: 1,
content: '<div class="picker-table">\
<form class="layui-form pb-2">\
<div class="layui-input-inline" style="width:480px;">\
<input type="text" name="keywords" placeholder="合同名称" class="layui-input" autocomplete="off" />\
</div>\
<button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="search_form">提交搜索</button>\
</form>\
<div id="contractTable"></div></div>',
success: function () {
contractTable = table.render({
elem: '#contractTable'
, url: '/contract/api/get_contract'
, page: true //开启分页
, limit: 10
, cols: [[
{ type: 'radio', title: '选择' }
, { field: 'id', width: 100, title: '编号', align: 'center' }
, { field: 'name', title: '合同名称' }
]]
});
//项目搜索提交
form.on('submit(search_form)', function (data) {
contractTable.reload({ where: { keywords: data.field.keywords }, page: { curr: 1 } });
return false;
});
},
btn: ['确定'],
btnAlign: 'c',
yes: function () {
var checkStatus = table.checkStatus(contractTable.config.id);
var data = checkStatus.data;
if (data.length > 0) {
let callback = function (e) {
layer.closeAll();
layer.msg(e.msg);
if (e.code == 0) {
setTimeout(function () {
location.reload();
}, 1000)
}
}
let postData = { id: id, contract_id:data[0].id, customer_id:data[0].customer_id };
tool.post("/project/index/edit", postData, callback);
}
else {
layer.msg('请先选择合同');
return false;
}
}
})
}
}
$('#delProject').on('click', function () {
layer.confirm('确定要删除该项目吗?请慎重', { icon: 3, title: '提示' }, function (index) {
let callback = function (e) {
layer.closeAll();
layer.msg(e.msg);
if(e.code==0){
setTimeout(function () {
location.href='/project/index/index';
}, 1000)
}
}
let postData = { "id": project_id };
tool.delete("/project/index/delete", postData, callback);
});
})
$('body').on('click','[data-event="step"]',function(){
let check = $(this).data('check');
let callback = function (e) {
layer.msg(e.msg);
if(e.code==0){
parent.layui.pageTable.reload();
setTimeout(function(){
location.reload();
},2000)
}
}
if(check == 2){
layer.open({
type: 1,
title: '请输入退回的原因或理由',
area: ['800px', '360px'],
content: '<div style="padding:5px;"><textarea class="layui-textarea" id="remarkTextarea" style="width: 100%; height: 240px;"></textarea></div>',
btnAlign: 'c',
btn: ['提交保存'],
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{
layer.confirm('确认已完成该阶段工作,进入下个阶段?', {
icon: 3,
title: '提示'
},
function(index) {
tool.post("/project/api/step_check", {id: project_id,check:check}, callback);
})
}
});
oaTool.addFile({
type:1,
isSave:true,
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);
},
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);
}
});
$('#linkBtn').on('click', function () {
comment.addLink(0, project_id, 'project', '', '');
})
$('#linkList').on('click', '.link-edit', function () {
let id = $(this).data('id');
let url = $(this).data('url');
let desc = $(this).data('desc');
comment.addLink(id, project_id, 'project', url, desc);
})
$('#linkList').on('click', '.link-delete', function () {
let id = $(this).data('id');
layer.confirm('确定要删除该链接吗?', { icon: 3, title: '提示' }, function (index) {
let callback = function (e) {
layer.closeAll();
layer.msg(e.msg);
setTimeout(function(){
location.reload();
},2000)
}
let postData = { "id": id };
tool.delete("/project/api/delete_link", postData, 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>