B_Mode_1.js 32 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058
  1. $(window).load(function () {
  2. $(".loading").fadeOut()
  3. // 返回上一级 视图处理
  4. C_keys_list = C_keys.split(",")
  5. if (C_keys_list.length <= 1){
  6. $("#v_back").hide();
  7. }else {
  8. $("#v_back").show();
  9. }
  10. })
  11. /****/
  12. $(document).ready(function () {
  13. var whei = $(window).width()
  14. $("html").css({fontSize: whei / 20})
  15. $(window).resize(function () {
  16. var whei = $(window).width()
  17. $("html").css({fontSize: whei / 20})
  18. });
  19. });
  20. // 返回
  21. function f_v_back() {
  22. C_keys_list = C_keys.split(",")
  23. C_keys_list.pop()
  24. hrefurl = "?T_key="+C_keys_list.join(",")
  25. if (false != C_modex){
  26. hrefurl += "&T_mode="+C_modex
  27. }
  28. document.location.href = hrefurl
  29. }
  30. var V_kf_yd = 1
  31. function f_kf_open() {
  32. $("#map_kf").css("opacity", 1);
  33. $("#v_trail").css("opacity", 0);
  34. $("#R_KF_Column").show();
  35. $("#R_YD_Column").hide();
  36. V_kf_yd = 1
  37. f_view()
  38. }
  39. function f_yd_open() {
  40. $("#map_kf").css("opacity", 0);
  41. $("#v_trail").css("opacity", 1);
  42. $("#R_KF_Column").hide();
  43. $("#R_YD_Column").show();
  44. V_kf_yd = 2
  45. f_view()
  46. }
  47. // 视图数据改变
  48. function f_view() {
  49. // 地图加载
  50. if (V_kf_yd == 1) {
  51. f_v_map();
  52. }
  53. // 轨迹加载
  54. if (C_json.Device.T_移动总数 > 0 && V_kf_yd == 2) {
  55. f_v_trail()
  56. }
  57. // 屏蔽按钮
  58. if(C_json.Device.T_库房总数 == 0){
  59. $("#v_open_KF").hide();
  60. }
  61. if(C_json.Device.T_移动总数 == 0){
  62. $("#v_open_YD").hide();
  63. }
  64. $("#T_公司名称").html(C_json.Company_name + "-冷链药品质量安全智慧中台")
  65. $("title").html(C_json.Company_name + "-冷链药品质量安全智慧中台")
  66. // 设备类
  67. $("#T_终端总数").html(C_json.Device.T_库房总数 + C_json.Device.T_移动总数)
  68. $("#T_库房总数").html(C_json.Device.T_库房总数)
  69. $("#T_移动总数").html(C_json.Device.T_移动总数)
  70. $("#T_移动离线总数").html(C_json.Device.T_移动离线总数)
  71. $("#T_移动监控总数").html(C_json.Device.T_移动监控总数)
  72. // 报警类
  73. // $("#T_库房报警总数").html(C_json.Warning.T_库房报警总数)
  74. $("#T_库房未处理总数").html(C_json.Warning.T_库房未处理总数)
  75. $("#T_库房设备报警数_今天").html(C_json.Warning.T_库房设备报警数_今天)
  76. $("#T_库房报警设备数_今天").html(C_json.Warning.T_库房报警设备数_今天)
  77. // $("#T_库房设备报警数_昨天").html(C_json.Warning.T_库房设备报警数_昨天)
  78. // $("#T_库房设备报警数_近7天").html(C_json.Warning.T_库房设备报警数_近7天)
  79. // $("#T_库房设备报警数_本月").html(C_json.Warning.T_库房设备报警数_本月)
  80. // $("#T_库房设备报警数_上一月").html(C_json.Warning.T_库房设备报警数_上一月)
  81. // $("#T_移动警数总数").html(C_json.Warning.T_移动警数总数)
  82. $("#T_移动未处理总数").html(C_json.Warning.T_移动未处理总数)
  83. $("#T_移动设备报警数_今天").html(C_json.Warning.T_移动设备报警数_今天)
  84. // $("#T_移动设备报警数_昨天").html(C_json.Warning.T_移动设备报警数_昨天)
  85. // $("#T_移动设备报警数_近7天").html(C_json.Warning.T_移动设备报警数_近7天)
  86. // $("#T_移动设备报警数_本月").html(C_json.Warning.T_移动设备报警数_本月)
  87. // $("#T_移动设备报警数_上一月").html(C_json.Warning.T_移动设备报警数_上一月)
  88. w_x_ = parseInt(C_json.Warning.T_库房报警设备数_今天)
  89. if (w_x_ != 0) {
  90. w_x_ = w_x_ / (C_json.Device.T_库房总数)
  91. w_x_ *= 100
  92. }
  93. $("#T_今日库房报警率").html(w_x_.toFixed(1) + "%")
  94. $("#T_今日报警总数").html(parseInt(C_json.Warning.T_库房设备报警数_今天) + parseInt(C_json.Warning.T_移动设备报警数_今天))
  95. w_x_ = parseInt(C_json.Warning.T_库房报警设备数_今天) + parseInt(C_json.Warning.T_移动报警设备数_今天)
  96. if (w_x_ != 0) {
  97. w_x_ = w_x_ / (C_json.Device.T_库房总数 + C_json.Device.T_移动总数)
  98. w_x_ *= 100
  99. }
  100. $("#T_今日报警率").html(w_x_.toFixed(1) + "%")
  101. // $("#T_今日报警率").html(parseInt(w_x_) + "%")
  102. $("#T_今日未处理总数").html(parseInt(C_json.Warning.T_库房未处理总数) + parseInt(C_json.Warning.T_移动未处理总数))
  103. // 任务类
  104. $("#T_任务总数_今天").html(C_json.Task.T_任务总数_今天)
  105. // $("#T_任务总数_昨天").html(C_json.Task.T_任务总数_昨天)
  106. // $("#T_任务总数_近7天").html(C_json.Task.T_任务总数_近7天)
  107. // $("#T_任务总数_本月").html(C_json.Task.T_任务总数_本月)
  108. // $("#T_任务总数_上一月").html(C_json.Task.T_任务总数_上一月)
  109. $("#T_任务设备数_今天").html(C_json.Task.T_任务设备数_今天)
  110. // $("#T_任务设备数_昨天").html(C_json.Task.T_任务设备数_昨天 )
  111. // $("#T_任务设备数_近7天").html(C_json.Task.T_任务设备数_近7天)
  112. // $("#T_任务设备数_本月").html(C_json.Task.T_任务设备数_本月 )
  113. // $("#T_任务设备数_上一月").html(C_json.Task.T_任务设备数_上一月)
  114. w_x_ = parseInt(C_json.Task.T_任务设备数_今天)
  115. if (w_x_ != 0) {
  116. w_x_ = w_x_ / C_json.Device.T_移动总数
  117. w_x_ *= 100
  118. }
  119. $("#T_今日闲置设备").html(w_x_.toFixed(1) + "%")
  120. // 报警统计
  121. try {
  122. $('#Company_Next_WarningG').liMarquee('destroy'); // 清除滚动
  123. }
  124. catch (e) {
  125. alert(e);
  126. }
  127. $("#Company_Next_WarningG").html("<ul id=\"Company_Next_WarningL\"></ul>")// 清除内容
  128. Company_Next_W_l = []
  129. f_Company_Next_报警统计(C_json)
  130. Company_Next_W_l = Company_Next_W_l.filter((value, index, self) => {
  131. return self.findIndex(p => p.name === value.name) === index;
  132. });
  133. Company_Next_W_l_r = Company_Next_W_l.sort((a, b) => b.Warning - a.Warning);
  134. for (var C_key in Company_Next_W_l_r){
  135. C_b = Company_Next_W_l_r[C_key]
  136. $("#Company_Next_WarningL").append("<li><p><span>" + C_b.name + "</span><span>" + (C_b.Device) + "</span><span>" + C_b.Warning + "%</span></p></li>")
  137. }
  138. // 开始滚动
  139. $('#Company_Next_WarningG').liMarquee({
  140. direction: 'up',//身上滚动
  141. runshort: false,//内容不足时不滚动
  142. scrollamount: 20//速度
  143. });
  144. // console.log("Company_Next_W_l:", Company_Next_W_l)
  145. // 图表
  146. echarts_报警设备数近7天曲线图()
  147. echarts_设备报警率排名()
  148. if (V_kf_yd == 1) {
  149. echarts_库房端报警类型统计()
  150. } else {
  151. echarts_移动端任务曲线图()
  152. }
  153. // 任务统计
  154. $('#Company_Next_TaskG').liMarquee('destroy'); // 清除滚动
  155. $("#Company_Next_TaskG").html("<ul id=\"Company_Next_TaskL\"></ul>")// 清除内容
  156. Company_Next_T_l = []
  157. f_Company_Next_任务统计(C_json)
  158. Company_Next_T_l = Company_Next_T_l.filter((value, index, self) => {
  159. return self.findIndex(p => p.name === value.name) === index;
  160. });
  161. Company_Next_T_l_r = Company_Next_T_l.sort((a, b) => b.Task - a.Task);
  162. for (var C_key in Company_Next_T_l_r){
  163. C_b = Company_Next_T_l_r[C_key]
  164. $("#Company_Next_TaskL").append("<li><p><span>" + C_b.name + "</span><span>" + (C_b.Task) + "</span><span>" + C_b.DeviceT + "%</span></p></li>")
  165. }
  166. $('#Company_Next_TaskG').liMarquee({
  167. direction: 'up',//身上滚动
  168. runshort: false,//内容不足时不滚动
  169. scrollamount: 20//速度
  170. });
  171. // 中间 视图显示
  172. if (V_kf_yd === 1) {
  173. // 库房端
  174. $("#T_C_1").html(Company_Next_T_l.length)// 公司下一级统计
  175. $("#T_C_2").html(C_json.Warning.T_库房设备报警数_今天)// 公司下一级统计
  176. w_x_ = parseInt(C_json.Warning.T_库房报警设备数_今天)
  177. if (w_x_ != 0) {
  178. w_x_ = w_x_ / C_json.Device.T_库房总数
  179. w_x_ *= 100
  180. }
  181. $("#T_C_3").html(w_x_.toFixed(1) + "%")// 公司下一级统计
  182. $("#T_Cn_1").html("公司/门店 数量")
  183. $("#T_Cn_2").html("今日库房报警次数")
  184. $("#T_Cn_3").html("今日库房报警率")
  185. } else {
  186. // 移动端
  187. $("#T_C_1").html(Company_Next_T_l.length)// 公司下一级统计
  188. $("#T_C_2").html(C_json.Device.T_移动监控总数)// 公司下一级统计
  189. w_x_ = parseInt(C_json.Warning.T_移动报警设备数_今天)
  190. if (w_x_ != 0) {
  191. w_x_ = w_x_ / C_json.Device.T_移动总数
  192. w_x_ *= 100
  193. }
  194. $("#T_C_3").html(w_x_.toFixed(1) + "%")// 公司下一级统计
  195. $("#T_Cn_1").html("公司/门店 数量")
  196. $("#T_Cn_2").html("监控总数")
  197. $("#T_Cn_3").html("今日移动端报警率")
  198. }
  199. }
  200. // 公司下一级统计
  201. Company_Next_W_l = []
  202. function f_Company_Next_报警统计(C_j) {
  203. for (var C_key in C_j.Children) {
  204. C_b = C_j.Children[C_key]
  205. f_Company_Next_报警统计(C_b)
  206. if (C_b.Children.length != 0) continue;
  207. Warning = 0
  208. if (C_b.Warning.T_库房报警设备数_今天 > 0) {
  209. Warning = parseInt((C_b.Device.T_库房总数 + C_b.Device.T_移动总数) / C_b.Warning.T_库房报警设备数_今天)
  210. }
  211. // console.log({"name":C_b.Company_name,"Device":C_b.Device.T_库房总数+C_b.Device.T_移动总数,"Warning": Warning})
  212. Company_Next_W_l.push({
  213. "name": C_b.Company_name,
  214. "Device": C_b.Device.T_库房总数 + C_b.Device.T_移动总数,
  215. "Warning": Warning
  216. })
  217. }
  218. }
  219. // 公司下一级任务统计
  220. Company_Next_T_l = []
  221. function f_Company_Next_任务统计(C_j) {
  222. for (var C_key in C_j.Children) {
  223. C_b = C_j.Children[C_key]
  224. f_Company_Next_任务统计(C_b)
  225. if (C_b.Children.length != 0) continue;
  226. // console.log({"name":C_b.Company_name,"Device":C_b.Device.T_库房总数+C_b.Device.T_移动总数,"Warning": Warning})
  227. T_x_ = C_b.Task.T_任务设备数_今天
  228. if(T_x_ != 0){
  229. T_x_ = T_x_ / C_json.Device.T_移动总数
  230. T_x_ *= 100
  231. }
  232. Company_Next_T_l.push({
  233. "name": C_b.Company_name,
  234. "Task": C_b.Task.T_任务总数_今天,
  235. "DeviceT": T_x_.toFixed(1)
  236. })
  237. }
  238. }
  239. // 公司下一级统计
  240. function f_Company_Next_公司下一级统计(C_j) {
  241. var Company_Next_num = 0
  242. for (var C_key in C_j.Children) {
  243. C_b = C_j.Children[C_key]
  244. Company_Next_num += f_Company_Next_公司下一级统计(C_b)
  245. if (C_b.Children.length != 0) continue;
  246. Company_Next_num += 1
  247. }
  248. return Company_Next_num
  249. }
  250. // 设备报警率占比
  251. function echarts_报警设备数近7天曲线图() {
  252. var myChart = echarts.init(document.getElementById('echarts_报警设备数近7天曲线图'));
  253. xAxis_data = []
  254. yAxis_data = []
  255. for (var C_key in C_json.Warning.T_报警设备数_近7天) {
  256. C_b = C_json.Warning.T_报警设备数_近7天[C_key]
  257. xAxis_data.push(C_key)
  258. yAxis_data.push(C_b)
  259. }
  260. option = {
  261. // legend: {
  262. // icon:"circle",
  263. // top: "0",
  264. // width:'100%',
  265. // right: 'center',
  266. // itemWidth: 10,
  267. // itemHeight: 10,
  268. // data: ['库房端'],
  269. // textStyle: {
  270. // color: "rgba(255,255,255,.5)" },
  271. // },
  272. tooltip: {
  273. trigger: 'axis',
  274. axisPointer: {
  275. lineStyle: {
  276. color: '#dddc6b'
  277. }
  278. }
  279. },
  280. grid: {
  281. left: '0',
  282. top: '5',
  283. right: '15',
  284. bottom: '0',
  285. containLabel: true
  286. },
  287. xAxis: [{
  288. type: 'category',
  289. boundaryGap: false,
  290. axisLabel: {
  291. textStyle: {
  292. color: "rgba(255,255,255,.5)",
  293. // fontSize:10
  294. },
  295. },
  296. axisLine: {
  297. lineStyle: {
  298. color: 'rgba(255,255,255,.1)'
  299. }
  300. },
  301. data: xAxis_data
  302. }, {
  303. axisPointer: {show: false},
  304. axisLine: { show: false},
  305. position: 'bottom',
  306. offset: 20,
  307. }],
  308. yAxis: [{
  309. type: 'value',
  310. axisTick: {show: false},
  311. splitNumber: 4,
  312. axisLine: {
  313. lineStyle: {
  314. color: 'rgba(255,255,255,.1)'
  315. }
  316. },
  317. axisLabel: {
  318. textStyle: {
  319. color: "rgba(255,255,255,.5)",
  320. //fontSize:10
  321. },
  322. },
  323. splitLine: {
  324. lineStyle: {
  325. color: 'rgba(255,255,255,.1)',
  326. type: 'dotted',
  327. }
  328. }
  329. }],
  330. series: [
  331. {
  332. name: '库房端',
  333. type: 'line',
  334. smooth: true,
  335. symbol: 'circle',
  336. symbolSize: 5,
  337. showSymbol: false,
  338. lineStyle: {
  339. normal: {
  340. color: 'rgba(31, 174, 234, 1)',
  341. width: 2
  342. }
  343. },
  344. areaStyle: {
  345. normal: {
  346. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  347. offset: 0,
  348. color: 'rgba(31, 174, 234, 0.4)'
  349. }, {
  350. offset: 0.8,
  351. color: 'rgba(31, 174, 234, 0.1)'
  352. }], false),
  353. shadowColor: 'rgba(0, 0, 0, 0.1)',
  354. }
  355. },
  356. itemStyle: {
  357. normal: {
  358. color: '#1f7eea',
  359. borderColor: 'rgba(31, 174, 234, .1)',
  360. borderWidth: 5
  361. }
  362. },
  363. data: yAxis_data
  364. },
  365. // {
  366. // name: '移动端',
  367. // type: 'line',
  368. // smooth: true,
  369. // symbol: 'circle',
  370. // symbolSize: 5,
  371. // showSymbol: false,
  372. // lineStyle: {
  373. //
  374. // normal: {
  375. // color: '#6bdd9b',
  376. // width: 2
  377. // }
  378. // },
  379. // areaStyle: {
  380. // normal: {
  381. // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  382. // offset: 0,
  383. // color: 'rgba(107, 221, 155, 0.4)'
  384. // }, {
  385. // offset: 0.8,
  386. // color: 'rgba(107, 221, 155, 0.1)'
  387. // }], false),
  388. // shadowColor: 'rgba(0, 0, 0, 0.1)',
  389. // }
  390. // },
  391. // itemStyle: {
  392. // normal: {
  393. // color: '#6bdd9b',
  394. // borderColor: 'rgba(107, 221, 155, .1)',
  395. // borderWidth: 5
  396. // }
  397. // },
  398. // data: [ 5, 3, 7, 1, 8, 3, 5]
  399. //
  400. // },
  401. ]
  402. };
  403. myChart.setOption(option);
  404. window.addEventListener("resize", function () {
  405. myChart.resize();
  406. });
  407. $(".sebtn a").click(function () {
  408. $(this).addClass("active").siblings().removeClass("active")
  409. })
  410. $(".sebtn a").eq(0).click(function () {
  411. myChart.setOption(option1);
  412. })
  413. $(".sebtn a").eq(1).click(function () {
  414. myChart.setOption(option2);
  415. })
  416. $(".sebtn a").eq(2).click(function () {
  417. myChart.setOption(option3);
  418. })
  419. }
  420. // 设备报警率占比
  421. function echarts_设备报警率排名() {
  422. var myChart = echarts.init(document.getElementById('echarts_设备报警率排名'));
  423. // option = {
  424. // legend: {
  425. // icon:"circle",
  426. // top: "0",
  427. // width:'100%',
  428. // right: 'center',
  429. // itemWidth: 10,
  430. // itemHeight: 10,
  431. // data: ['库房端', '移动端'],
  432. // textStyle: {
  433. // color: "rgba(255,255,255,.5)" },
  434. // },
  435. //
  436. // tooltip: {
  437. // trigger: 'axis',
  438. // axisPointer: {
  439. // lineStyle: {
  440. // color: '#dddc6b'
  441. // }
  442. // }
  443. // },
  444. // grid: {
  445. // left: '0',
  446. // top: '30',
  447. // right: '10',
  448. // bottom: '-15',
  449. // containLabel: true
  450. // },
  451. //
  452. // xAxis: [{
  453. // type: 'category',
  454. // boundaryGap: false,
  455. // axisLabel: {
  456. // textStyle: {
  457. // color: "rgba(255,255,255,.5)",
  458. // // fontSize:10
  459. // },
  460. // },
  461. // axisLine: {
  462. // lineStyle: {
  463. // color: 'rgba(255,255,255,.1)'
  464. // }
  465. // },
  466. // data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  467. //
  468. // }, {
  469. //
  470. // axisPointer: {show: false},
  471. // axisLine: { show: false},
  472. // position: 'bottom',
  473. // offset: 20,
  474. //
  475. //
  476. //
  477. // }],
  478. //
  479. // yAxis: [{
  480. // type: 'value',
  481. // axisTick: {show: false},
  482. // splitNumber: 4,
  483. // axisLine: {
  484. // lineStyle: {
  485. // color: 'rgba(255,255,255,.1)'
  486. // }
  487. // },
  488. // axisLabel: {
  489. // textStyle: {
  490. // color: "rgba(255,255,255,.5)",
  491. // //fontSize:10
  492. // },
  493. // },
  494. //
  495. // splitLine: {
  496. // lineStyle: {
  497. // color: 'rgba(255,255,255,.1)',
  498. // type: 'dotted',
  499. // }
  500. // }
  501. // }],
  502. // series: [
  503. // {
  504. // name: '库房端',
  505. // type: 'line',
  506. // smooth: true,
  507. // symbol: 'circle',
  508. // symbolSize: 5,
  509. // showSymbol: false,
  510. // lineStyle: {
  511. //
  512. // normal: {
  513. // color: 'rgba(31, 174, 234, 1)',
  514. // width: 2
  515. // }
  516. // },
  517. // areaStyle: {
  518. // normal: {
  519. // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  520. // offset: 0,
  521. // color: 'rgba(31, 174, 234, 0.4)'
  522. // }, {
  523. // offset: 0.8,
  524. // color: 'rgba(31, 174, 234, 0.1)'
  525. // }], false),
  526. // shadowColor: 'rgba(0, 0, 0, 0.1)',
  527. // }
  528. // },
  529. // itemStyle: {
  530. // normal: {
  531. // color: '#1f7eea',
  532. // borderColor: 'rgba(31, 174, 234, .1)',
  533. // borderWidth: 5
  534. // }
  535. // },
  536. // data: [3, 6, 3, 6, 3, 9, 3]
  537. //
  538. // },
  539. // {
  540. // name: '移动端',
  541. // type: 'line',
  542. // smooth: true,
  543. // symbol: 'circle',
  544. // symbolSize: 5,
  545. // showSymbol: false,
  546. // lineStyle: {
  547. //
  548. // normal: {
  549. // color: '#6bdd9b',
  550. // width: 2
  551. // }
  552. // },
  553. // areaStyle: {
  554. // normal: {
  555. // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  556. // offset: 0,
  557. // color: 'rgba(107, 221, 155, 0.4)'
  558. // }, {
  559. // offset: 0.8,
  560. // color: 'rgba(107, 221, 155, 0.1)'
  561. // }], false),
  562. // shadowColor: 'rgba(0, 0, 0, 0.1)',
  563. // }
  564. // },
  565. // itemStyle: {
  566. // normal: {
  567. // color: '#6bdd9b',
  568. // borderColor: 'rgba(107, 221, 155, .1)',
  569. // borderWidth: 5
  570. // }
  571. // },
  572. // data: [ 5, 3, 7, 1, 8, 3, 5]
  573. //
  574. // },
  575. // ]
  576. //
  577. // };
  578. yAxis_data = []
  579. series_data = []
  580. Company_Next_W_l_ = Company_Next_W_l.sort((a, b) => a.Warning - b.Warning).slice(-10);
  581. for (var C_key in Company_Next_W_l_) {
  582. C_b = Company_Next_W_l_[C_key]
  583. if(C_b.Warning > 0){
  584. yAxis_data.push(C_b.name)
  585. series_data.push(C_b.Warning)
  586. }
  587. }
  588. option = {
  589. // title: {
  590. // text: 'World Population'
  591. // },
  592. tooltip: {
  593. trigger: 'axis',
  594. axisPointer: {
  595. type: 'shadow'
  596. }
  597. },
  598. // legend: {},
  599. grid: {
  600. top: '0%',
  601. left: '0%',
  602. right: '0%',
  603. bottom: '0%',
  604. containLabel: true
  605. },
  606. xAxis: {
  607. type: 'value',
  608. boundaryGap: [0, 0.01],
  609. show: false
  610. },
  611. yAxis: {
  612. type: 'category',
  613. data: yAxis_data
  614. },
  615. series: [
  616. {
  617. name: '报警率',
  618. type: 'bar',
  619. itemStyle: {
  620. color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
  621. { offset: 0, color: '#596db0' },
  622. { offset: 0.5, color: '#4a63b4' },
  623. { offset:1, color: '#435eb7' }
  624. ])
  625. },
  626. data: series_data
  627. }
  628. ]
  629. };
  630. // option = {
  631. // legend: {
  632. // icon: "circle",
  633. // top: "0",
  634. // width: '100%',
  635. // right: 'center',
  636. // itemWidth: 10,
  637. // itemHeight: 10,
  638. // // textStyle: {
  639. // // color: "rgba(255,255,255,.5)"
  640. // // },
  641. // },
  642. //
  643. // tooltip: {
  644. // trigger: 'axis',
  645. // axisPointer: {
  646. // lineStyle: {
  647. // color: '#dddc6b'
  648. // }
  649. // }
  650. // },
  651. // grid: {
  652. // left: '0',
  653. // top: '30',
  654. // right: '0',
  655. // bottom: '-15',
  656. // containLabel: true
  657. // },
  658. //
  659. // dataset: [
  660. // {
  661. // dimensions: ['name', 'Device', "Warning"],
  662. // // source: [
  663. // // ['11111111', 41],
  664. // // ['22222222', 241],
  665. // // ['333333333', 341],
  666. // // ['4444444444', 141],
  667. // // ['555555555', 421],
  668. // // ['666666666', 141],
  669. // // ['77777777', 241],
  670. // // ['8888888888', 411],
  671. // // ['9999999', 421],
  672. // // ['123123123', 414],
  673. // // ['456456456', 431],
  674. // //
  675. // // ]
  676. // source: Company_Next_W_l,
  677. // },
  678. // {
  679. // transform: {
  680. // type: 'sort',
  681. // config: {dimension: 'Warning', order: 'desc'}
  682. // }
  683. // }
  684. // ],
  685. // xAxis: {
  686. // type: 'category',
  687. // axisLabel: {interval: 0, rotate: 30},
  688. // max: 6 // only the largest 3 bars will be displayed
  689. // },
  690. // yAxis: {},
  691. // series: {
  692. // type: 'bar',
  693. // encode: {x: 'name', y: 'Warning'},
  694. // datasetIndex: 1
  695. // }
  696. // };
  697. myChart.setOption(option);
  698. window.addEventListener("resize", function () {
  699. myChart.resize();
  700. });
  701. $(".sebtn a").click(function () {
  702. $(this).addClass("active").siblings().removeClass("active")
  703. })
  704. $(".sebtn a").eq(0).click(function () {
  705. myChart.setOption(option1);
  706. })
  707. $(".sebtn a").eq(1).click(function () {
  708. myChart.setOption(option2);
  709. })
  710. $(".sebtn a").eq(2).click(function () {
  711. myChart.setOption(option3);
  712. })
  713. }
  714. // 移动端任务曲线图
  715. function echarts_移动端任务曲线图() {
  716. var myChart = echarts.init(document.getElementById('echarts_移动端任务曲线图'));
  717. xAxis_data = []
  718. yAxis_data = []
  719. for (var C_key in C_json.Task.T_任务总数_近7天) {
  720. xAxis_data.push(C_key)
  721. yAxis_data.push(C_json.Task.T_任务总数_近7天[C_key])
  722. }
  723. option = {
  724. // legend: {
  725. // icon:"circle",
  726. // top: "0",
  727. // width:'100%',
  728. // right: 'center',
  729. // itemWidth: 10,
  730. // itemHeight: 10,
  731. // textStyle: {
  732. // color: "rgba(255,255,255,.5)" },
  733. // },
  734. tooltip: {
  735. trigger: 'axis',
  736. axisPointer: {
  737. lineStyle: {
  738. color: '#dddc6b'
  739. }
  740. }
  741. },
  742. grid: {
  743. left: '0',
  744. top: '5',
  745. right: '17',
  746. bottom: '0',
  747. containLabel: true
  748. },
  749. xAxis: [{
  750. type: 'category',
  751. boundaryGap: false,
  752. axisLabel: {
  753. textStyle: {
  754. color: "rgba(255,255,255,.5)",
  755. // fontSize:10
  756. },
  757. },
  758. axisLine: {
  759. lineStyle: {
  760. color: 'rgba(255,255,255,.1)'
  761. }
  762. },
  763. data: xAxis_data // ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  764. }, {
  765. axisPointer: {show: false},
  766. axisLine: {show: false},
  767. position: 'bottom',
  768. offset: 20,
  769. }],
  770. yAxis: [{
  771. type: 'value',
  772. axisTick: {show: false},
  773. splitNumber: 4,
  774. axisLine: {
  775. lineStyle: {
  776. color: 'rgba(255,255,255,.1)'
  777. }
  778. },
  779. axisLabel: {
  780. textStyle: {
  781. color: "rgba(255,255,255,.5)",
  782. //fontSize:10
  783. },
  784. },
  785. splitLine: {
  786. lineStyle: {
  787. color: 'rgba(255,255,255,.1)',
  788. type: 'dotted',
  789. }
  790. }
  791. }],
  792. series: [
  793. {
  794. // radius: ['40%', '70%'],
  795. // center: ['50%', '74%'],
  796. name: '任务次数',
  797. type: 'line',
  798. smooth: true,
  799. symbol: 'circle',
  800. symbolSize: 5,
  801. showSymbol: false,
  802. containLabel: true,
  803. lineStyle: {
  804. normal: {
  805. color: 'rgba(31, 174, 234, 1)',
  806. width: 2
  807. }
  808. },
  809. areaStyle: {
  810. normal: {
  811. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  812. offset: 0,
  813. color: 'rgba(31, 174, 234, 0.4)'
  814. }, {
  815. offset: 0.8,
  816. color: 'rgba(31, 174, 234, 0.1)'
  817. }], false),
  818. shadowColor: 'rgba(0, 0, 0, 0.1)',
  819. }
  820. },
  821. itemStyle: {
  822. normal: {
  823. color: '#1f7eea',
  824. borderColor: 'rgba(31, 174, 234, .1)',
  825. borderWidth: 5
  826. }
  827. },
  828. data: yAxis_data // [3, 6, 3, 6, 3, 9, 3]
  829. },
  830. ]
  831. };
  832. myChart.setOption(option);
  833. window.addEventListener("resize", function () {
  834. myChart.resize();
  835. });
  836. $(".sebtn a").click(function () {
  837. $(this).addClass("active").siblings().removeClass("active")
  838. })
  839. $(".sebtn a").eq(0).click(function () {
  840. myChart.setOption(option1);
  841. })
  842. $(".sebtn a").eq(1).click(function () {
  843. myChart.setOption(option2);
  844. })
  845. $(".sebtn a").eq(2).click(function () {
  846. myChart.setOption(option3);
  847. })
  848. }
  849. // 库房端报警类型统计
  850. function echarts_库房端报警类型统计() {
  851. var myChart = echarts.init(document.getElementById('echarts_库房端报警类型统计'));
  852. data = []
  853. data_num = 0
  854. for (var C_key in C_json.Warning.T_库房报警类型统计) {
  855. data_num += C_json.Warning.T_库房报警类型统计[C_key]
  856. data.push({value: C_json.Warning.T_库房报警类型统计[C_key], name: C_key})
  857. }
  858. data.push({
  859. // make an record to fill the bottom 50%
  860. value: data_num,
  861. itemStyle: {
  862. // stop the chart from rendering this piece
  863. color: 'none',
  864. decal: {
  865. symbol: 'none'
  866. }
  867. },
  868. label: {
  869. show: false
  870. }
  871. })
  872. option = {
  873. tooltip: {
  874. trigger: 'item'
  875. },
  876. // legend: {
  877. // top: '5%',
  878. // left: 'center',
  879. // // doesn't perfectly work with our tricks, disable it
  880. // selectedMode: false
  881. // },
  882. color: ['#45C2E0', '#C1EBDD', '#c0a9fa', '#75bef3', '#FF9393', '#e9aaff', '#ffc1a7'],
  883. series: [
  884. {
  885. name: '报警类型',
  886. type: 'pie',
  887. radius: ['40%', '70%'],
  888. center: ['50%', '74%'],
  889. // adjust the start angle
  890. startAngle: 180,
  891. label: {
  892. color: "#C1EBDD",
  893. show: true,
  894. formatter(param) {
  895. // correct the percentage
  896. return param.name + ' (' + param.percent * 2 + '%)';
  897. }
  898. },
  899. data: data
  900. }
  901. ]
  902. };
  903. option2 = {
  904. tooltip: {
  905. trigger: 'item'
  906. },
  907. color: ['#45C2E0', '#C1EBDD', '#c0a9fa', '#75bef3', '#FF9393', '#e9aaff', '#ffc1a7'],
  908. series: [
  909. {
  910. name: '测试测试',
  911. type: 'pie',
  912. radius: ['40%', '70%'],
  913. center: ['50%', '74%'],
  914. // adjust the start angle
  915. startAngle: 180,
  916. label: {
  917. color: "#C1EBDD",
  918. show: true,
  919. formatter(param) {
  920. // correct the percentage
  921. return param.name + ' (' + param.percent * 2 + '%)';
  922. }
  923. },
  924. data: data
  925. }
  926. ]
  927. }
  928. myChart.setOption(option);
  929. window.addEventListener("resize", function () {
  930. myChart.resize();
  931. });
  932. //添加按钮点击切换
  933. document.getElementById('storageChartButton').addEventListener('click', function (){
  934. console.log(myChart.getOption(),"点击切换了储存端")
  935. if (myChart.getOption()===option){
  936. myChart.setOption(option2);
  937. }else{
  938. myChart.setOption(option);
  939. }
  940. })
  941. //添加按钮点击切换
  942. document.getElementById('transportChartButton').addEventListener('click', function (){
  943. console.log(myChart.getOption(),"点击切换了运输端")
  944. if (myChart.getOption()===option){
  945. myChart.setOption(option3);
  946. }else{
  947. myChart.setOption(option);
  948. }
  949. })
  950. $(".sebtn a").click(function () {
  951. $(this).addClass("active").siblings().removeClass("active")
  952. })
  953. $(".sebtn a").eq(0).click(function () {
  954. myChart.setOption(option1);
  955. })
  956. $(".sebtn a").eq(1).click(function () {
  957. myChart.setOption(option2);
  958. })
  959. $(".sebtn a").eq(2).click(function () {
  960. myChart.setOption(option3);
  961. })
  962. }