﻿
<!--
/* 说明: JS和VML画曲线图
 */
function VMLCurve(objDiv){
    
    this.objDiv = objDiv;                // obj
    this.toolTips    = "";                // 提示信息
    this.wl="";                             //警戒线
    //
    this.xValueArr=new Array();//X轴数据
    this.yValueArr=new Array();//Y轴数据
    this.sValueArr=new Array();//提示信息
    
    //坐标设置
    this.configXPerValue = 0;
    this.configYPerValue = 0;
   // this.configXMinValue = 0;
   // this.configYMinValue = 0; 
    
    this.OriginXValue = "";                // 圆点坐标
    this.OriginYValue = -4;
    
    //定义区域参数
    this.group                = null;        // v:group
    this.n                     = 1            // 倍数
    this.gpWidth            = 350;        // Width
    this.gpHeight            = 205;        // Height
    this.gpTop               = 32;
    this.gpLeft              =472;
    this.configXTextLeft    = -10;        // 定义 X轴坐标值左边离坐标距离
    this.configXTextTop     = 10;        // 定义 X轴坐标值上方离X轴的距离
    
    this.configYLeft         = 30;        // 定义 Y轴距对象左边的距离
    this.configYTextRight    = 20;        // 定义 Y轴坐标值离Y轴右边的距离
    this.configYTextBottom     = 5;        // 定义 Y轴坐标值离坐标下边距离
    //关闭了.在前台动态设置
    //X轴值
    //this.configXValue = new Array('一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月');
    //Y轴值
    //this.configYValue = new Array('100','200','300','400','500','600','700','800','900','1000');
    
    // Init BackGround
    this.Background        = null;    
    this.bgColor        = "#ACDFFC";        // BackGround Color
    
    // Init ToolTip  提示信息图层
    this.configToolLeft                = 15;
    this.configToolTop                 = 15;
    this.ToolTip                       = document.createElement("<DIV ID='ToolTip' name='ToolTip' style='Z-INDEX:100;border:solid 1px black;position:absolute;background-color:#ffffe1;display:none;text-align:left;padding:5px;'/>");
    
  
    //设置点线的属性,用后面的函数进行设置了,这里是静态的
   // this.PointRadius = 2;                     //圆点的半径大小
   // this.LineSize    = 1;                      //线的大小
   // this.PointColor  = "#FF6600";            //点的颜色
   // this.LineColor   = "#FF6600";            //线的颜色
    
    this.Points = "";
    this.PreviousPointY = 0;
    this.PointsYCount   = 0;
 }

// Init
VMLCurve.prototype.init = function(strObj,strTitle,strtopxinfo,strtopyinfo){
    
    this.gpcX            = this.gpWidth/this.n;            // coordsize X
    this.gpcY            = this.gpHeight/this.n;            // coordsize Y
    
    this.configXLen          = this.gpWidth - this.configYLeft*2+25;    // 定义 X轴长度
    this.configYLen          = this.gpHeight- 60;            // 定义 Y 轴长度
    this.configXNum        = this.configXValue.length;        // X轴刻度数
    this.configYNum        = this.configYValue.length;        // Y轴刻度数
    
    this.configXTop        = this.configYLen+20;            //定义 X轴距对象上边的距离
    
    this.configXPerLen    = str2Float((this.configXLen-20)/this.configXNum,2); //定义 X轴每刻度长度
    this.configYPerLen    = str2Float((this.configYLen-20)/this.configYNum,2); //定义 Y轴每刻度长度

    
    //初始化背景参数
    this.bgWidth        = this.gpWidth;        // Height
    this.bgHeight        = this.gpHeight;    // Width
    
    if(this.configYPerValue!=0){ 
        var tempArr = new Array(this.configYNum);
        for(var i=0;i<this.configYNum;i++){
            tempArr[i] = str2Float(this.configYMinValue+this.configYPerValue*i,2);
        }
        this.configYValue = tempArr; 
    }
    else {
        this.configYPerValue = str2Float((this.configYValue(this.configYNum)-this.configYMinValue)/this.configYNum,2); 
    } 
    
   if(this.configXPerValue!=0){ 
        var tempArr = new Array(this.configXNum);
        for(var i=0;i<this.configXNum;i++){
            tempArr[i] = str2Float(this.configXMinValue+this.configXPerValue*i,2);
        }
        this.configXValue = tempArr;  
    }else{
         //this.configXPerValue = str2Float((this.configXValue(this.configXNum-1)-this.configXMinValue)/this.configXNum,2); 
    } 
    
    this.configYValue  = this.configYValue.reverse();    //倒序数组 
    this.createGroup(strObj);//建立画图区域
    this.createBackgroud();//填充背景
    this.createCoordinate();//建立坐标轴
        this.createYTableLine();//创建Y轴坐标网格线
    this.createXTableLine();// 创建X坐标网格线

    this.createToolTip();
    this.setTitle(strTitle,strtopxinfo,strtopyinfo,this.wl);
    this.strObj = strObj;
}

