增加车间看板

css/common.css

@@ -75,4 +75,31 @@ a:hover {
 }
 ::-webkit-scrollbar-track {
   background-color: #ddd;
-}
+}
+
+.loading {
+  position: fixed;
+  left: 0;
+  top: 0;
+  font-size: 18px;
+  z-index: 100000000;
+  width: 100%;
+  height: 100%;
+  background: #1a1a1c;
+  text-align: center;
+}
+.load_box {
+  position: absolute;
+  width: 190px;
+  height: 150px;
+  color: #aaa;
+  left: 50%;
+  top: 50%;
+  margin-top: -100px;
+  margin-left: -75px;
+}
+.load_box img {
+  margin: 10px auto;
+  display: block;
+  width: 40px;
+}

css/mould.css

@@ -14,17 +14,6 @@
   left: 0;
   right: 0;
 }
-.loading {
-  position: fixed;
-  left: 0;
-  top: 0;
-  font-size: 18px;
-  z-index: 100000000;
-  width: 100%;
-  height: 100%;
-  background: #1a1a1c;
-  text-align: center;
-}
 
 .head {
   height: 1.05rem;
@@ -66,7 +55,7 @@
   margin-bottom: 0.15rem;
 }
 .box {
-  height: 4.8rem;
+  height: 4.2rem;
   padding: 0 0.2rem 0.2rem 0.15rem;
   position: relative;
   margin-bottom: 0.15rem;
@@ -114,10 +103,10 @@
   font-weight: 600;
 }
 .malfunction {
-  margin-top: 0.3rem;
+  margin-top: 0.88rem;
 }
 .outIn {
-  margin-top: 0.06rem;
+  margin-top: 0.66rem;
   margin-left: 1.3rem;
 }
 .aging {
@@ -164,29 +153,3 @@
   top: 2.8rem;
   left: 3.98rem;
 }
-.loading {
-  position: fixed;
-  left: 0;
-  top: 0;
-  font-size: 18px;
-  z-index: 100000000;
-  width: 100%;
-  height: 100%;
-  background: #1a1a1c;
-  text-align: center;
-}
-.load_box {
-  position: absolute;
-  width: 190px;
-  height: 150px;
-  color: #aaa;
-  left: 50%;
-  top: 50%;
-  margin-top: -100px;
-  margin-left: -75px;
-}
-.load_box img {
-  margin: 10px auto;
-  display: block;
-  width: 40px;
-}

css/workShop.css

@@ -8,3 +8,11 @@ body {
 .container {
   padding: 0.1rem 0.1rem 0rem 0.1rem;
 }
+
+.info_box {
+  width: 4rem;
+  position: absolute;
+  text-align: center;
+  font-size: 0.4rem;
+  color: #ffffff;
+}

js/chart.js

@@ -94,7 +94,7 @@ const drawWorkShopChart = (myChart, datas) => {
             title: [{ text: '' }],
         });
         index++
-    }, 5000)
+    }, 6000 * 10 * 1)
 
     return workShopOption
 }
