From 1751adf783d2c7203b86c0f02f5f737277ca9192 Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期四, 09 五月 2024 14:34:50 +0800
Subject: [PATCH] 1.仓库看板递交

---
 src/views/kanbanManager/ckgl.vue |  659 ++++++++++++++++++-----------------------------------------
 1 files changed, 205 insertions(+), 454 deletions(-)

diff --git a/src/views/kanbanManager/ckgl.vue b/src/views/kanbanManager/ckgl.vue
index 1b94f5f..59a2f13 100644
--- a/src/views/kanbanManager/ckgl.vue
+++ b/src/views/kanbanManager/ckgl.vue
@@ -2,323 +2,78 @@
   <div>
     <div class="kb_dashboard">
 
-      <!--    鏄熺┖鑳屾櫙-->
-      <div ref="starsRef" class="stars">
-        <div v-for="(item, index) in starsCount" :key="index" class="star" />
-      </div>
-
+      <div class="kb_backgroundCustom" />
       <div class="kb_header">
-        <div class="flex_c_c kb_header_text">
-          <div id="topBarLeft" style="width:600px;height:100%" />
-          浠撳簱绠$悊鏁板瓧鍖栫湅鏉�
-          <div id="topBarRight" style="width:600px;height:100%;transform:rotate(180deg);" />
+        <div class="kb_headTime" style="top: 35px;left:  20px">
+          <span>姘稿悍甯傚湥娌e浠跺姞宸ュ巶</span>
         </div>
 
-        <div class="kb_headTime" style="left: 85px">
-          <span>娴欐睙鏂板嚡杩暟瀛楃鎶�鑲′唤鏈夐檺鍏徃</span>
+        <div class="kb_headTime kb_header_text" style="top: 35px;left:  800px">
+          <span>浠撳簱绠$悊鏁板瓧鍖栫湅鏉�</span>
         </div>
-
-        <div class="kb_headTime">
+        <div class="kb_headTime" style="top: 35px;right:  25px">
           <span>{{ headTime }}</span>
         </div>
       </div>
-      <div style="display: flex;justify-content: space-between;padding:0 20px 20px 20px;height: 980px">
-        <div style="width: 1350px; " class="flex_c_b">
+
+      <div style="display: flex;justify-content: space-between;padding:0 20px 20px 20px;height: 950px">
+        <div style="width: 1350px;z-index: 2;margin-top: 50px;" class="flex_c_b">
           <div style="height: 470px;">
             <div class="smallTitle">
               <svg-icon icon-class="cpdrk" class="svg_class" />
-              鐢熶骇寰呭叆搴�
+              閲囪喘寰呭叆搴�
             </div>
