skyversation
/
meidu2021


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489
							<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  <t:base type="jquery,easyui,tools,DatePicker"></t:base>
  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  
<head>

  <meta name="spreadjs culture" content="zh-cn" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          
    <link rel="stylesheet" type="text/css" href="plug-in/SpreadJS/css/gc.spread.sheets.excel2016colorful.13.1.0.css">
    <script src="plug-in/SpreadJS/scripts/gc.spread.sheets.all.13.1.0.min.js" type="text/javascript"></script>
    <script src="plug-in/SpreadJS/scripts/resources/zh/gc.spread.sheets.resources.zh.13.1.0.min.js" type="text/javascript"></script>
   <script src = "webpage/cn/com/lzt/budget/tempsheet/dataDetail.js" type="text/javascript"></script>
   <script src="plug-in/SpreadJS/license.js" type="text/javascript"></script>
<style>
.sample-tutorial {
    position: relative;
    height: 100%;
    overflow: hidden;
}
.sample-spreadsheets {
    width: calc(100%);
    height: 100%;
    overflow: hidden;
    float: left;
}

.options-container {
    float: right;
    width: 40%;
    /* padding: 12px; */
    padding-left: 12px;
    padding-right: 12px;
    height: 100%;
    box-sizing: border-box;
    background: #fbfbfb;
    overflow: auto;
}

.option-row {
    font-size: 14px;
    margin-top: 10px;
}

label {
    margin-bottom: 6px;
}

input {
    padding: 4px 6px;
}

input[type=button] {
    margin-top: 6px;
}

.buttonStyle{
    width:240px;
    height:30px;
}

.colorPickerContent{
    width: 100%;
    background-color:white;
}

.colorDom{
    width: 14px;
    height: 14px;
    margin:0 0 0 6px;
    display: inline-block;
    border: solid 1px #333333;
    vertical-align: top;
}
body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
    </style>

  
</head>
  
<body style="background:#FFFFFF">
<!-- <form id="form1" runat="server"> -->
        <div>
             <div id="div2">
             <%--查询框begin --%>
		<table cellpadding="0"  cellspacing="1" class="formtable" style="position:fixed;top:5px;"> <!--  bottom -->
		 <tr >
		 	<td align="right" width="600px" style="text-align: left;">
				<label class="Validform_label">预算主体: </label>
			<!-- </td>
		    <td class="value" nowrap> -->
          		 <input id="warehouseId" name="warehouseId" type="hidden"  >
         	     <input name="warehouseName"   type="text" class="inputxt"   style="width: 150px" id="warehouseName" readonly="readonly" />
         		  <span class="Validform_checktip"></span>
                 <label class="Validform_label" style="display: none;">领料点</label>
         			 <t:choose hiddenName="warehouseId" hiddenid="id" url="pOrdersController.do?selectReferWareHouse&classname=cn.com.lzt.warehouse.entity.WarehouseEntity&codefield=warehouseCode&namefield=warehouseName" name="list"
                     left="40%" width="450px" height="700px" icon="icon-search" title="领料点"  textname="warehouseName" isclear="true" isInit="true" ></t:choose>
     		 </td>
     	</tr>
	   <tr>
     		 <td class="value">
     		 <span class="spancon"	title="attType">预算年度：</span>
			</span>
			<input type="text" id="attYear" name="attYear" style="width: 94px;" class="Wdate" onclick="WdatePicker({readOnly:true,enableKeyboard:false,enableInputMask:false,lang:'zh-cn',dateFmt:'yyyy'})">
				<span	style="display:-moz-inline-box;display:inline-block;width: 20px;text-align:center;">年</span>
				<input	type="text" id="attMonth" name="period" style="width: 94px;" class="Wdate" onclick="WdatePicker({readOnly:true,enableKeyboard:false,enableInputMask:false,lang:'zh-cn',dateFmt:'MM'})">
				<span	style="display:-moz-inline-box;display:inline-block;width: 20px;text-align:center;">月</span>
     		 </td>
			<span style="float: left;padding-left: 750px;padding-top: 34px;" > 
			<td height="50px" align="right" colspan="8" valign="top">
				<a  href="#" class="easyui-linkbutton l-btn"  iconcls="icon-search"  onclick="btn_query()">保存</a>  
				<a  href="#" class="easyui-linkbutton l-btn"  iconcls="icon-putout"  onclick="btn_output()">导出word</a>  
			</td>
		</span>
		</tr>
	</table>
	<%--查询框end --%>
	 </div>
	 <br/><br/><br/>
	 <div class="sample-tutorial" style="top: 20px;width:calc(100vw-200px); height:600px;">
        <div id="ss" class="sample-spreadsheets" ></div>
        <!-- <div  id="detail" class="options-container"> -->
        	<!-- <div class="option-row">
                操作<br/>
	            <div class="option-row">
	                <input id="addBackgroundColorMenuSelection" type="checkbox" />
	                <label for="addBackgroundColorMenuSelection">Add background color menu selection</label>
	            </div>
	        </div> -->
	    </div>
    </div>