//建立画图区域=\""+this.strObj+".setToolTip('none','');
VMLCurve.prototype.createGroup = function(strObj) {
    this.group = document.createElement("<v:group ID=\"group1\" coordsize=\""+this.gpcX+","+this.gpcY+"\" onmouseover=\""+strObj+".szzx();\" style=\"z-index:-10;width:"+this.gpWidth+"px;height:"+this.gpHeight+"px\">");
    this.objDiv.insertBefore(this.group);
}
//填充背景
VMLCurve.prototype.createBackgroud = function() {
  this.Background = document.createElement("<v:rect strokecolor=\"#74B0EB\" style=\"z-index:-8;width:"+this.bgWidth+"px;height:"+this.bgHeight+"px\" />");
  this.Background.insertBefore(document.createElement("<v:fill rotate=\"t\" color=\"#EDF7FF\" />"));
  //this.Background.insertBefore(document.createElement("<v:fill rotate=\"t\" color=\"#f8fdff\" type=\"gradient\" angle=\"180\" color2=\""+this.bgColor+"\" />"));
  this.group.insertBefore(this.Background); 

}
//鼠标移入坐标区域显示十字准星 并显示提示信息
VMLCurve.prototype.szzx=function()
{
    var sValue  = "";//显示信息
    var x1Value  = 0;//X坐标数据
    var x2Value  = 0;//y坐标数据
    var tempLen = 0;
    var thisX1   = 0; 
    var thisX2   = 0; 
    var tempX1   = 0;
    var tempX2   = 0; 
    var sTableColor="#FF0000";
    var eleft=event.clientX;
    var groupleft=this.gpLeft;//当前图层左边框距离
    if((eleft-groupleft)>this.configYLeft&&(eleft-groupleft)<(this.configXLen+8))//判断鼠标是否超出曲线范围 +8代表偏移值调整
    {
         var xlen=eleft-groupleft-this.configYLeft+2;
         var i=xlen/(this.configXPerLen);
         i=Math.round(i-1);
         
        var x1 = eleft-groupleft;
        var y1 = eval(this.configXTop-this.configYLen)+10;
        var x2 = x1;
        var y2 = eval(this.configXTop+5);
        var point1 = x1 + "," + y1; 
        var point2 = x2 + "," + y2;
        this.moveleLine1(point1,point2,"xline");
        var thisY   = str2Float(this.yValueArr[i],2); 
        var tempY   = str2Float((thisY - this.OriginYValue)/this.configYPerValue,2);
        var x11 = eval(this.configYLeft - 5);
        var y11 = str2Float(this.configXTop - str2Float(tempY*this.configYPerLen,2),2);
        var x12 = eval(this.configYLeft + this.configXLen - 10);
        var y12 = y11;
        point1 = x11 + "," + y11; 
        point2 = x12 + "," + y12;
        this.moveOval(x1,y11,"xyPoint");
        //提示信息
        sValue  = this.sValueArr[i];
        sValue  += "<br>潮高：<font color=red>" + thisY + "</font>m";
        this.setToolTip('block',sValue,x1,y11);
        }
            else
    {
     this.ToolTip.style.display        = "none";
     this.moveleLine1("0,0","0,0","xline");
    }
}
//建立坐标轴
VMLCurve.prototype.createCoordinate = function() {
    var pointX1 = this.configYLeft + "," + this.configXTop;
    var pointX2 = this.configYLeft+this.configXLen + "," + this.configXTop;
    var pointY1 = pointX1;
    var pointY2 = this.configYLeft + "," + eval(this.configXTop-this.configYLen);
    this.createCoordinateLine(pointX1,pointX2);
    this.createCoordinateLine(pointY1,pointY2);
    this.setOriginValue(this.OriginXValue,this.OriginYValue);
}

