Files
HTCloud/HT.Cloud.Web/Areas/PenMeiReportManage/Views/PenMeiJMReportNew/Index - xxback.cshtml
2024-09-03 14:16:18 +08:00

855 lines
19 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.

@{
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> -->