cdl/HTCloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初版IO监控

Browse Source
This commit is contained in:
dell
2024-01-12 08:54:55 +08:00
parent 6025fb75a3
commit 62959ab75a
10 changed files with 4910 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
HT.Cloud.Domain/Entity/SystemSecurity/RealTimeIOGroupEntity.cs Normal file
View File

@ -0,0 +1,46 @@
using System;
using System.ComponentModel.DataAnnotations;
using SqlSugar;
namespace HT.Cloud.Domain.SystemSecurity
{
/// <summary>
/// 创 建：cdl
/// 日 期：2024-01-04 10:56
/// 描 述：IO模块实体类
/// </summary>
[SugarTable("HT_REALTIME_IOGROUP")]
public class RealTimeIOGroupEntity
{
/// <summary>
///
/// </summary>
[SugarColumn(ColumnName="ID", ColumnDescription = "",ColumnDataType = "int(10)",IsPrimaryKey = true)]
public int ID { get; set; }
/// <summary>
/// ioid
/// </summary>
[SugarColumn(ColumnName="IOID", ColumnDescription = "ioid",ColumnDataType = "int(10)", IsNullable = true)]
public int? IOID { get; set; }
/// <summary>
/// IO序号
/// </summary>
[SugarColumn(ColumnName="IOIndex", ColumnDescription = "IO序号",ColumnDataType = "int(10)", IsNullable = true)]
public int? IOIndex { get; set; }
/// <summary>
/// IOSLOT
/// </summary>
[SugarColumn(ColumnName="IOSlot", ColumnDescription = "IOSLOT",ColumnDataType = "int(10)", IsNullable = true)]
public int? IOSlot { get; set; }
/// <summary>
/// IO型号
/// </summary>
[SugarColumn(ColumnName="IOModel", ColumnDescription = "IO型号",ColumnDataType = "varchar(255)", IsNullable = true)]
public string IOModel { get; set; }
/// <summary>
/// IO位数
/// </summary>
[SugarColumn(ColumnName="IOBit", ColumnDescription = "IO位数",ColumnDataType = "varchar(255)", IsNullable = true)]
public string IOBit { get; set; }
}
}

36
HT.Cloud.Domain/Entity/SystemSecurity/RealTimeIOInfoEntity.cs Normal file
View File

@ -0,0 +1,36 @@
using System;
using System.ComponentModel.DataAnnotations;
using SqlSugar;
namespace HT.Cloud.Domain.SystemSecurity
{
/// <summary>
/// 创 建：cdl
/// 日 期：2024-01-04 10:53
/// 描 述：IO信息实体类
/// </summary>
[SugarTable("HT_REALTIME_IOINFO")]
public class RealTimeIOInfoEntity
{
/// <summary>
///
/// </summary>
[SugarColumn(ColumnName="ID", ColumnDescription = "",ColumnDataType = "int(10)")]
public int ID { get; set; }
/// <summary>
/// ioid
/// </summary>
[SugarColumn(ColumnName="IOID", ColumnDescription = "ioid",ColumnDataType = "int(10)", IsNullable = true)]
public int? IOID { get; set; }
/// <summary>
/// IO符号名称
/// </summary>
[SugarColumn(ColumnName="IONAME", ColumnDescription = "IO符号名称",ColumnDataType = "varchar(128)", IsNullable = true)]
public string IONAME { get; set; }
/// <summary>
/// IO功能名称
/// </summary>
[SugarColumn(ColumnName="IODESCRIPTION", ColumnDescription = "IO功能名称",ColumnDataType = "varchar(128)", IsNullable = true)]
public string IODESCRIPTION { get; set; }
}
}

26
HT.Cloud.Service/SystemSecurity/RealTimeIOState.cs → HT.Cloud.Service/SystemSecurity/RealTimeIOStateService.cs
View File

