添加右下角表格

src/assets/scss/_variables.scss

@@ -88,7 +88,7 @@ $flex-ai: (
   flex: 1;
 }
 
-//.mt-1 => margin top
+//.mt-1 => margin
 //spacing
 $spacing-types: (
   m: margin,

src/views/compare/index.vue

@@ -77,6 +77,11 @@
                 <right/>
               </dv-border-box-12>
             </div>
+            <div>
+              <dv-border-box-12 >
+                <right_bottom/>
+              </dv-border-box-12>
+            </div>
           </div>
         </div>
       </div>
@@ -91,6 +96,7 @@ import {formatTime} from '../../utils/index.js'
 import leftup1 from './left-up1.vue'
 import leftdown1 from './left-down1.vue'
 import right from './right.vue'
+import right_bottom from './right-bottom.vue'
 import {mapMutations, mapState} from "vuex"
 
 export default {
@@ -113,6 +119,7 @@ export default {
   },
   components: {
     right,
+    right_bottom,
     leftdown1,
     leftup1
   },

src/views/compare/right-bottom.vue

@@ -0,0 +1,153 @@
+<template>
+  <div id="right-bottom" >
+    <div class="bg-color-black">
+      <div class="plan-header">
+        <div class="d-flex pt-1 pl-2 jc-center">
+          <span class="text mx-2 fw-b">每周车间达成率</span>
+        </div>
+      </div>
+      <div class="plan-body">
+        <dv-scroll-board
+            :config="config"
+            ref="scrollBoard"
+            class="scroll-board"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ProductionPlan',
+  data() {
+    return {
+      config: {
+        header: ['周次','达成率最高车间', '达成率%','良率最高车间','良品率%'],
+        data: [],
+        rowNum: 20,
+        headerHeight: 35,
+        headerBGC: 'rgba(15,19,37,0.1)',
+        oddRowBGC: 'rgba(15,19,37,0.1)',
+        evenRowBGC: 'rgba(23,28,51,0.1)',
+        columnWidth: [100, 190, 150,160,150],
+        align: ['center', 'center', 'center', 'center','center']
+      },
+      refreshInterval: null,
+      apiCaller: 'KB!ALLWC!PROCESS_WEEK'
+    }
+  },
+  mounted() {
+    this.initDataRefresh()
+  },
+  beforeDestroy() {
+    this.clearRefreshInterval()
+  },
+  methods: {
+    initDataRefresh() {
+      this.fetchData()
+      this.refreshInterval = setInterval(this.fetchData, 10000)
+    },
+
+    clearRefreshInterval() {
+      if (this.refreshInterval) {
+        clearInterval(this.refreshInterval)
+        this.refreshInterval = null
+      }
+    },
+
+    async fetchData() {
+      try {
+        const response = await this.$http.get("kanban/datalist.action", {
+          params: {
+            caller: this.apiCaller,
+            _noc: 1,
+            page: 1,
+            pageSize: 100,
+            condition: "1=1"
+          }
+        })
+        this.processResponseData(response.data.data)
+      } catch (error) {
+        console.error('数据获取失败:', error)
+      }
+    },
+
+    processResponseData(rawData) {
+      try {
+        const dataList = JSON.parse(rawData)
+        const formattedData = dataList.map(item => this.formatRowData(item))
+        this.$refs.scrollBoard.updateRows(formattedData)
+      } catch (error) {
+        console.error('数据处理失败:', error)
+      }
+    },
+    formatRowData(item) {
+      const rowClass = 'colorGrass';
+      return [
+        this.createCell(item.week_number, rowClass),
+        this.createCell(item.highest_getrate_wc, rowClass),
+        this.createCell(item.highest_getrate, rowClass),
+        this.createCell(item.highest_okrate_wc, rowClass),
+        this.createCell(item.highest_okrate, rowClass)
+      ]
+    },
+    createCell(content, className) {
+      return `<span class="${className} fs-xxl">${content}</span>`
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$box-height: 450px;
+$box-width: 100%;
+#right-bottom {
+  padding: 13px;
+  height: $box-height;
+  width: $box-width;
+  border-radius: 5px;
+  .bg-color-black {
+    height: $box-height - 25px;
+    border-radius: 10px;
+    padding: 5px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .plan-header {
+    .text {
+      color: #c3cbde;
+      font-size: 25px;
+    }
+    .header-content {
+      border-radius: 10px;
+      padding: 5px;
+      background-color: rgba(15, 19, 37, 0.1);
+
+      .header-title {
+        color: #c3cbde;
+        font-weight: bold;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 5px 10px;
+      }
+    }
+  }
+
+  .plan-body {
+    margin-top: 5px;
+
+    .scroll-board {
+      height: 920px;
+      border-radius: 10px;
+
+      ::v-deep .header {
+        font-size: 23px;
+      }
+    }
+  }
+}
+
+</style>

src/views/compare/right.vue

@@ -102,7 +102,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-$box-height: 950px;
+$box-height: 500px;
 $box-width: 100%;
 #right {
   padding: 13px;