diff --git a/hw-ui/package.json b/hw-ui/package.json
index c0906e42..fd378f26 100644
--- a/hw-ui/package.json
+++ b/hw-ui/package.json
@@ -41,6 +41,7 @@
     "axios": "0.24.0",
     "clipboard": "2.0.8",
     "core-js": "3.25.3",
+    "downloadjs": "^1.4.7",
     "echarts": "5.5.0",
     "echarts-liquidfill": "^3.1.0",
     "element-ui": "2.15.14",
diff --git a/hw-ui/src/assets/board/center.png b/hw-ui/src/assets/board/center.png
new file mode 100644
index 00000000..8947abfb
Binary files /dev/null and b/hw-ui/src/assets/board/center.png differ
diff --git a/hw-ui/src/assets/board/productionBg1_1.jpg b/hw-ui/src/assets/board/productionBg1_1.jpg
new file mode 100644
index 00000000..cb1cba60
Binary files /dev/null and b/hw-ui/src/assets/board/productionBg1_1.jpg differ
diff --git a/hw-ui/src/assets/board/productionBg1_4.jpg b/hw-ui/src/assets/board/productionBg1_4.jpg
new file mode 100644
index 00000000..4f17728e
Binary files /dev/null and b/hw-ui/src/assets/board/productionBg1_4.jpg differ
diff --git a/hw-ui/src/views/board/production/secondFloor.vue b/hw-ui/src/views/board/production/secondFloor.vue
index 68d3f1b4..31a958dc 100644
--- a/hw-ui/src/views/board/production/secondFloor.vue
+++ b/hw-ui/src/views/board/production/secondFloor.vue
@@ -1,83 +1,30 @@
 <template>
   <div class="app-container">
     <div class="headTitle">京源生产监控平台</div>
+    <div class="time">{{
+        time
+      }}
+    </div>
     <div v-for="(i,k) in title"
          :style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'"
          class="title"
     >
       {{ i }}
     </div>
-    <div class="table1">
-      <div style="background-color: #094170">
-        <div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 12%">
-          编号
-        </div>
-        <div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 36%">
-          生产工单
-        </div>
-        <div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 14%">
-          计划数量
-        </div>
-        <div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 14%">
-          实际数量
-        </div>
-        <div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 12%">
-          差异值
-        </div>
-        <div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 12%">
-          完成率
-        </div>
-      </div>
-      <vue-seamless-scroll
-        :class-option="scrollTableOption"
-        :data="scrollTableData"
-        class="case-item"
-        style="height: calc(100% - 30px);overflow: hidden;"
-      >
-        <div
-          v-for="(item, index) in scrollTableData"
-          :key="index"
-        >
-          <div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
-            <div
-              class="scrollTableItem" style="width: 12%"
-            >
-              {{ item.no }}
-            </div>
-            <div
-              class="scrollTableItem" style="width:36%"
-            >
-              {{ item.orderCode }}
-            </div>
-            <div
-              class="scrollTableItem" style="width: 14%"
-            >
-              {{ item.planAmount }}
-            </div>
-            <div
-              class="scrollTableItem" style="width: 14%"
-            >
-              {{ item.completeAmount }}
-            </div>
-            <div
-              class="scrollTableItem" style="width: 12%"
-            >
-              {{ item.quantityAmount }}
-            </div>
-            <div
-              class="scrollTableItem" style="width: 12%"
-            >
-              {{ item.finishingRate }}%
-            </div>
-          </div>
-        </div>
-      </vue-seamless-scroll>
-    </div>
     <div class="chart1">
       <Chart key="chart1" ref="chart1"></Chart>
     </div>
     <div class="chart2">
-      <Chart key="chart2" ref="chart2"></Chart>
+      <div v-for="(i,k) in 10" class="item">
+        <div style="top: 25%;left:5%" class="block">人员{{ k }}</div>
+        <div style="top: 50%;left:5%" class="block">工序：切割</div>
+        <div style="top: 75%;left:5%" class="block">产品计划数量：10000</div>
+        <div style="text-align: right;top: 25%;right:5%" class="block">8888</div>
+        <div style="text-align: right;top: 50%;right:5%" class="block">88%</div>
+        <div style="text-align: right;top: 75%;right:5%;width: 50%;height: 0.8vw" class="block">
+          <el-progress :format="()=>{return ''}" :percentage="88"></el-progress>
+        </div>
+      </div>
     </div>
     <div class="chart3">
       <Chart key="chart3" ref="chart3"></Chart>
@@ -85,19 +32,6 @@
     <div class="chart4">
       <Chart key="chart4" ref="chart4"></Chart>
     </div>
-    <div class="num1 num1_1" style="top: 17%;left: 31.1%;color:#5fc2f2">{{ topData.planAmount[0] }}</div>
-    <div class="num1 num1_2" style="top: 17%;left:34.1%;color:#5fc2f2">{{ topData.planAmount[1] }}</div>
-    <div class="num1 num1_3" style="top: 17%;left:37%;color:#5fc2f2">{{ topData.planAmount[2] }}</div>
-    <div class="num1 num1_4" style="top: 17%;left:40%;color:#5fc2f2">{{ topData.planAmount[3] }}</div>
-    <div class="num1 num1_5" style="top: 17%;left:45.6%;color:#59ee7b">{{ topData.completeAmount[0] }}</div>
-    <div class="num1 num1_6" style="top: 17%;left:48.6%;color:#59ee7b">{{ topData.completeAmount[1] }}</div>
-    <div class="num1 num1_7" style="top: 17%;left:51.5%;color:#59ee7b">{{ topData.completeAmount[2] }}</div>
-    <div class="num1 num1_8" style="top: 17%;left:54.5%;color:#59ee7b">{{ topData.completeAmount[3] }}</div>
-    <div class="num1 num1_9" style="top: 17%;left:60%;color:#f60008">{{ topData.diff[0] }}</div>
-    <div class="num1 num1_10" style="top: 17%;left:63%;color:#f60008">{{ topData.diff[1] }}</div>
-    <div class="num1 num1_11" style="top: 17%;left:65.9%;color:#f60008">{{ topData.diff[2] }}</div>
-    <div class="num1 num1_12" style="top: 17%;left:68.9%;color:#f60008">{{ topData.diff[3] }}</div>
-    <div class="state" :style="`background-color:${LineStatus?'#ffff00':'#ff0000'}`"></div>
   </div>
 </template>
 
@@ -129,16 +63,17 @@ export default {
         completeAmount: [0, 0, 0, 0],
         diff: [0, 0, 0, 0]
       },
+      time: parseTime(new Date(), '{y}-{m}-{d} 星期{a} {h}:{i}:{s}'),
       title: [
-        '工单计划',
-        '小时产量',
+        '工序生产进度',
+        '工序名称对比',
         '七日产量对比',
-        '粉尘数据走势',
-        '设备时长统计',
-        '计划数量:',
-        '完成数量:',
-        '差异值:',
-        '产线状态:'
+        ' ',
+        ' ',
+        ' ',
+        ' ',
+        ' ',
+        ' '
       ],
       titlePosition: [
         {
@@ -150,7 +85,7 @@ export default {
           left: 75
         },
         {
-          top: 63,
+          top: 70.3,
           left: 5.5
         },
         {
@@ -192,13 +127,14 @@ export default {
     }
   },
   mounted() {
+    setInterval(() => {
+      this.time = parseTime(new Date(), '{y}-{m}-{d} 星期{a} {h}:{i}:{s}')
+    }, 1000)
     this.getData()
 
     window.onresize = () => {
       this.$refs.chart1.chart.resize()
-      this.$refs.chart2.chart.resize()
       this.$refs.chart3.chart.resize()
-      this.$refs.chart4.chart.resize()
     }
   },
   methods: {
@@ -215,242 +151,81 @@ export default {
           }
         })
       })
-      selectLatestWorkOrder().then(e => {
-        this.topData.planAmount = [...[0, 0, 0, 0], ...(e.data.planAmount || 0).toString().split('')].slice(-4)
-        this.topData.completeAmount = [...[0, 0, 0, 0], ...(e.data.completeAmount || 0).toString().split('')].slice(-4)
-        this.topData.diff = [...[0, 0, 0, 0], ...Math.abs((parseFloat(e.data.planAmount) - parseFloat(e.data.completeAmount)) || 0).toString().split('')].slice(-4)
-      })
-      getLineStatus().then(e => {
-        this.LineStatus = e.msg === 'True'
-      })
-      getHourProduction().then(e => {
-        this.$refs.chart1.setData({
-          tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-              // 坐标轴指示器，坐标轴触发有效
-              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
-            }
-          },
-          grid: {
-            left: '0',
-            right: '4%',
-            bottom: '0',
-            top: 20,
-            containLabel: true
-          },
-          xAxis: {
-            type: 'category',
-            data: e.data.map(v => v.hour),
-            axisLine: {
-              lineStyle: {
-                color: 'white'
+      this.$refs.chart1.setData({
+        tooltip: {},
+        radar: {
+          indicator: [
+            { name: '打磨', max: 6500 },
+            { name: '折弯', max: 16000 },
+            { name: '组装', max: 30000 },
+            { name: '下料', max: 38000 },
+            { name: '机加', max: 52000 },
+            { name: '1', max: 25000 }
+          ]
+        },
+        series: [
+          {
+            name: '时间',
+            type: 'radar',
+            // areaStyle: {normal: {}},
+            data: [
+              {
+                value: [4300, 10000, 28000, 35000, 50000, 19000],
+                name: '时间'
               }
-            },
-            axisLabel: {
-              // interval: 0,
-              // rotate: 40,
-              textStyle: {
-                fontFamily: 'Microsoft YaHei'
-              }
-            }
-          },
+            ]
+          }
+        ]
+      })
+      this.$refs.chart3.setData({
+        grid: {
+          top: 30,
+          left: '2%',
+          right: '5%',
+          bottom: '2%',
+          containLabel: true
+        },
+        legend: {
+          textStyle: {
+            color: '#fff'
+          }
+        },
 
-          yAxis: {
+        tooltip: {
+          trigger: 'axis'
+        },
+        xAxis: {
+          type: 'category',
+          data: [1, 2, 3],
+          axisLabel: {
+            margin: 10,
+            color: '#ffffff63'
+          },
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: true,
+            lineStyle: {
+              color: '#ffffff1f'
+            }
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: 'dashed',
+              color: '#ffffff1f'
+            }
+          }
+        },
+        yAxis: [
+          {
             type: 'value',
-            axisLine: {
-              show: false,
-              lineStyle: {
-                color: 'white'
-              }
-            },
-            splitLine: {
-              show: false
-            },
-            axisLabel: {}
-          },
-          series: [
-            {
-              name: '数量',
-              label: {
-                normal: {
-                  show: true,
-                  position: 'top',
-                  textStyle: {
-                    color: '#a8aab0',
-                    fontStyle: 'normal',
-                    fontFamily: '微软雅黑',
-                    fontSize: 0.75 * vw
-                  }
-                }
-              },
-              type: 'bar',
-              barWidth: '30%',
-              barMaxWidth: 50,
-              itemStyle: {
-                normal: {
-                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                    {
-                      offset: 0,
-                      color: '#39ffff'
-                    },
-                    {
-                      offset: 1,
-                      color: '#5affa6'
-                    }
-                  ])
-                }
-              },
-              data: e.data.map(v => v.amount)
-            }
-          ]
-        })
-      })
-      getDayProduction().then(e => {
-        this.$refs.chart2.setData({
-          grid: {
-            top: 30,
-            left: '2%',
-            right: '5%',
-            bottom: '2%',
-            containLabel: true
-          },
-          xAxis: {
-            type: 'category',
-            boundaryGap: false,
-            data: e.data.map(v => v.day),
             axisLabel: {
               margin: 10,
               color: '#ffffff63'
             },
-            axisLine: {
-              show: false
-            },
-            axisTick: {
-              show: true,
-              lineStyle: {
-                color: '#ffffff1f'
-              }
-            },
-            splitLine: {
-              show: false,
-              lineStyle: {
-                type: 'dashed',
-                color: '#ffffff1f'
-              }
-            }
-          },
-          yAxis: [
-            {
-              type: 'value',
-              axisLabel: {
-                margin: 10,
-                color: '#ffffff63'
-              },
 
-              axisTick: {
-                show: true,
-                lineStyle: {
-                  color: '#ffffff1f'
-                }
-              },
-              splitLine: {
-                show: false,
-                lineStyle: {
-                  type: 'dashed',
-                  color: '#ffffff1f'
-                }
-              },
-              axisLine: {
-                lineStyle: {
-                  color: '#fff',
-                  width: 2
-                }
-              }
-            }
-          ],
-          series: [
-            {
-              name: '产量',
-              type: 'line',
-              smooth: true, //是否平滑曲线显示
-              showAllSymbol: true,
-              symbol: 'circle',
-              symbolSize: 6,
-              lineStyle: {
-                normal: {
-                  color: '#fff' // 线条颜色
-                }
-              },
-              label: {
-                show: true,
-                position: 'top',
-                textStyle: {
-                  color: '#fff'
-                }
-              },
-              itemStyle: {
-                color: 'red',
-                borderColor: '#fff',
-                borderWidth: 3
-              },
-              tooltip: {
-                show: false
-              },
-              areaStyle: {
-                normal: {
-                  color: new echarts.graphic.LinearGradient(
-                    0,
-                    0,
-                    0,
-                    1,
-                    [
-                      {
-                        offset: 0,
-                        color: '#eb64fb'
-                      },
-                      {
-                        offset: 1,
-                        color: '#3fbbff0d'
-                      }
-                    ],
-                    false
-                  )
-                }
-              },
-              data: e.data.map(v => v.instock_amount)
-            }
-          ]
-        })
-      })
-      dustAnalysis().then(e => {
-        this.$refs.chart3.setData({
-          grid: {
-            top: 30,
-            left: '2%',
-            right: '5%',
-            bottom: '2%',
-            containLabel: true
-          },
-          legend: {
-            textStyle: {
-              color: '#fff'
-            }
-          },
-
-          tooltip: {
-            trigger: 'axis'
-          },
-          xAxis: {
-            type: 'category',
-            data: e.data.map(v => parseTime(v.recodeTime)),
-            axisLabel: {
-              margin: 10,
-              color: '#ffffff63'
-            },
-            axisLine: {
-              show: false
-            },
             axisTick: {
               show: true,
               lineStyle: {
@@ -463,246 +238,48 @@ export default {
                 type: 'dashed',
                 color: '#ffffff1f'
               }
-            }
-          },
-          yAxis: [
-            {
-              type: 'value',
-              axisLabel: {
-                margin: 10,
-                color: '#ffffff63'
-              },
-
-              axisTick: {
-                show: true,
-                lineStyle: {
-                  color: '#ffffff1f'
-                }
-              },
-              splitLine: {
-                show: true,
-                lineStyle: {
-                  type: 'dashed',
-                  color: '#ffffff1f'
-                }
-              },
-              axisLine: {
-                lineStyle: {
-                  color: '#fff',
-                  width: 2
-                }
-              }
-            }
-          ],
-          series: [
-            {
-              name: 'pm1',
-              type: 'line',
-              smooth: true, //是否平滑曲线显示
-              showAllSymbol: true,
-              symbol: 'circle',
-              symbolSize: 6,
-              lineStyle: {
-                normal: {
-                  color: '#fff' // 线条颜色
-                }
-              },
-              label: {
-                show: true,
-                position: 'top',
-                textStyle: {
-                  color: '#fff'
-                }
-              },
-              itemStyle: {
-                color: 'red',
-                borderColor: '#fff',
-                borderWidth: 3
-              },
-              tooltip: {
-                // show: false,
-              },
-              data: e.data.map(v => v.pm1)
-            },
-            {
-              name: 'pm2',
-              type: 'line',
-              smooth: true, //是否平滑曲线显示
-              showAllSymbol: true,
-              symbol: 'circle',
-              symbolSize: 6,
-              lineStyle: {
-                normal: {
-                  color: '#f0f' // 线条颜色
-                }
-              },
-              label: {
-                show: true,
-                position: 'top',
-                textStyle: {
-                  color: '#fff'
-                }
-              },
-              itemStyle: {
-                color: 'red',
-                borderColor: '#fff',
-                borderWidth: 3
-              },
-              tooltip: {
-                // show: false,
-              },
-              data: e.data.map(v => v.pm2)
-            },
-            {
-              name: 'pm10',
-              type: 'line',
-              smooth: true, //是否平滑曲线显示
-              showAllSymbol: true,
-              symbol: 'circle',
-              symbolSize: 6,
-              lineStyle: {
-                normal: {
-                  color: '#ff0' // 线条颜色
-                }
-              },
-              label: {
-                show: true,
-                position: 'top',
-                textStyle: {
-                  color: '#fff'
-                }
-              },
-              itemStyle: {
-                color: 'red',
-                borderColor: '#fff',
-                borderWidth: 3
-              },
-              tooltip: {
-                // show: false,
-              },
-              data: e.data.map(v => v.pm10)
-            }
-          ]
-        })
-      })
-      deviceTimeCount().then(e => {
-        console.log(e)
-        this.$refs.chart4.setData({
-          grid: {
-            top: 30,
-            left: '2%',
-            right: '5%',
-            bottom: '2%',
-            containLabel: true
-          },
-          xAxis: {
-            type: 'category',
-            boundaryGap: false,
-            data: e.data.map(v => parseTime(v.hour)),
-            axisLabel: {
-              margin: 10,
-              color: '#ffffff63'
             },
             axisLine: {
-              show: false
+              lineStyle: {
+                color: '#fff',
+                width: 2
+              }
+            }
+          }
+        ],
+        series: [
+          {
+            name: '1',
+            type: 'line',
+            smooth: true, //是否平滑曲线显示
+            showAllSymbol: true,
+            symbol: 'circle',
+            symbolSize: 6,
+            lineStyle: {
+              normal: {
+                color: '#fff' // 线条颜色
+              }
             },
-            axisTick: {
+            label: {
               show: true,
-              lineStyle: {
-                color: '#ffffff1f'
+              position: 'top',
+              textStyle: {
+                color: '#fff'
               }
             },
-            splitLine: {
-              show: false,
-              lineStyle: {
-                type: 'dashed',
-                color: '#ffffff1f'
-              }
-            }
-          },
-          yAxis: [
-            {
-              type: 'value',
-              axisLabel: {
-                margin: 10,
-                color: '#ffffff63'
-              },
-
-              axisTick: {
-                show: true,
-                lineStyle: {
-                  color: '#ffffff1f'
-                }
-              },
-              splitLine: {
-                show: false,
-                lineStyle: {
-                  type: 'dashed',
-                  color: '#ffffff1f'
-                }
-              },
-              axisLine: {
-                lineStyle: {
-                  color: '#fff',
-                  width: 2
-                }
-              }
-            }
-          ],
-          series: [
-            {
-              name: '产量',
-              type: 'line',
-              smooth: true, //是否平滑曲线显示
-              showAllSymbol: true,
-              symbol: 'circle',
-              symbolSize: 6,
-              lineStyle: {
-                normal: {
-                  color: '#fff' // 线条颜色
-                }
-              },
-              label: {
-                show: true,
-                position: 'top',
-                textStyle: {
-                  color: '#fff'
-                }
-              },
-              itemStyle: {
-                color: 'red',
-                borderColor: '#fff',
-                borderWidth: 3
-              },
-              tooltip: {
-                show: false
-              },
-              areaStyle: {
-                normal: {
-                  color: new echarts.graphic.LinearGradient(
-                    0,
-                    0,
-                    0,
-                    1,
-                    [
-                      {
-                        offset: 0,
-                        color: '#eb64fb'
-                      },
-                      {
-                        offset: 1,
-                        color: '#3fbbff0d'
-                      }
-                    ],
-                    false
-                  )
-                }
-              },
-              data: e.data.map(v => v.timeCount)
-            }
-          ]
-        })
+            itemStyle: {
+              color: 'red',
+              borderColor: '#fff',
+              borderWidth: 3
+            },
+            tooltip: {
+              // show: false,
+            },
+            data: [1, 2, 3]
+          }
+        ]
       })
+
     }
   }
 }