-            <div class="lineContent horn" style="height: 435px">
-              <el-table
-                ref="tableDataTopRef"
-                :data="tableDataTop"
-                style="width: 100%;"
-                class="tableData"
-                :header-cell-style="headerCellStyleCenter"
-                :cell-style="cellStyleCenter"
-                height="430"
-              >
-                <el-table-column
-                  prop="voucherdate"
-                  label="鍗曟嵁鏃ユ湡"
-                  width="131"
-                >
-                  <template slot-scope="{row}">
-                    <div v-if="row.voucherdate" class="ellipsis">{{ row.voucherdate.substring(0, 10) }}</div>
-                    <div v-else />
-                  </template>
-                </el-table-column>
-                <el-table-column
-                  prop="wo"
-                  label="鍗曟嵁缂栧彿"
-                  width="189"
-                >
-                  <template slot-scope="{row}">
-                    <div class="ellipsis">{{ row.wo }}</div>
-                  </template>
-                </el-table-column>
-                <el-table-column
-                  prop="wkshp_name"
-                  label="鐢熶骇杞﹂棿"
-                  width="105"
-                >
-                  <template slot-scope="{row}">
-                    <div class="ellipsis">{{ row.wkshp_name }}</div>
-                  </template>
-                </el-table-column>
-                <el-table-column
-                  prop="saleOrderCode"
-                  label="閿�鍞鍗曞彿"
-                  width="200"
-                >
-                  <template slot-scope="{row}">
-                    <div v-if="row.saleOrderCode" class="ellipsis">{{ row.saleOrderCode }}</div>
-                    <div v-else>/</div>
-                  </template>
-                </el-table-column>
-                <el-table-column
-                  prop="materiel_code"
-                  label="浜у搧缂栧彿"
-                  width="136"
-                >
-                  <template slot-scope="{row}">
-                    <div class="ellipsis">{{ row.materiel_code }}</div>
-                  </template>
-                </el-table-column>
-                <el-table-column
-                  prop="materiel_name"
-                  label="浜у搧鍚嶇О"
-                  width="180"
-                >
-                  <template slot-scope="{row}">
-                    <div class="ellipsis">{{ row.materiel_name }}</div>
-                  </template>
-                </el-table-column>
-                <!--                  <el-table-column-->
-                <!--                    prop="specification"-->
-                <!--                    label="瑙勬牸鍨嬪彿"-->
-                <!--                    width="128"-->
-                <!--                  >-->
-                <!--                    <template slot-scope="{row}">-->
-                <!--                      <div v-if="row.specification" class="ellipsis">{{ row.specification }}</div>-->
-                <!--                      <div v-else>/</div>-->
-                <!--                    </template>-->
-                <!--                  </el-table-column>-->
-                <el-table-column
-                  prop="stck_name"
-                  label="棰勫叆浠撳簱"
-                  width="100"
-                >
-                  <template slot-scope="{row}">
-                    <div v-if="row.stck_name" class="ellipsis">{{ row.stck_name }}</div>
-                    <div v-else>/</div>
-                  </template>
-                </el-table-column>
-                <el-table-column
-                  prop="quantity"
-                  label="鏁伴噺"
-                  width="63"
+
+            <div style="height:410px;">
+              <dv-border-box-12>
+                <dv-scroll-board
+                  ref="scrollBoardTop"
+                  :config="configTableTop"
+                  style="width: 1326px;height: 390px;margin:0 auto;padding-top: 13px;"
                 />
-                <el-table-column
-                  prop="totalStockInQuantity"
-                  label="宸插叆搴撴暟閲�"
-                  width="100"
-                >
-                  <template slot-scope="{row}">
-                    <div v-if="row.totalStockInQuantity">{{ row.totalStockInQuantity }}</div>
-                    <div v-else>0</div>
-                  </template>
-                </el-table-column>
-                <!--                  <el-table-column-->
-                <!--                    prop="uomname"-->
-                <!--                    label="鍗曚綅"-->
-                <!--                    width="50"-->
-                <!--                  />-->
-                <!--                  <el-table-column-->
-                <!--                    prop="preStartDate"-->
-                <!--                    label="棰勮寮�宸�"-->
-                <!--                    width="100"-->
-                <!--                  >-->
-                <!--                    <template slot-scope="{row}">-->
-                <!--                      <div v-if="row.preStartDate">{{ row.preStartDate.substring(0, 10) }}</div>-->
-                <!--                      <div v-else />-->
-                <!--                    </template>-->
-                <!--                  </el-table-column>-->
-                <el-table-column
-                  prop="preFinishDate"
-                  label="棰勮鍏ュ簱"
-                  width="140"
-                >
-                  <template slot-scope="{row}">
-                    <div v-if="row.preFinishDate">{{ row.preFinishDate.substring(0, 10) }}</div>
-                    <div v-else />
-                  </template>
-                </el-table-column>
-              </el-table>
+              </dv-border-box-12>
             </div>
           </div>
-          <div style="height: 470px;">
+          <div style="height: 470px;margin-top: 30px;">
             <div class="smallTitle">
               <svg-icon icon-class="cpdfh" class="svg_class" />
-              浜у搧寰呭彂璐�
+              閿�鍞緟鍙戣揣
             </div>