<script>

var spreadNS = GC.Spread.Sheets;

window.onload = function () {
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 1 });
    initSpread(spread);
    initMenu(spread);
};

function initSpread(spread) {
    var sheet = spread.getSheet(0);
    // 自定义命令替换右键菜单命令
    spread.commandManager().register("customInsertRows",
        {
            canUndo: true,
            execute: function (context, options, isUndo) {
                var Commands = GC.Spread.Sheets.Commands;
                // 在此加cmd
                options.cmd = "customInsertRows";
                if (isUndo) {
                    Commands.undoTransaction(context, options);
                    return true;
                } else {
                    Commands.startTransaction(context, options);
                    spread.commandManager().execute({
                        cmd: "gc.spread.contextMenu.insertRows",
                        sheetName: sheet.name(),
                        activeRow: options.activeRow,
                        activeCol: options.activeCol,
                        selections: options.selections
                    });
                    // 在此定义用户自己的逻辑
                    var colCount = sheet.getColumnCount();
                    for(var i = 0; i < colCount; i++){
                        sheet.getCell(options.activeRow, i).locked(false);
                    }
                    Commands.endTransaction(context, options);
                    return true;
                }
            }
        });
    
    sheet.suspendPaint();
    //设置省略符
    sheet.getDefaultStyle().showEllipsis = true;
        
    var cfs = sheet.conditionalFormats ;
//11
    var table = sheet.tables.add("tblOperatingExpenses2", 4, 1, 51, 6, new spreadNS.Tables.TableTheme());
    table.showFooter(true);

    var dataTable = [];
    dataTable[0] = new Array("_", "预算指标", "不含税金额", "价税金额", "指标说明", "预算备注");
    dataTable[1] = new Array(0, "项目人员薪资及附加", 600, 545, "标准工时工资，不含餐费", null);
    dataTable[2] = new Array(0, "    岗位编制", 125, 150, null, null);
    dataTable[3] = new Array(0, "        保安岗编制", 11, 11, null, null);
    dataTable[4] = new Array(0, "        保洁岗编制", 8, 8, null, null);
    dataTable[5] = new Array(0, "        工程岗编制", 4, 4, null, null);
    dataTable[6] = new Array(0, "        会务岗编制", 2, 2, null, null);
    dataTable[7] = new Array(0, "        宿管岗编制", 0, 0, null, null);
    dataTable[8] = new Array(0, "        管理岗编制", 3, 3, null, null);
    dataTable[9] = new Array(0, "    工资", 125, 150, null, null);
    dataTable[10] = new Array(0, "        保安工资", 550000, 550000, null, null);
    dataTable[11] = new Array(0, "        保洁工资", 230300, 230300, null, null);
    dataTable[12] = new Array(0, "        工程工资", 150000, 150000, null, null);
    dataTable[13] = new Array(0, "        会务工资", 100000, 100000, null, null);
    dataTable[14] = new Array(0, "        宿管工资", 0, 0, null, null);
    dataTable[15] = new Array(0, "        管理人员工资", 239400, 239400, null, null);
    dataTable[16] = new Array(0, "    加班费", 1000, 1000, "排班加班工时、额外申请加班工时（非业主付费）、国定加班工时。不含餐费、交通费等", null);
    dataTable[17] = new Array(0, "        保安加班费", 500, 630, null, null);
    dataTable[18] = new Array(0, "        保洁加班费", 350, 375, null, null);
    dataTable[19] = new Array(0, "        工程加班费", 400, 370, null, null);
    dataTable[20] = new Array(0, "        会务加班费", 500, 435, null, null);
    dataTable[21] = new Array(0, "        宿管加班费", 600, 545, null, null);
    dataTable[22] = new Array(0, "    社保", 125, 150, null, null);
    dataTable[23] = new Array(0, "	  公积金", 100, 100, null, null);
    dataTable[24] = new Array(0, "	  日常餐补", 100, 90, null, null);
    dataTable[25] = new Array(0, "        保安餐补", 150, 145, null, null);
    dataTable[26] = new Array(0, "	      保洁餐补", 1000, 1000, null, null);
    dataTable[27] = new Array(0, "	      工程餐补", 500, 630, null, null);
    dataTable[28] = new Array(0, "	      会务餐补", 350, 375, null, null);
    dataTable[29] = new Array(0, "        宿管餐补", 400, 370, null, null);
    dataTable[30] = new Array(0, "        管理人员餐补", 500, 435, null, null);
    dataTable[31] = new Array(0, "    福利费", 600, 545, null, null);
    dataTable[32] = new Array(0, "        员工补助", 125, 150, null, null);
    dataTable[33] = new Array(0, "	      节日福利费", 100, 100, null, null);
    dataTable[34] = new Array(0, "	      团队建设费", 100, 90, null, null);
    dataTable[35] = new Array(0, "集约化分摊", 150, 145, null, null);
    dataTable[36] = new Array(0, "	  工程集约化", 1000, 1000, null, null);
    dataTable[37] = new Array(0, "	  管理集约化", 500, 630, null, null);
    dataTable[38] = new Array(0, "项目培训费", 350, 375, null, null);
    dataTable[39] = new Array(0, "    保安培训", 400, 370, null, null);
    dataTable[40] = new Array(0, "        资格证书", 500, 435, null, null);
    dataTable[41] = new Array(0, "        复证费", 600, 545, null, null);
    dataTable[42] = new Array(0, "        培训课程及书籍", 125, 150, null, null);
    dataTable[43] = new Array(0, "	      培训差旅餐费", 100, 100, null, null);
    dataTable[44] = new Array(0, "绩效评价指标",null ,null, null, null);
    dataTable[45] = new Array(0, "    年休使用率", 2.00,  1.28, "年休工时/加班工时", null);
    dataTable[46] = new Array(0, "	  经济补偿率", 2.00,  1.89, "经济赔偿次数/员工数量", null);
    dataTable[47] = new Array(0, "	  调休使用率", 2.00,  2.1, "调休工时/加班工时", null);
    dataTable[48] = new Array(0, "	  物料采购业主支付比例", 2.00,  1.33, "业主支付费用/物料采购费用", null);
    dataTable[49] = new Array(0, "    业主支付加班费比例", 2.00,  3.58, "业主支付费用/加班工时费", null);
    dataTable[50] = new Array(0, ".........", 2.00,  3.58, null, null);
    dataTable[51] = new Array(0, "合计", 0, 0, null, null);

    sheet.addSpan(0, 1, 1, 4);
    sheet.addSpan(0, 5, 1, 2);
    sheet.addSpan(1, 1, 1, 6);
    sheet.addSpan(2, 1, 1, 6);
    sheet.addSpan(3, 1, 1, 2);
   // sheet.addSpan(16, 1, 1, 6);
   // sheet.addSpan(17, 1, 1, 6);

    sheet.getDefaultStyle().vAlign = spreadNS.VerticalAlign.center;
    sheet.getDefaultStyle().font = "lighter 10pt Calibri";
    sheet.getDefaultStyle().foreColor = "rgb(68, 84, 106)";
    sheet.options.gridline = { showVerticalGridline: false, showHorizontalGridline: false };
    sheet.getCell(0, 1).value("项目运营成本预算表").font("lighter 28pt Calibri")
    .hAlign(spreadNS.HorizontalAlign.center);
    sheet.getCell(0, 5).value("美都环卫物业-青浦工业园区【2020年度】").font("11pt Calibri").foreColor("rgb(64, 64, 64)")
        .hAlign(spreadNS.HorizontalAlign.right).vAlign(spreadNS.VerticalAlign.bottom);
    sheet.getCell(3, 1).value("指标预算").font("bold 13pt Calibri ").foreColor("rgb(64, 64, 64)");
    
    sheet.getCell(3, 5).value("项目经理绩效奖(预计)：").font("bold 13pt Calibri ").foreColor("rgb(64, 64, 64)");
    sheet.getCell(3, 6).value("￥17680.00").font("bold 13pt Calibri ").foreColor("rgb(64, 64, 64)");
    sheet.getCell(3, 6).formatter('"￥"#,##0.00');
    //奖金公式设置
    sheet.getCell(3, 6).formula('=(2280000-D6)*0.04');
    
    sheet.getRange(4, 1, 1, 6).font("bold 10pt Calibri")
        .borderTop(new spreadNS.LineBorder("rgb(217,217,217)", spreadNS.LineStyle.thin));
    //15
    sheet.getRange(55, 1, 1, 6).font("bold 10pt Calibri")
        .borderBottom(new spreadNS.LineBorder("rgb(217,217,217)", spreadNS.LineStyle.thin));
    sheet.getRange(3, 1, 1, 2)
        .borderLeft(new spreadNS.LineBorder("rgb(217,217,217)", spreadNS.LineStyle.thin))
        .borderTop(new spreadNS.LineBorder("rgb(217,217,217)", spreadNS.LineStyle.thin))
        .borderRight(new spreadNS.LineBorder("rgb(217,217,217)", spreadNS.LineStyle.thin));
    //12 getRange (row col rowcount colcount)
    sheet.getRange(4, 1, 52, 1).borderLeft(new spreadNS.LineBorder("rgb(217,217,217)", spreadNS.LineStyle.thin)).hAlign(spreadNS.HorizontalAlign.center);
    //12
    sheet.getRange(4, 6, 52, 1).borderRight(new spreadNS.LineBorder("rgb(217,217,217)", spreadNS.LineStyle.thin));
    //10
    sheet.getRange(5, 1, 50, 6).borderBottom(new spreadNS.LineBorder("rgb(217,217,217)", spreadNS.LineStyle.dashed));;
//16
    for (var row = 4; row < 56; row++) {
        for (var col = 1; col < 7; col++) {
            sheet.setValue(row, col, dataTable[row - 4][col - 1]);
        }
    }

    var rowHeights = new Array(74, 4, 20);
    for (var row = 0; row < 3; row++) {
        sheet.setRowHeight(row, rowHeights[row]);
    }
    //
    for (var row = 3; row < 56; row++) {
        sheet.setRowHeight(row, 24);
    }
    //
    sheet.setRowHeight(56, 4);

    var colWidths = new Array(18, 110, 180, 180, 180, 180, 180);
    for (var col = 0; col < 7; col++) {
        sheet.setColumnWidth(col, colWidths[col]);
    }

    sheet.getRange(1, 1, 1, 6)
        .borderTop(new spreadNS.LineBorder("rgb(217,217,217)", spreadNS.LineStyle.thick))
        .borderBottom(new spreadNS.LineBorder("rgb(217,217,217)", spreadNS.LineStyle.thin));
//17
    sheet.getRange(56, 1, 1, 6)
        .borderTop(new spreadNS.LineBorder("rgb(217,217,217)", spreadNS.LineStyle.thick))
        .borderBottom(new spreadNS.LineBorder("rgb(217,217,217)", spreadNS.LineStyle.thin));
//13
    sheet.getRange(3, 3, 45, 2).formatter('"￥"#,##0.00');
    
    sheet.getRange(49, 3, 6, 2).formatter('##0.00"%"');
    
    sheet.getRange(6, 3, 8, 2).formatter('""#,##0');
    //12
    //sheet.getRange(3, 6, 52, 1).formatter('0%');
    //15
    sheet.getCell(55, 6).formatter('0.0%');
    //
    sheet.getCell(6, 3).formula('=SUM(D8:D13)');
    sheet.getCell(6, 4).formula('=SUM(E8:E13)');
    
    sheet.getCell(13, 3).formula('=SUM(D15:D20)');
    sheet.getCell(13, 4).formula('=SUM(E15:E20)');
    
    sheet.getCell(20, 3).formula('=SUM(D22:D26)');
    sheet.getCell(20, 4).formula('=SUM(E22:E26)'); 
    
    sheet.getCell(5, 3).formula('=D7+D14+D21');
    sheet.getCell(5, 4).formula('=E7+E14+E21');
    sheet.frozenRowCount(5);
    var iconSetRule1 = new spreadNS.ConditionalFormatting.IconSetRule();
    //15
    iconSetRule1.ranges([new spreadNS.Range(55, 1, 1, 1)]);
    iconSetRule1.iconSetType(spreadNS.ConditionalFormatting.IconSetType.threeSymbolsCircled)
        .showIconOnly(true);
    var icons = iconSetRule1.iconCriteria();
    icons[0] = new spreadNS.ConditionalFormatting.IconCriterion(false, spreadNS.ConditionalFormatting.IconValueType.number, -1);
    icons[1] = new spreadNS.ConditionalFormatting.IconCriterion(true, spreadNS.ConditionalFormatting.IconValueType.number, 1);
    cfs.addRule(iconSetRule1);


    var style = new spreadNS.Style();
    style.foreColor = "red";
    //15
    cfs.addCellValueRule(spreadNS.ConditionalFormatting.ComparisonOperators.lessThan, 0, 0, style, [new spreadNS.Range(55, 5, 1, 2)]);


    var dataBarRule1 = new spreadNS.ConditionalFormatting.DataBarRule();
    dataBarRule1.minType(spreadNS.ConditionalFormatting.ScaleValueType.automin);
    dataBarRule1.maxType(spreadNS.ConditionalFormatting.ScaleValueType.automax);
    //10
   /*  dataBarRule1.ranges([new spreadNS.Range(5, 4, 43, 1)]);
    dataBarRule1.color("orange").showBorder(true).borderColor("orange").dataBarDirection(spreadNS.ConditionalFormatting.BarDirection.rightToLeft);
    cfs.addRule(dataBarRule1); */


    var dataBarRule2 = new spreadNS.ConditionalFormatting.DataBarRule();
    dataBarRule2.minType(spreadNS.ConditionalFormatting.ScaleValueType.automin);
    dataBarRule2.maxType(spreadNS.ConditionalFormatting.ScaleValueType.automax);
    //10
    dataBarRule2.ranges([new spreadNS.Range(5, 3, 43, 1)]);
    dataBarRule2.color("rgb(0,138,239)").showBorder(true).borderColor("rgb(0,138,239)");
    cfs.addRule(dataBarRule2);


    var dataBarRule3 = new spreadNS.ConditionalFormatting.DataBarRule();
    dataBarRule3.minType(spreadNS.ConditionalFormatting.ScaleValueType.lowestValue);
    dataBarRule3.maxType(spreadNS.ConditionalFormatting.ScaleValueType.highestValue);
    //10
/*     dataBarRule3.ranges([new spreadNS.Range(5, 6, 50, 1)]);
    dataBarRule3.color("rgb(91,155,213)").showBorder(true).borderColor("rgb(91,155,213)")
        .negativeFillColor("rgb(237,125,49)").useNegativeBorderColor(true).negativeBorderColor("rgb(237,125,49)")
        .axisPosition(spreadNS.ConditionalFormatting.DataBarAxisPosition.cellMidPoint);
    cfs.addRule(dataBarRule3); */

    var iconSetRule2 = new spreadNS.ConditionalFormatting.IconSetRule();
    //10
    iconSetRule2.ranges([new spreadNS.Range(5, 1, 50, 1)]);
    iconSetRule2.iconSetType(spreadNS.ConditionalFormatting.IconSetType.threeSymbolsUncircled)
        .reverseIconOrder(true)
        .showIconOnly(true);
    cfs.addRule(iconSetRule2);

    //table.setColumnFormula(0, "=tblOperatingExpenses2[[#Totals],[差率 (%)]]");
    table.setColumnFormula(2, "=SUBTOTAL(109,[预算金额])");
    table.setColumnFormula(3, "=SUBTOTAL(109,[预算价税合计])");
   // table.setColumnFormula(4, "=SUBTOTAL(109,[填报说明])");
    //table.setColumnFormula(5, '=IFERROR(SUM(tblOperatingExpenses2[[#Totals],[填报说明]]/tblOperatingExpenses2[[#Totals],[预算金额]]),"")');

    table.setColumnDataFormula(0, '=IFERROR([@预算价税合计]/[@预算金额],"")');
    //table.setColumnDataFormula(4, '=[@预算金额]-[@预算价税合计]');
    //去掉一个单元格的公式
    sheet.getCell(48,5).formula('').text('');
   // table.setColumnDataFormula(5, '=IFERROR([@[填报说明]]/[@预算金额],"")');

    sheet.resumePaint();
}

