ifm/WebRoot/views/hkclient/js/msg.js

$(function () {
    var $secB = $("#secB");
    $("#chartD").css({"width":$secB.width() - 10,"height":$secB.height()});
    var $seC = $("#secC");
    $("#chartE").css({"width":$seC.width() - 10,"height":$seC.height()});
    var weatherArea = $("#weatherArea");
    var weather = $("#weather");
    weatherArea.attr("height", weather.height());
    weatherArea.attr("width", weather.width());
    //插件调用地址
    weatherArea.attr("src", "http://www.thinkpage.cn/weather/weather.aspx?uid=U043823AC5&cid=CHZJ000000&l=zh-CHS&p=SMART&a=1&u=C&s=1&m=0&x=0&d=3&fc=FFFFFF&bgc=&bc=&ti=0&in=0&li=");
    if (weather.height() > 100) {
        weather.css("paddingTop", parseInt((weather.height() - 100) / 2))
    } else {
        weather.css("paddingTop", 0)
    }

    var curWeather = {
        "results": [{
            "location": {
                "id": "C23NB62W20TF",
                "name": "西雅图",
                "country": "US",
                "timezone": "America/Los_Angeles",
                "timezone_offset": "-07:00"
            },
            "now": {
                "text": "多云", //天气现象文字
                "code": "4", //天气现象代码
                "temperature": "14", //温度，单位为c摄氏度或f华氏度
                "feels_like": "14", //体感温度，单位为c摄氏度或f华氏度
                "pressure": "1018", //气压，单位为mb百帕或in英寸
                "humidity": "76", //相对湿度，0~100，单位为百分比
                "visibility": "16.09", //能见度，单位为km公里或mi英里
                "wind_direction": "西北", //风向文字
                "wind_direction_degree": "340", //风向角度，范围0~360，0为正北，90为正东，180为正南，270为正西
                "wind_speed": "8.05", //风速，单位为km/h公里每小时或mph英里每小时
                "wind_scale": "2", //风力等级，请参考：http://baike.baidu.com/view/465076.htm
                "clouds": "90", //云量，范围0~100，天空被云覆盖的百分比
                "dew_point": "-12" //露点温度，请参考：http://baike.baidu.com/view/118348.htm
            },
            "last_update": "2015-09-25T22:45:00-07:00" //数据更新时间（该城市的本地时间）
        }]
    };

    var clock = new Vue({
        el: '#clock',
        data: {
            data: "2016年5月7号 周五",
            time: "13：33",
            imageSrc: "views/hkclient/common/weather_png/99.png",
            temperature: 22,
            feels_like: 24,
            wind_direction: "北",
            wind_scale: 1,
            humidity: 20
        }
    });
    var dayTran = ["一", "二", "三", "四", "五", "六", "日"];

    function renewClock() {
        clock.data = (new Date()).toLocaleDateString() + " 星期" + dayTran[(new Date()).getDay() - 1];
        clock.time = (new Date()).getHours() + ":" + (new Date()).getMinutes();
    }


    renewClock();
    var renewClockTimer = setInterval(renewClock, 40000);

    var timer1;
    var count = 0;

    var secA = $("#secA");
    var height = secA.height();
    loadXxlist(height);
    //window.clearInterval(timer1);
    var toRollMsgList;
    timer1 = window.setInterval(function () {
        height = secA.height();
        loadSyph();
        count++;
        if (count > 10) {
            count = 0;
            loadXxlist(height);
            getHkClentWeather();
        }
    }, 600000);

    /**
     * 加载消息
     */
    function loadXxlist(height) {
        clearInterval(toRollMsgList);
        var mcid = $("#mcid").val();
        var count = parseInt(parseInt(height) / 33);
        //count = 5;
        jQuery.getJSON("getHkClientXxts.htm", {mcid: mcid, count: count}, function (data) {
            var html = "";
            var bjjb = "";
            for (var o in data) {
            	var str = data[o].bt;
            	str = str.replace(/\d{4}(-)\d{2}\1\d{2}\s\d{2}(:)\d{2}\2\d{2}/g, "");
            	//console.log(str + "-" + str.indexOf('清除') + "-" + str.indexOf('恢复'));
            	if (str.indexOf('清除') > 0 || str.indexOf('恢复') > 0) {
            		bjjb = "style='color:green;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;'";
            	} else {
            		bjjb = "style='color:red;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;'";
            	}
            	if (str.length > 33) {
            		str = str.substring(0, 31) + "...";
            	}
            	var sj = data[o].fbsjString;
            	if (sj.length > 8) {
            		sj = sj.substring(5, sj.length - 3);
            	}
                html += "<li>";
                html += "<span class='col-xs-8 text-left cont1' " + bjjb + ">" + str + "</span><span class='col-xs-1'></span>";
                html += "<span class='col-xs-3 text-right' " + bjjb + ">" + sj + "</span>";
                html += "</li>";
            }
            $("#xxlist").html(html);
            //$("#xxlistCopy").html(html);
            //滚动消息列表
            var msgList = $("#xxlist");
            var msgListHeight = msgList.height();
            var msgListTop = parseInt(msgList.css("marginTop"));
            toRollMsgList = setInterval(function () {
                if (parseInt(msgList.css("marginTop")) > -msgListHeight) {
                    msgList.css("marginTop", --msgListTop);
                } else {
                    msgList.css("marginTop", 0);
                    msgListTop = 0;
                }
            }, 40);
        });
    }

    /**
     * 天气
     */
    function getHkClentWeather() {
        jQuery.getJSON("getHkClentWeather.htm", {}, function (data) {
            var now = data.results[0].now;
            clock.imageSrc = "views/hkclient/common/weather_png/" + now.code + ".png";
            clock.temperature = now.temperature;
        });
    }

    getHkClentWeather();
    
    function loadSyph() {
//    	var mcid = $("#mcid").val();
//    	if (mcid == 21) {
//    		hkclient.loadMobilePage("chartD", "getHkClientSYPHMain.htm?mcid=" + $("#mcid").val());
//    	}
    	hkclient.loadMobilePage("chartD", "getHkClientSYMain.htm?mcid=" + $("#mcid").val());
		hkclient.loadMobilePage("chartE", "getHkClientPHMain.htm?mcid=" + $("#mcid").val());
    }
    loadSyph();
    
    //获取canvas元素
    var canvasleft = document.getElementById('canvasleft'),  //获取canvas元素
        context = canvasleft.getContext('2d'),  //获取画图环境，指明为2d
        centerX = canvasleft.width/2,   //Canvas中心点x轴坐标
        centerY = canvasleft.height/2,  //Canvas中心点y轴坐标
        rad = Math.PI*2/100, //将360度分成100份，那么每一份就是rad度
        speed = 0; //加载的快慢就靠它了 
        
    //绘制5像素宽的运动外圈
    function blueCircle(n){
        context.save();
        context.strokeStyle = "#f04f2f"; //设置描边样式
        context.lineWidth = 5; //设置线宽
        context.beginPath(); //路径开始
        context.arc(centerX, centerY, 35 , -Math.PI/2, -Math.PI/2 +n*rad, false); //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
        context.stroke(); //绘制
        context.restore();
    }
    //绘制白色外圈
    function whiteCircle(){
        context.save();
        context.beginPath();
        context.lineWidth = 5; //设置线宽
        context.strokeStyle = "#34171b";
        context.arc(centerX, centerY, 35 , 0, Math.PI*2, false);
        context.stroke();
        context.closePath();
        context.restore();
    }
    //百分比文字绘制
    function text(n){
        context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
        context.font = "bold 24px Arial"; //设置字体大小和字体
        context.fillStyle = '#f04f2f';
        //绘制字体，并且指定位置
        context.fillText(n.toFixed(0), centerX-14, centerY-15);
        
        //绘制字体，并且指定位置
        var text = '今日未处理';
        context.font = 'bold 14px Arial';
        context.fillStyle = '#f04f2f';
        context.fillText(text,centerX-38, centerY+15);
        
        context.restore();
    } 
    //绘制线条
    function line(){
    	context.save();
    	context.moveTo(centerX-30,centerY-5);
    	context.lineTo(centerX+30,centerY-5);
    	context.lineWidth = 2;//线条的宽度
    	context.strokeStyle = "#f04f2f";//线条的颜色
    	context.stroke();//绘制
    	context.closePath();
    }
    //动画循环
    (function drawFrame(){
        window.requestAnimationFrame(drawFrame);
        context.clearRect(0, 0, canvasleft.width, canvasleft.height);
        whiteCircle();
        blueCircle(speed);
        text(speed);
        line();
        var jrwcl = $("#jrwcl").val();
        if(speed > parseInt(jrwcl)) {
        	speed = parseInt(jrwcl);
        }else{
        	speed += 0.3;
        }
    }());
    
   /* //获取canvas元素
    var canvasright = document.getElementById('canvasright'),  //获取canvas元素
        context1 = canvasright.getContext('2d'),  //获取画图环境，指明为2d
        centerX1 = canvasright.width/2,   //Canvas中心点x轴坐标
        centerY1 = canvasright.height/2,  //Canvas中心点y轴坐标
        rad1 = Math.PI*2/100, //将360度分成100份，那么每一份就是rad度
        speeds = 0; //加载的快慢就靠它了 
        
    //绘制5像素宽的运动外圈
    function blueCircle1(n){
        context1.save();
        context1.strokeStyle = "#f0b72f"; //设置描边样式
        context1.lineWidth = 5; //设置线宽
        context1.beginPath(); //路径开始
        context1.arc(centerX, centerY, 30 , -Math.PI/2, -Math.PI/2 +n*rad1, false); //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
        context1.stroke(); //绘制
        context1.restore();
    }
    //绘制白色外圈
    function whiteCircle1(){
        context1.save();
        context1.beginPath();
        context1.lineWidth = 5; //设置线宽
        context1.strokeStyle = "#50493e";
        context1.arc(centerX1, centerY1, 30 , 0, Math.PI*2, false);
        context1.stroke();
        context1.closePath();
        context.restore();
    }
    //百分比文字绘制
    function text1(n){
        context1.save(); //save和restore可以保证样式属性只运用于该段canvas元素
        context1.font = "bold 16px Arial"; //设置字体大小和字体
        context1.fillStyle = '#f0b72f';
        //绘制字体，并且指定位置
        context1.fillText(n.toFixed(0), centerX-8, centerY-15);
        
        //绘制字体，并且指定位置
        var text = '昨日未处理';
        context1.font = 'bold 12px Arial';
        context1.fillStyle = '#f0b72f';
        context1.fillText(text,centerX1-32, centerY1+15);
        
        context1.restore();
    } 
    //绘制线条
    function line1(){
    	context1.save();
    	context1.moveTo(centerX1-20,centerY1-5);
    	context1.lineTo(centerX1+20,centerY1-5);
    	context1.lineWidth = 2;//线条的宽度
    	context1.strokeStyle = "#f0b72f";//线条的颜色
    	context1.stroke();//绘制
    	context1.closePath();
    }
    //动画循环
    (function drawFrame1(){
        window.requestAnimationFrame(drawFrame1);
        context1.clearRect(0, 0, canvasright.width, canvasright.height);
        whiteCircle1();
        blueCircle1(speeds);
        text1(speeds);
        line1();
        var zrwcl = $("#zrwcl").val();
        if(speeds > parseInt(zrwcl)) {
        	speeds = parseInt(zrwcl);
        }else{
        	speeds += 0.3;
        }
    }());*/
});