-            <div class="lineContent horn" style="height: 435px">
-              <el-table
-                ref="tableDataBottomRef"
-                :data="tableDataBottom"
-                style="width: 100%;"
-                class="tableData"
-                :header-cell-style="headerCellStyleCenter"
-                :cell-style="cellStyleCenter"
-                height="430"
-              >
-                <el-table-column
-                  prop="voucherdate"
-                  label="鍗曟嵁鏃ユ湡"
-                  width="131"
-                >
-                  <template slot-scope="{row}">
-                    <div v-if="row.voucherdate" class="ellipsis">{{ row.voucherdate.substring(0, 10) }}</div>
-                    <div v-else>/</div>
-                  </template>
-                </el-table-column>
-                <el-table-column
-                  prop="wo"
-                  label="鍗曟嵁缂栧彿"
-                  width="205"
-                >
-                  <template slot-scope="{row}">
-                    <div class="ellipsis">{{ row.wo }}</div>
-                  </template>
-                </el-table-column>
-                <el-table-column
-                  prop="customename"
-                  label="瀹㈡埛"
-                  width="388"
-                >
-                  <template slot-scope="{row}">
-                    <div v-if="row.customename" class="ellipsis">{{ row.customename }}</div>
-                    <div v-else>/</div>
-                  </template>
-                </el-table-column>
-                <!--                  <el-table-column-->
-                <!--                    prop="username"-->
-                <!--                    label="涓氬姟鍛�"-->
-                <!--                    width="65"-->
-                <!--                  >-->
-                <!--                    <template slot-scope="{row}">-->
-                <!--                      <div v-if="row.username" class="ellipsis">{{ row.username }}</div>-->
-                <!--                      <div v-else>/</div>-->
-                <!--                    </template>-->
-                <!--                  </el-table-column>-->
-                <!--                <el-table-column-->
-                <!--                  prop="SourceVoucherCode"-->
-                <!--                  label="鏉ユ簮鍗曞彿"-->
-                <!--                  width="185"-->
-                <!--                >-->
-                <!--                  <template slot-scope="{row}">-->
-                <!--                    <div v-if="row.SourceVoucherCode" class="ellipsis">{{ row.SourceVoucherCode }}</div>-->
-                <!--                    <div v-else>/</div>-->
-                <!--                  </template>-->
-                <!--                </el-table-column>-->
-                <!--                  <el-table-column-->
-                <!--                    prop="materiel_code"-->
-                <!--                    label="浜у搧缂栧彿"-->
-                <!--                    width="96"-->
-                <!--                  />-->
-                <el-table-column
-                  prop="materiel_name"
-                  label="浜у搧鍚嶇О"
-                  width="200"
-                >
-                  <template slot-scope="{row}">
-                    <div v-if="row.materiel_name" class="ellipsis">{{ row.materiel_name }}</div>
-                  </template>
-                </el-table-column>
-                <!--                  <el-table-column-->
-                <!--                    prop="specification"-->
-                <!--                    label="瑙勬牸鍨嬪彿"-->
-                <!--                    width="100"-->
-                <!--                  >-->
-                <!--                    <template slot-scope="{row}">-->
-                <!--                      <div v-if="row.specification" class="ellipsis">{{ row.specification }}</div>-->
-                <!--                      <div v-else>/</div>-->
-                <!--                    </template>-->
-                <!--                  </el-table-column>-->
-                <el-table-column
-                  prop="quantity"
-                  label="鏁伴噺"
-                  width="100"
-                >
-                  <template slot-scope="{row}">
-                    <div class="ellipsis">{{ row.quantity }}</div>
-                  </template>
-                </el-table-column>
-                <el-table-column
-                  prop="saleOutQuantity"
-                  label="宸插彂璐ф暟閲�"
-                  width="120"
-                >
-                  <template slot-scope="{row}">
-                    <div v-if="row.saleOutQuantity" class="ellipsis">{{ row.saleOutQuantity }}</div>
-                    <div v-else>0</div>
-                  </template>
-                </el-table-column>
-                <!--                <el-table-column-->
-                <!--                  prop="priuserdefnvc1"-->
-                <!--                  label="妫�楠屾柟寮�"-->
-                <!--                  width="110"-->
-                <!--                >-->
-                <!--                  <template slot-scope="{row}">-->
-                <!--                    <div v-if="row.priuserdefnvc1">{{ row.priuserdefnvc1 }}</div>-->
-                <!--                    <div v-else>/</div>-->
-                <!--                  </template>-->
-                <!--                </el-table-column>-->
-                <!--                <el-table-column-->
-                <!--                  prop="priuserdefnvc2"-->
-                <!--                  label="妫�楠屼汉鍛�"-->
-                <!--                  width="110"-->
-                <!--                >-->
-                <!--                  <template slot-scope="{row}">-->
-                <!--                    <div v-if="row.priuserdefnvc2">{{ row.priuserdefnvc2 }}</div>-->
-                <!--                    <div v-else>/</div>-->
-                <!--                  </template>-->
-                <!--                </el-table-column>-->
-                <el-table-column
-                  prop="deliveryDate"
-                  label="棰勮浜よ揣鏃ユ湡"
-                  width="200"
-                >
-                  <template slot-scope="{row}">
-                    <div v-if="row.deliveryDate">{{ row.deliveryDate.substring(0,10) }}</div>
-                    <div v-else>/</div>
-                  </template>
-                </el-table-column>
-              </el-table>
+            <div style="height:410px;">
+              <dv-border-box-12>
+                <dv-scroll-board
+                  ref="scrollBoardBottom"
+                  :config="configTableBottom"
+                  style="width: 1326px;height: 390px;margin:0 auto;padding-top: 13px;"
+                />
+              </dv-border-box-12>
             </div>
           </div>
 
         </div>