function initMenu(spread){
	var commandManager = spread.commandManager();
    var selectActualDetailbtn = {
        text: "人员工资预算子表",
        name: "selectActualDetail" ,
        workArea: "viewport",
        command: "selectActualDetailcommand"
    };
    //清空原有按钮
    //spread.contextMenu.menuData = new Array();
    //添加自定义按钮
    spread.contextMenu.menuData.push(selectActualDetailbtn);
    //响应事件在这里写代码
    var selectActualDetailCommand = {
        canUndo: false,
        execute: function (spread, options) {
        	showBudgetSub();
        return true;
        }
    };
    commandManager.register("selectActualDetailcommand", selectActualDetailCommand, null, false, false, false, false);
}
function showBudgetSub(){
	var url = 'budgetTempSheetController.do?budgetSubDemo';
	$.dialog({
		title:'人力资源成本分表',
	    content: 'url:'+ url,
		zIndex: getzIndex(),
		lock: true, 
		width: window.top.document.body.offsetWidth ,
	    height: window.top.document.body.offsetHeight-100,
	    cache:false,
	    button: [
	        {
	            name: '<t:mutiLang langKey="common.confirm"/>',
	            callback: function(){
	            	/* 
	            	//获得子页面getReason()方法中的值
			    	var iframe = this.iframe.contentWindow;
			    	if(iframe.getReason().length>0){
			    		var strData=eval(iframe.getReason());
			    		var maintainids="";
			    		for(var key in strData[0]){
			    			if(key=="id"){
			    				maintainids=strData[0][key];
			    			}
			    		}
			    		if(maintainids.length > 0)
			    		{
			    			//addApply(cid,contractType,maintainids);
			    		} 
			    	}
	            	*/
	            },
	            focus: true
	        },
	        {
	            name: '<t:mutiLang langKey="common.cancel"/>',
	            callback: function(){
	            	//refresh();
	            }
	        }
	    ]
	});
}

function btn_output(){
	var url = "budgetTempSheetController.do?downloadword";
	layer.msg('数据导出中，请稍候···', {
        time : 6000,
        shade: 0.1});

	window.location.href = url; //encodeURI(fields+params+id);
}
</script>
  
</body>
  
</html>