macstatus_20220409152304.js 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836
  1. var myChart = echarts.init(document.getElementById("rateChart"), "dark");
  2. var fisrtIn = true;
  3. var clock = new Vue({
  4. el: "#clock",
  5. data: {
  6. time: "",
  7. date: "",
  8. weekday: "",
  9. },
  10. watch: {},
  11. });
  12. log();
  13. var week = [
  14. "星期天",
  15. "星期一",
  16. "星期二",
  17. "星期三",
  18. "星期四",
  19. "星期五",
  20. "星期六",
  21. ];
  22. var timerID = setInterval(updateTime, 1000);
  23. updateTime();
  24. function updateTime() {
  25. var cd = new Date();
  26. clock.time =
  27. zeroPadding(cd.getHours(), 2) +
  28. ":" +
  29. zeroPadding(cd.getMinutes(), 2) +
  30. ":" +
  31. zeroPadding(cd.getSeconds(), 2);
  32. clock.date =
  33. zeroPadding(cd.getFullYear(), 4) +
  34. "-" +
  35. zeroPadding(cd.getMonth() + 1, 2) +
  36. "-" +
  37. zeroPadding(cd.getDate(), 2);
  38. clock.weekday = week[cd.getDay()];
  39. }
  40. function zeroPadding(num, digit) {
  41. var zero = "";
  42. for (var i = 0; i < digit; i++) {
  43. zero += "0";
  44. }
  45. return (zero + num).slice(-digit);
  46. }
  47. // var autoScrollHeight = $(window).height() - 385;
  48. var autoScrollBool = false;
  49. var autoScrollHeight = "calc(100vh - 13.14rem)";
  50. // if ($(window).height() <= 800) {
  51. // autoScrollHeight = $(window).height() - 188;
  52. // }
  53. var option = {
  54. backgroundColor: "",
  55. tooltip: {
  56. show: false,
  57. },
  58. padding: [0, 0, 0, 0],
  59. grid: {
  60. x: 30,
  61. y: 30,
  62. x2: 20,
  63. y2: 20,
  64. },
  65. series: [],
  66. };
  67. myChart.setOption(option);
  68. var $autoScroll;
  69. var searchParams;
  70. var factoryId = getQueryStringByName("factoryId") || 8;
  71. var plantId = getQueryStringByName("plantId") || 204;
  72. var statusId = getQueryStringByName("statusId") || -1;
  73. var time =
  74. getQueryStringByName("time") ||
  75. new Date(dateFormat("yyyy-MM-dd", new Date()));
  76. var shift = getQueryStringByName("shift") || "1";
  77. var statusArr = [];
  78. if (statusId > 0) {
  79. statusArr.push(statusId);
  80. }
  81. var macLines = [];
  82. $(function () {
  83. layer.load();
  84. refreshToken();
  85. //var factoryId = 8;
  86. // initEcharts();
  87. $("#auto-scroll").css("height", autoScrollHeight);
  88. var windowWidth = $(window).width();
  89. var containerWidth = $(".table").width();
  90. $("#rightFrame").attr(
  91. "src",
  92. "../pages/macstatus-right-nav.html?v=" +
  93. Date.now() +
  94. "&factoryId=" +
  95. factoryId +
  96. "&plantId=" +
  97. plantId +
  98. "&statusId=" +
  99. statusId
  100. );
  101. $(document).delegate(".mac-image", "click", function () {
  102. var macCode = $(this).attr("data-code");
  103. window.open(
  104. `../pages/machine-detail.html?v=` +
  105. Date.now() +
  106. `&macCode=${macCode}&date=${clock.date}`,
  107. "_blank"
  108. );
  109. initChartAndMachines(searchParams);
  110. });
  111. $("#auto-scroll").on("mouseover", function (e) {
  112. e.stopPropagation();
  113. // $autoScroll.liMarquee('play');
  114. // autoScroll(false);
  115. $(this).css("overflow-y", "scroll");
  116. });
  117. $("#auto-scroll").on("mouseout", function (e) {
  118. e.stopPropagation();
  119. // $autoScroll.liMarquee('play');
  120. // autoScroll(autoScrollBool);
  121. $(this).css("overflow-y", "hidden");
  122. });
  123. $(window).resize(() => {
  124. initMachines(macLines);
  125. });
  126. });
  127. let connection = null;
  128. function createConnection(filter, recipe) {
  129. if (connection) {
  130. connection.stop();
  131. connection = null;
  132. }
  133. time = dateFormat("yyyy-MM-dd", new Date(time));
  134. connection = new signalR.HubConnectionBuilder()
  135. .withUrl(
  136. `${server}/eap/hub/macstatus/last?filter=${filter}&recipe=${recipe}&date=${time}&type=${shift}`
  137. )
  138. .build();
  139. connection.serverTimeoutInMilliseconds = 24e4;
  140. connection.keepAliveIntervalInMilliseconds = 12e4;
  141. connection.on("BeginConnection", function (obj) {
  142. layer.closeAll("loading");
  143. if (obj) {
  144. if (!obj.data || obj.data.total <= 0) {
  145. $("#auto-scroll").empty();
  146. alert("未查询到数据");
  147. return;
  148. }
  149. initPage(
  150. obj.data.factory + "&nbsp;&nbsp;" + obj.data.plant,
  151. obj.data.total,
  152. obj.data.statusCount
  153. );
  154. debugger;
  155. initMachines(obj.data.lines);
  156. initEcharts(obj.data.processRunRate);
  157. macLines = obj.data.lines;
  158. var iframe = document.getElementById("rightFrame");
  159. iframe.contentWindow.setRefreshDate(new Date(time));
  160. } else {
  161. alert(
  162. (!obj.msg || obj.msg) === "" ? "初始化页面失败,请联系管理员" : obj.msg
  163. );
  164. }
  165. });
  166. connection.on("ReceiveUpdate", function (obj) {
  167. layer.closeAll("loading");
  168. if (obj) {
  169. if (!obj.data || obj.data.total <= 0) {
  170. $("#auto-scroll").empty();
  171. alert("未查询到数据");
  172. return;
  173. }
  174. initPage(
  175. obj.data.factory + "&nbsp;&nbsp;" + obj.data.plant,
  176. obj.data.total,
  177. obj.data.statusCount
  178. );
  179. // updateMachineItem(obj.data.lines);
  180. initMachines(obj.data.lines);
  181. initEcharts(obj.data.processRunRate);
  182. macLines = obj.data.lines;
  183. var iframe = document.getElementById("rightFrame");
  184. iframe.contentWindow.setRefreshDate(new Date(time));
  185. } else {
  186. alert(
  187. (!obj.msg || obj.msg) === "" ? "获取数据失败,请联系管理员" : obj.msg
  188. );
  189. }
  190. });
  191. connection.on("Error", function (obj) {
  192. console.log("检测到连接出现异常");
  193. console.log(new Date());
  194. console.log(obj);
  195. setTimeout(() => {
  196. startConnection();
  197. }, 5000);
  198. });
  199. connection.on("Finished", function (obj) {
  200. connection.stop();
  201. console.log("finished");
  202. });
  203. }
  204. async function startConnection() {
  205. if (connection.state !== signalR.HubConnectionState.Disconnected) return;
  206. connection.start({ transport: ["webSockets"] }).catch((err) => {
  207. console.log("检测到连接出现异常");
  208. console.error(err);
  209. setTimeout(() => {
  210. startConnection();
  211. }, 5000);
  212. });
  213. }
  214. function setUpConnection(filter, recipe) {
  215. createConnection(filter, recipe);
  216. startConnection();
  217. }
  218. var timeInterval = null;
  219. //加载echarts和机台列表
  220. function initChartAndMachines(params) {
  221. searchParams = params;
  222. var filter = "";
  223. if (params) {
  224. if (params.factory) {
  225. filter += ` and a.factoryId=${params.factory}`;
  226. }
  227. if (params.plant) {
  228. filter += ` and l.id=${params.plant}`;
  229. }
  230. //#region 工序过滤
  231. if (params.types && params.types.length > 0) {
  232. var typeFilter = "(";
  233. params.types.forEach((t) => {
  234. typeFilter += `'${t.toUpperCase()}',`;
  235. });
  236. typeFilter = typeFilter.substr(0, typeFilter.length - 1) + ")";
  237. filter += ` and g.FCode in ${typeFilter}`;
  238. }
  239. //#endregion
  240. //#region 机型过滤
  241. if (params.macModels && params.macModels.length > 0) {
  242. var typeFilter = "(";
  243. params.macModels.forEach((t) => {
  244. typeFilter += `'${t}',`;
  245. });
  246. typeFilter = typeFilter.substr(0, typeFilter.length - 1) + ")";
  247. filter += ` and a.MModeId in ${typeFilter}`;
  248. }
  249. //#endregion
  250. // if (params.floor && params.lines.length > 0) {
  251. // var typeFilter = '(';
  252. // params.lines.forEach(t => {
  253. // typeFilter += `'${t}',`;
  254. // });
  255. // typeFilter = typeFilter.substr(0, typeFilter.length - 1) + ')';
  256. // filter += ` and a.regionId in ${typeFilter}`;
  257. // }
  258. //#region 线体过滤
  259. if (params.lines && params.lines.length > 0) {
  260. var typeFilter = "(";
  261. params.lines.forEach((t) => {
  262. typeFilter += `'${t}',`;
  263. });
  264. typeFilter = typeFilter.substr(0, typeFilter.length - 1) + ")";
  265. filter += ` and a.regionId in ${typeFilter}`;
  266. }
  267. //#endregion
  268. //#region 状态过滤
  269. if (params.status && params.status.length > 0) {
  270. var typeFilter = "(";
  271. params.status.forEach((t) => {
  272. typeFilter += `'${t}',`;
  273. });
  274. typeFilter = typeFilter.substr(0, typeFilter.length - 1) + ")";
  275. filter += ` and b.statusId in ${typeFilter}`;
  276. }
  277. //#endregion
  278. if (params.maccode) {
  279. filter += ` and a.fcode='${params.maccode}' `;
  280. }
  281. if (params.time) {
  282. if (params.time instanceof Date) {
  283. time = dateFormat("yyyy-MM-dd", params.time);
  284. } else {
  285. time = params.time;
  286. }
  287. clock.date = time;
  288. if (time != dateFormat("yyyy-MM-dd", new Date())) {
  289. clearInterval(timerID);
  290. clock.weekday = week[new Date(time).getDay()];
  291. if (params.shift == 1) {
  292. clock.time = "白班";
  293. } else if (params.shift == 2) {
  294. clock.time = "夜班";
  295. } else {
  296. clock.time = "整天";
  297. }
  298. } else {
  299. if (timerID) {
  300. clearInterval(timerID);
  301. timerID = setInterval(updateTime, 1000);
  302. }
  303. }
  304. }
  305. if (params.shift) {
  306. shift = params.shift;
  307. }
  308. }
  309. if (filter === "") {
  310. filter = " and a.factoryId=8";
  311. }
  312. setUpConnection(filter, params.recipe);
  313. // initEcharts(filter, params.recipe);
  314. // if (timeInterval) {
  315. // clearInterval(timeInterval);
  316. // }
  317. // timeInterval = setInterval(() => {
  318. // initEcharts(filter, params.recipe);
  319. // }, 1000 * 60 * 10);
  320. }
  321. initChartAndMachines({
  322. factory: factoryId,
  323. plant: plantId,
  324. status: statusArr,
  325. recipe: "",
  326. time: time,
  327. shift: shift,
  328. });
  329. function showLoading() {
  330. hideNav($(".rightNav"), $(".bgDiv"));
  331. layer.load();
  332. }
  333. function autoScroll(auto) {
  334. if (auto) {
  335. $("#auto-scroll ul:first").css("margin-top", "3rem");
  336. $autoScroll = $("#auto-scroll").liMarquee({
  337. direction: "up",
  338. runshort: false,
  339. /*内容不足时不滚动*/
  340. scrollamount: 40 /*速度*/,
  341. behavior: "alternate",
  342. });
  343. } else {
  344. $("#auto-scroll ul:first").css("margin-top", "0.5rem");
  345. if ($autoScroll) {
  346. $autoScroll.liMarquee("destroy");
  347. }
  348. }
  349. }
  350. function initMachines(lines) {
  351. $("#auto-scroll").empty();
  352. for (var item in lines) {
  353. var line = lines[item];
  354. var $ul = $("<ul>");
  355. $ul.addClass("mac-row flex marginTop");
  356. $ul.attr("data-id", line.floorName + line.lineName);
  357. var $numLi = $("<li>");
  358. $numLi.addClass("content-tbody-td bordered num");
  359. var floorSpan = $("<span>");
  360. floorSpan.addClass("line-name");
  361. floorSpan.css("margin-top", "-2rem");
  362. floorSpan.text(line.floorName);
  363. var lineSpan = $("<span>");
  364. lineSpan.addClass("line-name");
  365. lineSpan.css("margin-top", "10px");
  366. let rates = 0;
  367. let macCount = 0;
  368. for (let i in line.modelMachines) {
  369. let macs = line.modelMachines[i].filter((item) => {
  370. if (
  371. item.recipe != "暂无" &&
  372. item.statusName != "离线" &&
  373. item.statusName != "关机"
  374. ) {
  375. rates += item.runRate;
  376. macCount++;
  377. }
  378. });
  379. }
  380. if (macCount == 0) {
  381. macCount = 1;
  382. }
  383. rates = rates / macCount;
  384. lineSpan.text(line.lineName);
  385. var rateLine = $("<span>");
  386. rateLine.css("margin-top", "10px");
  387. rateLine.addClass("line-name");
  388. rateLine.text(rates.toFixed(2) + "%");
  389. $numLi.append(floorSpan).append(lineSpan).append(rateLine);
  390. var $equipmentLi = $("<li>");
  391. $equipmentLi.addClass("content-tbody-td equipment");
  392. var $daDiv = $("<div>");
  393. $daDiv.addClass("da");
  394. var count = 1;
  395. var modelMachines = line.modelMachines;
  396. var macs = [];
  397. if (modelMachines) {
  398. for (var key in modelMachines) {
  399. var singles = modelMachines[key];
  400. singles.forEach((item) => {
  401. macs.push(item);
  402. });
  403. }
  404. }
  405. if (macs && macs.length > 0) {
  406. macs.forEach((element) => {
  407. $daDiv.append(appendMacItem(element, count));
  408. count++;
  409. });
  410. }
  411. $equipmentLi.append($daDiv);
  412. // $ul.append($numLi).append($recipeLi).append($runrateLi).append($equipmentLi);
  413. $ul.append($numLi).append($equipmentLi);
  414. // 每条线的机台总数
  415. var lineLength = macs.length;
  416. var macWidth = $(".mac-item").width();
  417. var macContainerWidth = $(".equipment").width();
  418. var windowWidth = document.body.offsetWidth;
  419. var singleWidth = 70;
  420. if (windowWidth <= 1366) {
  421. singleWidth = 70;
  422. } else {
  423. singleWidth = 70 + 0.061 * (windowWidth - 1366);
  424. }
  425. var rowCount = Math.floor(
  426. (macContainerWidth - 200) / (macWidth || singleWidth)
  427. );
  428. var rows = Math.ceil(lineLength / rowCount);
  429. if (rows > 1) {
  430. var singleHeight = 8.24;
  431. // if(windowWidth>1366){
  432. // singleHeight = 105+0.15*(windowWidth-1366);
  433. // }
  434. var rowMargin = 1;
  435. // $ul.height(`${rows * singleHeight + (rows - 0.2) * rowMargin}`);
  436. // $numLi.css({
  437. // height: `${rows * singleHeight + (rows - 1) * rowMargin}px`,
  438. // "line-height": `${rows * singleHeight + (rows - 1) * rowMargin}px`,
  439. // });
  440. $ul.height(`${rows * singleHeight + (rows - 1) * (rowMargin - 0.2)}rem`);
  441. $numLi.css({
  442. height: `${rows * singleHeight + (rows - 1) * (rowMargin - 0.6)}rem`,
  443. "line-height": `${
  444. rows * singleHeight + (rows - 1) * (rowMargin - 0.6)
  445. }rem`,
  446. });
  447. $($ul).css({
  448. "margin-bottom": "-3rem",
  449. });
  450. $($ul).find(".mac-item").addClass("multi-mac-item");
  451. }
  452. $("#auto-scroll").append($ul);
  453. }
  454. // if (fisrtIn) {
  455. autoScroll(autoScrollBool);
  456. // fisrtIn = false;
  457. // } else {
  458. // if ($autoScroll) {
  459. // $autoScroll.liMarquee("destroy");
  460. // }
  461. // autoScroll(autoScrollBool);
  462. // }
  463. if (lines.length > 5) {
  464. // $autoScroll = $('#auto-scroll').liMarquee({
  465. // direction: 'up',
  466. // runshort: false,
  467. // /*内容不足时不滚动*/
  468. // scrollamount: 30 /*速度*/,
  469. // behavior: 'alternate',
  470. // hoverstop: true
  471. // });
  472. } else {
  473. // $('#auto-scroll').removeEventListener("mouseover", null, false);
  474. // $('#auto-scroll').removeEventListener("mouseout", null, false);
  475. }
  476. }
  477. // 生成单个机台块
  478. function appendMacItem(mac, count) {
  479. var $macItemDiv = $("<div>");
  480. $macItemDiv.addClass("mac-item");
  481. $macItemDiv.attr("data-id", `${mac.line}_${count}`);
  482. $macItemDiv.attr("data-name", mac.macCode);
  483. var $macIdDiv = $("<div>").addClass("macId");
  484. // $macIdDiv.addClass(`mac_${mac.statusCode}`);
  485. $macIdDiv.css(
  486. "color",
  487. `rgb(${mac.color.red},${mac.color.green},${mac.color.blue})`
  488. );
  489. $macIdDiv.text(mac.macCode);
  490. var $imgDiv = $("<div>").addClass("img");
  491. var $img = $("<img>").attr({
  492. width: "100%",
  493. height: "100%",
  494. src: `../images/machines/${mac.useImage}/${mac.useImage}_${mac.statusCode}.png`,
  495. });
  496. $imgDiv.append($img).addClass("mac-image").attr("data-code", mac.macCode);
  497. var $recipeDiv = $("<div>");
  498. $recipeDiv.addClass("mac-recipe").text(mac.recipe);
  499. var time_bfval = mac.timeLen;
  500. // var time_val = time_bfval > 60 ? Math.floor(time_bfval / 60) + '分' + time_bfval % 60 + '秒' : time_bfval + '秒';
  501. // var time_val = time_bfval > 60 ? Math.floor(time_bfval / 60) + '分' : time_bfval + '秒';
  502. var newStr = "";
  503. var year = 365 * 24 * 3600;
  504. if (time_bfval > year) {
  505. newStr = (time_bfval / year).toFixed(2) + "年";
  506. } else if (time_bfval > year / 12) {
  507. newStr = ((time_bfval / year) * 12).toFixed(2) + "月";
  508. } else if (time_bfval > 3600 * 24) {
  509. newStr = (time_bfval / 3600 / 24).toFixed(2) + "天";
  510. } else if (time_bfval > 3600) {
  511. newStr = (time_bfval / 3600).toFixed(2) + "小时";
  512. } else if (time_bfval > 60) {
  513. newStr = (time_bfval / 60).toFixed(2) + "分";
  514. } else {
  515. newStr = time_bfval.toFixed(2) + "秒";
  516. }
  517. var timeDiv = $("<div>").addClass("time").text(newStr);
  518. // $macItemDiv.append($macIdDiv).append($imgDiv).append($recipeDiv).append(timeDiv);
  519. var runRateStr = "";
  520. if (!mac.runRate) {
  521. runRateStr = "0.00%";
  522. } else if (mac.runRate > 100) {
  523. runRateStr = "数据异常";
  524. } else {
  525. runRateStr = mac.runRate.toFixed(2) + "%";
  526. }
  527. var runrateDiv = $("<div>").addClass("time").text(runRateStr);
  528. $macItemDiv
  529. .append($macIdDiv)
  530. .append($imgDiv)
  531. .append($recipeDiv)
  532. .append(timeDiv)
  533. .append(runrateDiv);
  534. // $imgDiv.bind('click', function () {
  535. // window.open(`../pages/machine-detail.html?v=` + Date.now() + `&macCode=${mac.macCode}`, '_blank');
  536. // });
  537. return $macItemDiv;
  538. }
  539. //头部表格数字
  540. function initPage(factory, total, data) {
  541. // this.totalInfo =data;
  542. $("#tb_count").empty();
  543. var $tbTotalTitles = $("<tr>");
  544. var $tbTotalNums = $("<tr>");
  545. var $td_first = $("<td>");
  546. $td_first.text("总计");
  547. $tbTotalTitles.append($td_first);
  548. var $td_total = $("<td>");
  549. $td_total.text(total);
  550. $tbTotalNums.append($td_total);
  551. $.each(data, function (index, item) {
  552. var t_name = $("<td>");
  553. t_name
  554. .text(item.statusName)
  555. .css(
  556. "background-color",
  557. `rgb(${item.color.red},${item.color.green},${item.color.blue})`
  558. );
  559. $tbTotalTitles.append(t_name);
  560. var t_val = $("<td>");
  561. t_val.text(item.count);
  562. $tbTotalNums.append(t_val);
  563. });
  564. $("#tb_count").append($tbTotalTitles);
  565. $("#tb_count").append($tbTotalNums);
  566. $("#li_factory").empty();
  567. $("#li_factory").html(factory);
  568. }
  569. //echarts稼动率
  570. function initEcharts(chartDto) {
  571. var myChart = echarts.init(document.getElementById("rateChart"));
  572. myChart.showLoading({
  573. text: "正在加载...",
  574. color: "#B21E1E",
  575. textColor: "#B21E1E",
  576. });
  577. // axios
  578. // .get(`${server}/eap/api/MacStatusTotalInfo/getprocessrunrate`, {
  579. // params: {
  580. // filter: filter,
  581. // recipe: recipe,
  582. // date: dateFormat("yyyy-MM-dd", new Date(time)),
  583. // type: shift,
  584. // },
  585. // })
  586. // .then((obj) => {
  587. myChart.hideLoading(); //提示关闭
  588. if (chartDto) {
  589. var x_data = chartDto.xdata;
  590. var y_data = chartDto.ydata;
  591. var init_data = [];
  592. var series = [];
  593. var firtsCenter = 12;
  594. for (let index = 0; index < x_data.length; index++) {
  595. var seriesData = (y_data[index] * 100).toFixed(1);
  596. var xCenter = firtsCenter + 25 * index;
  597. // init_data.push();
  598. series.push({
  599. name: `${x_data[index]}稼动率`,
  600. type: "gauge",
  601. min: 0,
  602. max: 100,
  603. splitNumber: 5,
  604. radius: "80%",
  605. center: [`${xCenter}%`, "50%"], // 默认全局居中
  606. axisLine: {
  607. // 坐标轴线
  608. lineStyle: {
  609. // 属性lineStyle控制线条样式
  610. color: [
  611. [0.6, "#ff4500"],
  612. [0.8, "#1e90ff"],
  613. [1, "lime"],
  614. ],
  615. width: 3,
  616. shadowColor: "#fff", //默认透明
  617. shadowBlur: 10,
  618. },
  619. },
  620. axisLabel: {
  621. // 坐标轴小标记
  622. fontWeight: "bolder",
  623. color: "#fff",
  624. shadowColor: "#fff", //默认透明
  625. shadowBlur: 10,
  626. },
  627. axisTick: {
  628. // 坐标轴小标记
  629. length: 5, // 属性length控制线长
  630. lineStyle: {
  631. // 属性lineStyle控制线条样式
  632. color: "auto",
  633. shadowColor: "#fff", //默认透明
  634. shadowBlur: 10,
  635. },
  636. },
  637. splitLine: {
  638. // 分隔线
  639. length: 5, // 属性length控制线长
  640. lineStyle: {
  641. // 属性lineStyle(详见lineStyle)控制线条样式
  642. width: 3,
  643. color: "#fff",
  644. shadowColor: "#fff", //默认透明
  645. shadowBlur: 10,
  646. },
  647. },
  648. pointer: {
  649. // 分隔线
  650. shadowColor: "#fff", //默认透明
  651. shadowBlur: 5,
  652. width: 3, //指针的宽度
  653. length: "60%", //指针长度,按照半圆半径的百分比
  654. },
  655. title: {
  656. textStyle: {
  657. // 其余属性默认使用全局文本样式,详见TEXTSTYLE
  658. fontWeight: "bolder",
  659. fontSize: 20,
  660. fontStyle: "italic",
  661. color: "#fff",
  662. shadowColor: "#fff", //默认透明
  663. shadowBlur: 10,
  664. },
  665. },
  666. detail: {
  667. // backgroundColor: 'rgba(30,144,255,0.8)',
  668. // borderWidth: 1,
  669. borderColor: "#fff",
  670. shadowColor: "#fff", //默认透明
  671. shadowBlur: 5,
  672. offsetCenter: [0, "90%"], // x, y,单位px
  673. textStyle: {
  674. // 其余属性默认使用全局文本样式,详见TEXTSTYLE
  675. fontWeight: "bolder",
  676. color: "#fff",
  677. fontSize: 14,
  678. },
  679. formatter: x_data[index] + " {value}%",
  680. },
  681. data: [
  682. {
  683. value: seriesData,
  684. name: "",
  685. },
  686. ],
  687. });
  688. }
  689. option.series = series;
  690. myChart.setOption(option);
  691. }
  692. // })
  693. // .catch((resp) => {
  694. // console.log("请求失败:" + resp.status + "," + resp.statusText);
  695. // });
  696. }
  697. function exportImage() {
  698. var width = window.screen.width;
  699. var scrollHeight = $("#auto-scroll").prop("scrollHeight");
  700. $("#export-container").css("height", scrollHeight);
  701. $("#auto-scroll").css("height", scrollHeight);
  702. $("#canvas").css("opacity", "0");
  703. html2canvas(document.querySelector("body"), {
  704. width: width / 1,
  705. scale: 0.8,
  706. scrollY: 0,
  707. scrollX: 0,
  708. windowHeight: scrollHeight + 3000,
  709. }).then((canvas) => {
  710. $("#auto-scroll").css("height", autoScrollHeight);
  711. $("#canvas").css("opacity", "1");
  712. var url = canvas.toDataURL("image/jpg", 1);
  713. dataURIToBlob("机台状态看板导出.jpg", url, callback);
  714. });
  715. }
  716. var dataURIToBlob = function (imgName, dataURI, callback) {
  717. var binStr = atob(dataURI.split(",")[1]),
  718. len = binStr.length,
  719. arr = new Uint8Array(len);
  720. for (var i = 0; i < len; i++) {
  721. arr[i] = binStr.charCodeAt(i);
  722. }
  723. callback(imgName, new Blob([arr]));
  724. };
  725. var callback = function (imgName, blob) {
  726. var triggerDownload = $("<a>")
  727. .attr("href", URL.createObjectURL(blob))
  728. .attr("download", imgName)
  729. .appendTo("body")
  730. .on("click", function () {
  731. if (navigator.msSaveBlob) {
  732. return navigator.msSaveBlob(blob, imgName);
  733. }
  734. });
  735. triggerDownload[0].click();
  736. triggerDownload.remove();
  737. };
  738. function updateMachineItem(lines) {
  739. for (var item in lines) {
  740. var line = lines[item];
  741. var floor = line.floorName + line.lineName;
  742. var lineEle = $("#auto-scroll").find(`[data-id=${floor}]`);
  743. var rates = 0;
  744. var macItem = $();
  745. for (let i in line.modelMachines) {
  746. let macs = line.modelMachines[i].filter((item) => {
  747. if (
  748. item.recipe != "暂无" &&
  749. item.statusName != "离线" &&
  750. item.statusName != "关机"
  751. ) {
  752. rates += item.runRate;
  753. macCount++;
  754. }
  755. });
  756. }
  757. if (macCount == 0) {
  758. macCount = 1;
  759. }
  760. var lineOveralls = $(lineEle).find(".line-name");
  761. rates = rates / macCount;
  762. $(lineOveralls[2]).text(rates.toFixed(2) + "%");
  763. var modelMachines = line.modelMachines;
  764. if (modelMachines) {
  765. for (var key in modelMachines) {
  766. var singles = modelMachines[key];
  767. singles.forEach((item) => {
  768. macs.push(item);
  769. });
  770. }
  771. }
  772. for (var mac in macs) {
  773. var macItem = $(lineEle).find(`[data-name=${mac.maccode}]`);
  774. var runrateEle = $(macItem).find();
  775. }
  776. }
  777. }
  778. function refreshToken() {
  779. axios
  780. .get(`${server}/eap/api/macmodel/get`, {
  781. params: {
  782. filter: null,
  783. pageSize: 1,
  784. pageIndex: 1,
  785. },
  786. })
  787. .then((obj) => {});
  788. }