diff --git a/hw-ui/src/api/board/fifthFloorProduction.js b/hw-ui/src/api/board/fifthFloorProduction.js
index 0bd505cc..125ecfde 100644
--- a/hw-ui/src/api/board/fifthFloorProduction.js
+++ b/hw-ui/src/api/board/fifthFloorProduction.js
@@ -3,7 +3,7 @@ import request from '@/utils/request2'
 // 工单生产进度
 export function workOrderProgress(query) {
   return request({
-    url: '/fifthMesBorder/workOrderProgress',
+    url: 'fifthMesBorder/workOrderProgress',
     method: 'get',
     params: query
   })
@@ -12,7 +12,7 @@ export function workOrderProgress(query) {
 // 楼层生产数据
 export function productProgress(query) {
   return request({
-    url: '/fifthMesBorder/productProgress',
+    url: 'fifthMesBorder/productProgress',
     method: 'get',
     params: query
   })
@@ -21,7 +21,7 @@ export function productProgress(query) {
 // 组员生产合格率
 export function productionQualified(query) {
   return request({
-    url: '/fifthMesBorder/productionQualified',
+    url: 'fifthMesBorder/productionQualified',
     method: 'get',
     params: query
   })
@@ -30,7 +30,7 @@ export function productionQualified(query) {
 // 工时统计
 export function orderTime(query) {
   return request({
-    url: '/fifthMesBorder/orderTime',
+    url: 'fifthMesBorder/orderTime',
     method: 'get',
     params: query
   })
diff --git a/hw-ui/src/assets/board/energy.jpg b/hw-ui/src/assets/board/energy.jpg
new file mode 100644
index 00000000..3f07194a
Binary files /dev/null and b/hw-ui/src/assets/board/energy.jpg differ
diff --git a/hw-ui/src/assets/board/productionBg4.jpg b/hw-ui/src/assets/board/productionBg4.jpg
new file mode 100644
index 00000000..2eb92efb
Binary files /dev/null and b/hw-ui/src/assets/board/productionBg4.jpg differ
diff --git a/hw-ui/src/views/board/production/firstFloor.vue b/hw-ui/src/views/board/production/firstFloor.vue
index a77f31aa..fa48787a 100644
--- a/hw-ui/src/views/board/production/firstFloor.vue
+++ b/hw-ui/src/views/board/production/firstFloor.vue
@@ -2,14 +2,15 @@
   <div class="app-container">
     <div class="headTitle">京源生产监控平台</div>
     <div class="centerImg"></div>
-    <div class="time">{{
-        time
-      }}
+    <div class="status" style="top: 75%;left: 60%">当前楼层：3F</div>
+    <div class="status" style="top: 75%;left: 85%">状态：
+      <span style="color: #67C23A">出库中</span>
     </div>
-    <div class="status">
-      <span>3F </span>
-      <span style="color: #67C23A">上升 </span>
-      <span style="color: #F56C6C">出库 </span>
+    <div class="status" style="top: 85%;left: 60%">起始楼层：
+      <span style="color: #F56C6C">1F</span>
+    </div>
+    <div class="status" style="top: 85%;left: 85%">目标楼层：
+      <span style="color: #F56C6C">3F</span>
     </div>
     <div v-for="(i,k) in title"
          :style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'"
@@ -17,26 +18,79 @@
     >
       {{ 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 style="background-color: #1077bc19;height: 50px;line-height: 50px;">
+        <div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 11%">
+          任务编号
+        </div>
+        <div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 31%">
+          销售订单
+        </div>
+        <div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 13%">
+          产线
+        </div>
+        <div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 13%">
+          成品名称
+        </div>
+        <div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 11%">
+          成品规格
+        </div>
+        <div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 11%">
+          数量
+        </div>
+        <div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 10%">
+          状态
         </div>
       </div>
-    </div>
-    <div class="chart3">
-      <Chart key="chart3" ref="chart3"></Chart>
-    </div>
-    <div class="chart4">
-      <Chart key="chart4" ref="chart4"></Chart>
+      <vue-seamless-scroll
+        :class-option="scrollTableOption"
+        :data="scrollTableData1"
+        class="case-item"
+        style="height: calc(100% - 50px);overflow: hidden;"
+      >
+        <div
+          v-for="(item, index) in scrollTableData1"
+          :key="index"
+        >
+          <div :style='"background-color:" + ((index % 2 === 0)? "#1077bc19":"#1077bc05") '>
+            <div
+              class="scrollTableItem" style="width: 11%"
+            >
+              {{ item.processId }}
+            </div>
+            <div
+              class="scrollTableItem" style="width: 31%"
+            >
+              {{ item.processName }}
+            </div>
+            <div
+              class="scrollTableItem" style="width: 13%"
+            >
+              {{ item.planAmount }}
+            </div>
+            <div
+              class="scrollTableItem" style="width: 13%"
+            >
+              {{ item.completeAmount }}
+            </div>
+            <div
+              class="scrollTableItem" style="width: 11%"
+            >
+              {{ item.quantityAmount }}
+            </div>
+            <div
+              class="scrollTableItem" style="width: 11%"
+            >
+              {{ item.finishingRate }}%
+            </div>
+            <div
+              class="scrollTableItem" style="width: 11%"
+            >
+              {{ item.finishingRate }}%
+            </div>
+          </div>
+        </div>
+      </vue-seamless-scroll>
     </div>
   </div>
 </template>
@@ -72,8 +126,8 @@ export default {
       time: parseTime(new Date(), '{y}-{m}-{d} 星期{a} {h}:{i}:{s}'),
       title: [
         '工序生产进度',
-        '工序名称对比',
-        '七日产量对比',
+        '提升机状态',
+        ' ',
         ' ',
         ' ',
         ' ',
@@ -83,12 +137,12 @@ export default {
       ],
       titlePosition: [
         {
-          top: 11.3,
+          top: 19.3,
           left: 5.5
         },
         {
-          top: 11.3,
-          left: 75
+          top: 19.3,
+          left: 52.4
         },
         {
           top: 70.3,
@@ -139,8 +193,6 @@ export default {
     this.getData()
 
     window.onresize = () => {
-      this.$refs.chart1.chart.resize()
-      this.$refs.chart3.chart.resize()
     }
   },
   methods: {
@@ -157,134 +209,6 @@ export default {
           }
         })
       })
-      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]
-          }
-        ]
-      })
 
     }
   }
@@ -293,7 +217,7 @@ export default {
 <style lang="less" scoped>
 
 .app-container {
-  background-image: url("../../../assets/board/productionBg1_1.jpg");
+  background-image: url("../../../assets/board/warehouseBg3_2.jpg");
   background-repeat: no-repeat;
   background-size: 100% 100%;
   width: 100%;
@@ -338,10 +262,10 @@ export default {
 
 .centerImg {
   position: absolute;
-  top: 50%;
-  left: 50%;
+  top: 45%;
+  left: 75%;
   width: 30%;
-  height: 23.96vw;
+  height: 42.6%;
   background-image: url("../../../assets/board/center.png");
   background-repeat: no-repeat;
   background-size: 100% 100%;
@@ -375,22 +299,11 @@ export default {
 }
 
 .chart2 {
-  //position: absolute;
-  //top: 66%;
-  //left: 3.3%;
-  //width: 23.8%;
-  //height: 29%;
-
   position: absolute;
-  top: 14.5%;
+  top: 22.5%;
   left: 3.3%;
-  width: 23.8%;
-  height: 51%;
-  overflow: auto;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
+  width: 45.6%;
+  height: 72.5%;
 
 }
 
@@ -417,8 +330,6 @@ export default {
 
 .status {
   position: absolute;
-  top: 16%;
-  left: 50%;
   transform: translate(-50%, -50%);
   font-size: 1.5vw;
   color: #eee;
diff --git a/hw-ui/src/views/board/production/firstFloor1.vue b/hw-ui/src/views/board/production/firstFloor1.vue
new file mode 100644
index 00000000..a77f31aa
--- /dev/null
+++ b/hw-ui/src/views/board/production/firstFloor1.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/fourthFloor.vue b/hw-ui/src/views/board/production/fourthFloor.vue
index 31a958dc..9fecf29e 100644
--- a/hw-ui/src/views/board/production/fourthFloor.vue
+++ b/hw-ui/src/views/board/production/fourthFloor.vue
@@ -29,8 +29,23 @@
     <div class="chart3">
       <Chart key="chart3" ref="chart3"></Chart>
     </div>
-    <div class="chart4">
-      <Chart key="chart4" ref="chart4"></Chart>
+    <div class="chart4_1">
+<!--      <Chart key="chart4_1" ref="chart4_1"></Chart>-->
+      <el-progress :width="12*vw" type="circle" :percentage="55" :format="(e)=>` `" :stroke-width="vw" style="margin-top: 50%;margin-left: 50%;transform: translate(-50%,-50%)"></el-progress>
+      <div class="span">10%<br>良率</div>
+    </div>
+    <div class="chart4_2">
+<!--      <Chart key="chart4_2" ref="chart4_2"></Chart>-->
+      <el-progress :width="12*vw" type="circle" :percentage="55" :format="(e)=>` `" :stroke-width="vw" style="margin-top: 50%;margin-left: 50%;transform: translate(-50%,-50%)"></el-progress>
+      <div class="span">10%<br>不良率</div>
+    </div>
+    <div class="chart4_3">
+<!--      <Chart key="chart4_3" ref="chart4_3"></Chart>-->
+      <el-progress :width="12*vw" type="circle" :percentage="55" :format="(e)=>` `" :stroke-width="vw" style="margin-top: 50%;margin-left: 50%;transform: translate(-50%,-50%)"></el-progress>
+      <div class="span">10%<br>物料利用率</div>
+    </div>
+    <div class="chart5">
+      <Chart key="chart5" ref="chart5"></Chart>
     </div>
   </div>
 </template>
@@ -57,6 +72,7 @@ export default {
   },
   data() {
     return {
+      vw:(window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth)/100,
       LineStatus: true,
       topData: {
         planAmount: [0, 0, 0, 0],
@@ -135,6 +151,7 @@ export default {
     window.onresize = () => {
       this.$refs.chart1.chart.resize()
       this.$refs.chart3.chart.resize()
+      this.$refs.chart5.chart.resize()
     }
   },
   methods: {
@@ -178,25 +195,46 @@ export default {
         ]
       })
       this.$refs.chart3.setData({
-        grid: {
-          top: 30,
-          left: '2%',
-          right: '5%',
-          bottom: '2%',
-          containLabel: true
-        },
-        legend: {
-          textStyle: {
-            color: '#fff'
-          }
-        },
-
         tooltip: {
-          trigger: 'axis'
+          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: 'category',
-          data: [1, 2, 3],
+          type: 'value',
           axisLabel: {
             margin: 10,
             color: '#ffffff63'
@@ -218,67 +256,188 @@ export default {
             }
           }
         },
-        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'
-              }
-            },
+            name: '',
+            type: 'bar',
+            barMaxWidth: '40px',
+            barWidth: '40%',
             itemStyle: {
-              color: 'red',
-              borderColor: '#fff',
-              borderWidth: 3
+
+              color: new echarts.graphic.LinearGradient(
+                0,
+                0,
+                1,
+                0,
+                [
+                  {
+                    offset: 0,
+                    color: '#0a2ad7'
+                  },
+                  {
+                    offset: 1,
+                    color: '#138dd7'
+                  }
+                ],
+                false
+              )
             },
-            tooltip: {
-              // show: false,
+            data:[11,22,3]
+          },
+          {
+            name: '',
+            type: 'pictorialBar',
+            barWidth: '40%',
+            barMaxWidth: '40px',
+            symbolSize: [5, '100%'],
+            symbolPosition: 'end',
+            symbolOffset: [3, 0],
+            barGap: '-100%',
+            itemStyle: {
+              color: '#138dd7'
             },
-            data: [1, 2, 3]
+            data:[11,22,3]
           }
         ]
       })
+      this.$refs.chart5.setData({
+        color: ["#EAEA26", "#906BF9", "#FE5656", "#01E17E", "#3DD1F9", "#FFAD05"],
+        grid: {
+          left: -100,
+          top: 50,
+          bottom: 10,
+          right: 10,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "item",
+          formatter: "{b} : {c} ({d}%)",
+        },
+        legend: {
+          type: "scroll",
+          orient: "vartical",
+          // x: "right",
+          top: "center",
+          right: "15",
+          // bottom: "0%",
+          itemWidth: 16,
+          itemHeight: 8,
+          itemGap: 16,
+          textStyle: {
+            color: "#A3E2F4",
+            fontSize: 12,
+            fontWeight: 0,
+          },
+        },
+        polar: {},
+        angleAxis: {
+          interval: 1,
+          type: "category",
+          data: [],
+          z: 10,
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: "#0B4A6B",
+              width: 1,
+              type: "solid",
+            },
+          },
+          axisLabel: {
+            interval: 0,
+            show: true,
+            color: "#0B4A6B",
+            margin: 8,
+            fontSize: 16,
+          },
+        },
+        radiusAxis: {
+          min: 40,
+          max: 120,
+          interval: 20,
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: "#0B3E5E",
+              width: 1,
+              type: "solid",
+            },
+          },
+          axisLabel: {
+            formatter: "{value} %",
+            show: false,
+            padding: [0, 0, 20, 0],
+            color: "#0B3E5E",
+            fontSize: 16,
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#0B3E5E",
+              width: 2,
+              type: "solid",
+            },
+          },
+        },
+        calculable: true,
+        series: [
+          {
+            stack: "a",
+            type: "pie",
+            radius: ["20%", "80%"],
+            roseType: "area",
+            zlevel: 10,
+            label: {
+              normal: {
+                show: true,
+                formatter: "{c}",
+                textStyle: {
+                  fontSize: 12,
+                },
+                position: "outside",
+              },
+              emphasis: {
+                show: true,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: true,
+                length: 20,
+                length2: 55,
+              },
+              emphasis: {
+                show: false,
+              },
+            },
+            data: [
+              {
+                value: 10,
+                name: "设备1",
+              },
+              {
+                value: 5,
+                name: "设备2",
+              },
+              {
+                value: 15,
+                name: "设备3",
+              },
+              {
+                value: 25,
+                name: "设备4",
+              },
+              {
+                value: 20,
+                name: "设备5",
+              },
+              {
+                value: 35,
+                name: "设备6",
+              },
+            ],
+          },
+        ],
+      })
 
     }
   }
@@ -287,7 +446,7 @@ export default {
 <style lang="less" scoped>
 
 .app-container {
-  background-image: url("../../../assets/board/productionBg1_4.jpg");
+  background-image: url("../../../assets/board/productionBg4.jpg");
   background-repeat: no-repeat;
   background-size: 100% 100%;
   width: 100%;
@@ -295,6 +454,9 @@ export default {
   position: absolute;
   top: 0;
   left: 0;
+  &::-webkit-scrollbar{
+    display: none;
+  }
 }
 
 .headTitle {
@@ -363,9 +525,9 @@ export default {
 .chart1 {
   position: absolute;
   top: 14.5%;
-  left: 73%;
-  width: 23.8%;
-  height: 51%;
+  left: 66.5%;
+  width: 30%;
+  height: 40%;
 }
 
 .chart2 {
@@ -378,8 +540,8 @@ export default {
   position: absolute;
   top: 14.5%;
   left: 3.3%;
-  width: 23.8%;
-  height: 51%;
+  width: 30.3%;
+  height: 40.1%;
   overflow: auto;
 
   &::-webkit-scrollbar {
@@ -390,11 +552,70 @@ export default {
 
 .chart3 {
   position: absolute;
-  top: 74%;
+  top: 63.3%;
   left: 3.3%;
-  width: 92.8%;
-  height: 21%;
+  width: 46%;
+  height: 31.5%;
+}
 
+.chart4_1 {
+  position: absolute;
+  top: 63.3%;
+  left: 50.6%;
+  width: 15%;
+  height: 31.5%;
+  overflow: hidden;
+  .span{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    color: #20a0ff;
+    text-align: center;
+    font-size: 1.5vw;
+  }
+}
+.chart4_2 {
+  position: absolute;
+  top: 63.3%;
+  left: 66%;
+  width: 15%;
+  height: 31.5%;
+  overflow: hidden;
+  .span{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    color: #20a0ff;
+    text-align: center;
+    font-size: 1.5vw;
+  }
+}
+.chart4_3 {
+  position: absolute;
+  top: 63.3%;
+  left: 81.5%;
+  width: 15%;
+  height: 31.5%;
+  overflow: hidden;
+  .span{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    color: #20a0ff;
+    text-align: center;
+    font-size: 1.5vw;
+  }
+}
+
+.chart5 {
+  position: absolute;
+  top: 14.5%;
+  left: 34.9%;
+  width: 30.3%;
+  height: 40.1%;
 }
 
 
diff --git a/hw-ui/src/views/board/warehouse/firstFloor.vue b/hw-ui/src/views/board/warehouse/firstFloor.vue
index 3bb96971..765ddfed 100644
--- a/hw-ui/src/views/board/warehouse/firstFloor.vue
+++ b/hw-ui/src/views/board/warehouse/firstFloor.vue
@@ -7,12 +7,6 @@
     >
       {{ 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">
       <Chart key="chart3" ref="chart3"></Chart>
     </div>
@@ -76,83 +70,10 @@
       </vue-seamless-scroll>
     </div>
 
-    <div class="table2">
-      <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;">
-          Bom分解
-        </div>
-        <div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
-          时间
-        </div>
-      </div>
-      <vue-seamless-scroll
-        :class-option="scrollTableOption"
-        :data="scrollTableData1"
-        class="case-item"
-        style="height: calc(100% - 30px);overflow: hidden;"
-      >
-        <div
-          v-for="(item, index) in scrollTableData1"
-          :key="index"
-        >
-          <div :style='"background-color:" + ((index % 2 === 0)? "#1077bc19":"#1077bc05") '>
-            <div
-              class="scrollTableItem"
-            >
-              {{ item.orderCode }}
-            </div>
-            <div
-              class="scrollTableItem"
-            >
-              {{ item.materialName }}
-            </div>
-            <div
-              class="scrollTableItem"
-            >
-              {{ item.saleAmount }}
-            </div>
-            <div
-              class="scrollTableItem"
-            >
-              <!--              {{ item.value4 }}-->
-            </div>
-            <div
-              class="scrollTableItem"
-            >
-              {{ item.releaseTime }}
-            </div>
-          </div>
-        </div>
-      </vue-seamless-scroll>
-    </div>
-
-    <div class="num1 num1_1" style="top: 11.9%;left:17.4%;color:#5fc2f2">{{ topData.num1[0] }}</div>
-    <div class="num1 num1_2" style="top: 11.9%;left:21%;color:#5fc2f2">{{ topData.num1[1] }}</div>
-    <div class="num1 num1_3" style="top: 11.9%;left:24.5%;color:#5fc2f2">{{ topData.num1[2] }}</div>
-    <div class="num1 num1_4" style="top: 11.9%;left:28.1%;color:#5fc2f2">{{ topData.num1[3] }}</div>
-    <div class="num1 num1_5" style="top: 11.9%;left:50%;color:#59ee7b">{{ topData.num2[0] }}</div>
-    <div class="num1 num1_6" style="top: 11.9%;left:53.6%;color:#59ee7b">{{ topData.num2[1] }}</div>
-    <div class="num1 num1_7" style="top: 11.9%;left:57%;color:#59ee7b">{{ topData.num2[2] }}</div>
-    <div class="num1 num1_8" style="top: 11.9%;left:60.7%;color:#59ee7b">{{ topData.num2[3] }}</div>
-    <div class="num1 num1_9" style="top: 11.9%;left:82.6%;color:#f60008">{{ topData.num3[0] }}</div>
-    <div class="num1 num1_10" style="top: 11.9%;left:86.2%;color:#f60008">{{ topData.num3[1] }}</div>
-    <div class="num1 num1_11" style="top: 11.9%;left:89.7%;color:#f60008">{{ topData.num3[2] }}</div>
-    <div class="num1 num1_12" style="top: 11.9%;left:93.2%;color:#f60008">{{ topData.num3[3] }}</div>
 
   </div>
 </template>
 
-<!--// 柱状图 每个烘房耗电量 x轴 保留 - 后的 y轴 expend-->
-<!--  质量接口 柱状图 +折线图 合格率和数量   -->
 
 <script>
 import vueSeamlessScroll from 'vue-seamless-scroll'
@@ -184,9 +105,9 @@ export default {
         num3: [0, 0, 0, 0]
       },
       title: [
-        '原料库入库数量:',
-        '原料库出库数量:',
-        '半成品入库数量:',
+        ' ',
+        ' ',
+        ' ',
         '  ',
         '  ',
         '库存占比'
@@ -559,7 +480,7 @@ export default {
 <style lang="less" scoped>
 
 .app-container {
-  background-image: url("../../../assets/board/warehouseBg3.jpg");
+  background-image: url("../../../assets/board/energy.jpg");
   background-repeat: no-repeat;
   background-size: 100% 100%;
   width: 100%;
@@ -569,17 +490,6 @@ export default {
   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;
@@ -624,10 +534,10 @@ export default {
 
 .chart3 {
   position: absolute;
-  top: 22.5%;
-  left: 50.4%;
-  width: 46%;
-  height: 32%;
+  top: 58.8%;
+  left: 3.4%;
+  width: 93.2%;
+  height: 36%;
 }
 
 
@@ -643,10 +553,10 @@ export default {
 
 .table1 {
   position: absolute;
-  top: 62.9%;
+  top: 14.9%;
   left: 3.4%;
-  width: 45.7%;
-  height: 32%;
+  width: 93.3%;
+  height: 35.9%;
   color: #fff;
 }
 
diff --git a/hw-ui/src/views/board/warehouse/firstFloor1.vue b/hw-ui/src/views/board/warehouse/firstFloor1.vue
new file mode 100644
index 00000000..3bb96971
--- /dev/null
+++ b/hw-ui/src/views/board/warehouse/firstFloor1.vue
@@ -0,0 +1,670 @@
+<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">
+      <Chart key="chart3" ref="chart3"></Chart>
+    </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.taskCode }}
+            </div>
+            <div
+              class="scrollTableItem"
+            >
+              入库
+            </div>
+            <div
+              class="scrollTableItem"
+            >
+              {{ item.materialName }}
+            </div>
+            <div
+              class="scrollTableItem"
+            >
+              {{ item.locationCode }}
+            </div>
+            <div
+              class="scrollTableItem"
+            >
+              {{ item.applylate }}
+            </div>
+          </div>
+        </div>
+      </vue-seamless-scroll>
+    </div>
+
+    <div class="table2">
+      <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;">
+          Bom分解
+        </div>
+        <div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
+          时间
+        </div>
+      </div>
+      <vue-seamless-scroll
+        :class-option="scrollTableOption"
+        :data="scrollTableData1"
+        class="case-item"
+        style="height: calc(100% - 30px);overflow: hidden;"
+      >
+        <div
+          v-for="(item, index) in scrollTableData1"
+          :key="index"
+        >
+          <div :style='"background-color:" + ((index % 2 === 0)? "#1077bc19":"#1077bc05") '>
+            <div
+              class="scrollTableItem"
+            >
+              {{ item.orderCode }}
+            </div>
+            <div
+              class="scrollTableItem"
+            >
+              {{ item.materialName }}
+            </div>
+            <div
+              class="scrollTableItem"
+            >
+              {{ item.saleAmount }}
+            </div>
+            <div
+              class="scrollTableItem"
+            >
+              <!--              {{ item.value4 }}-->
+            </div>
+            <div
+              class="scrollTableItem"
+            >
+              {{ item.releaseTime }}
+            </div>
+          </div>
+        </div>
+      </vue-seamless-scroll>
+    </div>
+
+    <div class="num1 num1_1" style="top: 11.9%;left:17.4%;color:#5fc2f2">{{ topData.num1[0] }}</div>
+    <div class="num1 num1_2" style="top: 11.9%;left:21%;color:#5fc2f2">{{ topData.num1[1] }}</div>
+    <div class="num1 num1_3" style="top: 11.9%;left:24.5%;color:#5fc2f2">{{ topData.num1[2] }}</div>
+    <div class="num1 num1_4" style="top: 11.9%;left:28.1%;color:#5fc2f2">{{ topData.num1[3] }}</div>
+    <div class="num1 num1_5" style="top: 11.9%;left:50%;color:#59ee7b">{{ topData.num2[0] }}</div>
+    <div class="num1 num1_6" style="top: 11.9%;left:53.6%;color:#59ee7b">{{ topData.num2[1] }}</div>
+    <div class="num1 num1_7" style="top: 11.9%;left:57%;color:#59ee7b">{{ topData.num2[2] }}</div>
+    <div class="num1 num1_8" style="top: 11.9%;left:60.7%;color:#59ee7b">{{ topData.num2[3] }}</div>
+    <div class="num1 num1_9" style="top: 11.9%;left:82.6%;color:#f60008">{{ topData.num3[0] }}</div>
+    <div class="num1 num1_10" style="top: 11.9%;left:86.2%;color:#f60008">{{ topData.num3[1] }}</div>
+    <div class="num1 num1_11" style="top: 11.9%;left:89.7%;color:#f60008">{{ topData.num3[2] }}</div>
+    <div class="num1 num1_12" style="top: 11.9%;left:93.2%;color:#f60008">{{ topData.num3[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 {
+  bomInfo,
+  inAndOutInfo,
+  productInAndOutInfo,
+  purchaseInfo,
+  stockPercentage
+} from '@/api/board/firstFloorWarehouse'
+import { parseTime } from '@/utils/ruoyi'
+
+const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
+export default {
+  name: 'Board1',
+  components: {
+    vueSeamlessScroll,
+    Chart,
+    HighChart
+  },
+  data() {
+    return {
+      topData: {
+        num1: [0, 0, 0, 0],
+        num2: [0, 0, 0, 0],
+        num3: [0, 0, 0, 0]
+      },
+      title: [
+        '原料库入库数量:',
+        '原料库出库数量:',
+        '半成品入库数量:',
+        '  ',
+        '  ',
+        '库存占比'
+      ],
+      titlePosition: [
+        {
+          top: 11.5,
+          left: 7.5
+        },
+        {
+          top: 11.5,
+          left: 40.3
+        },
+        {
+          top: 11.5,
+          left: 72.8
+        },
+        {
+          top: 11.5,
+          left: 60.3
+        },
+        {
+          top: 11.5,
+          left: 79.1
+        },
+        {
+          top: 19.4,
+          left: 5.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: [],
+      scrollTableData1: []
+    }
+  },
+  mounted() {
+    this.getData()
+
+    window.onresize = () => {
+      this.$refs.chart1.resize()
+      this.$refs.chart2.resize()
+      this.$refs.chart3.resize()
+    }
+  },
+  methods: {
+    getData() {
+      inAndOutInfo().then(e => {
+        console.log(e)
+        this.topData.num1= [...[0, 0, 0, 0], ...(e.data.inStocks.find(v=>v.warehouseId===111)?.outstockAmount || 0).toString().split('')].slice(-4)
+        this.topData.num2= [...[0, 0, 0, 0], ...(e.data.rawOutstocks?.find(v=>v.warehouseId===111)?.outstockAmount || 0).toString().split('')].slice(-4)
+        this.topData.num3= [...[0, 0, 0, 0], ...(e.data.inStocks.find(v=>v.warehouseId===131)?.outstockAmount || 0).toString().split('')].slice(-4)
+      })
+      stockPercentage().then(e => {
+        let num1 = e.data.nostockAmount + e.data.stockAmount
+        let num2 = e.data.stockAmount
+        let num2_1
+        let num3 = e.data.nostockAmount
+        let num3_1
+        if (num1 === 0) {
+          num2_1 = 50
+          num3_1 = 50
+        } else {
+          num2_1 = parseFloat(((num2 / num1) * 100).toFixed(2))
+          num3_1 = parseFloat(((num3 / num1) * 100).toFixed(2))
+        }
+        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: num2_1,
+                  h: Math.min(num2_1, 50)
+                },
+                {
+                  name: '未使用',
+                  y: num3_1,
+                  h: Math.min(num3_1, 50)
+                }
+              ].sort((a, b) => a.y - b.y)
+            }]
+        })
+        let num11 = e.data.noProductstockAmount + e.data.productstockAmount
+        let num12 = e.data.productstockAmount
+        let num12_1
+        let num13 = e.data.noProductstockAmount
+        let num13_1
+        if (num11 === 0) {
+          num12_1 = 50
+          num13_1 = 50
+        } else {
+          num12_1 = parseFloat(((num12 / num11) * 100).toFixed(2))
+          num13_1 = parseFloat(((num13 / num11) * 100).toFixed(2))
+        }
+        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: num12_1,
+                  h: num12_1
+                },
+                {
+                  name: '未使用',
+                  y: num12_1,
+                  h: num12_1
+                }
+              ].sort((a, b) => a.y - b.y)
+            }]
+        })
+      })
+      purchaseInfo().then(e => {
+        this.scrollTableData = e.data
+      })
+      bomInfo().then(e => {
+        this.scrollTableData1 = e.data
+      })
+      productInAndOutInfo().then(e => {
+        this.$refs.chart3.setData({
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              // 坐标轴指示器，坐标轴触发有效
+              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+            }
+          },
+          grid: {
+            left: '2%',
+            right: '4%',
+            bottom: '14%',
+            top: '16%',
+            containLabel: true
+          },
+          legend: {
+            x: 'center',
+            top: 12,
+            textStyle: {
+              color: '#fff'
+            },
+            itemWidth: 12,
+            itemHeight: 10
+            // itemGap: 35
+          },
+          xAxis: {
+            type: 'category',
+            data: e.data.map(v => parseTime(v.day, '{m}-{d}')),
+            axisLine: {
+              lineStyle: {
+                color: 'white'
+              }
+            },
+            axisLabel: {
+              // interval: 0,
+              // rotate: 40,
+              textStyle: {
+                fontFamily: 'Microsoft YaHei'
+              }
+            }
+          },
+
+          yAxis: {
+            type: 'value',
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: 'white'
+              }
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: 'rgba(255,255,255,0.3)'
+              }
+            },
+            axisLabel: {}
+          },
+          series: [
+            {
+              name: '入库',
+              type: 'bar',
+              barWidth: '15%',
+              itemStyle: {
+                normal: {
+                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    {
+                      offset: 0,
+                      color: '#fccb05'
+                    },
+                    {
+                      offset: 1,
+                      color: '#f5804d'
+                    }
+                  ])
+                }
+              },
+              data: e.data.map(v => v.instockAmount)
+            },
+            {
+              name: '出库',
+              type: 'bar',
+              barWidth: '15%',
+              itemStyle: {
+                normal: {
+                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    {
+                      offset: 0,
+                      color: '#8bd46e'
+                    },
+                    {
+                      offset: 1,
+                      color: '#09bcb7'
+                    }
+                  ])
+                }
+              },
+              data: e.data.map(v => v.outStockAmount)
+            }
+          ]
+        })
+      })
+    }
+  }
+}
+</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: 22.5%;
+  left: 50.4%;
+  width: 46%;
+  height: 32%;
+}
+
+
+.span {
+  position: absolute;
+  transform: translateY(-50%);
+}
+
+.span1 {
+  position: absolute;
+  transform: translate(-50%, -50%);
+}
+
+.table1 {
+  position: absolute;
+  top: 62.9%;
+  left: 3.4%;
+  width: 45.7%;
+  height: 32%;
+  color: #fff;
+}
+
+.table2 {
+  position: absolute;
+  top: 62.9%;
+  left: 50.4%;
+  width: 45.7%;
+  height: 32%;
+  color: #fff;
+}
+
+.scrollTableItem {
+  display: inline-block;
+  width: calc(100% / 5);
+  text-align: center;
+  padding: 14px 0;
+  color: #4e99c5
+}
+
+</style>
diff --git a/hw-ui/src/views/board/warehouse/fourthFloor.vue b/hw-ui/src/views/board/warehouse/fourthFloor.vue
index 3bb96971..3d13227f 100644
--- a/hw-ui/src/views/board/warehouse/fourthFloor.vue
+++ b/hw-ui/src/views/board/warehouse/fourthFloor.vue
@@ -8,11 +8,12 @@
       {{ i }}
     </div>
     <div class="chart1">
