warehouse.html 44 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=0.5">
  6. <title>仓库管理看板</title>
  7. <link href="/lib/bootstrap/bootstrap.min.css" rel="stylesheet" />
  8. <link href="/css/dashboard.css" rel="stylesheet" />
  9. <script type="text/javascript" src="/js/service.js"></script>
  10. <script type="text/javascript" src="/js/session.js"></script>
  11. <script type="text/javascript" src="/js/getService.js"></script>
  12. <script type="text/javascript" src="/js/service/method-get-service.js"></script>
  13. <script type="text/javascript" src="/lib/jquery-3.4.1.js"></script>
  14. <script type="text/javascript" src="/lib/jquery-3.4.1.min.js"></script>
  15. </head>
  16. <body id="container" class="container-fluid">
  17. <div class="row no-padding head-bar" style="height:81px">
  18. <div class="col-lg-1 col-md-1">
  19. </div>
  20. <div class="col-lg-4 col-md-4 page-title">
  21. 仓库管理看板
  22. </div>
  23. <div class="col-lg-3 col-md-3 block-padding">
  24. <button type="button" class="btn btn-warning"
  25. onclick="window.location.replace('/pages/dashboard/produce.html');">制造看板</button>
  26. <button type="button" class="btn btn-warning"
  27. onclick="window.location.replace('/pages/dashboard/line.html');">产线看板</button>
  28. <button type="button" class="btn btn-warning"
  29. onclick="window.location.replace('/pages/dashboard/quality.html');">品质看板</button>
  30. </div>
  31. <div class="col-lg-4 col-md-4">
  32. </div>
  33. </div>
  34. <div class="my-container" id="div-main">
  35. <div class="row">
  36. <div class="col-lg-3 col-md-3" style="width: 28%;">
  37. <!--人员信息-->
  38. <div class="row block-padding">
  39. <div class="col-lg-12 col-md-12">
  40. <span class="block-title-important">仓库人员信息</span>
  41. &nbsp;&nbsp;
  42. <span class="block-title-important">{{userSum}}</span>
  43. </div>
  44. </div>
  45. <div class="row" style="height: 20%;min-height: 150px;height: 150px">
  46. <div class="person-div" v-for="user in userList" style="text-align: center;">
  47. <div style="width:110px;">
  48. <img height="140" width="110" v-bind:src="'/upPersonnel/warehouse/'+user.fileName" border="0" />
  49. </div>
  50. <div style="width: 110px; overflow:hidden; word-break:break-all;white-space:nowrap">
  51. {{user.fileRealName}}
  52. </div>
  53. <!-- <div>
  54. {{user.fileName}}&nbsp;&nbsp;{{user.fileName}}
  55. </div> -->
  56. </div>
  57. </div>
  58. <!--收料待检-->
  59. <div class="row block-padding">
  60. <div class="col-lg-12 col-md-12">
  61. <span class="block-title-important">收料待检</span>
  62. &nbsp;&nbsp;
  63. <span class="block-title-important">{{waitingcheckMaterialSum}}</span>
  64. </div>
  65. </div>
  66. <div class="row">
  67. <div style="width: 13%;" class="col-lg-2 col-md-2 center no-padding padding-line">供方名称</div>
  68. <div style="width: 12%;" class="col-lg-2 col-md-2 center no-padding padding-line">产品编码</div>
  69. <div class="col-lg-2 col-md-2 center no-padding padding-line">产品名称</div>
  70. <!-- <div class="col-lg-2 col-md-2 center no-padding padding-line">规格</div> -->
  71. <div style="width: 13%;" class="col-lg-2 col-md-2 center no-padding padding-line">到货数</div>
  72. <div style="width: 6%;" class="col-lg-2 col-md-2 center no-padding padding-line">报检数</div>
  73. <div style="width: 7%;" class="col-lg-2 col-md-2 center no-padding padding-line">入库数</div>
  74. <div style="width: 15%;" class="col-lg-2 col-md-2 center no-padding padding-line">订单日期</div>
  75. <div style="width: 15%;" class="col-lg-2 col-md-2 center no-padding padding-line">到货日期</div>
  76. </div>
  77. <div class="row" style="height: 30%;overflow:hidden;min-height:140px;height:140px">
  78. <div class="col-lg-12 col-md-12" >
  79. <div class="row" v-for="material in waitingcheckMaterialList">
  80. <div style="width: 13%;" class="col-lg-2 col-md-2 center no-padding">{{material.vendorName}}</div>
  81. <div style="width: 12%;" class="col-lg-2 col-md-2 center no-padding">{{material.materialCode}}</div>
  82. <div style="overflow:hidden; word-break:break-all;white-space:nowrap" class="col-lg-2 col-md-2 left">{{material.materialName}}</div>
  83. <!-- <div class="col-lg-2 col-md-2 center no-padding">{{material.specs}}</div> -->
  84. <div style="width: 13%;" class="col-lg-2 col-md-2 center no-padding">{{material.arriveSum}}</div>
  85. <div style="width: 6%;" class="col-lg-2 col-md-2 center no-padding">{{material.fInspectQuantity}}</div>
  86. <div style="width: 7%;" class="col-lg-2 col-md-2 center no-padding">{{material.freceivedqty}}</div>
  87. <div style="width: 15%;" class="col-lg-2 col-md-2 center no-padding">{{material.dPODate}}</div>
  88. <div style="width: 15%;" class="col-lg-2 col-md-2 center no-padding">{{material.arriveDate}}</div>
  89. </div>
  90. </div>
  91. </div>
  92. <div class="row">
  93. <div class="col-lg-12 col-md-12 progress no-padding">
  94. <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60"
  95. aria-valuemin="0" aria-valuemax="100" :style="{width:checkedMaterialSumPercent}">
  96. 已完成:{{checkedMaterialSum}}
  97. </div>
  98. <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"
  99. aria-valuemin="0" aria-valuemax="100" :style="{width:waitingcheckMaterialSumPercent}">
  100. 未完成:{{waitingcheckMaterialSum}}
  101. </div>
  102. </div>
  103. </div>
  104. <!--安全库存-->
  105. <div class="row block-padding">
  106. <div class="col-lg-12 col-md-12 block-title-important">安全库存</div>
  107. </div>
  108. <div class="row">
  109. <div style="width: 20%;" class="col-lg-2 col-md-2 center no-padding">产品编码</div>
  110. <div style="width: 45%;" class="col-lg-4 col-md-4 center no-padding">产品名称</div>
  111. <div style="width: 25%;" class="col-lg-2 col-md-2 center no-padding">现存量</div>
  112. <div style="width: 10%;" class="col-lg-2 col-md-2 center no-padding">安全库存</div>
  113. <!-- <div class="col-lg-2 col-md-2 center no-padding">总数量</div> -->
  114. </div>
  115. <div class="row">
  116. <div class="col-lg-12 col-md-12" style="height: 30%;min-height:140px;height:140px">
  117. <div class="row" v-for="material in materialStockList">
  118. <div style="width: 20%;" class="col-lg-2 col-md-2 center no-padding">{{material.materialCode}}</div>
  119. <div style="width: 45%;overflow:hidden; word-break:break-all;white-space:nowrap;padding-left: 40px;" class="col-lg-4 col-md-4 left no-padding">{{material.materialName}}</div>
  120. <div style="width: 25%;" class="col-lg-2 col-md-2 center no-padding"
  121. :class="getMaterialStockNotEnoughClass(material)">
  122. {{material.realStockSum}}</div>
  123. <div style="width: 10%;" class="col-lg-2 col-md-2 center no-padding">{{material.safeStockSum}}</div>
  124. <!-- <div class="col-lg-2 col-md-2 center no-padding">{{material.realStockSum+material.safeStockSum}}</div> -->
  125. </div>
  126. </div>
  127. </div>
  128. <!--待入库-->
  129. <!-- <div class="row block-padding">
  130. <div class="col-lg-12 ">
  131. <span class="block-title">待入库</span>
  132. &nbsp;&nbsp;
  133. <span class="block-title-important">{{waitinginMaterialSum}}</span>
  134. </div>
  135. </div>
  136. <div class="row">
  137. <div class="col-lg-2 col-md-2 center no-padding padding-line">供方名称</div>
  138. <div class="col-lg-2 col-md-2 center no-padding padding-line">物料编码</div>
  139. <div class="col-lg-3 col-md-3 center no-padding padding-line">名称</div>
  140. <div class="col-lg-1 col-md-1 center no-padding">到货数量</div>
  141. <div class="col-lg-2 col-md-2 center no-padding padding-line">到货日期</div>
  142. </div>
  143. <div class="row">
  144. <div class="col-lg-12 col-md-12" style="height: 160px;">
  145. <div class="row" v-for="material in waitinginMaterialList">
  146. <div class="col-lg-2 col-md-2 center no-padding">{{material.vendorName}}</div>
  147. <div class="col-lg-2 col-md-2 center no-padding">{{material.materialCode}}</div>
  148. <div class="col-lg-3 col-md-3 center no-padding">{{material.materialName}}</div>
  149. <div class="col-lg-1 col-md-1 center no-padding">{{material.arriveSum}}</div>
  150. <div class="col-lg-2 col-md-2 center no-padding">{{material.arriveDate}}</div>
  151. </div>
  152. </div>
  153. </div>
  154. <div class="row">
  155. <div class="col-lg-12 col-md-12 progress no-padding">
  156. <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60"
  157. aria-valuemin="0" aria-valuemax="100" :style="{width:inMaterialSumPercent}">
  158. 已完成:{{inMaterialSum}}
  159. </div>
  160. <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"
  161. aria-valuemin="0" aria-valuemax="100" :style="{width:waitinginMaterialSumPercent}">
  162. 未完成:{{waitinginMaterialSum}}
  163. </div>
  164. </div>
  165. </div> -->
  166. <!--发货通知-->
  167. <div class="row block-padding">
  168. <div class="col-lg-12 col-md-12" style="margin-top: 5px;">
  169. <span class="block-title-important">发货通知</span>
  170. &nbsp;&nbsp;
  171. <span class="block-title-important">{{waitingSendProductSum}}</span>
  172. </div>
  173. </div>
  174. <div class="row">
  175. <div style="width: 20%;" class="col-lg-2 col-md-2 center no-padding padding-line">项目编码</div>
  176. <div style="width: 25%;" class="col-lg-2 col-md-2 center no-padding padding-line">项目名称</div>
  177. <div style="width: 20%;" class="col-lg-2 col-md-2 center no-padding padding-line">仓库</div>
  178. <!-- <div style="width: 15%;" class="col-lg-2 col-md-2 center no-padding padding-line">物料编码</div>
  179. <div style="width: 28%;" class="col-lg-3 col-md-3 center no-padding padding-line">物料名称</div> -->
  180. <!-- <div class="col-lg-2 col-md-2 center no-padding padding-line">规格</div> -->
  181. <div style="width: 25%;" class="col-lg-1 col-md-1 center no-padding padding-line">发货数</div>
  182. <div style="width: 10%;" class="col-lg-2 col-md-2 center no-padding padding-line">发货日期</div>
  183. </div>
  184. <div class="row" style="min-height:140px;height:140px">
  185. <div class="col-lg-12 col-md-12">
  186. <div class="row" v-for="product in waitingSendProductList">
  187. <div style="width: 20%;" class="col-lg-2 col-md-2 center no-padding">{{product.cItemCode}}</div>
  188. <div style="width: 25%;overflow:hidden; word-break:break-all;white-space:nowrap;" class="col-lg-2 col-md-2 center no-padding">{{product.cItemName}}</div>
  189. <div style="width: 20%;" class="col-lg-2 col-md-2 center no-padding">{{product.warehouseName}}</div>
  190. <!-- <div style="width: 15%;" class="col-lg-2 col-md-2 center no-padding">{{product.materialCode}}</div>
  191. <div style="width: 28%;overflow:hidden; word-break:break-all;white-space:nowrap;" class="col-lg-3 col-md-3 left no-padding">{{product.materialName}}</div> -->
  192. <!-- <div class="col-lg-2 col-md-2 center no-padding">{{product.specs}}</div> -->
  193. <div style="width: 25%;" class="col-lg-1 col-md-1 center no-padding">{{product.sendSum}}</div>
  194. <div style="width: 10%;" class="col-lg-2 col-md-2 center no-padding">{{product.planSendDate}}</div>
  195. </div>
  196. </div>
  197. </div>
  198. <div class="row">
  199. <div class="col-lg-12 col-md-12 progress no-padding">
  200. <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60"
  201. aria-valuemin="0" aria-valuemax="100" :style="{width:sendProductSumPercent}">
  202. 已完成:{{sendProductSum}}
  203. </div>
  204. <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"
  205. aria-valuemin="0" aria-valuemax="100" :style="{width:waitingSendProductSumPercent}">
  206. 未完成:{{waitingSendProductSum}}
  207. </div>
  208. </div>
  209. </div>
  210. </div>
  211. <div class="col-lg-6" style="width: 40%;">
  212. <div class="row block-padding" style="height: 49%;width: 100%;margin-left: 2%;">
  213. <div class="row">
  214. <div class="row">
  215. <!-- <div class="col-lg-12 col-md-12 center block-title">月成品出货统计</div> -->
  216. <div class="col-lg-12 col-md-12 center block-title-important">项目月发货统计</div>
  217. </div>
  218. <div class="row">
  219. <div class="col-lg-12 col-md-12" style="height:420px" id="charts_11"></div>
  220. </div>
  221. </div>
  222. <!-- <div class="col-lg-6">
  223. <div class="row">
  224. <div class="col-lg-12 col-md-12 center block-title">项目月发货统计</div>
  225. </div>
  226. <div class="row">
  227. <div class="col-lg-12 col-md-12" style="height:440px" id="charts_12"></div>
  228. </div>
  229. </div> -->
  230. </div>
  231. <div class="row block-padding" style="height: 49%;width: 100%;;margin-left: 2%;">
  232. <!-- <div class="col-lg-6 col-md-6" style="padding-left:30px;">
  233. <div class="row ">
  234. <div class="col-lg-12 col-md-12 center block-title">安全库存</div>
  235. </div>
  236. <div class="row block-padding">
  237. <div class="col-lg-2 col-md-2 center no-padding">物料编码</div>
  238. <div class="col-lg-4 col-md-4 center no-padding">名称</div>
  239. <div class="col-lg-2 col-md-2 center no-padding">现存量</div>
  240. <div class="col-lg-2 col-md-2 center no-padding">安全库存</div>
  241. <div class="col-lg-2 col-md-2 center no-padding">总数量</div>
  242. </div>
  243. <div class="row">
  244. <div class="col-lg-12 col-md-12" style="height: 300px;">
  245. <div class="row" v-for="material in materialStockList">
  246. <div class="col-lg-2 col-md-2 center no-padding">{{material.materialCode}}</div>
  247. <div class="col-lg-4 col-md-4 center no-padding">{{material.materialName}}</div>
  248. <div class="col-lg-2 col-md-2 center no-padding"
  249. :class="getMaterialStockNotEnoughClass(material)">
  250. {{material.realStockSum}}</div>
  251. <div class="col-lg-2 col-md-2 center no-padding">{{material.safeStockSum}}</div>
  252. <div class="col-lg-2 col-md-2 center no-padding">{{material.realStockSum+material.safeStockSum}}</div>
  253. </div>
  254. </div>
  255. </div>
  256. </div> -->
  257. <div class="row" style="height: 49%;">
  258. <div class="row">
  259. <div class="col-lg-12 col-md-12 center block-title-important">成品库存</div>
  260. </div>
  261. <div class="row">
  262. <div class="col-lg-12 col-md-2" style="height:480px" id="charts_22"></div>
  263. </div>
  264. </div>
  265. </div>
  266. </div>
  267. <div class="col-lg-3" style="width: 32%;height: 100%;">
  268. <!--工单备料-->
  269. <div class="row block-padding">
  270. <div class="col-lg-12 col-md-12">
  271. <span class="block-title-important">工单备料</span>
  272. &nbsp;&nbsp;
  273. <span class="block-title-important">{{orderSheetMaterialNeedSum}}</span>
  274. &nbsp;&nbsp;
  275. <!-- <span class="block-title-important">{{orderSheetMaterialPercent}}%</span> -->
  276. </div>
  277. </div>
  278. <div class="row block-padding" >
  279. <div class="col-lg-2 col-md-2 center no-padding">工单号</div>
  280. <div class="col-lg-2 col-md-2 center no-padding">产品编码</div>
  281. <div class="col-lg-3 col-md-3 center no-padding">产品名称</div>
  282. <!-- <div class="col-lg-2 col-md-2 center no-padding">规格</div> -->
  283. <div class="col-lg-2 col-md-2 center no-padding">数量</div>
  284. <div class="col-lg-2 col-md-2 center no-padding">已备数</div>
  285. <div class="col-lg-1 col-md-1 center no-padding">缺料</div>
  286. </div>
  287. <div class="row" style="overflow:hidden;min-height:160px;height:160px">
  288. <div class="col-lg-12 col-md-12">
  289. <div class="row" v-for="material in orderSheetMaterialList">
  290. <div class="col-lg-2 col-md-2 center no-padding">{{material.orderSheetCode}}</div>
  291. <div class="col-lg-2 col-md-2 center no-padding">{{material.materialCode}}</div>
  292. <div style="overflow:hidden; word-break:break-all;white-space:nowrap" class="col-lg-3 col-md-3 left no-padding">{{material.materialName}}</div>
  293. <!-- <div class="col-lg-2 col-md-2 center no-padding">{{material.specs}}</div> -->
  294. <!-- <div class="col-lg-2 col-md-2 center no-padding"
  295. :class="getOrderSheetStockNotEnoughClass(material)"
  296. > -->
  297. <div class="col-lg-2 col-md-2 center no-padding"
  298. >
  299. {{material.needSum}}</div>
  300. <div class="col-lg-2 col-md-2 center no-padding">{{material.stockSum}}</div>
  301. <div class="col-lg-1 col-md-1 center no-padding error-font" :class="getshortageQuantity(material)">{{material.shortageQuantity}}</div>
  302. </div>
  303. </div>
  304. </div>
  305. <!--工单缺料-->
  306. <div class="row block-padding">
  307. <div class="col-lg-12 col-md-12">
  308. <span class="block-title-important">工单缺料明细</span>
  309. &nbsp;&nbsp;
  310. <span class="block-title-important">{{orderSheetMaterialNotEnoughSum}}</span>
  311. </div>
  312. </div>
  313. <div class="row block-padding">
  314. <div class="col-lg-2 col-md-2 center no-padding">工单号</div>
  315. <div class="col-lg-2 col-md-2 center no-padding">物料编码</div>
  316. <div class="col-lg-3 col-md-3 center no-padding">物料名称</div>
  317. <!-- <div class="col-lg-2 col-md-2 center no-padding">规格</div> -->
  318. <div class="col-lg-2 col-md-2 center no-padding">数量</div>
  319. <!-- <div class="col-lg-2 col-md-2 center no-padding">已备数</div> -->
  320. </div>
  321. <div class="row" style="height: 23%;overflow:hidden;min-height:160px;height:160px">
  322. <div class="col-lg-12 col-md-12">
  323. <div class="row" v-for="material in orderSheetMaterialNotEnoughList">
  324. <div class="col-lg-2 col-md-2 center no-padding">{{material.orderSheetCode}}</div>
  325. <div class="col-lg-2 col-md-2 center no-padding">{{material.materialCode}}</div>
  326. <div style="overflow:hidden; word-break:break-all;white-space:nowrap" class="col-lg-3 col-md-3 left no-padding">{{material.materialName}}</div>
  327. <!-- <div class="col-lg-2 col-md-2 center no-padding">{{material.specs}}</div> -->
  328. <div class="col-lg-2 col-md-2 center no-padding">{{material.needSum}}</div>
  329. <!-- <div class="col-lg-2 col-md-2 center no-padding">{{material.stockSum}}</div> -->
  330. </div>
  331. </div>
  332. </div>
  333. <!--工单齐套-->
  334. <div class="row block-padding">
  335. <div class="col-lg-12 ">
  336. <span class="block-title-important">工单齐套通知</span>
  337. &nbsp;&nbsp;
  338. <span class="block-title-important">{{orderSheetMaterialEnoughSum}}</span>
  339. </div>
  340. </div>
  341. <div class="row block-padding">
  342. <div class="col-lg-2 col-md-2 center no-padding">工单号</div>
  343. <div class="col-lg-2 col-md-2 center no-padding">产品编码</div>
  344. <div class="col-lg-3 col-md-3 center no-padding">产品名称</div>
  345. <!-- <div class="col-lg-2 col-md-2 center no-padding">规格</div> -->
  346. <div class="col-lg-2 col-md-2 center no-padding">数量</div>
  347. <div class="col-lg-2 col-md-2 center no-padding">已备数</div>
  348. </div>
  349. <div class="row">
  350. <div class="col-lg-12 col-md-12" style="height: 21%;overflow:hidden;min-height:160px;height:160px">
  351. <div class="row" v-for="material in orderSheetMaterialEnoughList">
  352. <div class="col-lg-2 col-md-2 center no-padding">{{material.orderSheetCode}}</div>
  353. <div class="col-lg-2 col-md-2 center no-padding">{{material.materialCode}}</div>
  354. <div style="overflow:hidden; word-break:break-all;white-space:nowrap" class="col-lg-3 col-md-3 left no-padding">{{material.materialName}}</div>
  355. <!-- <div class="col-lg-2 col-md-2 center no-padding">{{material.specs}}</div> -->
  356. <div class="col-lg-2 col-md-2 center no-padding">{{material.needSum}}</div>
  357. <div class="col-lg-2 col-md-2 center no-padding">{{material.stockSum}}</div>
  358. </div>
  359. </div>
  360. </div>
  361. <!--领料申请-->
  362. <div class="row block-padding">
  363. <div class="col-lg-12 col-md-12 ">
  364. <span class="block-title-important">领料申请通知</span>
  365. &nbsp;&nbsp;
  366. <span class="block-title-important">{{applyMaterialSum}}</span>
  367. </div>
  368. </div>
  369. <div class="row block-padding">
  370. <div class="col-lg-2 col-md-1 center no-padding">领料日期</div>
  371. <div class="col-lg-2 col-md-2 center no-padding">物料编码</div>
  372. <div class="col-lg-3 col-md-4 center no-padding">产品名称</div>
  373. <!-- <div class="col-lg-2 col-md-2 center no-padding">规格</div> -->
  374. <div class="col-lg-2 col-md-2 center no-padding">申请人</div>
  375. <div class="col-lg-2 col-md-2 center no-padding">部门</div>
  376. <div class="col-lg-1 col-md-1 center no-padding">数量</div>
  377. </div>
  378. <div class="row">
  379. <div class="col-lg-12 col-md-12" style="height: 23%;overflow:hidden;min-height:160px;height:160px">
  380. <div class="row" v-for="material in applyMaterialList">
  381. <div class="col-lg-2 col-md-1 center no-padding">{{material.ddate}}</div>
  382. <div class="col-lg-2 col-md-2 center no-padding">{{material.materialCode}}</div>
  383. <div style="overflow:hidden; word-break:break-all;white-space:nowrap" class="col-lg-3 col-md-4 left no-padding">{{material.materialName}}</div>
  384. <!-- <div class="col-lg-2 col-md-2 center no-padding">{{material.specs}}</div> -->
  385. <div class="col-lg-2 col-md-2 center no-padding">{{material.applyPerson}}</div>
  386. <div class="col-lg-2 col-md-2 center no-padding">{{material.cdepName}}</div>
  387. <div class="col-lg-1 col-md-1 center no-padding">{{material.applysum}}</div>
  388. </div>
  389. </div>
  390. </div>
  391. <div class="row">
  392. <div class="col-lg-12 col-md-12 progress no-padding">
  393. <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60"
  394. aria-valuemin="0" aria-valuemax="100" :style="{width:applyCompleteSumPercent}">
  395. 已完成:{{applyCompleteSum}}
  396. </div>
  397. <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"
  398. aria-valuemin="0" aria-valuemax="100" :style="{width:applyMaterialSumPercent}">
  399. 未完成:{{applyMaterialSum}}
  400. </div>
  401. </div>
  402. </div>
  403. </div>
  404. </div>
  405. </div>
  406. <!-- jQuery -->
  407. <script src="/lib/jquery.min.js"></script>
  408. <script src="/lib/vue.min.js"></script>
  409. <script src="/lib/echarts/echarts.min.js"></script>
  410. <script src="/lib/echarts/theme/macarons.js"></script>
  411. <script src="/js/service/person.js?_v=1"></script>
  412. <script src="/js/service/material.js?_v=1"></script>
  413. <script src="/js/service/product.js?_v=1"></script>
  414. <script src="/js/content/mycharts.js?_v=1"></script>
  415. <script type="text/javascript">
  416. // 参数说明:beginFun("图表ID","list形式数据","翻页时间(毫秒)","本页面唯一id(不可重复)")
  417. const monthSend = ServiceProduct.getMonthSend();
  418. const stockDate = ServiceProduct.getStockList();
  419. setTimeout(beginFun("charts_11",monthSend,10000,"charts_11",ChartsService.getGridSpanSmall()),500);
  420. setTimeout(beginFunA("charts_22",stockDate,10000,"charts_22",ChartsService.getGridSpanSmall()),500);
  421. // var interval = setInterval(getMonthSendData,10000);//项目月发货统计
  422. // var interval1 = setInterval(getMonthSendData1,10000);//成品库存
  423. var initSize = 5;
  424. var pageSize = 5;
  425. var pageIndex = 0;
  426. var pageSizeA = 5;
  427. var pageIndexA = 0;
  428. // const monthSend = ServiceProduct.getMonthSend();
  429. // let monthSendList = [];
  430. // for(let key in monthSend) {
  431. // monthSendList.push([key, monthSend[key]]);
  432. // }
  433. // var pageSize1 = 5;
  434. // var pageIndex1 = 0;
  435. // // const stockDate = ServiceProduct.getStockList();
  436. // let stockList = [];
  437. // for(let key in stockDate) {
  438. // stockList.push([key, stockDate[key]]);
  439. // }
  440. // function getMonthSendData(){
  441. // if(monthSendList.length <= initSize){
  442. // clearInterval(interval);
  443. // }
  444. // if(pageIndex >= monthSendList.length){
  445. // pageSize = 5;
  446. // pageIndex = 0;
  447. // }
  448. // let lsit = monthSendList.slice(pageIndex, pageSize);
  449. // pageIndex = pageSize;
  450. // pageSize = pageSize + initSize;
  451. // let map = {}
  452. // for(let key in lsit) {
  453. // map[lsit[key][0]] = lsit[key][1];
  454. // }
  455. // ChartsService.initCommonBar("charts_11",map);
  456. // }
  457. // function getMonthSendData1(){
  458. // if(stockList.length <= initSize){
  459. // clearInterval(interval1);
  460. // }
  461. // if(pageIndex1 >= stockList.length){
  462. // pageSize1 = 8;
  463. // pageIndex1 = 0;
  464. // }
  465. // let lsit1 = stockList.slice(pageIndex1, pageSize1);
  466. // pageIndex1 = pageSize1;
  467. // pageSize1 = pageSize1 + initSize;
  468. // let map = {}
  469. // for(let key in lsit1) {
  470. // map[lsit1[key][0]] = lsit1[key][1];
  471. // }
  472. // ChartsService.initCommonBar("charts_22",map);
  473. // }
  474. var vm = new Vue({
  475. el: '#div-main',
  476. data: {
  477. userList: [],
  478. userSum: 0,
  479. waitinginMaterialList: [],
  480. waitinginMaterialSum: 0,
  481. inMaterialSum: 0,
  482. waitinginMaterialSumPercent: '0%',
  483. inMaterialSumPercent: '0%',
  484. waitingcheckMaterialList: [],
  485. waitingcheckMaterialSum: 0,
  486. checkedMaterialSum: 0,
  487. checkedMaterialSumPercent: '0%',
  488. waitingcheckMaterialSumPercent: '0%',
  489. waitingSendProductList: [],
  490. waitingSendProductSum: 0,
  491. sendProductSum: 0,
  492. waitingSendProductSumPercent: '0%',
  493. sendProductSumPercent: '0%',
  494. materialStockList: [],
  495. orderSheetMaterialList: [],
  496. orderSheetMaterialNeedSum: 0,
  497. orderSheetMaterialPercent: 0,
  498. orderSheetMaterialEnoughList: [],
  499. orderSheetMaterialEnoughSum: 0,
  500. orderSheetMaterialNotEnoughSum: 0,
  501. orderSheetMaterialNotEnoughList: [],
  502. applyMaterialList: [],
  503. applyCompleteSum: 0,
  504. applyMaterialSum: 0,
  505. applyCompleteSumPercent: '0%',
  506. applyMaterialSumPercent: '0%',
  507. cacheDataObject: {}, // 从服务器加载的全数据,界面只取某几条
  508. timer_long: '', // 定时取服务器数据
  509. timer_short: '' // 数据超长定时轮播
  510. },
  511. methods: {
  512. // 安全库存不足时class
  513. getMaterialStockNotEnoughClass: function (material) {
  514. if (material.realStockSum * 1 < material.safeStockSum * 1) {
  515. return "error-font";
  516. }
  517. return "";
  518. },
  519. getOrderSheetStockNotEnoughClass: function (material) {
  520. if (material.needSum * 1 > material.stockSum * 1) {
  521. return "error-font";
  522. }
  523. return "";
  524. },
  525. //缺料
  526. getshortageQuantity:function(material){
  527. if(material.shortageQuantity*1>0){
  528. return "error-font";
  529. }
  530. return "";
  531. },
  532. // 从服务器加载数据并显示
  533. refreshData: function () {
  534. // 关闭定时器
  535. clearInterval(this.timer_short);
  536. // 刷新报表
  537. // ChartsService.initCommonBar("charts_11", ServiceProduct.getMonthSend());
  538. // ChartsService.initLineWithShade("charts_12", ServiceProduct.getMonthSendByProject());
  539. // ChartsService.initCommonBar("charts_22", ServiceProduct.getStockList());
  540. this.loadData();
  541. // 开启定时器
  542. this.timer_short = setInterval(this.scrollData, 5000);
  543. },
  544. // 轮播数据
  545. scrollData: function () {
  546. for (var key in this.cacheDataObject) {
  547. const dataList = this.cacheDataObject[key].data;
  548. const pagesize = this.cacheDataObject[key].pagesize;
  549. var pageindex = this.cacheDataObject[key].pageindex + 1;
  550. if (dataList.length > pagesize) {
  551. const pagesum = (dataList.length / pagesize).toFixed(0) * 1 + (dataList.length %
  552. pagesize > 0 ? 1 : 0);
  553. if (pageindex >= pagesum)
  554. pageindex = 0;
  555. this.cacheDataObject[key].pageindex = pageindex;
  556. const startIndex = pageindex * pagesize;
  557. const remainSum = dataList.length - startIndex;
  558. const recordSum = remainSum >= pagesize ? pagesize : remainSum;
  559. const keyPar = dataList.slice(startIndex, startIndex + pagesize);
  560. if(keyPar.length < 1){
  561. continue;
  562. }
  563. this[key] = dataList.slice(startIndex, startIndex + pagesize);
  564. }
  565. }
  566. },
  567. // 从服务器加载数据
  568. loadData: function () {
  569. this.cacheDataObject = {};
  570. // 人员信息
  571. const userList = ServicePerson.getWarehousePersonList();
  572. this.userSum = userList.length;
  573. this.cacheDataObject.userList = {
  574. data: userList,
  575. pagesize: 4,
  576. pageindex: 0
  577. }
  578. this.userList = userList.slice(0, this.cacheDataObject.userList.pagesize);
  579. // 待入库
  580. const waitinginMaterialList = ServiceMaterial.getWatingInList();
  581. $.each(waitinginMaterialList,function(index,item){
  582. if (item.specs!=undefined && item.specs!='undefined' && item.specs.length>6)
  583. item.specs = item.specs.substr(0,6);
  584. item.arriveDate = item.arriveDate.replace(/-/g,"");
  585. });
  586. this.waitinginMaterialSum = waitinginMaterialList.length;
  587. this.inMaterialSum = ServiceMaterial.getInSum();
  588. const waitinginMaterialSumPercent = (this.waitinginMaterialSum / (this
  589. .waitinginMaterialSum +
  590. this.inMaterialSum) * 100)
  591. .toFixed(0);
  592. this.inMaterialSumPercent = (100 - waitinginMaterialSumPercent) + '%';
  593. this.waitinginMaterialSumPercent = waitinginMaterialSumPercent + '%';
  594. this.cacheDataObject.waitinginMaterialList = {
  595. data: waitinginMaterialList,
  596. pagesize: 8,
  597. pageindex: 0
  598. }
  599. this.waitinginMaterialList = waitinginMaterialList.slice(0, this.cacheDataObject
  600. .waitinginMaterialList.pagesize);
  601. // 收料待检
  602. const waitingcheckMaterialList = ServiceMaterial.getWatingCheckList();
  603. $.each(waitingcheckMaterialList,function(index,item){
  604. // if (item.specs.length>6)
  605. // item.specs = item.specs.substr(0,6);
  606. // item.arriveDate = item.arriveDate.replace(/-/g,"");
  607. });
  608. this.waitingcheckMaterialSum = waitingcheckMaterialList.length;
  609. this.checkedMaterialSum = ServiceMaterial.getCheckSum();
  610. const checkedMaterialSumPercent = (this.checkedMaterialSum / (this.checkedMaterialSum +
  611. this.waitingcheckMaterialSum) * 100)
  612. .toFixed(2);
  613. this.waitingcheckMaterialSumPercent = (100 - checkedMaterialSumPercent) + '%';
  614. this.checkedMaterialSumPercent = checkedMaterialSumPercent + '%';
  615. this.cacheDataObject.waitingcheckMaterialList = {
  616. data: waitingcheckMaterialList,
  617. pagesize: 8,
  618. pageindex: 0
  619. }
  620. this.waitingcheckMaterialList = waitingcheckMaterialList.slice(0, this.cacheDataObject
  621. .waitingcheckMaterialList.pagesize);
  622. // 发货通知
  623. const waitingSendProductList = ServiceProduct.getWatingSendList();
  624. $.each(waitingSendProductList,function(index,item){
  625. if (item.specs != null && item.specs != undefined && item.specs.length>6)
  626. item.specs = item.specs.substr(0,6);
  627. item.planSendDate = item.planSendDate.replace(/-/g,"");
  628. });
  629. this.waitingSendProductSum = waitingSendProductList.length;
  630. this.sendProductSum = ServiceProduct.getSendSum();
  631. const waitingSendProductSumPercent = (this.waitingSendProductSum / (this
  632. .waitingSendProductSum +
  633. this.sendProductSum) * 100)
  634. .toFixed(0);
  635. this.sendProductSumPercent = (100 - waitingSendProductSumPercent) + '%';
  636. this.waitingSendProductSumPercent = waitingSendProductSumPercent + '%';
  637. this.cacheDataObject.waitingSendProductList = {
  638. data: waitingSendProductList,
  639. pagesize: 7,
  640. pageindex: 0
  641. }
  642. this.waitingSendProductList = waitingSendProductList.slice(0, this.cacheDataObject
  643. .waitingSendProductList.pagesize);
  644. // 库存
  645. const materialStockList = ServiceMaterial.getStockList();
  646. this.cacheDataObject.materialStockList = {
  647. data: materialStockList,
  648. pagesize: 8,
  649. pageindex: 0
  650. }
  651. this.materialStockList = materialStockList.slice(0, this.cacheDataObject
  652. .materialStockList.pagesize);
  653. /** 工单备料 **/
  654. const orderSheetMaterialList = ServiceMaterial.getListByOrderSheet();
  655. var orderSheetMaterialNeedSum = 0;
  656. var orderSheetMaterialStockSum = 0;
  657. this.orderSheetMaterialNeedSum = orderSheetMaterialList.length;
  658. orderSheetMaterialNeedSum = orderSheetMaterialList.length;
  659. $.each(orderSheetMaterialList, function (index, item) {
  660. if (item.needSum * 1 > item.stockSum * 1)
  661. orderSheetMaterialStockSum++;
  662. });
  663. this.orderSheetMaterialPercent = ((orderSheetMaterialNeedSum -
  664. orderSheetMaterialStockSum) /
  665. orderSheetMaterialNeedSum * 100).toFixed("0");
  666. this.cacheDataObject.orderSheetMaterialList = {
  667. data: orderSheetMaterialList,
  668. pagesize: 8,
  669. pageindex: 0
  670. }
  671. this.orderSheetMaterialList = orderSheetMaterialList.slice(0, this.cacheDataObject
  672. .orderSheetMaterialList.pagesize);
  673. /** 工单缺料 **/
  674. const orderSheetMaterialNotEnoughList = ServiceMaterial.getListByOrderSheetNotEnough();
  675. this.orderSheetMaterialNotEnoughSum = orderSheetMaterialNotEnoughList.length;
  676. this.cacheDataObject.orderSheetMaterialNotEnoughList = {
  677. data: orderSheetMaterialNotEnoughList,
  678. pagesize: 8,
  679. pageindex: 0
  680. }
  681. this.orderSheetMaterialNotEnoughList = orderSheetMaterialNotEnoughList.slice(0, this
  682. .cacheDataObject.orderSheetMaterialNotEnoughList.pagesize);
  683. /** 工单齐套 **/
  684. const orderSheetMaterialEnoughList = ServiceMaterial.getListByOrderSheetEnough();
  685. this.orderSheetMaterialEnoughSum = orderSheetMaterialEnoughList.length;
  686. this.cacheDataObject.orderSheetMaterialEnoughList = {
  687. data: orderSheetMaterialEnoughList,
  688. pagesize: 8,
  689. pageindex: 0
  690. }
  691. this.orderSheetMaterialEnoughList = orderSheetMaterialEnoughList.slice(0, this
  692. .cacheDataObject.orderSheetMaterialEnoughList.pagesize);
  693. /** 领料申请 **/
  694. const applyMaterialList = ServiceMaterial.getApplyList();
  695. this.applyCompleteSum = ServiceMaterial.getApplyCompleteSum();
  696. this.applyMaterialSum = applyMaterialList.length;
  697. const applyCompleteSumPercent = (this.applyCompleteSum / (this.applyCompleteSum +
  698. this.applyMaterialSum) * 100).toFixed(0);
  699. this.applyMaterialSumPercent = (100 - applyCompleteSumPercent) + '%';
  700. this.applyCompleteSumPercent = applyCompleteSumPercent + '%';
  701. this.cacheDataObject.applyMaterialList = {
  702. data: applyMaterialList,
  703. pagesize: 8,
  704. pageindex: 0
  705. }
  706. this.applyMaterialList = applyMaterialList.slice(0, this.cacheDataObject
  707. .applyMaterialList.pagesize);
  708. }
  709. },
  710. mounted() {
  711. this.timer_long = setInterval(this.refreshData, 60000);
  712. this.refreshData();
  713. },
  714. beforeDestroy() {
  715. clearInterval(this.timer_long);
  716. clearInterval(this.timer_short);
  717. }
  718. });
  719. </script>
  720. </body>
  721. </html>