skyversation
/
meidu2021


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
							<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
<!DOCTYPE html>
<html>
<head>
 <t:base type="jquery,easyui,tools,DatePicker"></t:base>
 <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="plug-in/SpreadJS/license.js" type="text/javascript"></script>
 <script src="webpage/cn/com/lzt/budget/data/js/budget_tools.js" type="text/javascript"></script>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <style>
 html{
     height:100%;
 }
 body{
     height:98%;
     width:98%;
 }
 .diffWrap{
     height: calc(100% - 40px);
     display:flex;
     flex-direction: column;
 }
  .sample-spreadsheets{
     width:100%;
      height:100%;
  }
 fieldset{
     flex:1;
     border: 1px solid #E6E6E6;
     width:98%;
     padding:5px;
 }
 </style>
</head>
<body>
选择预算表：
<input type="hidden" id="instId" name="instId" value="${inst.id}"/>
<input id="instName" name="instName" type="text" style="width: 200px" readonly="readonly" class="inputxt" placeholder="请选择预算表" value="${inst.instName}"/>
<a href="javascript:void(0)" class="easyui-linkbutton" plain="true" icon="icon-select"  onclick="openInst()">选择</a>
版本一
<input type="hidden" id="version0Id" name="version0" value="${instVersion1.id}"/>
<input id="version0" name="version0" type="text" style="width: 200px" readonly="readonly" class="inputxt" placeholder="请选择版本" value="${instVersion1.name}"/>
<a href="javascript:void(0)" class="easyui-linkbutton" plain="true" icon="icon-select"  onclick="openVersion0()">选择</a>
版本二
<input type="hidden" id="version1Id" name="version1Id" value="${instVersion2.id}"/>
<input id="version1" name="version1" type="text" style="width: 200px" readonly="readonly" class="inputxt" placeholder="请选择版本" value="${instVersion2.name}"/>
<a href="javascript:void(0)" class="easyui-linkbutton" plain="true" icon="icon-select"  onclick="openVersion1()">选择</a>
<a href="javascript:void(0)" class="easyui-linkbutton" plain="true" icon="icon-select"  onclick="diff()">对比</a>

<div class="diffWrap">
    <fieldset>
        <legend>版本1</legend>
        <div id="v0" class="sample-spreadsheets"></div>
    </fieldset>
    <fieldset>
        <legend>版本2</legend>
        <div id="v1" class="sample-spreadsheets"></div>
    </fieldset>