-      <HighChart key="chart1" ref="chart1"></HighChart>
-    </div>
-    <div class="chart2">
-      <HighChart key="chart2" ref="chart2"></HighChart>
+<!--      <HighChart key="chart1" ref="chart1"></HighChart>-->
+      <Chart key="chart1" ref="chart1"></Chart>
     </div>
+<!--    <div class="chart2">-->
+<!--      <HighChart key="chart2" ref="chart2"></HighChart>-->
+<!--    </div>-->
     <div class="chart3">
       <Chart key="chart3" ref="chart3"></Chart>
     </div>
@@ -262,88 +263,110 @@ export default {
           num3_1 = parseFloat(((num3 / num1) * 100).toFixed(2))
         }
         this.$refs.chart1.setData({
-          title: {
-            text: '原料库存占比',
-            style: {
-              color: '#fff'
-            }
+          tooltip: {
+            trigger: 'item'
           },
-          credits: {
-            enabled: false
+          grid: {
+            borderWidth: 0,
+            top: '10%',
+            left: '10%',
+            right: '10%',
+            bottom: '10%'
           },
-          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
-                  })
-                })
+          yAxis: {
+            type: 'category',
+            axisLabel: {
+              margin: 10,
+              color: '#ffffff63'
+            },
+
+            axisTick: {
+              show: true,
+              lineStyle: {
+                color: '#ffffff1f'
               }
             },
-            options3d: {
-              enabled: true,
-              alpha: 60,
-              beta: 0
-            }
+            splitLine: {
+              show: true,
+              lineStyle: {
+                type: 'dashed',
+                color: '#ffffff1f'
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#fff3',
+                width: 2
+              }
+            },
+            data: [1,2,3]
           },
