HTCloud/HT.Cloud.Web/Areas/PenMeiReportManage/Views/PenMeiJMReportNew/Index - 副本 (2).cshtml

@{
    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 iotype = iogroup[i].IOType;
			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(iotype == 'Digital')
			{
				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)
				}
			} else if (iotype == 'Analog') {
				if (iobit == '32') {
					ioboxwidth = 300;
					var offset = 2;
					initx = initx + offset
					var box = Draw32bitAnalogIOBox(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 Draw32bitAnalogIOBox(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)
				}

			}


			//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_io_on,
					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_Avalue = new LeaferUI.Text({
					x: io_rect_name_left_x_32bit + io_rect_name_left_width_32bit,
					y: y + io_rect_name_left_y_offset_32bit,
					width: io_rect_description_left_width_32bit,
					fill: fill_rect_text_name,
					text: 111111,
					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_io_on,
					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_Avalue);
				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 Draw16bitAnalogIOBox(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 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>