//建立坐标线
VMLCurve.prototype.createTableLine = function(xPoint,yPoint,sTableColor){
    var tempLine = document.createElement("<v:line from=\""+xPoint+"\" to=\""+yPoint+"\" strokeColor=\""+sTableColor+"\" style=\"Z-INDEX:8;POSITION:absolute;/>");
    this.group.insertBefore(tempLine);
    tempLine.insertBefore(document.createElement("<v:stroke dashstyle=\"Solid\" />"));
}
//建立十字准星坐标线
VMLCurve.prototype.createTableLine1 = function(xPoint,yPoint,sTableColor){
     //十字准星的X轴
    var tempLine = document.createElement("<v:line id='xline' from=\""+xPoint+"\" to=\""+yPoint+"\" strokeColor=\"#CC1CCC\" strokeweight=\"1px\" style=\"Z-INDEX:10;POSITION:absolute;/>");
    this.group.insertBefore(tempLine);
    tempLine.insertBefore(document.createElement("<v:stroke dashstyle=\"Solid\" />"));
    //十字准星的y轴
    tempLine = document.createElement("<v:line id='yline' from=\""+xPoint+"\" to=\""+yPoint+"\" strokeColor=\"#CC1CCC\" strokeweight=\"1px\" style=\"Z-INDEX:10;POSITION:absolute;/>");
    this.group.insertBefore(tempLine);
    tempLine.insertBefore(document.createElement("<v:stroke dashstyle=\"Solid\" />"));
    //圆点
    var tempOval = document.createElement("<v:oval id='xyPoint' style=\"POSITION:absolute;Z-INDEX:16;LEFT:10px;TOP:10px;width:0px;height:0px;cursor:hand;\" stroked=\"f\" fillcolor=\""+this.PointColor+"\" strokeweight=\"1px\"/>");
    this.group.insertBefore(tempOval);

     
}
//移动十字准星坐标线
VMLCurve.prototype.moveleLine1 = function(xPoint,yPoint,linename){
     //十字准星的X轴
        var tempLine=document.getElementById(linename);
        tempLine.from=xPoint;
        tempLine.to=yPoint;

}
//移动十字准星坐标点
VMLCurve.prototype.moveOval = function(left,top,ovalname){

     //十字准星的X轴
     var PointColor="#ff0000";
        var tempoval=document.getElementById(ovalname);
        this.group.removeChild(tempoval);
        var tempOval = document.createElement("<v:oval id='xyPoint' style=\"POSITION:absolute;Z-INDEX:16;LEFT:"+(left-4)+"px;TOP:"+(top-4)+"px;width:6px;height:6px;cursor:hand;\" stroked=\"f\" fillcolor=\""+PointColor+"\" strokeweight=\"1px\"/>");
        this.group.insertBefore(tempOval);
      //  alert(tempoval.style.Left+" 1111 "+tempoval.style.Top);
}
//画坐标轴线
VMLCurve.prototype.createCoordinateLine = function(xPoint,yPoint){
    var tempLine = document.createElement("<v:line from=\""+xPoint+"\" to=\""+yPoint+"\" strokeColor=\"#000000\" strokeweight=\"1px\" style=\"Z-INDEX:12;POSITION:absolute;\"/>");
    this.group.insertBefore(tempLine);
    tempLine.insertBefore(document.createElement("<v:stroke  EndArrow=\"classic\" />"));
}


//创建文本提示信息
VMLCurve.prototype.createText1 = function(xLeft,xTop,sText,sClass) {
    var tempObj = document.createElement("<P class=\""+sClass+"\" style=\"text-align:right;Z-INDEX:8;width:14px;LEFT:"+xLeft+"px;POSITION:absolute;TOP:"+xTop+"px;\"/>");
    tempObj.innerHTML = sText;
    this.group.insertBefore(tempObj);
}
//创建文本提示信息
VMLCurve.prototype.createText = function(xLeft,xTop,sText,sClass) {
    var tempObj = document.createElement("<P class=\""+sClass+"\" style=\Z-INDEX:8;LEFT:"+xLeft+"px;POSITION:absolute;TOP:"+xTop+"px;\"/>");
    tempObj.innerHTML = sText;
    this.group.insertBefore(tempObj);
}


