diff --git a/package.json b/package.json
index 8ec84e6..eccfdb4 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "axios": "^0.18.0",
     "babel-polyfill": "^6.26.0",
     "echarts": "^5.3.2",
+    "echarts-liquidfill": "^3.0.6",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.2",
     "vue": "^2.5.2",
diff --git a/src/pages/management/Chengpin.vue b/src/pages/management/Chengpin.vue
new file mode 100644
index 0000000..df12580
--- /dev/null
+++ b/src/pages/management/Chengpin.vue
@@ -0,0 +1,885 @@
+<template>
+<section class="bg">
+    <t-header title="海亮铜管件智能车间-成品仓储">
+      <p class="p1" @click="toJump">海亮铜管件智能车间直盘管下料看板</p>
+    </t-header>
+    <div class="container">
+      <div class="t_wrap">
+        <div class="c_wrap">
+          <div class="item_wrap">
+            <div class="item_tip">
+              <div class="item_tip_left">当前库存</div>
+            </div>
+            <div class="item_content item_content_1">
+              <div class="item_td_box_l">
+                <div class="item_td_box">
+                  <div class="item_td_inner">
+                    <div class="item_td_txt1">当前库存</div>
+                    <div class="item_td_txt2">1000<span>万个</span></div>
+                  </div>
+                  <div class="item_td_inner">
+                    <div class="item_td_txt1">剩余空位</div>
+                    <div class="item_td_txt2">100<span>个</span></div>
+                  </div>
+                </div>
+              </div>
+              <div class="item_td_box_r">
+                <div class="echart_zpg_wrap_1">
+                  <div id="echart_d1" style="width: 100%; height: 100%"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="c_wrap">
+          <div class="item_wrap">
+            <div class="item_tip">
+              <div class="item_tip_left">库存趋势</div>
+            </div>
+            <div class="item_content">
+              <div id="echart_d2" style="width: 100%; height: 100%"></div>
+            </div>
+          </div>
+        </div>
+        <div class="c_wrap">
+          <div class="item_wrap">
+            <div class="item_tip">
+              <div class="item_tip_left">出入库趋势</div>
+            </div>
+            <div class="item_content">
+              <div id="echart_d3" style="width: 100%; height: 100%"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="top_wrap">
+        <div class="left_wrap">
+          <div class="item_wrap">
+            <div class="item_tip">
+              <div class="item_tip_left">当天入库情况</div>
+            </div>
+            <div class="item_content item_content_1">
+              <div class="item_td_box_l2">
+                <div class="item_td_box">
+                  <div class="item_td_inner2">
+                    <div class="item_td_txt1">入库数</div>
+                    <div class="item_td_txt2">100<span>万个</span></div>
+                  </div>
+                  <div class="item_td_inner2">
+                    <div class="item_td_txt1">客户数</div>
+                    <div class="item_td_txt2">3<span>个</span></div>
+                  </div>
+                  <div class="item_td_inner2">
+                    <div class="item_td_txt1">托盘数</div>
+                    <div class="item_td_txt2">10<span>个</span></div>
+                  </div>
+                </div>
+              </div>
+              <div class="item_td_box_r2">
+                <div id="echart_d4" style="width: 100%; height: 100%"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="right_wrap">
+          <div class="item_wrap">
+            <div class="item_tip">
+              <div class="item_tip_left">当天出库情况</div>
+            </div>
+            <div class="item_content item_content_1">
+              <div class="item_td_box_l2">
+                <div class="item_td_box">
+                  <div class="item_td_inner2">
+                    <div class="item_td_txt1">出库数</div>
+                    <div class="item_td_txt2">100<span>万个</span></div>
+                  </div>
+                  <div class="item_td_inner2">
+                    <div class="item_td_txt1">客户数</div>
+                    <div class="item_td_txt2">3<span>个</span></div>
+                  </div>
+                  <div class="item_td_inner2">
+                    <div class="item_td_txt1">托盘数</div>
+                    <div class="item_td_txt2">10<span>个</span></div>
+                  </div>
+                </div>
+              </div>
+              <div class="item_td_box_r2">
+                <div id="echart_d5" style="width: 100%; height: 100%"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="bottom_wrap">
+        <div class="item_wrap_l">
+          <div class="item_tip item_tip_l">
+            <div class="item_tip_left">库存列表</div>
+          </div>
+          <div class="item_content"></div>
+        </div>
+      </div>
+    </div>
+    <section class="bottom"></section>
+</section>
+</template>
+
+<script>
+import THeader from '@components/header.vue'
+import 'echarts-liquidfill'
+export default {
+  name: 'Chengpin',
+  components: {
+    THeader
+  },
+  data () {
+    return {
+      myCharts1: '',
+      myCharts2: '',
+      myCharts3: '',
+      myCharts4: '',
+      myCharts5: '',
+      scollList1: [{time: '2020-1-1', p: '故障故障故障故障故障1'}, {time: '2020-1-1', p: '故障故障故障故障故障2'}, {time: '2020-1-1', p: '故障故障故障故障故障3'}, {time: '2020-1-1', p: '故障故障故障故障故障4'}, {time: '2020-1-1', p: '故障故障故障故障故障5'}, {time: '2020-1-1', p: '故障故障故障故障故障6'}],
+      arrL2: [{date: '2020-1-1', elbow_qty: '1', comprehensive_qty: '2'}]
+    }
+  },
+  computed: {
+    defaultOption1 () {
+      return {
+        step: 0.4, // 数值越大速度滚动越快
+        limitMoveNum: 7, // 开始无缝滚动的数据量 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: 1000 // 单步运动停止的时间(默认值1000ms)
+      }
+    }
+  },
+  mounted () {
+    this.setEchart1()
+    this.setEchart2()
+    this.setEchart3()
+    this.setEchart4()
+    this.setEchart5()
+  },
+  methods: {
+    toJump () {
+      this.$router.push('/ZhiPanGuan')
+    },
+    setEchart1 () {
+      // let value = 0.6104
+      // let option = {
+      //   series: [
+      //     {
+      //       name: '水球图',
+      //       type: 'liquidFill',
+      //       radius: '80%',
+      //       center: ['50%', '55%'],
+      //       waveAnimation: 10, // 动画时长
+      //       amplitude: 20, // 振幅
+      //       data: [0.3],
+      //       color: 'rgba(68, 197, 253,1)',
+      //       label: {
+      //         normal: {
+      //           color: '#44C5FD',
+      //           textStyle: {
+      //             fontSize: 18,
+      //             fontWeight: 'normal'
+      //           }
+      //         }
+      //       },
+      //       outline: {
+      //         show: true,
+      //         borderDistance: 5,
+      //         itemStyle: {
+      //           borderColor: 'rgba(68, 197, 253,1)',
+      //           borderWidth: 2
+      //         }
+      //       },
+      //       backgroundStyle: {
+      //         color: 'rgba(68, 197, 253,.3)'
+      //       }
+      //     }
+      //   ]
+      // }
+      let option2 = {
+        center: ['45%', '60%'],
+        series: [
+          {
+            name: '目前完成量',
+            type: 'liquidFill',
+            radius: '75%',
+            center: ['50%', '50%'],
+            data: [0.5],
+            color: 'rgba(67,209,100,1)',
+            itemStyle: {
+              color: 'rgba(67,209,100,1)'
+              // opacity: 0.6,
+            },
+            label: {
+              normal: {
+                color: '#fff',
+                insideColor: 'transparent',
+                textStyle: {
+                  fontSize: 28,
+                  fontWeight: 'bold',
+                  fontFamily: 'Microsoft YaHei'
+                }
+              }
+            },
+            outline: {
+              show: true,
+              borderDistance: 5,
+              itemStyle: {
+                borderColor: 'rgba(67,209,100,1)',
+                borderWidth: 2
+              }
+            },
+            backgroundStyle: {
+              color: '#bae6c5'
+            }
+          }
+        ]
+      }
+      let echart = document.getElementById('echart_d1')
+      this.myCharts1 = this.$echarts.init(echart)
+      this.myCharts1.setOption(option2)
+      window.addEventListener('resize', () => {
+        this.myCharts1.resize()
+      })
+    },
+    setEchart2 () {
+      let date = ['6-1', '6-2', '6-3', '6-4', '6-5', '6-6', '6-7']
+      let qty = [100, 80, 90, 160, 130, 166, 130]
+      // this.arrL3.map(el => {
+      //   date.push(el.date)
+      //   qty.push(el.real_qty)
+      // })
+      let option = {
+        grid: {
+          top: 50,
+          left: 0,
+          right: 25,
+          bottom: 0,
+          containLabel: true
+        },
+        dataZoom: [
+          {
+            show: false, // 为true滚动条出现
+            type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动
+            startValue: 0, // 从头开始。
+            endValue: 9 // end百分比显示范围，endValue具体显示几个数值
+          }
+        ],
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              width: 2,
+              color: '#8FABBF'
+            }
+          },
+          axisLabel: {
+            interval: 0,
+            textStyle: {
+              color: '#8FABBF',
+              fontSize: 16
+              // align: 'center'
+            },
+            rotate: 50
+          },
+          data: date
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            show: false
+          },
+          splitNumber: 2,
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            textStyle: {
+              color: '#8FABBF',
+              fontSize: 14
+            }
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: [8, 4],
+              dashOffset: 4,
+              color: '#8FABBF'
+            }
+          }
+        },
+        series: [
+          {
+            name: '今日',
+            type: 'line',
+            smooth: true,
+            symbolSize: 5,
+            showSymbol: false,
+            itemStyle: {
+              normal: {
+                lineStyle: {
+                  color: '#33CCCC',
+                  width: 2.4
+                }
+              }
+            },
+            areaStyle: {
+              normal: {
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: 'rgba(38,191,191,0.50)'
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(31,89,89,0.00)'
+                  }
+                ], false)
+              }
+            },
+            data: qty
+          }
+        ]
+      }
+      let echart = document.getElementById('echart_d2')
+      if (this.myCharts2 !== '') {
+        this.myCharts2.dispose()
+      }
+      if (echart !== null) {
+        this.myCharts2 = this.$echarts.init(echart)
+        this.myCharts2.setOption(option)
+        // this.autoMove(option)
+        window.addEventListener('resize', () => {
+          this.myCharts2.resize()
+        })
+      }
+    },
+    setEchart3 () {
+      let date = ['6-1', '6-2', '6-3', '6-4', '6-5', '6-6', '6-7']
+      let qty = [100, 80, 90, 160, 130, 166, 130]
+      let qty2 = [110, 140, 120, 100, 120, 116, 190]
+      // this.arrL3.map(el => {
+      //   date.push(el.date)
+      //   qty.push(el.real_qty)
+      // })
+      let option = {
+        grid: {
+          top: 50,
+          left: 0,
+          right: 25,
+          bottom: 0,
+          containLabel: true
+        },
+        legend: {
+          icon: 'rect',
+          textStyle: {
+            color: '#fff',
+            fontSize: 14,
+            lineHeight: 14
+          },
+          itemGap: 30.86,
+          itemWidth: 14.16,
+          itemHeight: 7.38,
+          data: ['今日', '明日']
+        },
+        dataZoom: [
+          {
+            show: false, // 为true滚动条出现
+            type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动
+            startValue: 0, // 从头开始。
+            endValue: 9 // end百分比显示范围，endValue具体显示几个数值
+          }
+        ],
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              width: 2,
+              color: '#8FABBF'
+            }
+          },
+          axisLabel: {
+            interval: 0,
+            textStyle: {
+              color: '#8FABBF',
+              fontSize: 16
+              // align: 'center'
+            },
+            rotate: 50
+          },
+          data: date
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            show: false
+          },
+          splitNumber: 2,
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            textStyle: {
+              color: '#8FABBF',
+              fontSize: 14
+            }
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: [8, 4],
+              dashOffset: 4,
+              color: '#8FABBF'
+            }
+          }
+        },
+        series: [
+          {
+            name: '今日',
+            type: 'line',
+            smooth: true,
+            symbolSize: 5,
+            showSymbol: false,
+            color: '#0E90FD',
+            itemStyle: {
+              normal: {
+                lineStyle: {
+                  color: '#0E90FD',
+                  width: 2.4
+                }
+              }
+            },
+            areaStyle: {
+              normal: {
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: 'rgba(38,191,191,0.50)'
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(31,89,89,0.00)'
+                  }
+                ], false)
+              }
+            },
+            data: qty
+          },
+          {
+            name: '明日',
+            type: 'line',
+            smooth: true,
+            symbolSize: 5,
+            showSymbol: false,
+            color: '#F4A03F',
+            itemStyle: {
+              normal: {
+                lineStyle: {
+                  color: '#F4A03F',
+                  width: 2.4
+                }
+              }
+            },
+            areaStyle: {
+              normal: {
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: 'rgba(138,11,191,0.50)'
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(131,39,200,0.00)'
+                  }
+                ], false)
+              }
+            },
+            data: qty2
+          }
+        ]
+      }
+      let echart = document.getElementById('echart_d3')
+      if (this.myCharts3 !== '') {
+        this.myCharts3.dispose()
+      }
+      if (echart !== null) {
+        this.myCharts3 = this.$echarts.init(echart)
+        this.myCharts3.setOption(option)
+        // this.autoMove(option)
+        window.addEventListener('resize', () => {
+          this.myCharts3.resize()
+        })
+      }
+    },
+    setEchart4 () {
+      let total = [100, 200, 120, 133, 80, 155, 250]
+      let names = [1, 2, 3, 4, 5, 6, 7]
+      let max = 0
+      // this.chartData2.map(el => {
+      //   total.push(el.err_times)
+      //   names.push(el.device_name)
+      //   max = Math.max(max, Number(el.err_times))
+      // })
+      let option = {
+        dataZoom: [
+          {
+            show: false, // 为true滚动条出现
+            type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动
+            startValue: 0, // 从头开始。
+            endValue: 9 // end百分比显示范围，endValue具体显示几个数值
+          }
+        ],
+        grid: {
+          top: 30,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          borderColor: '#ffffff',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#8FABBF ',
+              fontSize: 14,
+              lineHeight: 14
+            }
+          },
+          axisLabel: {
+            color: '#8FABBF ',
+            rotate: 50
+          },
+          data: names
+        },
+        yAxis: {
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#909399'
+            }
+          },
+          axisLabel: {
+            color: '#909399'
+          },
+          splitLine: {
+            show: false,
+            lineStyle: {
+              type: [8, 4],
+              dashOffset: 4,
+              color: '#8FABBF',
+              opacity: 0.2
+            }
+          },
+          max: max
+        },
+        series: [
+          {
+            type: 'bar',
+            barWidth: 38,
+            itemStyle: {
+              normal: {
+                show: true,
+                // color: '#67c23a',
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#0E90FD',
+                    opacity: 1
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(96,112,128,0.10)',
+                    opacity: 0.1
+                  }
+                ]),
+                borderWidth: 0
+              }
+            },
+            // data: [100, 51, 90, 41, 91, 61, 51]
+            data: total
+          }
+        ]
+      }
+      let echart = document.getElementById('echart_d4')
+      this.myCharts4 = this.$echarts.init(echart)
+      this.myCharts4.setOption(option)
+      // this.autoMove(option, 3)
+      window.addEventListener('resize', () => {
+        this.myCharts4.resize()
+      })
+    },
+    setEchart5 () {
+      let total = [100, 200, 120, 133, 80, 155, 250]
+      let names = [1, 2, 3, 4, 5, 6, 7]
+      let max = 0
+      // this.chartData2.map(el => {
+      //   total.push(el.err_times)
+      //   names.push(el.device_name)
+      //   max = Math.max(max, Number(el.err_times))
+      // })
+      let option = {
+        dataZoom: [
+          {
+            show: false, // 为true滚动条出现
+            type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动
+            startValue: 0, // 从头开始。
+            endValue: 9 // end百分比显示范围，endValue具体显示几个数值
+          }
+        ],
+        grid: {
+          top: 30,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          borderColor: '#ffffff',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#8FABBF ',
+              fontSize: 14,
+              lineHeight: 14
+            }
+          },
+          axisLabel: {
+            color: '#8FABBF ',
+            rotate: 50
+          },
+          data: names
+        },
+        yAxis: {
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#909399'
+            }
+          },
+          axisLabel: {
+            color: '#909399'
+          },
+          splitLine: {
+            show: false,
+            lineStyle: {
+              type: [8, 4],
+              dashOffset: 4,
+              color: '#8FABBF',
+              opacity: 0.2
+            }
+          },
+          max: max
+        },
+        series: [
+          {
+            type: 'bar',
+            barWidth: 38,
+            itemStyle: {
+              normal: {
+                show: true,
+                // color: '#67c23a',
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#F4A03F',
+                    opacity: 1
+                  },
+                  {
+                    offset: 1,
+                    // color: 'rgba(96,112,128,0.10)',
+                    color: 'rgba(255,255,255,0.50)',
+                    opacity: 0.5
+                  }
+                ]),
+                borderWidth: 0
+              }
+            },
+            // data: [100, 51, 90, 41, 91, 61, 51]
+            data: total
+          }
+        ]
+      }
+      let echart = document.getElementById('echart_d5')
+      this.myCharts5 = this.$echarts.init(echart)
+      this.myCharts5.setOption(option)
+      // this.autoMove(option, 3)
+      window.addEventListener('resize', () => {
+        this.myCharts5.resize()
+      })
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import '~@css/mixin'
+.bg
+  _wh(100%, 100%)
+  overflow hidden
+.p1
+  position absolute
+  display block
+  cursor pointer
+  left .2509rem
+  top .22rem
+  font-family "SourceHanSansCN"
+  _font(.18rem, .30rem, #fff, 700,)
+  letter-spacing .01rem
+.container
+  _wh(100%, calc(100% - 1.38rem))
+  padding .3rem .2509rem 0
+  overflow hidden
+.bottom
+  _wh(100%, .38rem)
+  background center bottom / 19.06rem 100% url(../../assets/images/screen1/bottom.png) no-repeat
+.top_wrap
+  _wh(100%, 30%)
+  clear both
+.t_wrap
+  _wh(100%, 30%)
+  // clear both
+  display flex
+  justify-content: space-between
+  align-items center
+.bottom_wrap
+  _wh(100%, 40%)
+.c_wrap
+  width 32.5%
+.left_wrap
+  float left
+  width 49%
+.right_wrap
+  float right
+  width 49%
+.item_wrap
+  _wh(100%, 100%)
+.item_wrap_l
+  _wh(100%, 100%)
+.item_tip
+  _wh(100%, .32rem)
+  line-height .32rem
+  background center center / 100% 100% url(../../assets/images/screen1/title_bg_2.png) no-repeat
+.item_tip_l
+  background-image url(../../assets/images/screen1/title_bg_3.png)
+.item_tip_left
+  float left
+  _wh(60%, 100%)
+  font-family "SourceHanSansCN"
+  _font(.18rem, inherit, #fff, 700,)
+  letter-spacing .02rem
+  text-shadow 0 0 .09rem #159AFF
+  padding-left .38rem
+.item_content
+  _wh(100%, calc(100% - .32rem))
+  padding .17rem .17rem .24rem .17rem
+  background-color #011834
+.item_content_1
+  clear both
+.item_td_box_l
+  float left
+  _wh(50%, 100%)
+  padding-right .5rem
+  _fj()
+.item_td_box_l2
+  float left
+  _wh(30%, 100%)
+  padding-right .2rem
+  _fj()
+.item_td_box_r
+  float right
+  _wh(50%, 100%)
+  padding-left .5rem
+  _fj()
+  background center left / .02rem 1.42rem url(../../assets/images/screen1/line_3.png) no-repeat
+.item_td_box_r2
+  float right
+  _wh(70%, 100%)
+  padding-left .2rem
+  _fj()
+.item_td_box
+  width 50%
+.item_td_inner
+  _wh(1.8rem, .7rem)
+  background center bottom / 100% 100% url(../../assets/images/screen1/item_4.png) no-repeat
+  padding .05rem
+  &:nth-child(2)
+    margin-top .2rem
+.item_td_inner2
+  _wh(1.8rem, .7rem)
+  background center bottom / 100% 100% url(../../assets/images/screen1/item_4.png) no-repeat
+  padding .05rem
+  &:nth-child(2)
+    margin-top .03rem
+    margin-bottom .03rem
+.item_td_txt1
+  font-family "SourceHanSansCN"
+  _font(.14rem, .3rem, #78b1de,bold,center)
+.item_td_txt2
+  font-family "SourceHanSansCN"
+  _font(.18rem, .3rem, #fff,bold,center)
+  span
+    font-size .12rem
+    padding 0 .05rem
+.echart_zpg_wrap_1
+  _wh(100%, 100%)
+.item_td_box_1
+  _wh(1.6rem, 1.6rem)
+  _fj(center, center)
+  background center bottom / 100% 100% url(../../assets/images/screen1/item_3.png) no-repeat
+.item_content_2
+  position relative
+  padding 0
+  &::after
+    position absolute
+    top 0
+    left 0
+    content ''
+    _wh(100%, 100%)
+    background-image: linear-gradient(0deg,#f1c76d 0px,#f1c76d 1px,transparent 1px,transparent 100px),
+      linear-gradient(90deg,#f1c76d 0px,#f1c76d 1px,transparent 1px,transparent 100px);
+    background-size: 28px 13px
+    opacity .2
+    z-index 10
+.scroll-ul_1
+  li
+    _wh(100%, .44rem)
+    .scroll-ul_1_div
+      float left
+      _font(.18rem, .44rem, #fff,,center)
+      word-wrap break-word
+      word-break break-all
+      white-space nowrap
+      overflow hidden
+      &:nth-child(1)
+        color #f1c76d
+        margin-right .2rem
+        font-size .16rem
+</style>
diff --git a/src/pages/management/Clean.vue b/src/pages/management/Clean.vue
new file mode 100644
index 0000000..be86f79
--- /dev/null
+++ b/src/pages/management/Clean.vue
@@ -0,0 +1,567 @@
+<template>
+<section class="bg">
+    <t-header title="海亮铜管件智能车间清洗看板">
+      <p class="p1" @click="toJump">海亮铜管件智能车间直盘管下料看板</p>
+    </t-header>
+    <div class="container">
+      <div class="top_wrap">
+        <div class="left_wrap">
+          <div class="item_wrap">
+            <div class="item_tip">
+              <div class="item_tip_left">当天清洗统计</div>
+            </div>
+            <div class="item_content item_content_1">
+              <div class="item_td_box_l">
+                <div class="item_td_box">
+                  <div class="item_td_inner">
+                    <div class="item_td_txt1">当前已清洗</div>
+                    <div class="item_td_txt2">1000<span>KG</span></div>
+                  </div>
+                  <div class="item_td_inner">
+                    <div class="item_td_txt1">清洗规格数</div>
+                    <div class="item_td_txt2">15<span>个</span></div>
+                  </div>
+                </div>
+                <div class="item_td_box">
+                  <div class="item_td_box">
+                    <div class="item_td_inner">
+                      <div class="item_td_txt1">待清洗库存</div>
+                      <div class="item_td_txt2">2000<span>KG</span></div>
+                    </div>
+                    <div class="item_td_inner">
+                      <div class="item_td_txt1">待清洗规格</div>
+                      <div class="item_td_txt2">12<span>个</span></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="item_td_box_r">
+                <div class="echart_zpg_wrap_1">
+                  <div id="echart_d01" style="width: 100%; height: 100%"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="item_wrap">
+            <div class="item_tip">
+              <div class="item_tip_left">设备清洗统计</div>
+            </div>
+            <div class="item_content item_content_1">
+              <div id="echart_d10" style="width: 100%; height: 100%"></div>
+            </div>
+          </div>
+          <div class="item_wrap">
+            <div class="item_tip">
+              <div class="item_tip_left">清洗趋势</div>
+            </div>
+            <div class="item_content item_content_1">
+              <div id="echart_d2" style="width: 100%; height: 100%"></div>
+            </div>
+          </div>
+        </div>
+        <div class="right_wrap">
+          <div class="item_wrap_l">
+            <div class="item_tip">
+              <div class="item_tip_left">储料槽信息</div>
+            </div>
+            <div class="item_content"></div>
+          </div>
+          <div class="item_wrap_l">
+            <div class="item_tip">
+              <div class="item_tip_left">当天任务列表</div>
+            </div>
+            <div class="item_content"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <section class="bottom"></section>
+</section>
+</template>
+
+<script>
+import THeader from '@components/header.vue'
+export default {
+  name: 'Clean',
+  components: {
+    THeader
+  },
+  data () {
+    return {
+      myCharts01: '',
+      myCharts10: '',
+      myCharts2: ''
+    }
+  },
+  computed: {
+    defaultOption1 () {
+      return {
+        step: 0.4, // 数值越大速度滚动越快
+        limitMoveNum: 7, // 开始无缝滚动的数据量 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: 1000 // 单步运动停止的时间(默认值1000ms)
+      }
+    }
+  },
+  mounted () {
+    this.setEchart01()
+    this.setEchart10()
+    this.setEchart2()
+  },
+  methods: {
+    toJump () {
+      this.$router.push('/ZhiPanGuan')
+    },
+    setEchart01 () {
+      var option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {
+          data: ['待清洗', '已清洗'],
+          textStyle: {
+            color: '#ffffff',
+            fontSize: '16'
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'value',
+            axisLabel: {
+              textStyle: {
+                color: '#8FABBF',
+                fontSize: 14
+              }
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'category',
+            axisLabel: {
+              textStyle: {
+                color: '#8FABBF',
+                fontSize: 14
+              }
+            },
+            axisTick: {
+              show: false
+            },
+            data: ['规格数', '重量']
+          }
+        ],
+        series: [
+          {
+            name: '待清洗',
+            type: 'bar',
+            stack: 'Total',
+            label: {
+              show: true,
+              color: '#FFFFFF',
+              position: 'left'
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            color: '#F4A03F',
+            data: [-120, -82]
+          },
+          {
+            name: '已清洗',
+            type: 'bar',
+            stack: 'Total',
+            label: {
+              show: true,
+              color: '#FFFFFF',
+              position: 'inside'
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            color: '#4B97ED',
+            data: [320, 162]
+          }
+        ]
+      }
+      let echart = document.getElementById('echart_d01')
+      this.myCharts01 = this.$echarts.init(echart)
+      this.myCharts01.setOption(option)
+      window.addEventListener('resize', () => {
+        this.myCharts01.resize()
+      })
+    },
+    setEchart10 () {
+      // 右3
+      let total = [100, 200, 120, 133, 80, 155, 250]
+      let names = [1, 2, 3, 4, 5, 6, 7]
+      let max = 0
+      // this.chartData2.map(el => {
+      //   total.push(el.err_times)
+      //   names.push(el.device_name)
+      //   max = Math.max(max, Number(el.err_times))
+      // })
+      let option = {
+        dataZoom: [
+          {
+            show: false, // 为true滚动条出现
+            type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动
+            startValue: 0, // 从头开始。
+            endValue: 9 // end百分比显示范围，endValue具体显示几个数值
+          }
+        ],
+        grid: {
+          top: 30,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          borderColor: '#ffffff',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#8FABBF ',
+              fontSize: 14,
+              lineHeight: 14
+            }
+          },
+          axisLabel: {
+            color: '#8FABBF ',
+            rotate: 50
+          },
+          data: names
+        },
+        yAxis: {
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#909399'
+            }
+          },
+          axisLabel: {
+            color: '#909399'
+          },
+          splitLine: {
+            show: false,
+            lineStyle: {
+              type: [8, 4],
+              dashOffset: 4,
+              color: '#8FABBF',
+              opacity: 0.2
+            }
+          },
+          max: max
+        },
+        series: [
+          {
+            type: 'bar',
+            barWidth: 38,
+            itemStyle: {
+              normal: {
+                show: true,
+                // color: '#67c23a',
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#0E90FD',
+                    opacity: 1
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(96,112,128,0.10)',
+                    opacity: 0.1
+                  }
+                ]),
+                borderWidth: 0
+              }
+            },
+            // data: [100, 51, 90, 41, 91, 61, 51]
+            data: total
+          }
+        ]
+      }
+      let echart = document.getElementById('echart_d10')
+      this.myCharts10 = this.$echarts.init(echart)
+      this.myCharts10.setOption(option)
+      // this.autoMove(option, 3)
+      window.addEventListener('resize', () => {
+        this.myCharts10.resize()
+      })
+    },
+    setEchart2 () {
+      let date = ['6-1', '6-2', '6-3', '6-4', '6-5', '6-6', '6-7']
+      let qty = [100, 80, 90, 160, 130, 166, 130]
+      // this.arrL3.map(el => {
+      //   date.push(el.date)
+      //   qty.push(el.real_qty)
+      // })
+      let option = {
+        grid: {
+          top: 50,
+          left: 0,
+          right: 25,
+          bottom: 0,
+          containLabel: true
+        },
+        dataZoom: [
+          {
+            show: false, // 为true滚动条出现
+            type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动
+            startValue: 0, // 从头开始。
+            endValue: 9 // end百分比显示范围，endValue具体显示几个数值
+          }
+        ],
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              width: 2,
+              color: '#8FABBF'
+            }
+          },
+          axisLabel: {
+            interval: 0,
+            textStyle: {
+              color: '#8FABBF',
+              fontSize: 16
+              // align: 'center'
+            },
+            rotate: 50
+          },
+          data: date
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            show: false
+          },
+          splitNumber: 2,
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            textStyle: {
+              color: '#8FABBF',
+              fontSize: 14
+            }
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: [8, 4],
+              dashOffset: 4,
+              color: '#8FABBF'
+            }
+          }
+        },
+        series: [
+          {
+            name: '今日',
+            type: 'line',
+            smooth: true,
+            symbolSize: 5,
+            showSymbol: false,
+            itemStyle: {
+              normal: {
+                lineStyle: {
+                  color: '#33CCCC',
+                  width: 2.4
+                }
+              }
+            },
+            areaStyle: {
+              normal: {
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: 'rgba(38,191,191,0.50)'
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(31,89,89,0.00)'
+                  }
+                ], false)
+              }
+            },
+            data: qty
+          }
+        ]
+      }
+      let echart = document.getElementById('echart_d2')
+      if (this.myCharts2 !== '') {
+        this.myCharts2.dispose()
+      }
+      if (echart !== null) {
+        this.myCharts2 = this.$echarts.init(echart)
+        this.myCharts2.setOption(option)
+        // this.autoMove(option)
+        window.addEventListener('resize', () => {
+          this.myCharts2.resize()
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import '~@css/mixin'
+.bg
+  _wh(100%, 100%)
+  overflow hidden
+.p1
+  position absolute
+  display block
+  cursor pointer
+  left .2509rem
+  top .22rem
+  font-family "SourceHanSansCN"
+  _font(.18rem, .30rem, #fff, 700,)
+  letter-spacing .01rem
+.container
+  _wh(100%, calc(100% - 1.38rem))
+  padding .3rem .2509rem 0
+  overflow hidden
+.bottom
+  _wh(100%, .38rem)
+  background center bottom / 19.06rem 100% url(../../assets/images/screen1/bottom.png) no-repeat
+.top_wrap
+  _wh(100%, 100%)
+  clear both
+.bottom_wrap
+  _wh(100%, 40%)
+.left_wrap
+  float left
+  width 49%
+.right_wrap
+  float right
+  width 49%
+.item_wrap
+  _wh(100%, 33.3%)
+.item_wrap_l
+  _wh(100%, 50%)
+.item_tip
+  _wh(100%, .32rem)
+  line-height .32rem
+  background center center / 100% 100% url(../../assets/images/screen1/title_bg_2.png) no-repeat
+.item_tip_l
+  background-image url(../../assets/images/screen1/title_bg_3.png)
+.item_tip_left
+  float left
+  _wh(60%, 100%)
+  font-family "SourceHanSansCN"
+  _font(.18rem, inherit, #fff, 700,)
+  letter-spacing .02rem
+  text-shadow 0 0 .09rem #159AFF
+  padding-left .38rem
+.item_content
+  _wh(100%, calc(100% - .32rem))
+  padding .17rem .17rem .24rem .17rem
+  background-color #011834
+.item_content_1
+  clear both
+.item_td_box_l
+  float left
+  _wh(48%, 100%)
+  padding-right .3rem
+  _fj()
+.item_td_box_r
+  float right
+  _wh(52%, 100%)
+  _fj()
+.item_td_box
+  width 50%
+.item_td_inner
+  _wh(1.8rem, .7rem)
+  background center bottom / 100% 100% url(../../assets/images/screen1/item_4.png) no-repeat
+  padding .05rem
+  &:nth-child(2)
+    margin-top .2rem
+.item_td_txt1
+  font-family "SourceHanSansCN"
+  _font(.14rem, .3rem, #78b1de,bold,center)
+.item_td_txt2
+  font-family "SourceHanSansCN"
+  _font(.18rem, .3rem, #fff,bold,center)
+  span
+    font-size .12rem
+    padding 0 .05rem
+.echart_zpg_wrap_1
+  _wh(100%, 100%)
+.item_content_2
+  position relative
+  padding 0
+  &::after
+    position absolute
+    top 0
+    left 0
+    content ''
+    _wh(100%, 100%)
+    background-image: linear-gradient(0deg,#f1c76d 0px,#f1c76d 1px,transparent 1px,transparent 100px),
+      linear-gradient(90deg,#f1c76d 0px,#f1c76d 1px,transparent 1px,transparent 100px);
+    background-size: 28px 13px
+    opacity .2
+    z-index 10
+.alarm_box_l
+  position absolute
+  left 10%
+  top 0
+  z-index 100
+  _wh(35%, 100%)
+  background left center / 55% auto url(../../assets/images/alarm.png) no-repeat
+.alarm_box_r
+  position relative
+  z-index 101
+  _wh(73%, 100%)
+  margin-left 27%
+  padding .17rem 10% .24rem 1rem
+  background-color rgba(244,247,38,.34)
+  overflow hidden
+  &::after
+    content ''
+    _wh(3px, 100%)
+    position absolute
+    z-index 102
+    top 0
+    left 0
+    background rgba(244,247,38,.6)
+    box-shadow 0px 0px 5px 3px rgba(244,247,38,.34)
+.scroll-ul_1
+  li
+    _wh(100%, .44rem)
+    .scroll-ul_1_div
+      float left
+      _font(.18rem, .44rem, #fff,,center)
+      word-wrap break-word
+      word-break break-all
+      white-space nowrap
+      overflow hidden
+      &:nth-child(1)
+        color #f1c76d
+        margin-right .2rem
+        font-size .16rem
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index 3cbc737..4f0fc65 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,6 +7,8 @@ const DeviceScreen = r => require.ensure([], () => r(require('@page/DeviceScreen
 const WorkshopScreen = r => require.ensure([], () => r(require('@page/WorkshopScreen')), 'WorkshopScreen')
 const HomeScreen = r => require.ensure([], () => r(require('@page/HomeScreen')), 'HomeScreen')
 
+const Chengpin = r => require.ensure([], () => r(require('@page/management/Chengpin')), 'Chengpin')
+const Clean = r => require.ensure([], () => r(require('@page/management/Clean')), 'Clean')
 const ZhiPanGuan = r => require.ensure([], () => r(require('@page/management/ZhiPanGuan')), 'ZhiPanGuan')
 
 Vue.use(Router)
@@ -22,6 +24,14 @@ export default new Router({
       path: '/setup',
       component: Setup
     },
+    {
+      path: '/Chengpin',
+      component: Chengpin
+    },
+    {
+      path: '/Clean',
+      component: Clean
+    },
     {
       path: '/ZhiPanGuan',
       component: ZhiPanGuan
diff --git a/yarn.lock b/yarn.lock
index 8e0e817..38b1cdf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2330,6 +2330,11 @@ duplexify@^3.4.2, duplexify@^3.6.0:
     readable-stream "^2.0.0"
     stream-shift "^1.0.0"
 
+echarts-liquidfill@^3.0.6:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/echarts-liquidfill/-/echarts-liquidfill-3.1.0.tgz#4ec70f3697382d0404c95fff9f3e8dd85c8377da"
+  integrity sha512-5Dlqs/jTsdTUAsd+K5LPLLTgrbbNORUSBQyk8PSy1Mg2zgHDWm83FmvA4s0ooNepCJojFYRITTQ4GU1UUSKYLw==
+
 echarts@^5.3.2:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/echarts/-/echarts-5.3.2.tgz#0a7b3be8c48a48b2e7cb1b82121df0c208d42d2c"