msg.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302
  1. $(function () {
  2. var $secB = $("#secB");
  3. $("#chartD").css({"width":$secB.width() - 10,"height":$secB.height()});
  4. var $seC = $("#secC");
  5. $("#chartE").css({"width":$seC.width() - 10,"height":$seC.height()});
  6. var weatherArea = $("#weatherArea");
  7. var weather = $("#weather");
  8. weatherArea.attr("height", weather.height());
  9. weatherArea.attr("width", weather.width());
  10. //插件调用地址
  11. 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=");
  12. if (weather.height() > 100) {
  13. weather.css("paddingTop", parseInt((weather.height() - 100) / 2))
  14. } else {
  15. weather.css("paddingTop", 0)
  16. }
  17. var curWeather = {
  18. "results": [{
  19. "location": {
  20. "id": "C23NB62W20TF",
  21. "name": "西雅图",
  22. "country": "US",
  23. "timezone": "America/Los_Angeles",
  24. "timezone_offset": "-07:00"
  25. },
  26. "now": {
  27. "text": "多云", //天气现象文字
  28. "code": "4", //天气现象代码
  29. "temperature": "14", //温度,单位为c摄氏度或f华氏度
  30. "feels_like": "14", //体感温度,单位为c摄氏度或f华氏度
  31. "pressure": "1018", //气压,单位为mb百帕或in英寸
  32. "humidity": "76", //相对湿度,0~100,单位为百分比
  33. "visibility": "16.09", //能见度,单位为km公里或mi英里
  34. "wind_direction": "西北", //风向文字
  35. "wind_direction_degree": "340", //风向角度,范围0~360,0为正北,90为正东,180为正南,270为正西
  36. "wind_speed": "8.05", //风速,单位为km/h公里每小时或mph英里每小时
  37. "wind_scale": "2", //风力等级,请参考:http://baike.baidu.com/view/465076.htm
  38. "clouds": "90", //云量,范围0~100,天空被云覆盖的百分比
  39. "dew_point": "-12" //露点温度,请参考:http://baike.baidu.com/view/118348.htm
  40. },
  41. "last_update": "2015-09-25T22:45:00-07:00" //数据更新时间(该城市的本地时间)
  42. }]
  43. };
  44. var clock = new Vue({
  45. el: '#clock',
  46. data: {
  47. data: "2016年5月7号 周五",
  48. time: "13:33",
  49. imageSrc: "views/hkclient/common/weather_png/99.png",
  50. temperature: 22,
  51. feels_like: 24,
  52. wind_direction: "北",
  53. wind_scale: 1,
  54. humidity: 20
  55. }
  56. });
  57. var dayTran = ["一", "二", "三", "四", "五", "六", "日"];
  58. function renewClock() {
  59. clock.data = (new Date()).toLocaleDateString() + " 星期" + dayTran[(new Date()).getDay() - 1];
  60. clock.time = (new Date()).getHours() + ":" + (new Date()).getMinutes();
  61. }
  62. renewClock();
  63. var renewClockTimer = setInterval(renewClock, 40000);
  64. var timer1;
  65. var count = 0;
  66. var secA = $("#secA");
  67. var height = secA.height();
  68. loadXxlist(height);
  69. //window.clearInterval(timer1);
  70. var toRollMsgList;
  71. timer1 = window.setInterval(function () {
  72. height = secA.height();
  73. loadSyph();
  74. count++;
  75. if (count > 10) {
  76. count = 0;
  77. loadXxlist(height);
  78. getHkClentWeather();
  79. }
  80. }, 600000);
  81. /**
  82. * 加载消息
  83. */
  84. function loadXxlist(height) {
  85. clearInterval(toRollMsgList);
  86. var mcid = $("#mcid").val();
  87. var count = parseInt(parseInt(height) / 33);
  88. //count = 5;
  89. jQuery.getJSON("getHkClientXxts.htm", {mcid: mcid, count: count}, function (data) {
  90. var html = "";
  91. var bjjb = "";
  92. for (var o in data) {
  93. var str = data[o].bt;
  94. str = str.replace(/\d{4}(-)\d{2}\1\d{2}\s\d{2}(:)\d{2}\2\d{2}/g, "");
  95. //console.log(str + "-" + str.indexOf('清除') + "-" + str.indexOf('恢复'));
  96. if (str.indexOf('清除') > 0 || str.indexOf('恢复') > 0) {
  97. bjjb = "style='color:green;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;'";
  98. } else {
  99. bjjb = "style='color:red;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;'";
  100. }
  101. if (str.length > 33) {
  102. str = str.substring(0, 31) + "...";
  103. }
  104. var sj = data[o].fbsjString;
  105. if (sj.length > 8) {
  106. sj = sj.substring(5, sj.length - 3);
  107. }
  108. html += "<li>";
  109. html += "<span class='col-xs-8 text-left cont1' " + bjjb + ">" + str + "</span><span class='col-xs-1'></span>";
  110. html += "<span class='col-xs-3 text-right' " + bjjb + ">" + sj + "</span>";
  111. html += "</li>";
  112. }
  113. $("#xxlist").html(html);
  114. //$("#xxlistCopy").html(html);
  115. //滚动消息列表
  116. var msgList = $("#xxlist");
  117. var msgListHeight = msgList.height();
  118. var msgListTop = parseInt(msgList.css("marginTop"));
  119. toRollMsgList = setInterval(function () {
  120. if (parseInt(msgList.css("marginTop")) > -msgListHeight) {
  121. msgList.css("marginTop", --msgListTop);
  122. } else {
  123. msgList.css("marginTop", 0);
  124. msgListTop = 0;
  125. }
  126. }, 40);
  127. });
  128. }
  129. /**
  130. * 天气
  131. */
  132. function getHkClentWeather() {
  133. jQuery.getJSON("getHkClentWeather.htm", {}, function (data) {
  134. var now = data.results[0].now;
  135. clock.imageSrc = "views/hkclient/common/weather_png/" + now.code + ".png";
  136. clock.temperature = now.temperature;
  137. });
  138. }
  139. getHkClentWeather();
  140. function loadSyph() {
  141. // var mcid = $("#mcid").val();
  142. // if (mcid == 21) {
  143. // hkclient.loadMobilePage("chartD", "getHkClientSYPHMain.htm?mcid=" + $("#mcid").val());
  144. // }
  145. hkclient.loadMobilePage("chartD", "getHkClientSYMain.htm?mcid=" + $("#mcid").val());
  146. hkclient.loadMobilePage("chartE", "getHkClientPHMain.htm?mcid=" + $("#mcid").val());
  147. }
  148. loadSyph();
  149. //获取canvas元素
  150. var canvasleft = document.getElementById('canvasleft'), //获取canvas元素
  151. context = canvasleft.getContext('2d'), //获取画图环境,指明为2d
  152. centerX = canvasleft.width/2, //Canvas中心点x轴坐标
  153. centerY = canvasleft.height/2, //Canvas中心点y轴坐标
  154. rad = Math.PI*2/100, //将360度分成100份,那么每一份就是rad度
  155. speed = 0; //加载的快慢就靠它了
  156. //绘制5像素宽的运动外圈
  157. function blueCircle(n){
  158. context.save();
  159. context.strokeStyle = "#f04f2f"; //设置描边样式
  160. context.lineWidth = 5; //设置线宽
  161. context.beginPath(); //路径开始
  162. context.arc(centerX, centerY, 35 , -Math.PI/2, -Math.PI/2 +n*rad, false); //用于绘制圆弧context.arc(x坐标,y坐标,半径,起始角度,终止角度,顺时针/逆时针)
  163. context.stroke(); //绘制
  164. context.restore();
  165. }
  166. //绘制白色外圈
  167. function whiteCircle(){
  168. context.save();
  169. context.beginPath();
  170. context.lineWidth = 5; //设置线宽
  171. context.strokeStyle = "#34171b";
  172. context.arc(centerX, centerY, 35 , 0, Math.PI*2, false);
  173. context.stroke();
  174. context.closePath();
  175. context.restore();
  176. }
  177. //百分比文字绘制
  178. function text(n){
  179. context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
  180. context.font = "bold 24px Arial"; //设置字体大小和字体
  181. context.fillStyle = '#f04f2f';
  182. //绘制字体,并且指定位置
  183. context.fillText(n.toFixed(0), centerX-14, centerY-15);
  184. //绘制字体,并且指定位置
  185. var text = '今日未处理';
  186. context.font = 'bold 14px Arial';
  187. context.fillStyle = '#f04f2f';
  188. context.fillText(text,centerX-38, centerY+15);
  189. context.restore();
  190. }
  191. //绘制线条
  192. function line(){
  193. context.save();
  194. context.moveTo(centerX-30,centerY-5);
  195. context.lineTo(centerX+30,centerY-5);
  196. context.lineWidth = 2;//线条的宽度
  197. context.strokeStyle = "#f04f2f";//线条的颜色
  198. context.stroke();//绘制
  199. context.closePath();
  200. }
  201. //动画循环
  202. (function drawFrame(){
  203. window.requestAnimationFrame(drawFrame);
  204. context.clearRect(0, 0, canvasleft.width, canvasleft.height);
  205. whiteCircle();
  206. blueCircle(speed);
  207. text(speed);
  208. line();
  209. var jrwcl = $("#jrwcl").val();
  210. if(speed > parseInt(jrwcl)) {
  211. speed = parseInt(jrwcl);
  212. }else{
  213. speed += 0.3;
  214. }
  215. }());
  216. /* //获取canvas元素
  217. var canvasright = document.getElementById('canvasright'), //获取canvas元素
  218. context1 = canvasright.getContext('2d'), //获取画图环境,指明为2d
  219. centerX1 = canvasright.width/2, //Canvas中心点x轴坐标
  220. centerY1 = canvasright.height/2, //Canvas中心点y轴坐标
  221. rad1 = Math.PI*2/100, //将360度分成100份,那么每一份就是rad度
  222. speeds = 0; //加载的快慢就靠它了
  223. //绘制5像素宽的运动外圈
  224. function blueCircle1(n){
  225. context1.save();
  226. context1.strokeStyle = "#f0b72f"; //设置描边样式
  227. context1.lineWidth = 5; //设置线宽
  228. context1.beginPath(); //路径开始
  229. context1.arc(centerX, centerY, 30 , -Math.PI/2, -Math.PI/2 +n*rad1, false); //用于绘制圆弧context.arc(x坐标,y坐标,半径,起始角度,终止角度,顺时针/逆时针)
  230. context1.stroke(); //绘制
  231. context1.restore();
  232. }
  233. //绘制白色外圈
  234. function whiteCircle1(){
  235. context1.save();
  236. context1.beginPath();
  237. context1.lineWidth = 5; //设置线宽
  238. context1.strokeStyle = "#50493e";
  239. context1.arc(centerX1, centerY1, 30 , 0, Math.PI*2, false);
  240. context1.stroke();
  241. context1.closePath();
  242. context.restore();
  243. }
  244. //百分比文字绘制
  245. function text1(n){
  246. context1.save(); //save和restore可以保证样式属性只运用于该段canvas元素
  247. context1.font = "bold 16px Arial"; //设置字体大小和字体
  248. context1.fillStyle = '#f0b72f';
  249. //绘制字体,并且指定位置
  250. context1.fillText(n.toFixed(0), centerX-8, centerY-15);
  251. //绘制字体,并且指定位置
  252. var text = '昨日未处理';
  253. context1.font = 'bold 12px Arial';
  254. context1.fillStyle = '#f0b72f';
  255. context1.fillText(text,centerX1-32, centerY1+15);
  256. context1.restore();
  257. }
  258. //绘制线条
  259. function line1(){
  260. context1.save();
  261. context1.moveTo(centerX1-20,centerY1-5);
  262. context1.lineTo(centerX1+20,centerY1-5);
  263. context1.lineWidth = 2;//线条的宽度
  264. context1.strokeStyle = "#f0b72f";//线条的颜色
  265. context1.stroke();//绘制
  266. context1.closePath();
  267. }
  268. //动画循环
  269. (function drawFrame1(){
  270. window.requestAnimationFrame(drawFrame1);
  271. context1.clearRect(0, 0, canvasright.width, canvasright.height);
  272. whiteCircle1();
  273. blueCircle1(speeds);
  274. text1(speeds);
  275. line1();
  276. var zrwcl = $("#zrwcl").val();
  277. if(speeds > parseInt(zrwcl)) {
  278. speeds = parseInt(zrwcl);
  279. }else{
  280. speeds += 0.3;
  281. }
  282. }());*/
  283. });