-        <div style="width: 500px;" class="flex_c_b">
+        <div style="width: 500px;z-index: 2;margin-top: 50px;" class="flex_c_b">
           <div style="height: 470px;">
             <div class="smallTitle">
               <svg-icon icon-class="ph" class="svg_class" />
-              鍗婃垚鍝併�佷骇鍝佸簱瀛橀噺鎺掕Top5
+              杩戜竴鍛ㄩ噰璐緟鍏ュ簱鐗╂枡鎺掕Top5
             </div>
-            <div class="lineContent horn" style="height: 435px">
-              <div id="bar03" style="width: 100%;height:100%; " />
-              <!--/*              <div id="bar03" style="width: 100%;height:100%;margin-left: -25px;margin-top: -10px" />*/-->
+
+            <div style="height:410px;">
+              <dv-border-box-12>
+                <div id="bar03" style="width: 100%;height:100%; " />
+              </dv-border-box-12>
             </div>
+
           </div>
-          <div style="height: 470px;">
+          <div style="height: 470px;margin-top: 30px;">
             <div class="smallTitle">
               <svg-icon icon-class="ph" class="svg_class" />
-              鍘熸潗鏂欏簱瀛橀噺鎺掕Top5
+              杩戜竴鍛ㄩ攢鍞緟鍙戣揣浜у搧鎺掕Top5
             </div>
-            <div class="lineContent horn" style="height: 435px">
-              <div id="bar04" style="width: 100%;height:100%;" />
-              <!--              <div id="bar04" style="width: 100%;height:100%;margin-left: -25px;margin-top: -10px" />-->
+            <div style="height:410px;">
+              <dv-border-box-12>
+                <div id="bar04" style="width: 100%;height:100%;" />
+              </dv-border-box-12>
             </div>
           </div>
         </div>
