1266 lines
34 KiB
Plaintext
1266 lines
34 KiB
Plaintext
@{
|
||
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 width_iobox_16bit = 200;
|
||
const width_iobox_8bit = 200;
|
||
const height_iobox = 810;
|
||
|
||
const fill_iobox = '#8d98a3';
|
||
const stroke_iobox = 'rgb(73, 77, 82)';;
|
||
const stroke_iobox_line = 'rgb(66, 68, 74)';
|
||
const stroke_iobox_spiltline = 'rgb(71, 75, 88)';
|
||
const fill_top_name = '#f1f4f6';
|
||
const fill_top_name_value = '#f1f4f6';
|
||
const fill_rect = '#a4a9ab';
|
||
const fill_rect_text_name = '#e5e9ec';
|
||
const fill_rect_text_description = '#f3f6f8';
|
||
const fill_rect_io_on = '#aaff00';
|
||
const fill_rect_io_off = '#a3a6a9';
|
||
|
||
|
||
|
||
const name_32bit = ['DQ0.0','DQ0.1','DQ0.2','DQ0.3','DQ0.4','DQ0.5','DQ0.6','DQ0.7','DQ1.0','DQ1.1','DQ1.2','DQ1.3','DQ1.4','DQ1.5','DQ1.6','DQ1.7','DQ2.0','DQ2.1','DQ2.2','DQ2.3','DQ2.4','DQ2.5','DQ2.6','DQ2.7','DQ3.0','DQ3.1','DQ3.2','DQ3.3','DQ3.4','DQ3.5','DQ3.6','DQ3.7',];
|
||
const name_16bit = ['DQ4.0','DQ4.1','DQ4.2','DQ4.3','DQ4.4','DQ4.5','DQ4.6','DQ4.7','DQ5.0','DQ5.1','DQ5.2','DQ5.3','DQ5.4','DQ5.5','DQ5.6','DQ5.7'];
|
||
const name_8bit = ['DQ6.0','DQ6.1','DQ6.2','DQ6.3','DQ6.4','DQ6.5','DQ6.6','DQ6.7'];
|
||
|
||
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 top_text_value_array_32bit = ['DQ 32xDC 24V/0.5A HF', 'Slot: 1', '在线'];//右上右下
|
||
|
||
const left_top_text_name_four_array_16bit = ['模块Slot：','在线状态：'];//左上左下
|
||
const right_top_text_name_four_array_16bit_old = ['型号：','系统：'];//右上右下
|
||
const right_top_text_name_four_array_16bit = ['',''];//右上右下
|
||
const left_top_text_value_four_array_16bit = ['3','在线'];//左上左下
|
||
const right_top_text_value_four_array_16bit = ['DQ 16xDC 24V/0.5A HF','3#高炉喷煤控制系统'];//右上右下
|
||
const top_text_value_array_16bit = ['DQ 16xDC 24V/0.5A HF', 'Slot: 2', '在线'];//右上右下
|
||
|
||
const left_top_text_name_four_array_8bit = ['模块Slot：','在线状态：'];//左上左下
|
||
const right_top_text_name_four_array_8bit_old = ['型号：','系统：'];//右上右下
|
||
const right_top_text_name_four_array_8bit = ['',''];//右上右下
|
||
const left_top_text_value_four_array_8bit = ['3','在线'];//左上左下
|
||
const right_top_text_value_four_array_8bit = ['DQ 8xDC 24V/0.5A HF','4#高炉喷煤控制系统'];//右上右下
|
||
const top_text_value_array_8bit = ['DQ 8xDC 24V/0.5A HF', 'Slot: 3', '在线'];//右上右下
|
||
|
||
//32IO配置项
|
||
const top_row_height_32bit = 25;
|
||
const separator_32bit = 15;
|
||
const io_row_height_32bit = 45;
|
||
|
||
const io_row_y_offset_32bit = 13;
|
||
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 rect_height_32bit = 10;
|
||
|
||
const rect_top_y_offset_32bit = 95;
|
||
const rect_bottom_y_offset_32bit = 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;
|
||
|
||
|
||
//16IO配置项
|
||
const top_row_height_16bit = 25;
|
||
const separator_16bit = 15;
|
||
const io_row_height_16bit = 45;
|
||
|
||
const io_row_y_offset_16bit = 13;
|
||
const io_row_left_x_name_16bit = 10;
|
||
const io_row_left_x_value_16bit = 65;
|
||
const io_row_right_x_name_16bit = 160;
|
||
const io_row_left_width_name_16bit = 40;
|
||
const io_row_left_width_value_16bit = 55;
|
||
const io_row_right_width_name_16bit = 20;
|
||
const io_row_right_width_value_16bit = 130;
|
||
|
||
|
||
|
||
const rect_height_16bit = 10;
|
||
|
||
const rect_top_y_offset_16bit = 95;
|
||
const rect_bottom_y_offset_16bit = 65;
|
||
|
||
const io_rect_left_x_16bit = 10;
|
||
const io_rect_name_left_x_16bit = 35;
|
||
const io_rect_description_left_x_16bit = 80;
|
||
const io_rect_right_x_16bit = 270;
|
||
const io_rect_name_right_x_16bit = 225;
|
||
const io_rect_description_right_x_16bit = 155;
|
||
|
||
const io_rect_left_y_offset_16bit = 0;
|
||
const io_rect_name_left_y_offset_16bit = 5;
|
||
const io_rect_description_left_y_offset_16bit = -4;
|
||
const io_rect_right_y_offset_16bit = 0;
|
||
const io_rect_name_right_y_offset_16bit = 0;
|
||
const io_rect_description_right_y_offset_16bit = 0;
|
||
|
||
const io_rect_left_width_16bit = 20;
|
||
const io_rect_name_left_width_16bit = 40;
|
||
const io_rect_description_left_width_16bit = 110;
|
||
const io_rect_right_width_16bit = 20;
|
||
const io_rect_name_right_width_16bit = 40;
|
||
const io_rect_description_right_width_16bit = 110;
|
||
|
||
//8IO配置项
|
||
const top_row_height_8bit = 25;
|
||
const separator_8bit = 15;
|
||
const io_row_height_8bit = 45;
|
||
|
||
const io_row_y_offset_8bit = 13;
|
||
const io_row_left_x_name_8bit = 10;
|
||
const io_row_left_x_value_8bit = 65;
|
||
const io_row_right_x_name_8bit = 160;
|
||
const io_row_left_width_name_8bit = 40;
|
||
const io_row_left_width_value_8bit = 55;
|
||
const io_row_right_width_name_8bit = 20;
|
||
const io_row_right_width_value_8bit = 130;
|
||
|
||
|
||
|
||
const rect_height_8bit = 10;
|
||
|
||
const rect_top_y_offset_8bit = 95;
|
||
const rect_bottom_y_offset_8bit = 65;
|
||
|
||
const io_rect_left_x_8bit = 10;
|
||
const io_rect_name_left_x_8bit = 35;
|
||
const io_rect_description_left_x_8bit = 80;
|
||
const io_rect_right_x_8bit = 270;
|
||
const io_rect_name_right_x_8bit = 225;
|
||
const io_rect_description_right_x_8bit = 155;
|
||
|
||
const io_rect_left_y_offset_8bit = 0;
|
||
const io_rect_name_left_y_offset_8bit = 5;
|
||
const io_rect_description_left_y_offset_8bit = -4;
|
||
const io_rect_right_y_offset_8bit = 0;
|
||
const io_rect_name_right_y_offset_8bit = 0;
|
||
const io_rect_description_right_y_offset_8bit = 0;
|
||
|
||
const io_rect_left_width_8bit = 20;
|
||
const io_rect_name_left_width_8bit = 40;
|
||
const io_rect_description_left_width_8bit = 110;
|
||
const io_rect_right_width_8bit = 20;
|
||
const io_rect_name_right_width_8bit = 40;
|
||
const io_rect_description_right_width_8bit = 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: fill_iobox,
|
||
draggable: true,
|
||
strokeWidth: 1,
|
||
stroke: stroke_iobox,
|
||
})
|
||
|
||
var ylinex_sum_four = 0;
|
||
var ylinex_array_four = [];
|
||
for(var linexid = 0;linexid<19;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 == 2)
|
||
{
|
||
ylinex_sum_four = ylinex_sum_four + top_row_height_32bit;
|
||
ylinex_array_four.push(ylinex_sum_four);
|
||
}
|
||
else if(linexid ==11)
|
||
{
|
||
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<19;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: stroke_iobox_line,
|
||
//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: stroke_iobox_line,
|
||
//id: "line" + linexid.toString()
|
||
});
|
||
box_32bit.add(line);
|
||
}
|
||
else if (linexid == 2) {
|
||
var line = new LeaferUI.Line({
|
||
x: 0,
|
||
y: ylinex_array_four[linexid],// ylinex_sum_four + 35,
|
||
width: width_iobox,
|
||
strokeWidth: 1,
|
||
stroke: stroke_iobox_line,
|
||
//id: "line" + linexid.toString()
|
||
});
|
||
box_32bit.add(line);
|
||
}
|
||
else if(linexid == 11)
|
||
{
|
||
var line = new LeaferUI.Line({
|
||
x: 0,
|
||
y: ylinex_array_four[linexid],// ylinex_sum_four + 20,
|
||
width: width_iobox,
|
||
strokeWidth: 1,
|
||
stroke: stroke_iobox_line,
|
||
//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: stroke_iobox_line,
|
||
//id: "line" + linexid.toString()
|
||
});
|
||
box_32bit.add(line);
|
||
}
|
||
//box_32bit.add(line);
|
||
}
|
||
|
||
var spiltline_four = new LeaferUI.Line({
|
||
x:width_iobox/2,
|
||
y: top_row_height_32bit*3,
|
||
width: height_iobox - top_row_height_32bit * 3,
|
||
rotation:90,
|
||
stroke:stroke_iobox_spiltline,
|
||
strokeWidth:1,
|
||
dashPattern : [5, 2]
|
||
})
|
||
box_32bit.add(spiltline_four);
|
||
|
||
|
||
//box4左侧顶部状态效果
|
||
for(var tid = 0;tid<3;tid++)
|
||
{
|
||
let y = io_row_y_offset_32bit + tid * top_row_height_32bit;
|
||
if (tid < 2)
|
||
{
|
||
var top_text_value = new LeaferUI.Text({
|
||
x: io_row_left_x_name_32bit,
|
||
y: y,//+10
|
||
//height:10,
|
||
width: io_row_left_width_name_32bit,
|
||
fill: fill_top_name,
|
||
text: top_text_value_array_32bit[tid],
|
||
textAlign: 'left',
|
||
verticalAlign: 'middle',
|
||
textWrap: 'none',
|
||
padding: 0,
|
||
fontSize: 12
|
||
})
|
||
box_32bit.add(top_text_value)
|
||
}
|
||
|
||
if (tid == 2)
|
||
{
|
||
var rect = new LeaferUI.Rect({
|
||
x: io_row_left_x_name_32bit,
|
||
y: y - 5 ,
|
||
height: rect_height_32bit,
|
||
width: io_rect_left_width_32bit,
|
||
fill: fill_rect,
|
||
draggable: false,
|
||
id: 'Slot_' + top_text_value_array_32bit[2]+'_Online'
|
||
})
|
||
box_32bit.add(rect)
|
||
var top_text_value = new LeaferUI.Text({
|
||
x: io_row_left_x_name_32bit + io_rect_left_width_32bit + 15,
|
||
y: y,//+10
|
||
//height:10,
|
||
width: io_row_left_width_name_32bit,
|
||
fill: fill_top_name,
|
||
text: top_text_value_array_32bit[tid],
|
||
textAlign: 'left',
|
||
verticalAlign: 'middle',
|
||
textWrap: 'none',
|
||
padding: 0,
|
||
fontSize: 12
|
||
})
|
||
box_32bit.add(top_text_value)
|
||
}
|
||
|
||
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: fill_top_name,
|
||
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: fill_top_name_value,
|
||
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: fill_top_name,
|
||
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: fill_top_name_value,
|
||
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_32bit ;
|
||
}
|
||
if(sid>=8)
|
||
{
|
||
y = io_row_height_32bit*(sid+1) + rect_bottom_y_offset_32bit ;
|
||
}
|
||
var rect_left = new LeaferUI.Rect({
|
||
x:io_rect_left_x_32bit,
|
||
y:y+io_rect_left_y_offset_32bit,
|
||
height:rect_height_32bit,
|
||
width:io_rect_left_width_32bit,
|
||
fill:fill_rect,
|
||
draggable:false,
|
||
id:name_32bit[sid]
|
||
})
|
||
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: fill_rect_text_name,
|
||
text:name_32bit[sid],
|
||
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: fill_rect_text_description,
|
||
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_32bit,
|
||
width:io_rect_right_width_32bit,
|
||
fill:fill_rect,
|
||
draggable:false,
|
||
id:name_32bit[sid+16]
|
||
})
|
||
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: fill_rect_text_name,
|
||
text:name_32bit[sid+16],
|
||
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: fill_rect_text_description,
|
||
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);
|
||
}
|
||
|
||
|
||
//16IO生成
|
||
const box_16bit = new LeaferUI.Box({
|
||
x: 704,
|
||
y: 50,
|
||
width: width_iobox_16bit,
|
||
height: height_iobox,
|
||
fill: fill_iobox,
|
||
draggable: true ,
|
||
strokeWidth: 1,
|
||
stroke: stroke_iobox,
|
||
})
|
||
|
||
var ylinex_sum_four = 0;
|
||
var ylinex_array_four = [];
|
||
for(var linexid = 0;linexid<19;linexid++)
|
||
{
|
||
if(linexid == 0)
|
||
{
|
||
ylinex_sum_four = ylinex_sum_four + top_row_height_16bit;
|
||
ylinex_array_four.push(ylinex_sum_four);
|
||
}
|
||
else if(linexid == 1)
|
||
{
|
||
ylinex_sum_four = ylinex_sum_four + top_row_height_16bit;
|
||
ylinex_array_four.push(ylinex_sum_four);
|
||
}
|
||
else if (linexid == 2)
|
||
{
|
||
ylinex_sum_four = ylinex_sum_four + top_row_height_16bit;
|
||
ylinex_array_four.push(ylinex_sum_four);
|
||
}
|
||
else if(linexid == 11)
|
||
{
|
||
ylinex_sum_four = ylinex_sum_four + separator_16bit;
|
||
ylinex_array_four.push(ylinex_sum_four);
|
||
}
|
||
else
|
||
{
|
||
ylinex_sum_four = ylinex_sum_four + io_row_height_16bit;
|
||
ylinex_array_four.push(ylinex_sum_four);
|
||
}
|
||
}
|
||
for(var linexid = 0;linexid<19;linexid++)
|
||
{
|
||
if(linexid == 0)
|
||
{
|
||
var line = new LeaferUI.Line({
|
||
x: 0,
|
||
y:ylinex_array_four[linexid],// ylinex_sum_four + 35,
|
||
width: width_iobox_16bit,
|
||
strokeWidth: 1,
|
||
stroke: stroke_iobox_line,
|
||
//id: "line" + linexid.toString()
|
||
});
|
||
box_16bit.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_16bit,
|
||
strokeWidth: 1,
|
||
stroke: stroke_iobox_line,
|
||
//id: "line" + linexid.toString()
|
||
});
|
||
box_16bit.add(line);
|
||
}
|
||
else if (linexid == 2)
|
||
{
|
||
var line = new LeaferUI.Line({
|
||
x: 0,
|
||
y: ylinex_array_four[linexid],// ylinex_sum_four + 35,
|
||
width: width_iobox_16bit,
|
||
strokeWidth: 1,
|
||
stroke: stroke_iobox_line,
|
||
//id: "line" + linexid.toString()
|
||
});
|
||
box_16bit.add(line);
|
||
}
|
||
else if(linexid == 11)
|
||
{
|
||
var line = new LeaferUI.Line({
|
||
x: 0,
|
||
y: ylinex_array_four[linexid],// ylinex_sum_four + 20,
|
||
width: width_iobox_16bit,
|
||
strokeWidth: 1,
|
||
stroke: stroke_iobox_line,
|
||
//id: "line" + linexid.toString()
|
||
});
|
||
box_16bit.add(line);
|
||
}
|
||
else
|
||
{
|
||
var line = new LeaferUI.Line({
|
||
x: 0,
|
||
y: ylinex_array_four[linexid],// ylinex_sum_four + 45,
|
||
width: width_iobox_16bit,
|
||
strokeWidth: 1,
|
||
stroke: stroke_iobox_line,
|
||
//id: "line" + linexid.toString()
|
||
});
|
||
box_16bit.add(line);
|
||
}
|
||
}
|
||
|
||
var spiltline_four = new LeaferUI.Line({
|
||
x:width_iobox_16bit/2,
|
||
width:top_row_height_16bit*2,
|
||
rotation:90,
|
||
stroke:stroke_iobox_spiltline,
|
||
strokeWidth:1,
|
||
dashPattern : [5, 2]
|
||
})
|
||
// box_16bit.add(spiltline_four);
|
||
|
||
|
||
//box4左侧顶部状态效果
|
||
for(var tid = 0;tid<3;tid++)
|
||
{
|
||
let y = io_row_y_offset_16bit + tid * top_row_height_16bit;
|
||
if (tid < 2)
|
||
{
|
||
|
||
var top_text_value = new LeaferUI.Text({
|
||
x: io_row_left_x_name_16bit,
|
||
y: y,//+10
|
||
//height:10,
|
||
width: io_row_left_width_name_16bit,
|
||
fill: fill_top_name,
|
||
text: top_text_value_array_16bit[tid],
|
||
textAlign: 'left',
|
||
verticalAlign: 'middle',
|
||
textWrap: 'none',
|
||
padding: 0,
|
||
fontSize: 12
|
||
})
|
||
box_16bit.add(top_text_value)
|
||
}
|
||
if (tid == 2)
|
||
{
|
||
var rect = new LeaferUI.Rect({
|
||
x: io_row_left_x_name_16bit,
|
||
y: y - 5,
|
||
height: rect_height_16bit,
|
||
width: io_rect_left_width_16bit,
|
||
fill: fill_rect,
|
||
draggable: false,
|
||
id: 'Slot_' + top_text_value_array_16bit[2] + '_Online'
|
||
})
|
||
box_16bit.add(rect)
|
||
var top_text_value = new LeaferUI.Text({
|
||
x: io_row_left_x_name_16bit + io_rect_left_width_16bit + 15,
|
||
y: y,//+10
|
||
//height:10,
|
||
width: io_row_left_width_name_16bit,
|
||
fill: fill_top_name,
|
||
text: top_text_value_array_16bit[tid],
|
||
textAlign: 'left',
|
||
verticalAlign: 'middle',
|
||
textWrap: 'none',
|
||
padding: 0,
|
||
fontSize: 12
|
||
})
|
||
box_16bit.add(top_text_value)
|
||
}
|
||
|
||
|
||
var left_top_text_name_value = new LeaferUI.Text({
|
||
x:io_row_left_x_value_16bit,
|
||
y:y,//+10
|
||
//height:10,
|
||
width:io_row_left_width_value_16bit,
|
||
fill: fill_top_name_value,
|
||
text:left_top_text_value_four_array_16bit[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_16bit,
|
||
y:y,//+10
|
||
//height:10,
|
||
width:io_row_right_width_name_16bit,
|
||
fill: fill_top_name,
|
||
text:right_top_text_name_four_array_16bit[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_16bit,
|
||
y:y,//+10
|
||
//height:10,
|
||
width:io_row_right_width_value_16bit,
|
||
fill: fill_top_name_value,
|
||
text:right_top_text_value_four_array_16bit[tid],
|
||
textAlign :'left',
|
||
verticalAlign:'middle',
|
||
textWrap:'none',
|
||
padding:0,
|
||
fontSize:12
|
||
})
|
||
// box_16bit.add(left_top_text_name)
|
||
// //box_16bit.add(right_top_text_name)
|
||
// box_16bit.add(left_top_text_name_value)
|
||
// box_16bit.add(right_top_text_name_value)
|
||
}
|
||
|
||
|
||
//box4效果
|
||
for(var sid = 0;sid<16;sid++)
|
||
{
|
||
let y =0 ;
|
||
if(sid<8)
|
||
{
|
||
y = io_row_height_16bit*(sid) + rect_top_y_offset_16bit ;
|
||
}
|
||
if(sid>=8)
|
||
{
|
||
y = io_row_height_16bit*(sid+1) + rect_bottom_y_offset_16bit ;
|
||
}
|
||
var rect_left = new LeaferUI.Rect({
|
||
x:io_rect_left_x_16bit,
|
||
y:y+io_rect_left_y_offset_16bit,
|
||
height:rect_height_16bit,
|
||
width:io_rect_left_width_16bit,
|
||
fill:fill_rect,
|
||
draggable:false,
|
||
id:name_16bit[sid]
|
||
})
|
||
var rect_left_text_name = new LeaferUI.Text({
|
||
x:io_rect_name_left_x_16bit,
|
||
y:y+io_rect_name_left_y_offset_16bit,
|
||
width:io_rect_name_left_width_16bit,
|
||
fill: fill_rect_text_name,
|
||
text:name_16bit[sid],
|
||
textAlign :'left',
|
||
verticalAlign:'middle',
|
||
textWrap:'none',
|
||
padding:0,
|
||
fontSize:12
|
||
})
|
||
var rect_left_text_description = new LeaferUI.Text({
|
||
x:io_rect_description_left_x_16bit,
|
||
y:y+io_rect_description_left_y_offset_16bit,
|
||
width:io_rect_description_left_width_16bit,
|
||
fill: fill_rect_text_description,
|
||
text:'1罐大卸压阀输出',
|
||
textAlign :'left',
|
||
verticalAlign:'middle',
|
||
textWrap:'none',
|
||
textOverflow: ' ',
|
||
padding:0,
|
||
fontSize:12
|
||
})
|
||
|
||
box_16bit.add(rect_left);
|
||
box_16bit.add(rect_left_text_name);
|
||
box_16bit.add(rect_left_text_description);
|
||
}
|
||
|
||
//8IO生成
|
||
const box_8bit = new LeaferUI.Box({
|
||
x: 1006,
|
||
y: 50,
|
||
width:width_iobox_8bit,
|
||
height:height_iobox,
|
||
fill: fill_iobox,
|
||
draggable: true,
|
||
strokeWidth: 1,
|
||
stroke: stroke_iobox,
|
||
})
|
||
|
||
var ylinex_sum_four = 0;
|
||
var ylinex_array_four = [];
|
||
for(var linexid = 0;linexid<19;linexid++)
|
||
{
|
||
if(linexid == 0)
|
||
{
|
||
ylinex_sum_four = ylinex_sum_four + top_row_height_8bit;
|
||
ylinex_array_four.push(ylinex_sum_four);
|
||
}
|
||
else if(linexid == 1)
|
||
{
|
||
ylinex_sum_four = ylinex_sum_four + top_row_height_8bit;
|
||
ylinex_array_four.push(ylinex_sum_four);
|
||
}
|
||
else if (linexid == 2)
|
||
{
|
||
ylinex_sum_four = ylinex_sum_four + top_row_height_8bit;
|
||
ylinex_array_four.push(ylinex_sum_four);
|
||
}
|
||
else if(linexid == 11)
|
||
{
|
||
ylinex_sum_four = ylinex_sum_four + separator_8bit;
|
||
ylinex_array_four.push(ylinex_sum_four);
|
||
}
|
||
else
|
||
{
|
||
ylinex_sum_four = ylinex_sum_four + io_row_height_8bit;
|
||
ylinex_array_four.push(ylinex_sum_four);
|
||
}
|
||
}
|
||
for(var linexid = 0;linexid<19;linexid++)
|
||
{
|
||
if(linexid == 0)
|
||
{
|
||
var line = new LeaferUI.Line({
|
||
x: 0,
|
||
y:ylinex_array_four[linexid],// ylinex_sum_four + 35,
|
||
width: width_iobox_8bit,
|
||
strokeWidth: 1,
|
||
stroke: stroke_iobox_line,
|
||
//id: "line" + linexid.toString()
|
||
});
|
||
box_8bit.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_8bit,
|
||
strokeWidth: 1,
|
||
stroke: stroke_iobox_line,
|
||
//id: "line" + linexid.toString()
|
||
});
|
||
box_8bit.add(line);
|
||
}
|
||
else if (linexid == 2)
|
||
{
|
||
var line = new LeaferUI.Line({
|
||
x: 0,
|
||
y: ylinex_array_four[linexid],// ylinex_sum_four + 35,
|
||
width: width_iobox_8bit,
|
||
strokeWidth: 1,
|
||
stroke: stroke_iobox_line,
|
||
//id: "line" + linexid.toString()
|
||
});
|
||
box_8bit.add(line);
|
||
}
|
||
else if(linexid == 11)
|
||
{
|
||
var line = new LeaferUI.Line({
|
||
x: 0,
|
||
y: ylinex_array_four[linexid],// ylinex_sum_four + 20,
|
||
width: width_iobox_8bit,
|
||
strokeWidth: 1,
|
||
stroke: stroke_iobox_line,
|
||
//id: "line" + linexid.toString()
|
||
});
|
||
box_8bit.add(line);
|
||
}
|
||
else
|
||
{
|
||
var line = new LeaferUI.Line({
|
||
x: 0,
|
||
y: ylinex_array_four[linexid],// ylinex_sum_four + 45,
|
||
width: width_iobox_8bit,
|
||
strokeWidth: 1,
|
||
stroke: stroke_iobox_line,
|
||
//id: "line" + linexid.toString()
|
||
});
|
||
box_8bit.add(line);
|
||
}
|
||
}
|
||
|
||
var spiltline_four = new LeaferUI.Line({
|
||
x:width_iobox_8bit/2,
|
||
width:top_row_height_8bit*2,
|
||
rotation:90,
|
||
stroke:stroke_iobox_spiltline,
|
||
strokeWidth:1,
|
||
dashPattern : [5, 2]
|
||
})
|
||
// box_8bit.add(spiltline_four);
|
||
|
||
|
||
//box4左侧顶部状态效果
|
||
for(var tid = 0;tid<3;tid++)
|
||
{
|
||
let y = io_row_y_offset_8bit + tid * top_row_height_8bit;
|
||
if (tid < 2)
|
||
{
|
||
|
||
var top_text_value = new LeaferUI.Text({
|
||
x: io_row_left_x_name_8bit,
|
||
y: y,//+10
|
||
//height:10,
|
||
width: io_row_left_width_name_8bit,
|
||
fill: fill_top_name,
|
||
text: top_text_value_array_8bit[tid],
|
||
textAlign: 'left',
|
||
verticalAlign: 'middle',
|
||
textWrap: 'none',
|
||
padding: 0,
|
||
fontSize: 12
|
||
})
|
||
box_8bit.add(top_text_value);
|
||
}
|
||
if (tid == 2)
|
||
{
|
||
var rect = new LeaferUI.Rect({
|
||
x: io_row_left_x_name_8bit,
|
||
y: y - 5,
|
||
height: rect_height_8bit,
|
||
width: io_rect_left_width_8bit,
|
||
fill: fill_rect,
|
||
draggable: false,
|
||
id: 'Slot_' + top_text_value_array_8bit[2] + '_Online'
|
||
})
|
||
box_8bit.add(rect)
|
||
var top_text_value = new LeaferUI.Text({
|
||
x: io_row_left_x_name_8bit + io_rect_left_width_8bit + 15,
|
||
y: y,//+10
|
||
//height:10,
|
||
width: io_row_left_width_name_8bit,
|
||
fill: fill_top_name,
|
||
text: top_text_value_array_8bit[tid],
|
||
textAlign: 'left',
|
||
verticalAlign: 'middle',
|
||
textWrap: 'none',
|
||
padding: 0,
|
||
fontSize: 12
|
||
})
|
||
box_8bit.add(top_text_value)
|
||
}
|
||
|
||
var left_top_text_name_value = new LeaferUI.Text({
|
||
x:io_row_left_x_value_8bit,
|
||
y:y,//+10
|
||
//height:10,
|
||
width:io_row_left_width_value_8bit,
|
||
fill: fill_top_name_value,
|
||
text:left_top_text_value_four_array_8bit[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_8bit,
|
||
y:y,//+10
|
||
//height:10,
|
||
width:io_row_right_width_name_8bit,
|
||
fill: fill_top_name,
|
||
text:right_top_text_name_four_array_8bit[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_8bit,
|
||
y:y,//+10
|
||
//height:10,
|
||
width:io_row_right_width_value_8bit,
|
||
fill: fill_top_name_value,
|
||
text:right_top_text_value_four_array_8bit[tid],
|
||
textAlign :'left',
|
||
verticalAlign:'middle',
|
||
textWrap:'none',
|
||
padding:0,
|
||
fontSize:12
|
||
})
|
||
// box_8bit.add(left_top_text_name)
|
||
// //box_8bit.add(right_top_text_name)
|
||
// box_8bit.add(left_top_text_name_value)
|
||
// box_8bit.add(right_top_text_name_value)
|
||
}
|
||
|
||
|
||
//box4效果
|
||
for(var sid = 0;sid<8;sid++)
|
||
{
|
||
let y =0 ;
|
||
if(sid<8)
|
||
{
|
||
y = io_row_height_8bit*(sid) + rect_top_y_offset_8bit ;
|
||
}
|
||
if(sid>=8)
|
||
{
|
||
y = io_row_height_8bit*(sid+1) + rect_bottom_y_offset_8bit ;
|
||
}
|
||
var rect_left = new LeaferUI.Rect({
|
||
x:io_rect_left_x_8bit,
|
||
y:y+io_rect_left_y_offset_8bit,
|
||
height:rect_height_8bit,
|
||
width:io_rect_left_width_8bit,
|
||
fill:fill_rect,
|
||
draggable:false,
|
||
id:name_8bit[sid]
|
||
})
|
||
var rect_left_text_name = new LeaferUI.Text({
|
||
x:io_rect_name_left_x_8bit,
|
||
y:y+io_rect_name_left_y_offset_8bit,
|
||
width:io_rect_name_left_width_8bit,
|
||
fill: fill_rect_text_name,
|
||
text:name_8bit[sid],
|
||
textAlign :'left',
|
||
verticalAlign:'middle',
|
||
textWrap:'none',
|
||
padding:0,
|
||
fontSize:12
|
||
})
|
||
var rect_left_text_description = new LeaferUI.Text({
|
||
x:io_rect_description_left_x_8bit,
|
||
y:y+io_rect_description_left_y_offset_8bit,
|
||
width:io_rect_description_left_width_8bit/3,
|
||
fill: fill_rect_text_description,
|
||
text: '1罐大卸压阀输出1输出2输出3输出4输出5',
|
||
textAlign :'left',
|
||
verticalAlign:'middle',
|
||
textWrap: 'none',
|
||
textOverflow: ' ',
|
||
padding:0,
|
||
fontSize:12
|
||
})
|
||
|
||
box_8bit.add(rect_left);
|
||
box_8bit.add(rect_left_text_name);
|
||
box_8bit.add(rect_left_text_description);
|
||
}
|
||
|
||
leafer.add(group)
|
||
group.add(box_32bit)
|
||
group.add(box_16bit)
|
||
group.add(box_8bit)
|
||
|
||
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.replace('_','.')).fill =(redata[ioName] == '1') ? fill_rect_io_on : fill_rect_io_off;
|
||
// 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> -->
|