diff --git a/HT.Cloud.Domain/Entity/SystemSecurity/RealTimeIOGroupEntity.cs b/HT.Cloud.Domain/Entity/SystemSecurity/RealTimeIOGroupEntity.cs
new file mode 100644
index 0000000..a543360
--- /dev/null
+++ b/HT.Cloud.Domain/Entity/SystemSecurity/RealTimeIOGroupEntity.cs
@@ -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; }
+    }
+}
diff --git a/HT.Cloud.Domain/Entity/SystemSecurity/RealTimeIOInfoEntity.cs b/HT.Cloud.Domain/Entity/SystemSecurity/RealTimeIOInfoEntity.cs
new file mode 100644
index 0000000..822ab68
--- /dev/null
+++ b/HT.Cloud.Domain/Entity/SystemSecurity/RealTimeIOInfoEntity.cs
@@ -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; }
+    }
+}
diff --git a/HT.Cloud.Service/SystemSecurity/RealTimeIOState.cs b/HT.Cloud.Service/SystemSecurity/RealTimeIOStateService.cs
similarity index 70%
rename from HT.Cloud.Service/SystemSecurity/RealTimeIOState.cs
rename to HT.Cloud.Service/SystemSecurity/RealTimeIOStateService.cs
index dd4af3a..67e7603 100644
--- a/HT.Cloud.Service/SystemSecurity/RealTimeIOState.cs
+++ b/HT.Cloud.Service/SystemSecurity/RealTimeIOStateService.cs
@@ -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;
diff --git a/HT.Cloud.Web/Areas/PenMeiReportManage/Controllers/PenMeiJMReportController.cs b/HT.Cloud.Web/Areas/PenMeiReportManage/Controllers/PenMeiJMReportController.cs
index 6fe2132..d9291d5 100644
--- a/HT.Cloud.Web/Areas/PenMeiReportManage/Controllers/PenMeiJMReportController.cs
+++ b/HT.Cloud.Web/Areas/PenMeiReportManage/Controllers/PenMeiJMReportController.cs
@@ -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);
 		}