@@ -332,10 +87,10 @@
 import './kbCommon.css'
 import { bar02, kbTop, loadEcharts } from '@/utils/myEcharts'
 import {
-  WareHouseRightBottomData,
-  WareHouseRightTopData,
-  WareHouseTopBottomData,
-  WareHouseTopLeftData
+  ProcureOutsourcLeftTop,
+  ProductConsignmentLeftBottom,
+  ProcureOutsourcRightTop,
+  ProductionStockedInRightBottom
 } from '@/api/kanbanManager'
 
 export default {
@@ -346,19 +101,94 @@
       onLine: navigator.onLine, // 鐩戝惉缃戠粶鏄惁鍦ㄧ嚎
 
       headTime: '',
-      tableDataTop: [],
-      tableDataBottom: [],
-
-      MarqueeTipsContent: '', // 鍏憡
-      speed: 100, // 鍏憡鎾斁鐨勯�熷害
 
       tableTopTask: null,
       tableBottomTask: null,
       echartsRightTop: null,
       echartsRightBottom: null,
 
-      starsCount: 800, // 鏄熸槦鏁伴噺
-      distance: 900 // 闂磋窛
+      configTableTop: {
+        headerBGC: 'rgba(38, 68 ,139, 0.2)', // 琛ㄥご鑳屾櫙鑹�
+        oddRowBGC: 'transparent', // 濂囨暟琛岃儗鏅壊
+        evenRowBGC: 'transparent', // 鍋舵暟琛岃儗鏅壊
+        headerHeight: 45,
+        waitTime: 3000,
+        rowNum: 8,
+
+        header: [
+          '<span style="color:#09d8f2;">鍗曟嵁鏃ユ湡</span>',
+          '<span style="color:#09d8f2;">鍗曟嵁缂栧彿</span>',
+          '<span style="color:#09d8f2;">閿�鍞鍗曞彿</span>',
+          '<span style="color:#09d8f2;">浜у搧鍚嶇О</span>',
+          '<span style="color:#09d8f2;">瑙勬牸鍨嬪彿</span>',
+          '<span style="color:#09d8f2;">鏁伴噺</span>',
+          '<span style="color:#09d8f2;">宸插叆搴撴暟閲�</span>',
+          '<span style="color:#09d8f2;">鏈叆搴撴暟閲�</span>'
+        ],
+        data: [
+          // ['<span style="color:#37a2da;">琛�1鍒�1</span>', '琛�1鍒�2', '琛�1鍒�3'],
+          // [1, 2, 3, 4, 5, 6, 8, 9],
+          // [1, 2, 3, 4, 5, 6, 8, 9],
+          // [1, 2, 3, 4, 5, 6, 8, 9],
+          // [1, 2, 3, 4, 5, 6, 8, 9],
+          // [1, 2, 3, 4, 5, 6, 8, 9],
+          // [1, 2, 3, 4, 5, 6, 8, 9],
+          // [1, 2, 3, 4, 5, 6, 8, 9],
+          // [1, 2, 3, 4, 5, 6, 8, 9],
+          // [1, 2, 3, 4, 5, 6, 8, 9],
+          // [1, 2, 3, 4, 5, 6, 8, 9],
+          // [1, 2, 3, 4, 5, 6, 8, 9],
+          // [1, 2, 3, 4, 5, 6, 8, 9]
+
+        ],
+        index: true,
+        columnWidth: [50, 150, 150, 150, 150, 150, 150, 150, 150],
+        align: ['center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center']
+        // carousel: 'page'
+      },
+
+      configTableBottom: {
+        headerBGC: 'rgba(38, 68 ,139, 0.2)', // 琛ㄥご鑳屾櫙鑹�
+        oddRowBGC: 'transparent', // 濂囨暟琛岃儗鏅壊
+        evenRowBGC: 'transparent', // 鍋舵暟琛岃儗鏅壊
+        headerHeight: 45,
+        waitTime: 3000,
+        rowNum: 8,
+
+        header: [
+          '<span style="color:#09d8f2;">鍗曟嵁鏃ユ湡</span>',
+          '<span style="color:#09d8f2;">鍗曟嵁缂栧彿</span>',
+          '<span style="color:#09d8f2;">浜у搧鍚嶇О</span>',
+          '<span style="color:#09d8f2;">瑙勬牸鍨嬪彿</span>',
+          '<span style="color:#09d8f2;">鏁伴噺</span>',
+          '<span style="color:#09d8f2;">宸插彂璐ф暟閲�</span>',
+          '<span style="color:#09d8f2;">鏈彂璐ф暟閲�</span>',
+
+          '<span style="color:#09d8f2;">棰勮浜や粯鏃ユ湡</span>',
+          '<span style="color:#09d8f2;">寤舵湡澶╂暟</span>'
+        ],
+        data: [
+          // ['<span style="color:#37a2da;">琛�1鍒�1</span>', '琛�1鍒�2', '琛�1鍒�3'],
+
+          // [1, 2, 3, 4, 5, 6, 8, 9],
+          // [1, 2, 3, 4, 5, 6, 8, 9],
+          // [1, 2, 3, 4, 5, 6, 8, 9],
+          // [1, 2, 3, 4, 5, 6, 8, 9],
+          // [1, 2, 3, 4, 5, 6, 8, 9],
+          // [1, 2, 3, 4, 5, 6, 8, 9],
+          // [1, 2, 3, 4, 5, 6, 8, 9],
+          // [1, 2, 3, 4, 5, 6, 8, 9],
+          // [1, 2, 3, 4, 5, 6, 8, 9],
+          // [1, 2, 3, 4, 5, 6, 8, 9],
+          // [1, 2, 3, 4, 5, 6, 8, 9],
+          // [1, 2, 3, 4, 5, 6, 7, 8]
+
+        ],
+        index: true,
+        columnWidth: [50, 150, 150, 150, 150, 100, 150, 150, 150, 150],
+        align: ['center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center']
+        // carousel: 'page'
+      }
 
     }
   },
