workShopBoard.html 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta
  6. name="viewport"
  7. content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
  8. />
  9. <title>index</title>
  10. <script type="text/javascript" src="../plugin/jquery.min.js"></script>
  11. <script type="text/javascript" src="../js/util.js"></script>
  12. <script type="text/javascript" src="../js/common.js"></script>
  13. <link rel="stylesheet" href="../css/common.css" />
  14. <link rel="stylesheet" href="../css/workShop.css" />
  15. <style>
  16. *,
  17. body {
  18. font-size: 0.18rem;
  19. }
  20. </style>
  21. </head>
  22. <script>
  23. $(window).load(function () {
  24. $(".loading").fadeOut();
  25. });
  26. //动态设置视口
  27. const setSize = () => {
  28. // 获取html元素
  29. const html = document.getElementsByTagName("html")[0];
  30. // 获取屏幕宽度
  31. const pageWidth = html.getBoundingClientRect().width;
  32. // 动态计算字体大小(rem)
  33. html.style.fontSize = pageWidth / 20 + "px";
  34. };
  35. setSize();
  36. window.addEventListener("resize", setSize, false);
  37. </script>
  38. <script type="text/javascript" src="../plugin/vue.js"></script>
  39. <script type="text/javascript" src="../plugin/datav.js"></script>
  40. <script type="text/javascript" src="../plugin/echarts.min.js"></script>
  41. <body>
  42. <div class="loading">
  43. <div class="load_box">
  44. <img src="../images/loading.gif" /> 看板加载中,请稍等...
  45. </div>
  46. </div>
  47. <div id="app" class="container">
  48. <dv-scroll-board
  49. ref="scrollBoard"
  50. :config="config"
  51. style="width: 12.4rem; height: 8.1rem; left: 6.6rem; top: 1.8rem"
  52. />
  53. </div>
  54. <script>
  55. var app = new Vue({
  56. el: "#app",
  57. data() {
  58. return {
  59. start: 0,
  60. length: 10,
  61. warehouseId: 460335910903873,
  62. header: [
  63. '<span style="color:#85E0FF;font-size:0.24rem">模检具名称</span>',
  64. '<span style="color:#85E0FF;font-size:0.24rem">模检具状态</span>',
  65. '<span style="color:#85E0FF;font-size:0.24rem">零件编号</span>',
  66. '<span style="color:#85E0FF;font-size:0.24rem">使用时间(小时)</span>',
  67. '<span style="color:#85E0FF;font-size:0.24rem">使用次数</span>',
  68. '<span style="color:#85E0FF;font-size:0.24rem">是否需要保养</span>',
  69. ],
  70. config: {},
  71. addList: [],
  72. };
  73. },
  74. methods: {},
  75. mounted() {
  76. const _self = this;
  77. const url =
  78. "/api/BulletinBoardResource/queryBoardInventoryByWarehouse";
  79. const params = [
  80. ["warehouseId", _self.warehouseId],
  81. ["start", _self.start],
  82. ["length", _self.length],
  83. ];
  84. ajaxGet(url, params).then((success) => {
  85. if (success.errorCode === 0) {
  86. if (success.datas && success.datas.length > 0) {
  87. const configData = success.datas.map((item) => [
  88. item.name,
  89. item.inventoryStatus,
  90. item.no,
  91. item.useDate,
  92. item.useCount,
  93. item.needMaintain == true ? "是" : "否",
  94. ]);
  95. _self.config = {
  96. header: _self.header,
  97. headerHeight: 60,
  98. rowNum: 10,
  99. hoverPause: false,
  100. data: configData,
  101. headerBGC: "#112f6e",
  102. oddRowBGC: "#06105a",
  103. evenRowBGC: "#19225e",
  104. align: [
  105. "center",
  106. "center",
  107. "center",
  108. "center",
  109. "center",
  110. "center",
  111. ],
  112. columnWidth: [220, 200, 220, 200, 200, 200],
  113. };
  114. }
  115. }
  116. });
  117. },
  118. beforeUnmount() {
  119. const _self = this;
  120. },
  121. });
  122. </script>
  123. </body>
  124. </html>