Files
HTCloud/HT.Cloud.Web/Views/Home/Default.cshtml

745 lines
33 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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">
<link rel="stylesheet" href="~/lib/layui/css/layui.css?v=@HT.Cloud.Code.GlobalContext.GetVersion()" media="all">
<link rel="stylesheet" href="~/lib/font-awesome-4.7.0/css/font-awesome.min.css?v=@HT.Cloud.Code.GlobalContext.GetVersion()" media="all">
<link rel="stylesheet" href="~/css/public.css?v=@HT.Cloud.Code.GlobalContext.GetVersion()" media="all">
<script src="~/lib/jquery-3.4.1/jquery-3.4.1.min.js?v=@HT.Cloud.Code.GlobalContext.GetVersion()" charset="utf-8"></script>
<script type="text/javascript" src="~/lib/echarts-5.3.0/dist/echarts.js"></script>
<style>
.layui-card {
border: 1px solid #f2f2f2;
border-radius: 5px;
overflow: auto;
}
.icon {
margin-right: 10px;
color: #1aa094;
}
.icon-cray {
color: #ffb800 !important;
}
.icon-blue {
color: #1e9fff !important;
}
.icon-tip {
color: #ff5722 !important;
}
.layuimini-qiuck-module {
text-align: center;
margin-top: 10px
}
.layuimini-qiuck-module a i {
display: inline-block;
width: 100%;
height: 60px;
line-height: 60px;
text-align: center;
border-radius: 2px;
font-size: 30px;
background-color: #F8F8F8;
color: black;
transition: all .3s;
-webkit-transition: all .3s;
}
.layuimini-qiuck-module a cite {
position: relative;
top: 2px;
display: block;
color: black;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font-size: 14px;
}
.welcome-module {
width: 100%;
height: 210px;
}
.panel {
background-color: #fff;
border: 1px solid transparent;
border-radius: 3px;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
box-shadow: 0 1px 1px rgba(0,0,0,.05)
}
.panel-body {
padding: 10px
}
.panel-title {
margin-top: 0;
margin-bottom: 0;
font-size: 12px;
color: inherit
}
.label {
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
margin-top: .3em;
}
.layui-red {
color: red
}
.main_btn > p {
height: 40px;
}
.layui-bg-number {
background-color: #F8F8F8;
}
.layuimini-notice:hover {
background: #f6f6f6;
}
.layuimini-notice {
padding: 7px 16px;
clear: both;
font-size: 12px !important;
cursor: pointer;
position: relative;
transition: background 0.2s ease-in-out;
}
.layuimini-notice-title, .layuimini-notice-label {
padding-right: 70px !important;
text-overflow: ellipsis !important;
overflow: hidden !important;
white-space: nowrap !important;
}
.layuimini-notice-title {
line-height: 28px;
font-size: 14px;
color: black;
}
.layuimini-notice-extra {
position: absolute;
top: 50%;
margin-top: -8px;
right: 16px;
display: inline-block;
height: 16px;
color: #999;
}
.layui-table {
width: 100%;
margin: 10px 0;
background-color: #fff;
color: black;
}
.layui-text {
line-height: 1.6;
font-size: 14px;
color: black;
}
</style>
</head>
<body>
<div class="layuimini-container">
<div class="layuimini-main">
<div class="layui-row layui-col-space15">
<div class="layui-col-md10">
<div class="layui-row layui-col-space15">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header"><i class="fa fa-warning icon"></i>设备状态</div>
<div class="layui-card-body">
<div class="welcome-module">
<div class="layui-row layui-col-space10">
<div class="layui-col-xs3">
<div class="panel layui-bg-number">
<div class="panel-body">
<div class="panel-title">
<h5 id="T1_Title"></h5>
</div>
<div class="panel-content">
<h1 class="no-margins" id="T1"></h1>
</div>
</div>
</div>
</div>
<div class="layui-col-xs3">
<div class="panel layui-bg-number">
<div class="panel-body">
<div class="panel-title">
<h5 id ="T2_Title"></h5>
</div>
<div class="panel-content">
<h1 class="no-margins" id="T2"></h1>
</div>
</div>
</div>
</div>
<div class="layui-col-xs3">
<div class="panel layui-bg-number">
<div class="panel-body">
<div class="panel-title">
<h5 id="T3_Title"></h5>
</div>
<div class="panel-content">
<h1 class="no-margins" id="T3"></h1>
</div>
</div>
</div>
</div>
<div class="layui-col-xs3">
<div class="panel layui-bg-number">
<div class="panel-body">
<div class="panel-title">
<h5 id="T4_Title"></h5>
</div>
<div class="panel-content">
<h1 class="no-margins" id="T4"></h1>
</div>
</div>
</div>
</div>
<div class="layui-col-xs3">
<div class="panel layui-bg-number">
<div class="panel-body">
<div class="panel-title">
<h5 id="B1_Title"></h5>
</div>
<div class="panel-content">
<h1 class="no-margins" id="B1"></h1>
</div>
</div>
</div>
</div>
<div class="layui-col-xs3">
<div class="panel layui-bg-number">
<div class="panel-body">
<div class="panel-title">
<h5 id="B2_Title"></h5>
</div>
<div class="panel-content">
<h1 class="no-margins" id="B2"></h1>
</div>
</div>
</div>
</div>
<div class="layui-col-xs3">
<div class="panel layui-bg-number">
<div class="panel-body">
<div class="panel-title">
<h5 id="B3_Title"></h5>
</div>
<div class="panel-content">
<h1 class="no-margins" id="B3"></h1>
</div>
</div>
</div>
</div>
<div class="layui-col-xs3">
<div class="panel layui-bg-number">
<div class="panel-body">
<div class="panel-title">
<h5 id="B4_Title"></h5>
</div>
<div class="panel-content">
<h1 class="no-margins" id="B4"></h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header"><i class="fa fa-line-chart icon"></i>生产统计</div>
<div class="layui-card-body">
<div id="echarts-records" style="width: 100%;min-height:500px"></div>
</div>
</div>
</div>
</div>
</div>
<div class="layui-col-md2">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header"><i class="fa fa-warning icon"></i>运行状态</div>
<div class="layui-card-body">
<div class="welcome-module">
<div class="layui-row layui-col-space10">
<div class="layui-col-xs12">
<div class="panel layui-bg-number">
<div class="panel-body">
<div class="panel-title">
<h5 id="S1_Title"></h5>
</div>
<div class="panel-content">
<h1 class="no-margins" id="S1"></h1>
</div>
</div>
</div>
</div>
<div class="layui-col-xs12">
<div class="panel layui-bg-number">
<div class="panel-body">
<div class="panel-title">
<h5 id="S2_Title"></h5>
</div>
<div class="panel-content">
<h1 class="no-margins" id="S2"></h1>
</div>
</div>
</div>
</div>
<div class="layui-col-xs12">
<div class="panel layui-bg-number">
<div class="panel-body">
<div class="panel-title">
<h5 id="S3_Title"></h5>
</div>
<div class="panel-content">
<h1 class="no-margins" id="S3"></h1>
</div>
</div>
</div>
</div>
<div class="layui-col-xs12">
<div class="panel layui-bg-number">
<div class="panel-body">
<div class="panel-title">
<h5 id="S4_Title"></h5>
</div>
<div class="panel-content">
<h1 class="no-margins" id="S4"></h1>
</div>
</div>
</div>
</div>
<div class="layui-col-xs12">
<div class="panel layui-bg-number">
<div class="panel-body">
<div class="panel-title">
<h5 id="S5_Title"></h5>
</div>
<div class="panel-content">
<h1 class="no-margins" id="S5"></h1>
</div>
</div>
</div>
</div>
<div class="layui-col-xs12">
<div class="panel layui-bg-number">
<div class="panel-body">
<div class="panel-title">
<h5 id="S6_Title"></h5>
</div>
<div class="panel-content">
<h1 class="no-margins" id="S6"></h1>
</div>
</div>
</div>
</div>
<div class="layui-col-xs12">
<div class="panel layui-bg-number">
<div class="panel-body">
<div class="panel-title">
<h5 id="S7_Title"></h5>
</div>
<div class="panel-content">
<h1 class="no-margins" id="S7"></h1>
</div>
</div>
</div>
</div>
<div class="layui-col-xs12">
<div class="panel layui-bg-number">
<div class="panel-body">
<div class="panel-title">
<h5 id="S8_Title"></h5>
</div>
<div class="panel-content">
<h1 class="no-margins" id="S8"></h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="~/lib/layui/layui.js?v=@HT.Cloud.Code.GlobalContext.GetVersion()" charset="utf-8"></script>
<script src="~/js/lay-config.js?v=@HT.Cloud.Code.GlobalContext.GetVersion()" charset="utf-8"></script>
<script src="~/js/framework-ui.js?v=@HT.Cloud.Code.GlobalContext.GetVersion()"></script>
<script>
//// 公告赋值
//$(function () {
// noticeInfo();
// quickModuleInfo();
// loadInfo();
//});
//记录信息 更改为赋值实时数据初始值
loadInfo = async function () {
$.ajax({
url: "/ReportManage/MainPage/GetRtData",
Type: "Get",
success: function (redata) {
var data = JSON.parse(redata);
$('#T1').html(data.T1);
$('#T2').html(data.T2);
$('#T3').html(data.T3);
$('#T4').html(data.T4);
$('#B1').html(data.B1);
$('#B2').html(data.B2);
$('#B3').html(data.B3);
$('#B4').html(data.B4);
$('#S1').html(data.S1);
$('#S2').html(data.S2);
$('#S3').html(data.S3);
$('#S4').html(data.S4);
$('#S5').html(data.S5);
$('#S6').html(data.S6);
$('#S7').html(data.S7);
$('#S8').html(data.S8);
//var myChart = echarts.init(document.getElementById('echarts-records'));
//var option = myChart.getOption();
//let xData = data.RtTime;
//let yData = data.HT_GMJ_VP;
////option.series[0].data.push(yData);
//if (option.xAxis[0].data.length > 34) {
// option.xAxis[0].data.shift();
// option.series[0].data.shift();
//}
//option.xAxis[0].data.push(xData);
//option.series[0].data.push(yData);
//myChart.setOption(option);
}
});
$.ajax({
url: "/ReportManage/MainPage/GetRtChartData",
Type: "Get",
success: function (redata) {
var data = JSON.parse(redata);
var myChart = echarts.init(document.getElementById('echarts-records'));
var option = myChart.getOption();
//let xData = data.RtTime;
//let yData = data.HT_GMJ_VP;
//option.series[0].data.push(yData);
if (option.xAxis[0].data.length > 34) {
option.xAxis[0].data.shift();
for (var i = 0; i < data.length; i++) {
option.series[i].data.shift();
}
// option.series[0].data.shift();
}
//option.xAxis[0].data.push(xData);
//option.series[0].data.push(yData);
option.xAxis[0].data.push(data[0].RtTime);
//var yData = [];
for (var i = 0; i < data.length; i++) {
option.series[i].data.push(data[i].Value)
}
myChart.setOption(option);
}
});
}
layui.use(['layer', 'miniTab', 'common'], function () {
var $ = layui.jquery,
layer = layui.layer,
miniTab = layui.miniTab,
common = layui.common;
var StaticChartList = new Array();
const CHARTSRGB = ["#8B2252", "#C65911", "#0000EE", "#00F5FF", "#00E5EE", "#27408B", "#FFD700", "#7FFFD4", "#B22222", "#EE7621", "#00C5CD", "#A0522D", "#1E90FF", "#00868B", "#8B4513", "#8B3A3A", "#CD6600", "#CD853F", "#EE7942"
, "#D2691E", "#8B008B", "#FFEC8B", "#8B4513", "#CDC673", "#EEEE00", "#FFA500", "#FFD966"];
//获取并初始化界面标题
$(function () {
$.ajax({
url: "/ReportManage/MainPage/GetMainPageInit",
Type: "Get",
success: function (redata) {
var dataInit = JSON.parse(redata);
loadInitTile(dataInit);
}
});
});
$(function () {
$.ajax({
url: "/ReportManage/MainPage/GetMainPageChartInit",
Type: "Get",
success: function (redata) {
var dataInit = JSON.parse(redata);
StaticChartList = dataInit;
loadChart(StaticChartList);
//loadChart(dataInit.RtTime, dataInit.HT_GMJ_VP);
}
});
});
miniTab.listen();
common.iframeInterval(function () {
loadInfo();
//noticeInfo();
//quickModuleInfo();
}, 1000); //指定1秒刷新一次
function loadInitTile(Tdata) {
$('#T1_Title').html(Tdata.T1_Title);
$('#T2_Title').html(Tdata.T2_Title);
$('#T3_Title').html(Tdata.T3_Title);
$('#T4_Title').html(Tdata.T4_Title);
$('#B1_Title').html(Tdata.B1_Title);
$('#B2_Title').html(Tdata.B2_Title);
$('#B3_Title').html(Tdata.B3_Title);
$('#B4_Title').html(Tdata.B4_Title);
$('#S1_Title').html(Tdata.S1_Title);
$('#S2_Title').html(Tdata.S2_Title);
$('#S3_Title').html(Tdata.S3_Title);
$('#S4_Title').html(Tdata.S4_Title);
$('#S5_Title').html(Tdata.S5_Title);
$('#S6_Title').html(Tdata.S6_Title);
$('#S7_Title').html(Tdata.S7_Title);
$('#S8_Title').html(Tdata.S8_Title);
}
/**
* 报表功能
*/
function loadChart(dataInit) {
var xData = [];
xData.push(dataInit[0].RtTime);
var yData = [];
for (var i = 0; i < dataInit.length ; i++)
{
var yAxisdata = [];
yAxisdata.push(dataInit[i].Value)
yData.push(yAxisdata);
}
var legendArr = [];
var colorArr = [];
var ySeries = [];
for (var ci = 0; ci < yData.length; ci++)
{
colorArr.push(CHARTSRGB[ci])
legendArr.push(StaticChartList[ci].Description);
ySeries.push(
{
// symbol: "none",
name: StaticChartList[ci].Description,
type: 'line',
data: yData[ci],
lineStyle: {
normal: {
width: 2
}
},
label: {
show: true, // 在折线拐点上显示数据
position: 'bottom',
textStyle: {
color: 'black',
fontSize: 10
}
},
smooth: true,
symbol: 'circle',
symbolSize: 1,
showAllSymbol: true,
color: colorArr[ci],
}
)
}
var myChart = echarts.init(document.getElementById('echarts-records'));
//var xData = [];
//var yData = [];
//xData.push(sxdata);
//yData.push(sydata);
//var cpuData = [];
//common.ajax({
// url: "/SystemSecurity/ServerMonitoring/GetServerData",
// dataType: "json",
// async: false,
// success: function (data) {
// var length = data.length;
// for (var i = 0; i < length; i++) {
// if (data[i]['F_Date'] !== null) {
// xData.push(new Date(data[i]['F_Date']).Format("yyyy-MM-dd"));
// }
// if (data[i]['F_ARM'] !== null) {
// armData.push(data[i]['F_ARM']);
// }
// if (data[i]['F_CPU'] !== null) {
// cpuData.push(data[i]['F_CPU']);
// }
// }
// }
//});
option = {
tooltip: {
trigger: 'axis'
},
legend: {
data: legendArr
},
//legend:legendArr,
xAxis: {
type: 'category',
boundaryGap: false,
data: xData,
//axisTick: {
// show: true // 不显示坐标轴刻度线
//},
//axisLabel:{
// show:true
//},
splitLine: {
show: true, //想要不显示网格线改为false
lineStyle: {
// 设置网格为虚线
type: 'dashed'
}
},
axisLine: {
show: true,
lineStyle: {
color: '#5470C6',
width: 3
}
},
axisTick: {
show: true,
inside: true
},
},
yAxis: {
name: '',
nameLocation: 'center',
axisTick: {
show:true,
inside: true
},
axisLabel: {
inside: true,
align: 'left',
verticalAlign: 'bottom',
},
axisLine: {
show: true,
lineStyle: {
color: '#EE6666',
width: 3
}
},
splitLine: {
show: true, //想要不显示网格线改为false
lineStyle: {
// 设置网格为虚线
type: 'dashed'
}
},
itemStyle: {
normal: {
label: {
show: true // 在折线拐点上显示数据
},
}
},
//label: {
// show: true,
// position: 'top'
//},
type: 'value',
scale: true
},
scale:true,
series:ySeries,
//series: [
// {
// name: '给煤量(T)', type: 'line',
// data: yData,
// lineStyle: {
// normal: {
// width: 2
// }
// },
// label: {
// show: true, // 在折线拐点上显示数据
// position:'bottom',
// textStyle:{
// color:'black',
// fontSize:10
// }
// },
// smooth: true,
// symbol: 'circle',
// symbolSize: 6,
// showAllSymbol: true,
// color: '#EE6666',
// },
//]
};
myChart.setOption(option);
// echarts 窗口缩放自适应
window.onresize = function () {
myChart.resize();
}
}
});
</script>
</body>
</html>