@@ -795,11 +795,12 @@ const drawCountChart = (dieCountChart, data) => {
                 radius: ["23%", "28%"],
                 avoidLabelOverlap: false,
                 hoverAnimation: true,
-                color: ["#50aee4", "#f90c29", "#2f67f6", "#0d2983"],
+                minAngle:26,
+                color: ["#50aee4", "#f90c29", "#2f67f6", "#0d2983",'#7979f7'],
                 label: {
                     normal: {
+                        show:true,
                         formatter: "{b} {c}",
-                        // distanceToLabelLine: 2,
                         fontSize: 16,
                         fontWeight: 600,
                         color: "#ffffff",

js/common.js

@@ -4,7 +4,7 @@ const getRootPath = () => {
     const localhostPath = protocol + '//' + host;
 
     return 'http://192.168.1.106:8083';
-    // return localhostPath;
+    // return localhostPath;s
 
 }
 // 获取API的地址

js/util.js

@@ -17,4 +17,14 @@ const getElement = (id) => {
     document.getElementById(id)
   );
   return element
+}
+
+// 获取url参数
+const getQueryString = (name) => {
+  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
+  var r = window.location.search.substr(1).match(reg);
+  if (r != null) {
+      return unescape(r[2]);
+  }
+  return null;
 }

templates/mouldBoard.html

@@ -72,7 +72,7 @@
           <div class="box">
             <div
               class="chart"
-              style="height: 6rem; margin-top: -0.4rem; left: 0.1rem"
+              style="height: 5.4rem; margin-top: 0.5rem; left: 0.1rem"
               id="dieCountChart"
             ></div>
           </div>
@@ -90,10 +90,14 @@
             <div class="title malfunction center">模检具故障趋势图</div>
             <div
               class="chart center"
-              style="height: 1rem; margin-top: 0.7rem; left: 0.6rem"
+              style="height: 1rem; margin-top: 1.24rem; left: 0.6rem"
               id="malfunctionNumber"
             ></div>
-            <div class="chart center" id="malfunctionChart"></div>
+            <div
+              class="chart center"
+              style="margin-top: 2rem; height: 3.4rem"
+              id="malfunctionChart"
+            ></div>
           </div>
         </li>
         <li>
@@ -109,7 +113,7 @@
             <div class="title outIn center">近七天模检具出入库情况</div>
             <div
               class="chart center"
-              style="height: 4rem; margin-top: 0.4rem; left: -1rem"
+              style="height: 4rem; margin-top: 1rem; left: -1rem"
               id="outInChart"
             ></div>
           </div>
@@ -382,6 +386,7 @@
         beforeUnmount() {
           const _self = this;
           window.clearInterval(window.timeTicket);
+          window.timeTicket = null;
           _self.disposeChart(_self.outInChart);
           _self.disposeChart(_self.workShopChart);
           _self.disposeChart(_self.maintainChart);

templates/workShopBoard.html

@@ -47,10 +47,16 @@
       </div>
     </div>
     <div id="app" class="container">
+      <div class="info_box" style="top: 4.84rem; left: 1.4rem; color: #ffffff">
+        {{ warehouseNo }}
+      </div>
+      <div class="info_box" style="top: 6rem; left: 1.4rem; color: #85e0ff">
+        {{ warehouseName }}
+      </div>
       <dv-scroll-board
         ref="scrollBoard"
         :config="config"
-        style="width: 12.4rem; height: 8.1rem; left: 6.6rem; top: 1.8rem"
+        style="width: 12.4rem; height: 8rem; left: 6.6rem; top: 1.8rem"
       />
     </div>
     <script>
@@ -59,8 +65,10 @@
         data() {
           return {
             start: 0,
-            length: 10,
-            warehouseId: 460335910903873,
+            length: 500,
+            warehouseNo: "",
+            warehouseId: null,
+            warehouseName: "",
             header: [
               '<span style="color:#85E0FF;font-size:0.24rem">模检具名称</span>',
               '<span style="color:#85E0FF;font-size:0.24rem">模检具状态</span>',
@@ -70,57 +78,85 @@
               '<span style="color:#85E0FF;font-size:0.24rem">是否需要保养</span>',
             ],
             config: {},
-            addList: [],
           };
         },
 
-        methods: {},
+        methods: {
+          // 获取车间信息
+          getWarehouseInfo() {
+            const _self = this;
+            const url = "/api/WarehouseResource/queryByWarehouseId";
+            const params = [["warehouseId", _self.warehouseId]];
+            ajaxGet(url, params).then((success) => {
+              if (success.errorCode === 0) {
+                _self.warehouseNo = success.data.no;
+                _self.warehouseName = success.data.name;
+              }
+            });
+          },
+          // 获取表格数据
+          getTableDatas() {
+            const _self = this;
+            const url =
+              "/api/BulletinBoardResource/queryBoardInventoryByWarehouse";
+            const params = [
+              ["start", _self.start],
+              ["length", _self.length],
+              ["warehouseId", _self.warehouseId],
+            ];
+            ajaxGet(url, params).then((success) => {
+              if (success.errorCode === 0) {
+                if (success.datas && success.datas.length > 0) {
+                  const configData = success.datas.map((item) => [
+                    item.name,
+                    item.inventoryStatus,
+                    item.no,
+                    item.useDate,
+                    item.useCount,
+                    item.needMaintain == true ? "是" : "否",
+                  ]);
+                  // 配置轮播表属性
+                  _self.config = {
+                    header: _self.header,
+                    headerHeight: 60,
+                    rowNum: 10,
+                    waitTime: 8000,
+                    carousel: "page",
+                    hoverPause: false,
+                    data: configData,
+                    headerBGC: "#112f6e",
+                    oddRowBGC: "#06105a",
+                    evenRowBGC: "#19225e",
+                    align: [
+                      "center",
+                      "center",
+                      "center",
+                      "center",
+                      "center",
+                      "center",
+                    ],
+                    columnWidth: [260, 160, 350, 200, 180, 200],
+                  };
+                }
+              }
+            });
+          },
+        },
 
         mounted() {
           const _self = this;
-          const url =
-            "/api/BulletinBoardResource/queryBoardInventoryByWarehouse";
-          const params = [
-            ["warehouseId", _self.warehouseId],
-            ["start", _self.start],
-            ["length", _self.length],
-          ];
-          ajaxGet(url, params).then((success) => {
-            if (success.errorCode === 0) {
-              if (success.datas && success.datas.length > 0) {
-                const configData = success.datas.map((item) => [
-                  item.name,
-                  item.inventoryStatus,
-                  item.no,
-                  item.useDate,
-                  item.useCount,
-                  item.needMaintain == true ? "是" : "否",
-                ]);
-                _self.config = {
-                  header: _self.header,
-                  headerHeight: 60,
-                  rowNum: 10,
-                  hoverPause: false,
-                  data: configData,
-                  headerBGC: "#112f6e",
-                  oddRowBGC: "#06105a",
-                  evenRowBGC: "#19225e",
-                  align: [
-                    "center",
-                    "center",
-                    "center",
-                    "center",
-                    "center",
-                    "center",
-                  ],
-                  columnWidth: [220, 200, 220, 200, 200, 200],
-                };
-              }
-            }
-          });
+          this.warehouseId = getQueryString("warehouseId");
+          _self.getTableDatas();
+          _self.getWarehouseInfo();
+          _self.timer = setInterval(() => {
+            _self.getTableDatas();
+            _self.getWarehouseInfo();
+          }, 6000 * 10 * 6);
         },
         beforeUnmount() {
           const _self = this;
+          clearInterval(_self.timer);
+          _self.timer = null;
         },
       });
     </script>