@@ -710,7 +287,7 @@ export default {
 <style lang="less" scoped>
 
 .app-container {
-  background-image: url("../../../assets/board/productionBg1.jpg");
+  background-image: url("../../../assets/board/productionBg1_4.jpg");
   background-repeat: no-repeat;
   background-size: 100% 100%;
   width: 100%;
@@ -744,6 +321,27 @@ export default {
   transform: translate(-50%, -50%);
 }
 
+.time {
+  position: absolute;
+  top: 10%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 1.5vw;
+  color: #eee;
+}
+
+.centerImg {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 30%;
+  height: 23.96vw;
+  background-image: url("../../../assets/board/center.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  transform: translate(-50%, -50%);
+}
+
 .table1 {
   position: absolute;
   top: 14.5%;
@@ -767,35 +365,38 @@ export default {
   top: 14.5%;
   left: 73%;
   width: 23.8%;
-  height: 45.5%;
+  height: 51%;
 }
 
 .chart2 {
+  //position: absolute;
+  //top: 66%;
+  //left: 3.3%;
+  //width: 23.8%;
+  //height: 29%;
+
   position: absolute;
-  top: 66%;
+  top: 14.5%;
   left: 3.3%;
   width: 23.8%;
-  height: 29%;
+  height: 51%;
+  overflow: auto;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 
 }
 
 .chart3 {
   position: absolute;
-  top: 66%;
-  left: 28.4%;
-  width: 43.1%;
-  height: 29%;
+  top: 74%;
+  left: 3.3%;
+  width: 92.8%;
+  height: 21%;
 
 }
 
-.chart4 {
-  position: absolute;
-  top: 66%;
-  left: 73%;
-  width: 23.8%;
-  height: 29%;
-
-}
 
 .state {
   position: absolute;
@@ -807,4 +408,26 @@ export default {
   border-radius: 50%;
   background-color: #ffff00;
 }
+
+.status {
+  position: absolute;
+  top: 16%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 1.5vw;
+  color: #eee;
+}
+
+.item {
+  position: relative;
+  width: 100%;
+  height: 5vw;
+  border-bottom: 1px solid #ccc2;
+
+  .block {
+    position: absolute;
+    color: #ccc;
+    transform: translateY(-50%);
+  }
+}
 </style>
diff --git a/hw-ui/src/views/board/production/secondFloor_1.vue b/hw-ui/src/views/board/production/secondFloor_1.vue
new file mode 100644
index 00000000..a77f31aa
--- /dev/null
+++ b/hw-ui/src/views/board/production/secondFloor_1.vue
@@ -0,0 +1,439 @@
+<template>
+  <div class="app-container">
+    <div class="headTitle">京源生产监控平台</div>
+    <div class="centerImg"></div>
+    <div class="time">{{
+        time
+      }}
+    </div>
+    <div class="status">
+      <span>3F </span>
+      <span style="color: #67C23A">上升 </span>
+      <span style="color: #F56C6C">出库 </span>
+    </div>
+    <div v-for="(i,k) in title"
+         :style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'"
+         class="title"
+    >
+      {{ i }}
+    </div>
+    <div class="chart1">
+      <Chart key="chart1" ref="chart1"></Chart>
+    </div>
+    <div class="chart2">
+      <div v-for="(i,k) in 10" class="item">
+        <div style="top: 25%;left:5%" class="block">人员{{ k }}</div>
+        <div style="top: 50%;left:5%" class="block">工序：切割</div>
+        <div style="top: 75%;left:5%" class="block">产品计划数量：10000</div>
+        <div style="text-align: right;top: 25%;right:5%" class="block">8888</div>
+        <div style="text-align: right;top: 50%;right:5%" class="block">88%</div>
+        <div style="text-align: right;top: 75%;right:5%;width: 50%;height: 0.8vw" class="block">
+          <el-progress :format="()=>{return ''}" :percentage="88"></el-progress>
+        </div>
+      </div>
+    </div>
+    <div class="chart3">
+      <Chart key="chart3" ref="chart3"></Chart>
+    </div>
+    <div class="chart4">
+      <Chart key="chart4" ref="chart4"></Chart>
+    </div>
+  </div>
+</template>
+
+<script>
+import vueSeamlessScroll from 'vue-seamless-scroll'
+import Chart from '@/components/board/Chart'
+import * as echarts from 'echarts'
+import {
+  deviceTimeCount,
+  dustAnalysis,
+  getDayProduction,
+  getHourProduction, getLineStatus, selectLatestWorkOrder,
+  workOrderProgress
+} from '@/api/board/secondFloorProduction'
+import { parseTime } from '@/utils/ruoyi'
+
+const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
+export default {
+  name: 'Board1',
+  components: {
+    vueSeamlessScroll,
+    Chart
+  },
+  data() {
+    return {
+      LineStatus: true,
+      topData: {
+        planAmount: [0, 0, 0, 0],
+        completeAmount: [0, 0, 0, 0],
+        diff: [0, 0, 0, 0]
+      },
+      time: parseTime(new Date(), '{y}-{m}-{d} 星期{a} {h}:{i}:{s}'),
+      title: [
+        '工序生产进度',
+        '工序名称对比',
+        '七日产量对比',
+        ' ',
+        ' ',
+        ' ',
+        ' ',
+        ' ',
+        ' '
+      ],
+      titlePosition: [
+        {
+          top: 11.3,
+          left: 5.5
+        },
+        {
+          top: 11.3,
+          left: 75
+        },
+        {
+          top: 70.3,
+          left: 5.5
+        },
+        {
+          top: 63,
+          left: 30.5
+        },
+        {
+          top: 63,
+          left: 75
+        },
+        {
+          top: 11.3,
+          left: 30.5
+        },
+        {
+          top: 11.3,
+          left: 45
+        },
+        {
+          top: 11.3,
+          left: 59.5
+        },
+        {
+          top: 25,
+          left: 44
+        }
+      ],
+      scrollTableOption: {
+        step: 0.5, // 数值越大速度滚动越快
+        limitMoveNum: 22, // 开始无缝滚动的数据量 this.dataList.length
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 0
+      },
+      scrollTableData: []
+    }
+  },
+  mounted() {
+    setInterval(() => {
+      this.time = parseTime(new Date(), '{y}-{m}-{d} 星期{a} {h}:{i}:{s}')
+    }, 1000)
+    this.getData()
+
+    window.onresize = () => {
+      this.$refs.chart1.chart.resize()
+      this.$refs.chart3.chart.resize()
+    }
+  },
+  methods: {
+    getData() {
+      workOrderProgress().then(e => {
+        this.scrollTableData = e.data.map((v, k) => {
+          return {
+            no: k + 1,
+            orderCode: v.orderCode,
+            planAmount: v.planAmount,
+            completeAmount: v.completeAmount,
+            quantityAmount: parseFloat(v.planAmount) - parseFloat(v.completeAmount),
+            finishingRate: parseFloat(v.completeAmount) === 0 ? 0 : (parseFloat(v.completeAmount) / parseFloat(v.completeAmount)) * 100
+          }
+        })
+      })
+      this.$refs.chart1.setData({
+        tooltip: {},
+        radar: {
+          indicator: [
+            { name: '打磨', max: 6500 },
+            { name: '折弯', max: 16000 },
+            { name: '组装', max: 30000 },
+            { name: '下料', max: 38000 },
+            { name: '机加', max: 52000 },
+            { name: '1', max: 25000 }
+          ]
+        },
+        series: [
+          {
+            name: '时间',
+            type: 'radar',
+            // areaStyle: {normal: {}},
+            data: [
+              {
+                value: [4300, 10000, 28000, 35000, 50000, 19000],
+                name: '时间'
+              }
+            ]
+          }
+        ]
+      })
+      this.$refs.chart3.setData({
+        grid: {
+          top: 30,
+          left: '2%',
+          right: '5%',
+          bottom: '2%',
+          containLabel: true
+        },
+        legend: {
+          textStyle: {
+            color: '#fff'
+          }
+        },
+
+        tooltip: {
+          trigger: 'axis'
+        },
+        xAxis: {
+          type: 'category',
+          data: [1, 2, 3],
+          axisLabel: {
+            margin: 10,
+            color: '#ffffff63'
+          },
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: true,
+            lineStyle: {
+              color: '#ffffff1f'
+            }
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: 'dashed',
+              color: '#ffffff1f'
+            }
+          }
+        },
+        yAxis: [
+          {
+            type: 'value',
+            axisLabel: {
+              margin: 10,
+              color: '#ffffff63'
+            },
+
+            axisTick: {
+              show: true,
+              lineStyle: {
+                color: '#ffffff1f'
+              }
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                type: 'dashed',
+                color: '#ffffff1f'
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#fff',
+                width: 2
+              }
+            }
+          }
+        ],
+        series: [
+          {
+            name: '1',
+            type: 'line',
+            smooth: true, //是否平滑曲线显示
+            showAllSymbol: true,
+            symbol: 'circle',
+            symbolSize: 6,
+            lineStyle: {
+              normal: {
+                color: '#fff' // 线条颜色
+              }
+            },
+            label: {
+              show: true,
+              position: 'top',
+              textStyle: {
+                color: '#fff'
+              }
+            },
+            itemStyle: {
+              color: 'red',
+              borderColor: '#fff',
+              borderWidth: 3
+            },
+            tooltip: {
+              // show: false,
+            },
+            data: [1, 2, 3]
+          }
+        ]
+      })
+
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+
+.app-container {
+  background-image: url("../../../assets/board/productionBg1_1.jpg");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.headTitle {
+  position: absolute;
+  top: 5%;
+  left: 50%;
+  transform: translate(-50%, -100%);
+  font-size: 1.5vw;
+  color: #d6eaed;
+  letter-spacing: 10px;
+}
+
+.title {
+  position: absolute;
+  transform: translateY(-50%);
+  color: #dddddd;
+  font-size: 1vw;
+  letter-spacing: 2px;
+}
+
+.num1 {
+  position: absolute;
+  font-size: 2vw;
+  transform: translate(-50%, -50%);
+}
+
+.time {
+  position: absolute;
+  top: 10%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 1.5vw;
+  color: #eee;
+}
+
+.centerImg {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 30%;
+  height: 23.96vw;
+  background-image: url("../../../assets/board/center.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  transform: translate(-50%, -50%);
+}
+
+.table1 {
+  position: absolute;
+  top: 14.5%;
+  left: 3.3%;
+  width: 23.8%;
+  height: 45.5%;
+  color: #fff;
+  font-size: 0.8vw
+}
+
+.scrollTableItem {
+  display: inline-block;
+  width: calc(100% / 6);
+  text-align: center;
+  padding: 4px 0;
+  color: #fff9
+}
+
+.chart1 {
+  position: absolute;
+  top: 14.5%;
+  left: 73%;
+  width: 23.8%;
+  height: 51%;
+}
+
+.chart2 {
+  //position: absolute;
+  //top: 66%;
+  //left: 3.3%;
+  //width: 23.8%;
+  //height: 29%;
+
+  position: absolute;
+  top: 14.5%;
+  left: 3.3%;
+  width: 23.8%;
+  height: 51%;
+  overflow: auto;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+}
+
+.chart3 {
+  position: absolute;
+  top: 74%;
+  left: 3.3%;
+  width: 92.8%;
+  height: 21%;
+
+}
+
+
+.state {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  top: 25%;
+  left: 50%;
+  width: 1.5vw;
+  height: 1.5vw;
+  border-radius: 50%;
+  background-color: #ffff00;
+}
+
+.status {
+  position: absolute;
+  top: 16%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 1.5vw;
+  color: #eee;
+}
+
+.item {
+  position: relative;
+  width: 100%;
+  height: 5vw;
+  border-bottom: 1px solid #ccc2;
+
+  .block {
+    position: absolute;
+    color: #ccc;
+    transform: translateY(-50%);
+  }
+}
+</style>
diff --git a/hw-ui/src/views/board/production/secondFloor_2.vue b/hw-ui/src/views/board/production/secondFloor_2.vue
new file mode 100644
index 00000000..68d3f1b4
--- /dev/null
+++ b/hw-ui/src/views/board/production/secondFloor_2.vue
@@ -0,0 +1,810 @@
+<template>
+  <div class="app-container">
+    <div class="headTitle">京源生产监控平台</div>
+    <div v-for="(i,k) in title"
+         :style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'"
+         class="title"
+    >
+      {{ i }}
+    </div>
+    <div class="table1">
+      <div style="background-color: #094170">
+        <div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 12%">
+          编号
+        </div>
+        <div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 36%">
+          生产工单
+        </div>
+        <div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 14%">
+          计划数量
+        </div>
+        <div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 14%">
+          实际数量
+        </div>
+        <div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 12%">
+          差异值
+        </div>
+        <div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 12%">
+          完成率
+        </div>
+      </div>
+      <vue-seamless-scroll
+        :class-option="scrollTableOption"
+        :data="scrollTableData"
+        class="case-item"
+        style="height: calc(100% - 30px);overflow: hidden;"
+      >
+        <div
+          v-for="(item, index) in scrollTableData"
+          :key="index"
+        >
+          <div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
+            <div
+              class="scrollTableItem" style="width: 12%"
+            >
+              {{ item.no }}
+            </div>
+            <div
+              class="scrollTableItem" style="width:36%"
+            >
+              {{ item.orderCode }}
+            </div>
+            <div
+              class="scrollTableItem" style="width: 14%"
+            >
+              {{ item.planAmount }}
+            </div>
+            <div
+              class="scrollTableItem" style="width: 14%"
+            >
+              {{ item.completeAmount }}
+            </div>
+            <div
+              class="scrollTableItem" style="width: 12%"
+            >
+              {{ item.quantityAmount }}
+            </div>
+            <div
+              class="scrollTableItem" style="width: 12%"
+            >
+              {{ item.finishingRate }}%
+            </div>
+          </div>
+        </div>
+      </vue-seamless-scroll>
+    </div>
+    <div class="chart1">
+      <Chart key="chart1" ref="chart1"></Chart>
+    </div>
+    <div class="chart2">
+      <Chart key="chart2" ref="chart2"></Chart>
+    </div>
+    <div class="chart3">
+      <Chart key="chart3" ref="chart3"></Chart>
+    </div>
+    <div class="chart4">
+      <Chart key="chart4" ref="chart4"></Chart>
+    </div>
+    <div class="num1 num1_1" style="top: 17%;left: 31.1%;color:#5fc2f2">{{ topData.planAmount[0] }}</div>
+    <div class="num1 num1_2" style="top: 17%;left:34.1%;color:#5fc2f2">{{ topData.planAmount[1] }}</div>
+    <div class="num1 num1_3" style="top: 17%;left:37%;color:#5fc2f2">{{ topData.planAmount[2] }}</div>
+    <div class="num1 num1_4" style="top: 17%;left:40%;color:#5fc2f2">{{ topData.planAmount[3] }}</div>
+    <div class="num1 num1_5" style="top: 17%;left:45.6%;color:#59ee7b">{{ topData.completeAmount[0] }}</div>
+    <div class="num1 num1_6" style="top: 17%;left:48.6%;color:#59ee7b">{{ topData.completeAmount[1] }}</div>
+    <div class="num1 num1_7" style="top: 17%;left:51.5%;color:#59ee7b">{{ topData.completeAmount[2] }}</div>
+    <div class="num1 num1_8" style="top: 17%;left:54.5%;color:#59ee7b">{{ topData.completeAmount[3] }}</div>
+    <div class="num1 num1_9" style="top: 17%;left:60%;color:#f60008">{{ topData.diff[0] }}</div>
+    <div class="num1 num1_10" style="top: 17%;left:63%;color:#f60008">{{ topData.diff[1] }}</div>
+    <div class="num1 num1_11" style="top: 17%;left:65.9%;color:#f60008">{{ topData.diff[2] }}</div>
+    <div class="num1 num1_12" style="top: 17%;left:68.9%;color:#f60008">{{ topData.diff[3] }}</div>
+    <div class="state" :style="`background-color:${LineStatus?'#ffff00':'#ff0000'}`"></div>
+  </div>
+</template>
+
+<script>
+import vueSeamlessScroll from 'vue-seamless-scroll'
+import Chart from '@/components/board/Chart'
+import * as echarts from 'echarts'
+import {
+  deviceTimeCount,
+  dustAnalysis,
+  getDayProduction,
+  getHourProduction, getLineStatus, selectLatestWorkOrder,
+  workOrderProgress
+} from '@/api/board/secondFloorProduction'
+import { parseTime } from '@/utils/ruoyi'
+
+const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
+export default {
+  name: 'Board1',
+  components: {
+    vueSeamlessScroll,
+    Chart
+  },
+  data() {
+    return {
+      LineStatus: true,
+      topData: {
+        planAmount: [0, 0, 0, 0],
+        completeAmount: [0, 0, 0, 0],
+        diff: [0, 0, 0, 0]
+      },
+      title: [
+        '工单计划',
+        '小时产量',
+        '七日产量对比',
+        '粉尘数据走势',
+        '设备时长统计',
+        '计划数量:',
+        '完成数量:',
+        '差异值:',
+        '产线状态:'
+      ],
+      titlePosition: [
+        {
+          top: 11.3,
+          left: 5.5
+        },
+        {
+          top: 11.3,
+          left: 75
+        },
+        {
+          top: 63,
+          left: 5.5
+        },
+        {
+          top: 63,
+          left: 30.5
+        },
+        {
+          top: 63,
+          left: 75
+        },
+        {
+          top: 11.3,
+          left: 30.5
+        },
+        {
+          top: 11.3,
+          left: 45
+        },
+        {
+          top: 11.3,
+          left: 59.5
+        },
+        {
+          top: 25,
+          left: 44
+        }
+      ],
+      scrollTableOption: {
+        step: 0.5, // 数值越大速度滚动越快
+        limitMoveNum: 22, // 开始无缝滚动的数据量 this.dataList.length
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 0
+      },
+      scrollTableData: []
+    }
+  },
+  mounted() {
+    this.getData()
+
+    window.onresize = () => {
+      this.$refs.chart1.chart.resize()
+      this.$refs.chart2.chart.resize()
+      this.$refs.chart3.chart.resize()
+      this.$refs.chart4.chart.resize()
+    }
+  },
+  methods: {
+    getData() {
+      workOrderProgress().then(e => {
+        this.scrollTableData = e.data.map((v, k) => {
+          return {
+            no: k + 1,
+            orderCode: v.orderCode,
+            planAmount: v.planAmount,
+            completeAmount: v.completeAmount,
+            quantityAmount: parseFloat(v.planAmount) - parseFloat(v.completeAmount),
+            finishingRate: parseFloat(v.completeAmount) === 0 ? 0 : (parseFloat(v.completeAmount) / parseFloat(v.completeAmount)) * 100
+          }
+        })
+      })
+      selectLatestWorkOrder().then(e => {
+        this.topData.planAmount = [...[0, 0, 0, 0], ...(e.data.planAmount || 0).toString().split('')].slice(-4)
+        this.topData.completeAmount = [...[0, 0, 0, 0], ...(e.data.completeAmount || 0).toString().split('')].slice(-4)
+        this.topData.diff = [...[0, 0, 0, 0], ...Math.abs((parseFloat(e.data.planAmount) - parseFloat(e.data.completeAmount)) || 0).toString().split('')].slice(-4)
+      })
+      getLineStatus().then(e => {
+        this.LineStatus = e.msg === 'True'
+      })
+      getHourProduction().then(e => {
+        this.$refs.chart1.setData({
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              // 坐标轴指示器，坐标轴触发有效
+              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+            }
+          },
+          grid: {
+            left: '0',
+            right: '4%',
+            bottom: '0',
+            top: 20,
+            containLabel: true
+          },
+          xAxis: {
+            type: 'category',
+            data: e.data.map(v => v.hour),
+            axisLine: {
+              lineStyle: {
+                color: 'white'
+              }
+            },
+            axisLabel: {
+              // interval: 0,
+              // rotate: 40,
+              textStyle: {
+                fontFamily: 'Microsoft YaHei'
+              }
+            }
+          },
+
+          yAxis: {
+            type: 'value',
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: 'white'
+              }
+            },
+            splitLine: {
+              show: false
+            },
+            axisLabel: {}
+          },
+          series: [
+            {
+              name: '数量',
+              label: {
+                normal: {
+                  show: true,
+                  position: 'top',
+                  textStyle: {
+                    color: '#a8aab0',
+                    fontStyle: 'normal',
+                    fontFamily: '微软雅黑',
+                    fontSize: 0.75 * vw
+                  }
+                }
+              },
+              type: 'bar',
+              barWidth: '30%',
+              barMaxWidth: 50,
+              itemStyle: {
+                normal: {
+                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    {
+                      offset: 0,
+                      color: '#39ffff'
+                    },
+                    {
+                      offset: 1,
+                      color: '#5affa6'
+                    }
+                  ])
+                }
+              },
+              data: e.data.map(v => v.amount)
+            }
+          ]
+        })
+      })
+      getDayProduction().then(e => {
+        this.$refs.chart2.setData({
+          grid: {
+            top: 30,
+            left: '2%',
+            right: '5%',
+            bottom: '2%',
+            containLabel: true
+          },
+          xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: e.data.map(v => v.day),
+            axisLabel: {
+              margin: 10,
+              color: '#ffffff63'
+            },
+            axisLine: {
+              show: false
+            },
+            axisTick: {
+              show: true,
+              lineStyle: {
+                color: '#ffffff1f'
+              }
+            },
+            splitLine: {
+              show: false,
+              lineStyle: {
+                type: 'dashed',
+                color: '#ffffff1f'
+              }
+            }
+          },
+          yAxis: [
+            {
+              type: 'value',
+              axisLabel: {
+                margin: 10,
+                color: '#ffffff63'
+              },
+
+              axisTick: {
+                show: true,
+                lineStyle: {
+                  color: '#ffffff1f'
+                }
+              },
+              splitLine: {
+                show: false,
+                lineStyle: {
+                  type: 'dashed',
+                  color: '#ffffff1f'
+                }
+              },
+              axisLine: {
+                lineStyle: {
+                  color: '#fff',
+                  width: 2
+                }
+              }
+            }
+          ],
+          series: [
+            {
+              name: '产量',
+              type: 'line',
+              smooth: true, //是否平滑曲线显示
+              showAllSymbol: true,
+              symbol: 'circle',
+              symbolSize: 6,
+              lineStyle: {
+                normal: {
+                  color: '#fff' // 线条颜色
+                }
+              },
+              label: {
+                show: true,
+                position: 'top',
+                textStyle: {
+                  color: '#fff'
+                }
+              },
+              itemStyle: {
+                color: 'red',
+                borderColor: '#fff',
+                borderWidth: 3
+              },
+              tooltip: {
+                show: false
+              },
+              areaStyle: {
+                normal: {
+                  color: new echarts.graphic.LinearGradient(
+                    0,
+                    0,
+                    0,
+                    1,
+                    [
+                      {
+                        offset: 0,
+                        color: '#eb64fb'
+                      },
+                      {
+                        offset: 1,
+                        color: '#3fbbff0d'
+                      }
+                    ],
+                    false
+                  )
+                }
+              },
+              data: e.data.map(v => v.instock_amount)
+            }
+          ]
+        })
+      })
+      dustAnalysis().then(e => {
+        this.$refs.chart3.setData({
+          grid: {
+            top: 30,
+            left: '2%',
+            right: '5%',
+            bottom: '2%',
+            containLabel: true
+          },
+          legend: {
+            textStyle: {
+              color: '#fff'
+            }
+          },
+
+          tooltip: {
+            trigger: 'axis'
+          },
+          xAxis: {
+            type: 'category',
+            data: e.data.map(v => parseTime(v.recodeTime)),
+            axisLabel: {
+              margin: 10,
+              color: '#ffffff63'
+            },
+            axisLine: {
+              show: false
+            },
+            axisTick: {
+              show: true,
+              lineStyle: {
+                color: '#ffffff1f'
+              }
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                type: 'dashed',
+                color: '#ffffff1f'
+              }
+            }
+          },
+          yAxis: [
+            {
+              type: 'value',
+              axisLabel: {
+                margin: 10,
+                color: '#ffffff63'
+              },
+
+              axisTick: {
+                show: true,
+                lineStyle: {
+                  color: '#ffffff1f'
+                }
+              },
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  type: 'dashed',
+                  color: '#ffffff1f'
+                }
+              },
+              axisLine: {
+                lineStyle: {
+                  color: '#fff',
+                  width: 2
+                }
+              }
+            }
+          ],
+          series: [
+            {
+              name: 'pm1',
+              type: 'line',
+              smooth: true, //是否平滑曲线显示
+              showAllSymbol: true,
+              symbol: 'circle',
+              symbolSize: 6,
+              lineStyle: {
+                normal: {
+                  color: '#fff' // 线条颜色
+                }
+              },
+              label: {
+                show: true,
+                position: 'top',
+                textStyle: {
+                  color: '#fff'
+                }
+              },
+              itemStyle: {
+                color: 'red',
+                borderColor: '#fff',
+                borderWidth: 3
+              },
+              tooltip: {
+                // show: false,
+              },
+              data: e.data.map(v => v.pm1)
+            },
+            {
+              name: 'pm2',
+              type: 'line',
+              smooth: true, //是否平滑曲线显示
+              showAllSymbol: true,
+              symbol: 'circle',
+              symbolSize: 6,
+              lineStyle: {
+                normal: {
+                  color: '#f0f' // 线条颜色
+                }
+              },
+              label: {
+                show: true,
+                position: 'top',
+                textStyle: {
+                  color: '#fff'
+                }
+              },
+              itemStyle: {
+                color: 'red',
+                borderColor: '#fff',
+                borderWidth: 3
+              },
+              tooltip: {
+                // show: false,
+              },
+              data: e.data.map(v => v.pm2)
+            },
+            {
+              name: 'pm10',
+              type: 'line',
+              smooth: true, //是否平滑曲线显示
+              showAllSymbol: true,
+              symbol: 'circle',
+              symbolSize: 6,
+              lineStyle: {
+                normal: {
+                  color: '#ff0' // 线条颜色
+                }
+              },
+              label: {
+                show: true,
+                position: 'top',
+                textStyle: {
+                  color: '#fff'
+                }
+              },
+              itemStyle: {
+                color: 'red',
+                borderColor: '#fff',
+                borderWidth: 3
+              },
+              tooltip: {
+                // show: false,
+              },
+              data: e.data.map(v => v.pm10)
+            }
+          ]
+        })
+      })
+      deviceTimeCount().then(e => {
+        console.log(e)
+        this.$refs.chart4.setData({
+          grid: {
+            top: 30,
+            left: '2%',
+            right: '5%',
+            bottom: '2%',
+            containLabel: true
+          },
+          xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: e.data.map(v => parseTime(v.hour)),
+            axisLabel: {
+              margin: 10,
+              color: '#ffffff63'
+            },
+            axisLine: {
+              show: false
+            },
+            axisTick: {
+              show: true,
+              lineStyle: {
+                color: '#ffffff1f'
+              }
+            },
+            splitLine: {
+              show: false,
+              lineStyle: {
+                type: 'dashed',
+                color: '#ffffff1f'
+              }
+            }
+          },
+          yAxis: [
+            {
+              type: 'value',
+              axisLabel: {
+                margin: 10,
+                color: '#ffffff63'
+              },
+
+              axisTick: {
+                show: true,
+                lineStyle: {
+                  color: '#ffffff1f'
+                }
+              },
+              splitLine: {
+                show: false,
+                lineStyle: {
+                  type: 'dashed',
+                  color: '#ffffff1f'
+                }
+              },
+              axisLine: {
+                lineStyle: {
+                  color: '#fff',
+                  width: 2
+                }
+              }
+            }
+          ],
+          series: [
+            {
+              name: '产量',
+              type: 'line',
+              smooth: true, //是否平滑曲线显示
+              showAllSymbol: true,
+              symbol: 'circle',
+              symbolSize: 6,
+              lineStyle: {
+                normal: {
+                  color: '#fff' // 线条颜色
+                }
+              },
+              label: {
+                show: true,
+                position: 'top',
+                textStyle: {
+                  color: '#fff'
+                }
+              },
+              itemStyle: {
+                color: 'red',
+                borderColor: '#fff',
+                borderWidth: 3
+              },
+              tooltip: {
+                show: false
+              },
+              areaStyle: {
+                normal: {
+                  color: new echarts.graphic.LinearGradient(
+                    0,
+                    0,
+                    0,
+                    1,
+                    [
+                      {
+                        offset: 0,
+                        color: '#eb64fb'
+                      },
+                      {
+                        offset: 1,
+                        color: '#3fbbff0d'
+                      }
+                    ],
+                    false
+                  )
+                }
+              },
+              data: e.data.map(v => v.timeCount)
+            }
+          ]
+        })
+      })
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+
+.app-container {
+  background-image: url("../../../assets/board/productionBg1.jpg");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.headTitle {
+  position: absolute;
+  top: 5%;
+  left: 50%;
+  transform: translate(-50%, -100%);
+  font-size: 1.5vw;
+  color: #d6eaed;
+  letter-spacing: 10px;
+}
+
+.title {
+  position: absolute;
+  transform: translateY(-50%);
+  color: #dddddd;
+  font-size: 1vw;
+  letter-spacing: 2px;
+}
+
+.num1 {
+  position: absolute;
+  font-size: 2vw;
+  transform: translate(-50%, -50%);
+}
+
+.table1 {
+  position: absolute;
+  top: 14.5%;
+  left: 3.3%;
+  width: 23.8%;
+  height: 45.5%;
+  color: #fff;
+  font-size: 0.8vw
+}
+
+.scrollTableItem {
+  display: inline-block;
+  width: calc(100% / 6);
+  text-align: center;
+  padding: 4px 0;
+  color: #fff9
+}
+
+.chart1 {
+  position: absolute;
+  top: 14.5%;
+  left: 73%;
+  width: 23.8%;
+  height: 45.5%;
+}
+
+.chart2 {
+  position: absolute;
+  top: 66%;
+  left: 3.3%;
+  width: 23.8%;
+  height: 29%;
+
+}
+
+.chart3 {
+  position: absolute;
+  top: 66%;
+  left: 28.4%;
+  width: 43.1%;
+  height: 29%;
+
+}
+
+.chart4 {
+  position: absolute;
+  top: 66%;
+  left: 73%;
+  width: 23.8%;
+  height: 29%;
+
+}
+
+.state {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  top: 25%;
+  left: 50%;
+  width: 1.5vw;
+  height: 1.5vw;
+  border-radius: 50%;
+  background-color: #ffff00;
+}
+</style>
diff --git a/hw-ui/src/views/board/production/secondFloor_4.vue b/hw-ui/src/views/board/production/secondFloor_4.vue
new file mode 100644
index 00000000..31a958dc
--- /dev/null
+++ b/hw-ui/src/views/board/production/secondFloor_4.vue
@@ -0,0 +1,433 @@
+<template>
+  <div class="app-container">
+    <div class="headTitle">京源生产监控平台</div>
+    <div class="time">{{
+        time
+      }}
+    </div>
+    <div v-for="(i,k) in title"
+         :style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'"
+         class="title"
+    >
+      {{ i }}
+    </div>
+    <div class="chart1">
+      <Chart key="chart1" ref="chart1"></Chart>
+    </div>
+    <div class="chart2">
+      <div v-for="(i,k) in 10" class="item">
+        <div style="top: 25%;left:5%" class="block">人员{{ k }}</div>
+        <div style="top: 50%;left:5%" class="block">工序：切割</div>
+        <div style="top: 75%;left:5%" class="block">产品计划数量：10000</div>
+        <div style="text-align: right;top: 25%;right:5%" class="block">8888</div>
+        <div style="text-align: right;top: 50%;right:5%" class="block">88%</div>
+        <div style="text-align: right;top: 75%;right:5%;width: 50%;height: 0.8vw" class="block">
+          <el-progress :format="()=>{return ''}" :percentage="88"></el-progress>
+        </div>
+      </div>
+    </div>
+    <div class="chart3">
+      <Chart key="chart3" ref="chart3"></Chart>
+    </div>
+    <div class="chart4">
+      <Chart key="chart4" ref="chart4"></Chart>
+    </div>
+  </div>
+</template>
+
+<script>
+import vueSeamlessScroll from 'vue-seamless-scroll'
+import Chart from '@/components/board/Chart'
+import * as echarts from 'echarts'
+import {
+  deviceTimeCount,
+  dustAnalysis,
+  getDayProduction,
+  getHourProduction, getLineStatus, selectLatestWorkOrder,
+  workOrderProgress
+} from '@/api/board/secondFloorProduction'
+import { parseTime } from '@/utils/ruoyi'
+
+const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
+export default {
+  name: 'Board1',
+  components: {
+    vueSeamlessScroll,
+    Chart
+  },
+  data() {
+    return {
+      LineStatus: true,
+      topData: {
+        planAmount: [0, 0, 0, 0],
+        completeAmount: [0, 0, 0, 0],
+        diff: [0, 0, 0, 0]
+      },
+      time: parseTime(new Date(), '{y}-{m}-{d} 星期{a} {h}:{i}:{s}'),
+      title: [
+        '工序生产进度',
+        '工序名称对比',
+        '七日产量对比',
+        ' ',
+        ' ',
+        ' ',
+        ' ',
+        ' ',
+        ' '
+      ],
+      titlePosition: [
+        {
+          top: 11.3,
+          left: 5.5
+        },
+        {
+          top: 11.3,
+          left: 75
+        },
+        {
+          top: 70.3,
+          left: 5.5
+        },
+        {
+          top: 63,
+          left: 30.5
+        },
+        {
+          top: 63,
+          left: 75
+        },
+        {
+          top: 11.3,
+          left: 30.5
+        },
+        {
+          top: 11.3,
+          left: 45
+        },
+        {
+          top: 11.3,
+          left: 59.5
+        },
+        {
+          top: 25,
+          left: 44
+        }
+      ],
+      scrollTableOption: {
+        step: 0.5, // 数值越大速度滚动越快
+        limitMoveNum: 22, // 开始无缝滚动的数据量 this.dataList.length
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 0
+      },
+      scrollTableData: []
+    }
+  },
+  mounted() {
+    setInterval(() => {
+      this.time = parseTime(new Date(), '{y}-{m}-{d} 星期{a} {h}:{i}:{s}')
+    }, 1000)
+    this.getData()
+
+    window.onresize = () => {
+      this.$refs.chart1.chart.resize()
+      this.$refs.chart3.chart.resize()
+    }
+  },
+  methods: {
+    getData() {
+      workOrderProgress().then(e => {
+        this.scrollTableData = e.data.map((v, k) => {
+          return {
+            no: k + 1,
+            orderCode: v.orderCode,
+            planAmount: v.planAmount,
+            completeAmount: v.completeAmount,
+            quantityAmount: parseFloat(v.planAmount) - parseFloat(v.completeAmount),
+            finishingRate: parseFloat(v.completeAmount) === 0 ? 0 : (parseFloat(v.completeAmount) / parseFloat(v.completeAmount)) * 100
+          }
+        })
+      })
+      this.$refs.chart1.setData({
+        tooltip: {},
+        radar: {
+          indicator: [
+            { name: '打磨', max: 6500 },
+            { name: '折弯', max: 16000 },
+            { name: '组装', max: 30000 },
+            { name: '下料', max: 38000 },
+            { name: '机加', max: 52000 },
+            { name: '1', max: 25000 }
+          ]
+        },
+        series: [
+          {
+            name: '时间',
+            type: 'radar',
+            // areaStyle: {normal: {}},
+            data: [
+              {
+                value: [4300, 10000, 28000, 35000, 50000, 19000],
+                name: '时间'
+              }
+            ]
+          }
+        ]
+      })
+      this.$refs.chart3.setData({
+        grid: {
+          top: 30,
+          left: '2%',
+          right: '5%',
+          bottom: '2%',
+          containLabel: true
+        },
+        legend: {
+          textStyle: {
+            color: '#fff'
+          }
+        },
+
+        tooltip: {
+          trigger: 'axis'
+        },
+        xAxis: {
+          type: 'category',
+          data: [1, 2, 3],
+          axisLabel: {
+            margin: 10,
+            color: '#ffffff63'
+          },
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: true,
+            lineStyle: {
+              color: '#ffffff1f'
+            }
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: 'dashed',
+              color: '#ffffff1f'
+            }
+          }
+        },
+        yAxis: [
+          {
+            type: 'value',
+            axisLabel: {
+              margin: 10,
+              color: '#ffffff63'
+            },
+
+            axisTick: {
+              show: true,
+              lineStyle: {
+                color: '#ffffff1f'
+              }
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                type: 'dashed',
+                color: '#ffffff1f'
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#fff',
+                width: 2
+              }
+            }
+          }
+        ],
+        series: [
+          {
+            name: '1',
+            type: 'line',
+            smooth: true, //是否平滑曲线显示
+            showAllSymbol: true,
+            symbol: 'circle',
+            symbolSize: 6,
+            lineStyle: {
+              normal: {
+                color: '#fff' // 线条颜色
+              }
+            },
+            label: {
+              show: true,
+              position: 'top',
+              textStyle: {
+                color: '#fff'
+              }
+            },
+            itemStyle: {
+              color: 'red',
+              borderColor: '#fff',
+              borderWidth: 3
+            },
+            tooltip: {
+              // show: false,
+            },
+            data: [1, 2, 3]
+          }
+        ]
+      })
+
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+
+.app-container {
+  background-image: url("../../../assets/board/productionBg1_4.jpg");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.headTitle {
+  position: absolute;
+  top: 5%;
+  left: 50%;
+  transform: translate(-50%, -100%);
+  font-size: 1.5vw;
+  color: #d6eaed;
+  letter-spacing: 10px;
+}
+
+.title {
+  position: absolute;
+  transform: translateY(-50%);
+  color: #dddddd;
+  font-size: 1vw;
+  letter-spacing: 2px;
+}
+
+.num1 {
+  position: absolute;
+  font-size: 2vw;
+  transform: translate(-50%, -50%);
+}
+
+.time {
+  position: absolute;
+  top: 10%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 1.5vw;
+  color: #eee;
+}
+
+.centerImg {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 30%;
+  height: 23.96vw;
+  background-image: url("../../../assets/board/center.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  transform: translate(-50%, -50%);
+}
+
+.table1 {
+  position: absolute;
+  top: 14.5%;
+  left: 3.3%;
+  width: 23.8%;
+  height: 45.5%;
+  color: #fff;
+  font-size: 0.8vw
+}
+
+.scrollTableItem {
+  display: inline-block;
+  width: calc(100% / 6);
+  text-align: center;
+  padding: 4px 0;
+  color: #fff9
+}
+
+.chart1 {
+  position: absolute;
+  top: 14.5%;
+  left: 73%;
+  width: 23.8%;
+  height: 51%;
+}
+
+.chart2 {
+  //position: absolute;
+  //top: 66%;
+  //left: 3.3%;
+  //width: 23.8%;
+  //height: 29%;
+
+  position: absolute;
+  top: 14.5%;
+  left: 3.3%;
+  width: 23.8%;
+  height: 51%;
+  overflow: auto;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+}
+
+.chart3 {
+  position: absolute;
+  top: 74%;
+  left: 3.3%;
+  width: 92.8%;
+  height: 21%;
+
+}
+
+
+.state {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  top: 25%;
+  left: 50%;
+  width: 1.5vw;
+  height: 1.5vw;
+  border-radius: 50%;
+  background-color: #ffff00;
+}
+
+.status {
+  position: absolute;
+  top: 16%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 1.5vw;
+  color: #eee;
+}
+
+.item {
+  position: relative;
+  width: 100%;
+  height: 5vw;
+  border-bottom: 1px solid #ccc2;
+
+  .block {
+    position: absolute;
+    color: #ccc;
+    transform: translateY(-50%);
+  }
+}
+</style>
diff --git a/hw-ui/src/views/board/warehouse/fifthFloor.vue b/hw-ui/src/views/board/warehouse/fifthFloor.vue
index 5fe920f6..19c1c8a1 100644
--- a/hw-ui/src/views/board/warehouse/fifthFloor.vue
+++ b/hw-ui/src/views/board/warehouse/fifthFloor.vue
@@ -1,65 +1,13 @@
 <template>
   <div class="app-container">
-    <div class="warehouse"></div>
     <div class="headTitle">京源智能仓储监控平台</div>
+    <div class="img"></div>
     <div v-for="(i,k) in title"
          :style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'"
-         class="title">
+         class="title"
+    >
       {{ i }}
     </div>
-    <div class="table1">
-      <div style="background-color: #1077bc19">
-        <div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
-          任务编号
-        </div>
-        <div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
-          任务类型
-        </div>
-        <div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
-          物料名称
-        </div>
-        <div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
-          库位编号
-        </div>
-        <div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
-          时间
-        </div>
-      </div>
-      <vue-seamless-scroll
-        :class-option="scrollTableOption"
-        :data="scrollTableData"
-        class="case-item"
-        style="height: calc(100% - 30px);overflow: hidden;"
-      >
-        <div
-          v-for="(item, index) in scrollTableData"
-          :key="index"
-        >
-          <div :style='"background-color:" + ((index % 2 === 0)? "#1077bc19":"#1077bc05") '>
-            <div
-              class="scrollTableItem">
-              {{ item.value1 }}
-            </div>
-            <div
-              class="scrollTableItem">
-              {{ item.value2 }}
-            </div>
-            <div
-              class="scrollTableItem">
-              {{ item.value3 }}
-            </div>
-            <div
-              class="scrollTableItem">
-              {{ item.value4 }}
-            </div>
-            <div
-              class="scrollTableItem">
-              {{ item.value5 }}
-            </div>
-          </div>
-        </div>
-      </vue-seamless-scroll>
-    </div>
     <div class="chart1">
       <HighChart key="chart1" ref="chart1"></HighChart>
     </div>
@@ -72,33 +20,44 @@
     <div class="chart4">
       <HighChart key="chart4" ref="chart4"></HighChart>
     </div>
-    <div class="chart5">
-      <Chart key="chart5" ref="chart5"></Chart>
-    </div>
-    <div class="chart6">
-      <Chart key="chart6" ref="chart6"></Chart>
-    </div>
 
-    <div class="num1 num1_1" style="top: 11.9%;left: 17.4%;color:#5fc2f2">1</div>
-    <div class="num1 num1_2" style="top: 11.9%;left:20.9%;color:#5fc2f2">0</div>
-    <div class="num1 num1_3" style="top: 11.9%;left:24.4%;color:#5fc2f2">0</div>
-    <div class="num1 num1_4" style="top: 11.9%;left:27.9%;color:#5fc2f2">0</div>
-    <div class="num1 num1_5" style="top: 11.9%;left:50%;color:#59ee7b">1</div>
-    <div class="num1 num1_6" style="top: 11.9%;left:53.5%;color:#59ee7b">0</div>
-    <div class="num1 num1_7" style="top: 11.9%;left:57%;color:#59ee7b">0</div>
-    <div class="num1 num1_8" style="top: 11.9%;left:60.5%;color:#59ee7b">0</div>
-    <div class="num1 num1_9" style="top: 11.9%;left:82.5%;color:#f60008">1</div>
-    <div class="num1 num1_10" style="top: 11.9%;left:86.1%;color:#f60008">0</div>
-    <div class="num1 num1_11" style="top: 11.9%;left:89.6%;color:#f60008">0</div>
-    <div class="num1 num1_12" style="top: 11.9%;left:93.1%;color:#f60008">0</div>
+    <div class="num1 num1_1" style="top: 11.9%;left: 13.4%;color:#5fc2f2">{{ topData.furawInStock[0] }}</div>
+    <div class="num1 num1_2" style="top: 11.9%;left:15.7%;color:#5fc2f2">{{ topData.furawInStock[1] }}</div>
+    <div class="num1 num1_3" style="top: 11.9%;left:18%;color:#5fc2f2">{{ topData.furawInStock[2] }}</div>
+    <div class="num1 num1_4" style="top: 11.9%;left:20.4%;color:#5fc2f2">{{ topData.furawInStock[3] }}</div>
+
+    <div class="num1 num1_5" style="top: 11.9%;left:32.2%;color:#59ee7b">{{ topData.productInStock[0] }}</div>
+    <div class="num1 num1_6" style="top: 11.9%;left:34.6%;color:#59ee7b">{{ topData.productInStock[1] }}</div>
+    <div class="num1 num1_7" style="top: 11.9%;left:36.9%;color:#59ee7b">{{ topData.productInStock[2] }}</div>
+    <div class="num1 num1_8" style="top: 11.9%;left:39.2%;color:#59ee7b">{{ topData.productInStock[3] }}</div>
+
+    <div class="num1 num1_9" style="top: 11.9%;left:51.1%;color:#f60008">{{ topData.productOutStock[0] }}</div>
+    <div class="num1 num1_10" style="top: 11.9%;left:53.4%;color:#f60008">{{ topData.productOutStock[1] }}</div>
+    <div class="num1 num1_11" style="top: 11.9%;left:55.7%;color:#f60008">{{ topData.productOutStock[2] }}</div>
+    <div class="num1 num1_12" style="top: 11.9%;left:58.1%;color:#f60008">{{ topData.productOutStock[3] }}</div>
+
+    <div class="num1 num1_13" style="top: 11.9%;left:69.9%;color:#59ee7b">{{ topData.rawInStock[0] }}</div>
+    <div class="num1 num1_14" style="top: 11.9%;left:72.3%;color:#59ee7b">{{ topData.rawInStock[1] }}</div>
+    <div class="num1 num1_15" style="top: 11.9%;left:74.6%;color:#59ee7b">{{ topData.rawInStock[2] }}</div>
+    <div class="num1 num1_16" style="top: 11.9%;left:76.9%;color:#59ee7b">{{ topData.rawInStock[3] }}</div>
+
+    <div class="num1 num1_17" style="top: 11.9%;left:88.7%;color:#f60008">{{ topData.rawOutStock[0] }}</div>
+    <div class="num1 num1_18" style="top: 11.9%;left:91%;color:#f60008">{{ topData.rawOutStock[1] }}</div>
+    <div class="num1 num1_19" style="top: 11.9%;left:93.4%;color:#f60008">{{ topData.rawOutStock[2] }}</div>
+    <div class="num1 num1_20" style="top: 11.9%;left:95.7%;color:#f60008">{{ topData.rawOutStock[3] }}</div>
+
   </div>
 </template>
 
+<!--// 柱状图 每个烘房耗电量 x轴 保留 - 后的 y轴 expend-->
+<!--  质量接口 柱状图 +折线图 合格率和数量   -->
+
 <script>
-import vueSeamlessScroll from "vue-seamless-scroll";
+import vueSeamlessScroll from 'vue-seamless-scroll'
 import Chart from '@/components/board/Chart'
 import HighChart from '@/components/board/HighChart'
 import * as echarts from 'echarts'
+import { fifthPanake, locationCount } from '@/api/board/fifthFloorWarehouse'
 
 const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
 export default {
@@ -110,666 +69,411 @@ export default {
   },
   data() {
     return {
+      topData: {
+        furawInStock: [0, 0, 0, 0],
+        productInStock: [0, 0, 0, 0],
+        productOutStock: [0, 0, 0, 0],
+        rawInStock: [0, 0, 0, 0],
+        rawOutStock: [0, 0, 0, 0]
+      },
       title: [
-        '原料库出库数量:',
-        '辅料库出库数量:',
-        '半成品入库数量:',
-        '库存占比',
-        '调度任务',
-        '成品库可用库存占比',
-        '成品库订单库存统计',
+        '原料库入库数量:',
+        '成品入库数量:',
+        '成品出库数量:',
+        '辅料入库数量:',
+        '辅料出库数量:',
+        '库存占比'
       ],
       titlePosition: [
         {
           top: 11.5,
-          left: 7.5
+          left: 3.5
         },
         {
           top: 11.5,
-          left: 40
+          left: 22.5
         },
         {
           top: 11.5,
-          left: 72.5
+          left: 41.3
+        },
+        {
+          top: 11.5,
+          left: 60.3
+        },
+        {
+          top: 11.5,
+          left: 79.1
         },
         {
           top: 19.4,
           left: 5.5
-        },
-        {
-          top: 59.8,
-          left: 5.5
-        },
-        {
-          top: 59.8,
-          left: 37
-        },
-        {
-          top: 59.8,
-          left: 68.5
-        },
-      ],
-      scrollTableOption: {
-        step: 0.5, // 数值越大速度滚动越快
-        limitMoveNum: 22, // 开始无缝滚动的数据量 this.dataList.length
-        hoverStop: true, // 是否开启鼠标悬停stop
-        direction: 1, // 0向下 1向上 2向左 3向右
-        openWatch: true, // 开启数据实时监控刷新dom
-        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
-        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
-        waitTime: 0,
-      },
-      scrollTableData: Array(100).fill('').map(function (i, k) {
-        return {
-          value1: k + 1,
-          value2: '出库',
-          value3: '物料1',
-          value4: '000' + k,
-          value5: '2024.03.04',
         }
-      }),
+      ]
     }
   },
   mounted() {
-    this.$refs.chart1.setData({
-      title: {
-        text: '原料库存占比',
-        style: {
-          color: '#fff'
-        }
-      },
-      credits: {
-        enabled: false
-      },
-      chart: {
-        type: 'pie',
-        animation: false,
-        backgroundColor: null,
-        events: {
-          load: function () {
-            let each = Highcharts.each,
-              points = this.series[0].points;
-            each(points, function (p, i) {
-              p.graphic.attr({
-                translateY: -p.shapeArgs.ran
-              });
-              p.graphic.side1.attr({
-                translateY: -p.shapeArgs.ran
-              });
-              p.graphic.side2.attr({
-                translateY: -p.shapeArgs.ran
-              });
-            });
-          }
-        },
-        options3d: {
-          enabled: true,
-          alpha: 60,
-          beta: 0
-        }
-      },
-      legend: {
-        reversed: true,
-        itemStyle: {
-          color: '#fff'
-        }
-      },
-      plotOptions: {
-        pie: {
-          allowPointSelect: false,
-          cursor: 'pointer',
-          depth: 35,
-          startAngle: 45,
-          size: 200,
-          dataLabels: {
-            enabled: true,
-            formatter: function () {
-              return this.point.options.name + '<br>' + this.point.options.h + '%';
-            }
-          },
-          showInLegend: false,
-          point: {
-            events: {
-              legendItemClick: function (e) {
-                return false; // 直接 return false 即可禁用图例点击事件
-              }
-            }
-          }
-        }
-      },
-      series: [
-        {
-          type: 'pie',
-          name: 'Browser share',
-          data: [
-            {
-              'name': '材料1',
-              y: 30.0,
-              h: 30.0
-            },
-            {
-              name: '材料2',
-              y: 26.8,
-              h: 26.8
-            },
-            {
-              'name': '材料3',
-              y: 15,
-              h: 15
-            },
-            {
-              name: '材料4',
-              y: 12.8,
-              h: 12.8
-            },
-            {
-              'name': '材料5',
-              y: 8.5,
-              h: 8.5
-            },
-            {
-              'name': '材料6',
-              y: 6.2,
-              h: 6.2
-            },
-            {
-              'name': '材料7',
-              y: 0.7,
-              h: 0.7
-            }
-          ].sort((a, b) => a.y - b.y)
-        }]
-    })
-    this.$refs.chart2.setData({
-      title: {
-        text: '原料库存占比',
-        style: {
-          color: '#fff'
-        }
-      },
-      credits: {
-        enabled: false
-      },
-      chart: {
-        type: 'pie',
-        startAngle: Math.PI / 6,
-        animation: false,
-        backgroundColor: null,
-        events: {
-          load: function () {
-            let each = Highcharts.each,
-              points = this.series[0].points;
-            each(points, function (p, i) {
-              p.graphic.attr({
-                translateY: -p.shapeArgs.ran
-              });
-              p.graphic.side1.attr({
-                translateY: -p.shapeArgs.ran
-              });
-              p.graphic.side2.attr({
-                translateY: -p.shapeArgs.ran
-              });
-            });
-          }
-        },
-        options3d: {
-          enabled: true,
-          alpha: 60,
-          beta: 0
-        }
-      },
-      legend: {
-        reversed: true,
-        itemStyle: {
-          color: '#fff'
-        }
-      },
-      plotOptions: {
-        pie: {
-          allowPointSelect: false,
-          cursor: 'pointer',
-          depth: 35,
-          startAngle: 45,
-          size: 200,
-          dataLabels: {
-            enabled: true,
-            formatter: function () {
-              return this.point.options.name + '<br>' + this.point.options.h + '%';
-            }
-          },
-          showInLegend: false,
-          point: {
-            events: {
-              legendItemClick: function (e) {
-                return false; // 直接 return false 即可禁用图例点击事件
-              }
-            }
-          }
-        }
-      },
-      series: [
-        {
-          type: 'pie',
-          name: 'Browser share',
-          data: [
-            {
-              'name': '材料1',
-              y: 30.0,
-              h: 30.0
-            },
-            {
-              name: '材料2',
-              y: 26.8,
-              h: 26.8
-            },
-            {
-              'name': '材料3',
-              y: 15,
-              h: 15
-            },
-            {
-              name: '材料4',
-              y: 12.8,
-              h: 12.8
-            },
-            {
-              'name': '材料5',
-              y: 8.5,
-              h: 8.5
-            },
-            {
-              'name': '材料6',
-              y: 6.2,
-              h: 6.2
-            },
-            {
-              'name': '材料7',
-              y: 0.7,
-              h: 0.7
-            }
-          ].sort((a, b) => a.y - b.y)
-        }]
-    })
-    this.$refs.chart3.setData({
-      title: {
-        text: '原料库存占比',
-        style: {
-          color: '#fff'
-        }
-      },
-      credits: {
-        enabled: false
-      },
-      chart: {
-        type: 'pie',
-        startAngle: Math.PI / 6,
-        animation: false,
-        backgroundColor: null,
-        events: {
-          load: function () {
-            let each = Highcharts.each,
-              points = this.series[0].points;
-            each(points, function (p, i) {
-              p.graphic.attr({
-                translateY: -p.shapeArgs.ran
-              });
-              p.graphic.side1.attr({
-                translateY: -p.shapeArgs.ran
-              });
-              p.graphic.side2.attr({
-                translateY: -p.shapeArgs.ran
-              });
-            });
-          }
-        },
-        options3d: {
-          enabled: true,
-          alpha: 60,
-          beta: 0
-        }
-      },
-      legend: {
-        reversed: true,
-        itemStyle: {
-          color: '#fff'
-        }
-      },
-      plotOptions: {
-        pie: {
-          allowPointSelect: false,
-          cursor: 'pointer',
-          depth: 35,
-          startAngle: 45,
-          size: 200,
-          dataLabels: {
-            enabled: true,
-            formatter: function () {
-              return this.point.options.name + '<br>' + this.point.options.h + '%';
-            }
-          },
-          showInLegend: false,
-          point: {
-            events: {
-              legendItemClick: function (e) {
-                return false; // 直接 return false 即可禁用图例点击事件
-              }
-            }
-          }
-        }
-      },
-      series: [
-        {
-          type: 'pie',
-          name: 'Browser share',
-          data: [
-            {
-              'name': '材料1',
-              y: 30.0,
-              h: 30.0
-            },
-            {
-              name: '材料2',
-              y: 26.8,
-              h: 26.8
-            },
-            {
-              'name': '材料3',
-              y: 15,
-              h: 15
-            },
-            {
-              name: '材料4',
-              y: 12.8,
-              h: 12.8
-            },
-            {
-              'name': '材料5',
-              y: 8.5,
-              h: 8.5
-            },
-            {
-              'name': '材料6',
-              y: 6.2,
-              h: 6.2
-            },
-            {
-              'name': '材料7',
-              y: 0.7,
-              h: 0.7
-            }
-          ].sort((a, b) => a.y - b.y)
-        }]
-    })
-    this.$refs.chart4.setData({
-      title: {
-        text: '原料库存占比',
-        style: {
-          color: '#fff'
-        }
-      },
-      credits: {
-        enabled: false
-      },
-      chart: {
-        type: 'pie',
-        startAngle: Math.PI / 6,
-        animation: false,
-        backgroundColor: null,
-        events: {
-          load: function () {
-            let each = Highcharts.each,
-              points = this.series[0].points;
-            each(points, function (p, i) {
-              p.graphic.attr({
-                translateY: -p.shapeArgs.ran
-              });
-              p.graphic.side1.attr({
-                translateY: -p.shapeArgs.ran
-              });
-              p.graphic.side2.attr({
-                translateY: -p.shapeArgs.ran
-              });
-            });
-          }
-        },
-        options3d: {
-          enabled: true,
-          alpha: 60,
-          beta: 0
-        }
-      },
-      legend: {
-        reversed: true,
-        itemStyle: {
-          color: '#fff'
-        }
-      },
-      plotOptions: {
-        pie: {
-          allowPointSelect: false,
-          cursor: 'pointer',
-          depth: 35,
-          startAngle: 45,
-          size: 200,
-          dataLabels: {
-            enabled: true,
-            formatter: function () {
-              return this.point.options.name + '<br>' + this.point.options.h + '%';
-            }
-          },
-          showInLegend: false,
-          point: {
-            events: {
-              legendItemClick: function (e) {
-                return false; // 直接 return false 即可禁用图例点击事件
-              }
-            }
-          }
-        }
-      },
-      series: [
-        {
-          type: 'pie',
-          name: 'Browser share',
-          data: [
-            {
-              'name': '材料1',
-              y: 30.0,
-              h: 30.0
-            },
-            {
-              name: '材料2',
-              y: 26.8,
-              h: 26.8
-            },
-            {
-              'name': '材料3',
-              y: 15,
-              h: 15
-            },
-            {
-              name: '材料4',
-              y: 12.8,
-              h: 12.8
-            },
-            {
-              'name': '材料5',
-              y: 8.5,
-              h: 8.5
-            },
-            {
-              'name': '材料6',
-              y: 6.2,
-              h: 6.2
-            },
-            {
-              'name': '材料7',
-              y: 0.7,
-              h: 0.7
-            }
-          ].sort((a, b) => a.y - b.y)
-        }]
-    })
-    this.$refs.chart5.setData({
-      title: {
-        x: 'center',
-        y: 'center',
-        text: "75%",
-        textStyle: {
-          color: '#ccc',
-          fontSize: 2 * vw,
-        },
-      },
-      series: [
-        {
-          type: "pie",
-          radius: ["47.5%", "55%"],
-          center: ["50%", "50%"],
-          startAngle: 225,
-          endAngle: -45,
-          color: ['#fa9800', "transparent"],
-          data: [
-            {
-              value: 75,
-              name: ''
-            },
-            {
-              value: 25,
-              name: ''
-            },
-          ],
-          label: {
-            show: false
-          },
-          labelLine: {
-            normal: {
-              show: false,
-            },
-          },
-        },
-      ],
-    })
-    this.$refs.chart6.setData({
-      tooltip: {
-        trigger: "item",
-      },
-      grid: {
-        borderWidth: 0,
-        top: "10%",
-        left: "10%",
-        right: "10%",
-        bottom: "10%",
-      },
-      yAxis: {
-        type: "category",
-        axisLabel: {
-          margin: 10,
-          color: "#ffffff63",
-        },
-
-        axisTick: {
-          show: true,
-          lineStyle: {
-            color: "#ffffff1f",
-          },
-        },
-        splitLine: {
-          show: true,
-          lineStyle: {
-            type: 'dashed',
-            color: "#ffffff1f",
-          },
-        },
-        axisLine: {
-          lineStyle: {
-            color: "#fff3",
-            width: 2,
-          },
-        },
-        data: ['物料1', '物料2', '物料3'],
-      },
-      xAxis: {
-        type: "value",
-        axisLabel: {
-          margin: 10,
-          color: "#ffffff63",
-        },
-        axisLine: {
-          show: false,
-        },
-        axisTick: {
-          show: true,
-          lineStyle: {
-            color: "#ffffff1f",
-          },
-        },
-        splitLine: {
-          show: true,
-          lineStyle: {
-            type: 'dashed',
-            color: "#ffffff1f",
-          },
-        },
-      },
-      series: [
-        {
-          name: "",
-          type: "bar",
-          barWidth: "40%",
-          itemStyle: {
-
-            color: new echarts.graphic.LinearGradient(
-              0,
-              0,
-              1,
-              0,
-              [
-                {
-                  offset: 0,
-                  color: "#0a2ad7",
-                },
-                {
-                  offset: 1,
-                  color: "#138dd7",
-                },
-              ],
-              false
-            ),
-          },
-          data: [1, 2, 3],
-        },
-        {
-          name: "",
-          type: "pictorialBar",
-          barWidth: "40%",
-          symbolSize: [5, '100%'],
-          symbolPosition: 'end',
-          symbolOffset: [3, 0],
-          barGap: '-100%',
-          itemStyle: {
-            color: '#138dd7'
-          },
-          data: [1, 2, 3],
-        },
-      ]
-    })
+    this.getData()
 
     window.onresize = () => {
       this.$refs.chart1.resize()
       this.$refs.chart2.resize()
       this.$refs.chart3.resize()
       this.$refs.chart4.resize()
-      this.$refs.chart5.chart.resize()
-      this.$refs.chart6.chart.resize()
     }
   },
-  methods: {}
+  methods: {
+    getData() {
+      locationCount().then(e => {
+        this.topData.furawInStock = [...[0, 0, 0, 0], ...(e.data.furawInStock || 0).toString().split('')].slice(-4)
+        this.topData.productInStock = [...[0, 0, 0, 0], ...(e.data.productInStock || 0).toString().split('')].slice(-4)
+        this.topData.productOutStock = [...[0, 0, 0, 0], ...(e.data.productOutStock || 0).toString().split('')].slice(-4)
+        this.topData.rawInStock = [...[0, 0, 0, 0], ...(e.data.rawInStock || 0).toString().split('')].slice(-4)
+        this.topData.rawOutStock = [...[0, 0, 0, 0], ...(e.data.rawOutStock || 0).toString().split('')].slice(-4)
+      })
+      fifthPanake().then(e => {
+        console.log(e)
+        this.$refs.chart1.setData({
+          title: {
+            text: '辅料空料箱占比',
+            style: {
+              color: '#fff'
+            }
+          },
+          credits: {
+            enabled: false
+          },
+          chart: {
+            type: 'pie',
+            animation: false,
+            backgroundColor: null,
+            events: {
+              load: function() {
+                let each = Highcharts.each,
+                  points = this.series[0].points
+                each(points, function(p, i) {
+                  p.graphic.attr({
+                    translateY: -p.shapeArgs.ran
+                  })
+                  p.graphic.side1.attr({
+                    translateY: -p.shapeArgs.ran
+                  })
+                  p.graphic.side2.attr({
+                    translateY: -p.shapeArgs.ran
+                  })
+                })
+              }
+            },
+            options3d: {
+              enabled: true,
+              alpha: 60,
+              beta: 0
+            }
+          },
+          legend: {
+            reversed: true,
+            itemStyle: {
+              color: '#fff'
+            }
+          },
+          plotOptions: {
+            pie: {
+              allowPointSelect: false,
+              cursor: 'pointer',
+              depth: 35,
+              startAngle: 45,
+              size: 200,
+              dataLabels: {
+                enabled: true,
+                formatter: function() {
+                  return this.point.options.name + '<br>' + this.point.options.h + '%'
+                }
+              },
+              showInLegend: false,
+              point: {
+                events: {
+                  legendItemClick: function(e) {
+                    return false // 直接 return false 即可禁用图例点击事件
+                  }
+                }
+              }
+            }
+          },
+          series: [
+            {
+              type: 'pie',
+              name: '占比',
+              data: [
+                {
+                  'name': '空料箱',
+                  y: e.data.emptyLocationPercentage * 100,
+                  h: e.data.emptyLocationPercentage * 100
+                },
+                {
+                  name: '非空料箱',
+                  y: (1 - e.data.emptyLocationPercentage) * 100,
+                  h: (1 - e.data.emptyLocationPercentage) * 100
+                }
+              ].sort((a, b) => a.y - b.y)
+            }]
+        })
+        this.$refs.chart2.setData({
+          title: {
+            text: '辅料库位使用率占比',
+            style: {
+              color: '#fff'
+            }
+          },
+          credits: {
+            enabled: false
+          },
+          chart: {
+            type: 'pie',
+            startAngle: Math.PI / 6,
+            animation: false,
+            backgroundColor: null,
+            events: {
+              load: function() {
+                let each = Highcharts.each,
+                  points = this.series[0].points
+                each(points, function(p, i) {
+                  p.graphic.attr({
+                    translateY: -p.shapeArgs.ran
+                  })
+                  p.graphic.side1.attr({
+                    translateY: -p.shapeArgs.ran
+                  })
+                  p.graphic.side2.attr({
+                    translateY: -p.shapeArgs.ran
+                  })
+                })
+              }
+            },
+            options3d: {
+              enabled: true,
+              alpha: 60,
+              beta: 0
+            }
+          },
+          legend: {
+            reversed: true,
+            itemStyle: {
+              color: '#fff'
+            }
+          },
+          plotOptions: {
+            pie: {
+              allowPointSelect: false,
+              cursor: 'pointer',
+              depth: 35,
+              startAngle: 45,
+              size: 200,
+              dataLabels: {
+                enabled: true,
+                formatter: function() {
+                  return this.point.options.name + '<br>' + this.point.options.h + '%'
+                }
+              },
+              showInLegend: false,
+              point: {
+                events: {
+                  legendItemClick: function(e) {
+                    return false // 直接 return false 即可禁用图例点击事件
+                  }
+                }
+              }
+            }
+          },
+          series: [
+            {
+              type: 'pie',
+              name: '占比',
+              data: [
+                {
+                  'name': '已使用',
+                  y: e.data.opplyLocationPercentage * 100,
+                  h: e.data.opplyLocationPercentage * 100
+                },
+                {
+                  name: '未使用',
+                  y: (1 - e.data.opplyLocationPercentage) * 100,
+                  h: (1 - e.data.opplyLocationPercentage) * 100
+                }
+              ].sort((a, b) => a.y - b.y)
+            }]
+        })
+
+        let total = e.data.productStocks.map(v => parseFloat(v.totalAmount)).reduce((a, b) => a + b, 0)
+        this.$refs.chart3.setData({
+          title: {
+            text: '成品库存占比',
+            style: {
+              color: '#fff'
+            }
+          },
+          credits: {
+            enabled: false
+          },
+          chart: {
+            type: 'pie',
+            startAngle: Math.PI / 6,
+            animation: false,
+            backgroundColor: null,
+            events: {
+              load: function() {
+                let each = Highcharts.each,
+                  points = this.series[0].points
+                each(points, function(p, i) {
+                  p.graphic.attr({
+                    translateY: -p.shapeArgs.ran
+                  })
+                  p.graphic.side1.attr({
+                    translateY: -p.shapeArgs.ran
+                  })
+                  p.graphic.side2.attr({
+                    translateY: -p.shapeArgs.ran
+                  })
+                })
+              }
+            },
+            options3d: {
+              enabled: true,
+              alpha: 60,
+              beta: 0
+            }
+          },
+          legend: {
+            reversed: true,
+            itemStyle: {
+              color: '#fff'
+            }
+          },
+          plotOptions: {
+            pie: {
+              allowPointSelect: false,
+              cursor: 'pointer',
+              depth: 35,
+              startAngle: 45,
+              size: 200,
+              dataLabels: {
+                enabled: true,
+                formatter: function() {
+                  return this.point.options.name + '<br>' + this.point.options.h + '%'
+                }
+              },
+              showInLegend: false,
+              point: {
+                events: {
+                  legendItemClick: function(e) {
+                    return false // 直接 return false 即可禁用图例点击事件
+                  }
+                }
+              }
+            }
+          },
+          series: [
+            {
+              type: 'pie',
+              name: '占比',
+              data: e.data.productStocks.map(v => {
+                return {
+                  name: v.productId,
+                  y: v.totalAmount,
+                  h: parseFloat(((v.totalAmount / total) * 100).toFixed(2))
+                }
+              })
+            }]
+        })
+        let total1 = e.data.wmsRawStocks.map(v => parseFloat(v.totalAmount)).reduce((a, b) => a + b, 0)
+        this.$refs.chart4.setData({
+          title: {
+            text: '原材料库存占比',
+            style: {
+              color: '#fff'
+            }
+          },
+          credits: {
+            enabled: false
+          },
+          chart: {
+            type: 'pie',
+            startAngle: Math.PI / 6,
+            animation: false,
+            backgroundColor: null,
+            events: {
+              load: function() {
+                let each = Highcharts.each,
+                  points = this.series[0].points
+                each(points, function(p, i) {
+                  p.graphic.attr({
+                    translateY: -p.shapeArgs.ran
+                  })
+                  p.graphic.side1.attr({
+                    translateY: -p.shapeArgs.ran
+                  })
+                  p.graphic.side2.attr({
+                    translateY: -p.shapeArgs.ran
+                  })
+                })
+              }
+            },
+            options3d: {
+              enabled: true,
+              alpha: 60,
+              beta: 0
+            }
+          },
+          legend: {
+            reversed: true,
+            itemStyle: {
+              color: '#fff'
+            }
+          },
+          plotOptions: {
+            pie: {
+              allowPointSelect: false,
+              cursor: 'pointer',
+              depth: 35,
+              startAngle: 45,
+              size: 200,
+              dataLabels: {
+                enabled: true,
+                formatter: function() {
+                  return this.point.options.name + '<br>' + this.point.options.h + '%'
+                }
+              },
+              showInLegend: false,
+              point: {
+                events: {
+                  legendItemClick: function(e) {
+                    return false // 直接 return false 即可禁用图例点击事件
+                  }
+                }
+              }
+            }
+          },
+          series: [
+            {
+              type: 'pie',
+              name: '占比',
+              data: e.data.wmsRawStocks.map(v => {
+                return {
+                  name: v.materialId,
+                  y: v.totalAmount,
+                  h: parseFloat(((v.totalAmount / total1) * 100).toFixed(2))
+                }
+              })
+            }]
+        })
+      })
+    }
+  }
 }
 </script>
 <style lang="less" scoped>
 
 .app-container {
-  background-image: url("../../../assets/board/warehouseBg3_1.jpg");
+  background-image: url("../../../assets/board/warehouseBg3_2.jpg");
   background-repeat: no-repeat;
   background-size: 100% 100%;
   width: 100%;
@@ -815,22 +519,6 @@ export default {
   letter-spacing: 2px;
 }
 
-.table1 {
-  position: absolute;
-  top: 62.9%;
-  left: 3.4%;
-  width: 30.2%;
-  height: 30%;
-  color: #fff;
-}
-
-.scrollTableItem {
-  display: inline-block;
-  width: calc(100% / 5);
-  text-align: center;
-  padding: 14px 0;
-  color: #4e99c5
-}
 
 .chart1 {
   position: absolute;
@@ -850,36 +538,20 @@ export default {
 
 .chart3 {
   position: absolute;
-  top: 22.5%;
-  left: 49.6%;
+  top: 62.5%;
+  left: 3.4%;
   width: 23%;
   height: 32%;
 }
 
 .chart4 {
   position: absolute;
-  top: 22.5%;
-  left: 72.7%;
+  top: 62.5%;
+  left: 26.5%;
   width: 23%;
   height: 32%;
 }
 
-.chart5 {
-  position: absolute;
-  top: 60.7%;
-  left: 40%;
-  width: 20vw;
-  height: 20vw;
-}
-
-.chart6 {
-  position: absolute;
-  top: 63%;
-  left: 66.5%;
-  width: 30%;
-  height: 32%;
-}
-
 .span {
   position: absolute;
   transform: translateY(-50%);
@@ -889,4 +561,15 @@ export default {
   position: absolute;
   transform: translate(-50%, -50%);
 }
+.img{
+  background-image: url("../../../assets/board/warehouse.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  top: 59%;
+  left: 73.5%;
+  width: 33%;
+  height: 24.63vw;
+  transform: translate(-50%,-50%);
+}
 </style>
diff --git a/hw-ui/src/views/board/warehouse/fifthFloor1.vue b/hw-ui/src/views/board/warehouse/fifthFloor1.vue
new file mode 100644
index 00000000..5fe920f6
--- /dev/null
+++ b/hw-ui/src/views/board/warehouse/fifthFloor1.vue
@@ -0,0 +1,892 @@
+<template>
+  <div class="app-container">
+    <div class="warehouse"></div>
+    <div class="headTitle">京源智能仓储监控平台</div>
+    <div v-for="(i,k) in title"
+         :style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'"
+         class="title">
+      {{ i }}
+    </div>
+    <div class="table1">
+      <div style="background-color: #1077bc19">
+        <div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
+          任务编号
+        </div>
+        <div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
+          任务类型
+        </div>
+        <div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
+          物料名称
+        </div>
+        <div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
+          库位编号
+        </div>
+        <div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
+          时间
+        </div>
+      </div>
+      <vue-seamless-scroll
+        :class-option="scrollTableOption"
+        :data="scrollTableData"
+        class="case-item"
+        style="height: calc(100% - 30px);overflow: hidden;"
+      >
+        <div
+          v-for="(item, index) in scrollTableData"
+          :key="index"
+        >
+          <div :style='"background-color:" + ((index % 2 === 0)? "#1077bc19":"#1077bc05") '>
+            <div
+              class="scrollTableItem">
+              {{ item.value1 }}
+            </div>
+            <div
+              class="scrollTableItem">
+              {{ item.value2 }}
+            </div>
+            <div
+              class="scrollTableItem">
+              {{ item.value3 }}
+            </div>
+            <div
+              class="scrollTableItem">
+              {{ item.value4 }}
+            </div>
+            <div
+              class="scrollTableItem">
+              {{ item.value5 }}
+            </div>
+          </div>
+        </div>
+      </vue-seamless-scroll>
+    </div>
+    <div class="chart1">
+      <HighChart key="chart1" ref="chart1"></HighChart>
+    </div>
+    <div class="chart2">
+      <HighChart key="chart2" ref="chart2"></HighChart>
+    </div>
+    <div class="chart3">
+      <HighChart key="chart3" ref="chart3"></HighChart>
+    </div>
+    <div class="chart4">
+      <HighChart key="chart4" ref="chart4"></HighChart>
+    </div>
+    <div class="chart5">
+      <Chart key="chart5" ref="chart5"></Chart>
+    </div>
+    <div class="chart6">
+      <Chart key="chart6" ref="chart6"></Chart>
+    </div>
+
+    <div class="num1 num1_1" style="top: 11.9%;left: 17.4%;color:#5fc2f2">1</div>
+    <div class="num1 num1_2" style="top: 11.9%;left:20.9%;color:#5fc2f2">0</div>
+    <div class="num1 num1_3" style="top: 11.9%;left:24.4%;color:#5fc2f2">0</div>
+    <div class="num1 num1_4" style="top: 11.9%;left:27.9%;color:#5fc2f2">0</div>
+    <div class="num1 num1_5" style="top: 11.9%;left:50%;color:#59ee7b">1</div>
+    <div class="num1 num1_6" style="top: 11.9%;left:53.5%;color:#59ee7b">0</div>
+    <div class="num1 num1_7" style="top: 11.9%;left:57%;color:#59ee7b">0</div>
+    <div class="num1 num1_8" style="top: 11.9%;left:60.5%;color:#59ee7b">0</div>
+    <div class="num1 num1_9" style="top: 11.9%;left:82.5%;color:#f60008">1</div>
+    <div class="num1 num1_10" style="top: 11.9%;left:86.1%;color:#f60008">0</div>
+    <div class="num1 num1_11" style="top: 11.9%;left:89.6%;color:#f60008">0</div>
+    <div class="num1 num1_12" style="top: 11.9%;left:93.1%;color:#f60008">0</div>
+  </div>
+</template>
+
+<script>
+import vueSeamlessScroll from "vue-seamless-scroll";
+import Chart from '@/components/board/Chart'
+import HighChart from '@/components/board/HighChart'
+import * as echarts from 'echarts'
+
+const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
+export default {
+  name: 'Board1',
+  components: {
+    vueSeamlessScroll,
+    Chart,
+    HighChart
+  },
+  data() {
+    return {
+      title: [
+        '原料库出库数量:',
+        '辅料库出库数量:',
+        '半成品入库数量:',
+        '库存占比',
+        '调度任务',
+        '成品库可用库存占比',
+        '成品库订单库存统计',
+      ],
+      titlePosition: [
+        {
+          top: 11.5,
+          left: 7.5
+        },
+        {
+          top: 11.5,
+          left: 40
+        },
+        {
+          top: 11.5,
+          left: 72.5
+        },
+        {
+          top: 19.4,
+          left: 5.5
+        },
+        {
+          top: 59.8,
+          left: 5.5
+        },
+        {
+          top: 59.8,
+          left: 37
+        },
+        {
+          top: 59.8,
+          left: 68.5
+        },
+      ],
+      scrollTableOption: {
+        step: 0.5, // 数值越大速度滚动越快
+        limitMoveNum: 22, // 开始无缝滚动的数据量 this.dataList.length
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 0,
+      },
+      scrollTableData: Array(100).fill('').map(function (i, k) {
+        return {
+          value1: k + 1,
+          value2: '出库',
+          value3: '物料1',
+          value4: '000' + k,
+          value5: '2024.03.04',
+        }
+      }),
+    }
+  },
+  mounted() {
+    this.$refs.chart1.setData({
+      title: {
+        text: '原料库存占比',
+        style: {
+          color: '#fff'
+        }
+      },
+      credits: {
+        enabled: false
+      },
+      chart: {
+        type: 'pie',
+        animation: false,
+        backgroundColor: null,
+        events: {
+          load: function () {
+            let each = Highcharts.each,
+              points = this.series[0].points;
+            each(points, function (p, i) {
+              p.graphic.attr({
+                translateY: -p.shapeArgs.ran
+              });
+              p.graphic.side1.attr({
+                translateY: -p.shapeArgs.ran
+              });
+              p.graphic.side2.attr({
+                translateY: -p.shapeArgs.ran
+              });
+            });
+          }
+        },
+        options3d: {
+          enabled: true,
+          alpha: 60,
+          beta: 0
+        }
+      },
+      legend: {
+        reversed: true,
+        itemStyle: {
+          color: '#fff'
+        }
+      },
+      plotOptions: {
+        pie: {
+          allowPointSelect: false,
+          cursor: 'pointer',
+          depth: 35,
+          startAngle: 45,
+          size: 200,
+          dataLabels: {
+            enabled: true,
+            formatter: function () {
+              return this.point.options.name + '<br>' + this.point.options.h + '%';
+            }
+          },
+          showInLegend: false,
+          point: {
+            events: {
+              legendItemClick: function (e) {
+                return false; // 直接 return false 即可禁用图例点击事件
+              }
+            }
+          }
+        }
+      },
+      series: [
+        {
+          type: 'pie',
+          name: 'Browser share',
+          data: [
+            {
+              'name': '材料1',
+              y: 30.0,
+              h: 30.0
+            },
+            {
+              name: '材料2',
+              y: 26.8,
+              h: 26.8
+            },
+            {
+              'name': '材料3',
+              y: 15,
+              h: 15
+            },
+            {
+              name: '材料4',
+              y: 12.8,
+              h: 12.8
+            },
+            {
+              'name': '材料5',
+              y: 8.5,
+              h: 8.5
+            },
+            {
+              'name': '材料6',
+              y: 6.2,
+              h: 6.2
+            },
+            {
+              'name': '材料7',
+              y: 0.7,
+              h: 0.7
+            }
+          ].sort((a, b) => a.y - b.y)
+        }]
+    })
+    this.$refs.chart2.setData({
+      title: {
+        text: '原料库存占比',
+        style: {
+          color: '#fff'
+        }
+      },
+      credits: {
+        enabled: false
+      },
+      chart: {
+        type: 'pie',
+        startAngle: Math.PI / 6,
+        animation: false,
+        backgroundColor: null,
+        events: {
+          load: function () {
+            let each = Highcharts.each,
+              points = this.series[0].points;
+            each(points, function (p, i) {
+              p.graphic.attr({
+                translateY: -p.shapeArgs.ran
+              });
+              p.graphic.side1.attr({
+                translateY: -p.shapeArgs.ran
+              });
+              p.graphic.side2.attr({
+                translateY: -p.shapeArgs.ran
+              });
+            });
+          }
+        },
+        options3d: {
+          enabled: true,
+          alpha: 60,
+          beta: 0
+        }
+      },
+      legend: {
+        reversed: true,
+        itemStyle: {
+          color: '#fff'
+        }
+      },
+      plotOptions: {
+        pie: {
+          allowPointSelect: false,
+          cursor: 'pointer',
+          depth: 35,
+          startAngle: 45,
+          size: 200,
+          dataLabels: {
+            enabled: true,
+            formatter: function () {
+              return this.point.options.name + '<br>' + this.point.options.h + '%';
+            }
+          },
+          showInLegend: false,
+          point: {
+            events: {
+              legendItemClick: function (e) {
+                return false; // 直接 return false 即可禁用图例点击事件
+              }
+            }
+          }
+        }
+      },
+      series: [
+        {
+          type: 'pie',
+          name: 'Browser share',
+          data: [
+            {
+              'name': '材料1',
+              y: 30.0,
+              h: 30.0
+            },
+            {
+              name: '材料2',
+              y: 26.8,
+              h: 26.8
+            },
+            {
+              'name': '材料3',
+              y: 15,
+              h: 15
+            },
+            {
+              name: '材料4',
+              y: 12.8,
+              h: 12.8
+            },
+            {
+              'name': '材料5',
+              y: 8.5,
+              h: 8.5
+            },
+            {
+              'name': '材料6',
+              y: 6.2,
+              h: 6.2
+            },
+            {
+              'name': '材料7',
+              y: 0.7,
+              h: 0.7
+            }
+          ].sort((a, b) => a.y - b.y)
+        }]
+    })
+    this.$refs.chart3.setData({
+      title: {
+        text: '原料库存占比',
+        style: {
+          color: '#fff'
+        }
+      },
+      credits: {
+        enabled: false
+      },
+      chart: {
+        type: 'pie',
+        startAngle: Math.PI / 6,
+        animation: false,
+        backgroundColor: null,
+        events: {
+          load: function () {
+            let each = Highcharts.each,
+              points = this.series[0].points;
+            each(points, function (p, i) {
+              p.graphic.attr({
+                translateY: -p.shapeArgs.ran
+              });
+              p.graphic.side1.attr({
+                translateY: -p.shapeArgs.ran
+              });
+              p.graphic.side2.attr({
+                translateY: -p.shapeArgs.ran
+              });
+            });
+          }
+        },
+        options3d: {
+          enabled: true,
+          alpha: 60,
+          beta: 0
+        }
+      },
+      legend: {
+        reversed: true,
+        itemStyle: {
+          color: '#fff'
+        }
+      },
+      plotOptions: {
+        pie: {
+          allowPointSelect: false,
+          cursor: 'pointer',
+          depth: 35,
+          startAngle: 45,
+          size: 200,
+          dataLabels: {
+            enabled: true,
+            formatter: function () {
+              return this.point.options.name + '<br>' + this.point.options.h + '%';
+            }
+          },
+          showInLegend: false,
+          point: {
+            events: {
+              legendItemClick: function (e) {
+                return false; // 直接 return false 即可禁用图例点击事件
+              }
+            }
+          }
+        }
+      },
+      series: [
+        {
+          type: 'pie',
+          name: 'Browser share',
+          data: [
+            {
+              'name': '材料1',
+              y: 30.0,
+              h: 30.0
+            },
+            {
+              name: '材料2',
+              y: 26.8,
+              h: 26.8
+            },
+            {
+              'name': '材料3',
+              y: 15,
+              h: 15
+            },
+            {
+              name: '材料4',
+              y: 12.8,
+              h: 12.8
+            },
+            {
+              'name': '材料5',
+              y: 8.5,
+              h: 8.5
+            },
+            {
+              'name': '材料6',
+              y: 6.2,
+              h: 6.2
+            },
+            {
+              'name': '材料7',
+              y: 0.7,
+              h: 0.7
+            }
+          ].sort((a, b) => a.y - b.y)
+        }]
+    })
+    this.$refs.chart4.setData({
+      title: {
+        text: '原料库存占比',
+        style: {
+          color: '#fff'
+        }
+      },
+      credits: {
+        enabled: false
+      },
+      chart: {
+        type: 'pie',
+        startAngle: Math.PI / 6,
+        animation: false,
+        backgroundColor: null,
+        events: {
+          load: function () {
+            let each = Highcharts.each,
+              points = this.series[0].points;
+            each(points, function (p, i) {
+              p.graphic.attr({
+                translateY: -p.shapeArgs.ran
+              });
+              p.graphic.side1.attr({
+                translateY: -p.shapeArgs.ran
+              });
+              p.graphic.side2.attr({
+                translateY: -p.shapeArgs.ran
+              });
+            });
+          }
+        },
+        options3d: {
+          enabled: true,
+          alpha: 60,
+          beta: 0
+        }
+      },
+      legend: {
+        reversed: true,
+        itemStyle: {
+          color: '#fff'
+        }
+      },
+      plotOptions: {
+        pie: {
+          allowPointSelect: false,
+          cursor: 'pointer',
+          depth: 35,
+          startAngle: 45,
+          size: 200,
+          dataLabels: {
+            enabled: true,
+            formatter: function () {
+              return this.point.options.name + '<br>' + this.point.options.h + '%';
+            }
+          },
+          showInLegend: false,
+          point: {
+            events: {
+              legendItemClick: function (e) {
+                return false; // 直接 return false 即可禁用图例点击事件
+              }
+            }
+          }
+        }
+      },
+      series: [
+        {
+          type: 'pie',
+          name: 'Browser share',
+          data: [
+            {
+              'name': '材料1',
+              y: 30.0,
+              h: 30.0
+            },
+            {
+              name: '材料2',
+              y: 26.8,
+              h: 26.8
+            },
+            {
+              'name': '材料3',
+              y: 15,
+              h: 15
+            },
+            {
+              name: '材料4',
+              y: 12.8,
+              h: 12.8
+            },
+            {
+              'name': '材料5',
+              y: 8.5,
+              h: 8.5
+            },
+            {
+              'name': '材料6',
+              y: 6.2,
+              h: 6.2
+            },
+            {
+              'name': '材料7',
+              y: 0.7,
+              h: 0.7
+            }
+          ].sort((a, b) => a.y - b.y)
+        }]
+    })
+    this.$refs.chart5.setData({
+      title: {
+        x: 'center',
+        y: 'center',
+        text: "75%",
+        textStyle: {
+          color: '#ccc',
+          fontSize: 2 * vw,
+        },
+      },
+      series: [
+        {
+          type: "pie",
+          radius: ["47.5%", "55%"],
+          center: ["50%", "50%"],
+          startAngle: 225,
+          endAngle: -45,
+          color: ['#fa9800', "transparent"],
+          data: [
+            {
+              value: 75,
+              name: ''
+            },
+            {
+              value: 25,
+              name: ''
+            },
+          ],
+          label: {
+            show: false
+          },
+          labelLine: {
+            normal: {
+              show: false,
+            },
+          },
+        },
+      ],
+    })
+    this.$refs.chart6.setData({
+      tooltip: {
+        trigger: "item",
+      },
+      grid: {
+        borderWidth: 0,
+        top: "10%",
+        left: "10%",
+        right: "10%",
+        bottom: "10%",
+      },
+      yAxis: {
+        type: "category",
+        axisLabel: {
+          margin: 10,
+          color: "#ffffff63",
+        },
+
+        axisTick: {
+          show: true,
+          lineStyle: {
+            color: "#ffffff1f",
+          },
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            type: 'dashed',
+            color: "#ffffff1f",
+          },
+        },
+        axisLine: {
+          lineStyle: {
+            color: "#fff3",
+            width: 2,
+          },
+        },
+        data: ['物料1', '物料2', '物料3'],
+      },
+      xAxis: {
+        type: "value",
+        axisLabel: {
+          margin: 10,
+          color: "#ffffff63",
+        },
+        axisLine: {
+          show: false,
+        },
+        axisTick: {
+          show: true,
+          lineStyle: {
+            color: "#ffffff1f",
+          },
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            type: 'dashed',
+            color: "#ffffff1f",
+          },
+        },
+      },
+      series: [
+        {
+          name: "",
+          type: "bar",
+          barWidth: "40%",
+          itemStyle: {
+
+            color: new echarts.graphic.LinearGradient(
+              0,
+              0,
+              1,
+              0,
+              [
+                {
+                  offset: 0,
+                  color: "#0a2ad7",
+                },
+                {
+                  offset: 1,
+                  color: "#138dd7",
+                },
+              ],
+              false
+            ),
+          },
+          data: [1, 2, 3],
+        },
+        {
+          name: "",
+          type: "pictorialBar",
+          barWidth: "40%",
+          symbolSize: [5, '100%'],
+          symbolPosition: 'end',
+          symbolOffset: [3, 0],
+          barGap: '-100%',
+          itemStyle: {
+            color: '#138dd7'
+          },
+          data: [1, 2, 3],
+        },
+      ]
+    })
+
+    window.onresize = () => {
+      this.$refs.chart1.resize()
+      this.$refs.chart2.resize()
+      this.$refs.chart3.resize()
+      this.$refs.chart4.resize()
+      this.$refs.chart5.chart.resize()
+      this.$refs.chart6.chart.resize()
+    }
+  },
+  methods: {}
+}
+</script>
+<style lang="less" scoped>
+
+.app-container {
+  background-image: url("../../../assets/board/warehouseBg3_1.jpg");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.warehouse {
+  background-image: url("../../../assets/board/warehouse1.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  width: 18%;
+  height: 27.8%;
+  top: 65%;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.headTitle {
+  position: absolute;
+  top: 5%;
+  left: 50%;
+  transform: translate(-50%, -100%);
+  font-size: 1.5vw;
+  color: #d6eaed;
+  letter-spacing: 10px;
+}
+
+.num1 {
+  position: absolute;
+  font-size: 1.5vw;
+  transform: translate(-50%, -50%);
+}
+
+.title {
+  position: absolute;
+  transform: translateY(-50%);
+  color: #dddddd;
+  font-size: 1vw;
+  letter-spacing: 2px;
+}
+
+.table1 {
+  position: absolute;
+  top: 62.9%;
+  left: 3.4%;
+  width: 30.2%;
+  height: 30%;
+  color: #fff;
+}
+
+.scrollTableItem {
+  display: inline-block;
+  width: calc(100% / 5);
+  text-align: center;
+  padding: 14px 0;
+  color: #4e99c5
+}
+
+.chart1 {
+  position: absolute;
+  top: 22.5%;
+  left: 3.4%;
+  width: 23%;
+  height: 32%;
+}
+
+.chart2 {
+  position: absolute;
+  top: 22.5%;
+  left: 26.5%;
+  width: 23%;
+  height: 32%;
+}
+
+.chart3 {
+  position: absolute;
+  top: 22.5%;
+  left: 49.6%;
+  width: 23%;
+  height: 32%;
+}
+
+.chart4 {
+  position: absolute;
+  top: 22.5%;
+  left: 72.7%;
+  width: 23%;
+  height: 32%;
+}
+
+.chart5 {
+  position: absolute;
+  top: 60.7%;
+  left: 40%;
+  width: 20vw;
+  height: 20vw;
+}
+
+.chart6 {
+  position: absolute;
+  top: 63%;
+  left: 66.5%;
+  width: 30%;
+  height: 32%;
+}
+
+.span {
+  position: absolute;
+  transform: translateY(-50%);
+}
+
+.span1 {
+  position: absolute;
+  transform: translate(-50%, -50%);
+}
+</style>
diff --git a/hw-ui/src/views/board/warehouse/fifthFloor2.vue b/hw-ui/src/views/board/warehouse/fifthFloor2.vue
deleted file mode 100644
index dd449e87..00000000
--- a/hw-ui/src/views/board/warehouse/fifthFloor2.vue
+++ /dev/null
@@ -1,563 +0,0 @@
-<template>
-  <div class="app-container">
-    <div class="headTitle">京源智能仓储监控平台</div>
-    <div v-for="(i,k) in title"
-         :style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'"
-         class="title"
-    >
-      {{ i }}
-    </div>
-    <div class="chart1">
-      <HighChart key="chart1" ref="chart1"></HighChart>
-    </div>
-    <div class="chart2">
-      <HighChart key="chart2" ref="chart2"></HighChart>
-    </div>
-    <div class="chart3">
-      <HighChart key="chart3" ref="chart3"></HighChart>
-    </div>
-    <div class="chart4">
-      <HighChart key="chart4" ref="chart4"></HighChart>
-    </div>
-
-    <div class="num1 num1_1" style="top: 11.9%;left: 13.4%;color:#5fc2f2">{{ topData.furawInStock[0] }}</div>
-    <div class="num1 num1_2" style="top: 11.9%;left:15.7%;color:#5fc2f2">{{ topData.furawInStock[1] }}</div>
-    <div class="num1 num1_3" style="top: 11.9%;left:18%;color:#5fc2f2">{{ topData.furawInStock[2] }}</div>
-    <div class="num1 num1_4" style="top: 11.9%;left:20.4%;color:#5fc2f2">{{ topData.furawInStock[3] }}</div>
-
-    <div class="num1 num1_5" style="top: 11.9%;left:32.2%;color:#59ee7b">{{ topData.productInStock[0] }}</div>
-    <div class="num1 num1_6" style="top: 11.9%;left:34.6%;color:#59ee7b">{{ topData.productInStock[1] }}</div>
-    <div class="num1 num1_7" style="top: 11.9%;left:36.9%;color:#59ee7b">{{ topData.productInStock[2] }}</div>
-    <div class="num1 num1_8" style="top: 11.9%;left:39.2%;color:#59ee7b">{{ topData.productInStock[3] }}</div>
-
-    <div class="num1 num1_9" style="top: 11.9%;left:51.1%;color:#f60008">{{ topData.productOutStock[0] }}</div>
-    <div class="num1 num1_10" style="top: 11.9%;left:53.4%;color:#f60008">{{ topData.productOutStock[1] }}</div>
-    <div class="num1 num1_11" style="top: 11.9%;left:55.7%;color:#f60008">{{ topData.productOutStock[2] }}</div>
-    <div class="num1 num1_12" style="top: 11.9%;left:58.1%;color:#f60008">{{ topData.productOutStock[3] }}</div>
-
-    <div class="num1 num1_13" style="top: 11.9%;left:69.9%;color:#59ee7b">{{ topData.rawInStock[0] }}</div>
-    <div class="num1 num1_14" style="top: 11.9%;left:72.3%;color:#59ee7b">{{ topData.rawInStock[1] }}</div>
-    <div class="num1 num1_15" style="top: 11.9%;left:74.6%;color:#59ee7b">{{ topData.rawInStock[2] }}</div>
-    <div class="num1 num1_16" style="top: 11.9%;left:76.9%;color:#59ee7b">{{ topData.rawInStock[3] }}</div>
-
-    <div class="num1 num1_17" style="top: 11.9%;left:88.7%;color:#f60008">{{ topData.rawOutStock[0] }}</div>
-    <div class="num1 num1_18" style="top: 11.9%;left:91%;color:#f60008">{{ topData.rawOutStock[1] }}</div>
-    <div class="num1 num1_19" style="top: 11.9%;left:93.4%;color:#f60008">{{ topData.rawOutStock[2] }}</div>
-    <div class="num1 num1_20" style="top: 11.9%;left:95.7%;color:#f60008">{{ topData.rawOutStock[3] }}</div>
-
-  </div>
-</template>
-
-<!--// 柱状图 每个烘房耗电量 x轴 保留 - 后的 y轴 expend-->
-<!--  质量接口 柱状图 +折线图 合格率和数量   -->
-
-<script>
-import vueSeamlessScroll from 'vue-seamless-scroll'
-import Chart from '@/components/board/Chart'
-import HighChart from '@/components/board/HighChart'
-import * as echarts from 'echarts'
-import { fifthPanake, locationCount } from '@/api/board/fifthFloorWarehouse'
-
-const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
-export default {
-  name: 'Board1',
-  components: {
-    vueSeamlessScroll,
-    Chart,
-    HighChart
-  },
-  data() {
-    return {
-      topData: {
-        furawInStock: [0, 0, 0, 0],
-        productInStock: [0, 0, 0, 0],
-        productOutStock: [0, 0, 0, 0],
-        rawInStock: [0, 0, 0, 0],
-        rawOutStock: [0, 0, 0, 0]
-      },
-      title: [
-        '原料库入库数量:',
-        '成品入库数量:',
-        '成品出库数量:',
-        '辅料入库数量:',
-        '辅料出库数量:',
-        '库存占比'
-      ],
-      titlePosition: [
-        {
-          top: 11.5,
-          left: 3.5
-        },
-        {
-          top: 11.5,
-          left: 22.5
-        },
-        {
-          top: 11.5,
-          left: 41.3
-        },
-        {
-          top: 11.5,
-          left: 60.3
-        },
-        {
-          top: 11.5,
-          left: 79.1
-        },
-        {
-          top: 19.4,
-          left: 5.5
-        }
-      ]
-    }
-  },
-  mounted() {
-    this.getData()
-
-    window.onresize = () => {
-      this.$refs.chart1.resize()
-      this.$refs.chart2.resize()
-      this.$refs.chart3.resize()
-      this.$refs.chart4.resize()
-    }
-  },
-  methods: {
-    getData() {
-      locationCount().then(e => {
-        this.topData.furawInStock = [...[0, 0, 0, 0], ...(e.data.furawInStock || 0).toString().split('')].slice(-4)
-        this.topData.productInStock = [...[0, 0, 0, 0], ...(e.data.productInStock || 0).toString().split('')].slice(-4)
-        this.topData.productOutStock = [...[0, 0, 0, 0], ...(e.data.productOutStock || 0).toString().split('')].slice(-4)
-        this.topData.rawInStock = [...[0, 0, 0, 0], ...(e.data.rawInStock || 0).toString().split('')].slice(-4)
-        this.topData.rawOutStock = [...[0, 0, 0, 0], ...(e.data.rawOutStock || 0).toString().split('')].slice(-4)
-      })
-      fifthPanake().then(e => {
-        console.log(e)
-        this.$refs.chart1.setData({
-          title: {
-            text: '辅料空料箱占比',
-            style: {
-              color: '#fff'
-            }
-          },
-          credits: {
-            enabled: false
-          },
-          chart: {
-            type: 'pie',
-            animation: false,
-            backgroundColor: null,
-            events: {
-              load: function() {
-                let each = Highcharts.each,
-                  points = this.series[0].points
-                each(points, function(p, i) {
-                  p.graphic.attr({
-                    translateY: -p.shapeArgs.ran
-                  })
-                  p.graphic.side1.attr({
-                    translateY: -p.shapeArgs.ran
-                  })
-                  p.graphic.side2.attr({
-                    translateY: -p.shapeArgs.ran
-                  })
-                })
-              }
-            },
-            options3d: {
-              enabled: true,
-              alpha: 60,
-              beta: 0
-            }
-          },
-          legend: {
-            reversed: true,
-            itemStyle: {
-              color: '#fff'
-            }
-          },
-          plotOptions: {
-            pie: {
-              allowPointSelect: false,
-              cursor: 'pointer',
-              depth: 35,
-              startAngle: 45,
-              size: 200,
-              dataLabels: {
-                enabled: true,
-                formatter: function() {
-                  return this.point.options.name + '<br>' + this.point.options.h + '%'
-                }
-              },
-              showInLegend: false,
-              point: {
-                events: {
-                  legendItemClick: function(e) {
-                    return false // 直接 return false 即可禁用图例点击事件
-                  }
-                }
-              }
-            }
-          },
-          series: [
-            {
-              type: 'pie',
-              name: '占比',
-              data: [
-                {
-                  'name': '空料箱',
-                  y: e.data.emptyLocationPercentage * 100,
-                  h: e.data.emptyLocationPercentage * 100
-                },
-                {
-                  name: '非空料箱',
-                  y: (1 - e.data.emptyLocationPercentage) * 100,
-                  h: (1 - e.data.emptyLocationPercentage) * 100
-                }
-              ].sort((a, b) => a.y - b.y)
-            }]
-        })
-        this.$refs.chart2.setData({
-          title: {
-            text: '辅料库位使用率占比',
-            style: {
-              color: '#fff'
-            }
-          },
-          credits: {
-            enabled: false
-          },
-          chart: {
-            type: 'pie',
-            startAngle: Math.PI / 6,
-            animation: false,
-            backgroundColor: null,
-            events: {
-              load: function() {
-                let each = Highcharts.each,
-                  points = this.series[0].points
-                each(points, function(p, i) {
-                  p.graphic.attr({
-                    translateY: -p.shapeArgs.ran
-                  })
-                  p.graphic.side1.attr({
-                    translateY: -p.shapeArgs.ran
-                  })
-                  p.graphic.side2.attr({
-                    translateY: -p.shapeArgs.ran
-                  })
-                })
-              }
-            },
-            options3d: {
-              enabled: true,
-              alpha: 60,
-              beta: 0
-            }
-          },
-          legend: {
-            reversed: true,
-            itemStyle: {
-              color: '#fff'
-            }
-          },
-          plotOptions: {
-            pie: {
-              allowPointSelect: false,
-              cursor: 'pointer',
-              depth: 35,
-              startAngle: 45,
-              size: 200,
-              dataLabels: {
-                enabled: true,
-                formatter: function() {
-                  return this.point.options.name + '<br>' + this.point.options.h + '%'
-                }
-              },
-              showInLegend: false,
-              point: {
-                events: {
-                  legendItemClick: function(e) {
-                    return false // 直接 return false 即可禁用图例点击事件
-                  }
-                }
-              }
-            }
-          },
-          series: [
-            {
-              type: 'pie',
-              name: '占比',
-              data: [
-                {
-                  'name': '已使用',
-                  y: e.data.opplyLocationPercentage * 100,
-                  h: e.data.opplyLocationPercentage * 100
-                },
-                {
-                  name: '未使用',
-                  y: (1 - e.data.opplyLocationPercentage) * 100,
-                  h: (1 - e.data.opplyLocationPercentage) * 100
-                }
-              ].sort((a, b) => a.y - b.y)
-            }]
-        })
-
-        let total = e.data.productStocks.map(v => parseFloat(v.totalAmount)).reduce((a, b) => a + b, 0)
-        this.$refs.chart3.setData({
-          title: {
-            text: '成品库存占比',
-            style: {
-              color: '#fff'
-            }
-          },
-          credits: {
-            enabled: false
-          },
-          chart: {
-            type: 'pie',
-            startAngle: Math.PI / 6,
-            animation: false,
-            backgroundColor: null,
-            events: {
-              load: function() {
-                let each = Highcharts.each,
-                  points = this.series[0].points
-                each(points, function(p, i) {
-                  p.graphic.attr({
-                    translateY: -p.shapeArgs.ran
-                  })
-                  p.graphic.side1.attr({
-                    translateY: -p.shapeArgs.ran
-                  })
-                  p.graphic.side2.attr({
-                    translateY: -p.shapeArgs.ran
-                  })
-                })
-              }
-            },
-            options3d: {
-              enabled: true,
-              alpha: 60,
-              beta: 0
-            }
-          },
-          legend: {
-            reversed: true,
-            itemStyle: {
-              color: '#fff'
-            }
-          },
-          plotOptions: {
-            pie: {
-              allowPointSelect: false,
-              cursor: 'pointer',
-              depth: 35,
-              startAngle: 45,
-              size: 200,
-              dataLabels: {
-                enabled: true,
-                formatter: function() {
-                  return this.point.options.name + '<br>' + this.point.options.h + '%'
-                }
-              },
-              showInLegend: false,
-              point: {
-                events: {
-                  legendItemClick: function(e) {
-                    return false // 直接 return false 即可禁用图例点击事件
-                  }
-                }
-              }
-            }
-          },
-          series: [
-            {
-              type: 'pie',
-              name: '占比',
-              data: e.data.productStocks.map(v => {
-                return {
-                  name: v.productId,
-                  y: v.totalAmount,
-                  h: parseFloat(((v.totalAmount / total) * 100).toFixed(2))
-                }
-              })
-            }]
-        })
-        let total1 = e.data.wmsRawStocks.map(v => parseFloat(v.totalAmount)).reduce((a, b) => a + b, 0)
-        this.$refs.chart4.setData({
-          title: {
-            text: '原材料库存占比',
-            style: {
-              color: '#fff'
-            }
-          },
-          credits: {
-            enabled: false
-          },
-          chart: {
-            type: 'pie',
-            startAngle: Math.PI / 6,
-            animation: false,
-            backgroundColor: null,
-            events: {
-              load: function() {
-                let each = Highcharts.each,
-                  points = this.series[0].points
-                each(points, function(p, i) {
-                  p.graphic.attr({
-                    translateY: -p.shapeArgs.ran
-                  })
-                  p.graphic.side1.attr({
-                    translateY: -p.shapeArgs.ran
-                  })
-                  p.graphic.side2.attr({
-                    translateY: -p.shapeArgs.ran
-                  })
-                })
-              }
-            },
-            options3d: {
-              enabled: true,
-              alpha: 60,
-              beta: 0
-            }
-          },
-          legend: {
-            reversed: true,
-            itemStyle: {
-              color: '#fff'
-            }
-          },
-          plotOptions: {
-            pie: {
-              allowPointSelect: false,
-              cursor: 'pointer',
-              depth: 35,
-              startAngle: 45,
-              size: 200,
-              dataLabels: {
-                enabled: true,
-                formatter: function() {
-                  return this.point.options.name + '<br>' + this.point.options.h + '%'
-                }
-              },
-              showInLegend: false,
-              point: {
-                events: {
-                  legendItemClick: function(e) {
-                    return false // 直接 return false 即可禁用图例点击事件
-                  }
-                }
-              }
-            }
-          },
-          series: [
-            {
-              type: 'pie',
-              name: '占比',
-              data: e.data.wmsRawStocks.map(v => {
-                return {
-                  name: v.materialId,
-                  y: v.totalAmount,
-                  h: parseFloat(((v.totalAmount / total1) * 100).toFixed(2))
-                }
-              })
-            }]
-        })
-      })
-    }
-  }
-}
-</script>
-<style lang="less" scoped>
-
-.app-container {
-  background-image: url("../../../assets/board/warehouseBg3.jpg");
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-.warehouse {
-  background-image: url("../../../assets/board/warehouse1.png");
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-  position: absolute;
-  width: 18%;
-  height: 27.8%;
-  top: 65%;
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.headTitle {
-  position: absolute;
-  top: 5%;
-  left: 50%;
-  transform: translate(-50%, -100%);
-  font-size: 1.5vw;
-  color: #d6eaed;
-  letter-spacing: 10px;
-}
-
-.num1 {
-  position: absolute;
-  font-size: 1.5vw;
-  transform: translate(-50%, -50%);
-}
-
-.title {
-  position: absolute;
-  transform: translateY(-50%);
-  color: #dddddd;
-  font-size: 1vw;
-  letter-spacing: 2px;
-}
-
-
-.chart1 {
-  position: absolute;
-  top: 22.5%;
-  left: 3.4%;
-  width: 23%;
-  height: 32%;
-}
-
-.chart2 {
-  position: absolute;
-  top: 22.5%;
-  left: 26.5%;
-  width: 23%;
-  height: 32%;
-}
-
-.chart3 {
-  position: absolute;
-  top: 62.5%;
-  left: 3.4%;
-  width: 23%;
-  height: 32%;
-}
-
-.chart4 {
-  position: absolute;
-  top: 62.5%;
-  left: 26.5%;
-  width: 23%;
-  height: 32%;
-}
-
-.span {
-  position: absolute;
-  transform: translateY(-50%);
-}
-
-.span1 {
-  position: absolute;
-  transform: translate(-50%, -50%);
-}
-</style>