diff --git a/HT.Cloud.Web/Areas/PenMeiReportManage/Controllers/PenMeiJMReportNewController.cs b/HT.Cloud.Web/Areas/PenMeiReportManage/Controllers/PenMeiJMReportNewController.cs
new file mode 100644
index 0000000..87cb6cb
--- /dev/null
+++ b/HT.Cloud.Web/Areas/PenMeiReportManage/Controllers/PenMeiJMReportNewController.cs
@@ -0,0 +1,92 @@
+/*******************************************************************************
+ * Copyright © 2020 HT.Cloud.Framework 版权所有
+ * Author: HT.Cloud
+ * Description: WaterCloud快速开发平台
+ * Website：
+*********************************************************************************/
+
+using Microsoft.AspNetCore.Mvc;
+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
+{
+	[Area("PenMeiReportManage")]
+    [HandlerLogin(needLogin: false)]
+    [HandlerAuthorize(needAuth: false)]
+    public class PenMeiJMReportNewController : BaseController
+	{
+		public ServerStateService _serverStateService { get; set; }
+
+		public RealTimeIOStateService _realTimeIOState { get; set; }	
+
+
+		[HttpGet]
+		public async Task<ActionResult> GetServerDataJson()
+		{
+			return await Task.Run(() =>
+			{
+				/*
+				 * 一
+				 * 1、安装java集成开发环境，根据示例重构jimu报表的代码。
+				 * 2、jimu报表的java环境继承到.Net中过于繁琐和前端功能较简单放弃使用jumu报表，使用另一款.Net作为服务端的cell报表。
+				 * 二
+				 * 1、下载cell报表前端源码，安装前端Vue3源码环境，通过反编译补全功能代码和与后端的Api请求。
+				 * 2、去除无用功能和界面，只保留报表功能，将所有原项目logo和名称标记替换为恒拓相关。
+				 * 三
+				 * 1、获取cellreport后端源码，编辑源码库的静态资源，下载补全项目引用的开源类库。
+				 * 2、修改水印函数库文件，将唯一不可修改的导出pdf水印替换为空或恒拓环保科技。
+				 * 四
+				 * 1、将前端和后端源码编译打包，重构项目运行结构，前后端集成为一个服务实力，部署测试。
+				 * 2、报表软件交给曲工进行报表编辑和运行测试，同时进行debug调试。
+				 * 五
+				 * 1、将曲工编辑好的报表集成至管理平台。
+				 * 2、比较JS自动绘图组件，选择适合自动生成的组件进行io模块自动构建。
+				 */
+				//windows环境
+				var computer = ComputerHelper.GetComputerInfo();
+				var arm = computer.RAMRate;
+				var cpu = computer.CPURate;
+				var iis = computer.RunTime;
+				var TotalRAM = computer.TotalRAM;
+				string ip = WebHelper.GetWanIp();
+				string ipLocation = WebHelper.GetIpLocation(ip);
+				var IP = string.Format("{0} ({1})", ip, ipLocation);
+				return Content(new { ARM = arm, CPU = cpu, IIS = iis, TotalRAM = TotalRAM, IP = IP }.ToJson());
+			});
+		}
+
+		[HttpGet]
+		public async Task<ActionResult> GetServerData()
+		{
+			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);
+		}
+	}
+}
\ No newline at end of file
diff --git a/HT.Cloud.Web/Areas/PenMeiReportManage/Controllers/PenMeiNetWorkStateController.cs b/HT.Cloud.Web/Areas/PenMeiReportManage/Controllers/PenMeiNetWorkStateController.cs
new file mode 100644
index 0000000..936f3c0
--- /dev/null
+++ b/HT.Cloud.Web/Areas/PenMeiReportManage/Controllers/PenMeiNetWorkStateController.cs
@@ -0,0 +1,92 @@
+/*******************************************************************************
+ * Copyright © 2020 HT.Cloud.Framework 版权所有
+ * Author: HT.Cloud
+ * Description: WaterCloud快速开发平台
+ * Website：
+*********************************************************************************/
+
+using Microsoft.AspNetCore.Mvc;
+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
+{
+	[Area("PenMeiReportManage")]
+    [HandlerLogin(needLogin: false)]
+    [HandlerAuthorize(needAuth: false)]
+    public class PenMeiNetWorkStateController : BaseController
+	{
+		public ServerStateService _serverStateService { get; set; }
+
+		public RealTimeIOStateService _realTimeIOState { get; set; }	
+
+
+		[HttpGet]
+		public async Task<ActionResult> GetServerDataJson()
+		{
+			return await Task.Run(() =>
+			{
+				/*
+				 * 一
+				 * 1、安装java集成开发环境，根据示例重构jimu报表的代码。
+				 * 2、jimu报表的java环境继承到.Net中过于繁琐和前端功能较简单放弃使用jumu报表，使用另一款.Net作为服务端的cell报表。
+				 * 二
+				 * 1、下载cell报表前端源码，安装前端Vue3源码环境，通过反编译补全功能代码和与后端的Api请求。
+				 * 2、去除无用功能和界面，只保留报表功能，将所有原项目logo和名称标记替换为恒拓相关。
+				 * 三
+				 * 1、获取cellreport后端源码，编辑源码库的静态资源，下载补全项目引用的开源类库。
+				 * 2、修改水印函数库文件，将唯一不可修改的导出pdf水印替换为空或恒拓环保科技。
+				 * 四
+				 * 1、将前端和后端源码编译打包，重构项目运行结构，前后端集成为一个服务实力，部署测试。
+				 * 2、报表软件交给曲工进行报表编辑和运行测试，同时进行debug调试。
+				 * 五
+				 * 1、将曲工编辑好的报表集成至管理平台。
+				 * 2、比较JS自动绘图组件，选择适合自动生成的组件进行io模块自动构建。
+				 */
+				//windows环境
+				var computer = ComputerHelper.GetComputerInfo();
+				var arm = computer.RAMRate;
+				var cpu = computer.CPURate;
+				var iis = computer.RunTime;
+				var TotalRAM = computer.TotalRAM;
+				string ip = WebHelper.GetWanIp();
+				string ipLocation = WebHelper.GetIpLocation(ip);
+				var IP = string.Format("{0} ({1})", ip, ipLocation);
+				return Content(new { ARM = arm, CPU = cpu, IIS = iis, TotalRAM = TotalRAM, IP = IP }.ToJson());
+			});
+		}
+
+		[HttpGet]
+		public async Task<ActionResult> GetServerData()
+		{
+			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);
+		}
+	}
+}
\ No newline at end of file
diff --git a/HT.Cloud.Web/Areas/PenMeiReportManage/Controllers/PenMeiNetWorkStateControllerNew.cs b/HT.Cloud.Web/Areas/PenMeiReportManage/Controllers/PenMeiNetWorkStateControllerNew.cs
new file mode 100644
index 0000000..4f6cb03
--- /dev/null
+++ b/HT.Cloud.Web/Areas/PenMeiReportManage/Controllers/PenMeiNetWorkStateControllerNew.cs
@@ -0,0 +1,92 @@
+/*******************************************************************************
+ * Copyright © 2020 HT.Cloud.Framework 版权所有
+ * Author: HT.Cloud
+ * Description: WaterCloud快速开发平台
+ * Website：
+*********************************************************************************/
+
+using Microsoft.AspNetCore.Mvc;
+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
+{
+	[Area("PenMeiReportManage")]
+    [HandlerLogin(needLogin: false)]
+    [HandlerAuthorize(needAuth: false)]
+    public class PenMeiNetWorkStateNewController : BaseController
+	{
+		public ServerStateService _serverStateService { get; set; }
+
+		public RealTimeIOStateService _realTimeIOState { get; set; }	
+
+
+		[HttpGet]
+		public async Task<ActionResult> GetServerDataJson()
+		{
+			return await Task.Run(() =>
+			{
+				/*
+				 * 一
+				 * 1、安装java集成开发环境，根据示例重构jimu报表的代码。
+				 * 2、jimu报表的java环境继承到.Net中过于繁琐和前端功能较简单放弃使用jumu报表，使用另一款.Net作为服务端的cell报表。
+				 * 二
+				 * 1、下载cell报表前端源码，安装前端Vue3源码环境，通过反编译补全功能代码和与后端的Api请求。
+				 * 2、去除无用功能和界面，只保留报表功能，将所有原项目logo和名称标记替换为恒拓相关。
+				 * 三
+				 * 1、获取cellreport后端源码，编辑源码库的静态资源，下载补全项目引用的开源类库。
+				 * 2、修改水印函数库文件，将唯一不可修改的导出pdf水印替换为空或恒拓环保科技。
+				 * 四
+				 * 1、将前端和后端源码编译打包，重构项目运行结构，前后端集成为一个服务实力，部署测试。
+				 * 2、报表软件交给曲工进行报表编辑和运行测试，同时进行debug调试。
+				 * 五
+				 * 1、将曲工编辑好的报表集成至管理平台。
+				 * 2、比较JS自动绘图组件，选择适合自动生成的组件进行io模块自动构建。
+				 */
+				//windows环境
+				var computer = ComputerHelper.GetComputerInfo();
+				var arm = computer.RAMRate;
+				var cpu = computer.CPURate;
+				var iis = computer.RunTime;
+				var TotalRAM = computer.TotalRAM;
+				string ip = WebHelper.GetWanIp();
+				string ipLocation = WebHelper.GetIpLocation(ip);
+				var IP = string.Format("{0} ({1})", ip, ipLocation);
+				return Content(new { ARM = arm, CPU = cpu, IIS = iis, TotalRAM = TotalRAM, IP = IP }.ToJson());
+			});
+		}
+
+		[HttpGet]
+		public async Task<ActionResult> GetServerData()
+		{
+			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);
+		}
+	}
+}
\ No newline at end of file
diff --git a/HT.Cloud.Web/Areas/PenMeiReportManage/Views/PenMeiJMReport/Index.cshtml b/HT.Cloud.Web/Areas/PenMeiReportManage/Views/PenMeiJMReport/Index.cshtml
index 5a9624e..9490999 100644
--- a/HT.Cloud.Web/Areas/PenMeiReportManage/Views/PenMeiJMReport/Index.cshtml
+++ b/HT.Cloud.Web/Areas/PenMeiReportManage/Views/PenMeiJMReport/Index.cshtml
@@ -168,1109 +168,6 @@
 			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: 1700, // 不能设置为 0， 否则会变成自动布局