@@ -369,7 +199,7 @@
     // 涓ゅ皬鏃剁湅鏉垮埛鏂颁竴娆�
     setInterval(() => {
       window.location.reload()
-    }, 1000 * 60 * 60 * 10)
+    }, 1000 * 60 * 120)
   },
   mounted() {
     // 鐩戝惉缃戠粶鏄惁鍦ㄧ嚎
@@ -377,12 +207,17 @@
     window.addEventListener('offline', this.updateOnlineStatus)
     this.updateOnlineStatus({ type: this.onLine ? 'online' : 'offline', isFirst: true })
 
-    this.getTopBar()
+    this.getProcureOutsourcLeftTop()
+    setInterval(() => {
+      this.getProcureOutsourcLeftTop()
+    }, 10 * 1000)
 
-    this.getWareHouseTopLeftData()
-    this.getWareHouseTopBottomData()
+    this.getProductConsignmentLeftBottom()
+    setInterval(() => {
+      this.getProcureOutsourcLeftTop()
+    }, 15 * 1000)
+
     this.getEcharts()
-    this.setStarsRef()
   },
   beforeDestroy() {
     window.removeEventListener('online', this.updateOnlineStatus)
@@ -411,101 +246,70 @@
         }
       }
     },
-    setStarsRef() {
-      const starNodes = Array.from(this.$refs.starsRef.children)
-      starNodes.forEach(item => {
-        const speed = 0.2 + Math.random() * 1
-        const thisDistance = this.distance + Math.random() * 300
-        item.style.transformOrigin = `0 0 ${thisDistance}px`
-        item.style.transform = `
-        translate3d(0,0,-${thisDistance}px)
-        rotateY(${Math.random() * 360}deg)
-        rotateX(${Math.random() * -50}deg)
-        scale(${speed},${speed})`
-      })
-    },
-    // 鑾峰彇topEcharts
-    getTopBar() {
-      loadEcharts('topBarLeft', kbTop())
-      loadEcharts('topBarRight', kbTop())
-    },
     // 鑾峰彇宸︿笂table鏁版嵁
