273 lines
11 KiB
HTML
273 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/index9/index9.css" />
|
||
|
|
<link rel="stylesheet" href="assets/crpm/index/index.css" />
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="system">
|
||
|
|
<div class="top">
|
||
|
|
<h3>设备二维码巡检系统</h3>
|
||
|
|
<span>
|
||
|
|
<em><a href="javascript:void(0);">退出系统</a></em>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div class="bottom">
|
||
|
|
<div class="left">
|
||
|
|
<div class="head">
|
||
|
|
<img src="" alt="">
|
||
|
|
<h4>账号名称</h4>
|
||
|
|
<em>管理人员</em>
|
||
|
|
</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-6b3f61af-9077-4d32-ba17-06323c5b4d54" data-mod-id="d48fd3fe-9f7a-427c-a106-5bd8f9cd2bf5" data-url="route/pages/c49755/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-96019713-af90-47ff-ba6e-7ed5d4baf283" data-mod-id="1f6f942f-4c57-4825-9f71-6a085dc590cb" data-url="route/pages/d80717/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-115eb185-b9b2-410f-8f21-74b1ce9c9b50" data-mod-id="3c794b06-da8b-4d6d-8a5e-8433bbebf325" data-url="route/pages/cdfd45/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-ca584a01-b210-45da-9960-c25d06f0f821" data-mod-id="8f5fce1b-0402-4726-85e1-50103ca923ad" data-url="route/pages/bb6cd1/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-1cc7e958-9def-4955-b868-2cef8fabe56c" data-mod-id="e688d5be-1580-4d76-8fbc-e947ea014957" data-url="route/pages/178cdf/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-edffd15d-aec0-4a7d-ba66-2b7c06e0c899" data-mod-id="8afa47e6-331d-4d59-8bde-7cc52882b7da" data-url="route/pages/c85e75/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-33c922cd-ec5c-43ce-bcf3-7be9b34ee18d" data-mod-id="9169f599-6e3c-4d7c-8f92-c6e26b4456e3" data-url="route/pages/460879/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-c1cff805-9630-431d-9a3e-b29cc48298af" data-mod-id="72db61a2-ee34-4923-8101-cc46faafe8b0" data-url="route/pages/3aa3bd/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-b7ac72a8-01ae-4c26-81da-157926b93f04" data-mod-id="65dafa15-90e4-43b9-86bd-d2a9415910b7" data-url="route/pages/b98900/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-6f3c0a83-1ad3-49de-8721-6ca05cff772d" data-mod-id="8896feba-1561-4aad-86e2-e8273224aed7" data-url="route/pages/ade5a9/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-1d7b26a6-15c8-4dab-8ba2-6bfe246df869" data-mod-id="62b312d5-644a-44a6-a5d8-8243473eac60" data-url="route/pages/17fbb1/list.html"><i class="fa fa-list"></i> 二维码更新</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="right">
|
||
|
|
<div class="top">
|
||
|
|
<div class="headline">
|
||
|
|
欢迎使用设备二维码巡检系统
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="content">
|
||
|
|
<div class="homepage" id="homepage">
|
||
|
|
<div class="homepage-top">
|
||
|
|
<div class="lineChart1" id="lineChart1"></div>
|
||
|
|
</div>
|
||
|
|
<div class="homepage-bottom">
|
||
|
|
<div class="lineChart2" id="lineChart2"></div>
|
||
|
|
<div class="pieChart" id="pieChart"></div>
|
||
|
|
<div class="barChart" id="barChart"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<iframe class="page-iframe" id="pageIframe" src="" style="display: none;"></iframe>
|
||
|
|
</div>
|
||
|
|
</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');
|
||
|
|
var content = document.querySelector('.content');
|
||
|
|
$(document).on('click', '.menu-item', function() {
|
||
|
|
var url = this.dataset.url;
|
||
|
|
var pageIframe = $('#pageIframe');
|
||
|
|
pageIframe.attr('src', url);
|
||
|
|
pageIframe.show();
|
||
|
|
homepage.style.display = 'none';
|
||
|
|
content.style.backgroundColor = '#FFF'
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
//折线图
|
||
|
|
var lineChart = echarts.init(document.getElementById('lineChart1'));
|
||
|
|
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();
|
||
|
|
});
|
||
|
|
|
||
|
|
//折线图2
|
||
|
|
var lineChart2 = echarts.init(document.getElementById('lineChart2'));
|
||
|
|
var optionLine = {
|
||
|
|
animation: false,
|
||
|
|
xAxis: {
|
||
|
|
type: 'category',
|
||
|
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
type: 'value'
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
||
|
|
type: 'line',
|
||
|
|
smooth: true
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
lineChart2.setOption(optionLine);
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// 饼状图
|
||
|
|
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: {
|
||
|
|
//xt: '收支情况'//
|
||
|
|
},
|
||
|
|
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] // 第二条柱状图的数据
|
||
|
|
}]
|
||
|
|
};
|
||
|
|
barChart.setOption(optionBar);
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|