博客
今天是主页面
本来这个主界面可以实时更新数据的，但是没和后端连接，所以暂时只能添加数据
基本界面还是不错的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="css/main.css" media="all">
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css" media="all">
<link rel="stylesheet" href="lib/bootstrap/js/bootstrap.min.js" media="all">
</head>
<body>
<style type="text/css">
legend { display: block; width:100px; border-bottom:0px; font-family: "Microsoft YaHei","Helvetica Neue";}
legend a{ color:#666;} legend a:hover{ text-decoration:none;}
.layui-table{ font-family: "Microsoft YaHei","Helvetica Neue";}
</style>
<div class="x-body" style="background-color: #f3f3f3; margin: 0;">
<blockquote class="layui-elem-quote">
欢迎使用企业ERP管理系统！<span class="f-14">v1.0</span> 登录次数：355
</blockquote>
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-3">
<section class="panel">
<div class="symbol">
<img src="./images/homeIcon1.png" width="71" alt="">
</div>
<div class="value tab-menu" bind="1">
<a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="总栋数"> <span>车间数</span></a>
<a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="总栋数">
<h1>5</h1>
</a>
</div>
</section>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<section class="panel">
<div class="symbol">
<img src="./images/homeIcon2.png" width="71" alt="">
</div>
<div class="value tab-menu" bind="1">
<a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="总户数"> <span>工作人数</span></a>
<a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="总户数">
<h1>120</h1>
</a>
</div>
</section>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<section class="panel">
<div class="symbol">
<img src="./images/homeIcon3.png" width="71" alt="">
</div>
<div class="value tab-menu" bind="1">
<a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="总人数"><span>今日收入</span></a>
<a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="总人数">
<h1>8,310</h1>
</a>
</div>
</section>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<section class="panel">
<div class="symbol">
<img src="./images/homeIcon4.png" width="71" alt="">
</div>
<div class="value tab-menu" bind="1">
<a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="租户数量"> <span>今日出账</span></a>
<a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="租户数量">
<h1>6088</h1>
</a>
</div>
</section>
</div>
</div>
<fieldset class="layui-elem-field layui-field-title site-title">
<legend><a name="default">信息统计</a></legend>
</fieldset>
<!--相关统计-->
<div class="row">
<div class="col-sm-4">
<section class="panel">
<div class="panel-heading">工作人数 <span style="position: absolute;
right: 30px;
top: 24px;
font-size: 12px;
color: #999;
font-weight: 400;">人数统计(人)</span></div>
<div class="panel-body">
<div class="echarts" id="area" style="height:300px; height:350px"></div>
</div>
</section>
</div>
<div class="col-sm-4">
<section class="panel">
<div class="panel-heading">新/原月度 <div class="labelIndexBox"><span class="labelIndexleft">新月度</span> <span class="labelIndexrit">原月度</span></div></div>
<div class="panel-body">
<div class="echarts" id="main" style="height:300px; height:350px"></div>
</div>
</section>
</div>
<div class="col-sm-4">
<section class="panel">
<div class="panel-heading">车间人数</div>
<div class="panel-body">
<div class="echarts" id="years" style="height:300px; height:350px"></div>
</div>
</section>
</div>
<div class="col-sm-4">
<section class="panel">
<div class="panel-heading">近期申请</div>
<div class="panel-body" style="padding-top: 0px;">
<ul class="list-group clear-list m-t">
<li class="list-group-item fist-item"> <span class="float-right"> 09:00 </span> <span class="label label-success">1</span> 请假申请 </li>
<li class="list-group-item"> <span class="float-right"> 10:16 </span> <span class="label label-info">2</span> 请假申请 </li>
<li class="list-group-item"> <span class="float-right"> 08:22 </span> <span class="label label-primary">3</span> 请假申请 </li>
<li class="list-group-item"> <span class="float-right"> 11:06 </span> <span class="label label-warning">4</span> 请假申请 </li>
<li class="list-group-item"> <span class="float-right"> 12:00 </span> <span class="label label-warning">5</span> 请假申请 </li>
<li class="list-group-item"> <span class="float-right"> 08:22 </span> <span class="label label-warning">6</span> 请假申请 </li>
<li class="list-group-item"> <span class="float-right"> 11:06 </span> <span class="label label-warning">7</span> 请假申请 </li>
<li class="list-group-item"> <span class="float-right"> 12:00 </span> <span class="label label-warning">8</span> 请假申请</li>
<li class="list-group-item"> <span class="float-right"> 11:06 </span> <span class="label label-warning">9</span> 请假申请 </li>
<li class="list-group-item"> <span class="float-right"> 12:00 </span> <span class="label label-warning">10</span> 请假申请 </li>
</ul>
</div>
</section>
</div>
<div class="col-sm-4">
<section class="panel">
<div class="panel-heading">项目列表</div>
<div class="panel-body" style="padding-top: 0px;">
<ul class="list-group clear-list m-t">
<li class="list-group-item" style="border-top: none !important;"> <span class="float-right"> 09:00 <b style="color: #D68F49">进行中</b></span> <span class="label label-danger">1</span> 外包项目 </li>
<li class="list-group-item"> <span class="float-right"> 10:16 <b style="color: #D68F49">进行中</b></span> <span class="label label-info">2</span> 美化项目 </li>
<li class="list-group-item"> <span class="float-right"> 08:22 <b style="color: #D68F49">进行中</b></span> <span class="label label-warning">3</span> A材料生产 </li>
<li class="list-group-item"> <span class="float-right"> 11:06 <b style="color: #D68F49">进行中</b></span> <span class="label label-default">4</span> B材料生产 </li>
<li class="list-group-item"> <span class="float-right"> 12:00 <b style="color: #FF7700">未进行</b></span> <span class="label label-default">5</span> C领奖初组装 </li>
<li class="list-group-item"> <span class="float-right"> 08:22 <b style="color: #FF7700">未进行</b></span> <span class="label label-default">6</span> D零件初组装 </li>
<li class="list-group-item"> <span class="float-right"> 11:06 <b style="color: #FF7700">未进行</b></span> <span class="label label-default">7</span> E零件初组装 </li>
<li class="list-group-item"> <span class="float-right"> 12:00 <b style="color: #D68F49">进行中</b></span> <span class="label label-default">8</span> 材料生产 </li>
<li class="list-group-item"> <span class="float-right"> 11:06 <b style="color: #D68F49">进行中</b></span> <span class="label label-default">9</span> 材料生产 </li>
<li class="list-group-item"> <span class="float-right"> 12:00 <b style="color: #D68F49">进行中</b></span> <span class="label label-default">10</span> 材料生产 </li>
</ul>
</div>
</section>
</div>
<div class="col-sm-4">
<section class="panel" style="min-height: 500px;">
<div class="panel-heading">公司信息</div>
<div class="layui-card">
<div class="layui-card-body ">
<table class="layui-table welcome" style="text-align: left !important; padding-left:20px;">
<thead>
<tr>
<th colspan="4" scope="col" style="text-align: left !important; padding-left:20px;">公司信息</th>
</tr>
</thead>
<tbody>
<tr>
<th>公司名称</th>
<td><span id="lbServerName">啊对对对公司</span></td>
</tr>
<tr>
<td>公司地址</td>
<td>九栋</td>
</tr>
<tr>
<td>办公室</td>
<td>605</td>
</tr>
<tr>
<td>公司boss </td>
<td>于小帅</td>
</tr>
<tr>
<td>员工 </td>
<td>刘力源</td>
</tr>
<tr>
<td>员工 </td>
<td>赵悦恒</td>
</tr>
<!--<tr>
<td> </td>
<td>Microsoft Windows NT 5.2.3790 Service Pack 2</td>
</tr>
<tr>
<td>系统所在文件夹 </td>
<td>C:\WINDOWS\system32</td>
</tr>
<tr>
<td>服务器脚本超时 </td>
<td>30000秒</td>
</tr>
-->
<!-- <tr>
<td>服务器的语言种类 </td>
<td>Chinese (People's Republic of China)</td>
</tr> -->
</tbody>
</table>
</div>
</div>
</section>
</div>
</div>
<script src="lib/layui/layui.js" charset="utf-8"></script>\
<script src="js/jquery.min.js"></script>
<script src="js/echarts.min.js"></script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
let date = '2020-03-025';
option = {
tooltip: {
trigger: 'axis',
backgroundColor: "rgba(255, 255, 255, 1)",
textStyle:{
color: '#999'
},
extraCssText:'box-shadow: 0 0 5px #ccc',
formatter(params){
return `<div>${date} <br/>${params[0].seriesName}：${params[0].value}<br/>${params[1].seriesName}：${params[1].value}%</div>`
}
},
// legend: {
// color: ["#13C7F2", "#F9CE81"],
// data: ['投诉（次）', '业主满意度'],
// icon: 'rect',
// itemWidth: 18,
// itemHeight: 2,
// itemGap: 13,
// right: '4%',
// textStyle: {
// fontSize: 12,
// color: '#23b7e5'
// }
// },
grid: {
top: 'middle',
left: '3%',
right: '4%',
bottom: '3%',
height: '80%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
axisLine: {
lineStyle: {
color: "#9e9e9e",
}
},
axisLabel:{
color:'#9e9e9e',
fontWeight:'bold'
},
axisTick:{
show:false,
},
axisPointer:{
lineStyle:{
color:'#D11F1F'
}
},
},
yAxis: {
type: 'value',
splitLine: {
lineStyle: {
type: 'solid',
color: '#eeeeee',
width:1
}
},
axisTick:{
show:false,
},
axisLine: {
show: false,
lineStyle: {
color: "#9e9e9e",
},
},
axisLabel:{
formatter: '{value}%',
fontWeight:'bold'
},
splitArea: {
show: false
},
},
series: [{
name: '新月度',
type: 'line',
symbol:'none',
data: [{value:10, symbolSize:10, symbol:'emptyCircle'},20,45,15,
{value:90, symbolSize:10, symbol:'emptyCircle'},20,10,80,50,
{value:90, symbolSize:10, symbol:'emptyCircle'},10,
{value:40, symbolSize:10, symbol:'emptyCircle'}],
color: "#ff7700",
lineStyle: {
normal: {
width: 2.5,
color: '#ff7700',
}
},
hoverAnimation:false,
smooth:true,
},{
name: '同比增长',
type: 'line',
symbol:'none',
data: [{value:20,
symbolSize:10,
symbol:'emptyCircle'},30,70,10,{value:50,
symbolSize:10,
symbol:'emptyCircle'},90,50,20,90,{value:30,
symbolSize:10,
symbol:'emptyCircle'},50,{value:90,
symbolSize:10,
symbol:'emptyCircle'}],
color: "#ffd88d",
lineStyle: {
normal: {
width: 2.5,
color: '#ffd88d',
}
},
hoverAnimation:false,
smooth:true,
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
<script type="text/javascript">
// 指定图表的配置项和数据
var myChart = echarts.init(document.getElementById('area'));
// 指定图表的配置项和数据
var option = {
tooltip: {
trigger: 'item',
backgroundColor: "rgba(255, 255, 255, 1)",
textStyle:{
color: '#999'
},
extraCssText:'box-shadow: 0 0 5px #ccc',
formatter: "{a} <br/>{b} : {c} ({d}%)",
},
itemStyle: {
normal: {
//好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
color: function(params) {
// build a color map as your need.
var colorList = [
"#FA9660", "#F8917E", "#FFD586", "#D68F49", "#DADADA",
];
return colorList[params.dataIndex]
},
//以下为是否显示，显示位置和显示格式的设置了
label: {
show: true,
position: 'top',
formatter: '{b}\n{c}'
}
}
},
label: {
normal: {
show: true,
formatter: "{c} ",
textStyle: {
fontSize: this.standSize / 150,
color: "#999"
},
},
},
legend: {
icon: 'circle',
orient: 'vertical',
itemWidth: 8,
itemHeight: 8,
right:0,
bottom:0,
data: ['车间工人', '车间安全员', '项目经理', '公休人数', '请假人数']
},
series: [{
name: '人数',
type: 'pie',
radius: '55%',
center: ['50%', '40%'],
data: [
{ value: 100, name: '车间工人' },
{ value: 10, name: '车间安全员' },
{ value: 5, name: '项目经理' },
{ value: 1, name: '公休人数' },
{ value: 4, name: '请假人数' }
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
myChart.currentIndex = -1;
setInterval(function () {
var dataLen = option.series[0].data.length;
/*console.log(dataLen);*/
// 取消之前高亮的图形
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: myChart.currentIndex
});
myChart.currentIndex = (myChart.currentIndex + 1) % dataLen;
// 高亮当前图形
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: myChart.currentIndex
});
}, 2000);
// 使用刚指定的配置项和数据显示图表。
/*myChart.setOption(option);*/
window.addEventListener("resize",function(){
myChart.resize();
});
</script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('years'));
//var myChart = echarts.init(document.getElementById('chart2'));
var ydata = [{
name: 'A区',
value: 18
},
{
name: 'B区',
value: 16
},
{
name: 'C区',
value: 15
},
{
name: 'D区',
value: 14
},
{
name: 'E区',
value: 10
}
];
var color = ["#FA9660", "#DADADA", "#FFD586", "#F8917E", "#D68F49"]
var xdata = ['A区', "B区", "C区", "D区", 'E区'];
option = {
/*backgroundColor: "rgba(255,255,255,1)",*/
color: color,
legend: {
icon: "circle",
x: "right",
right: "10",
bottom: "0",
data: xdata,
itemWidth: 8,
itemHeight: 8,
textStyle: {
color: '#000'
},
/*itemGap: 16,*/
/*formatter:function(name){
var oa = option.series[0].data;
var num = oa[0].value + oa[1].value + oa[2].value + oa[3].value+oa[4].value + oa[5].value + oa[6].value + oa[7].value+oa[8].value + oa[9].value ;
for(var i = 0; i < option.series[0].data.length; i++){
if(name==oa[i].name){
return ' '+name + ' | ' + oa[i].value + ' | ' + (oa[i].value/num * 100).toFixed(2) + '%';
}
}
}*/
formatter: function(name) {
return '' + name
}
},
series: [{
type: 'pie',
clockwise: false, //饼图的扇区是否是顺时针排布
minAngle: 2, //最小的扇区角度（0 ~ 360）
radius: ["50%", "70%"],
center: ["50%", "50%"],
avoidLabelOverlap: false,
itemStyle: { //图形样式
normal: {
borderColor: '#ffffff',
borderWidth: 1,
},
},
label: {
normal: {
show: false,
position: 'center',
formatter: '{b}\n{c} ({d}%)',
rich: {
text: {
color: "#fff",
fontSize: 14,
align: 'center',
verticalAlign: 'middle',
padding: 8
},
value: {
color: "#8693F3",
fontSize: 24,
align: 'center',
verticalAlign: 'middle',
},
}
},
emphasis: {
show: true,
textStyle: {
fontSize: 24,
}
}
},
data: ydata
}]
};
myChart.setOption(option);
myChart.currentIndex = -1;
setInterval(function () {
var dataLen = option.series[0].data.length;
// 取消之前高亮的图形
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: myChart.currentIndex
});
myChart.currentIndex = (myChart.currentIndex + 1) % dataLen;
// 高亮当前图形
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: myChart.currentIndex
});
}, 2000);
// 使用刚指定的配置项和数据显示图表。
/*myChart.setOption(option);*/
window.addEventListener("resize",function(){
myChart.resize();
});
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</div>
<div class="layui-footer footer footer-demo">
<div class="layui-main">
<p>
<a href="/">
Copyright ©2017 17sucai.com All Rights Reserved.
</a>
</p>
</div>
</div>
</body>
</html>