diff --git a/HT.Cloud.Web/Areas/PenMeiReportManage/Views/PenMeiJMReport/Index - 32bit16bitt8bit初版完成.cshtml b/HT.Cloud.Web/Areas/PenMeiReportManage/Views/PenMeiJMReport/Index - 32bit16bitt8bit初版完成.cshtml
new file mode 100644
index 0000000..e3783b8
--- /dev/null
+++ b/HT.Cloud.Web/Areas/PenMeiReportManage/Views/PenMeiJMReport/Index - 32bit16bitt8bit初版完成.cshtml	
@@ -0,0 +1,1053 @@
+@{
+    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;
+		
+		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 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 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#高炉喷煤控制系统'];//右上右下
+		
+		//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 rect_height_32bit = 10;
+		
+		const rect_top_y_offset_32bit = 90;
+		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 = 35;
+		const separator_16bit = 20;
+		const io_row_height_16bit = 45;
+		
+		const io_row_y_offset_16bit = 17;
+		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 = 90;
+		const rect_bottom_y_offset_16bit = 65;
+		
+		const io_rect_left_x_16bit = 10;
+		const io_rect_name_left_x_16bit = 40;
+		const io_rect_description_left_x_16bit = 90;
+		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 = 5;
+		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 = 35;
+		const separator_8bit = 20;
+		const io_row_height_8bit = 45;
+		
+		const io_row_y_offset_8bit = 17;
+		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 = 90;
+		const rect_bottom_y_offset_8bit = 65;
+		
+		const io_rect_left_x_8bit = 10;
+		const io_rect_name_left_x_8bit = 40;
+		const io_rect_description_left_x_8bit = 90;
+		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 = 5;
+		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: '#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_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:'#55557f',
+				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: '#5aa585',
+				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: '#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_32bit,
+				width:io_rect_right_width_32bit,
+				fill:'#55557f',
+				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: '#5aa585',
+				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: '#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);
+		}
+		     
+		
+		//16IO生成
+		const box_16bit = new LeaferUI.Box({ x: 704, 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_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 == 10)
+			{
+				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<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_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,
+					strokeWidth: 1,
+					stroke: 'rgb(50,205,121)',
+					//id: "line" + linexid.toString()
+				});
+				box_16bit.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_16bit.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_16bit.add(line);
+			}
+		}
+		
+		var spiltline_four = new LeaferUI.Line({
+			x:width_iobox/2,
+			width:top_row_height_16bit*2,
+			rotation:90,
+			stroke:'rgb(50,205,121)',
+			strokeWidth:1,
+			dashPattern : [5, 2]
+		})
+		box_16bit.add(spiltline_four);
+		
+		
+		//box4左侧顶部状态效果
+		for(var tid = 0;tid<2;tid++)
+		{
+			let y = io_row_y_offset_16bit + tid * top_row_height_16bit;
+			var left_top_text_name = new LeaferUI.Text({
+				x:io_row_left_x_name_16bit,
+				y:y,//+10
+				//height:10,
+				width:io_row_left_width_name_16bit,
+				fill: '#5aa585',
+				text:left_top_text_name_four_array_16bit[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_16bit,
+				y:y,//+10
+				//height:10,
+				width:io_row_left_width_value_16bit,
+				fill: '#5aa585',
+				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: '#5aa585',
+				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: '#5aa585',
+				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:'#55557f',
+				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: '#5aa585',
+				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: '#20343c',
+				text:'1罐大卸压阀输出',
+				textAlign :'left',
+				verticalAlign:'middle',
+				textWrap:'none',
+				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,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_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 == 10)
+			{
+				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<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_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,
+					strokeWidth: 1,
+					stroke: 'rgb(50,205,121)',
+					//id: "line" + linexid.toString()
+				});
+				box_8bit.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_8bit.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_8bit.add(line);
+			}
+		}
+		
+		var spiltline_four = new LeaferUI.Line({
+			x:width_iobox/2,
+			width:top_row_height_8bit*2,
+			rotation:90,
+			stroke:'rgb(50,205,121)',
+			strokeWidth:1,
+			dashPattern : [5, 2]
+		})
+		box_8bit.add(spiltline_four);
+		
+		
+		//box4左侧顶部状态效果
+		for(var tid = 0;tid<2;tid++)
+		{
+			let y = io_row_y_offset_8bit + tid * top_row_height_8bit;
+			var left_top_text_name = new LeaferUI.Text({
+				x:io_row_left_x_name_8bit,
+				y:y,//+10
+				//height:10,
+				width:io_row_left_width_name_8bit,
+				fill: '#5aa585',
+				text:left_top_text_name_four_array_8bit[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_8bit,
+				y:y,//+10
+				//height:10,
+				width:io_row_left_width_value_8bit,
+				fill: '#5aa585',
+				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: '#5aa585',
+				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: '#5aa585',
+				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:'#55557f',
+				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: '#5aa585',
+				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,
+				fill: '#20343c',
+				text:'1罐大卸压阀输出',
+				textAlign :'left',
+				verticalAlign:'middle',
+				textWrap:'none',
+				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') ? '#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> -->
diff --git a/HT.Cloud.Web/Areas/PenMeiReportManage/Views/PenMeiJMReport/Index - 32bit完成.cshtml b/HT.Cloud.Web/Areas/PenMeiReportManage/Views/PenMeiJMReport/Index - 32bit完成.cshtml
new file mode 100644
index 0000000..d1d8a73
--- /dev/null
+++ b/HT.Cloud.Web/Areas/PenMeiReportManage/Views/PenMeiJMReport/Index - 32bit完成.cshtml	
@@ -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> -->
diff --git a/HT.Cloud.Web/Areas/PenMeiReportManage/Views/PenMeiJMReport/Index - 副本.cshtml b/HT.Cloud.Web/Areas/PenMeiReportManage/Views/PenMeiJMReport/Index - 副本.cshtml
new file mode 100644
index 0000000..d1a1b4f
--- /dev/null
+++ b/HT.Cloud.Web/Areas/PenMeiReportManage/Views/PenMeiJMReport/Index - 副本.cshtml	
@@ -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> -->
diff --git a/HT.Cloud.Web/Areas/PenMeiReportManage/Views/PenMeiJMReport/Index - 样式完成待改函数.cshtml b/HT.Cloud.Web/Areas/PenMeiReportManage/Views/PenMeiJMReport/Index - 样式完成待改函数.cshtml
new file mode 100644
index 0000000..f6773bd
--- /dev/null
+++ b/HT.Cloud.Web/Areas/PenMeiReportManage/Views/PenMeiJMReport/Index - 样式完成待改函数.cshtml	
@@ -0,0 +1,1265 @@
+@{
+    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> -->
diff --git a/HT.Cloud.Web/Areas/PenMeiReportManage/Views/PenMeiJMReport/Index.cshtml b/HT.Cloud.Web/Areas/PenMeiReportManage/Views/PenMeiJMReport/Index.cshtml
index 8e55f42..5a9624e 100644
--- a/HT.Cloud.Web/Areas/PenMeiReportManage/Views/PenMeiJMReport/Index.cshtml
+++ b/HT.Cloud.Web/Areas/PenMeiReportManage/Views/PenMeiJMReport/Index.cshtml
@@ -7,6 +7,7 @@
 <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;
@@ -160,113 +161,1077 @@
     }
 </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({ 
+	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 draggable_dev = false;
+		
+		// //开发色彩
+		// const fill_backgroud = '#8d98a3';
+		// const fill_iobox = '#8d98a3';
+		// const stroke_iobox = '#494d52';;
+		// const stroke_iobox_line = '#42444a';
+		// const stroke_iobox_spiltline = '#474b58';
+		// 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 fill_backgroud = '#28333e';
+		//const fill_backgroud = '#2a0056';
+		// const fill_iobox = '#2492e9';//00
+		// const fill_iobox = '#345266';//001
+		const fill_iobox = '#345b87';//002
+		// const fill_iobox = '#50657a';//003
+		// const fill_iobox = '#334b64';//004
+		//const fill_iobox = '#3d5062';//005
+		const stroke_iobox = '#494d52';;
+		const stroke_iobox_line = '#42444a';
+		const stroke_iobox_spiltline = '#474b58';
+		const fill_top_name = '#ffffff';
+		const fill_top_name_value = '#ffffff';
+		const fill_rect = '#cecece';
+		const fill_rect_text_name = '#ffffff';
+		//const fill_rect_text_name = '#02f2e0';
+		const fill_rect_text_description = '#ffffff';
+		//const fill_rect_text_description = '#02f2e0';
+		const fill_rect_io_on = '#00ff55';//'#00ff7f'
+		//const fill_rect_io_on = '#00ff7f'
+		const fill_rect_io_off = '#cecece';
+
+		//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: 1000, // 不能设置为 0， 否则会变成自动布局
+			width: 1700, // 不能设置为 0， 否则会变成自动布局
 			height: 900,
+			fill: fill_backgroud
 		})
 
-        const group = new LeaferUI.Group({ x: 0, y: 0, scaleX: 1, scaleY: 1 })
-		
-        const box = new LeaferUI.Box({ x: 50, y: 50, width:400,height:800, fill: '#707980', draggable: true })
+		const group = new LeaferUI.Group({ x: 0, y: 0, scaleX: 1, scaleY: 1 })
+		leafer.add(group)
+		const image_cpu = new LeaferUI.Image({ x: 100, y: 50, url: '/images/S71500.png', draggable: true, height: 800 })
 
-		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.add(line);
-		}
-		var spiltline = new LeaferUI.Line({
-			x:200,
-			width:800,
-			rotation:90,
-			stroke:'rgb(50,205,121)',
-			strokeWidth:1,
-			dashPattern = [5, 2]
-		})
-		box.add(spiltline);
-		for(var sid = 0;sid<16;sid++)
-		{
-			let y =0 ;
-			if(sid<8)
-			{
-				y = 40*(sid) + 55;
-			}
-			if(sid>=8)
-			{
-				y = 40*(sid+2) + 55;
-			}
-			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()
-			})
-			var rect_left_text_name = new LeaferUI.Text({
-				x:5,
-				y:y-3,
-				//height:10,
-				width:40,
-				fill: '#5aa585',
-				text:'DO 0.X',
-				ITextAlign :'left',
-				IVerticalAlign:'top',
-				textWrap:'none',
-				padding:0,
-				fontSize:12
-			})
-			var rect_left_text_description = new LeaferUI.Text({
-				x:80,
-				y:y-3,
-				//height:10,
-				width:80,
-				fill: '#20343c',
-				text:'1罐大卸压阀输出',
-				ITextAlign :'left',
-				IVerticalAlign:'top',
-				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()
-			})
-			//console.log(rect)
-			box.add(rect_left);
-			box.add(rect_left_text_name);
-			box.add(rect_left_text_description);
-			box.add(rect_right);
-		}
-		
-        //const rect2 = new LeaferUI.Rect({ x: 0, y: 0, width: 100, height: 100, fill: '#09300e', draggable: true })
+		var iogroup = [];
+		var ioinfo = [];
 
-        leafer.add(group)
-        group.add(box)
-        //box.add(rect2)
+		groupajax = $.ajax({
+			url: "/PenMeiReportManage/PenMeiJMReport/GetRealIOGroup",
+			type: "Get",
+			dataType: "json",
+			async: false,
+			success: function (redata) {
+				iogroup = redata.Result;
+			}
+		});
+		infoajax = $.ajax({
+			url: "/PenMeiReportManage/PenMeiJMReport/GetRealIOInfo",
+			type: "Get",
+			dataType: "json",
+			async: false,
+			success: function (redata) {
+				ioinfo = redata.Result;
+			}
+		});
+
+		debugger;
+
+		const top_text_value_array_32bitt = ['DQ 32xDC 24V/0.5A HF', 'Slot: 1', '在线'];//右上右下
+		const name_32bitt = ['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',];
+
+		iogroup.sort(function (a, b) {
+			return a.IOIndex - b.IOIndex; // 从小到大排序
+		});
+		debugger;
+		var initx = 200;
+		for (var i = 0; i < iogroup.length; i++) {
+			var iobit = iogroup[i].IOBit;
+			var ioid = iogroup[i].IOID;
+			var top_text_value_array = [iogroup[i].IOModel, 'Slot: ' + iogroup[i].IOSlot, "在线"]
+			var ioinfofilter = ioinfo.filter(function (item) {
+				return item.IOID === ioid;
+			});
+			var names = [];
+			var descriptions = [];
+			for (var iff = 0; iff<ioinfofilter.length; iff++) {
+				names.push(ioinfofilter[iff].IONAME)
+				descriptions.push(ioinfofilter[iff].IODESCRIPTION)
+			}
+			
+			var ioboxwidth = 0;
+			//debugger;
+			if (iobit == '32') {
+				ioboxwidth = 300;
+				var offset = 2;
+				initx = initx + offset
+				var box = Draw32bitIOBox(names, top_text_value_array, descriptions, ioboxwidth, initx)
+				initx = initx + ioboxwidth;
+				group.add(box)
+			}
+			else if (iobit == '16') {
+				ioboxwidth = 200;
+				var offset = 2;
+				initx = initx + offset
+				var box = Draw16bitIOBox(names, top_text_value_array, descriptions, ioboxwidth, initx)
+				initx = initx + ioboxwidth;
+				group.add(box)
+			} else if (iobit = '8') {
+				ioboxwidth = 200;
+				var offset = 2;
+				initx = initx + offset
+				var box = Draw8bitIOBox(names, top_text_value_array, descriptions, ioboxwidth, initx)
+				initx = initx + ioboxwidth;
+				group.add(box)
+			}
+			
+		}
+
+
+		function Draw32bitIOBox(name_32bit, top_text_value_array_32bit, descriptions_32bit, ioboxwidth, initx) {
+			var box_32bit = new LeaferUI.Box({
+				x: initx,
+				y: 20,
+				width: ioboxwidth,
+				height: height_iobox,
+				fill: fill_iobox,
+				draggable: draggable_dev,
+				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: top_text_value_array_32bit[1].replace(' ', '') + '_OnlineSatate'
+					})
+					debugger;
+					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: descriptions_32bit[sid],
+					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: descriptions_32bit[sid+16],
+					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);
+			}
+
+			return box_32bit;
+		}
+
+		function Draw16bitIOBox(name_16bit, top_text_value_array_16bit, descriptions_16bit, ioboxwidth, initx) {
+			//16IO生成
+			var box_16bit = new LeaferUI.Box({
+				x: initx,
+				y: 20,
+				width: ioboxwidth,
+				height: height_iobox,
+				fill: fill_iobox,
+				draggable: draggable_dev,
+				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: top_text_value_array_16bit[1].replace(' ', '') + '_OnlineSatate'
+					})
+					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: descriptions_16bit[sid],
+					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);
+			}
+			return box_16bit;
+		}
+
+		function Draw8bitIOBox(name_8bit, top_text_value_array_8bit, descriptions_8bit, ioboxwidth, initx) {
+			//8IO生成
+			var box_8bit = new LeaferUI.Box({
+				x: initx,
+				y: 20,
+				width: ioboxwidth,
+				height: height_iobox,
+				fill: fill_iobox,
+				draggable: draggable_dev,
+				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: top_text_value_array_8bit[1].replace(' ', '') + '_OnlineSatate'
+					})
+					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: descriptions_8bit[sid],
+					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);
+			}
+			return box_8bit;
+		}
 
         var t = null;
         function time() {
@@ -291,9 +1256,16 @@
                 debugger;
                 for(var ioName in redata)
 				{
-					leafer.findOne('#'+ioName).fill =(redata[ioName] == '1') ? '#d4d04e' : '#9f9f91';
-					debugger;
+					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;
 				}
+				for (var ioslot = 1; ioslot < 7; ioslot++) {
+					leafer.findOne('#' + 'Slot:' + ioslot + '_OnlineSatate').fill = fill_rect_io_on;
+				}
+
             });
 
             
@@ -307,7 +1279,7 @@
 </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 class="layuimini-container" style="width:100%;height:100%; ">
         <div id = "idmain">
             
         </div>
diff --git a/HT.Cloud.Web/wwwroot/images/S71500.png b/HT.Cloud.Web/wwwroot/images/S71500.png
new file mode 100644
index 0000000..92dd73d
Binary files /dev/null and b/HT.Cloud.Web/wwwroot/images/S71500.png differ