254 lines
11 KiB
HTML
254 lines
11 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<base href="/"/>
|
|||
|
|
<meta charset="UTF-8" />
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|||
|
|
<title>协同办公系统</title>
|
|||
|
|
<link rel="stylesheet" href="assets/crpm/js/layui/css/layui.css" />
|
|||
|
|
<link rel="stylesheet" href="assets/crpm/fonts/font-awesome/css/font-awesome.css" />
|
|||
|
|
<link rel="stylesheet" href="assets/crpm/index/index1/index1.css" />
|
|||
|
|
<link rel="stylesheet" href="assets/crpm/index/index.css" />
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div id="app">
|
|||
|
|
<div class="layui-layout layui-layout-admin">
|
|||
|
|
<div class="layui-header">
|
|||
|
|
<div class="layui-logo layui-hide-xs layui-bg-black">
|
|||
|
|
协同办公系统
|
|||
|
|
</div>
|
|||
|
|
<ul class="layui-nav layui-layout-right">
|
|||
|
|
<li class="layui-nav-item layui-hide layui-show-sm-inline-block">
|
|||
|
|
<a href="javascript:void(0);">管理员</a>
|
|||
|
|
<dl class="layui-nav-child">
|
|||
|
|
<dd><a href="javascript:void(0);">退出</a></dd>
|
|||
|
|
</dl>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-side layui-bg-black">
|
|||
|
|
<div class="layui-side-scroll">
|
|||
|
|
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
|
|||
|
|
<ul class="layui-nav layui-nav-tree" lay-filter="test">
|
|||
|
|
<li class="layui-nav-item layui-nav-itemed">
|
|||
|
|
<a href="javascript:void(0);" class="menu-item" id="menu-125b38ca-4927-4ad4-832e-0306a2ff5c4b" data-mod-id="1e904168-75d9-423f-8931-dc84fd4528ff" data-url="route/pages/522c52/list.html"><i class="fa fa-list"></i> 权限管理</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="layui-nav-item layui-nav-itemed">
|
|||
|
|
<a href="javascript:void(0);" class="menu-item" id="menu-1f2d90db-ff08-45e9-9a25-3993eb376037" data-mod-id="1f883dd6-4f28-42b7-bbbe-8555df309c5f" data-url="route/pages/5755bf/list.html"><i class="fa fa-list"></i> 集成API</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="layui-nav-item layui-nav-itemed">
|
|||
|
|
<a href="javascript:void(0);" class="menu-item" id="menu-038649dd-a014-4e5b-acba-5fb18fe3a9a1" data-mod-id="861bf375-584e-4d89-9163-160fe0d7f01d" data-url="route/pages/490421/list.html"><i class="fa fa-list"></i> 团队通讯录</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="layui-nav-item layui-nav-itemed">
|
|||
|
|
<a href="javascript:void(0);" class="menu-item" id="menu-c0e67191-1f34-4ab5-b3b9-d14b76bc6e60" data-mod-id="0c149380-87f8-4c64-9f67-2543f6f3f99b" data-url="route/pages/254b6f/list.html"><i class="fa fa-list"></i> 任务管理</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="layui-nav-item layui-nav-itemed">
|
|||
|
|
<a href="javascript:void(0);" class="menu-item" id="menu-08493e43-c76d-4350-be91-28995276f16b" data-mod-id="83a0634e-51d2-43da-bd8d-e117bef28e71" data-url="route/pages/42d8a4/list.html"><i class="fa fa-list"></i> 文档共享与协作</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="layui-nav-item layui-nav-itemed">
|
|||
|
|
<a href="javascript:void(0);" class="menu-item" id="menu-3d753c20-1447-4c27-8b97-b8ffd7a8d499" data-mod-id="71302806-86ca-4491-bf6e-b4100c548224" data-url="route/pages/eadc43/list.html"><i class="fa fa-list"></i> 日程安排与提醒</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="layui-nav-item layui-nav-itemed">
|
|||
|
|
<a href="javascript:void(0);" class="menu-item" id="menu-648c343c-c7f1-455c-8992-390419d5686d" data-mod-id="199e113e-e1b1-4e4b-b73b-810c1d6962b4" data-url="route/pages/07967f/list.html"><i class="fa fa-list"></i> 数据安全与备份</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="layui-nav-item layui-nav-itemed">
|
|||
|
|
<a href="javascript:void(0);" class="menu-item" id="menu-8ee46f98-dcd8-4993-8204-f52d51ee6899" data-mod-id="755af59d-63ee-4766-bde1-b28d1f5da4bd" data-url="route/pages/33d3b4/list.html"><i class="fa fa-list"></i> 在线日历</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="layui-nav-item layui-nav-itemed">
|
|||
|
|
<a href="javascript:void(0);" class="menu-item" id="menu-c8f9b52f-220a-479e-be9c-9198eaee1fc5" data-mod-id="b222b4f2-3e62-4637-b3f6-da33e2bc59dd" data-url="route/pages/2b9a42/list.html"><i class="fa fa-list"></i> 知识库</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="layui-nav-item layui-nav-itemed">
|
|||
|
|
<a href="javascript:void(0);" class="menu-item" id="menu-1d0020ea-26d0-4f5a-91a0-cf0b73e454d4" data-mod-id="87268e89-9ea3-4085-b66d-e00037bf1963" data-url="route/pages/1f963b/list.html"><i class="fa fa-list"></i> 文件存储</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="layui-nav-item layui-nav-itemed">
|
|||
|
|
<a href="javascript:void(0);" class="menu-item" id="menu-ec8af07b-d7a2-44ed-b968-d99b8dbef17d" data-mod-id="c0af637c-1017-4e35-8eae-ef9465eeb190" data-url="route/pages/e81259/list.html"><i class="fa fa-list"></i> 版本控制</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-body">
|
|||
|
|
<!-- 内容主体区域 -->
|
|||
|
|
<div style="padding: 15px">
|
|||
|
|
<blockquote class="layui-elem-quote layui-text">
|
|||
|
|
欢迎使用协同办公系统
|
|||
|
|
</blockquote>
|
|||
|
|
<div class='homepage' id="homepage">
|
|||
|
|
<div class='homepage-top' >
|
|||
|
|
<div class='pieChart' id="pieChart"></div>
|
|||
|
|
<div class='lineChart' id="lineChart"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class='homepage-bot' >
|
|||
|
|
<div id="barChart" class='barChart'></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-card layui-panel page-iframe-container">
|
|||
|
|
<iframe class="page-iframe" id="pageIframe" src="" style="display: none;"></iframe>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-footer"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<script src="assets/crpm/js/echarts/echarts.min.js"></script>
|
|||
|
|
|
|||
|
|
<script src="assets/crpm/js/layui/layui.js"></script>
|
|||
|
|
<script>
|
|||
|
|
layui.use(['element', 'layer', 'util'], function () {
|
|||
|
|
var element = layui.element;
|
|||
|
|
var layer = layui.layer;
|
|||
|
|
var util = layui.util;
|
|||
|
|
var $ = layui.$;
|
|||
|
|
var $win = $(window);
|
|||
|
|
window['layer'] = layer;
|
|||
|
|
|
|||
|
|
var init = function() {
|
|||
|
|
var $pageIframe = $('#pageIframe');
|
|||
|
|
$pageIframe.css({
|
|||
|
|
height: `${$win.height() - 200}px`
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
init();
|
|||
|
|
var homepage = document.getElementById('homepage');
|
|||
|
|
$(document).on('click', '.menu-item', function() {
|
|||
|
|
var url = this.dataset.url;
|
|||
|
|
var pageIframe = $('#pageIframe');
|
|||
|
|
pageIframe.attr('src', url);
|
|||
|
|
pageIframe.show();
|
|||
|
|
homepage.style.display = 'none';
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
//折线图
|
|||
|
|
var lineChart = echarts.init(document.getElementById('lineChart'));
|
|||
|
|
var optionLine = {
|
|||
|
|
animation: false,
|
|||
|
|
title: {
|
|||
|
|
//text: '销售时间统计',//
|
|||
|
|
left: 'left', // Center align the title horizontally
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
boundaryGap: false,
|
|||
|
|
data: ['2024-1', '2024-2', '2024-3', '2024-4', '2024-5', '2024-6', '2024-7']
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'value'
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis' // 设置触发类型为坐标轴触发
|
|||
|
|
},
|
|||
|
|
series: [{
|
|||
|
|
data: [820, 733, 901, 600, 1290, 500, 1320],
|
|||
|
|
type: 'line',
|
|||
|
|
smooth: true,
|
|||
|
|
areaStyle: {}
|
|||
|
|
}]
|
|||
|
|
};
|
|||
|
|
lineChart.setOption(optionLine);
|
|||
|
|
|
|||
|
|
var currentIndex = -1;
|
|||
|
|
var interval = 1000; // 切换间隔时间，单位是毫秒
|
|||
|
|
var timer; // 定时器变量
|
|||
|
|
|
|||
|
|
// 自动触发选中状态并每隔1秒自动向下一个触发
|
|||
|
|
function startAutoPlay() {
|
|||
|
|
timer = setInterval(function() {
|
|||
|
|
var dataLen = optionLine.series[0].data.length;
|
|||
|
|
// 取消之前高亮的图形
|
|||
|
|
lineChart.dispatchAction({
|
|||
|
|
type: 'downplay',
|
|||
|
|
seriesIndex: 0,
|
|||
|
|
dataIndex: currentIndex
|
|||
|
|
});
|
|||
|
|
currentIndex = (currentIndex + 1) % dataLen;
|
|||
|
|
// 高亮当前图形
|
|||
|
|
lineChart.dispatchAction({
|
|||
|
|
type: 'highlight',
|
|||
|
|
seriesIndex: 0,
|
|||
|
|
dataIndex: currentIndex
|
|||
|
|
});
|
|||
|
|
// 显示 tooltip
|
|||
|
|
lineChart.dispatchAction({
|
|||
|
|
type: 'showTip',
|
|||
|
|
seriesIndex: 0,
|
|||
|
|
dataIndex: currentIndex
|
|||
|
|
});
|
|||
|
|
}, interval);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 开始自动播放
|
|||
|
|
startAutoPlay();
|
|||
|
|
|
|||
|
|
// 鼠标悬停在图表上时暂停自动播放
|
|||
|
|
lineChart.on('mouseover', function() {
|
|||
|
|
clearInterval(timer);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 鼠标离开图表区域时恢复自动播放
|
|||
|
|
lineChart.on('mouseout', function() {
|
|||
|
|
startAutoPlay();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 饼状图
|
|||
|
|
var pieChart = echarts.init(document.getElementById('pieChart'));
|
|||
|
|
var optionPie = {
|
|||
|
|
animation: false,
|
|||
|
|
title: {
|
|||
|
|
//text: '订单占比系统',//
|
|||
|
|
left: 'left'
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'item'
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
orient: 'vertical',
|
|||
|
|
left: 'right'
|
|||
|
|
},
|
|||
|
|
series: [{
|
|||
|
|
name: '嘻嘻',
|
|||
|
|
type: 'pie',
|
|||
|
|
radius: ['60%', '70%'],
|
|||
|
|
data: [
|
|||
|
|
{value: 150, name: 'data1'},
|
|||
|
|
{value: 274, name: 'data2'},
|
|||
|
|
{value: 310, name: 'data3'},
|
|||
|
|
{value: 335, name: 'data4'},
|
|||
|
|
{value: 400, name: 'data5'}
|
|||
|
|
]
|
|||
|
|
}]
|
|||
|
|
};
|
|||
|
|
pieChart.setOption(optionPie);
|
|||
|
|
//柱状图
|
|||
|
|
var barChart = echarts.init(document.getElementById('barChart'));
|
|||
|
|
var optionBar = {
|
|||
|
|
animation: false,
|
|||
|
|
title: {
|
|||
|
|
// text: '收支情况'//
|
|||
|
|
},
|
|||
|
|
tooltip: {},
|
|||
|
|
legend: {
|
|||
|
|
//data: ['收入', '支出'] ,//
|
|||
|
|
data: ['data1', 'data2'] ,
|
|||
|
|
left: 'right'
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
data: ['一月', '二月', '三月', '四月', '五月','六月','七月','八月','九月','十月','十一月','十二月',]
|
|||
|
|
},
|
|||
|
|
yAxis: {},
|
|||
|
|
series: [{
|
|||
|
|
name: 'data1',
|
|||
|
|
type: 'bar',
|
|||
|
|
data: [5, 20, 36, 10, 10,15,16,20,12,13,35,12] // 第一条柱状图的数据
|
|||
|
|
}, {
|
|||
|
|
name: 'data2',
|
|||
|
|
type: 'bar',
|
|||
|
|
data: [15, 10, 25, 8, 15,8,30,12,11,18,25,12] // 第二条柱状图的数据
|
|||
|
|
}]
|
|||
|
|
};
|
|||
|
|
barChart.setOption(optionBar);
|
|||
|
|
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|