dev_oa/app/home/view/index/main.html

468 lines
14 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{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: 10px; 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;}
</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 class="layui-card">
<div class="layui-card-title">企业公告</div>
<div style="padding: 12px;">
<table id="Note" lay-filter="Note" 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="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="Article" lay-filter="Article" class="layui-hide" style="margin-top:0"></table>
</div>
</div>
<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">
<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或点击 <a href="https://jq.qq.com/?_wv=1027&k=pxshRv6I" target="_blank" rel="nofollow"><img border="0" src="//pub.idqqimg.com/wpa/images/group.png" alt="gougucms交流群" title="gougucms交流群" 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>员工动态</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="https://cdn.staticfile.org/echarts/5.3.0/echarts.min.js"></script>
<script>
const moduleInit = ['tool'];
function gouguInit() {
var table = layui.table;
//公告
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="right-a" target="_blank">{{d.title}}</a></div>'},
{ field: 'create_time', title: '发布时间', align: 'center','width': 136}
]]
});
//文章
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="right-a" target="_blank">{{d.title}}</a></div>'},
{ field: 'read', title: '访问量', align: 'center','width': 80 },
{ field: 'create_time', title: '发布时间', align: 'center','width': 136}
]]
});
//项目
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 bg-status-' + d.status + '">' + d.status_name + '</span>';
return html;
}
},
{ field: 'title', title: '项目名称',templet: '<div><a data-href="/project/index/view/id/{{d.id}}.html" class="right-a" target="_blank">{{d.name}}</a></div>'},
{ field: 'director_name', title: '负责人', align: 'center', width: 80},
{ field: 'plan_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;
}
var chartView = echarts.init(document.getElementById('chartView'));
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 myDate = new Date();
var nowHour = myDate.getHours(); //获取当前小时数(0-23)
var xData = [];
var yData1 = [];
var yData2 = [];
$.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);
});
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);
setTimeout(function () {
window.onresize = function () {
chartView.resize();
myChart.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}
<!-- /脚本 -->