修改成品看板样式

src/router/index.js

@@ -132,6 +132,12 @@ export const constantRoutes = [
     component: () => import("@/views/kanban/finishproduct/index"),
     hidden: true,
   },
+  // 包装线产线生产看板
+  {
+    path: "/kanban/Packagingline",
+    component: () => import("@/views/kanban/Packagingline/index"),
+    hidden: true,
+  },
 
 ]
 

src/views/kanban/finishproduct/BottomRightTable1.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="bottom-right-table-1">
-    <dv-border-box-13 :key="borderBoxKey">
+    <dv-border-box-13 :key="borderBoxKey" style="width: 1120px;">
       <div class="table-name">
-        <dv-scroll-board :config="getScrollBoardConfig()" />
+        <dv-scroll-board id="dvscroll" :config="getScrollBoardConfig()" style="font-size: 22px;" />
 <!--        <dv-scroll-board :config="getScrollBoardConfig()"  />-->
       </div>
     </dv-border-box-13>
@@ -27,7 +27,7 @@ export default {
 
         ],
         index: true,
-        columnWidth: [100, 150, 100, 501, 200, 52],
+        columnWidth: [100, 150, 100, 450, 180, 72],
         align: ['center'],
         oddRowBGC: 'rgba(9, 37, 50, 0.4)',
         evenRowBGC: 'rgba(10, 32, 50, 0.3)'
@@ -48,10 +48,12 @@ export default {
           header: ['工单号', '产线名称', '产品名称', '生产数量', '单位'],
           data: this.config.data,
           index: true,
-          columnWidth: [100, 150, 100, 501, 200, 52],
+          columnWidth: [100, 150, 100, 450, 180, 72],
           align: ['center'],
           oddRowBGC: 'rgba(9, 37, 50, 0.4)',
-          evenRowBGC: 'rgba(10, 32, 50, 0.3)'
+          evenRowBGC: 'rgba(10, 32, 50, 0.3)',
+          titleTextStyle: { fontSize: '28px' },
+          contentTextStyle: { fontSize: '28px' }
       }
     },
     // 格式化 tableData 数据
@@ -69,11 +71,12 @@ export default {
 };
 </script>
 