-    getWareHouseTopLeftData() {
-      WareHouseTopLeftData().then(res => {
-        this.tableDataTop = res.data
-        // this.number1 = this.tableDataTop.length
-        const divData = this.$refs.tableDataTopRef.bodyWrapper
-        // 鎷垮埌鍏冪礌鍚庯紝瀵瑰厓绱犺繘琛屽畾鏃跺鍔犺窛绂婚《閮ㄨ窛绂伙紝瀹炵幇婊氬姩鏁堟灉(姝ら厤缃负姣�100姣绉诲姩1鍍忕礌)
-        this.tableTopTask = setInterval(() => {
-          // 鍏冪礌鑷璺濈椤堕儴1鍍忕礌
-          divData.scrollTop += 1
-          // divData.scrollTop += divData.scrollHeight / this.tableData.length
-          // 鍒ゆ柇鍏冪礌鏄惁婊氬姩鍒板簳閮�(鍙楂樺害+璺濈椤堕儴=鏁翠釜楂樺害)
-          if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
-            // 閲嶇疆table璺濈椤堕儴璺濈
-            divData.scrollTop = 0
-            WareHouseTopLeftData().then(res => {
-              this.tableDataTop = res.data
-              // this.number1 = this.tableDataTop.length
-              if (this.tableDataTop.length > 10) {
-                clearInterval(this.tableTopTask)
-                this.getWareHouseTopLeftData()
-              }
-            })
-          }
-        }, this.tableDataTop.length <= 10 ? 1000 * 3 : 100)
+    getProcureOutsourcLeftTop() {
+      ProcureOutsourcLeftTop().then(res => {
+        const flag = this.compareArrays(this.configTableTop.data, res.data)
+        if (!flag) {
+          this.configTableTop.data = res.data.map(i =>
+            [i.voucherdate.substring(0, 10),
+              i.wo,
+              i.saleOrderCode ? i.saleOrderCode : '/',
+              i.materiel_name,
+              i.specification,
+              i.quantity,
+              i.countInQuantity ? i.countInQuantity : 0,
+              `<span style="color: red;">${i.quantity - i.countInQuantity}</span>`
+            ]
+          )
+          this.$refs['scrollBoardTop'].updateRows(this.configTableTop.data)
+        }
       })
     },
     // 鑾峰彇宸︿笅table鏁版嵁
-    getWareHouseTopBottomData() {
-      WareHouseTopBottomData().then(res => {
-        this.tableDataBottom = res.data
-        this.number2 = this.tableDataBottom.length
-        const divData = this.$refs.tableDataBottomRef.bodyWrapper
-        // 鎷垮埌鍏冪礌鍚庯紝瀵瑰厓绱犺繘琛屽畾鏃跺鍔犺窛绂婚《閮ㄨ窛绂伙紝瀹炵幇婊氬姩鏁堟灉(姝ら厤缃负姣�100姣绉诲姩1鍍忕礌)
-        // const task = setInterval(() => {
-        this.tableBottomTask = setInterval(() => {
-          // 鍏冪礌鑷璺濈椤堕儴1鍍忕礌
-          divData.scrollTop += 1
-          // divData.scrollTop += divData.scrollHeight / this.tableData.length
-          // 鍒ゆ柇鍏冪礌鏄惁婊氬姩鍒板簳閮�(鍙楂樺害+璺濈椤堕儴=鏁翠釜楂樺害)
-          if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
-            // 閲嶇疆table璺濈椤堕儴璺濈
-            divData.scrollTop = 0
-            WareHouseTopBottomData().then(res => {
-              this.tableDataBottom = res.data
-              this.number2 = this.tableDataBottom.length
-              if (this.tableDataBottom.length > 10) {
-                clearInterval(this.tableBottomTask)
-                this.getWareHouseTopBottomData()
-              }
-            })
-          }
-        }, this.tableDataBottom.length <= 10 ? 1000 * 3 : 100)
+    getProductConsignmentLeftBottom() {
+      ProductConsignmentLeftBottom().then(res => {
+        const flag = this.compareArrays(this.configTableBottom.data, res.data)
+        if (!flag) {
+          this.configTableBottom.data = res.data.map(i =>
+            [
+              i.voucherdate.substring(0, 10),
+              i.wo,
+              i.materiel_name,
+              i.specification ? i.specification : '/',
+              i.quantity,
+              i.saleOutQuantity ? i.saleOutQuantity : '/',
+              `<span style="color:red;">  ${i.saleOutQuantity ? i.quantity - i.saleOutQuantity : i.quantity}</span>`, // 鏈彂璐ф暟閲�
+              i.deliveryDate ? i.deliveryDate.substring(0, 10) : '/',
+              i.warning < 0 ? `<span style="color:red;">${Math.abs(i.warning)}</span>` : `<span>${Math.abs(i.warning)}</span>`
+            ]
+          )
+          this.$refs['scrollBoardBottom'].updateRows(this.configTableBottom.data)
+        }
       })
     },
 
     // 鑾峰彇echarts
     getEcharts() {
-      WareHouseRightTopData().then(res => {
-        loadEcharts('bar03', bar02(res.data.filter(i => i.CanuseBaseQuantity > 0).map(i => i.CanuseBaseQuantity), res.data.filter(i => i.CanuseBaseQuantity > 0).map(i => i.materiel_name)))
+      ProcureOutsourcRightTop().then(res => {
+        loadEcharts('bar03', bar02(res.data.filter(i => i.qty > 0).map(i => i.qty), res.data.filter(i => i.qty > 0).map(i => i.materiel_name)))
       })
 
-      WareHouseRightBottomData().then(res => {
-        loadEcharts('bar04', bar02(res.data.filter(i => i.CanuseBaseQuantity > 0).map(i => i.CanuseBaseQuantity), res.data.filter(i => i.CanuseBaseQuantity > 0).map(i => i.materiel_name)))
+      ProductionStockedInRightBottom().then(res => {
+        loadEcharts('bar04', bar02(res.data.filter(i => i.qty > 0).map(i => i.qty), res.data.filter(i => i.qty > 0).map(i => i.materiel_name)))
       })
 
       this.echartsRightTop = setInterval(() => {
-        WareHouseRightTopData().then(res => {
-          loadEcharts('bar03', bar02(res.data.filter(i => i.CanuseBaseQuantity > 0).map(i => i.CanuseBaseQuantity), res.data.filter(i => i.CanuseBaseQuantity > 0).map(i => i.materiel_name)))
+        ProcureOutsourcRightTop().then(res => {
+          loadEcharts('bar03', bar02(res.data.filter(i => i.qty > 0).map(i => i.qty), res.data.filter(i => i.qty > 0).map(i => i.materiel_name)))
         })
-      }, 1000 * 15)
+      }, 1000 * 25)
 
       this.echartsRightBottom = setInterval(() => {
-        WareHouseRightBottomData().then(res => {
-          loadEcharts('bar04', bar02(res.data.filter(i => i.CanuseBaseQuantity > 0).map(i => i.CanuseBaseQuantity), res.data.filter(i => i.CanuseBaseQuantity > 0).map(i => i.materiel_name)))
+        ProductionStockedInRightBottom().then(res => {
+          loadEcharts('bar04', bar02(res.data.filter(i => i.qty > 0).map(i => i.qty), res.data.filter(i => i.qty > 0).map(i => i.materiel_name)))
         })
-      }, 1000 * 15)
+      }, 1000 * 30)
     },
     // 鑾峰彇褰撳墠鏃堕棿
     getNowTime() {
@@ -523,90 +327,37 @@
 
       this.headTime = `${y}-${m}-${d}  ${hh}:${mm}:${ss}   ${week}`
     },
-    headerCellStyleCenter() {
-      return {
-        // backgroundColor: 'rgb(30 ,33, 46)',
-        backgroundColor: '#000',
-        padding: '10px 0',
-        textAlign: 'center',
-        color: '#07acc2',
-        border: 'none',
-        fontSize: '18px'
+
+    // 涓や釜鏁扮粍鍋氬姣�
+    compareArrays(arr1, arr2) {
+      const set1 = new Set(arr1)
+      const set2 = new Set(arr2)
+
+      if (set1.size !== set2.size) {
+        return false
       }
-    },
-    cellStyleCenter() {
-      return {
-        padding: '7.5px 0',
-        textAlign: 'center',
-        backgroundColor: '#000',
-        color: '#fff',
-        border: 'none',
-        fontSize: '18px'
+
+      for (const value of set1) {
+        if (!set2.has(value)) {
+          return false
+        }
       }
+
+      return true
     }
+
   }
 }
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 
-$main_color:#09d8f2;
-$color01: #00FFFF;
-.tableData{
-  background: #000;
+::v-deep .header-item {
+  font-size: 16px !important;
 }
 
-.el-table__empty-text{
-  color: $main_color;
+::v-deep .row-item {
+  font-size: 16px !important;
 }
 
-::v-deep .el-table__body-wrapper::-webkit-scrollbar {
-  /* width: 0;瀹藉害涓�0鏆楄棌 */
-  width: 0;
-}
-
-::v-deep .el-table::before {
-  height: 0;
-}
-
-::v-deep .cell {
-  padding: 0 !important;
-  //font-size: 16px;
-  font-size: 18px;
-}
-</style>
-
-<!--鏄熺┖-->
-<style lang="css" scoped>
-@keyframes rotate {
-  0% {
-    transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
-  }
-  100% {
-    transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
-  }
-}
-
-.stars {
-  transform: perspective(500px);
-  transform-style: preserve-3d;
-  position: absolute;
-  perspective-origin: 50% 100%;
-  left: 45%;
-  animation: rotate 90s infinite linear;
-  bottom: 0;
-  z-index: 102;
-}
-
-.star {
-  width: 2px;
-  height: 2px;
-  /*background: #f7f7b6;*/
-  background: #8edffc;
-  position: absolute;
-  left: 0;
-  top: 0;
-  backface-visibility: hidden;
-  z-index: 102;
-}
 </style>

--
Gitblit v1.9.3