gdsx/WebRoot/Html5/Script/ReportShow.js

function CreateReportShow(x,y,width,height,pageHeight)
{ 	 
	 //列表控件
	 listView = new ht.widget.ListView();
	 //listView.setCheckMode(true);
	 var SelectTime="";
	 listView.onDataClicked=function(data)//选择某个数据
	 {
	 	  if(!data)
	 	  return;
	 	  SelectTime=data.a('Name');
	 }
	 
	 //布局控件
	 borderPaneDayReport = new ht.widget.BorderPane(); 
	 borderPaneDayReport.setLeftView(listView, 180); 
	 
	 //表格控件
	 var ReportDiv=document.createElement("div");
   var ReportDivChild=document.createElement("div");
   ReportDiv.appendChild(ReportDivChild);
   ReportDivChild.className="sample-turtorial";
   
   var reportWidth=width-180;
   var reportHeight=(height)*document.documentElement.clientHeight /pageHeight-28;
   ReportDivChild.style='width:'+reportWidth+'px; height:'+reportHeight+'px;border: 1px solid gray;';
   ReportSpread =new GC.Spread.Sheets.Workbook(ReportDivChild, { sheetCount: 1 });
      
  
   
   //表格加入布局
   //borderPaneDayReport.setRightView(ReportDiv,width-180);
   borderPaneDayReport.setCenterView(ReportDiv);
   
   var NodeStartTimeDiv=document.createElement("div");  
   NodeStartTimeDiv.innerHTML = '<div id ="NodeStartTimeDiv"   class = "dateTimePicker" style = "width:100px,height:10px,font-size:10.66664px;background-color:rgba(255,255,255,1);border-color:rgba(0,0,0,1);color:rgba(0,0,0,1);"></div>';
   document.body.appendChild(NodeStartTimeDiv); 
   
   var NodeEndTimeDiv=document.createElement("div");  
   NodeEndTimeDiv.innerHTML = '<div id ="NodeEndTimeDiv"   class = "dateTimePicker" style = "width:100px,height:10px,font-size:10.66664px;background-color:rgba(255,255,255,1);border-color:rgba(0,0,0,1);color:rgba(0,0,0,1);"></div>';
   document.body.appendChild(NodeEndTimeDiv); 
	 
	 toolbar = new ht.widget.Toolbar();
	 borderPaneDayReport.setTopView(toolbar);
	 
	 //按钮
	 lookButton1=new ht.widget.Button();
	 lookButton1.setWidth(40);
	 lookButton1.setLabel("查看");
	 lookButton1.setBorderColor("#4682B4");
	 lookButton1.setBackground("#4682B4");
	 lookButton1.setLabelColor("#FFFAF0");
	 
	 lookButton1.onClicked= function(e)
	 {
      SetTimeSelectDivValue(NodeStartTimeDiv,SelectTime,"date");
      var tempEndTime1=new Date(Date.parse(SelectTime));
      tempEndTime1.setDate(tempEndTime1.getDate()+1);
      SetTimeSelectDivValue(NodeEndTimeDiv,tempEndTime1.toString(),"date");
   }
	 
	 downloadButton1=new ht.widget.Button();
	 downloadButton1.setWidth(40);
	 downloadButton1.setLabel("导出");
	 downloadButton1.setBorderColor("#4682B4");
	 downloadButton1.setBackground("#4682B4");
	 downloadButton1.setLabelColor("#FFFAF0");
	 
	 lookButton2=new ht.widget.Button();
	 lookButton2.setWidth(40);
	 lookButton2.setLabel("查询");
	 lookButton2.setBorderColor("#4682B4");
	 lookButton2.setBackground("#4682B4");
	 lookButton2.setLabelColor("#FFFAF0");
	 
	 downloadButton2=new ht.widget.Button();
	 downloadButton2.setWidth(40);
	 downloadButton2.setLabel("导出");
	 downloadButton2.setBorderColor("#4682B4");
	 downloadButton2.setBackground("#4682B4");
	 downloadButton2.setLabelColor("#FFFAF0");
	 
	 
	
	 toolbar.getSelectBackground = function(item){ return '#3D97D0'; };
   toolbar.setItems([                    
                    {
                        id: 'text',
                        label: '',
                        icon: 'image/search.png',
                        textField: {
                            width: 80
                        }
                    },
                    
                    {
                        label: '',
                        element:lookButton1
                    },
                    
                    {
                        label: '',
                        element:downloadButton1
                    },
                    {      
                        id: 'nation',
                        label: '开始时间 ',   
                    },
                    {      
                        id: 'nation',
                        label: ' ',                        
                        element: NodeStartTimeDiv
                    },
                     {      
                        id: 'nation',
                        label: '结束时间 ',   
                    },
                    {      
                        id: 'nation',
                        label: ' ',                        
                        element: NodeEndTimeDiv
                    },
                     {
                        label: '',
                        element:lookButton2
                    }, 
                   
                    {
                        label: '',
                        element:downloadButton2
                    },
                ]);  
  toolbar.getItemById('text').element.getElement().onkeyup = function(e){
                    listView.invalidateModel();
                };
                
  //时间选择控件  初始化时间
  (function (elem, timeValue, type) {
    timeValue = getRelativeDate(timeValue, type);
    laydate.render({
        elem: elem,
        type: type,
        value: timeValue,
        done: function(value, date){
            setTimeout(function () {
                ;
            }, 100)
        }
    });
    ;
})(NodeStartTimeDiv, '2017-09-21', 'date');
   
   //时间选择控件 初始化时间
  SetTimeSelectDivValue(NodeEndTimeDiv, '2017-01-01', 'date');  
                
                
                
  //建立一个websocket链接
  var socket = new WebSocket('ws://localhost:10087/Command'); 

  // 打开Socket 
  socket.onopen = function(event) 
  { 
     console.log('web socket connceted!',event); 
     
     //请求报表js数据
     var obj=new CommandObj();
     obj.method="GetReportJsFile";
     obj.parm1="day";
     var objStr=JSON.stringify(obj);
     socket.send(objStr);
     //请求报表生成日期列表
     socket.send("{\"method\":\"GetHaveSaveDayList\"}");
  };

  // 监听消息
  socket.onmessage = function(event)
  { 
    console.log('Client received a message',event); 
    var receiveObj=JSON.parse(event.data);
    if(receiveObj.method=="GetHaveSaveDayList")
    {
    	var dayList=JSON.parse(receiveObj.obj);
      dayList.forEach(function(val,index,arr)
      {   	   
      	 AddListViewElem(listView,val);
      });
    }
    else if(receiveObj.method=="GetReportJsFile")
    {
    	 var jsObj=JSON.parse(receiveObj.obj);
       importJSON(ReportSpread,jsObj);
    }
  }; 

  // 监听Socket的关闭
  socket.onclose = function(event) { 
    console.log('Client notified socket has closed',event); 
  }; 
 
	listView.setRowHeight(30);   
	 
	 //添加列表中的数据
	 //AddListViewElem(listView);
	   /*products.forEach(function(product){
                    var data = new ht.Data();
                    data.a(product);
                    listView.dm().add(data);
                }); */  
  listView.enableToolTip();
  listView.getLabel = function(data){
        return data.a('ProductName') + ' - $' + data.a('UnitPrice').toFixed(2);
   };  
                
  ht.Default.setImage('productIcon', {
                    width: 50,
                    height: 50,
                    clip: function(g, width, height) {   
                        g.beginPath();
                        g.arc(width/2, height/2, Math.min(width, height)/2-3, 0, Math.PI * 2, true);
                        g.clip();                        
                    },
                    comps: [
                        {
                            type: 'image',
                            stretch: 'uniform',
                            rect: [0, 0, 50, 50],
                            name: {func: function(data){return data.a('ProductId');}}
                        }
                    ]
                });
    listView.drawRowBackground = function(g, data, selected, xx, yy, widthb, heightb){
                    if(this.isSelected(data)){
                        g.fillStyle = '#87A6CB';
                    }
                    else if(this.getRowIndex(data) % 2 === 0){
                        g.fillStyle = '#F1F4F7';
                    }
                    else{
                        g.fillStyle = '#FAFAFA';
                    }
                    g.beginPath();
                    g.rect(xx, yy, widthb, heightb);
                    g.fill();
                };
    listView.setIndent(60);                 
                //listView.getIcon = function(data){
                //    return 'productIcon';
               // };  
                
    listView.enableToolTip();
    listView.getLabel = function(data){
                    return  data.a('Name');
                };                
    listView.getToolTip = function(e){
    var data = this.getDataAt(e);
    if(data)
    {
         return '<span style="color:#3D97D0">ProductId:&nbsp;</span>' + data.a('ProductId') + '<br>' +  
                               '<span style="color:#3D97D0">ProductName:&nbsp;</span>' + data.a('ProductName') + '<br>' +  
                               '<span style="color:#3D97D0">QuantityPerUnit:&nbsp;</span>' + data.a('QuantityPerUnit') + '<br>' + 
                               '<span style="color:#3D97D0">Description:&nbsp;</span>' + data.a('Description');                        
    }
        return null;
   };
    sortFunc = function(d1, d2){
                    return d1.a('UnitPrice') - d2.a('UnitPrice');
                };
    listView.setSortFunc(sortFunc);
    listView.setVisibleFunc(function(data){                    
                    var text = toolbar.v('text');
                    if(text){                        
                        return data.a('Name').toLowerCase().indexOf(text.toLowerCase()) >= 0;
                    }
                    return true;
                }); 
                
    var borderPaneRealNode = new ht.HtmlNode();
    borderPaneRealNode.setScalable(false);
    borderPaneRealNode.s({
        '2d.selectable': true,
        '2d.movable': false
    });
    borderPaneRealNode.setHtml(borderPaneDayReport);
    borderPaneRealNode.setPosition({
        x: x,
        y: y
    });
    borderPaneRealNode.setWidth(width);
    borderPaneRealNode.setHeight(height);

    borderPaneRealNode.setPadding(0);
    /*startSubscribe();*/
    /*getSnapshotCallback();*/
    return borderPaneRealNode;
};


//添加列表控件的数据
function AddListViewElem(listView,obj)
{ 
	  var data = new ht.Data();
	  data.a(obj);
	  listView.dm().add(data); 
}

//导入报表的json数据
function importJSON (spread,jsonData)
{
	  ApplyCustomFunc(spread);
	
    spread.fromJSON(jsonData);
    ApplyCustomFunc(spread);
    var json = spread.toJSON();
    spread.fromJSON(json);
     
    var sheet = spread.getSheet(0);
    sheet.options.colHeaderVisible=false;
    sheet.options.rowHeaderVisible=false;
    
    spread.options.newTabVisible=false;
    spread.options.tabStripVisible=false;
    spread.options.showHorizontalScrollbar=true;
    
    ResetFormular(spread);  
}

//设置时间选择控件的时间
function SetTimeSelectDivValue(elem, timeValue, type) 
{
    timeValue = getRelativeDate(timeValue, type);
    laydate.render({
        elem: elem,
        type: type,
        value: timeValue,
        done: function(value, date){
            setTimeout(function () {
                ;
            }, 100)
        }
    });
    ;
}

function CommandObj()
{
	 var method="";
	 var parm1="";
}

function ReceiveObj()
{
	 var method="";
	 var obj="";
}