-<style lang="less">
+<style lang="less" scoped >
 .bottom-right-table-1 {
   width: calc(~"100% + 10px");
   height: 100%;
   margin: 0 -5px;
+  
 
   .border-box-content {
     padding: 20px;
@@ -105,4 +108,22 @@ export default {
   }
 
 }
+
+::v-deep .dv-scroll-board .rows .ceil {
+  border-bottom: 1px solid #ebeef4 !important;
+}
+/deep/ .dv-scroll-board{
+  margin-top: 30px;
+  padding: 0 10px;
+}
+/deep/ .dv-scroll-board .rows .row-item .ceil {
+  font-size: 18px !important;
+  height: 49px !important;
+  line-height: 45px !important;
+}
+/deep/ .dv-scroll-board .header .header-item  {
+  font-size: 18px !important;
+  height: 49px !important;
+  line-height: 45px !important;
+}
 </style>

src/views/kanban/finishproduct/BottomRightechart1.vue

@@ -0,0 +1,384 @@
+<template>
+  <div class="bottom-right-table-1" style=" margin-left: 10px">
+    <dv-border-box-13 style="width: 770px;height: 600px;">
+      <div class="table-name">
+        <div id="echart1" style="margin: auto; width: 770px; height: 600px"></div>
+      </div>
+    </dv-border-box-13>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+export default {
+  name: 'BottomRightechart1',
+  props: {
+    tableData: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      borderBoxKey: 1, // 初始化一个key值
+      tablelist: [],
+    }
+  },
+  watch: {
+    // 监听 tableData 的变化，更新 config 中的 data
+    tableData(newVal) {
+      console.log("newVal-11111",newVal)
+      this.tablelist = newVal;
+      this.initChart1()
+    }
+  },
+  methods: {
+    initChart1() {
+      const _this = this;
+      var existingChart = echarts.getInstanceByDom(document.getElementById('echart1'));
+      if (existingChart) {
+        // 如果已经有实例，先销毁它
+        existingChart.dispose();
+      }
+      var myChart1 = echarts.init(document.getElementById('echart1'));
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint
+          const c0 = [shape.x, shape.y]
+          const c1 = [shape.x - 9, shape.y - 9]
+          const c2 = [xAxisPoint[0] - 9, xAxisPoint[1] - 9]
+          const c3 = [xAxisPoint[0], xAxisPoint[1]]
+          ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
+        }
+      })
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint
+          const c1 = [shape.x, shape.y]
+          const c2 = [xAxisPoint[0], xAxisPoint[1]]
+          const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 9]
+          const c4 = [shape.x + 18, shape.y - 9]
+          ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
+        }
+      })
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y]
+          const c2 = [shape.x + 18, shape.y - 9]
+          const c3 = [shape.x + 9, shape.y - 18]
+          const c4 = [shape.x - 9, shape.y - 9]
+          ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
+        }
+      })
+      echarts.graphic.registerShape('CubeLeft', CubeLeft)
+      echarts.graphic.registerShape('CubeRight', CubeRight)
+      echarts.graphic.registerShape('CubeTop', CubeTop)
+      let xAxisname = []
+      let MAX = []
+      let VALUE = []
+
+      _this.tablelist.forEach((item) => {
+        xAxisname.push(item.equipment_name)
+      });
+      for (let i = 0; i < _this.tablelist.length; i++) {
+        MAX.push(100)
+        VALUE.push(96+Math.floor(Math.random() * 5))
+      }
+      // VALUE = this.generateRandomNumbers(_this.tablelist.length);
+      var option1 = {
+        // backgroundColor: "#010d3a",
+        title: {
+          text: '',
+          top: 32,
+          left: 18,
+          textStyle: {
+            color: '#00F6FF',
+            fontSize: 24
+          }
+        },
+        grid: {
+          left: 20,
+          right: 40,
+          bottom: '19%',
+          top: 107,
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: xAxisname,
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: 'white'
+            }
+          },
+          offset: 20,
+          axisTick: {
+            show: false,
+            length: 9,
+            alignWithLabel: true,
+            lineStyle: {
+              color: '#7DFFFD'
+            }
+          },
+          axisLabel: {
+            fontSize: 10
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: 'white'
+            }
+          },
+          max: '100',
+          splitLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            fontSize: 16,
+            formatter: "{value}%",
+          },
+          boundaryGap: ['20%', '20%']
+        },
+        series: [{
+          type: 'custom',
+          renderItem: function (params, api) {
+            const location = api.coord([api.value(0), api.value(1)])
+            return {
+              type: 'group',
+              children: [{
+                type: 'CubeLeft',
+                shape: {
+                  api,
+                  xValue: api.value(0),
+                  yValue: api.value(1),
+                  x: location[0],
+                  y: location[1],
+                  xAxisPoint: api.coord([api.value(0), 0])
+                },
+                style: {
+                  fill: 'rgba(7,29,97,.6)'
+                }
+              }, {
+                type: 'CubeRight',
+                shape: {
+                  api,
+                  xValue: api.value(0),
+                  yValue: api.value(1),
+                  x: location[0],
+                  y: location[1],
+                  xAxisPoint: api.coord([api.value(0), 0])
+                },
+                style: {
+                  fill: 'rgba(10,35,108,.7)'
+                }
+              }, {
+                type: 'CubeTop',
+                shape: {
+                  api,
+                  xValue: api.value(0),
+                  yValue: api.value(1),
+                  x: location[0],
+                  y: location[1],
+                  xAxisPoint: api.coord([api.value(0), 0])
+                },
+                style: {
+                  fill: 'rgba(11,42,106,.8)'
+                }
+              }]
+            }
+          },
+          data: MAX
+        }, {
+          type: 'custom',
+          renderItem: (params, api) => {
+            const location = api.coord([api.value(0), api.value(1)])
+            return {
+              type: 'group',
+              children: [{
+                type: 'CubeLeft',
+                shape: {
+                  api,
+                  xValue: api.value(0),
+                  yValue: api.value(1),
+                  x: location[0],
+                  y: location[1],
+                  xAxisPoint: api.coord([api.value(0), 0])
+                },
+                style: {
+                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                    offset: 0,
+                    color: '#3B80E2'
+                  },
+                  {
+                    offset: 1,
+                    color: '#49BEE5'
+                  }
+                  ])
+                }
+              }, {
+                type: 'CubeRight',
+                shape: {
+                  api,
+                  xValue: api.value(0),
+                  yValue: api.value(1),
+                  x: location[0],
+                  y: location[1],
+                  xAxisPoint: api.coord([api.value(0), 0])
+                },
+                style: {
+                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                    offset: 0,
+                    color: '#3B80E2'
+                  },
+                  {
+                    offset: 1,
+                    color: '#49BEE5'
+                  }
+                  ])
+                }
+              }, {
+                type: 'CubeTop',
+                shape: {
+                  api,
+                  xValue: api.value(0),
+                  yValue: api.value(1),
+                  x: location[0],
+                  y: location[1],
+                  xAxisPoint: api.coord([api.value(0), 0])
+                },
+                style: {
+                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                    offset: 0,
+                    color: '#3B80E2'
+                  },
+                  {
+                    offset: 1,
+                    color: '#49BEE5'
+                  }
+                  ])
+                }
+              }]
+            }
+          },
+          data: VALUE
+        }, {
+          type: 'bar',
+          label: {
+            normal: {
+              show: true,
+              position: 'top',
+              formatter: (e) => {
+                switch (e.name) {
+                  case '10kV线路':
+                    return VALUE[0]
+                  case '公用配变':
+                    return VALUE[1]
+                  case '35kV主变':
+                    return VALUE[2]
+                  case '水':
+
+                }
+              },
+              fontSize: 16,
+              color: '#fff',
+              offset: [4, -25]
+            }
+          },
+          itemStyle: {
+            color: 'transparent'
+          },
+          data: VALUE
+        }]
+      }
+      myChart1.setOption(option1);
+    },
+
+
+    // 格式化 tableData 数据
+  },
+  mounted() {
+    this.initChart1();
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.bottom-right-table-1 {
+  width: calc(~"100% + 10px");
+  height: 100%;
+  margin: 0 -5px;
+
+
+  .border-box-content {
+    padding: 20px;
+    box-sizing: border-box;
+  }
+
+  .table-name {
+    height: 330px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 15px;
+
+    img {
+      width: 79px;
+      height: 30px;
+      margin-right: 5px;
+    }
+  }
+
+  .grid-container {
+    display: grid;
+    grid-template-rows: repeat(2, auto);
+    /* 每行的高度为内容的高度 */
+    gap: 10px;
+    /* 调整行之间的垂直间距 */
+  }
+
+  .dv-scroll-board {
+    height: calc(~"100% - 0px");
+  }
+
+}
+
+::v-deep .dv-scroll-board .rows .ceil {
+  border-bottom: 1px solid #ebeef4 !important;
+}
+
+/deep/ .dv-scroll-board {
+  margin-top: 30px;
+  padding: 0 10px;
+}
+
+/deep/ .dv-scroll-board .rows .row-item .ceil {
+  font-size: 18px !important;
+  height: 49px !important;
+  line-height: 45px !important;
+}
+
+/deep/ .dv-scroll-board .header .header-item {
+  font-size: 18px !important;
+  height: 49px !important;
+  line-height: 45px !important;
+}
+</style>

src/views/kanban/finishproduct/TopLeftCmp.vue

@@ -29,7 +29,10 @@
 export default {
   name: 'TopLeftCmp',
   props: {
-    data: []
+    data: {
+      type: Array,
+      default: () => []
+    }
   },
   data() {
     return {

src/views/kanban/finishproduct/index.vue

@@ -9,11 +9,7 @@
           <img src="../../../assets/images/logo.png" alt="" />
         </div>
         <div class="back">
-          <el-button
-            @click="back()"
-            type="primary"
-            icon="el-icon-s-home"
-          ></el-button>
+          <el-button @click="back()" type="primary" icon="el-icon-s-home"></el-button>
         </div>
       </div>
       <div class="content-top">
@@ -26,17 +22,25 @@
       <div class="content">
         <div class="mc-top">
           <div class="mc-left">
-            <Top-Left-Cmp :data="valueForTopLeftCmp"/>
+            <Top-Left-Cmp :data="valueForTopLeftCmp" />
           </div>
           <div class="mc-middle">
 
           </div>
           <div class="mc-right">
-            <Top-Middle-Cmp :data="valueForTopMiddleCmp"  style="height: 100%;"/>
+            <Top-Middle-Cmp :data="valueForTopMiddleCmp" style="height: 100%;" />
           </div>
         </div>
-        <div class="mc-bottom">
-          <BottomRightTable1 :tableData="BottomRightTableValue" style="height: 600px; margin-top: 50px"/>
+        <div class="mc-bottom" style="display: flex; justify-content: space-between;">
+          <BottomRightTable1 :tableData="BottomRightTableValue" style="height: 600px; margin-top: 50px" />
+          <BottomRightechart1 :tableData="BottomRightTableValue" style="height: 600px; margin-top: 50px" />
+          <!-- <div class="bottom-right-table-1" style="height: 600px; margin-top: 50px">
+            <dv-border-box-13 style="width: 770px;height: 600px;">
+              <div class="table-name">
+                <div id="echart1" style="margin: auto; width: 770px; height: 600px"></div>
+              </div>
+            </dv-border-box-13>
+          </div> -->
           <!-- 设置 .mc-bottom 的高度，你可以根据实际情况调整 -->
         </div>
       </div>
@@ -45,7 +49,7 @@
 </template>
 
 <script>
-
+import * as echarts from "echarts"
 import { finishProductBoard } from "@/api/kanban/finishproduct";
 import TopLeftCmp from './TopLeftCmp'
 import TopMiddleCmp from './TopMiddleCmp'
@@ -53,8 +57,7 @@ import TopRightCmp from './TopRightCmp'
 
 
 import BottomRightTable1 from './BottomRightTable1'
-
-
+import BottomRightechart1 from './BottomRightechart1'
 
 export default {
   name: 'DataView',
@@ -63,8 +66,9 @@ export default {
     TopMiddleCmp,
     TopRightCmp,
     BottomRightTable1,
+    BottomRightechart1,
   },
-  data () {
+  data() {
     return {
       currentDateTime: null,
       // 在这里定义要传递的值
@@ -72,9 +76,9 @@ export default {
         sumplanquantity: 0,
         sumFinshQuantity: 0,
       },
-      valueForTopMiddleCmp:[],
-      BottomRightTableValue:[],
-
+      valueForTopMiddleCmp: [],
+      BottomRightTableValue: [],
+      tablelist:[],
     };
   },
   methods: {
@@ -95,14 +99,16 @@ export default {
         console.log(response.data);
         this.valueForTopLeftCmp.sumplanquantity = response.data.sumplanquantity ?? 0;;
         this.valueForTopLeftCmp.sumFinshQuantity = response.data.sumFinshQuantity ?? 0;;
-        this.valueForTopMiddleCmp=response.data.daySenvenProductionList;
+        this.valueForTopMiddleCmp = response.data.daySenvenProductionList;
+        response.data.ProductionInProgress = []
         this.BottomRightTableValue = response.data.ProductionInProgress;
-
+        // this.initChart1()
 
       } catch (error) {
         console.error('Error fetching data:', error);
       }
-    }
+    },
+  
 
   },
   mounted() {
@@ -120,52 +126,60 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
 .app-container {
   padding: 0px 24px;
   color: #fff;
 }
+
 .home {
   width: 100%;
   height: 100%;
   background: url("../../../assets/images/bg-finishproduct.png") no-repeat;
   background-size: 100% 100%;
   background-color: #050711;
+
   .head {
     width: 100%;
     height: 74px;
     position: relative;
+
     .head-content {
       height: 74px;
       background-image: url("../../../assets/images/bg-head.png");
       background-repeat: no-repeat;
       background-size: 100% 100%;
       text-align: center;
+
       .title {
         font-size: 42px;
         font-weight: 400;
         color: #ffffff;
       }
     }
+
     .head-logo {
       position: absolute;
       left: 0px;
       top: 1px;
+
       img {
         height: 38px;
         // width: ;
       }
     }
+
     .back {
       position: absolute;
       right: 0px;
       top: 5px;
     }
   }
+
   .content-top {
     display: flex;
     justify-content: space-between;
     position: relative;
+
     .timebox {
       width: 480px;
       height: 100px;
@@ -175,6 +189,7 @@ export default {
       position: absolute;
       top: -17px;
       right: 0px;
+
       .time {
         font-size: 30px;
         font-weight: 400;
@@ -183,28 +198,31 @@ export default {
       }
     }
   }
+
   .content {
     margin-top: 63px;
     display: block;
     justify-content: space-between;
+
     .mc-top {
       height: 100%;
       width: 100%;
       display: flex;
+
       .mc-left {
-        flex: 2;  // 占据剩余的空间
+        flex: 2; // 占据剩余的空间
       }
 
       .mc-middle {
-        flex: 1;  // 占据剩余的空间
+        flex: 1; // 占据剩余的空间
       }
+
       .mc-right {
-        flex: 2;  // 占据剩余的空间
+        flex: 2; // 占据剩余的空间
       }
     }
 
   }
 
 }
-
 </style>