279 lines
10 KiB
HTML
279 lines
10 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/index2/index2.css" />
|
||
|
|
<link rel="stylesheet" href="assets/crpm/index/index.css" />
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="app">
|
||
|
|
<div class="system">
|
||
|
|
<div class="left">
|
||
|
|
<div class="title">
|
||
|
|
工厂信息发布管理系统
|
||
|
|
</div>
|
||
|
|
<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-900865bb-edef-4f2f-b800-4ba987eb959e" data-mod-id="df12541d-7888-4086-a850-d26bd88b318a" data-url="route/pages/195b9f/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-6df0b870-d8ac-4c6f-9672-15fc03e9167e" data-mod-id="2200d318-3f25-4167-b553-46f032d02270" data-url="route/pages/984ef4/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-d5748cc4-73bc-4ce2-9b6c-ffab11fad014" data-mod-id="3e8e4c92-df54-43f9-91ab-4a8380ae2c43" data-url="route/pages/1adc2c/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-5924f2e2-d57c-4d06-8d9a-4f091021d519" data-mod-id="f91ff968-13c5-4095-8768-b045d2b6fb84" data-url="route/pages/c9a5c4/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-fbdadf23-2b2e-48c1-8960-18ad3fe06afb" data-mod-id="0cfeff00-7a58-42c9-a929-d02c2cb7b732" data-url="route/pages/9129f2/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-87ee5167-dda3-4d5d-bce4-4a1d4cc79650" data-mod-id="22964eef-82e8-4558-8745-7d236ba4bff8" data-url="route/pages/368627/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-f7908b86-134a-4f85-a55f-58b113ff2e9b" data-mod-id="b488dddd-abfe-443c-85fd-a0b0650e034c" data-url="route/pages/e2a1e9/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-27b17e2c-c3b0-434e-82db-a47da9f1c8b1" data-mod-id="71e4a635-643a-40df-8a23-121387a6270d" data-url="route/pages/217931/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-e14b865a-fa56-44ec-adc3-2f0a32f12312" data-mod-id="f5360a93-1f91-469a-873f-d2a373184e6d" data-url="route/pages/40a4dd/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-c8e9a44c-9055-4a40-b22f-dc51ab1e9809" data-mod-id="5a74cc9a-2c6a-4dfa-b9e4-7f678292ab28" data-url="route/pages/3492b7/list.html"><i class="fa fa-list"></i> API接口</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="right">
|
||
|
|
|
||
|
|
<div class="top">
|
||
|
|
|
||
|
|
<div class="row2">
|
||
|
|
<div class="headline">
|
||
|
|
</h5>欢迎使用工厂信息发布管理系统</h5>
|
||
|
|
</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>
|
||
|
|
<div class="bottom">
|
||
|
|
<div class="content">
|
||
|
|
<div class='homepage' id="homepage">
|
||
|
|
<div class='homepage-top' >
|
||
|
|
<div id="barChartOne" class='barChartOne' ></div>
|
||
|
|
<div class='pieChart' id="pieChart"></div>
|
||
|
|
</div>
|
||
|
|
<div class='homepage-bot' >
|
||
|
|
<div id="barChartTwo" class='barChartTwo' ></div>
|
||
|
|
<div id="barChartThree" class='barChartThree' ></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>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script src="assets/crpm/js/layui/layui.js"></script>
|
||
|
|
<script src="assets/crpm/js/echarts/echarts.min.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() - 100}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';
|
||
|
|
});
|
||
|
|
});
|
||
|
|
//柱状图1
|
||
|
|
var barChartOne = echarts.init(document.getElementById('barChartOne'));
|
||
|
|
var optionBarOne = {
|
||
|
|
animation: false,
|
||
|
|
title: {
|
||
|
|
//text: '业务核心数据'//
|
||
|
|
},
|
||
|
|
tooltip: {},
|
||
|
|
legend: {
|
||
|
|
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] // 第二条柱状图的数据
|
||
|
|
}]
|
||
|
|
};
|
||
|
|
barChartOne.setOption(optionBarOne);
|
||
|
|
// 饼状图
|
||
|
|
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: ['0%', '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);
|
||
|
|
//柱状图2
|
||
|
|
var barChartTwo = echarts.init(document.getElementById('barChartTwo'));
|
||
|
|
var optionBarTwo = {
|
||
|
|
animation: false,
|
||
|
|
title: {
|
||
|
|
//text: '业务核心数据'//
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'axis',
|
||
|
|
axisPointer: {
|
||
|
|
type: 'shadow'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
data: ['Profit', 'Expenses', 'Income']
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
left: '3%',
|
||
|
|
right: '4%',
|
||
|
|
bottom: '3%',
|
||
|
|
containLabel: true
|
||
|
|
},
|
||
|
|
xAxis: [
|
||
|
|
{
|
||
|
|
type: 'value'
|
||
|
|
}
|
||
|
|
],
|
||
|
|
yAxis: [
|
||
|
|
{
|
||
|
|
type: 'category',
|
||
|
|
axisTick: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||
|
|
}
|
||
|
|
],
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: 'Profit',
|
||
|
|
type: 'bar',
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
position: 'inside'
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
focus: 'series'
|
||
|
|
},
|
||
|
|
data: [200, 170, 240, 244, 200, 220, 210]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'Income',
|
||
|
|
type: 'bar',
|
||
|
|
stack: 'Total',
|
||
|
|
label: {
|
||
|
|
show: true
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
focus: 'series'
|
||
|
|
},
|
||
|
|
data: [320, 302, 341, 374, 390, 450, 420]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'Expenses',
|
||
|
|
type: 'bar',
|
||
|
|
stack: 'Total',
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
position: 'left'
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
focus: 'series'
|
||
|
|
},
|
||
|
|
data: [-120, -132, -101, -134, -190, -230, -210]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
barChartTwo.setOption(optionBarTwo);
|
||
|
|
//柱状图3
|
||
|
|
var barChartThree = echarts.init(document.getElementById('barChartThree'));
|
||
|
|
var optionBarThree = {
|
||
|
|
animation: false,
|
||
|
|
title: {
|
||
|
|
//text: '业务核心数据'//
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
type: 'category',
|
||
|
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
type: 'value'
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
data: [120, 200, 150, 80, 70, 110, 130],
|
||
|
|
type: 'bar'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
barChartThree.setOption(optionBarThree);
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|