// 创建X坐标网格线
VMLCurve.prototype.createXTableLine = function(){
    var x1,y1,x2,y2,point1,point2,sTableColor;
    sTableColor = "#CCCCCC";
    for(var i=0;i<this.configXValue.length;i++){
        x1 = eval(this.configYLeft + this.configXPerLen*(i+1))-3;
        y1 = eval(this.configXTop-this.configYLen)+10;
        x2 = x1;
        y2 = eval(this.configXTop);
        point1 = x1 + "," + y1; 
        point2 = x2 + "," + y2;
        if(i==0)
        {
        
        }
        else if(i%12==0)
        {
          this.createTableLine(point1,point2,"#565656");
        }
        else if(i%3==0)
        {
             this.createTableLine(point1,point2,sTableColor);
        }
        else if(i>=71)
        {
        
             this.createTableLine(point1,point2,"#565656");
        }
        this.createText(x1+this.configXTextLeft,this.configXTop+this.configXTextTop,this.configXValue[i],"pBlack");
    }
    
      //建立十字准星的坐标线
      x1 = eval(this.configYLeft + this.configXPerLen);
      y1 = eval(this.configXTop-this.configYLen)+10;
      x2 = x1;
      y2 = y1;
      point1 = x1 + "," + y1; 
      point2 = x2 + "," + y2;
      this.createTableLine1(point1,point2,"#FF0000");
      

}

//创建Y轴坐标网格线
VMLCurve.prototype.createYTableLine = function(){
    var x1,y1,x2,y2,point1,point2,sTableColor;
    for(var i=0;i<this.configYValue.length;i++){
        x1 = eval(this.configYLeft);
        y1 = eval(this.configXTop - this.configYPerLen*(i+1));
        x2 = eval(this.configYLeft + this.configXLen - 10);
        y2 = y1;
        point1 = x1 + "," + y1; 
        point2 = x2 + "," + y2;
//判断零点坐标轴
        if(this.configYValue[i]=="1") sTableColor = "#565656";
        else sTableColor = "#CCCCCC";
        this.createTableLine(point1,point2,sTableColor);
        this.createText1(this.configYLeft-this.configYTextRight,y1-this.configYTextBottom,this.configYValue[this.configYValue.length-i-1],"pBlack");
  
    }
     //建立警戒线
       var thisY   = str2Float(this.wl); 
       var tempY   = str2Float((thisY - this.OriginYValue)/this.configYPerValue,2);
       var x11 = eval(this.configYLeft - 5);
       var y11 = str2Float(this.configXTop - str2Float(tempY*this.configYPerLen,2),2);
       var x12 = eval(this.configYLeft + this.configXLen - 10);
       var y12 = y11;
       point1 = x11 + "," + y11; 
       point2 = x12 + "," + y12;
      this.createTableLine(point1,point2,"#ff0000");
        //警戒线提示符
    var ytemptopinfo = document.createElement("<div style=\"Z-INDEX:11;LEFT:"+(x12-85)+"px;POSITION:absolute;TOP:"+(y11-15)+"px;\"/>");
 　　ytemptopinfo.innerHTML ="<span style='font-weight:bold;color:red'>警戒水位："+ this.wl+"m</span>";
    this.group.insertBefore(ytemptopinfo);
}