-          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 即可禁用图例点击事件
-                  }
-                }
+          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: [
             {
-              type: 'pie',
-              name: '占比',
-              data: [
-                {
-                  'name': '已使用',
-                  y: num2_1,
-                  h: Math.min(num2_1, 50)
-                },
-                {
-                  name: '未使用',
-                  y: num3_1,
-                  h: Math.min(num3_1, 50)
-                }
-              ].sort((a, b) => a.y - b.y)
-            }]
+              name: '',
+              type: 'bar',
+              barMaxWidth: '40px',
+              barWidth: '40%',
+              itemStyle: {
+
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  1,
+                  0,
+                  [
+                    {
+                      offset: 0,
+                      color: '#0a2ad7'
+                    },
+                    {
+                      offset: 1,
+                      color: '#138dd7'
+                    }
+                  ],
+                  false
+                )
+              },
+              data:[11,22,3]
+            },
+            {
+              name: '',
+              type: 'pictorialBar',
+              barWidth: '40%',
+              barMaxWidth: '40px',
+              symbolSize: [5, '100%'],
+              symbolPosition: 'end',
+              symbolOffset: [3, 0],
+              barGap: '-100%',
+              itemStyle: {
+                color: '#138dd7'
+              },
+              data:[11,22,3]
+            }
+          ]
         })
         let num11 = e.data.noProductstockAmount + e.data.productstockAmount
         let num12 = e.data.productstockAmount
@@ -610,7 +633,7 @@ export default {
   position: absolute;
   top: 22.5%;
   left: 3.4%;
-  width: 23%;
+  width: 46%;
   height: 32%;
 }