-			height: 900,
-			fill: fill_backgroud
-		})
-
-		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 })
-
-		var iogroup = [];
-		var ioinfo = [];
-
-		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() {
-            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;
-				}
-				for (var ioslot = 1; ioslot < 7; ioslot++) {
-					leafer.findOne('#' + 'Slot:' + ioslot + '_OnlineSatate').fill = fill_rect_io_on;
-				}
-
-            });
-
-            
-        }
-		t = setTimeout(time, 1 * 1000); //开始运行
 		
         
 		
@@ -1278,15 +175,9 @@
     })
 </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 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">
@@ -1296,4 +187,4 @@
             </div>
         </div>
     </div>
-</div> -->
+</div> 
diff --git a/HT.Cloud.Web/Areas/PenMeiReportManage/Views/PenMeiJMReport/Index - 32bit16bitt8bit初版完成.cshtml b/HT.Cloud.Web/Areas/PenMeiReportManage/Views/PenMeiJMReportNew/Index - 32bit16bitt8bit初版完成.cshtml
similarity index 100%
rename from HT.Cloud.Web/Areas/PenMeiReportManage/Views/PenMeiJMReport/Index - 32bit16bitt8bit初版完成.cshtml
rename to HT.Cloud.Web/Areas/PenMeiReportManage/Views/PenMeiJMReportNew/Index - 32bit16bitt8bit初版完成.cshtml
diff --git a/HT.Cloud.Web/Areas/PenMeiReportManage/Views/PenMeiJMReport/Index - 32bit完成.cshtml b/HT.Cloud.Web/Areas/PenMeiReportManage/Views/PenMeiJMReportNew/Index - 32bit完成.cshtml
similarity index 100%
rename from HT.Cloud.Web/Areas/PenMeiReportManage/Views/PenMeiJMReport/Index - 32bit完成.cshtml
rename to HT.Cloud.Web/Areas/PenMeiReportManage/Views/PenMeiJMReportNew/Index - 32bit完成.cshtml
diff --git a/HT.Cloud.Web/Areas/PenMeiReportManage/Views/PenMeiJMReport/Index - 副本.cshtml b/HT.Cloud.Web/Areas/PenMeiReportManage/Views/PenMeiJMReportNew/Index - 副本.cshtml
similarity index 100%
rename from HT.Cloud.Web/Areas/PenMeiReportManage/Views/PenMeiJMReport/Index - 副本.cshtml
rename to HT.Cloud.Web/Areas/PenMeiReportManage/Views/PenMeiJMReportNew/Index - 副本.cshtml
diff --git a/HT.Cloud.Web/Areas/PenMeiReportManage/Views/PenMeiJMReport/Index - 样式完成待改函数.cshtml b/HT.Cloud.Web/Areas/PenMeiReportManage/Views/PenMeiJMReportNew/Index - 样式完成待改函数.cshtml
similarity index 100%
rename from HT.Cloud.Web/Areas/PenMeiReportManage/Views/PenMeiJMReport/Index - 样式完成待改函数.cshtml
rename to HT.Cloud.Web/Areas/PenMeiReportManage/Views/PenMeiJMReportNew/Index - 样式完成待改函数.cshtml
diff --git a/HT.Cloud.Web/Areas/PenMeiReportManage/Views/PenMeiJMReportNew/Index.cshtml b/HT.Cloud.Web/Areas/PenMeiReportManage/Views/PenMeiJMReportNew/Index.cshtml
new file mode 100644
index 0000000..3b96e0d
--- /dev/null
+++ b/HT.Cloud.Web/Areas/PenMeiReportManage/Views/PenMeiJMReportNew/Index.cshtml
@@ -0,0 +1,1874 @@
+@{
+    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 width_iobox_cpu = 200;
+		const width_iobox_cm = 200;
+
+		//拖拽
+		const draggable_dev = true;
+		
+		// //开发色彩
+		// 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;
+
+		//CPU配置项
+		const top_row_height_cpu = 25;
+		const separator_cpu = 15;
+		const io_row_height_cpu = 45;
+
+		const io_row_y_offset_cpu = 13;
+		const io_row_left_x_name_cpu = 10;
+		const io_row_left_x_value_cpu = 65;
+		const io_row_right_x_name_cpu = 160;
+		const io_row_left_width_name_cpu = 40;
+		const io_row_left_width_value_cpu = 55;
+		const io_row_right_width_name_cpu = 20;
+		const io_row_right_width_value_cpu = 130;
+
+
+
+		const rect_height_cpu = 10;
+
+		const rect_top_y_offset_cpu = 95;
+		const rect_bottom_y_offset_cpu = 65;
+
+		const io_rect_left_x_cpu = 10;
+		const io_rect_name_left_x_cpu = 35;
+		const io_rect_description_left_x_cpu = 80;
+		const io_rect_right_x_cpu = 270;
+		const io_rect_name_right_x_cpu = 225;
+		const io_rect_description_right_x_cpu = 155;
+
+		const io_rect_left_y_offset_cpu = 0;
+		const io_rect_name_left_y_offset_cpu = 5;
+		const io_rect_description_left_y_offset_cpu = -4;
+		const io_rect_right_y_offset_cpu = 0;
+		const io_rect_name_right_y_offset_cpu = 0;
+		const io_rect_description_right_y_offset_cpu = 0;
+
+		const io_rect_left_width_cpu = 20;
+		const io_rect_name_left_width_cpu = 40;
+		const io_rect_description_left_width_cpu = 110;
+		const io_rect_right_width_cpu = 20;
+		const io_rect_name_right_width_cpu = 40;
+		const io_rect_description_right_width_cpu = 110;
+
+		//cm配置项
+		const top_row_height_cm = 25;
+		const separator_cm = 15;
+		const io_row_height_cm = 45;
+
+		const io_row_y_offset_cm = 13;
+		const io_row_left_x_name_cm = 10;
+		const io_row_left_x_value_cm = 65;
+		const io_row_right_x_name_cm = 160;
+		const io_row_left_width_name_cm = 40;
+		const io_row_left_width_value_cm = 55;
+		const io_row_right_width_name_cm = 20;
+		const io_row_right_width_value_cm = 130;
+
+
+
+		const rect_height_cm = 10;
+
+		const rect_top_y_offset_cm = 95;
+		const rect_bottom_y_offset_cm = 65;
+
+		const io_rect_left_x_cm = 10;
+		const io_rect_name_left_x_cm = 35;
+		const io_rect_description_left_x_cm = 80;
+		const io_rect_right_x_cm = 270;
+		const io_rect_name_right_x_cm = 225;
+		const io_rect_description_right_x_cm = 155;
+
+		const io_rect_left_y_offset_cm = 0;
+		const io_rect_name_left_y_offset_cm = 5;
+		const io_rect_description_left_y_offset_cm = -4;
+		const io_rect_right_y_offset_cm = 0;
+		const io_rect_name_right_y_offset_cm = 0;
+		const io_rect_description_right_y_offset_cm = 0;
+
+		const io_rect_left_width_cm = 20;
+		const io_rect_name_left_width_cm = 40;
+		const io_rect_description_left_width_cm = 110;
+		const io_rect_right_width_cm = 20;
+		const io_rect_name_right_width_cm = 40;
+		const io_rect_description_right_width_cm = 110;
+
+		const leafer = new LeaferUI.Leafer({
+			view: 'idmain', // 支持 window 、div、canvas 标签对象， 可使用id字符串(不用加 # 号)
+			width: 3000, // 不能设置为 0， 否则会变成自动布局
+			height: 900,
+			fill: fill_backgroud,
+			move: {
+				drag: true,
+			},
+			wheel: {
+				zoomMode: true,
+				zoomSpeed: 0.01,
+			},
+			zoom:{
+			min: 0.4,
+			max: 1.5,
+			}
+		})
+
+		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 })
+
+		var iogroup = [];
+		var ioinfo = [];
+
+		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',];
+
+		const top_text_value_array_cpu_ = ['SIMATIC S7-412-2 PN', 'Slot: 0', '在线'];//右上右下
+		const name_cpu_ = ['RUN', 'STOP', 'ERR'];
+		const descriptions_cpu_ = ['运行状态', '暂停状态', '运行错误'];
+		const name_eth_cpu_ = ['ETH0'];
+		const descriptions_eth_cpu_ = ['10/100 Mbit/s'];
+		
+
+		const top_text_value_array_cm_ = ['通信处理器 CP 443-1', 'Slot: 1', '在线'];//右上右下
+		const name_cm_ = ['RUN', 'STOP', 'ERR'];
+		const descriptions_cm_ = ['运行状态', '暂停状态', '运行错误'];
+		const name_eth_cm_ = ['ETH1','ETH2'];
+		const descriptions_eth_cm_ = ['10/100 Mbit/s', '10/100 Mbit/s'];
+
+		iogroup.sort(function (a, b) {
+			return a.IOSlot - b.IOSlot; // 从小到大排序
+		});
+		debugger;
+		var initx = 452;
+		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)
+			}
+			
+		}
+		var boxcpu = DrawCPUBox(name_cpu_, top_text_value_array_cpu_, descriptions_cpu_, name_eth_cpu_, descriptions_eth_cpu_, 200, 50)
+		var boxcm = DrawCMBox(name_cm_, top_text_value_array_cm_, descriptions_cm_, name_eth_cm_, descriptions_eth_cm_, 200, 252)
+		group.add(boxcpu);
+		group.add(boxcm);
+
+		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;
+		}
+
+		function DrawCPUBox(name_cpu, top_text_value_array_cpu, descriptions_cpu, name_eth_cpu, descriptions_eth_cpu, ioboxwidth, initx) {
+			var box_cpu = 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_cpu;
+					ylinex_array_four.push(ylinex_sum_four);
+				}
+				else if (linexid == 1) {
+					ylinex_sum_four = ylinex_sum_four + top_row_height_cpu;
+					ylinex_array_four.push(ylinex_sum_four);
+				}
+				else if (linexid == 2) {
+					ylinex_sum_four = ylinex_sum_four + top_row_height_cpu;
+					ylinex_array_four.push(ylinex_sum_four);
+				}
+				else if (linexid == 11) {
+					ylinex_sum_four = ylinex_sum_four + separator_cpu;
+					ylinex_array_four.push(ylinex_sum_four);
+				}
+				else {
+					ylinex_sum_four = ylinex_sum_four + io_row_height_cpu;
+					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_cpu,
+						strokeWidth: 1,
+						stroke: stroke_iobox_line,
+					});
+					box_cpu.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_cpu,
+						strokeWidth: 1,
+						stroke: stroke_iobox_line,
+					});
+					box_cpu.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_cpu,
+						strokeWidth: 1,
+						stroke: stroke_iobox_line,
+					});
+					box_cpu.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_cpu,
+						strokeWidth: 1,
+						stroke: stroke_iobox_line,
+					});
+					box_cpu.add(line);
+				}
+				else {
+					var line = new LeaferUI.Line({
+						x: 0,
+						y: ylinex_array_four[linexid],// ylinex_sum_four + 45,
+						width: width_iobox_cpu,
+						strokeWidth: 1,
+						stroke: stroke_iobox_line,
+					});
+					box_cpu.add(line);
+				}
+			}
+		
+			var spiltline_four = new LeaferUI.Line({
+				x: width_iobox_cpu / 2,
+				width: top_row_height_cpu * 2,
+				rotation: 90,
+				stroke: stroke_iobox_spiltline,
+				strokeWidth: 1,
+				dashPattern: [5, 2]
+			})
+			//box4左侧顶部状态效果
+			for (var tid = 0; tid < 3; tid++) {
+				let y = io_row_y_offset_cpu + tid * top_row_height_cpu;
+				if (tid < 2) {
+		
+					var top_text_value = new LeaferUI.Text({
+						x: io_row_left_x_name_cpu,
+						y: y,//+10
+						//height:10,
+						width: io_row_left_width_name_cpu,
+						fill: fill_top_name,
+						text: top_text_value_array_cpu[tid],
+						textAlign: 'left',
+						verticalAlign: 'middle',
+						textWrap: 'none',
+						padding: 0,
+						fontSize: 12
+					})
+					box_cpu.add(top_text_value);
+				}
+				if (tid == 2) {
+					var rect = new LeaferUI.Rect({
+						x: io_row_left_x_name_cpu,
+						y: y - 5,
+						height: rect_height_cpu,
+						width: io_rect_left_width_cpu,
+						fill: fill_rect,
+						draggable: false,
+						id:top_text_value_array_cpu[1].replace(' ', '') + '_OnlineSatate'
+					})
+					box_cpu.add(rect)
+					var top_text_value = new LeaferUI.Text({
+						x: io_row_left_x_name_cpu + io_rect_left_width_cpu + 15,
+						y: y,//+10
+						//height:10,
+						width: io_row_left_width_name_cpu,
+						fill: fill_top_name,
+						text: top_text_value_array_cpu[tid],
+						textAlign: 'left',
+						verticalAlign: 'middle',
+						textWrap: 'none',
+						padding: 0,
+						fontSize: 12
+					})
+					box_cpu.add(top_text_value)
+				}
+		
+			}
+			//box4效果
+			for (var sid = 0; sid < 16; sid++) {
+				let y = 0;
+				
+				if (sid < 8) {
+					y = io_row_height_cpu * (sid) + rect_top_y_offset_cpu;
+				}
+				if (sid >= 8) {
+					y = io_row_height_cpu * (sid + 1) + rect_bottom_y_offset_cpu;
+				}
+				if (sid < 3) {
+					var rect_left = new LeaferUI.Rect({
+						x: io_rect_left_x_cpu,
+						y: y + io_rect_left_y_offset_cpu,
+						height: rect_height_cpu,
+						width: io_rect_left_width_cpu,
+						fill: fill_rect,
+						draggable: false,
+						id: name_cpu[sid]+'1'
+					})
+					var rect_left_text_name = new LeaferUI.Text({
+						x: io_rect_name_left_x_cpu,
+						y: y + io_rect_name_left_y_offset_cpu,
+						width: io_rect_name_left_width_cpu,
+						fill: fill_rect_text_name,
+						text: name_cpu[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_cpu,
+						y: y + io_rect_description_left_y_offset_cpu,
+						width: io_rect_description_left_width_cpu / 3,
+						fill: fill_rect_text_description,
+						text: descriptions_cpu[sid],
+						textAlign: 'left',
+						verticalAlign: 'middle',
+						textWrap: 'none',
+						textOverflow: ' ',
+						padding: 0,
+						fontSize: 12
+					})
+
+					box_cpu.add(rect_left);
+					box_cpu.add(rect_left_text_name);
+					box_cpu.add(rect_left_text_description);
+				}
+				else if (7 < sid && sid < (8 + name_eth_cpu.length)) 
+				{
+					var rect_left = new LeaferUI.Rect({
+						x: io_rect_left_x_cpu,
+						y: y + io_rect_left_y_offset_cpu,
+						height: rect_height_cpu,
+						width: io_rect_left_width_cpu,
+						fill: fill_rect,
+						draggable: false,
+						id: name_eth_cpu[sid-8]
+					})
+					var rect_left_text_name = new LeaferUI.Text({
+						x: io_rect_name_left_x_cpu,
+						y: y + io_rect_name_left_y_offset_cpu,
+						width: io_rect_name_left_width_cpu,
+						fill: fill_rect_text_name,
+						text: name_eth_cpu[sid-8],
+						textAlign: 'left',
+						verticalAlign: 'middle',
+						textWrap: 'none',
+						padding: 0,
+						fontSize: 12
+					})
+					var rect_left_text_description = new LeaferUI.Text({
+						x: io_rect_description_left_x_cpu,
+						y: y + io_rect_description_left_y_offset_cpu,
+						width: io_rect_description_left_width_cpu / 3,
+						fill: fill_rect_text_description,
+						text: descriptions_eth_cpu[sid-8],
+						textAlign: 'left',
+						verticalAlign: 'middle',
+						textWrap: 'none',
+						textOverflow: ' ',
+						padding: 0,
+						fontSize: 12
+					})
+
+					box_cpu.add(rect_left);
+					box_cpu.add(rect_left_text_name);
+					box_cpu.add(rect_left_text_description);
+				}
+			}
+			return box_cpu;
+		}
+
+		function DrawCMBox(name_cm, top_text_value_array_cm, descriptions_cm, name_eth_cm, descriptions_eth_cm, ioboxwidth, initx) {
+			var box_cm = 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_cm;
+					ylinex_array_four.push(ylinex_sum_four);
+				}
+				else if (linexid == 1) {
+					ylinex_sum_four = ylinex_sum_four + top_row_height_cm;
+					ylinex_array_four.push(ylinex_sum_four);
+				}
+				else if (linexid == 2) {
+					ylinex_sum_four = ylinex_sum_four + top_row_height_cm;
+					ylinex_array_four.push(ylinex_sum_four);
+				}
+				else if (linexid == 11) {
+					ylinex_sum_four = ylinex_sum_four + separator_cm;
+					ylinex_array_four.push(ylinex_sum_four);
+				}
+				else {
+					ylinex_sum_four = ylinex_sum_four + io_row_height_cm;
+					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_cm,
+						strokeWidth: 1,
+						stroke: stroke_iobox_line,
+					});
+					box_cm.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_cm,
+						strokeWidth: 1,
+						stroke: stroke_iobox_line,
+					});
+					box_cm.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_cm,
+						strokeWidth: 1,
+						stroke: stroke_iobox_line,
+					});
+					box_cm.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_cm,
+						strokeWidth: 1,
+						stroke: stroke_iobox_line,
+					});
+					box_cm.add(line);
+				}
+				else {
+					var line = new LeaferUI.Line({
+						x: 0,
+						y: ylinex_array_four[linexid],// ylinex_sum_four + 45,
+						width: width_iobox_cm,
+						strokeWidth: 1,
+						stroke: stroke_iobox_line,
+					});
+					box_cm.add(line);
+				}
+			}
+
+			var spiltline_four = new LeaferUI.Line({
+				x: width_iobox_cm / 2,
+				width: top_row_height_cm * 2,
+				rotation: 90,
+				stroke: stroke_iobox_spiltline,
+				strokeWidth: 1,
+				dashPattern: [5, 2]
+			})
+			//box4左侧顶部状态效果
+			for (var tid = 0; tid < 3; tid++) {
+				let y = io_row_y_offset_cm + tid * top_row_height_cm;
+				if (tid < 2) {
+
+					var top_text_value = new LeaferUI.Text({
+						x: io_row_left_x_name_cm,
+						y: y,//+10
+						//height:10,
+						width: io_row_left_width_name_cm,
+						fill: fill_top_name,
+						text: top_text_value_array_cm[tid],
+						textAlign: 'left',
+						verticalAlign: 'middle',
+						textWrap: 'none',
+						padding: 0,
+						fontSize: 12
+					})
+					box_cm.add(top_text_value);
+				}
+				if (tid == 2) {
+					var rect = new LeaferUI.Rect({
+						x: io_row_left_x_name_cm,
+						y: y - 5,
+						height: rect_height_cm,
+						width: io_rect_left_width_cm,
+						fill: fill_rect,
+						draggable: false,
+						id: top_text_value_array_cm[1].replace(' ', '') + '_OnlineSatate'
+					})
+					box_cm.add(rect)
+					var top_text_value = new LeaferUI.Text({
+						x: io_row_left_x_name_cm + io_rect_left_width_cm + 15,
+						y: y,//+10
+						//height:10,
+						width: io_row_left_width_name_cm,
+						fill: fill_top_name,
+						text: top_text_value_array_cm[tid],
+						textAlign: 'left',
+						verticalAlign: 'middle',
+						textWrap: 'none',
+						padding: 0,
+						fontSize: 12
+					})
+					box_cm.add(top_text_value)
+				}
+
+			}
+			//box4效果
+			for (var sid = 0; sid < 16; sid++) {
+				let y = 0;
+
+				if (sid < 8) {
+					y = io_row_height_cm * (sid) + rect_top_y_offset_cm;
+				}
+				if (sid >= 8) {
+					y = io_row_height_cm * (sid + 1) + rect_bottom_y_offset_cm;
+				}
+				if (sid < 3) {
+					var rect_left = new LeaferUI.Rect({
+						x: io_rect_left_x_cm,
+						y: y + io_rect_left_y_offset_cm,
+						height: rect_height_cm,
+						width: io_rect_left_width_cm,
+						fill: fill_rect,
+						draggable: false,
+						id: name_cm[sid]
+					})
+					var rect_left_text_name = new LeaferUI.Text({
+						x: io_rect_name_left_x_cm,
+						y: y + io_rect_name_left_y_offset_cm,
+						width: io_rect_name_left_width_cm,
+						fill: fill_rect_text_name,
+						text: name_cm[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_cm,
+						y: y + io_rect_description_left_y_offset_cm,
+						width: io_rect_description_left_width_cm / 3,
+						fill: fill_rect_text_description,
+						text: descriptions_cm[sid],
+						textAlign: 'left',
+						verticalAlign: 'middle',
+						textWrap: 'none',
+						textOverflow: ' ',
+						padding: 0,
+						fontSize: 12
+					})
+
+					box_cm.add(rect_left);
+					box_cm.add(rect_left_text_name);
+					box_cm.add(rect_left_text_description);
+				}
+				else if (7 < sid && sid < (8 + name_eth_cm.length)) {
+					var rect_left = new LeaferUI.Rect({
+						x: io_rect_left_x_cm,
+						y: y + io_rect_left_y_offset_cm,
+						height: rect_height_cm,
+						width: io_rect_left_width_cm,
+						fill: fill_rect,
+						draggable: false,
+						id: name_eth_cm[sid - 8]
+					})
+					var rect_left_text_name = new LeaferUI.Text({
+						x: io_rect_name_left_x_cm,
+						y: y + io_rect_name_left_y_offset_cm,
+						width: io_rect_name_left_width_cm,
+						fill: fill_rect_text_name,
+						text: name_eth_cm[sid - 8],
+						textAlign: 'left',
+						verticalAlign: 'middle',
+						textWrap: 'none',
+						padding: 0,
+						fontSize: 12
+					})
+					var rect_left_text_description = new LeaferUI.Text({
+						x: io_rect_description_left_x_cm,
+						y: y + io_rect_description_left_y_offset_cm,
+						width: io_rect_description_left_width_cm / 3,
+						fill: fill_rect_text_description,
+						text: descriptions_eth_cm[sid - 8],
+						textAlign: 'left',
+						verticalAlign: 'middle',
+						textWrap: 'none',
+						textOverflow: ' ',
+						padding: 0,
+						fontSize: 12
+					})
+
+					box_cm.add(rect_left);
+					box_cm.add(rect_left_text_name);
+					box_cm.add(rect_left_text_description);
+				}
+			}
+			return box_cm;
+		}
+
+        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",
+                success: function (redata) {
+
+                }
+            });
+            $.when(myajax).done(function (redata) {
+				debugger; 
+				leafer.findOne('#' + 'RUN1').fill = fill_rect_io_on;
+				leafer.findOne('#' + 'RUN').fill = fill_rect_io_on;
+				leafer.findOne('#' + 'ETH0').fill = fill_rect_io_on;
+				leafer.findOne('#' + 'ETH1').fill = fill_rect_io_on;
+				leafer.findOne('#' + 'ETH2').fill = fill_rect_io_on;
+                for(var ioName in redata)
+				{
+					leafer.findOne('#'+ioName.replace('_','.')).fill =(redata[ioName] == '1') ? fill_rect_io_on : fill_rect_io_off;
+
+				}
+				for (var ioslot = 0; ioslot < 8; ioslot++) {
+					leafer.findOne('#' + 'Slot:' + ioslot + '_OnlineSatate').fill = fill_rect_io_on;
+				}
+
+            });
+        }
+		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>
diff --git a/HT.Cloud.Web/Areas/PenMeiReportManage/Views/PenMeiNetWorkState/Index.cshtml b/HT.Cloud.Web/Areas/PenMeiReportManage/Views/PenMeiNetWorkState/Index.cshtml
new file mode 100644
index 0000000..456487d
--- /dev/null
+++ b/HT.Cloud.Web/Areas/PenMeiReportManage/Views/PenMeiNetWorkState/Index.cshtml
@@ -0,0 +1,816 @@
+@{
+	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,
+			element = layui.element,
+			echarts = layui.echarts;
+		wcLoading.close();
+		
+		//基准配置项
+		const width_iobox = 300;
+		const width_iobox_16bit = 200;
+		const width_iobox_8bit = 200;
+		const height_iobox = 810;
+
+		const width_iobox_cpu = 200;
+		const width_iobox_cm = 200;
+
+		//拖拽
+		const draggable_dev = true;
+
+		// //开发色彩
+		// 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';
+
+		const leafer = new LeaferUI.Leafer({
+			view: 'idmain', // 支持 window 、div、canvas 标签对象， 可使用id字符串(不用加 # 号)
+			width: 3000, // 不能设置为 0， 否则会变成自动布局
+			height: 900,
+			fill: fill_backgroud,
+			move: {
+				drag: true,
+			},
+			wheel: {
+				zoomMode: true,
+				zoomSpeed: 0.01,
+			},
+			zoom: {
+				min: 0.4,
+				max: 1.5,
+			}
+		})
+
+		const group = new LeaferUI.Group({ x: 0, y: 0 })
+		leafer.add(group)
+		// const image_cpu = new LeaferUI.Image({
+		// 	x: 100,
+		// 	y: 50,
+		// 	url: '/imagesnet/S71500.png',
+		// 	draggable: draggable_dev,
+		// 	height: 80
+		// })
+
+		const image_exchange = new LeaferUI.Image({
+			x: 800,
+			y: 35,
+			url: '/imagesnet/交换机.png',
+			draggable: draggable_dev,
+			width: 134,
+			height: 160,
+		})
+		var image_exchange_name = new LeaferUI.Text({
+			x: 800,
+			y: 35 + 160 + 10,
+			width: 134,
+			fill: fill_top_name,
+			text: '交换机',
+			textAlign: 'center',
+			verticalAlign: 'middle',
+			textWrap: 'none',
+			padding: 0,
+			fontSize: 12
+		})
+		group.add(image_exchange_name)
+		var image_exchange_address = new LeaferUI.Text({
+			x: 800,
+			y: 35 + 160 + 25,
+			width: 134,
+			fill: fill_top_name,
+			text: '192.168.100.1',
+			textAlign: 'center',
+			verticalAlign: 'middle',
+			textWrap: 'none',
+			padding: 0,
+			fontSize: 12
+		})
+		group.add(image_exchange_address)
+
+		const line1 = new LeaferUI.Line({
+			id: 'line1',
+			points: [860, 230, 260, 330],
+			strokeWidth: 2,
+			stroke: '#cecece',
+			shadow: {
+				x: 0,
+				y: 0,
+				blur: 1,
+				color: '#cecece',
+				visible: true,
+			}
+		})
+		group.add(line1);
+		const image_PLC = new LeaferUI.Image({
+			x: 200,
+			y: 75+250,
+			url: '/imagesnet/PLC.png',
+			draggable: draggable_dev,
+			width:134,
+			height: 160,
+		})
+		var image_PLC_name = new LeaferUI.Text({
+			x: 200,
+			y: 75 + 250+140+10,
+			width: 134,
+			fill: fill_top_name,
+			text: 'PLC',
+			textAlign: 'center',
+			verticalAlign: 'middle',
+			textWrap: 'none',
+			padding: 0,
+			fontSize: 12
+		})
+		group.add(image_PLC_name)
+		var image_PLC_address = new LeaferUI.Text({
+			x: 200,
+			y: 75 + 250 + 140 + 25,
+			width: 134,
+			fill: fill_top_name,
+			text: '192.168.100.10',
+			textAlign: 'center',
+			verticalAlign: 'middle',
+			textWrap: 'none',
+			padding: 0,
+			fontSize: 12
+		})
+		group.add(image_PLC_address)
+		const line11 = new LeaferUI.Line({
+			id: 'line11',
+			points: [267, 500, 267, 650],
+			strokeWidth: 2,
+			stroke: '#cecece',
+			shadow: {
+				x: 0,
+				y: 0,
+				blur: 1,
+				color: '#cecece',
+				visible:true,
+			}
+		})
+		group.add(line11);
+		const image_et = new LeaferUI.Image({
+			x: 200,
+			y: 150 + 500,
+			url: '/imagesnet/PLC.png',
+			draggable: draggable_dev,
+			width: 134,
+			height: 160,
+		})
+		var image_et_name = new LeaferUI.Text({
+			x: 200,
+			y: 150 + 500+140+10,
+			width: 134,
+			fill: fill_top_name,
+			text: '远程子站',
+			textAlign: 'center',
+			verticalAlign: 'middle',
+			textWrap: 'none',
+			padding: 0,
+			fontSize: 12
+		})
+		group.add(image_et_name)
+		var image_et_address = new LeaferUI.Text({
+			x: 200,
+			y: 150 + 500 + 140 + 25,
+			width: 134,
+			fill: fill_top_name,
+			text: '192.168.100.120',
+			textAlign: 'center',
+			verticalAlign: 'middle',
+			textWrap: 'none',
+			padding: 0,
+			fontSize: 12
+		})
+		group.add(image_et_address)
+
+		const line2 = new LeaferUI.Line({
+			id: 'line2',
+			points: [860, 230, 860, 330],
+			strokeWidth: 2,
+			stroke: '#cecece',
+			shadow: {
+				x: 0,
+				y: 0,
+				blur: 1,
+				color: '#cecece',
+				visible: true,
+			}
+		})
+		group.add(line2);
+		const image_server = new LeaferUI.Image({
+			x: 800,
+			y: 75 + 250,
+			url: '/imagesnet/服务器.png',
+			draggable: draggable_dev,
+			width: 134,
+			height: 160,
+		})
+		var image_server_name = new LeaferUI.Text({
+			x: 800,
+			y: 75 + 250 + 140 + 10,
+			width: 134,
+			fill: fill_top_name,
+			text: 'L2服务器',
+			textAlign: 'center',
+			verticalAlign: 'middle',
+			textWrap: 'none',
+			padding: 0,
+			fontSize: 12
+		})
+		group.add(image_server_name)
+		var image_server_address = new LeaferUI.Text({
+			x: 800,
+			y: 75 + 250 + 140 + 25,
+			width: 134,
+			fill: fill_top_name,
+			text: '192.168.100.15',
+			textAlign: 'center',
+			verticalAlign: 'middle',
+			textWrap: 'none',
+			padding: 0,
+			fontSize: 12
+		})
+		group.add(image_server_address)
+
+
+		const line21 = new LeaferUI.Line({
+			id: 'line21',
+			points: [860, 500, 560, 650],
+			strokeWidth: 2,
+			stroke: '#cecece',
+			shadow: {
+				x: 0,
+				y: 0,
+				blur: 1,
+				color: '#cecece',
+				visible: true,
+			}
+		})
+		group.add(line21);
+		const image_disk = new LeaferUI.Image({
+			x: 500,
+			y: 150+500,
+			url: '/imagesnet/磁盘存储.png',
+			draggable: draggable_dev,
+			width: 134,
+			height: 160,
+		})
+		var image_disk_name = new LeaferUI.Text({
+			x: 500,
+			y: 150 + 500 + 140 + 10,
+			width: 134,
+			fill: fill_top_name,
+			text: '网络存储',
+			textAlign: 'center',
+			verticalAlign: 'middle',
+			textWrap: 'none',
+			padding: 0,
+			fontSize: 12
+		})
+		group.add(image_disk_name)
+		var image_disk_address = new LeaferUI.Text({
+			x: 500,
+			y: 150 + 500 + 140 + 25,
+			width: 134,
+			fill: fill_top_name,
+			text: '192.168.100.130',
+			textAlign: 'center',
+			verticalAlign: 'middle',
+			textWrap: 'none',
+			padding: 0,
+			fontSize: 12
+		})
+		group.add(image_disk_address)
+
+		const line22 = new LeaferUI.Line({
+			id: 'line22',
+			points: [860, 500, 760, 650],
+			strokeWidth: 2,
+			stroke: '#cecece',
+			shadow: {
+				x: 0,
+				y: 0,
+				blur: 1,
+				color: '#cecece',
+				visible: true,
+			}
+		})
+		group.add(line22);
+		const image_appserver = new LeaferUI.Image({
+			x: 700,
+			y: 150+500,
+			url: '/imagesnet/应用服务器.png',
+			draggable: draggable_dev,
+			width: 134,
+			height: 160,
+		})
+		var image_appserver_name = new LeaferUI.Text({
+			x: 700,
+			y: 150 + 500 + 140 + 10,
+			width: 134,
+			fill: fill_top_name,
+			text: '管理系统',
+			textAlign: 'center',
+			verticalAlign: 'middle',
+			textWrap: 'none',
+			padding: 0,
+			fontSize: 12
+		})
+		group.add(image_appserver_name)
+		var image_appserver_address = new LeaferUI.Text({
+			x: 700,
+			y: 150 + 500 + 140 + 25,
+			width: 134,
+			fill: fill_top_name,
+			text: '192.168.100.247',
+			textAlign: 'center',
+			verticalAlign: 'middle',
+			textWrap: 'none',
+			padding: 0,
+			fontSize: 12
+		})
+		group.add(image_appserver_address)
+
+		const line23 = new LeaferUI.Line({
+			id: 'line23',
+			points: [860, 500, 960, 650],
+			strokeWidth: 2,
+			stroke: '#cecece',
+			shadow: {
+				x: 0,
+				y: 0,
+				blur: 1,
+				color: '#cecece',
+				visible: true,
+			}
+		})
+		group.add(line23);
+		const image_appserver3d = new LeaferUI.Image({
+			x: 900,
+			y: 150 + 500,
+			url: '/imagesnet/应用服务器.png',
+			draggable: draggable_dev,
+			width: 134,
+			height: 160,
+		})
+		var image_3d_name = new LeaferUI.Text({
+			x: 900,
+			y: 150 + 500 + 140 + 10,
+			width: 134,
+			fill: fill_top_name,
+			text: '3D可视化系统',
+			textAlign: 'center',
+			verticalAlign: 'middle',
+			textWrap: 'none',
+			padding: 0,
+			fontSize: 12
+		})
+		group.add(image_3d_name)
+		var image_3d_address = new LeaferUI.Text({
+			x: 900,
+			y: 150 + 500 + 140 + 25,
+			width: 134,
+			fill: fill_top_name,
+			text: '192.168.100.220',
+			textAlign: 'center',
+			verticalAlign: 'middle',
+			textWrap: 'none',
+			padding: 0,
+			fontSize: 12
+		})
+		group.add(image_3d_address)
+
+		const line24 = new LeaferUI.Line({
+			id: 'line24',
+			points: [860, 500, 1160, 650],
+			strokeWidth: 2,
+			stroke: '#cecece',
+			shadow: {
+				x: 0,
+				y: 0,
+				blur: 1,
+				color: '#cecece',
+				visible: true,
+			}
+		})
+		group.add(line24);
+		const image_appserver2d = new LeaferUI.Image({
+			x: 1100,
+			y: 150 + 500,
+			url: '/imagesnet/应用服务器.png',
+			draggable: draggable_dev,
+			width: 134,
+			height: 160,
+		})
+		var image_2d_name = new LeaferUI.Text({
+			x: 1100,
+			y: 150 + 500 + 140 + 10,
+			width: 134,
+			fill: fill_top_name,
+			text: '2D可视化系统',
+			textAlign: 'center',
+			verticalAlign: 'middle',
+			textWrap: 'none',
+			padding: 0,
+			fontSize: 12
+		})
+		group.add(image_2d_name)
+		var image_2d_address = new LeaferUI.Text({
+			x: 1100,
+			y: 150 + 500 + 140 + 25,
+			width: 134,
+			fill: fill_top_name,
+			text: '192.168.100.230',
+			textAlign: 'center',
+			verticalAlign: 'middle',
+			textWrap: 'none',
+			padding: 0,
+			fontSize: 12
+		})
+		group.add(image_2d_address)
+
+		const line3 = new LeaferUI.Line({
+			id: 'line3',
+			points: [860, 230, 1500, 330],
+			strokeWidth: 2,
+			stroke: '#cecece',
+			shadow: {
+				x: 0,
+				y: 0,
+				blur: 1,
+				color: '#cecece',
+				visible: true,
+			}
+		})
+		group.add(line3);
+		const image_computer = new LeaferUI.Image({
+			x: 1450,
+			y: 75 + 250,
+			url: '/imagesnet/计算机.png',
+			draggable: draggable_dev,
+			width: 134,
+			height: 160,
+		})
+		var image_computer_name = new LeaferUI.Text({
+			x: 1450,
+			y: 75 + 250 + 140 + 10,
+			width: 134,
+			fill: fill_top_name,
+			text: 'WINCC上位机',
+			textAlign: 'center',
+			verticalAlign: 'middle',
+			textWrap: 'none',
+			padding: 0,
+			fontSize: 12
+		})
+		group.add(image_computer_name)
+		var image_computer_address = new LeaferUI.Text({
+			x: 1450,
+			y: 75 + 250 + 140 + 25,
+			width: 134,
+			fill: fill_top_name,
+			text: '192.168.100.50',
+			textAlign: 'center',
+			verticalAlign: 'middle',
+			textWrap: 'none',
+			padding: 0,
+			fontSize: 12
+		})
+		group.add(image_computer_address)
+
+		//group.add(image_cpu)
+		group.add(image_PLC)
+		group.add(image_et)
+		group.add(image_disk)
+		//group.add(image_valve)
+		group.add(image_server)
+		group.add(image_exchange)
+		group.add(image_computer)
+		group.add(image_appserver)
+		group.add(image_appserver2d)
+		group.add(image_appserver3d)
+
+
+		
+		image_PLC.on(LeaferUI.PointerEvent.DOUBLE_TAP, function () {
+			layer.open({
+				type: 2,   // iframe层类型
+				title: '新设备IO监控',
+				area: ['80%', '95%'],   // 设置弹出层大小
+				content: '/PenMeiReportManage/PenMeiJMReportNew/Index'     // 指定要加载的URL地址
+			});
+		});
+		// var element = layui.element;
+		// debugger;
+		// element.tabAdd('layuiminiTab', {
+		// 	title: '设备IO监控'
+		// 	, content: 'http://localhost:8058/PenMeiReportManage/PenMeiJMReportNew/Index' //支持传入html
+		// 	, id: '/PenMeiReportManage/PenMeiJMReportNew/Index'
+		// });
+		// element.tabChange('layuiminiTab', '/PenMeiChartsManage/PenMeiHistoryTechCharts/Index')
+		// debugger;
+
+		
+
+		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",
+				success: function (redata) {
+
+				}
+			});
+			$.when(myajax).done(function (redata) {
+				//debugger;
+				// leafer.findOne('#' + 'RUN1').fill = fill_rect_io_on;
+				// leafer.findOne('#' + 'RUN').fill = fill_rect_io_on;
+				// leafer.findOne('#' + 'ETH0').fill = fill_rect_io_on;
+				// leafer.findOne('#' + 'ETH1').fill = fill_rect_io_on;
+				// leafer.findOne('#' + 'ETH2').fill = fill_rect_io_on;
+				// for (var ioName in redata) {
+				// 	leafer.findOne('#' + ioName.replace('_', '.')).fill = (redata[ioName] == '1') ? fill_rect_io_on : fill_rect_io_off;
+
+				// }
+				// for (var ioslot = 0; ioslot < 8; ioslot++) {
+				// 	leafer.findOne('#' + 'Slot:' + ioslot + '_OnlineSatate').fill = fill_rect_io_on;
+				// }
+
+			});
+		}
+		t = setTimeout(time, 1 * 1000); //开始运行
+
+
+		var b1 = true;
+		var b11 = false;
+		var b2 = true;
+		var b21 = true;
+		var b22 = true;
+		var b23 = true;
+		var b24 = false;
+		var b3 = false;
+
+		var lineT = true;
+		var t2 = null;
+		function time2() {
+			clearTimeout(t2); //清除定时器
+			UpShadow()
+			if (lineT) {
+				t2 = setTimeout(time2, 1 * 200); //设定定时器，循环运行
+			} else {
+				t2 = setTimeout(time2, 1 * 2000); //设定定时器，循环运行
+			}
+		}
+		//stroke: '#cecece',
+		//shadow: {
+		//	x: 0,
+		//	y: 0,
+		//	blur: 1,
+		//	color: '#cecece',
+		//	visible: true,
+		//	}
+		function lineTT(linename,linestate) {
+			leafer.findOne('#' + linename).shadow.blur = linestate?10:10;
+			leafer.findOne('#' + linename).stroke = linestate ? 'rgb(50,205,121)' : '#FF0000'
+			leafer.findOne('#' + linename).shadow.color = linestate ? 'rgb(50,205,121)' : '#FF0000AA'
+		}
+		function lineTF(linename) {
+			leafer.findOne('#' + linename).shadow.blur = 1;
+			leafer.findOne('#' + linename).stroke = '#cecece'
+			leafer.findOne('#' + linename).shadow.color = '#cecece'
+		}
+		async function UpShadow() {
+			if (lineT) {
+				lineTT("line1", b1)
+				lineTT("line11", b11)
+				lineTT("line2", b2)
+				lineTT("line21", b21)
+				lineTT("line22", b22)
+				lineTT("line23", b23)
+				lineTT("line24", b24)
+				lineTT("line3", b3)
+			} else {
+				lineTF("line1")
+				lineTF("line11")
+				lineTF("line2")
+				lineTF("line21")
+				lineTF("line22")
+				lineTF("line23")
+				lineTF("line24")
+				lineTF("line3")
+			}
+			lineT = !lineT;
+		}
+		t2 = setTimeout(time2, 1 * 300); //开始运行
+	})
+</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>
diff --git a/HT.Cloud.Web/Areas/PenMeiReportManage/Views/PenMeiNetWorkStateNew/Index.cshtml b/HT.Cloud.Web/Areas/PenMeiReportManage/Views/PenMeiNetWorkStateNew/Index.cshtml
new file mode 100644
index 0000000..e70925c
--- /dev/null
+++ b/HT.Cloud.Web/Areas/PenMeiReportManage/Views/PenMeiNetWorkStateNew/Index.cshtml
@@ -0,0 +1,1031 @@
+@{
+	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,
+			element = layui.element,
+			echarts = layui.echarts;
+		wcLoading.close();
+		
+
+		const fShow = true;
+		const tShow = false;
+
+
+		//基准配置项
+		const width_iobox = 300;
+		const width_iobox_16bit = 200;
+		const width_iobox_8bit = 200;
+		const height_iobox = 810;
+
+		const width_iobox_cpu = 200;
+		const width_iobox_cm = 200;
+
+		//拖拽
+		const draggable_dev = true;
+
+		// //开发色彩
+		// 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';
+
+		const leafer = new LeaferUI.Leafer({
+			view: 'idmain', // 支持 window 、div、canvas 标签对象， 可使用id字符串(不用加 # 号)
+			width: 3000, // 不能设置为 0， 否则会变成自动布局
+			height: 900,
+			fill: fill_backgroud,
+			move: {
+				drag: true,
+			},
+			wheel: {
+				zoomMode: true,
+				zoomSpeed: 0.01,
+			},
+			zoom: {
+				min: 0.4,
+				max: 1.5,
+			}
+		})
+
+		const group = new LeaferUI.Group({ x: 0, y: 0 })
+		leafer.add(group)
+		// const image_cpu = new LeaferUI.Image({
+		// 	x: 100,
+		// 	y: 50,
+		// 	url: '/imagesnet/S71500.png',
+		// 	draggable: draggable_dev,
+		// 	height: 80
+		// })
+
+
+
+		var b11 = true;
+		var b12 = true;
+		var b13 = true;
+		var b14 = false;
+		var b21 = true;
+		var b31 = true;
+		var b32 = false;
+		var b33 = true;
+		var b34 = true;
+		var b35 = false;
+
+		if (tShow) { 
+			const t11 = new LeaferUI.Line({
+				id: 'line11',
+				points: [350 + 75, 210, 875, 310],
+				strokeWidth: 2,
+				stroke: '#cecece',
+				shadow: {
+					x: 0,
+					y: 0,
+					blur: 1,
+					color: '#cecece',
+					visible: true,
+				}
+			})
+			const true14 = new LeaferUI.Image({
+				x: (875 - 350 - 75) / 2 + 350 + 75 - 15,
+				y: (310 - 210) / 2 + 210 - 15,
+				url: '/imagesnet/true.png',
+				draggable: draggable_dev,
+				width: 30,
+				height: 30,
+			})
+			group.add(true14)
+		}
+		if (fShow) {
+			const f14 = new LeaferUI.Line({
+				id: 'f14',
+				points: [1250 + 75, 210, 875, 310],
+				strokeWidth: 2,
+				stroke: '#cecece',
+				shadow: {
+					x: 0,
+					y: 0,
+					blur: 1,
+					color: '#cecece',
+					visible: true,
+				}
+			})
+			const false14 = new LeaferUI.Image({
+				x: (1250 + 75 - 875) / 2 + 875 - 15,
+				y: (310 - 210) / 2 + 210 - 15,
+				url: '/imagesnet/false.png',
+				draggable: draggable_dev,
+				width: 30,
+				height: 30,
+			})
+			group.add(false14)
+
+			const f32 = new LeaferUI.Line({
+				id: 'line32',
+				points: [500 + 75, 650, 875, 520],
+				strokeWidth: 2,
+				stroke: '#cecece',
+				shadow: {
+					x: 0,
+					y: 0,
+					blur: 1,
+					color: '#cecece',
+					visible: true,
+				}
+			})
+			const false32 = new LeaferUI.Image({
+				x: (875 - 500 - 75) / 2 + 500 + 75 - 15,
+				y: (650 - 520) / 2 + 520 - 15,
+				url: '/imagesnet/false.png',
+				draggable: draggable_dev,
+				width: 30,
+				height: 30,
+			})
+			group.add(false32)
+
+			const f35 = new LeaferUI.Line({
+				id: 'line35',
+				points: [1400 + 75, 650, 875, 520],
+				strokeWidth: 2,
+				stroke: '#cecece',
+				shadow: {
+					x: 0,
+					y: 0,
+					blur: 1,
+					color: '#cecece',
+					visible: true,
+				}
+			})
+			const false35 = new LeaferUI.Image({
+				x: (1400 + 75 - 875) / 2 + 875 - 15,
+				y: (650 - 520) / 2 + 520 - 15,
+				url: '/imagesnet/false.png',
+				draggable: draggable_dev,
+				width: 30,
+				height: 30,
+			})
+			group.add(false35)
+		}
+		const image_disk = new LeaferUI.Image({
+			x: 350,
+			y: 35,
+			url: '/imagesnet/面板.png',
+			draggable: draggable_dev,
+			width: 134,
+			height: 160,
+		})
+		var image_disk_name = new LeaferUI.Text({
+			x: 350,
+			y: 35 + 140 + 10,
+			width: 134,
+			fill: fill_top_name,
+			text: '数据大屏',
+			textAlign: 'center',
+			verticalAlign: 'middle',
+			textWrap: 'none',
+			padding: 0,
+			fontSize: 12
+		})
+		group.add(image_disk_name)
+		var image_disk_address = new LeaferUI.Text({
+			x: 350,
+			y: 35 + 140 + 25,
+			width: 134,
+			fill: fill_top_name,
+			text: '192.168.100.130',
+			textAlign: 'center',
+			verticalAlign: 'middle',
+			textWrap: 'none',
+			padding: 0,
+			fontSize: 12
+		})
+		group.add(image_disk_address)
+		const line11 = new LeaferUI.Line({
+			id: 'line11',
+			points: [350+75, 210, 875, 310],
+			strokeWidth: 2,
+			stroke: '#cecece',
+			shadow: {
+				x: 0,
+				y: 0,
+				blur: 1,
+				color: '#cecece',
+				visible: true,
+			}
+		})
+		group.add(line11);
+
+
+		const image_appserver = new LeaferUI.Image({
+			x: 650,
+			y: 35,
+			url: '/imagesnet/应用服务器.png',
+			draggable: draggable_dev,
+			width: 134,
+			height: 160,
+		})
+		var image_appserver_name = new LeaferUI.Text({
+			x: 650,
+			y: 35 + 140 + 10,
+			width: 134,
+			fill: fill_top_name,
+			text: '管理系统',
+			textAlign: 'center',
+			verticalAlign: 'middle',
+			textWrap: 'none',
+			padding: 0,
+			fontSize: 12
+		})
+		group.add(image_appserver_name)
+		var image_appserver_address = new LeaferUI.Text({
+			x: 650,
+			y: 35 + 140 + 25,
+			width: 134,
+			fill: fill_top_name,
+			text: '192.168.100.247',
+			textAlign: 'center',
+			verticalAlign: 'middle',
+			textWrap: 'none',
+			padding: 0,
+			fontSize: 12
+		})
+		group.add(image_appserver_address)
+		const line12 = new LeaferUI.Line({
+			id: 'line12',
+			points: [650 + 75, 210, 875, 310],
+			strokeWidth: 2,
+			stroke: '#cecece',
+			shadow: {
+				x: 0,
+				y: 0,
+				blur: 1,
+				color: '#cecece',
+				visible: true,
+			}
+		})
+		group.add(line12);
+
+		const image_appserver3d = new LeaferUI.Image({
+			x: 950,
+			y: 35,
+			url: '/imagesnet/应用服务器.png',
+			draggable: draggable_dev,
+			width: 134,
+			height: 160,
+		})
+		var image_3d_name = new LeaferUI.Text({
+			x: 950,
+			y: 35 + 140 + 10,
+			width: 134,
+			fill: fill_top_name,
+			text: '3D可视化系统',
+			textAlign: 'center',
+			verticalAlign: 'middle',
+			textWrap: 'none',
+			padding: 0,
+			fontSize: 12
+		})
+		group.add(image_3d_name)
+		var image_3d_address = new LeaferUI.Text({
+			x: 950,
+			y: 35 + 140 + 25,
+			width: 134,
+			fill: fill_top_name,
+			text: '192.168.100.220',
+			textAlign: 'center',
+			verticalAlign: 'middle',
+			textWrap: 'none',
+			padding: 0,
+			fontSize: 12
+		})
+		group.add(image_3d_address)
+		const line13 = new LeaferUI.Line({
+			id: 'line13',
+			points: [950 + 75, 210, 875, 310],
+			strokeWidth: 2,
+			stroke: '#cecece',
+			shadow: {
+				x: 0,
+				y: 0,
+				blur: 1,
+				color: '#cecece',
+				visible: true,
+			}
+		})
+		group.add(line13);
+
+		const image_appserver2d = new LeaferUI.Image({
+			x: 1250,
+			y: 35,
+			url: '/imagesnet/应用服务器.png',
+			draggable: draggable_dev,
+			width: 134,
+			height: 160,
+		})
+		var image_2d_name = new LeaferUI.Text({
+			x: 1250,
+			y: 35 + 140 + 10,
+			width: 134,
+			fill: fill_top_name,
+			text: '2D可视化系统',
+			textAlign: 'center',
+			verticalAlign: 'middle',
+			textWrap: 'none',
+			padding: 0,
+			fontSize: 12
+		})
+		group.add(image_2d_name)
+		var image_2d_address = new LeaferUI.Text({
+			x: 1250,
+			y: 35 + 140 + 25,
+			width: 134,
+			fill: fill_top_name,
+			text: '192.168.100.230',
+			textAlign: 'center',
+			verticalAlign: 'middle',
+			textWrap: 'none',
+			padding: 0,
+			fontSize: 12
+		})
+		group.add(image_2d_address)
+		const line14 = new LeaferUI.Line({
+			id: 'line14',
+			points: [1250 + 75, 210, 875, 310],
+			strokeWidth: 2,
+			stroke: '#cecece',
+			shadow: {
+				x: 0,
+				y: 0,
+				blur: 1,
+				color: '#cecece',
+				visible: true,
+			}
+		})
+		group.add(line14);
+
+
+		const image_exchange = new LeaferUI.Image({
+			x: 800,
+			y: 250+75,
+			url: '/imagesnet/交换机.png',
+			draggable: draggable_dev,
+			width: 134,
+			height: 160,
+		})
+		var image_exchange_name = new LeaferUI.Text({
+			x: 800,
+			y: 250 + 75 + 160 + 10,
+			width: 134,
+			fill: fill_top_name,
+			text: '交换机',
+			textAlign: 'center',
+			verticalAlign: 'middle',
+			textWrap: 'none',
+			padding: 0,
+			fontSize: 12
+		})
+		group.add(image_exchange_name)
+		var image_exchange_address = new LeaferUI.Text({
+			x: 800,
+			y: 250 + 75 + 160 + 25,
+			width: 134,
+			fill: fill_top_name,
+			text: '192.168.100.1',
+			textAlign: 'center',
+			verticalAlign: 'middle',
+			textWrap: 'none',
+			padding: 0,
+			fontSize: 12
+		})
+		group.add(image_exchange_address)
+
+		const image_server = new LeaferUI.Image({
+			x: 1300,
+			y: 75 + 250,
+			url: '/imagesnet/服务器.png',
+			draggable: draggable_dev,
+			width: 134,
+			height: 160,
+		})
+		var image_server_name = new LeaferUI.Text({
+			x: 1300,
+			y: 75 + 250 + 140 + 10,
+			width: 134,
+			fill: fill_top_name,
+			text: 'L2服务器',
+			textAlign: 'center',
+			verticalAlign: 'middle',
+			textWrap: 'none',
+			padding: 0,
+			fontSize: 12
+		})
+		group.add(image_server_name)
+		var image_server_address = new LeaferUI.Text({
+			x: 1300,
+			y: 75 + 250 + 140 + 25,
+			width: 134,
+			fill: fill_top_name,
+			text: '192.168.100.15',
+			textAlign: 'center',
+			verticalAlign: 'middle',
+			textWrap: 'none',
+			padding: 0,
+			fontSize: 12
+		})
+		group.add(image_server_address)
+		const line21 = new LeaferUI.Line({
+			id: 'line21',
+			points: [1300, 400, 945, 400],
+			strokeWidth: 2,
+			stroke: '#cecece',
+			shadow: {
+				x: 0,
+				y: 0,
+				blur: 1,
+				color: '#cecece',
+				visible: true,
+			}
+		})
+		group.add(line21);
+
+
+		
+		const image_PLC = new LeaferUI.Image({
+			x: 200,
+			y: 150 + 500,
+			url: '/imagesnet/PLC.png',
+			draggable: draggable_dev,
+			width:134,
+			height: 160,
+		})
+		var image_PLC_name = new LeaferUI.Text({
+			x: 200,
+			y: 150 + 500 + 140 + 10,
+			width: 134,
+			fill: fill_top_name,
+			text: 'S7 400',
+			textAlign: 'center',
+			verticalAlign: 'middle',
+			textWrap: 'none',
+			padding: 0,
+			fontSize: 12
+		})
+		group.add(image_PLC_name)
+		var image_PLC_address = new LeaferUI.Text({
+			x: 200,
+			y: 150 + 500 + 140 + 25,
+			width: 134,
+			fill: fill_top_name,
+			text: '192.168.100.10',
+			textAlign: 'center',
+			verticalAlign: 'middle',
+			textWrap: 'none',
+			padding: 0,
+			fontSize: 12
+		})
+		group.add(image_PLC_address)
+		const line31 = new LeaferUI.Line({
+			id: 'line31',
+			points: [200 + 75, 650, 875, 520],
+			strokeWidth: 2,
+			stroke: '#cecece',
+			shadow: {
+				x: 0,
+				y: 0,
+				blur: 1,
+				color: '#cecece',
+				visible: true,
+			}
+		})
+		group.add(line31);
+
+
+		const image_PLC2 = new LeaferUI.Image({
+			x: 500,
+			y: 150 + 500,
+			url: '/imagesnet/PLC.png',
+			draggable: draggable_dev,
+			width: 134,
+			height: 160,
+		})
+		var image_PLC2_name = new LeaferUI.Text({
+			x: 500,
+			y: 150 + 500+140+10,
+			width: 134,
+			fill: fill_top_name,
+			text: 'S7 300',
+			textAlign: 'center',
+			verticalAlign: 'middle',
+			textWrap: 'none',
+			padding: 0,
+			fontSize: 12
+		})
+		group.add(image_PLC2_name)
+		var image_PLC2_address = new LeaferUI.Text({
+			x: 500,
+			y: 150 + 500 + 140 + 25,
+			width: 134,
+			fill: fill_top_name,
+			text: '192.168.100.20',
+			textAlign: 'center',
+			verticalAlign: 'middle',
+			textWrap: 'none',
+			padding: 0,
+			fontSize: 12
+		})
+		group.add(image_PLC2_address)
+		const line32 = new LeaferUI.Line({
+			id: 'line32',
+			points: [500 + 75, 650, 875, 520],
+			strokeWidth: 2,
+			stroke: '#cecece',
+			shadow: {
+				x: 0,
+				y: 0,
+				blur: 1,
+				color: '#cecece',
+				visible: true,
+			}
+		})
+		group.add(line32);
+
+
+		const image_et = new LeaferUI.Image({
+			x: 800,
+			y: 150 + 500,
+			url: '/imagesnet/PLC.png',
+			draggable: draggable_dev,
+			width: 134,
+			height: 160,
+		})
+		var image_et_name = new LeaferUI.Text({
+			x: 800,
+			y: 150 + 500 + 140 + 10,
+			width: 134,
+			fill: fill_top_name,
+			text: '子站#1 ET200',
+			textAlign: 'center',
+			verticalAlign: 'middle',
+			textWrap: 'none',
+			padding: 0,
+			fontSize: 12
+		})
+		group.add(image_et_name)
+		var image_et_address = new LeaferUI.Text({
+			x: 800,
+			y: 150 + 500 + 140 + 25,
+			width: 134,
+			fill: fill_top_name,
+			text: '192.168.100.130',
+			textAlign: 'center',
+			verticalAlign: 'middle',
+			textWrap: 'none',
+			padding: 0,
+			fontSize: 12
+		})
+		group.add(image_et_address)
+		const line33 = new LeaferUI.Line({
+			id: 'line33',
+			points: [800 + 75, 650, 875, 520],
+			strokeWidth: 2,
+			stroke: '#cecece',
+			shadow: {
+				x: 0,
+				y: 0,
+				blur: 1,
+				color: '#cecece',
+				visible: true,
+			}
+		})
+		group.add(line33);
+
+
+		const image_et2 = new LeaferUI.Image({
+			x: 1100,
+			y: 150 + 500,
+			url: '/imagesnet/PLC.png',
+			draggable: draggable_dev,
+			width: 134,
+			height: 160,
+		})
+		var image_et2_name = new LeaferUI.Text({
+			x: 1100,
+			y: 150 + 500 + 140 + 10,
+			width: 134,
+			fill: fill_top_name,
+			text: '子站#2 S7 200',
+			textAlign: 'center',
+			verticalAlign: 'middle',
+			textWrap: 'none',
+			padding: 0,
+			fontSize: 12
+		})
+		group.add(image_et2_name)
+		var image_et2_address = new LeaferUI.Text({
+			x: 1100,
+			y: 150 + 500 + 140 + 25,
+			width: 134,
+			fill: fill_top_name,
+			text: '192.168.100.140',
+			textAlign: 'center',
+			verticalAlign: 'middle',
+			textWrap: 'none',
+			padding: 0,
+			fontSize: 12
+		})
+		group.add(image_et2_address)
+		const line34 = new LeaferUI.Line({
+			id: 'line34',
+			points: [1100 + 75, 650, 875, 520],
+			strokeWidth: 2,
+			stroke: '#cecece',
+			shadow: {
+				x: 0,
+				y: 0,
+				blur: 1,
+				color: '#cecece',
+				visible: true,
+			}
+		})
+		group.add(line34);
+
+
+		const image_computer = new LeaferUI.Image({
+			x: 1400,
+			y: 150 + 500,
+			url: '/imagesnet/计算机.png',
+			draggable: draggable_dev,
+			width: 134,
+			height: 160,
+		})
+		var image_computer_name = new LeaferUI.Text({
+			x: 1400,
+			y: 150 + 500 + 140 + 10,
+			width: 134,
+			fill: fill_top_name,
+			text: 'WINCC上位机',
+			textAlign: 'center',
+			verticalAlign: 'middle',
+			textWrap: 'none',
+			padding: 0,
+			fontSize: 12
+		})
+		group.add(image_computer_name)
+		var image_computer_address = new LeaferUI.Text({
+			x: 1400,
+			y: 150 + 500 + 140 + 25,
+			width: 134,
+			fill: fill_top_name,
+			text: '192.168.100.50',
+			textAlign: 'center',
+			verticalAlign: 'middle',
+			textWrap: 'none',
+			padding: 0,
+			fontSize: 12
+		})
+		group.add(image_computer_address)
+		const line35 = new LeaferUI.Line({
+			id: 'line35',
+			points: [1400 + 75, 650, 875, 520],
+			strokeWidth: 2,
+			stroke: '#cecece',
+			shadow: {
+				x: 0,
+				y: 0,
+				blur: 1,
+				color: '#cecece',
+				visible: true,
+			}
+		})
+		group.add(line35);
+
+
+
+
+
+		//group.add(image_cpu)
+		group.add(image_PLC)
+		group.add(image_et)
+		group.add(image_PLC2)
+		group.add(image_et2)
+		group.add(image_disk)
+		//group.add(image_valve)
+		group.add(image_server)
+		group.add(image_exchange)
+		group.add(image_computer)
+		group.add(image_appserver)
+		group.add(image_appserver2d)
+		group.add(image_appserver3d)
+
+
+		
+		image_PLC.on(LeaferUI.PointerEvent.DOUBLE_TAP, function () {
+			layer.open({
+				type: 2,   // iframe层类型
+				title: 'S7 400 IO状态',
+				area: ['95%', '95%'],   // 设置弹出层大小
+				content: '/PenMeiReportManage/PenMeiJMReportNew/Index'     // 指定要加载的URL地址
+			});
+		});
+		// var element = layui.element;
+		// debugger;
+		// element.tabAdd('layuiminiTab', {
+		// 	title: '设备IO监控'
+		// 	, content: 'http://localhost:8058/PenMeiReportManage/PenMeiJMReportNew/Index' //支持传入html
+		// 	, id: '/PenMeiReportManage/PenMeiJMReportNew/Index'
+		// });
+		// element.tabChange('layuiminiTab', '/PenMeiChartsManage/PenMeiHistoryTechCharts/Index')
+		// debugger;
+
+		
+
+		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",
+				success: function (redata) {
+
+				}
+			});
+			$.when(myajax).done(function (redata) {
+				//debugger;
+				// leafer.findOne('#' + 'RUN1').fill = fill_rect_io_on;
+				// leafer.findOne('#' + 'RUN').fill = fill_rect_io_on;
+				// leafer.findOne('#' + 'ETH0').fill = fill_rect_io_on;
+				// leafer.findOne('#' + 'ETH1').fill = fill_rect_io_on;
+				// leafer.findOne('#' + 'ETH2').fill = fill_rect_io_on;
+				// for (var ioName in redata) {
+				// 	leafer.findOne('#' + ioName.replace('_', '.')).fill = (redata[ioName] == '1') ? fill_rect_io_on : fill_rect_io_off;
+
+				// }
+				// for (var ioslot = 0; ioslot < 8; ioslot++) {
+				// 	leafer.findOne('#' + 'Slot:' + ioslot + '_OnlineSatate').fill = fill_rect_io_on;
+				// }
+
+			});
+		}
+		t = setTimeout(time, 1 * 1000); //开始运行
+
+
+		
+
+		var lineT = true;
+		var t2 = null;
+		function time2() {
+			clearTimeout(t2); //清除定时器
+			UpShadow()
+			if (lineT) {
+				t2 = setTimeout(time2, 1 * 100); //设定定时器，循环运行
+			} else {
+				t2 = setTimeout(time2, 1 * 500); //设定定时器，循环运行
+			}
+
+			//t2 = setTimeout(time2, 1 * 200); //设定定时器，循环运行
+		}
+		function lineTT(linename,linestate) {
+			leafer.findOne('#' + linename).shadow.blur = linestate?10:10;
+			leafer.findOne('#' + linename).stroke = linestate ? 'rgb(50,205,121)' : '#FF0000'
+			leafer.findOne('#' + linename).shadow.color = linestate ? 'rgb(50,205,121)' : '#FF0000AA'
+		}
+		function lineTF(linename) {
+			leafer.findOne('#' + linename).shadow.blur = 1;
+			leafer.findOne('#' + linename).stroke = '#cecece'
+			leafer.findOne('#' + linename).shadow.color = '#cecece'
+		}
+		async function UpShadow() {
+			if (lineT) {
+				lineTT("line11", b11)
+				lineTT("line12", b12)
+				lineTT("line13", b13)
+				lineTT("line14", b14)
+				lineTT("line21", b21)
+				lineTT("line31", b31)
+				lineTT("line32", b32)
+				lineTT("line33", b33)
+				lineTT("line34", b34)
+				lineTT("line35", b35)
+			} else {
+				lineTF("line11")
+				lineTF("line12")
+				lineTF("line13")
+				lineTF("line14")
+				lineTF("line21")
+				lineTF("line31")
+				lineTF("line32")
+				lineTF("line33")
+				lineTF("line34")
+				lineTF("line35")
+			}
+			 lineT = !lineT;
+		}
+		t2 = setTimeout(time2, 1 * 300); //开始运行
+	})
+</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>
diff --git a/HT.Cloud.Web/DataProtection/key-50c97b30-fc78-4678-8491-609fe36ba677.xml b/HT.Cloud.Web/DataProtection/key-50c97b30-fc78-4678-8491-609fe36ba677.xml
new file mode 100644
index 0000000..49e5c2b
--- /dev/null
+++ b/HT.Cloud.Web/DataProtection/key-50c97b30-fc78-4678-8491-609fe36ba677.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<key id="50c97b30-fc78-4678-8491-609fe36ba677" version="1">
+  <creationDate>2024-01-24T06:56:20.433702Z</creationDate>
+  <activationDate>2024-01-24T06:56:20.2008649Z</activationDate>
+  <expirationDate>2024-04-23T06:56:20.2008649Z</expirationDate>
+  <descriptor deserializerType="Microsoft.AspNetCore.DataProtection.AuthenticatedEncryption.ConfigurationModel.AuthenticatedEncryptorDescriptorDeserializer, Microsoft.AspNetCore.DataProtection, Version=6.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60">
+    <descriptor>
+      <encryption algorithm="AES_256_CBC" />
+      <validation algorithm="HMACSHA256" />
+      <masterKey p4:requiresEncryption="true" xmlns:p4="http://schemas.asp.net/2015/03/dataProtection">
+        <!-- Warning: the key below is in an unencrypted form. -->
+        <value>uqxVELX71LiB9P3EvBDYewROjDOToo7tHjN3gHPuzGDHq9GomkJSKGmqYmQNNA0gyl///qknafQsNDfb8+HCng==</value>
+      </masterKey>
+    </descriptor>
+  </descriptor>
+</key>
\ No newline at end of file
diff --git a/HT.Cloud.Web/wwwroot/images/RJ45.png b/HT.Cloud.Web/wwwroot/images/RJ45.png
new file mode 100644
index 0000000..b8d076a
Binary files /dev/null and b/HT.Cloud.Web/wwwroot/images/RJ45.png differ
diff --git a/HT.Cloud.Web/wwwroot/imagesnet/PLC.png b/HT.Cloud.Web/wwwroot/imagesnet/PLC.png
new file mode 100644
index 0000000..e12d3f5
Binary files /dev/null and b/HT.Cloud.Web/wwwroot/imagesnet/PLC.png differ
diff --git a/HT.Cloud.Web/wwwroot/imagesnet/false.png b/HT.Cloud.Web/wwwroot/imagesnet/false.png
new file mode 100644
index 0000000..1b63782
Binary files /dev/null and b/HT.Cloud.Web/wwwroot/imagesnet/false.png differ
diff --git a/HT.Cloud.Web/wwwroot/imagesnet/true.png b/HT.Cloud.Web/wwwroot/imagesnet/true.png
new file mode 100644
index 0000000..92e0d37
Binary files /dev/null and b/HT.Cloud.Web/wwwroot/imagesnet/true.png differ
diff --git a/HT.Cloud.Web/wwwroot/imagesnet/交换机.png b/HT.Cloud.Web/wwwroot/imagesnet/交换机.png
new file mode 100644
index 0000000..612df4c
Binary files /dev/null and b/HT.Cloud.Web/wwwroot/imagesnet/交换机.png differ
diff --git a/HT.Cloud.Web/wwwroot/imagesnet/应用服务器.png b/HT.Cloud.Web/wwwroot/imagesnet/应用服务器.png
new file mode 100644
index 0000000..7ad9050
Binary files /dev/null and b/HT.Cloud.Web/wwwroot/imagesnet/应用服务器.png differ
diff --git a/HT.Cloud.Web/wwwroot/imagesnet/服务器.png b/HT.Cloud.Web/wwwroot/imagesnet/服务器.png
new file mode 100644
index 0000000..72027a8
Binary files /dev/null and b/HT.Cloud.Web/wwwroot/imagesnet/服务器.png differ
diff --git a/HT.Cloud.Web/wwwroot/imagesnet/磁盘存储.png b/HT.Cloud.Web/wwwroot/imagesnet/磁盘存储.png
new file mode 100644
index 0000000..717fe9b
Binary files /dev/null and b/HT.Cloud.Web/wwwroot/imagesnet/磁盘存储.png differ
diff --git a/HT.Cloud.Web/wwwroot/imagesnet/计算机.png b/HT.Cloud.Web/wwwroot/imagesnet/计算机.png
new file mode 100644
index 0000000..e30b5cf
Binary files /dev/null and b/HT.Cloud.Web/wwwroot/imagesnet/计算机.png differ
diff --git a/HT.Cloud.Web/wwwroot/imagesnet/阀门.png b/HT.Cloud.Web/wwwroot/imagesnet/阀门.png
new file mode 100644
index 0000000..62bd245
Binary files /dev/null and b/HT.Cloud.Web/wwwroot/imagesnet/阀门.png differ
diff --git a/HT.Cloud.Web/wwwroot/imagesnet/面板.png b/HT.Cloud.Web/wwwroot/imagesnet/面板.png
new file mode 100644
index 0000000..18528ac
Binary files /dev/null and b/HT.Cloud.Web/wwwroot/imagesnet/面板.png differ