//设置标题
VMLCurve.prototype.setTitle = function(strTitle,xtopinfo,ytopinfo,wl){
   //标题
   var tempObj = document.createElement("<div class=\"Title\" style=\"font-size:15px;POSITION:absolute;Z-INDEX:9;LEFT:"+70+"px;TOP:"+8+"px;width:"+250+"px;height:"+(this.gpHeight-this.configXTop-20)+";/>");
  tempObj.innerHTML = strTitle;
    this.group.insertBefore(tempObj);
 //x单位
 var xtemptopinfo = document.createElement("<div class=\"XTitle\" style=\"Z-INDEX:11;right:10px;TOP:"+(this.configXTop+12)+"px;POSITION:absolute;\"/>");
  xtemptopinfo.innerHTML = xtopinfo;
    this.group.insertBefore(xtemptopinfo);
  //y单位
  var ytemptopinfo = document.createElement("<div class=\"YTitle\" style=\"Z-INDEX:11;LEFT:5px;POSITION:absolute;TOP:10px;\"/>");
 ytemptopinfo.innerHTML = ytopinfo;
    this.group.insertBefore(ytemptopinfo);

  
}

// 画圆点坐标
VMLCurve.prototype.setOriginValue = function(x,y){
  //  this.createText(this.configYLeft+this.configXTextLeft,this.configXTop+this.configXTextTop,x,"pBlack");
    this.createText1(this.configYLeft-this.configYTextRight,this.configXTop-this.configYTextBottom,y,"pBlack");
}

// 设置圆点坐标属性
VMLCurve.prototype.setPointsProp = function(sPointRadius,sLineSize,sPointColor,sLineColor){
    this.PointRadius = sPointRadius;         //圆点的半径大小
    this.LineSize    = sLineSize;              //线的大小
    this.PointColor  = sPointColor;            //点的颜色
    this.LineColor   = sLineColor;            //线的颜色
}

// 设置纵坐标的值
VMLCurve.prototype.setPointsValue = function(xValueArr,yValueArr,sValueArr){
    var sValue  = "";//显示信息
    var xValue  = 0;//X坐标数据
    var yValue  = 0;//y坐标数据
    var tempLen = 0;
    var thisX   = 0; 
    var thisY   = 0; 
    var tempX   = 0;
    var tempY   = 0; 
    for(var i=0;i<xValueArr.length;i++){
        thisX   = str2Float(xValueArr[i],2); 
        thisY   = str2Float(yValueArr[i],2); 
        sValue  = sValueArr[i]; 
        tempX   = str2Float((thisX - this.OriginXValue)/this.configXPerValue,2);
        tempY   = str2Float((thisY - this.OriginYValue)/this.configYPerValue,2);
        xValue  = str2Float(this.configYLeft + str2Float(thisX*this.configXPerLen,2),2);
        yValue  = str2Float(this.configXTop - str2Float(tempY*this.configYPerLen,2),2);
        sValue  += "<br>潮高：<font color=red>" + thisY + "</font>m";
       // sValue  += "<br>坐标值[X,Y]:[" + xValue + "," + yValue + "]";
       //sValue  += "<br>实际值[X,Y]:[<font color=blue>" + thisX + "</font>,<font color=red>" + thisY + "</font>]";
       //this.PointsYCount  += str2Float(yValueArr[i],2);
       //this.PreviousPointY = yValueArr[i];        
        this.Points = this.Points + xValue + "," + yValue + " ";    
     //   alert(xValue+"yValue  "+yValue+"sValue  "+sValue);
        this.createPoint(xValue,yValue,sValue);
    }
    this.createCurveLine();
    this.PreviousPointY = 0;
    this.Points         = 0;
    this.PointsYCount   = 0;
}


// create Point
VMLCurve.prototype.createPoint = function(sLeft,sTop,sText){
    //根据圆点的坐标,得到左上方点的坐标
    var xLeft  = sLeft - this.PointRadius;
    var xTop   = sTop  - this.PointRadius;
    var tempOval = document.createElement("<v:oval style=\"POSITION:absolute;Z-INDEX:12;LEFT:"+xLeft+"px;TOP:"+xTop+"px;width:"+2*this.PointRadius+"px;height:"+2*this.PointRadius+"px;cursor:hand;\" stroked=\"f\" fillcolor=\""+this.PointColor+"\" strokeweight=\"1px\" onmousemove=\""+this.strObj+".setToolTip('block','" + sText + "'," + sLeft + "," + sTop + ");\" onmouseout=\""+this.strObj+".setToolTip('none','');\"/>");
  //  alert(tempOval.outerHTML);
   // alert("<v:oval style=\"POSITION:absolute;Z-INDEX:12;LEFT:"+xLeft+"px;TOP:"+xTop+"px;width:"+2*this.PointRadius+";height:"+2*this.PointRadius+";cursor:hand;\" stroked=\"f\" fillcolor=\""+this.PointColor+"\" strokeweight=\"1px\" onmousemove=\""+this.strObj+".setToolTip('block','" + sText + "'," + sLeft + "," + sTop + ");\" onmouseout=\""+this.strObj+".setToolTip('none','');\"/>");
    
    group1.insertBefore(tempOval);
    
}

