You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

607 lines
27 KiB
Plaintext

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>主页</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script src="../../WF/Scripts/jquery-1.11.0.min.js" type="text/javascript"></script>
<link href="../layuiadmin/layui/css/layui.css" rel="stylesheet" />
<link href="../layuiadmin/style/admin.css" rel="stylesheet" />
<link href="../FlowDesigner/css/icons.css" rel="stylesheet" />
<script src="../layuiadmin/layui/layui.js"></script>
<link href="../layuiadmin/layui/css/modules/layer/default/layer.css" rel="stylesheet" />
<script src="../layuiadmin/layui/lay/modules/layer.js"></script>
<!-- 引用通用的js文件. -->
<script src="/WF/Scripts/config.js?v=1.0" type="text/javascript"></script>
<script src="/WF/Comm/Gener.js?v=1.0" type="text/javascript"></script>
<script src="../../WF/Scripts/QueryString.js" type="text/javascript"></script>
<script src="../../WF/Scripts/echartsjs/echarts.min.js" type="text/javascript"></script>
<style type="text/css">
.au-but {
font-size: 0.6rem;
background-color: transparent;
border: none;
outline: none;
border: 1px solid #E59C26;
padding: 0 0.25rem;
color: #E59C26;
border-radius: 0.125rem;
}
.but-color1 {
border-color: #0F81EC;
color: #0F81EC;
}
.but-color2 {
border-color: #FF4E00;
color: #FF4E00;
}
.but-color3 {
border-color: #3c763d;
color: #3c763d;
}
.layuiadmin-card-status dd div a {
color: #2f4050 !important;
}
</style>
<script type="text/javascript">
$(function () {
//待办事项
GetToListCount();
//最近使用的流程
GetUseFlowByUserNo();
//获取登陆用户人信息
GetUserInfo();
FlowAnalyse_DataSet();
//我参与的流程
//我发起的流程
//我部门发起的流程
});
/**
* 待办事项 包含待办、抄送、退回、逾期的流程
*/
function GetToListCount() {
var handler = new HttpHandler("BP.Cloud.HttpHandler.App_Portal");
var data = handler.DoMethodReturnString("GetToListCount");
if (data.indexOf("err@") != -1) {
layer.alert(data);
console.log(data);
return;
}
data = JSON.parse(data);
$("#empWorks").html(data.EmpWorks);
$("#ccs").html(data.CCs);
$("#returnWorks").html(data.ReturnWorks);
$("#overWorks").html(data.OverTimeWorks);
}
/**
* 最近使用的流程
* 默认查询最近使用的8条流程
*/
function GetUseFlowByUserNo() {
var _html = "";
$("#flows").html("");
var handler = new HttpHandler("BP.Cloud.HttpHandler.App_Portal");
handler.AddPara("Top", 8);
var data = handler.DoMethodReturnString("GetUseFlowByUserNo");
if (data.indexOf("err@") != -1) {
layer.alert(data);
console.log(data);
return;
}
data = JSON.parse(data);
$.each(data, function (i, item) {
var iconObj = [];
if (item.ICON!=undefined && item.ICON.indexOf('@') >= 0) {//包含@符号,是按照规则组装的数据
iconObj = item.ICON.split("@");
}
_html = "";
_html += '<li class="layui-col-xs3">';
_html += "<a href='javaScript:void(0);' onclick='openNewWindow(\"" + item.FK_Flow + "\")'>";
_html += "<img style='width: 60px' src='../FlowDesigner/FlowIcon/" + (iconObj == undefined ? "" : iconObj[0]) + ".png' class=' layui-icon " + (iconObj == undefined ? "" : iconObj[1]) + "' onerror=\"javascript:this.src = '../FlowDesigner/AppTemplate/DefaultIcon.png';\" '/>";
_html += '<cite>' + item.FlowName + '</cite>';
_html += '</a>';
_html += '</li>';
$("#flows").append(_html);
});
}
function openNewWindow(flowNo) {
var winObj = window.open("../OneFlow/Default.htm?FK_Flow=" + flowNo);
//var loop = setInterval(function () {
// if (winObj.closed) {
// clearInterval(loop);
// window.focus();
// parent.location.reload();
// }
//}, 1);
}
function OpenFrm(workId, fid, pworkId, fk_flow, fk_node) {
window.open("../../WF/MyView.htm?WorkID=" + workId + "&FID=" + fid + "&PWorkID=" + pworkId + "&FK_Flow=" + fk_flow + "&FK_Node=" + fk_node);
}
/**
* 获取登陆用户人信息
*/
function GetUserInfo() {
var handler = new HttpHandler("BP.Cloud.HttpHandler.App_Portal");
var data = handler.DoMethodReturnString("GetUserInfo");
if (data.indexOf("err@") != -1) {
layer.alert(data);
console.log(data);
return;
}
if (data == "") {
layer.alert("登陆信息丢失,请重新登陆");
SetHref( "../../Default.htm");
return;
}
data = JSON.parse(data);
$("#UserName").html(data.Name);
$("#deptName").html(data.DeptName);
$("#Stations").html(data.Stations);
$("#OrgName").html(data.OrgName);
}
/**
* 流程数据分析
*/
var flowData;
function FlowAnalyse_DataSet() {
var handler = new HttpHandler("BP.Cloud.HttpHandler.App_Portal");
var data = handler.DoMethodReturnString("FlowAnalyse_DataSet");
if (data.indexOf("err@") != -1) {
layer.alert(data);
console.log(data);
return;
}
flowData = JSON.parse(data);
var _html = "";
//我发起的待办信息
var runnings = flowData.Running;
$.each(runnings, function (i, item) {
if (i > 14)
return true;
var iconObj = [];
if (item.ICON.indexOf('@') >= 0) {//包含@符号,是按照规则组装的数据
iconObj = item.ICON.split("@");
}
//alert(iconObj);
_html = "<dd>";
_html += "<div>";
_html += "<p><img style='width: 20px' src='/App/FlowDesigner/FlowIcon/" + (iconObj == undefined ? "" : iconObj[0]) + ".png' class='" + (iconObj == undefined ? "" : iconObj[1]) + "' onerror=\"javascript:this.src = '/App/FlowDesigner/AppTemplate/DefaultIcon.png';\" '/>";
_html += "&nbsp;<a href='javaScript:void(0)' onclick='OpenFrm(" + item.WorkID + "," + item.FID + "," + item.PWorkID + ",\"" + item.FK_Flow + "\"," + item.FK_Node + ")'>" + item.Title + "</a></p>";
_html += "<span>" + item.StarterName + "</span><span style='margin-left:1rem'>" + item.RDT + "</span>";
_html += "</div>";
_html += "<div style='width:3.2rem'>";
if (item.RunningType == "todolist") {
if (item.WFState == 5)
_html += "<div class='au-but but-color2'>退回</div>";
else
_html += "<img src='./MenuImg/Todolist.png' style='width:15px;' alt='待办'/>";
}
else if (item.RunningType == "running")
_html += "<img src='./MenuImg/Runing.png' style='width:15px;' alt='处理中' >";
else if (item.RunningType == "complete")
_html += "<img src='./MenuImg/OK.png' style='width:15px;' alt='已完成的工作'/>";
_html += "</div>";
_html += "</dd>";
$("#MyStartFlow_Running").append(_html);
});
//我参与的流程分析
var myJoinFlows = flowData.MyJoinFlow;
queryFlowAnalyse(myJoinFlows, "MyJoinFlow", "我参与的流程", true, false, false);
//我发起的流程分析
var myStartFlows = flowData.MyStartFlow;
queryFlowAnalyse(myStartFlows, "MyStartFlow", "我发起的流程", false, true, false);
//我部门发起的流程分析
var myDeptFlows = flowData.MyDeptFlow;
queryFlowAnalyse(myDeptFlows, "MyDeptFlow", "我部门发起的流程", false, false, true);
}
function queryFlowAnalyse(flowData, flowType, title, isLineShow, isPieShow, isBarShow) {
var Flow_X = [];
var Flow_Y = [];
$.each(flowData, function (i, item) {
Flow_X[i] = item.name;
Flow_Y[i] = item.value;
})
/*********************************************折线图*****************************************************/
// 基于准备好的dom初始化echarts实例
if (isLineShow) {
var myChart = echarts.init(document.getElementById(flowType + '_Line'));
// 指定图表的配置项和数据
var option = {
grid: {
top: '5%',
right: '1%',
left: '1%',
bottom: '10%',
containLabel: true
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: Flow_X
},
yAxis: {
type: 'value'
},
series: [{
name: '流程数',
data: Flow_Y,
type: 'line',
smooth: true,
symbol: 'emptydiamond',
itemStyle: {
normal: {
color: '#8cd5c2', //改变折线点的颜色
lineStyle: {
color: '#8cd5c2' //改变折线颜色
}
}
},
areaStyle: {
normal: {}
},
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
/*********************************************饼状图*****************************************************/
// 基于准备好的dom初始化echarts实例
if (isPieShow) {
var myChart = echarts.init(document.getElementById(flowType + '_Pie'));
// 指定图表的配置项和数据
var option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
// orient 设置布局方式,默认水平布局,可选值:'horizontal'(水平) ¦ 'vertical'(垂直)
orient: 'vertical',
// x 设置水平安放位置,默认全图居中,可选值:'center' ¦ 'left' ¦ 'right' ¦ {number}x坐标单位px
x: 'left',
// y 设置垂直安放位置,默认全图顶端,可选值:'top' ¦ 'bottom' ¦ 'center' ¦ {number}y坐标单位px
y: 'center',
itemWidth: 24, // 设置图例图形的宽
itemHeight: 18, // 设置图例图形的高
textStyle: {
color: '#666' // 图例文字颜色
},
// itemGap设置各个item之间的间隔单位px默认为10横向布局时为水平间隔纵向布局时为纵向间隔
itemGap: 10,
//backgroundColor: '#f8f8f8', // 设置整个图例区域背景颜色
data: Flow_X
},
series: [{
type: 'pie',
name: '',
radius: '60%',
center: ['60%', '50%'],
data: flowData,
itemStyle: {
// emphasis英文意思是 强调;着重;(轮廓、图形等的)鲜明;突出,重读
// emphasis设置鼠标放到哪一块扇形上面的时候扇形样式、阴影
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(30, 144, 2550.5)'
}
},
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
/*********************************************柱状图*****************************************************/
// 基于准备好的dom初始化echarts实例
if (isBarShow) {
var myChart = echarts.init(document.getElementById(flowType + '_Bar'));
//设计显示的颜色
var colorList = [];
for (var i = 0; i < Flow_X.length; i++) {
if (i % 3 == 0)
colorList[i] = '#ff4844';
if (i % 3 == 1)
colorList[i] = '#9ac3e5';
if (i % 3 == 2)
colorList[i] = '#66ac52';
}
// 指定图表的配置项和数据
var option = {
grid: {
top: '5%',
right: '1%',
left: '1%',
bottom: '10%',
containLabel: true
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: Flow_X
},
yAxis: {
type: 'value'
},
series: [{
name: '流程数',
data: Flow_Y,
type: 'bar',
smooth: true,
itemStyle: {
normal: {
color: function (params) {
//var colorList = ['#ff4844', '#9ac3e5', '#66ac52', '#ffc032', '#549bd3', '#f47e39'];
return colorList[params.dataIndex];
}
}
}
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
}
function ChangeShowDiv(flowType, chartType, obj) {
$(obj).addClass("layui-this");
if (chartType == "Line") {
$("#" + flowType + "_Pie").removeClass("layui-this");
$("#" + flowType + "_Bar").removeClass("layui-this");
$("#" + flowType + "_Line").addClass("layui-this");
$("#" + flowType + "_Pie_i").removeClass("layui-this");
$("#" + flowType + "_Bar_i").removeClass("layui-this");
queryFlowAnalyse(flowData[flowType], flowType, "", true, false, false);
}
if (chartType == "Pie") {
$("#" + flowType + "_Pie").addClass("layui-this");
$("#" + flowType + "_Bar").removeClass("layui-this");
$("#" + flowType + "_Line").removeClass("layui-this");
$("#" + flowType + "_Line_i").removeClass("layui-this");
$("#" + flowType + "_Bar_i").removeClass("layui-this");
queryFlowAnalyse(flowData[flowType], flowType, "", false, true, false);
}
if (chartType == "Bar") {
$("#" + flowType + "_Pie").removeClass("layui-this");
$("#" + flowType + "_Bar").addClass("layui-this");
$("#" + flowType + "_Line").removeClass("layui-this");
$("#" + flowType + "_Pie_i").removeClass("layui-this");
$("#" + flowType + "_Line_i").removeClass("layui-this");
queryFlowAnalyse(flowData[flowType], flowType, "", false, false, true);
}
}
//已知URL,在右侧打开页面
function OpenWindowRight(url, title, type) {
if (top.layui.index) {
top.layui.index.openTabsPage(url, title)
} else {
window.open(url)
}
}
</script>
</head>
<body layadmin-themealias="coffee">
<div class="layui-fluid">
<div class="layui-row layui-col-space15">
<div class="layui-col-md8">
<div class="layui-row layui-col-space15">
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header">待办事项</div>
<div class="layui-card-body">
<div class="layui-carousel layadmin-carousel layadmin-backlog" lay-anim="" lay-indicator="inside" lay-arrow="none" style="width: 100%; height: 280px;">
<div carousel-item="">
<ul class="layui-row layui-col-space10 layui-this">
<li class="layui-col-xs6">
<a href="javascript:;" onclick="OpenWindowRight('/App/Todolist.htm','待办',1)" class="layadmin-backlog-body">
<h3>待办</h3>
<p><cite id="empWorks">66</cite></p>
</a>
</li>
<li class="layui-col-xs6">
<a href="javascript:;" onclick="OpenWindowRight('/App/CC.htm','抄送',2)" class="layadmin-backlog-body">
<h3>抄送</h3>
<p><cite id="ccs">12</cite></p>
</a>
</li>
<li class="layui-col-xs6">
<a href="javascript:;" onclick="OpenWindowRight('/App/Todolist.htm?WFState=5','退回待办',3)" class="layadmin-backlog-body">
<h3>退回</h3>
<p><cite id="returnWorks">99</cite></p>
</a>
</li>
<li class="layui-col-xs6">
<a href="javascript:;" onclick="OpenWindowRight('/App/TodolistOverTime.htm','逾期待办',4);" class="layadmin-backlog-body">
<h3>逾期</h3>
<p><cite id="overWorks">20</cite></p>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header">最近使用的流程</div>
<div class="layui-card-body">
<div class="layui-carousel layadmin-carousel layadmin-shortcut" lay-anim="" lay-indicator="inside" lay-arrow="none" style="width: 100%; height: 280px;">
<div carousel-item="">
<ul class="layui-row layui-col-space10 layui-this" id="flows"></ul>
</div>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">我参与的流程</div>
<div class="layui-card-body">
<div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-dataview" lay-anim="fade" lay-indicator="inside" lay-arrow="none" style="width: 100%; height: 280px;">
<div carousel-item id="MyJoinlow">
<div id="MyJoinFlow_Line" class="layui-this"></div>
<div id="MyJoinFlow_Bar" ></div>
<div id="MyJoinFlow_Pie"></div>
</div>
<div class="layui-carousel-ind">
<ul>
<li class="layui-this" id="MyJoinFlow_Line_i" onclick="ChangeShowDiv('MyJoinFlow','Line',this)"></li>
<li class="" id="MyJoinFlow_Bar_i" onclick="ChangeShowDiv('MyJoinFlow','Bar',this)"></li>
<li class="" id="MyJoinFlow_Pie_i" onclick="ChangeShowDiv('MyJoinFlow','Pie',this)"></li>
</ul>
</div>
</div>
</div>
</div>
<div class="layui-card">
<div class="layui-card-header">我部门发起的流程</div>
<div class="layui-card-body">
<div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-dataview">
<div carousel-item id="MyDeptFlow">
<div id="MyDeptFlow_Bar" class="layui-this"></div>
<div id="MyDeptFlow_Line"></div>
<div id="MyDeptFlow_Pie"></div>
</div>
<div class="layui-carousel-ind">
<ul>
<li class="layui-this" id="MyDeptFlow_Bar_i" onclick="ChangeShowDiv('MyDeptFlow','Bar',this)"></li>
<li class="" id="MyDeptFlow_Line_i" onclick="ChangeShowDiv('MyDeptFlow','Line',this)"></li>
<li class="" id="MyDeptFlow_Pie_i" onclick="ChangeShowDiv('MyDeptFlow','Pie',this)"></li>
</ul>
</div>
</div>
</div>
</div>
<div class="layui-card">
<div class="layui-card-header">我发起的流程</div>
<div class="layui-card-body">
<div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-dataview">
<div carousel-item id="MyStartFlow">
<div id="MyStartFlow_Pie" class="layui-this"></div>
<div id="MyStartFlow_Bar"></div>
<div id="MyStartFlow_Line"></div>
</div>
<div class="layui-carousel-ind">
<ul>
<li class="layui-this" id="MyStartFlow_Pie_i" onclick="ChangeShowDiv('MyStartFlow','Pie',this)"></li>
<li class="" id="MyStartFlow_Bar_i" onclick="ChangeShowDiv('MyStartFlow','Bar',this)"></li>
<li class="" id="MyStartFlow_Line_i" onclick="ChangeShowDiv('MyStartFlow','Line',this)"></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-card">
<div class="layui-card-header">登录信息</div>
<div class="layui-card-body layui-text">
<table class="layui-table">
<colgroup>
<col width="100">
<col>
</colgroup>
<tbody>
<tr>
<td>帐号</td>
<td id="UserName"></td>
</tr>
<tr>
<td>部门</td>
<td id="DeptName"></td>
</tr>
<tr>
<td>岗位</td>
<td id="Stations"></td>
</tr>
<tr>
<td>组织</td>
<td id="OrgName"></td>
</tr>
</tbody>
</table>
<br />
</div>
</div>
<div class="layui-card">
<div class="layui-card-header">我的流程</div>
<div class="layui-card-body">
<dl class="layuiadmin-card-status" id="MyStartFlow_Running"></dl>
</div>
</div>
</div>
</div>
</div>
</body>
</html>