424 lines
15 KiB
HTML
424 lines
15 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/index7/index7.css" />
|
||
|
|
<link rel="stylesheet" href="assets/crpm/index/index.css" />
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="system">
|
||
|
|
<div class="left">
|
||
|
|
<div class="head">
|
||
|
|
<div class='photo'>头像</div>
|
||
|
|
<h5>账号名称</h5>
|
||
|
|
<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>
|
||
|
|
<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-0875e1ab-364c-4d02-b3c2-33ce45e012f7" data-mod-id="d0fe5d5a-f43c-45e3-85d1-7b29ff3fb4d7" data-url="route/pages/578bcf/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-a9e7bf33-7b0c-495c-b80e-fc0ab8b7ef5f" data-mod-id="e8eb8214-3620-404a-9990-ce2491588bec" data-url="route/pages/6a4b12/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-8652e631-9d59-476e-805c-5f1f38ac0282" data-mod-id="b4aa06e5-0a3d-4f0d-ab81-4cfd776393c7" data-url="route/pages/6d8bdd/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-c60947e7-c5de-4761-8076-25c15e00e055" data-mod-id="7c22c709-6224-440a-b05e-ffbf7aec7e16" data-url="route/pages/f57994/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-50213659-2ce6-4451-99f3-78b547021664" data-mod-id="bf8aaf44-5e24-4055-b17b-ec636d743b69" data-url="route/pages/abeecd/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-6970dfeb-551f-4cb8-8398-b74b7fc810b5" data-mod-id="aa7b4ca4-781d-4eba-97cb-9b37ac06f8cd" data-url="route/pages/411ed1/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-db9f248c-53dc-4e0d-a0ed-ba3944e54d4f" data-mod-id="4d10e07b-82c9-4948-b61e-65e2911019b9" data-url="route/pages/73cbcb/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-978c40b4-8f3e-4a2d-9eb7-800ef24c79eb" data-mod-id="cfa8ee6c-d967-4e41-adbb-4a71c268d376" data-url="route/pages/730fc4/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-6ce26b20-0b3c-4894-9d68-24d660fe0a39" data-mod-id="df465f2b-d7ee-439e-be69-e99623ec8273" data-url="route/pages/b3688f/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-3b54387f-2c81-453f-aca0-a48603c86c12" data-mod-id="ac5ff21c-7f40-48a1-85d3-33a53986ec5d" data-url="route/pages/5502ad/list.html"><i class="fa fa-list"></i> 用户访问控制</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="right">
|
||
|
|
<div class="top">
|
||
|
|
<div class="row1">
|
||
|
|
<h4>工厂设备运行监控管理系统</h4>
|
||
|
|
</div>
|
||
|
|
<div class="row2">
|
||
|
|
<div class="headline">
|
||
|
|
|
||
|
|
<h5>欢迎使用工厂设备运行监控管理系统</h5>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="bottom">
|
||
|
|
<div class="content">
|
||
|
|
<div class='homepage' id="homepage">
|
||
|
|
<div class='homepage-top' >
|
||
|
|
<div class='pieChartOne' id="pieChartOne"></div>
|
||
|
|
<div class='pieChartTwo' id="pieChartTwo"></div>
|
||
|
|
<div class='pieChartThree' id="pieChartThree"></div>
|
||
|
|
<div class='pieChartFour' id="pieChartFour"></div>
|
||
|
|
</div>
|
||
|
|
<div class='homepage-center' >
|
||
|
|
<div class='lineChart' id="lineChart"></div>
|
||
|
|
<div id="pieChart" class='pieChart' ></div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class='homepage-bot' >
|
||
|
|
<div class='barChartOne' id="barChartOne"></div>
|
||
|
|
<div class='barChartTwo' id="barChartTwo"></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>
|
||
|
|
<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() - 165}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 pieChartOne = echarts.init(document.getElementById('pieChartOne'));
|
||
|
|
var optionPieOne = {
|
||
|
|
animation: false,
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'item'
|
||
|
|
},
|
||
|
|
|
||
|
|
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'}
|
||
|
|
]
|
||
|
|
}]
|
||
|
|
};
|
||
|
|
pieChartOne.setOption(optionPieOne);
|
||
|
|
// 饼状图2
|
||
|
|
var pieChartTwo = echarts.init(document.getElementById('pieChartTwo'));
|
||
|
|
var optionPieTwo = {
|
||
|
|
animation: false,
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'item'
|
||
|
|
},
|
||
|
|
|
||
|
|
series: [{
|
||
|
|
//name: '嘻嘻',//
|
||
|
|
type: 'pie',
|
||
|
|
radius: ['0%', '70%'],
|
||
|
|
data: [
|
||
|
|
{value: 200, name: 'data1'},
|
||
|
|
{value: 300, name: 'data2'},
|
||
|
|
{value: 500, name: 'data3'},
|
||
|
|
{value: 335, name: 'data4'},
|
||
|
|
{value: 400, name: 'data5'}
|
||
|
|
]
|
||
|
|
}]
|
||
|
|
};
|
||
|
|
pieChartTwo.setOption(optionPieTwo);
|
||
|
|
// 饼状图3
|
||
|
|
var pieChartThree = echarts.init(document.getElementById('pieChartThree'));
|
||
|
|
var optionPieThree = {
|
||
|
|
animation: false,
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'item'
|
||
|
|
},
|
||
|
|
|
||
|
|
series: [{
|
||
|
|
//name: '嘻嘻',//
|
||
|
|
type: 'pie',
|
||
|
|
radius: ['0%', '70%'],
|
||
|
|
data: [
|
||
|
|
{value: 100, name: 'data1'},
|
||
|
|
{value: 274, name: 'data2'},
|
||
|
|
{value: 310, name: 'data3'},
|
||
|
|
{value: 600, name: 'data4'},
|
||
|
|
{value: 100, name: 'data5'}
|
||
|
|
]
|
||
|
|
}]
|
||
|
|
};
|
||
|
|
pieChartThree.setOption(optionPieThree);
|
||
|
|
// 饼状图4
|
||
|
|
var pieChartFour = echarts.init(document.getElementById('pieChartFour'));
|
||
|
|
var optionPieFour = {
|
||
|
|
animation: false,
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'item'
|
||
|
|
},
|
||
|
|
|
||
|
|
series: [{
|
||
|
|
//name: '嘻嘻',//
|
||
|
|
type: 'pie',
|
||
|
|
radius: ['0%', '70%'],
|
||
|
|
data: [
|
||
|
|
{value: 150, name: 'data1'},
|
||
|
|
{value: 274, name: 'data2'},
|
||
|
|
{value: 500, name: 'data3'},
|
||
|
|
{value: 335, name: 'data4'},
|
||
|
|
{value: 400, name: 'data5'}
|
||
|
|
]
|
||
|
|
}]
|
||
|
|
};
|
||
|
|
pieChartFour.setOption(optionPieFour);
|
||
|
|
//折线图
|
||
|
|
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);
|
||
|
|
//柱状图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);
|
||
|
|
//柱状图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);
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|