@ -17,21 +17,41 @@ using HT.Cloud.Domain.DevicesManage;
using Quartz;
using Microsoft.Extensions.Logging;
using Newtonsoft.Json;
using HT.Cloud.Domain.SystemSecurity;
namespace HT.Cloud.Service.SystemSecurity
{
public class RealTimeIOState : BaseService<RTMainPageEntity>, IDenpendency
public class RealTimeIOStateService : BaseService<RealTimeIOGroupEntity>, IDenpendency
{
/// <summary>
/// 绑定数据仓库的数据库ID
/// </summary>
private string dataDBNumber = GlobalContext.SystemConfig.DataDBNumber;
public RealTimeIOState(ISqlSugarClient context) : base(context)
public RealTimeIOStateService(ISqlSugarClient context) : base(context)
{
}
public async Task<string> GetRtData()
public async Task<List<RealTimeIOGroupEntity>> GetIOGroup(string systemName)
{
var groupName = _context.AsTenant().QueryableWithAttr<MetaGroupEntity>().Where(x => x.GroupDescription == systemName).First().GroupName;
var driverId = _context.AsTenant().QueryableWithAttr<MetaGroupEntity>().Where(x => x.GroupDescription == systemName).First().DriverID;
var driverName = _context.AsTenant().QueryableWithAttr<MetaDriverEntity>().Where(x => x.DriverID == driverId).First().DriverName;
var list = _context.AsTenant().GetConnection(dataDBNumber).Ado.SqlQuery<RealTimeIOGroupEntity>($"SELECT * FROM HT_{driverName}_{groupName}_IOGROUP");
return list;
}
public async Task<List<RealTimeIOInfoEntity>> GetIOInfo(string systemName)
{
var groupName = _context.AsTenant().QueryableWithAttr<MetaGroupEntity>().Where(x => x.GroupDescription == systemName).First().GroupName;
var driverId = _context.AsTenant().QueryableWithAttr<MetaGroupEntity>().Where(x => x.GroupDescription == systemName).First().DriverID;
var driverName = _context.AsTenant().QueryableWithAttr<MetaDriverEntity>().Where(x => x.DriverID == driverId).First().DriverName;
var list = _context.AsTenant().GetConnection(dataDBNumber).Ado.SqlQuery<RealTimeIOInfoEntity>($"SELECT * FROM HT_{driverName}_{groupName}_IOINFO");
return list;
}
public async Task<string> GetRtData()
{
//var groupName = _context.AsTenant().QueryableWithAttr<MetaGroupEntity>().Where(x => x.GroupDescription == systemName).First().GroupName;
//var driverId = _context.AsTenant().QueryableWithAttr<MetaGroupEntity>().Where(x => x.GroupDescription == systemName).First().DriverID;

20
HT.Cloud.Web/Areas/PenMeiReportManage/Controllers/PenMeiJMReportController.cs
View File

@ -10,6 +10,7 @@ using System.Linq;
using System.Threading.Tasks;
using HT.Cloud.Code;
using HT.Cloud.Service.SystemSecurity;
using Quartz;
namespace HT.Cloud.Web.Areas.SystemSecurity.Controllers
{
@ -19,7 +20,8 @@ namespace HT.Cloud.Web.Areas.SystemSecurity.Controllers
public class PenMeiJMReportController : BaseController
{
public ServerStateService _serverStateService { get; set; }
public RealTimeIOState _realTimeIOState { get; set; }
public RealTimeIOStateService _realTimeIOState { get; set; }
[HttpGet]
@ -63,10 +65,26 @@ namespace HT.Cloud.Web.Areas.SystemSecurity.Controllers
var data = (await _serverStateService.GetList(2)).OrderBy(a => a.F_Date).ToList();
return Content(data.ToJson());
}
[HttpGet]
public async Task<ActionResult> GetRealIOGroup()
{
var listgroup = _realTimeIOState.GetIOGroup("喷煤系统");
return Content(listgroup.ToJson());
}
[HttpGet]
public async Task<ActionResult> GetRealIOInfo()
{
var listinfo = _realTimeIOState.GetIOInfo("喷煤系统");
return Content(listinfo.ToJson());
}
[HttpGet]
public async Task<ActionResult> GetRealIOState()
{
var listgroup = _realTimeIOState.GetIOGroup("喷煤系统");
var listinfo = _realTimeIOState.GetIOInfo("喷煤系统");
var data = _realTimeIOState.GetRtData();
return Content(data.Result);
}

1053
HT.Cloud.Web/Areas/PenMeiReportManage/Views/PenMeiJMReport/Index - 32bit16bitt8bit初版完成.cshtml Normal file
View File

File diff suppressed because it is too large Load Diff

538
HT.Cloud.Web/Areas/PenMeiReportManage/Views/PenMeiJMReport/Index - 32bit完成.cshtml Normal file
View File

@ -0,0 +1,538 @@
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Index.cshtml";
}
@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment env
<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">
<style>
.layui-card {
border: 1px solid #f2f2f2;
border-radius: 5px;
}
.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: #333;
transition: all .3s;
-webkit-transition: all .3s;
}
.layuimini-qiuck-module a cite {
position: relative;
top: 2px;
display: block;
color: #666;
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;
}
.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;
}
.layuimini-notice-extra {
position: absolute;
top: 50%;
margin-top: -8px;
right: 16px;
display: inline-block;
height: 16px;
color: #999;
}
</style>
<script>
layui.use(['layer', 'echarts', 'common'], function () {
var $ = layui.jquery,
layer = layui.layer,
common = layui.common,
echarts = layui.echarts;
wcLoading.close();
//基准配置项
const width_iobox = 300;
const height_iobox = 810;
//32IO配置项
const top_row_height_32bit = 35;
const separator_32bit = 20;
const io_row_height_32bit = 45;
const io_row_y_offset_32bit = 17;
const io_row_left_x_name_32bit = 10;
const io_row_left_x_value_32bit = 65;
const io_row_right_x_name_32bit = 160;
const io_row_left_width_name_32bit = 40;
const io_row_left_width_value_32bit = 55;
const io_row_right_width_name_32bit = 20;
const io_row_right_width_value_32bit = 130;
const left_top_text_name_four_array_32bit = ['模块Slot：','在线状态：'];//左上左下
const right_top_text_name_four_array_32bit_old = ['型号：','系统：'];//右上右下
const right_top_text_name_four_array_32bit = ['',''];//右上右下
const left_top_text_value_four_array_32bit = ['3','在线'];//左上左下
const right_top_text_value_four_array_32bit = ['DQ 32xDC 24V/0.5A HF','2#高炉喷煤控制系统'];//右上右下
const rect_height = 10;
const rect_top_y_offset = 90;
const rect_bottom_y_offset = 65;
const io_rect_left_x_32bit = 10;
const io_rect_name_left_x_32bit = 35;
const io_rect_description_left_x_32bit = 35;
const io_rect_right_x_32bit = 270;
const io_rect_name_right_x_32bit = 225;
const io_rect_description_right_x_32bit = 155;
const io_rect_left_y_offset_32bit = 0;
const io_rect_name_left_y_offset_32bit = -7;
const io_rect_description_left_y_offset_32bit = 12;
const io_rect_right_y_offset_32bit = 0;
const io_rect_name_right_y_offset_32bit = -7;
const io_rect_description_right_y_offset_32bit = 12;
const io_rect_left_width_32bit = 20;
const io_rect_name_left_width_32bit = 40;
const io_rect_description_left_width_32bit = 110;
const io_rect_right_width_32bit = 20;
const io_rect_name_right_width_32bit = 40;
const io_rect_description_right_width_32bit = 110;
const leafer = new LeaferUI.Leafer({
view: 'idmain', // 支持 window 、div、canvas 标签对象， 可使用id字符串(不用加 # 号)
width: 1700, // 不能设置为 0， 否则会变成自动布局
height: 900,
})
const group = new LeaferUI.Group({ x: 0, y: 0, scaleX: 1, scaleY: 1 })
const image_cpu = new LeaferUI.Image({x:100,y:50,url:'/images/S71500.png',draggable:true,height:800})
//32IO生成
const box_32bit = new LeaferUI.Box({ x: 402, y: 50, width:width_iobox,height:height_iobox, fill: '#707980', draggable: true })
var ylinex_sum_four = 0;
var ylinex_array_four = [];
for(var linexid = 0;linexid<18;linexid++)
{
if(linexid == 0)
{
ylinex_sum_four = ylinex_sum_four + top_row_height_32bit;
ylinex_array_four.push(ylinex_sum_four);
}
else if(linexid == 1)
{
ylinex_sum_four = ylinex_sum_four + top_row_height_32bit;
ylinex_array_four.push(ylinex_sum_four);
}
else if(linexid == 10)
{
ylinex_sum_four = ylinex_sum_four + separator_32bit;
ylinex_array_four.push(ylinex_sum_four);
}
else
{
ylinex_sum_four = ylinex_sum_four + io_row_height_32bit;
ylinex_array_four.push(ylinex_sum_four);
}
}
for(var linexid = 0;linexid<18;linexid++)
{
if(linexid == 0)
{
var line = new LeaferUI.Line({
x: 0,
y:ylinex_array_four[linexid],// ylinex_sum_four + 35,
width: width_iobox,
strokeWidth: 1,
stroke: 'rgb(50,205,121)',
//id: "line" + linexid.toString()
});
box_32bit.add(line);
}
else if(linexid == 1)
{
var line = new LeaferUI.Line({
x: 0,
y:ylinex_array_four[linexid],// ylinex_sum_four + 35,
width: width_iobox,
strokeWidth: 1,
stroke: 'rgb(50,205,121)',
//id: "line" + linexid.toString()
});
box_32bit.add(line);
}
else if(linexid == 10)
{
var line = new LeaferUI.Line({
x: 0,
y: ylinex_array_four[linexid],// ylinex_sum_four + 20,
width: width_iobox,
strokeWidth: 1,
stroke: 'rgb(50,205,121)',
//id: "line" + linexid.toString()
});
box_32bit.add(line);
}
else
{
var line = new LeaferUI.Line({
x: 0,
y: ylinex_array_four[linexid],// ylinex_sum_four + 45,
width: width_iobox,
strokeWidth: 1,
stroke: 'rgb(50,205,121)',
//id: "line" + linexid.toString()
});
box_32bit.add(line);
}
//box_32bit.add(line);
}
var spiltline_four = new LeaferUI.Line({
x:width_iobox/2,
width:height_iobox,
rotation:90,
stroke:'rgb(50,205,121)',
strokeWidth:1,
dashPattern : [5, 2]
})
box_32bit.add(spiltline_four);
//box4左侧顶部状态效果
for(var tid = 0;tid<2;tid++)
{
let y = io_row_y_offset_32bit + tid * top_row_height_32bit;
var left_top_text_name = new LeaferUI.Text({
x:io_row_left_x_name_32bit,
y:y,//+10
//height:10,
width:io_row_left_width_name_32bit,
fill: '#5aa585',
text:left_top_text_name_four_array_32bit[tid],
textAlign :'left',
verticalAlign:'middle',
textWrap:'none',
padding:0,
fontSize:12
})
var left_top_text_name_value = new LeaferUI.Text({
x:io_row_left_x_value_32bit,
y:y,//+10
//height:10,
width:io_row_left_width_value_32bit,
fill: '#5aa585',
text:left_top_text_value_four_array_32bit[tid],
textAlign :'left',
verticalAlign:'middle',
textWrap:'none',
padding:0,
fontSize:12
})
//建议取消
var right_top_text_name = new LeaferUI.Text({
x:io_row_right_x_name_32bit,
y:y,//+10
//height:10,
width:io_row_right_width_name_32bit,
fill: '#5aa585',
text:right_top_text_name_four_array_32bit[tid],
textAlign :'left',
verticalAlign:'middle',
textWrap:'none',
padding:0,
fontSize:12
})
var right_top_text_name_value = new LeaferUI.Text({
x:io_row_right_x_name_32bit,
y:y,//+10
//height:10,
width:io_row_right_width_value_32bit,
fill: '#5aa585',
text:right_top_text_value_four_array_32bit[tid],
textAlign :'left',
verticalAlign:'middle',
textWrap:'none',
padding:0,
fontSize:12
})
box_32bit.add(left_top_text_name)
//box_32bit.add(right_top_text_name)
box_32bit.add(left_top_text_name_value)
box_32bit.add(right_top_text_name_value)
}
//box4效果
for(var sid = 0;sid<16;sid++)
{
let y =0 ;
if(sid<8)
{
y = io_row_height_32bit*(sid) + rect_top_y_offset ;
}
if(sid>=8)
{
y = io_row_height_32bit*(sid+1) + rect_bottom_y_offset ;
}
var rect_left = new LeaferUI.Rect({
x:io_rect_left_x_32bit,
y:y+io_rect_left_y_offset_32bit,
height:rect_height,
width:io_rect_left_width_32bit,
fill:'#55557f',
draggable:false,
id:'io'+sid.toString()+'_box_32bit'
})
var rect_left_text_name = new LeaferUI.Text({
x:io_rect_name_left_x_32bit,
y:y+io_rect_name_left_y_offset_32bit,
width:io_rect_name_left_width_32bit,
fill: '#5aa585',
text:'DO 0.X',
textAlign :'left',
verticalAlign:'middle',
textWrap:'none',
padding:0,
fontSize:12
})
var rect_left_text_description = new LeaferUI.Text({
x:io_rect_description_left_x_32bit,
y:y+io_rect_description_left_y_offset_32bit,
width:io_rect_description_left_width_32bit,
fill: '#20343c',
text:'1罐大卸压阀输出',
textAlign :'left',
verticalAlign:'middle',
textWrap:'none',
padding:0,
fontSize:12
})
//1罐仓流化阀原输出
var rect_right = new LeaferUI.Rect({
x:io_rect_right_x_32bit,
y:y+io_rect_right_y_offset_32bit,
height:rect_height,
width:io_rect_right_width_32bit,
fill:'#55557f',
draggable:false,
id:'io'+(sid+16).toString()+'_box_32bit'
})
var rect_right_text_name = new LeaferUI.Text({
x:io_rect_name_right_x_32bit,
y:y+io_rect_name_right_y_offset_32bit,
width:io_rect_name_right_width_32bit,
fill: '#5aa585',
text:'DO 0.X',
textAlign :'right',
verticalAlign:'middle',
textWrap:'none',
padding:0,
fontSize:12
})
var rect_right_text_description = new LeaferUI.Text({
x:io_rect_description_right_x_32bit,
y:y+io_rect_description_right_y_offset_32bit,
width:io_rect_description_right_width_32bit,
fill: '#20343c',
text:'1罐大卸压阀输出',
textAlign :'right',
verticalAlign:'middle',
textWrap:'none',
padding:0,
fontSize:12
})
//console.log(rect)
box_32bit.add(rect_left);
box_32bit.add(rect_left_text_name);
box_32bit.add(rect_left_text_description);
box_32bit.add(rect_right);
box_32bit.add(rect_right_text_name);
box_32bit.add(rect_right_text_description);
}
leafer.add(group)
group.add(box_32bit)
var t = null;
function time() {
clearTimeout(t); //清除定时器
UpdataChart()
t = setTimeout(time, 1 * 1000); //设定定时器，循环运行
}
async function UpdataChart() {
myajax = await $.ajax({
url: "/PenMeiReportManage/PenMeiJMReport/GetRealIOState",
type: "Get",
dataType: "json",
// traditional: true,//这里设置为true
// data: { charts_TagNames: SelectTagNamelist },
success: function (redata) {
}
});
$.when(myajax).done(function (redata) {
debugger;
for(var ioName in redata)
{
leafer.findOne('#'+ioName+'_box_one').fill =(redata[ioName] == '1') ? '#d4d04e' : '#9f9f91';
leafer.findOne('#'+ioName+'_box_tow').fill =(redata[ioName] != '1') ? '#d4d04e' : '#9f9f91';
leafer.findOne('#'+ioName+'_box_three').fill =(((Math.random()) < 0.5) == false) ? '#d4d04e' : '#9f9f91';
debugger;
}
});
}
t = setTimeout(time, 1 * 1000); //开始运行
})
</script>
<script type="text/javascript" src="~/lib//leafer-ui@1.0.0-rc.8/web.js"></script>
<div style ="width:100%;height:100%;">
<div class="layuimini-container" style="width:100%;height:100%;">
<div id = "idmain">
</div>
</div>
</div>
<!-- <div style ="width:100%;height:100%;">
<div class="layuimini-container" style="width:100%;height:100%;">
<div class="layuimini-main">
<div class="layui-row layui-col-space15">
<div class="layui-col-md15">
<iframe style="width:100%;height:95vh" src="http://192.168.110.247:8250/run?reportName=HTTEST/%E6%8A%A5%E8%AD%A6%E6%B1%87%E6%80%BB.cr"></iframe>
</div>
</div>
</div>
</div>
</div> -->

854
HT.Cloud.Web/Areas/PenMeiReportManage/Views/PenMeiJMReport/Index - 副本.cshtml Normal file
View File

@ -0,0 +1,854 @@
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Index.cshtml";
}
@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment env
<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">
<style>
.layui-card {
border: 1px solid #f2f2f2;
border-radius: 5px;
}
.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: #333;
transition: all .3s;
-webkit-transition: all .3s;
}
.layuimini-qiuck-module a cite {
position: relative;
top: 2px;
display: block;
color: #666;
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;
}
.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;
}
.layuimini-notice-extra {
position: absolute;
top: 50%;
margin-top: -8px;
right: 16px;
display: inline-block;
height: 16px;
color: #999;
}
</style>
<script>
layui.use(['layer', 'echarts', 'common'], function () {
var $ = layui.jquery,
layer = layui.layer,
common = layui.common,
echarts = layui.echarts;
wcLoading.close();
const leafer = new LeaferUI.Leafer({
view: 'idmain', // 支持 window 、div、canvas 标签对象， 可使用id字符串(不用加 # 号)
width: 1700, // 不能设置为 0， 否则会变成自动布局
height: 900,
})
const group = new LeaferUI.Group({ x: 0, y: 0, scaleX: 1, scaleY: 1 })
const image_cpu = new LeaferUI.Image({x:100,y:50,url:'/images/S71500.png',draggable:true,height:800})
const box_one = new LeaferUI.Box({ x: 502, y: 50, width:400,height:800, fill: '#707980', draggable: true })
const box_two = new LeaferUI.Box({ x: 904, y: 50, width:300,height:800, fill: '#707980', draggable: true })
const box_three = new LeaferUI.Box({ x: 1206, y: 50, width:300,height:800, fill: '#707980', draggable: true })
const box_four = new LeaferUI.Box({ x: 1508, y: 50, width:300,height:810, fill: '#707980', draggable: true })
for(var linexid = 0;linexid<19;linexid++)
{
var line = new LeaferUI.Line({
x: 0,
y: (linexid+1) * 40,
width: 400,
strokeWidth: 1,
stroke: 'rgb(50,205,121)',
//id: "line" + linexid.toString()
});
box_one.add(line);
}
for(var linexid = 0;linexid<19;linexid++)
{
var line = new LeaferUI.Line({
x: 0,
y: (linexid+1) * 40,
width: 300,
strokeWidth: 1,
stroke: 'rgb(50,205,121)',
//id: "line" + linexid.toString()
});
box_two.add(line);
}
for(var linexid = 0;linexid<19;linexid++)
{
var line = new LeaferUI.Line({
x: 0,
y: (linexid+1) * 40,
width: 300,
strokeWidth: 1,
stroke: 'rgb(50,205,121)',
//id: "line" + linexid.toString()
});
box_three.add(line);
}
var ylinex_sum_four = 0;
var ylinex_array_four = [];
for(var linexid = 0;linexid<18;linexid++)
{
if(linexid == 0)
{
ylinex_sum_four = ylinex_sum_four+35;
ylinex_array_four.push(ylinex_sum_four);
}
else if(linexid == 1)
{
ylinex_sum_four = ylinex_sum_four+35;
ylinex_array_four.push(ylinex_sum_four);
}
else if(linexid == 10)
{
ylinex_sum_four = ylinex_sum_four+20;
ylinex_array_four.push(ylinex_sum_four);
}
else
{
ylinex_sum_four = ylinex_sum_four+45;
ylinex_array_four.push(ylinex_sum_four);
}
}
for(var linexid = 0;linexid<18;linexid++)
{
if(linexid == 0)
{
var line = new LeaferUI.Line({
x: 0,
y:ylinex_array_four[linexid],// ylinex_sum_four + 35,
width: 300,
strokeWidth: 1,
stroke: 'rgb(50,205,121)',
//id: "line" + linexid.toString()
});
box_four.add(line);
}
else if(linexid == 1)
{
var line = new LeaferUI.Line({
x: 0,
y:ylinex_array_four[linexid],// ylinex_sum_four + 35,
width: 300,
strokeWidth: 1,
stroke: 'rgb(50,205,121)',
//id: "line" + linexid.toString()
});
box_four.add(line);
}
else if(linexid == 10)
{
var line = new LeaferUI.Line({
x: 0,
y: ylinex_array_four[linexid],// ylinex_sum_four + 20,
width: 300,
strokeWidth: 1,
stroke: 'rgb(50,205,121)',
//id: "line" + linexid.toString()
});
box_four.add(line);
}
else
{
var line = new LeaferUI.Line({
x: 0,
y: ylinex_array_four[linexid],// ylinex_sum_four + 45,
width: 300,
strokeWidth: 1,
stroke: 'rgb(50,205,121)',
//id: "line" + linexid.toString()
});
box_four.add(line);
}
//box_four.add(line);
}
var spiltline_one = new LeaferUI.Line({
x:200,
width:800,
rotation:90,
stroke:'rgb(50,205,121)',
strokeWidth:1,
dashPattern : [5, 2]
})
box_one.add(spiltline_one);
var spiltline_two = new LeaferUI.Line({
x:150,
width:800,
rotation:90,
stroke:'rgb(50,205,121)',
strokeWidth:1,
dashPattern : [5, 2]
})
box_two.add(spiltline_two);
var spiltline_three = new LeaferUI.Line({
x:150,
width:800,
rotation:90,
stroke:'rgb(50,205,121)',
strokeWidth:1,
dashPattern : [5, 2]
})
box_three.add(spiltline_three);
var spiltline_four = new LeaferUI.Line({
x:150,
width:810,
rotation:90,
stroke:'rgb(50,205,121)',
strokeWidth:1,
dashPattern : [5, 2]
})
box_four.add(spiltline_four);
//box1效果
for(var sid = 0;sid<16;sid++)
{
let y =0 ;
if(sid<8)
{
y = 40*(sid) + 55 + 80;
}
if(sid>=8)
{
y = 40*(sid+1) + 55 + 80;
}
var rect_left = new LeaferUI.Rect({
x:50,
//y:30*(sid) + 40,
y:y,
height:10,
width:20,
fill:'#55557f',
draggable:false,
id:'io'+sid.toString()+'_box_one'
})
var rect_left_text_name = new LeaferUI.Text({
x:5,
y:y,
height:10,
width:40,
fill: '#5aa585',
text:'DO 0.X',
textAlign :'left',
verticalAlign:'middle',
textWrap:'none',
padding:0,
fontSize:12
})
var rect_left_text_description = new LeaferUI.Text({
x:80,
y:y,
height:10,
width:110,
fill: '#20343c',
text:'1罐大卸压阀输出',
textAlign :'left',
verticalAlign:'middle',
textWrap:'none',
padding:0,
fontSize:12
})
//1罐仓流化阀原输出
var rect_right = new LeaferUI.Rect({
x:330,
//y:30*(sid) + 40,
y:y,
height:10,
width:20,
fill:'#55557f',
draggable:false,
id:'io'+(sid+16).toString()+'_box_one'
})
var rect_right_text_name = new LeaferUI.Text({
x:355,
y:y,
height:10,
width:40,
fill: '#5aa585',
text:'DO 0.X',
textAlign :'right',
verticalAlign:'middle',
textWrap:'none',
padding:0,
fontSize:12
})
var rect_right_text_description = new LeaferUI.Text({
x:210,
y:y,
height:10,
width:110,
fill: '#20343c',
text:'1罐大卸压阀输出',
textAlign :'right',
verticalAlign:'middle',
textWrap:'none',
padding:0,
fontSize:12
})
//console.log(rect)
box_one.add(rect_left);
box_one.add(rect_left_text_name);
box_one.add(rect_left_text_description);
box_one.add(rect_right);
box_one.add(rect_right_text_name);
box_one.add(rect_right_text_description);
}
//box2效果
for(var sid = 0;sid<16;sid++)
{
let y =0 ;
if(sid<8)
{
y = 40*(sid) + 55 + 80;
}
if(sid>=8)
{
y = 40*(sid+1) + 55 + 80;
}
var rect_left = new LeaferUI.Rect({
x:10,
//y:30*(sid) + 40,
y:y-5,
height:10,
width:20,
fill:'#55557f',
draggable:false,
id:'io'+sid.toString()+'_box_tow'
})
var rect_left_text_name = new LeaferUI.Text({
x:5,
y:y+10,//+10
height:10,
width:40,
fill: '#5aa585',
text:'DO 0.X',
textAlign :'left',
verticalAlign:'middle',
textWrap:'none',
padding:0,
fontSize:12
})
var rect_left_text_description = new LeaferUI.Text({
x:45,
y:y,
height:10,
width:100,
fill: '#20343c',
text:'1罐大卸压阀输出',
textAlign :'left',
verticalAlign:'middle',
textWrap:'none',
padding:0,
fontSize:12
})
//1罐仓流化阀原输出
var rect_right = new LeaferUI.Rect({
x:270,
//y:30*(sid) + 40,
y:y-5,
height:10,
width:20,
fill:'#55557f',
draggable:false,
id:'io'+(sid+16).toString()+'_box_tow'
})
var rect_right_text_name = new LeaferUI.Text({
x:255,
y:y+10,
height:10,
width:40,
fill: '#5aa585',
text:'DO 0.X',
textAlign :'right',
verticalAlign:'middle',
textWrap:'none',
padding:0,
fontSize:12
})
var rect_right_text_description = new LeaferUI.Text({
x:155,
y:y,
height:10,
width:100,
fill: '#20343c',
text:'1罐大卸压阀输出',
textAlign :'right',
verticalAlign:'middle',
textWrap:'none',
padding:0,
fontSize:12
})
//console.log(rect)
box_two.add(rect_left);
box_two.add(rect_left_text_name);
box_two.add(rect_left_text_description);
box_two.add(rect_right);
box_two.add(rect_right_text_name);
box_two.add(rect_right_text_description);
}
//box3效果
for(var sid = 0;sid<16;sid++)
{
let y =0 ;
if(sid<8)
{
y = 40*(sid) + 55 + 80;
}
if(sid>=8)
{
y = 40*(sid+1) + 55 + 80;
}
var rect_left = new LeaferUI.Rect({
x:10,
//y:30*(sid) + 40,
y:y,
height:10,
width:20,
fill:'#55557f',
draggable:false,
id:'io'+sid.toString()+'_box_three'
})
var rect_left_text_name = new LeaferUI.Text({
x:35,
y:y-5,//+10
//height:10,
width:40,
fill: '#5aa585',
text:'DO 0.X',
textAlign :'left',
verticalAlign:'middle',
textWrap:'none',
padding:0,
fontSize:12
})
var rect_left_text_description = new LeaferUI.Text({
x:35,
y:y+15,
//height:10,
width:110,
fill: '#20343c',
text:'1罐大卸压阀输出',
textAlign :'left',
verticalAlign:'middle',
textWrap:'none',
padding:0,
fontSize:12
})
//1罐仓流化阀原输出
var rect_right = new LeaferUI.Rect({
x:270,
//y:30*(sid) + 40,
y:y,
height:10,
width:20,
fill:'#55557f',
draggable:false,
id:'io'+(sid+16).toString()+'_box_three'
})
var rect_right_text_name = new LeaferUI.Text({
x:225,
y:y-5,
//height:10,
width:40,
fill: '#5aa585',
text:'DO 0.X',
textAlign :'right',
verticalAlign:'middle',
textWrap:'none',
padding:0,
fontSize:12
})
var rect_right_text_description = new LeaferUI.Text({
x:155,
y:y+10,
//height:10,
width:110,
fill: '#20343c',
text:'1罐大卸压阀输出',
textAlign :'right',
verticalAlign:'middle',
textWrap:'none',
padding:0,
fontSize:12
})
//console.log(rect)
box_three.add(rect_left);
box_three.add(rect_left_text_name);
box_three.add(rect_left_text_description);
box_three.add(rect_right);
box_three.add(rect_right_text_name);
box_three.add(rect_right_text_description);
}
var left_top_text_name_four_array = ['模块Slot:','在线状态:'];//左上左下
var right_top_text_name_four_array_old = ['型号：','系统：'];//右上右下
var right_top_text_name_four_array = ['',''];//右上右下
var left_top_text_value_four_array = ['3','在线'];//左上左下
var right_top_text_value_four_array = ['DQ 32xDC 24V/0.5A HF','2#高炉喷煤控制系统'];//右上右下
//box4左侧顶部状态效果
for(var tid = 0;tid<2;tid++)
{
let y = 17 + tid * 35;
var left_top_text_name = new LeaferUI.Text({
x:10,
y:y,//+10
//height:10,
width:40,
fill: '#5aa585',
text:left_top_text_name_four_array[tid],
textAlign :'left',
verticalAlign:'middle',
textWrap:'none',
padding:0,
fontSize:12
})
var left_top_text_name_value = new LeaferUI.Text({
x:65,
y:y,//+10
//height:10,
width:55,
fill: '#5aa585',
text:left_top_text_value_four_array[tid],
textAlign :'left',
verticalAlign:'middle',
textWrap:'none',
padding:0,
fontSize:12
})
//建议取消
var right_top_text_name = new LeaferUI.Text({
x:160,
y:y,//+10
//height:10,
width:20,
fill: '#5aa585',
text:right_top_text_name_four_array[tid],
textAlign :'left',
verticalAlign:'middle',
textWrap:'none',
padding:0,
fontSize:12
})
var right_top_text_name_value = new LeaferUI.Text({
x:160,
y:y,//+10
//height:10,
width:130,
fill: '#5aa585',
text:right_top_text_value_four_array[tid],
textAlign :'left',
verticalAlign:'middle',
textWrap:'none',
padding:0,
fontSize:12
})
box_four.add(left_top_text_name)
//box_four.add(right_top_text_name)
box_four.add(left_top_text_name_value)
box_four.add(right_top_text_name_value)
}
//box4效果
for(var sid = 0;sid<16;sid++)
{
let y =0 ;
if(sid<8)
{
y = 45*(sid) + 90 ;
}
if(sid>=8)
{
y = 45*(sid+1) + 65 ;
}
var rect_left = new LeaferUI.Rect({
x:10,
//y:30*(sid) + 40,
y:y,
height:10,
width:20,
fill:'#55557f',
draggable:false,
id:'io'+sid.toString()+'_box_four'
})
var rect_left_text_name = new LeaferUI.Text({
x:35,
y:y-7,//+10
//height:10,
width:40,
fill: '#5aa585',
text:'DO 0.X',
textAlign :'left',
verticalAlign:'middle',
textWrap:'none',
padding:0,
fontSize:12
})
var rect_left_text_description = new LeaferUI.Text({
x:35,
y:y+12,
//height:10,
width:110,
fill: '#20343c',
text:'1罐大卸压阀输出',
textAlign :'left',
verticalAlign:'middle',
textWrap:'none',
padding:0,
fontSize:12
})
//1罐仓流化阀原输出
var rect_right = new LeaferUI.Rect({
x:270,
//y:30*(sid) + 40,
y:y,
height:10,
width:20,
fill:'#55557f',
draggable:false,
id:'io'+(sid+16).toString()+'_box_four'
})
var rect_right_text_name = new LeaferUI.Text({
x:225,
y:y-7,
//height:10,
width:40,
fill: '#5aa585',
text:'DO 0.X',
textAlign :'right',
verticalAlign:'middle',
textWrap:'none',
padding:0,
fontSize:12
})
var rect_right_text_description = new LeaferUI.Text({
x:155,
y:y+12,
//height:10,
width:110,
fill: '#20343c',
text:'1罐大卸压阀输出',
textAlign :'right',
verticalAlign:'middle',
textWrap:'none',
padding:0,
fontSize:12
})
//console.log(rect)
box_four.add(rect_left);
box_four.add(rect_left_text_name);
box_four.add(rect_left_text_description);
box_four.add(rect_right);
box_four.add(rect_right_text_name);
box_four.add(rect_right_text_description);
}
leafer.add(group)
// group.add(image_cpu)
//group.add(box_one)
// group.add(box_two)
//group.add(box_three)
group.add(box_four)
//box.add(rect2)
var t = null;
function time() {
clearTimeout(t); //清除定时器
UpdataChart()
t = setTimeout(time, 1 * 1000); //设定定时器，循环运行
}
async function UpdataChart() {
myajax = await $.ajax({
url: "/PenMeiReportManage/PenMeiJMReport/GetRealIOState",
type: "Get",
dataType: "json",
// traditional: true,//这里设置为true
// data: { charts_TagNames: SelectTagNamelist },
success: function (redata) {
}
});
$.when(myajax).done(function (redata) {
debugger;
for(var ioName in redata)
{
leafer.findOne('#'+ioName+'_box_one').fill =(redata[ioName] == '1') ? '#d4d04e' : '#9f9f91';
leafer.findOne('#'+ioName+'_box_tow').fill =(redata[ioName] != '1') ? '#d4d04e' : '#9f9f91';
leafer.findOne('#'+ioName+'_box_three').fill =(((Math.random()) < 0.5) == false) ? '#d4d04e' : '#9f9f91';
debugger;
}
});
}
t = setTimeout(time, 1 * 1000); //开始运行
})
</script>
<script type="text/javascript" src="~/lib//leafer-ui@1.0.0-rc.8/web.js"></script>
<div style ="width:100%;height:100%;">
<div class="layuimini-container" style="width:100%;height:100%;">
<div id = "idmain">
</div>
</div>
</div>
<!-- <div style ="width:100%;height:100%;">
<div class="layuimini-container" style="width:100%;height:100%;">
<div class="layuimini-main">
<div class="layui-row layui-col-space15">
<div class="layui-col-md15">
<iframe style="width:100%;height:95vh" src="http://192.168.110.247:8250/run?reportName=HTTEST/%E6%8A%A5%E8%AD%A6%E6%B1%87%E6%80%BB.cr"></iframe>
</div>
</div>
</div>
</div>
</div> -->

1265
HT.Cloud.Web/Areas/PenMeiReportManage/Views/PenMeiJMReport/Index - 样式完成待改函数.cshtml Normal file
View File

File diff suppressed because it is too large Load Diff

1180
HT.Cloud.Web/Areas/PenMeiReportManage/Views/PenMeiJMReport/Index.cshtml
View File

File diff suppressed because it is too large Load Diff

BIN
HT.Cloud.Web/wwwroot/images/S71500.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.3 KiB