C_Mode_v3D.js 32 KB

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