739 lines
24 KiB
HTML
739 lines
24 KiB
HTML
{extend name="../../base/view/common/base" /}
|
||
|
||
{block name="style"}
|
||
<style type="text/css">
|
||
.panel-num table {width: 100%;}
|
||
.panel-num td {text-align: center; padding: 16px 0; border-left: 1px solid #f1f1f1; position: relative;}
|
||
.panel-num td:nth-child(1) { border-left: none}
|
||
.panel-num .num-title { padding-bottom: 16px; color: #999;}
|
||
.panel-num .blue {font-size: 20px; font-weight: 300;}
|
||
.panel-num td .badge {position: absolute;top: 0; right: 0;}
|
||
.panel-num td .badge span { padding: 2px 4px; font-size: 12px; border-radius: 0 0 0 4px;}
|
||
.dashboard-total td {border-top: 1px solid #f1f1f1}
|
||
.dashboard-logs .layui-timeline-item {padding-bottom: 1px;}
|
||
.info-td { width: 90px; text-align: right;background-color: #fafafa; color: #999; padding: 5px 3px;}
|
||
.info-td {width: 90px; text-align: right;background-color: #fafafa; color: #999; padding: 5px 3px;}
|
||
.layui-card-body .layui-timeline-title {padding-bottom: 0;font-size: 14px; margin-bottom:4px;}
|
||
.layui-card-body .layui-timeline-item {padding-bottom: 5px;}
|
||
.layui-short-menu li { text-align: center;}
|
||
.layui-short-menu li .iconfont {display: inline-block; font-weight:600; width: 100%; height: 58px; line-height: 58px; margin-bottom:5px; text-align: center;border-radius: 3px; font-size: 28px; background-color: #F8F8F8; color: #969696; transition: all .3s; -webkit-transition: all .3s;}
|
||
.layui-short-menu li cite {color: #646464;}
|
||
.layui-short-menu li:hover .iconfont{color: #187FDD; background-color:#F2F8FF;}
|
||
.layui-short-menu li:hover cite {color: #187FDD;}
|
||
.layui-matter-item li a{display: block; padding: 12px; background-color: #f8f8f8; color: #999; border-radius: 3px; transition: all .3s;-webkit-transition: all .3s;}
|
||
.layui-matter-item li a:hover{background-color:#F2F8FF;}
|
||
.layui-matter-item li cite {font-size: 24px;font-weight: 300;color: #187FDD;}
|
||
|
||
.layui-right-bar a{display: inline-block; width: 100%; height: 64px; text-align: center;border-radius: 3px; background-color: #F8F8F8; color: #969696; transition: all .3s; -webkit-transition: all .3s;}
|
||
.layui-right-bar a .iconfont{display: inline-block; font-weight:600; width: 100%; height: 37px; line-height: 39px; text-align: center;font-size: 24px;}
|
||
.layui-right-bar a:hover{color: #187FDD; background-color:#F2F8FF;}
|
||
</style>
|
||
{/block}
|
||
<!-- 主体 -->
|
||
{block name="body"}
|
||
<div class="p-3">
|
||
<div class="layui-row layui-col-space12">
|
||
<div class="layui-col-md8">
|
||
<div class="layui-row layui-col-space12">
|
||
<div class="layui-col-md12">
|
||
<div class="layui-card panel-num">
|
||
<table>
|
||
<tr>
|
||
{volist name="$total" id="vo"}
|
||
<td>
|
||
<div class="num-title">{$vo.name}</div>
|
||
<div class="blue">{$vo.num}</div>
|
||
</td>
|
||
{/volist}
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-row layui-col-space12">
|
||
<div class="layui-col-md6">
|
||
<div class="layui-card">
|
||
<div class="layui-card-header"><h3>快捷申请</h3><a href="javascript:;" data-href="/oa/approve/index" data-title="快捷申请" class="tab-a pull-right blue">更多</a></div>
|
||
<div class="layui-card-body layui-short-menu p-3">
|
||
<ul class="layui-row layui-col-space12">
|
||
<li class="layui-col-xs3">
|
||
<a href="javascript:;" data-href="/oa/approve/add?type=1" class="side-a">
|
||
<i class="iconfont icon-kechengziyuanguanli"></i>
|
||
<cite>请假申请</cite>
|
||
</a>
|
||
</li>
|
||
<li class="layui-col-xs3">
|
||
<a href="javascript:;" data-href="/oa/approve/add?type=2" class="side-a">
|
||
<i class="iconfont icon-jiaoshiguanli"></i>
|
||
<cite>出差申请</cite>
|
||
</a>
|
||
</li>
|
||
<li class="layui-col-xs3">
|
||
<a href="javascript:;" data-href="/oa/approve/add?type=3" class="side-a">
|
||
<i class="iconfont icon-tuiguangguanli"></i>
|
||
<cite>外出申请</cite>
|
||
</a>
|
||
</li>
|
||
<li class="layui-col-xs3">
|
||
<a href="javascript:;" data-href="/oa/approve/add?type=4" class="side-a">
|
||
<i class="iconfont icon-xueshengchengji"></i>
|
||
<cite>加班申请</cite>
|
||
</a>
|
||
</li>
|
||
<li class="layui-col-xs3">
|
||
<a href="javascript:;" data-href="/oa/approve/add?type=14" class="side-a">
|
||
<i class="iconfont icon-shoufeiguanli"></i>
|
||
<cite>采购申请</cite>
|
||
</a>
|
||
</li>
|
||
<li class="layui-col-xs3">
|
||
<a href="javascript:;" data-href="/oa/approve/add?type=7" class="side-a">
|
||
<i class="iconfont icon-chuangjianxitong"></i>
|
||
<cite>物品维修</cite>
|
||
</a>
|
||
</li>
|
||
<li class="layui-col-xs3">
|
||
<a href="javascript:;" data-href="/oa/approve/add?type=8" class="side-a">
|
||
<i class="iconfont icon-shenpishezhi"></i>
|
||
<cite>用章申请</cite>
|
||
</a>
|
||
</li>
|
||
<li class="layui-col-xs3">
|
||
<a href="javascript:;" data-href="/oa/approve/add?type=9" class="side-a">
|
||
<i class="iconfont icon-dongtaiguanli"></i>
|
||
<cite>用车申请</cite>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-md6">
|
||
<div class="layui-card">
|
||
<div class="layui-card-header"><h3>待办事项</h3></div>
|
||
<div class="layui-card-body layui-matter-item p-3">
|
||
<ul class="layui-row layui-col-space12">
|
||
<li class="layui-col-xs4">
|
||
<a href="javascript:;" data-href="/oa/approve/list" class="tab-a" data-title="待审审批">
|
||
<p>待审审批</p>
|
||
<p class="pt-3"><cite>{$handle.approve}</cite></p>
|
||
</a>
|
||
</li>
|
||
<li class="layui-col-xs4">
|
||
<a href="javascript:;" data-href="/finance/expense/list" class="tab-a" data-title="待审报销">
|
||
<p>待审报销</p>
|
||
<p class="pt-3"><cite>{$handle.expenses}</cite></p>
|
||
</a>
|
||
</li>
|
||
<li class="layui-col-xs4">
|
||
<a href="javascript:;" data-href="/finance/invoice/list" class="tab-a" data-title="待审发票">
|
||
<p>待审发票</p>
|
||
<p class="pt-3"><cite>{$handle.invoice}</cite></p>
|
||
</a>
|
||
</li>
|
||
<li class="layui-col-xs4">
|
||
<a href="javascript:;" data-href="/finance/income/index" class="tab-a" data-title="待回款">
|
||
<p>待回款</p>
|
||
<p class="pt-3"><cite>{$handle.income}</cite></p>
|
||
</a>
|
||
</li>
|
||
<li class="layui-col-xs4">
|
||
<a href="javascript:;" data-href="/contract/index/index" class="tab-a" data-title="待审合同">
|
||
<p>待审合同</p>
|
||
<p class="pt-3"><cite>{$handle.contract}</cite></p>
|
||
</a>
|
||
</li>
|
||
<li class="layui-col-xs4">
|
||
<a href="javascript:;" data-href="/project/task/index" class="tab-a" data-title="待完成任务">
|
||
<p>待完成任务</p>
|
||
<p class="pt-3"><cite>{$handle.task}</cite></p>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-row layui-col-space12">
|
||
<div class="layui-col-md12">
|
||
<div class="layui-card">
|
||
<div class="layui-tab layui-tab-brief layadmin-latestData">
|
||
<ul class="layui-tab-title">
|
||
<li class="layui-this"><h3>企业公告</h3></li>
|
||
<li><h3>知识列表</h3></li>
|
||
</ul>
|
||
<div class="layui-tab-content p-3">
|
||
<div class="layui-tab-item layui-show">
|
||
<table id="Note" lay-filter="Note" class="layui-hide" style="margin-top:0"></table>
|
||
</div>
|
||
<div class="layui-tab-item">
|
||
<table id="Article" lay-filter="Article" class="layui-hide" style="margin-top:0"></table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-row layui-col-space12">
|
||
<div class="layui-col-md12">
|
||
{gt name=":isModule('project')" value="0"}
|
||
<div class="layui-card">
|
||
<div class="layui-card-title">项目列表</div>
|
||
<div style="padding: 12px;">
|
||
<table id="Project" lay-filter="Project" class="layui-hide" style="margin-top:0"></table>
|
||
</div>
|
||
</div>
|
||
<div class="layui-card">
|
||
<div class="layui-card-title">任务列表</div>
|
||
<div style="padding: 12px;">
|
||
<table id="Task" lay-filter="Task" class="layui-hide" style="margin-top:0"></table>
|
||
</div>
|
||
</div>
|
||
{/gt}
|
||
<div class="layui-card">
|
||
<div id="chartView" style="width: 100%;height:300px;"></div>
|
||
</div>
|
||
<div class="layui-card">
|
||
<div id="chartYear" style="width: 100%;height:240px;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-md4">
|
||
<div class="layui-card layui-right-bar">
|
||
<div class="layui-row pt-3 px-3 py-2">
|
||
<ul class="layui-col-space12">
|
||
<li class="layui-col-xs3">
|
||
<a href="javascript:;" data-href="/home/index/mail_list" class="tab-a" data-title="通讯录">
|
||
<i class="iconfont icon-huamingce"></i>
|
||
<cite>通讯录</cite>
|
||
</a>
|
||
</li>
|
||
<li class="layui-col-xs3">
|
||
<a href="javascript:;" data-href="/oa/plan/calendar" class="tab-a" data-title="日程安排">
|
||
<i class="iconfont icon-kaoshijihua"></i>
|
||
<cite>日程安排</cite>
|
||
</a>
|
||
</li>
|
||
<li class="layui-col-xs3">
|
||
<a href="javascript:;" class="report-add">
|
||
<i class="iconfont icon-fuwuliebiao"></i>
|
||
<cite>+工作汇报</cite>
|
||
</a>
|
||
</li>
|
||
<li class="layui-col-xs3">
|
||
<a href="javascript:;" class="work-add">
|
||
<i class="iconfont icon-paikeshezhi"></i>
|
||
<cite>+工作记录</cite>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="layui-card">
|
||
<div class="layui-card-title">系统信息</div>
|
||
<div class="layui-card-body">
|
||
<table class="layui-table" lay-skin="" lay-size="sm">
|
||
{if condition="($install == true)"}
|
||
<tr>
|
||
<td colspan="4" style="color: #E94335; background-color:#f8f8f8">提醒：发现app目录下的install文件夹没删除，为了系统的安全,请手动去删除。</td>
|
||
</tr>
|
||
{/if}
|
||
<tr>
|
||
<td class="info-td">服务器系统</td>
|
||
<td>{:get_system_info('os')}</td>
|
||
<td class="info-td">PHP版本</td>
|
||
<td>{:get_system_info('php')}</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="info-td">上传附件限制</td>
|
||
<td>{:get_system_info('upload_max_filesize')}</td>
|
||
<td class="info-td">执行时间限制</td>
|
||
<td>{:get_system_info('max_execution_time')}</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="info-td">勾股OA</td>
|
||
<td colspan="3">{:CMS_VERSION}<a class="layui-badge layui-bg-blue" style="margin-left:8px"
|
||
href="https://blog.gougucms.com/home/book/detail/bid/3.html" target="_blank">勾股OA文档</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="info-td">ThinkPHP版本</td>
|
||
<td colspan="3">{$TP_VERSION}<a class="layui-badge layui-bg-blue" style="margin-left:8px" href="https://www.kancloud.cn/manual/thinkphp6_0" target="_blank">TP6文档</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="info-td">Layui版本</td>
|
||
<td colspan="3">{:LAYUI_VERSION}<a class="layui-badge layui-bg-blue" style="margin-left:8px" href="https://layui.gitee.io/v2/docs/" target="_blank">Layui文档</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="info-td">合作联系微信号</td>
|
||
<td colspan="3">hdm588，业务合作、功能定制请备注</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="info-td">QQ交流群</td>
|
||
<td colspan="3">搜Q群：24641076（满），46924914<br>或点击 <a href="https://jq.qq.com/?_wv=1027&k=aCESqWHQ" target="_blank" rel="nofollow"><img border="0" src="//pub.idqqimg.com/wpa/images/group.png" alt="gougucms交流群" title="点击链接加入群聊【勾股开源交流群】" style="vertical-align:middle"></a></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="info-td">同系列开源软件</td>
|
||
<td colspan="3"><a class="layui-badge layui-bg-blue" style="margin-right:8px" href="https://gitee.com/gouguopen/gougucms" target="_blank">勾股CMS</a><a class="layui-badge layui-bg-blue" style="margin-right:8px" href="https://gitee.com/gouguopen/blog" target="_blank">勾股BLOG</a><a class="layui-badge layui-bg-blue" href="https://gitee.com/gouguopen/dev" target="_blank" style="margin-right:8px">勾股DEV</a><a class="layui-badge layui-bg-blue" href="https://gitee.com/gouguopen/guoguadmin" target="_blank">勾股ADMIN</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="info-td">🍗🍗<br/>给作者加鸡腿<br/>🍗🍗</td>
|
||
<td colspan="3">
|
||
<img src="https://www.gougucms.com/static/home/images/zfb.png" data-event="pay" style="width:50%; max-width:100%; cursor:pointer;" align=center /><img src="https://www.gougucms.com/static/home/images/wx.png" data-event="pay" style="width:50%; max-width:100%; cursor:pointer;" align=center />
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<div class="layui-card">
|
||
<div class="layui-card-header"><h3>最活跃员工<span style="color:#999; font-size:14px; font-weight:400; margin-left:5px">最近30天前十的活跃度</span></h3></div>
|
||
<div class="layui-card-body">
|
||
<div id="logChart" style="width: 100%; height:268px;"></div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-card">
|
||
<div class="layui-card-header"><h3>员工动态</h3><a data-title="员工动态" data-href="/home/api/log_list" class="pull-right tab-a">更多</a></div>
|
||
<div class="layui-card-body">
|
||
<ul class="layui-timeline" id="logs"></ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/block}
|
||
<!-- /主体 -->
|
||
|
||
<!-- 脚本 -->
|
||
{block name="script"}
|
||
<script src="{__GOUGU__}/third_party/echart/echarts.min.js"></script>
|
||
<script>
|
||
const moduleInit = ['tool','oaSchedule'];
|
||
function gouguInit() {
|
||
var tool = layui.tool,table = layui.table,work = layui.oaSchedule;
|
||
|
||
$('.work-add').on('click',function(){
|
||
work.add(0,{'id':0});
|
||
})
|
||
$('.report-add').on('click',function(){
|
||
var type=[{'id':1,'title':'日报'},{'id':2,'title':'周报'},{'id':3,'title':'月报'}];
|
||
var tablereport;
|
||
layer.open({
|
||
title:'选择汇报类型',
|
||
type:1,
|
||
area:['360px','300px'],
|
||
content:'<div style="width:325px; padding:15px 15px 0"><div id="selectType"></div></div>',
|
||
success:function(){
|
||
tablereport=table.render({
|
||
elem: '#selectType',
|
||
cols: [[ //标题栏
|
||
{type:'radio',title: '选择'},
|
||
{field: 'title', title: '汇报类型'}
|
||
]],
|
||
data: type
|
||
});
|
||
},
|
||
btn:['确定'],
|
||
yes: function(idx){
|
||
var checkStatus = table.checkStatus(tablereport.config.id);
|
||
var data = checkStatus.data;
|
||
if(data.length>0){
|
||
tool.side('/oa/work/add?type='+data[0].id);
|
||
layer.close(idx);
|
||
}
|
||
else{
|
||
layer.msg('请选择汇报类型');
|
||
return false;
|
||
}
|
||
}
|
||
})
|
||
});
|
||
//公告
|
||
table.render({
|
||
elem: '#Note'
|
||
, url: "/home/api/get_note_list" //数据接口
|
||
, page: false //开启分页
|
||
, cols: [[ //表头
|
||
{ field: 'cate_title', title: '公告分类', align: 'center','width': 90},
|
||
{ field: 'title', title: '公告标题',templet: '<div><a data-href="/note/index/view/id/{{d.id}}.html" class="side-a"">{{d.title}}</a></div>'},
|
||
{ field: 'create_time', title: '发布时间', align: 'center','width': 150}
|
||
]]
|
||
});
|
||
//文章
|
||
table.render({
|
||
elem: '#Article'
|
||
, url: "/home/api/get_article_list" //数据接口
|
||
, page: false //开启分页
|
||
, cols: [[ //表头
|
||
{ field: 'cate_title', title: '知识分类', align: 'center','width': 90 },
|
||
{ field: 'title', title: '知识标题',templet: '<div><a data-href="/article/index/view/id/{{d.id}}.html" class="side-a">{{d.title}}</a></div>'},
|
||
{ field: 'create_time', title: '发布时间', align: 'center','width': 150}
|
||
]]
|
||
});
|
||
//项目
|
||
table.render({
|
||
elem: '#Project'
|
||
, url: "/home/api/get_project_list" //数据接口
|
||
, page: false //开启分页
|
||
, cols: [[ //表头
|
||
{ field: 'id', title: '项目编号', align: 'center','width': 90, templet: function (d) {
|
||
return 'P' + d.id;
|
||
}
|
||
},
|
||
{field: 'status', title: '状态', align: 'center', width: 80, templet: function (d) {
|
||
var html = '<span class="layui-btn layui-btn-xs layui-bg-' + d.status + '">' + d.status_name + '</span>';
|
||
return html;
|
||
}
|
||
},
|
||
{ field: 'title', title: '项目名称',templet: '<div><a data-href="/project/index/view/id/{{d.id}}.html" class="side-a">{{d.name}}</a></div>'},
|
||
{ field: 'director_name', title: '负责人', align: 'center', width: 80},
|
||
{ field: 'plan_time', title: '项目周期', align: 'center', width: 190},
|
||
]]
|
||
});
|
||
|
||
//任务
|
||
table.render({
|
||
elem: '#Task'
|
||
, url: "/home/api/get_task_list" //数据接口
|
||
, page: false //开启分页
|
||
, cols: [[ //表头
|
||
{ field: 'id', title: '任务编号', align: 'center','width': 90, templet: function (d) {
|
||
return 'T' + d.id;
|
||
}
|
||
},
|
||
{field: 'flow_status', title: '状态', align: 'center', width: 80, templet: function (d) {
|
||
var html = '<span class="layui-btn layui-btn-xs layui-bg-' + d.flow_status + '">' + d.flow_name + '</span>';
|
||
return html;
|
||
}
|
||
},
|
||
{ field: 'title', title: '任务主题',templet: '<div><a data-href="/project/task/view/id/{{d.id}}.html" class="side-a">{{d.title}}</a></div>'},
|
||
{ field: 'director_name', title: '负责人', align: 'center', width: 80},
|
||
{ field: 'end_time', title: '计划完成日期', align: 'center', width: 190},
|
||
]]
|
||
});
|
||
$('body').on('click','[data-event="pay"]',function(){
|
||
var src=$(this).attr('src');
|
||
layer.open({
|
||
type:1,
|
||
title:'感谢您给作者加鸡腿🍗🍗',
|
||
content:'<img src="'+src+'" style="width:100%" align=center />',
|
||
});
|
||
})
|
||
|
||
get_logs();
|
||
get_view_data();
|
||
}
|
||
|
||
|
||
function get_logs() {
|
||
$.ajax({
|
||
url: "/home/api/log_list",
|
||
type: 'get',
|
||
data: {
|
||
page: 1,
|
||
limit: 20
|
||
},
|
||
success: function (e) {
|
||
if (e.code == 0) {
|
||
var html = '';
|
||
$.each(e.data, function (key, value) {
|
||
html += '<li class="layui-timeline-item">\
|
||
<i class="layui-icon layui-timeline-axis"></i>\
|
||
<div class="layui-timeline-content layui-text">\
|
||
<div class="layui-timeline-title"><span title="'+ value.id + '">' + value.times + '</span>，' + value.content + '</div>\
|
||
</div>\
|
||
</li>';
|
||
});
|
||
$('#logs').html(html);
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
|
||
function setHour(num) {
|
||
var str = num + ':00';
|
||
if (num < 10) {
|
||
str = '0' + num + ':00';
|
||
}
|
||
return str;
|
||
}
|
||
|
||
function get_view_data() {
|
||
$.ajax({
|
||
url: "/home/api/get_view_data",
|
||
type: 'get',
|
||
data: {},
|
||
success: function (e) {
|
||
if (e.code == 0) {
|
||
var data_first = e.data.data_first;
|
||
var data_second = e.data.data_second;
|
||
archiveCalendar = e.data.data_three;
|
||
var data_logs = e.data.data_logs;
|
||
var myDate = new Date();
|
||
var nowHour = myDate.getHours(); //获取当前小时数(0-23)
|
||
var xData = [];
|
||
var yData1 = [];
|
||
var yData2 = [];
|
||
var logItem = [];
|
||
$.each(data_first, function (key, value) {
|
||
if (key <= nowHour) {
|
||
yData1.push(value);
|
||
}
|
||
});
|
||
$.each(data_second, function (key, value) {
|
||
xData.push(setHour(key));
|
||
yData2.push(value);
|
||
});
|
||
$.each(data_logs, function (key, value) {
|
||
let item = {
|
||
value: value.count,
|
||
name: value.name
|
||
};
|
||
logItem.push(item);
|
||
});
|
||
|
||
var chartView = echarts.init(document.getElementById('chartView'));
|
||
var ops = {
|
||
title: {
|
||
top: '12px',
|
||
text: '今日与昨日员工活跃度',
|
||
left: '6px',
|
||
textStyle: {
|
||
fontSize: '18',
|
||
color: '#333',
|
||
}
|
||
},
|
||
color: ["#1AAD19", "#1890FF"],
|
||
grid: {
|
||
left: '16px',
|
||
right: '30px',
|
||
bottom: '12px',
|
||
top: '60px',
|
||
containLabel: true
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'cross',
|
||
crossStyle: {
|
||
color: '#999'
|
||
}
|
||
}
|
||
},
|
||
toolbox: {
|
||
show: true,
|
||
},
|
||
legend: {
|
||
data: ["今日", "昨日"],
|
||
top: '16px',
|
||
},
|
||
xAxis: [{
|
||
type: "category",
|
||
boundaryGap: !1,
|
||
data: xData,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#999999',
|
||
width: 1,
|
||
}
|
||
},
|
||
}],
|
||
yAxis: [{
|
||
type: "value",
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#999999',
|
||
width: 1,
|
||
}
|
||
},
|
||
}],
|
||
series: [{
|
||
name: "今日",
|
||
type: "line",
|
||
smooth: !0,
|
||
itemStyle: {
|
||
normal: {
|
||
areaStyle: {
|
||
type: "default",
|
||
opacity: 0.2
|
||
}
|
||
}
|
||
},
|
||
data: yData1
|
||
}, {
|
||
name: "昨日",
|
||
type: "line",
|
||
smooth: !0,
|
||
itemStyle: {
|
||
normal: {
|
||
areaStyle: {
|
||
type: "default",
|
||
opacity: 0.2
|
||
}
|
||
}
|
||
},
|
||
data: yData2
|
||
}]
|
||
}
|
||
chartView.setOption(ops);
|
||
|
||
|
||
let myChart = echarts.init(document.getElementById('chartYear'));
|
||
let option = {
|
||
title: {
|
||
top: '12px',
|
||
text: '近一年员工活跃度',
|
||
left: '8px',
|
||
textStyle: {
|
||
fontSize: '18',
|
||
color: '#333',
|
||
}
|
||
},
|
||
tooltip: {
|
||
padding: 6,
|
||
formatter: function (obj) {
|
||
var value = obj.value;
|
||
return '<div style="font-size: 12px;">' + value[0] + '员工活跃度：' + value[1] + '</div>';
|
||
}
|
||
},
|
||
visualMap: {
|
||
min: 0,
|
||
max: 300,
|
||
show: false,
|
||
inRange: {
|
||
color: ['#fafafa', '#1AAD19']
|
||
}
|
||
},
|
||
calendar: {
|
||
top: 75,
|
||
left: 52,
|
||
right: 20,
|
||
range: getRange(),
|
||
cellSize: ['auto', 21],
|
||
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',
|
||
calendarIndex: 0,
|
||
data: getDay()
|
||
}]
|
||
};
|
||
myChart.setOption(option);
|
||
|
||
var logChart = echarts.init(document.getElementById('logChart'));
|
||
let optC = {
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{a} <br/>{b} :{d}%'
|
||
},
|
||
legend: {
|
||
top: '1%',
|
||
left: 'center'
|
||
},
|
||
series: [
|
||
{
|
||
name: '活跃度',
|
||
type: 'pie',
|
||
radius: '50%',
|
||
center: ['50%', '60%'],
|
||
data: logItem,
|
||
emphasis: {
|
||
itemStyle: {
|
||
shadowBlur: 10,
|
||
shadowOffsetX: 0,
|
||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||
}
|
||
}
|
||
}
|
||
]
|
||
};
|
||
logChart.setOption(optC);
|
||
|
||
setTimeout(function () {
|
||
window.onresize = function () {
|
||
chartView.resize();
|
||
myChart.resize();
|
||
logChart.resize();
|
||
}
|
||
})
|
||
console.log(e.data);
|
||
}
|
||
}
|
||
})
|
||
|
||
var archiveCalendar = {};
|
||
function getRange() {
|
||
let today = new Date();
|
||
let tYear = today.getFullYear();
|
||
let tMonth = today.getMonth() + 1;
|
||
let tDate = today.getDate();
|
||
let dateFirst = tYear + "-" + tMonth + "-" + tDate;
|
||
let datelast = (tYear - 1) + "-" + tMonth + "-" + tDate;
|
||
let dataRange = [];
|
||
dataRange.push(dateFirst);
|
||
dataRange.push(datelast);
|
||
return dataRange;
|
||
}
|
||
|
||
function getDay() {
|
||
var today = new Date();
|
||
var dayArray = [];
|
||
for (var i = 0; i < 366; i++) {
|
||
var targetday_milliseconds = today.getTime() - 1000 * 60 * 60 * 24 * i;
|
||
var date = new Date(targetday_milliseconds);
|
||
dayArray.push(retunDay(date));
|
||
}
|
||
return dayArray;
|
||
}
|
||
|
||
function retunDay(day) {
|
||
var tYear = day.getFullYear();
|
||
var tMonth = day.getMonth();
|
||
var tDate = day.getDate();
|
||
tMonth = tMonth + 1;
|
||
if (tMonth.toString().length == 1) {
|
||
tMonth = "0" + tMonth;
|
||
}
|
||
if (tDate.toString().length == 1) {
|
||
tDate = "0" + tDate;
|
||
}
|
||
var dateStr = tYear + "-" + tMonth + "-" + tDate;
|
||
var dateArray = [];
|
||
dateArray.push(dateStr);
|
||
if (archiveCalendar[dateStr]) {
|
||
dateArray.push(archiveCalendar[dateStr]);
|
||
}
|
||
else {
|
||
dateArray.push(0);
|
||
}
|
||
return dateArray;
|
||
}
|
||
}
|
||
|
||
</script>
|
||
{/block}
|
||
<!-- /脚本 --> |