</div>
</body>
<script>
    function openInst() {
        var url ='budgetInstController.do?select';
        _select(url, '选择预算表', function (selectedRows) {
            var one = selectedRows[0];
            var id = one.id;
            var name = one.instName;
            $('#instId').val(id);
            $('#instName').val(name);
        }, '800px', '600px');
    }
    function openVersion0(){
        openVersion(0);
    }
    function openVersion1(){
        openVersion(1);
    }
    function openVersion(index){
        var instId= $('#instId').val();
        var url ='budgetInstVersionController.do?select&noAuth=1&instId='+instId;
        _select(url, '选择版本', function (selectedRows) {
            var one = selectedRows[0];
            $('#version'+index).val(one.name);
            getSelectVersion(one.id,index);
        }, '800px', '600px');
    }

    function getSelectVersion(id,index){
        $.ajax({
            url: 'budgetInstVersionController/'+id+".do"
            ,dataType:'json'
            ,type:'GET'
            ,async:false
            ,success:function (d) {
                var json =d.json;
                if(index==0) {
                    spread0.fromJSON(JSON.parse(json));
                    ready0=true;
                }
                if(index==1) {
                    spread1.fromJSON(JSON.parse(json));
                    ready1=true;
                }
                setTimeout(bindRowColumnChange,500);
            }
        });
    }

    var spread0,spread1;
    var ready0=false;
    var ready1=false;

    $(function(){
         spread0 = new GC.Spread.Sheets.Workbook(document.getElementById("v0"), { sheetCount: 1 });
         spread1 = new GC.Spread.Sheets.Workbook(document.getElementById("v1"), { sheetCount: 1 });
         var v0Id = $('#version0Id').val()
        if(v0Id){
            getSelectVersion(v0Id,0);
        }
        var v1Id = $('#version1Id').val()
        if(v1Id){
            getSelectVersion(v1Id,1);
        }
        diff();
    })

    function diff(){
        if(!ready0 | !ready1) return;
        var layerIndex = layer.msg('对比中，请稍候···', {
            time : 3000*1000,
            shade: 0.1});
       setTimeout(function(){
           spread0.options.highlightInvalidData = true;
           spread1.options.highlightInvalidData = true;
           var sheet0 = spread0.getActiveSheet();
           var sheet1 = spread1.getActiveSheet();
           loopAllCell(sheet0,function(row,col){
               var v0=sheet0.getValue(row,col);
               var v1=sheet1.getValue(row,col);
               if(v0!=v1){
                   var validator = createValidator(v1);
                   sheet0.getCell(row,col).validator(validator);
               }
           });
           loopAllCell(sheet1,function(row,col){
               var v0=sheet0.getValue(row,col);
               var v1=sheet1.getValue(row,col);
               if(v0!=v1){
                   var validator = createValidator(v0);
                   sheet1.getCell(row,col).validator(validator);
               }
           });
           layer.close(layerIndex);
       },1000);
    }

    function loopAllCell(sheet,fn){
        var rowCount = sheet.getRowCount();
        var colCount = sheet.getColumnCount();
        for(var i=0;i<rowCount;i++){
            for(var j=0;j<colCount;j++){
                fn(i,j);
            }
        }
    }

    function createValidator(equalsToValue){
        var nCondition = new GC.Spread.Sheets.ConditionalFormatting.Condition(GC.Spread.Sheets.ConditionalFormatting.ConditionType.cellValueCondition);
        nCondition.compareType(GC.Spread.Sheets.ConditionalFormatting.GeneralComparisonOperators.equalsTo);
        nCondition.expected(equalsToValue);
        nCondition.treatNullValueAsZero(false);
        var validator = new GC.Spread.Sheets.DataValidation.DefaultDataValidator(nCondition);
        validator.type(GC.Spread.Sheets.DataValidation.CriteriaType.custom);
        validator.ignoreBlank(false);
        validator.highlightStyle({
            type: GC.Spread.Sheets.DataValidation.HighlightType.dogEar,
            color: 'red',
            position: GC.Spread.Sheets.DataValidation.HighlightPosition.topLeft
        });
        return validator;
    }

    function bindRowColumnChange(){
        if(!ready0 | !ready1) return;
        var sheet0 = spread0.getActiveSheet();
        var sheet1 = spread1.getActiveSheet();
        sheet0.unbindAll();
        sheet1.unbindAll();
        sheet0.bind(GC.Spread.Sheets.Events.TopRowChanged, function (sender, args) {
            //将显示的sheet1的顶部行设置为sheet2(垂直滚动同步)。
            sheet1.showRow(args.newTopRow, GC.Spread.Sheets.VerticalPosition.top);
        });
        sheet1.bind(GC.Spread.Sheets.Events.TopRowChanged, function (sender, args) {
            //将显示的sheet1的顶部行设置为sheet2(垂直滚动同步)。
            sheet0.showRow(args.newTopRow, GC.Spread.Sheets.VerticalPosition.top);
        });
        sheet0.bind(GC.Spread.Sheets.Events.LeftColumnChanged, function (sender, args) {
            //将sheet1显示的左列设置为sheet2(水平滚动同步)。
            sheet1.showColumn(args.newLeftCol, GC.Spread.Sheets.HorizontalPosition.left);
        });
        sheet1.bind(GC.Spread.Sheets.Events.LeftColumnChanged, function (sender, args) {
            //将sheet1显示的左列设置为sheet2(水平滚动同步)。
            sheet0.showColumn(args.newLeftCol, GC.Spread.Sheets.HorizontalPosition.left);
        });
    }
</script>
</html>