//以两点为坐标画线
VMLCurve.prototype.createCurveLine = function(){
    var tempLine = document.createElement("<v:PolyLine Points=\""+ this.Points +"\" style=\"Z-INDEX:11;POSITION:absolute;\" strokeweight=\"1px\" filled=\"f\" />");
    var newStroke = document.createElement("<v:stroke dashstyle='solid' color='"+this.LineColor+"'/>");
    group1.insertBefore(tempLine);
    tempLine.insertBefore(newStroke);
 
}

VMLCurve.prototype.createToolTip = function(){
    this.group.insertBefore(this.ToolTip);
}

VMLCurve.prototype.setToolTip = function(sVisitable,sContent,x,y){
    if(x + this.configToolLeft>this.gpWidth-80)
    {
        x=x-100;
    }
    if(y + this.configToolTop>this.gpHeight-70)
    {
        y=y-70;
    }
    this.ToolTip.style.pixelLeft     = x + this.configToolLeft;
    this.ToolTip.style.pixelTop        = y + this.configToolTop;
    this.ToolTip.style.display        = sVisitable;
     sContent  = "潮时："+sContent.substring(0,sContent.indexOf("<br/>"))+sContent.substring(sContent.indexOf("<br/>")+5,sContent.length-sContent.indexOf("<br/>")+5); 
    this.ToolTip.innerHTML = sContent; 
 }

/*以下代码来自网络,主要功能是对数字进行格式化
 *原作者不详，敬请谅解。 
 */ 
/*********************************
* 字符串转换为数字(""-->0)as_type--str,num
* 参数说明:
as_str--转换的字符串
ai_digit--转换的小数位数(null--不限制小数位数,0--转换为整型,>0按小数位数转换)
as_type--转换后返回的类型(null,"num"--转换为数字类型,"str"--转换为字符串
(按小数格式化后的字符串)
* 例如:
* str2float("10.2124568795")返回float类型10.2124568795
* str2float("10.6",0)返回Int类型11(使用四舍五入的方法)
* str2float("10.2",2)返回float类型10.1
* str2float("10.2",2,"str")返回String类型"10.20"(按小数位数格式化字符串)
* str2float("10.216",2)返回float类型10.22
* str2float("10.216",2,"str")返回String类型"10.22"
*********************************
*/
function str2Float(as_str,ai_digit,as_type)
{
   var fdb_tmp = 0;
   var fi_digit = 0;
   var fs_digit = "1";
   var fs_str = "" + as_str;
   var fs_tmp1 = "";
   var fs_tmp2 = "";
   var fi_pos = 0;
   var fi_len = 0;
   fdb_tmp = parseFloat(isNaN(parseFloat(fs_str))?0:fs_str);
   
   switch (true)
   {
      case (ai_digit==null):       //不改变值,只转换为数字
         fdb_tmp = fdb_tmp;
         break;
      case (ai_digit==0):          //取得整数
         fdb_tmp = Math.round(fdb_tmp);
         break;
      case (ai_digit>0):            //按照传入的小数点位数四舍五入取值
         for (var i=0;i<ai_digit;i++) fs_digit +="0";
         fi_digit = parseInt(fs_digit);
         fdb_tmp = Math.round(fdb_tmp * fi_digit) / fi_digit;
         if (as_type=="str")
         {
            fs_tmp1 = fdb_tmp.toString();
            fs_tmp1 +=((fs_tmp1.indexOf(".")!=-1)?"":".") + fs_digit.substr(1);
            fi_pos = fs_tmp1.indexOf(".") + 1 + ai_digit;
            fdb_tmp = fs_tmp1.substr(0,fi_pos);
         }
        break;
   }
   return fdb_tmp;
}
//-->

