base.js 9.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385
  1. function fnW(str) {
  2. var num;
  3. str >= 10 ? num = str : num = "0" + str;
  4. return num;
  5. }
  6. /*大屏*/
  7. //获取当前时间
  8. var timer = setInterval(function () {
  9. var date = new Date();
  10. var year = date.getFullYear(); //当前年份
  11. var month = date.getMonth(); //当前月份
  12. var data = date.getDate(); //天
  13. var hours = date.getHours(); //小时
  14. var minute = date.getMinutes(); //分
  15. var second = date.getSeconds(); //秒
  16. var day = date.getDay(); //获取当前星期几
  17. var ampm = hours < 12 ? 'am' : 'pm';
  18. $('#time').html(fnW(hours) + ":" + fnW(minute) + ":" + fnW(second));
  19. $('#date').html('<span>' + year + '/' + (month + 1) + '/' + data + '</span><span>' + getMyDay(date) + '</span>')
  20. }, 1000)
  21. function getMyDay(date){
  22. var week;
  23. if(date.getDay()==0) week="周日"
  24. if(date.getDay()==1) week="周一"
  25. if(date.getDay()==2) week="周二"
  26. if(date.getDay()==3) week="周三"
  27. if(date.getDay()==4) week="周四"
  28. if(date.getDay()==5) week="周五"
  29. if(date.getDay()==6) week="周六"
  30. return week;
  31. }
  32. //预警按发布区域统计
  33. //var pie_fanzui =echarts.init(document.getElementById("pie_fanzui"),'macarons');
  34. var areatj =echarts.init(document.getElementById("areatj"));
  35. option = {
  36. color: ['#3398DB'],//此处可设置柱条全局颜色
  37. tooltip : {
  38. trigger: 'axis',
  39. axisPointer : { // 坐标轴指示器,坐标轴触发有效
  40. type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
  41. }
  42. },
  43. grid: {
  44. left: '13%',
  45. right: '2%',
  46. bottom: '5%',
  47. containLabel: true
  48. },
  49. xAxis : [
  50. {
  51. type : 'category',
  52. data: ['大连市区','旅顺口区','金州区','普兰店市','瓦房店市','庄河市','长海县','长兴岛'],
  53. axisTick: {
  54. alignWithLabel: true
  55. },
  56. //设置轴线的属性
  57. axisLine:{
  58. lineStyle:{
  59. color:'#cdddf7',
  60. width:1,//这里是为了突出显示加上的
  61. }
  62. },
  63. axisLabel: {interval:0,rotate:40 }
  64. }
  65. ],
  66. yAxis : [
  67. {
  68. type : 'value',
  69. //设置轴线的属性
  70. axisLine:{
  71. lineStyle:{
  72. color:'#cdddf7',
  73. width:1,//这里是为了突出显示加上的
  74. }
  75. }
  76. }
  77. ],
  78. series : [
  79. {
  80. name:'发布数量',
  81. type:'bar',
  82. barWidth: '50%',
  83. data:[400, 52, 200, 334, 390, 330, 220, 220],
  84. itemStyle:{//
  85. normal: {
  86. color: new echarts.graphic.LinearGradient(
  87. 0, 0, 0, 1,
  88. [
  89. {offset: 1, color: '#6dadee'},
  90. {offset: 0.5, color: '#377fc8'},
  91. {offset: 0, color: '#377fc8'}
  92. ]
  93. )
  94. },
  95. }
  96. }
  97. ]
  98. };
  99. areatj.setOption(option,true);
  100. window.addEventListener('resize', function() {
  101. areatj.resize();
  102. })
  103. //预警按发布渠道统计
  104. //var pie_fanzui =echarts.init(document.getElementById("pie_fanzui"),'macarons');
  105. var qdtj =echarts.init(document.getElementById("qdtj"));
  106. option = {
  107. tooltip: {
  108. trigger: 'axis',
  109. axisPointer: {
  110. type: 'shadow'
  111. }
  112. },
  113. grid: {
  114. left: '1%',
  115. right: '5%',
  116. bottom: '8%',
  117. containLabel: true
  118. },
  119. xAxis: {
  120. type: 'value',
  121. boundaryGap: [0, 0.01],
  122. //设置轴线的属性
  123. axisLine:{
  124. lineStyle:{
  125. color:'#cdddf7',
  126. width:1,//这里是为了突出显示加上的
  127. }
  128. }
  129. },
  130. yAxis: {
  131. type: 'category',
  132. data : ['国突', '其它渠道', '邮件', '微博','传真','多媒体','短信'],
  133. //设置轴线的属性
  134. axisLine:{
  135. lineStyle:{
  136. color:'#cdddf7',
  137. width:1,//这里是为了突出显示加上的
  138. }
  139. }
  140. },
  141. series: [
  142. {
  143. name: '发布数量',
  144. type: 'bar',
  145. data: [70, 10, 52, 200, 334, 390, 330],
  146. itemStyle: {
  147. normal: {
  148. color: new echarts.graphic.LinearGradient(
  149. 0, 0, 1, 0,
  150. [
  151. {offset: 1, color: '#1181e6'},
  152. {offset: 0.5, color: '#1181e6'},
  153. {offset: 0, color: '#6dadee'}
  154. ]
  155. )
  156. }
  157. }
  158. }
  159. ]
  160. };
  161. qdtj.setOption(option);
  162. //预警按发布级别统计
  163. //var pie_fanzui =echarts.init(document.getElementById("pie_fanzui"),'macarons');
  164. var jbtj =echarts.init(document.getElementById("jbtj"),'infographic');
  165. option = {
  166. tooltip : {
  167. trigger: 'item',
  168. formatter: "{a} <br/>{b} : {c} ({d}%)"
  169. },
  170. calculable : true,
  171. series : [
  172. {
  173. name:'发布数量',
  174. type:'pie',
  175. radius : '55%',
  176. center: ['50%', '50%'],
  177. data:[
  178. {value:335, name:'红色级别'},
  179. {value:310, name:'蓝色级别'},
  180. {value:234, name:'黄色级别'},
  181. {value:135, name:'橙色级别'}
  182. ]
  183. }
  184. ]
  185. };
  186. jbtj.setOption(option);
  187. //===================本月发布预警统计=======================
  188. //var line_time =echarts.init(document.getElementById("line_time"),'shine');
  189. var line_time =echarts.init(document.getElementById("line_time"),'shine');
  190. //var line_time =echarts.init(document.getElementById("line_time"),'infographic');
  191. var option = {
  192. // 给echarts图设置背景色
  193. //backgroundColor: '#FBFBFB', // -----------> // 给echarts图设置背景色
  194. color: ['#1181e6'],
  195. tooltip: {
  196. trigger: 'axis'
  197. },
  198. grid:{
  199. x:40,
  200. y:30,
  201. x2:5,
  202. y2:20
  203. },
  204. calculable: true,
  205. xAxis: [{
  206. type: 'category',
  207. data: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30'],
  208. axisLabel: {
  209. color: "#cdddf7" //刻度线标签颜色
  210. },
  211. //设置轴线的属性
  212. axisLine:{
  213. lineStyle:{
  214. color:'#cdddf7',
  215. width:1,//这里是为了突出显示加上的
  216. }
  217. }
  218. }],
  219. yAxis: [{
  220. type: 'value',
  221. axisLabel: {
  222. color: "#cdddf7" //刻度线标签颜色
  223. },
  224. //设置轴线的属性
  225. axisLine:{
  226. lineStyle:{
  227. color:'#cdddf7',
  228. width:1,//这里是为了突出显示加上的
  229. }
  230. }
  231. }],
  232. series: [{
  233. name: '条数',
  234. type: 'line',
  235. data: [10,5, 6, 7, 8, 4, 3,10,5, 6, 7, 8, 4, 3,5, 6, 7, 8, 4, 3, 3, 3,5, 6, 7, 8, 4, 3, 3],
  236. }]
  237. };
  238. line_time.setOption(option);
  239. //时间选择器
  240. var startV = '';
  241. var endV = '';
  242. laydate.skin('danlan');
  243. var startTime = {
  244. elem: '#startTime',
  245. format: 'YYYY-MM-DD',
  246. min: '1997-01-01', //设定最小日期为当前日期
  247. max: laydate.now(), //最大日期
  248. istime: true,
  249. istoday: true,
  250. fixed: false,
  251. choose: function (datas) {
  252. startV = datas;
  253. endTime.min = datas; //开始日选好后,重置结束日的最小日期
  254. }
  255. };
  256. var endTime = {
  257. elem: '#endTime',
  258. format: 'YYYY-MM-DD',
  259. min: laydate.now(),
  260. max: laydate.now(),
  261. istime: true,
  262. istoday: true,
  263. fixed: false,
  264. choose: function (datas) {
  265. // startTime.max = datas; //结束日选好后,重置开始日的最大日期
  266. endV = datas;
  267. }
  268. };
  269. //laydate(startTime);
  270. //laydate(endTime);
  271. //时间选择器
  272. var startVs = '';
  273. var endVs = '';
  274. laydate.skin('danlan');
  275. var startTimes = {
  276. elem: '#startTimes',
  277. format: 'YYYY-MM-DD',
  278. min: '1997-01-01', //设定最小日期为当前日期
  279. max: '2099-06-16', //最大日期
  280. istime: true,
  281. istoday: true,
  282. fixed: false,
  283. choose: function (datas) {
  284. startVs = datas;
  285. endTimes.min = datas; //开始日选好后,重置结束日的最小日期
  286. setQgData($('#barTypes').parent().parent(), 1);
  287. }
  288. };
  289. var endTimes = {
  290. elem: '#endTimes',
  291. format: 'YYYY-MM-DD',
  292. min: laydate.now(),
  293. max: laydate.now(),
  294. istime: true,
  295. istoday: true,
  296. fixed: false,
  297. choose: function (datas) {
  298. // startTime.max = datas; //结束日选好后,重置开始日的最大日期
  299. endVs = datas;
  300. setQgData($('#barTypes').parent().parent(), 1);
  301. }
  302. };
  303. //laydate(startTimes);
  304. //laydate(endTimes);
  305. //更改日期插件的样式
  306. function dateCss() {
  307. var arr = $('#laydate_box').attr('style').split(';');
  308. var cssStr =
  309. 'position:absolute;right:0;';
  310. for (var i = 0; i < arr.length; i++) {
  311. if (arr[i].indexOf('top') != -1) {
  312. cssStr += arr[i];
  313. }
  314. }
  315. $('#laydate_box').attr('style', cssStr);
  316. }
  317. var workDate;
  318. var time = {
  319. elem: '#times',
  320. format: 'YYYY-MM-DD',
  321. min: laydate.now(),
  322. max: laydate.now() + 30,
  323. istime: true,
  324. istoday: true,
  325. fixed: false,
  326. choose: function (datas) {
  327. // startTime.max = datas; //结束日选好后,重置开始日的最大日期
  328. workDate = datas;
  329. }
  330. };
  331. //laydate(time);