123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302 |
- $(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;
- }
- }());*/
- });
|