diff --git a/src/assets/images/screen1/title_bg_d1.png b/src/assets/images/screen1/title_bg_d1.png
new file mode 100644
index 0000000..e28eb30
Binary files /dev/null and b/src/assets/images/screen1/title_bg_d1.png differ
diff --git a/src/assets/images/screen1/title_bg_d2.png b/src/assets/images/screen1/title_bg_d2.png
new file mode 100644
index 0000000..c2e42a3
Binary files /dev/null and b/src/assets/images/screen1/title_bg_d2.png differ
diff --git a/src/pages/DeviceScreen.vue b/src/pages/DeviceScreen.vue
new file mode 100644
index 0000000..c5190d7
--- /dev/null
+++ b/src/pages/DeviceScreen.vue
@@ -0,0 +1,1667 @@
+<template>
+  <section class="bg">
+    <header>
+      <p>海亮铜管智能车间设备监控中心</p>
+      <div class="data_box clearfix">
+        <div class="date_item date">{{date}}</div>
+        <div class="date_item week">{{week}}</div>
+        <div class="date_item time clearfix">
+          <div class="tiem_item hours">{{hours}}</div>
+          <div class="colon">:</div>
+          <div class="tiem_item minutes">{{minutes}}</div>
+          <div class="colon">:</div>
+          <div class="tiem_item seconds">{{seconds}}</div>
+        </div>
+      </div>
+    </header>
+    <div class="container">
+      <div class="left_wrap">
+        <div class="item_wrap">
+          <div class="item_tip">
+            <div class="item_tip_left">设备实时状态</div>
+          </div>
+          <div class="item_content_1">
+            <div id="echart_d01" style="width: 100%; height: 100%"></div>
+          </div>
+          <div class="total">
+            <!-- <div>总数</div> -->
+            <div>110<span>台</span></div>
+          </div>
+        </div>
+        <div class="item_wrap">
+          <div class="item_tip">
+            <div class="item_tip_left">设备管理</div>
+          </div>
+          <div class="item_content_1">
+            <div class="item_content_1_inner">
+              <div class="item_content_1_inner_1">弯头工段</div>
+              <div class="item_content_1_inner_2 item_content_1_inner_2_bg">
+                <p class="item_content_1_inner_2_p1">OEE：</p>
+                <p class="item_content_1_inner_2_p2">45.8%</p>
+              </div>
+              <div class="item_content_1_inner_2 item_content_1_inner_2_bg">
+                <p class="item_content_1_inner_2_p1">MIBF：</p>
+                <p class="item_content_1_inner_2_p2">173h</p>
+              </div>
+              <div class="item_content_1_inner_2 item_content_1_inner_2_bg">
+                <p class="item_content_1_inner_2_p1">MTTR：</p>
+                <p class="item_content_1_inner_2_p2">6h</p>
+              </div>
+              <div class="item_content_1_inner_2">
+                <p class="item_content_1_inner_2_p1">报警：</p>
+                <p class="item_content_1_inner_2_p2">4次</p>
+              </div>
+            </div>
+            <div class="item_content_1_inner">
+              <div class="item_content_1_inner_1">综合工段</div>
+              <div class="item_content_1_inner_2 item_content_1_inner_2_bg">
+                <p class="item_content_1_inner_2_p1">OEE：</p>
+                <p class="item_content_1_inner_2_p2">45.8%</p>
+              </div>
+              <div class="item_content_1_inner_2 item_content_1_inner_2_bg">
+                <p class="item_content_1_inner_2_p1">MIBF：</p>
+                <p class="item_content_1_inner_2_p2">173h</p>
+              </div>
+              <div class="item_content_1_inner_2 item_content_1_inner_2_bg">
+                <p class="item_content_1_inner_2_p1">MTTR：</p>
+                <p class="item_content_1_inner_2_p2">6h</p>
+              </div>
+              <div class="item_content_1_inner_2">
+                <p class="item_content_1_inner_2_p1">报警：</p>
+                <p class="item_content_1_inner_2_p2">4次</p>
+              </div>
+            </div>
+            <div class="item_content_1_inner">
+              <div class="item_content_1_inner_1">成品工段</div>
+              <div class="item_content_1_inner_2 item_content_1_inner_2_bg">
+                <p class="item_content_1_inner_2_p1">OEE：</p>
+                <p class="item_content_1_inner_2_p2">45.8%</p>
+              </div>
+              <div class="item_content_1_inner_2 item_content_1_inner_2_bg">
+                <p class="item_content_1_inner_2_p1">MIBF：</p>
+                <p class="item_content_1_inner_2_p2">173h</p>
+              </div>
+              <div class="item_content_1_inner_2 item_content_1_inner_2_bg">
+                <p class="item_content_1_inner_2_p1">MTTR：</p>
+                <p class="item_content_1_inner_2_p2">6h</p>
+              </div>
+              <div class="item_content_1_inner_2">
+                <p class="item_content_1_inner_2_p1">报警：</p>
+                <p class="item_content_1_inner_2_p2">4次</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="item_wrap">
+          <div class="item_tip">
+            <div class="item_tip_left">设备产能利用</div>
+          </div>
+          <div class="item_content_1">
+            <div id="echart_d02" style="width: 100%; height: 100%"></div>
+          </div>
+        </div>
+      </div>
+      <div class="center_wrap">
+        <div class="item_wrap_1 inlblock">
+          <div class="item_tip item_tip_01">
+            <div class="item_tip_left">设备综合效率OEE&产能利用效率TEEP</div>
+          </div>
+          <div class="item_content_1">
+            <div id="echart_d03" style="width: 100%; height: 100%"></div>
+          </div>
+        </div>
+        <div class="item_wrap_1 inlblock">
+          <div class="item_tip item_tip_01">
+            <div class="item_tip_left">运行设备大类产能比</div>
+          </div>
+          <div class="item_content_1">
+            <div id="echart_d04" style="width: 100%; height: 100%"></div>
+          </div>
+        </div>
+        <div class="item_wrap_2 item_wrap_3">
+          <div class="item_tip item_tip_2">
+            <div class="item_tip_left">设备综合统计</div>
+          </div>
+          <div class="item_content_1">
+            <div id="echart_d05" style="width: 100%; height: 100%"></div>
+          </div>
+        </div>
+        <div class="item_wrap_2">
+          <div class="item_tip item_tip_2">
+            <div class="item_tip_left">设备状态列表</div>
+          </div>
+          <div class="item_content_2">
+            <div class="scroll_wrap">
+              <ul class="scroll_tab_1">
+                <li>设备编号</li>
+                <li>设备名称</li>
+                <li>设备大类</li>
+                <li>设备状态</li>
+                <li>产量</li>
+                <li>开机时间</li>
+                <li>关机时间</li>
+                <li>生产日期</li>
+              </ul>
+              <div class="scroll_container_1">
+                <vue-seamless-scroll :data="array1" :class-option="defaultOption1">
+                  <ul class="scroll-ul_1">
+                    <li v-for="(e, i) in array1" :key="i">
+                      <div class="scroll-ul_1_div">{{e.material_code}}</div>
+                      <div class="scroll-ul_1_div">{{e.material_code}}</div>
+                      <div class="scroll-ul_1_div">{{e.material_code}}</div>
+                      <div class="scroll-ul_1_div">{{e.material_code}}</div>
+                      <div class="scroll-ul_1_div">{{e.material_code}}</div>
+                      <div class="scroll-ul_1_div">{{e.material_code}}</div>
+                      <div class="scroll-ul_1_div">{{e.material_code}}</div>
+                      <div class="scroll-ul_1_div">{{e.material_code}}</div>
+                    </li>
+                  </ul>
+              </vue-seamless-scroll>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="right_wrap">
+        <div class="item_wrap">
+          <div class="item_tip">
+            <div class="item_tip_left">设备TOP10故障次数</div>
+          </div>
+          <div class="item_content_1">
+            <div id="echart_d08" 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_4">
+            <div class="scroll_wrap">
+              <ul class="scroll_tab_2">
+                <li>设备编号</li>
+                <li>设备名称</li>
+                <li>报警原因</li>
+                <li>报警时间</li>
+              </ul>
+              <div class="scroll_container_2">
+                <vue-seamless-scroll :data="array2" :class-option="defaultOption2">
+                  <ul class="scroll-ul_2">
+                    <li v-for="(e, i) in array1" :key="i">
+                      <div class="scroll-ul_2_div">{{e.material_code}}</div>
+                      <div class="scroll-ul_2_div">{{e.material_code}}</div>
+                      <div class="scroll-ul_2_div">{{e.material_code}}</div>
+                      <div class="scroll-ul_2_div">{{e.material_code}}</div>
+                    </li>
+                  </ul>
+              </vue-seamless-scroll>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="item_wrap">
+          <div class="item_tip">
+            <div class="item_tip_left">近30天设备故障统计</div>
+          </div>
+          <!-- <div class="item_content_5">
+            <div id="echart_d4" style="width: 100%; height: 100%"></div>
+          </div> -->
+          <div class="item_content_1">
+            <div id="echart_d10" style="width: 100%; height: 100%"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <section class="bottom"></section>
+  </section>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+export default {
+  name: 'MonitoringScreen1',
+  data () {
+    return {
+      data01: [{value: 500, name: '正常运行'}, {value: 300, name: '暂未生产'}, {value: 200, name: '空闲设备'}, {value: 100, name: '故障设备'}],
+      chartData1: [
+        {
+          total_quantity: '31',
+          material_name: 'D001'
+        },
+        {
+          total_quantity: '22',
+          material_name: 'D002'
+        },
+        {
+          total_quantity: '10',
+          material_name: 'D003'
+        },
+        {
+          total_quantity: '38',
+          material_name: 'D004'
+        },
+        {
+          total_quantity: '15',
+          material_name: 'D005'
+        },
+        {
+          total_quantity: '66',
+          material_name: 'D006'
+        },
+        {
+          total_quantity: '77',
+          material_name: 'D007'
+        }
+      ],
+      chartData2: [
+        {
+          total_quantity: '21',
+          material_name: 'SBGZ0001'
+        },
+        {
+          total_quantity: '32',
+          material_name: 'SBGZ0002'
+        },
+        {
+          total_quantity: '60',
+          material_name: 'SBGZ0003'
+        },
+        {
+          total_quantity: '78',
+          material_name: 'SBGZ0004'
+        },
+        {
+          total_quantity: '12',
+          material_name: 'SBGZ0005'
+        },
+        {
+          total_quantity: '6',
+          material_name: 'SBGZ0006'
+        },
+        {
+          total_quantity: '88',
+          material_name: 'SBGZ0007'
+        }
+      ],
+      xData: ['无屑下料机', '三通成型机', '推弯一体机', 'L22-35货压机'], // 横坐标
+      yData: [23, 24, 18, 25], // 人数数据
+      taskDate: [10, 11, 9, 17],
+      taskDate2: [15, 19, 3, 23],
+      timer: null,
+      time: '',
+      hours: '',
+      minutes: '',
+      seconds: '',
+      date: '',
+      week: '',
+      myCharts01: '',
+      myCharts02: '',
+      myCharts03: '',
+      myCharts04: '',
+      myCharts05: '',
+      myCharts08: '',
+      myCharts10: '',
+      myCharts2: '',
+      myCharts3: '',
+      myCharts4: '',
+      array1: [{material_code: '001'}, {material_code: '001'}, {material_code: '001'}, {material_code: '001'}, {material_code: '001'}, {material_code: '001'}],
+      array2: [{material_code: '01'}, {material_code: '01'}, {material_code: '01'}, {material_code: '01'}],
+      num: 8
+    }
+  },
+  computed: {
+    defaultOption1 () {
+      return {
+        step: 0.4, // 数值越大速度滚动越快
+        limitMoveNum: this.num, // 开始无缝滚动的数据量 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)
+      }
+    },
+    defaultOption2 () {
+      return {
+        step: 0.4, // 数值越大速度滚动越快
+        limitMoveNum: 5, // 开始无缝滚动的数据量 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)
+      }
+    }
+  },
+  created () {
+    this.updateTime()
+    this.timer = window.setInterval(this.updateTime, 1000)
+  },
+  beforeDestroy () {
+    this.$once('hook:beforeDestroy', () => {
+      clearInterval(this.timer)
+    })
+  },
+  mounted () {
+    this.setEchart08() // 右1
+    this.setEchart10() // 右3
+    this.setEchart01() // 左1
+    this.setEchart02() // 左3
+    this.setEchart03()
+    this.setEchart04()
+    this.setEchart05()
+  },
+  methods: {
+    updateTime () {
+      let cd = new Date()
+      let year = cd.getFullYear()
+      let month = cd.getMonth() + 1 < 10 ? '0' + (cd.getMonth() + 1) : cd.getMonth() + 1
+      let date = cd.getDate() < 10 ? '0' + cd.getDate() : cd.getDate()
+      let hh = cd.getHours() < 10 ? '0' + cd.getHours() : cd.getHours()
+      let mm = cd.getMinutes() < 10 ? '0' + cd.getMinutes() : cd.getMinutes()
+      let ss = cd.getSeconds() < 10 ? '0' + cd.getSeconds() : cd.getSeconds()
+      var weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
+      let myddy = new Date().getDay()
+      let week = weekday[myddy]
+      this.time = `${hh}:${mm}:${ss}`
+      this.hours = `${hh}`
+      this.minutes = `${mm}`
+      this.seconds = `${ss}`
+      this.date = `${year}年${month}月${date}日`
+      this.week = `${week}`
+    },
+    setEchart08 () {
+      // var myColor = ['#81E7ED'] // 内柱状图颜色
+      var dataLine = [5, 66, 33, 25, 10]
+      let positionLeft = 0.4
+      let max = 100 + 2 * positionLeft
+      var option = {
+        grid: [
+          {
+            left: '8%',
+            top: '12%',
+            right: '5%',
+            bottom: '8%',
+            containLabel: true
+          },
+          {
+            left: '10%',
+            top: '12%',
+            right: '5%',
+            bottom: '8%',
+            containLabel: true
+          }
+        ],
+        xAxis: [{
+          max: max,
+          show: false
+        }],
+        yAxis: [
+          {
+            axisTick: 'none',
+            axisLine: 'none',
+            offset: '27',
+            axisLabel: {
+              textStyle: {
+                color: '#ffffff', // y轴字体颜色
+                fontSize: '16'
+              }
+            },
+            data: ['设备01', '设备02', '设备03', '设备04', '设备05']
+          },
+          {
+            axisTick: 'none',
+            axisLine: 'none',
+            show: false,
+            axisLabel: {
+              textStyle: {
+                color: '#ffffff',
+                fontSize: '16'
+              }
+            },
+            data: [1, 1, 1, 1]
+          },
+          {
+
+            axisLine: {
+              lineStyle: {
+                type: [8, 4],
+                dashOffset: 4,
+                // color: 'rgba(0,0,0,0)' // y轴线颜色
+                color: '#3D5266' // y轴线颜色
+              }
+            },
+            data: []
+          },
+          {
+            // 设置柱状图右边参数
+            show: true,
+            inverse: true,
+            data: [],
+            axisLine: {
+              show: false
+            },
+            splitLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            }
+          }
+        ],
+        series: [
+          {
+            name: '条',
+            type: 'bar',
+            stack: 'b',
+            yAxisIndex: 0,
+            data: dataLine,
+            label: {
+              normal: {
+                show: false,
+                position: 'right',
+                distance: 10,
+                formatter: function (param) {
+                  return param.value + '%'
+                },
+                textStyle: {
+                  color: '#ffffff',
+                  fontSize: '16'
+                }
+              }
+            },
+            barWidth: 8,
+            // itemStyle: {
+            //   normal: {
+            //     color: new echarts.graphic.LinearGradient(
+            //       1, 0, 0, 0,
+            //       [
+            //         {offset: 0, color: '#FF0000'},
+            //         {offset: 1, color: '#FF7744'}
+            //       ]
+            //     ),
+            //     barBorderRadius: 0
+            //   }
+            // },
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#B68845',
+                    opacity: 1
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(134,98,45,0.25)',
+                    opacity: 0.25
+                  }
+                ]),
+                barBorderRadius: 0
+              }
+            },
+            z: 2
+          },
+          {
+            name: '外框',
+            type: 'bar',
+            yAxisIndex: 2,
+            barGap: '-100%',
+            data: [100, 100, 100, 100, 100],
+            barWidth: 23,
+            label: {
+              normal: {
+                show: true,
+                position: 'right',
+                distance: 10,
+                color: '#ffffff',
+                formatter: function (data) {
+                  return dataLine[data.dataIndex] + '次'
+                }
+              }
+            },
+            itemStyle: {
+              normal: {
+                // color: '#ffffff',
+                color: '#00000000', // #8个f代表黑色全透明
+                barBorderRadius: 0
+              }
+            },
+            z: 0
+          }
+        ]
+      }
+      let echart = document.getElementById('echart_d08')
+      this.myCharts08 = this.$echarts.init(echart)
+      this.myCharts08.setOption(option)
+      window.addEventListener('resize', () => {
+        this.myCharts08.resize()
+      })
+    },
+    setEchart01 () {
+      let data = this.data01
+      var option = {
+        // legend: {
+        //   orient: 'vertical',
+        //   right: 0,
+        //   data: ['正常运行', '暂未生产', '空闲设备', '故障设备'],
+        //   textStyle: {
+        //     color: '#ffffff',
+        //     fontSize: '16'
+        //   }
+        // },
+        color: ['#0966E8', '#07E083', '#00D5FF', '#CC6060'],
+        series: [
+          {
+            type: 'pie',
+            radius: ['50%', '70%'],
+            label: {
+              formatter: ''
+            },
+            labelLine: {
+              show: false
+            },
+            data: data
+          }
+        ]
+      }
+      let echart = document.getElementById('echart_d01')
+      this.myCharts01 = this.$echarts.init(echart)
+      this.myCharts01.setOption(option)
+      window.addEventListener('resize', () => {
+        this.myCharts01.resize()
+      })
+    },
+    setEchart04 () {
+      // 多列柱状图
+      let option = {
+        // 图例
+        legend: {
+          // icon: 'rect',
+          textStyle: {
+            color: '#fff',
+            fontSize: 14,
+            lineHeight: 14
+          },
+          itemGap: 30.86,
+          itemWidth: 14.16,
+          itemHeight: 7.38,
+          data: [{name: '最大产能', itemStyle: {color: '#0E90FD'}}, {name: '平均产能', itemStyle: {color: '#33CCCC'}}, {name: '最小产能', itemStyle: {color: '#EAAD24'}}]
+        },
+        xAxis: {
+          type: 'category',
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              width: 2,
+              color: '#8FABBF'
+            }
+          },
+          axisLabel: {
+            interval: 0,
+            textStyle: {
+              color: '#8FABBF',
+              fontSize: 16
+            }
+          },
+          data: this.xData
+        },
+        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: [
+          {
+            type: 'bar', // 形状为柱状图
+            data: this.yData,
+            name: '最大产能', // legend属性
+            barGap: '150%', // 柱图间距
+            barWidth: '8', // 柱图宽度
+            itemStyle: {
+              normal: {
+                show: true,
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 1,
+                    color: 'rgba(96,112,128,0.10)',
+                    opacity: 1
+                  },
+                  {
+                    offset: 0,
+                    color: '#0E90FD',
+                    opacity: 0.1
+                  }
+                ])
+              }
+            }
+          },
+          {
+            type: 'line', // 形状为折线图
+            data: this.taskDate2,
+            name: '最小产能', // legend属性
+            barGap: '150%', // 柱图间距
+            barWidth: '8', // 柱图宽度
+            itemStyle: {
+              normal: {
+                show: true,
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#B68845',
+                    opacity: 1
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(134,98,45,0.25)',
+                    opacity: 0.25
+                  }
+                ])
+              }
+            }
+          },
+          {
+            type: 'bar', // 形状为柱状图
+            data: this.taskDate,
+            name: '平均产能', // legend属性
+            barGap: '150%', // 柱图间距
+            barWidth: '8', // 柱图宽度
+            itemStyle: {
+              normal: {
+                show: true,
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#33CCCC',
+                    opacity: 1
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(31,89,89,0.25)',
+                    opacity: 0.25
+                  }
+                ])
+              }
+            }
+          }
+        ]
+      }
+      let echart = document.getElementById('echart_d04')
+      this.myCharts04 = this.$echarts.init(echart)
+      this.myCharts04.setOption(option)
+      window.addEventListener('resize', () => {
+        this.myCharts04.resize()
+      })
+    },
+    setEchart03 () {
+      let data1 = [50, 80]
+      let data2 = [50, 69]
+      let data3 = [25, 88]
+      let option = {
+        grid: {
+          top: 50,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          containLabel: true
+        },
+        legend: {
+          icon: 'rect',
+          textStyle: {
+            color: '#fff',
+            fontSize: 14,
+            lineHeight: 14
+          },
+          itemGap: 30.86,
+          itemWidth: 14.16,
+          itemHeight: 7.38,
+          data: [{name: '过去一个月', itemStyle: {color: '#0E90FD'}}, {name: '目标', itemStyle: {color: '#33CCCC'}}, {name: '实际', itemStyle: {color: '#EAAD24'}}]
+        },
+        xAxis: {
+          type: 'category',
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              width: 2,
+              color: '#8FABBF'
+            }
+          },
+          axisLabel: {
+            interval: 0,
+            textStyle: {
+              color: '#8FABBF',
+              fontSize: 16
+            }
+          },
+          data: ['设备综合效率OEE', '产能利用效率TEEP']
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            show: false
+          },
+          splitNumber: 2,
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            formatter: '{value} %',
+            textStyle: {
+              color: '#8FABBF',
+              fontSize: 14
+            }
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: [8, 4],
+              dashOffset: 4,
+              color: '#8FABBF'
+            }
+          }
+        },
+        series: [
+          {
+            name: '过去一个月',
+            type: 'bar',
+            barGap: '400%', // 柱图间距
+            barWidth: '8', // 柱图宽度
+            itemStyle: {
+              normal: {
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 1,
+                    color: 'rgba(96,112,128,0.10)',
+                    opacity: 1
+                  },
+                  {
+                    offset: 0,
+                    color: '#0E90FD',
+                    opacity: 0.1
+                  }
+                ])
+              }
+            },
+            label: {
+              // 柱状图上方文本标签，默认展示数值信息
+              show: true,
+              position: 'top',
+              textStyle: {
+                color: '#8FABBF',
+                fontSize: 14
+              },
+              formatter: function (data) {
+                return data.value + '%'
+              }
+            },
+            data: data1
+          },
+          {
+            name: '目标',
+            type: 'bar',
+            barGap: '400%', // 柱图间距
+            barWidth: '8', // 柱图宽度
+            itemStyle: {
+              normal: {
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#33CCCC',
+                    opacity: 1
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(31,89,89,0.25)',
+                    opacity: 0.25
+                  }
+                ])
+              }
+            },
+            label: {
+              // 柱状图上方文本标签，默认展示数值信息
+              show: true,
+              position: 'top',
+              textStyle: {
+                color: '#8FABBF',
+                fontSize: 14
+              },
+              formatter: function (data) {
+                return data.value + '%'
+              }
+            },
+            data: data2
+          },
+          {
+            name: '实际',
+            type: 'bar',
+            barGap: '400%', // 柱图间距
+            // barCategoryGap: '10%',
+            barWidth: '8', // 柱图宽度
+            itemStyle: {
+              normal: {
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#B68845',
+                    opacity: 1
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(134,98,45,0.25)',
+                    opacity: 0.25
+                  }
+                ])
+              }
+            },
+            label: {
+              // 柱状图上方文本标签，默认展示数值信息
+              show: true,
+              position: 'top',
+              textStyle: {
+                color: '#8FABBF',
+                fontSize: 14
+              },
+              formatter: function (data) {
+                return data.value + '%'
+              }
+            },
+            data: data3
+          }
+        ]
+      }
+      let echart = document.getElementById('echart_d03')
+      this.myCharts03 = this.$echarts.init(echart)
+      this.myCharts03.setOption(option)
+      window.addEventListener('resize', () => {
+        this.myCharts03.resize()
+      })
+    },
+    setEchart05 () {
+      let option = {
+        grid: {
+          top: 50,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          containLabel: true
+        },
+        legend: {
+          icon: 'rect',
+          textStyle: {
+            color: '#fff',
+            fontSize: 14,
+            lineHeight: 14
+          },
+          itemGap: 30.86,
+          itemWidth: 14.16,
+          itemHeight: 7.38,
+          data: [{name: '运行设备', itemStyle: {color: '#0E90FD'}}, {name: '暂未生产设备', itemStyle: {color: '#33CCCC'}}, {name: '关机设备', itemStyle: {color: '#EAAD24'}}, {name: '故障设备', itemStyle: {color: '#ff0000'}}]
+        },
+        xAxis: {
+          type: 'category',
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              width: 2,
+              color: '#8FABBF'
+            }
+          },
+          axisLabel: {
+            interval: 0,
+            textStyle: {
+              color: '#8FABBF',
+              fontSize: 16
+            }
+          },
+          data: ['无屑下料机1', '无屑下料机1', '无屑下料机1', '无屑下料机1', '无屑下料机1', '无屑下料机1']
+        },
+        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: 'bar',
+            barWidth: '8',
+            barGap: '100%', // 柱图间距
+            itemStyle: {
+              normal: {
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 1,
+                    color: 'rgba(96,112,128,0.10)',
+                    opacity: 1
+                  },
+                  {
+                    offset: 0,
+                    color: '#0E90FD',
+                    opacity: 0.1
+                  }
+                ])
+              }
+            },
+            data: ['390', '390', '390', '390', '390', '390']
+          },
+          {
+            name: '暂未生产设备',
+            type: 'bar',
+            barWidth: '8',
+            barGap: '100%', // 柱图间距
+            itemStyle: {
+              normal: {
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#33CCCC',
+                    opacity: 1
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(31,89,89,0.25)',
+                    opacity: 0.25
+                  }
+                ])
+              }
+            },
+            data: ['230', '230', '230', '230', '230', '230']
+          },
+          {
+            name: '关机设备',
+            type: 'bar',
+            barWidth: '8',
+            barGap: '100%', // 柱图间距
+            itemStyle: {
+              normal: {
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#B68845',
+                    opacity: 1
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(134,98,45,0.25)',
+                    opacity: 0.25
+                  }
+                ])
+              }
+            },
+            data: ['210', '210', '210', '210', '210', '210']
+          },
+          {
+            name: '故障设备',
+            type: 'bar',
+            barWidth: '8',
+            barGap: '100%', // 柱图间距
+            itemStyle: {
+              normal: {
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#ff0000',
+                    opacity: 1
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(122,50,99,0.25)',
+                    opacity: 0.25
+                  }
+                ])
+              }
+            },
+            data: ['110', '110', '110', '110', '110', '110']
+          }
+        ]
+      }
+      let echart = document.getElementById('echart_d05')
+      this.myCharts05 = this.$echarts.init(echart)
+      this.myCharts05.setOption(option)
+      window.addEventListener('resize', () => {
+        this.myCharts05.resize()
+      })
+    },
+    setEchart02 () {
+      // 左3
+      let total = []
+      let names = []
+      let max = 0
+      this.chartData1.map(el => {
+        total.push(el.total_quantity)
+        names.push(el.material_name)
+        max = Math.max(max, Number(el.total_quantity))
+      })
+      let option = {
+        grid: {
+          top: 30,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          borderColor: '#ffffff',
+          containLabel: true
+        },
+        // legend: {
+        //   top: 0,
+        //   right: 0,
+        //   textStyle: {
+        //     color: '#ffffff',
+        //     fontSize: 12,
+        //     lineHeight: 20
+        //   },
+        //   itemGap: 20,
+        //   itemHeight: 8,
+        //   data: ['总库存']
+        // },
+        xAxis: {
+          type: 'category',
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#8FABBF ',
+              fontSize: 14,
+              lineHeight: 14
+            }
+          },
+          axisLabel: {
+            color: '#8FABBF ',
+            rotate: 50
+          },
+          // data: names
+          data: names.length >= 7 ? names.slice(0, 7) : names
+        },
+        yAxis: {
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#909399'
+            }
+          },
+          // axisLabel: {
+          //   color: '#909399'
+          // },
+          axisLabel: {
+            formatter: '{value} %',
+            textStyle: {
+              color: '#8FABBF',
+              fontSize: 14
+            }
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: [8, 4],
+              dashOffset: 4,
+              color: '#8FABBF'
+            }
+          },
+          max: max
+        },
+        series: [
+          {
+            name: '总库存',
+            type: 'bar',
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                show: true,
+                // color: '#67c23a',
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#0E90FD'
+                  },
+                  {
+                    offset: 1,
+                    color: '#607080'
+                  }
+                ]),
+                borderWidth: 0
+              }
+            },
+            // data: [100, 51, 90, 41, 91, 61, 51]
+            // data: total,
+            data: total.length >= 7 ? total.slice(0, 7) : total,
+            label: {
+              show: true,
+              position: 'top',
+              // distance: 5,
+              // fontSize: 12,
+              textStyle: {
+                color: '#8FABBF',
+                fontSize: 14
+              },
+              formatter: function (data) {
+                return data.value + '%'
+              }
+            }
+          }
+        ]
+      }
+      let echart = document.getElementById('echart_d02')
+      this.myCharts02 = this.$echarts.init(echart)
+      this.myCharts02.setOption(option)
+      if (names.length > 7) {
+        let t = 1
+        let stotal = total.slice(0, 7)
+        let snames = names.slice(0, 7)
+        this.timer2 = setInterval(() => {
+          stotal.shift()
+          stotal.push(total[t + 6])
+          snames.shift()
+          snames.push(names[t + 6])
+          this.myCharts02.setOption({
+            xAxis: {
+              data: snames
+            },
+            series: [
+              {data: stotal}
+            ]
+          })
+          if (t + 7 < names.length) {
+            t++
+          } else {
+            t = -6
+          }
+        }, 2000)
+      }
+    },
+    setEchart10 () {
+      // 右3
+      let total = []
+      let names = []
+      let max = 0
+      this.chartData2.map(el => {
+        total.push(el.total_quantity)
+        names.push(el.material_name)
+        max = Math.max(max, Number(el.total_quantity))
+      })
+      let option = {
+        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
+          data: names.length >= 7 ? names.slice(0, 7) : names
+        },
+        yAxis: {
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#909399'
+            }
+          },
+          axisLabel: {
+            color: '#909399'
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: [8, 4],
+              dashOffset: 4,
+              color: '#8FABBF'
+            }
+          },
+          max: max
+        },
+        series: [
+          {
+            name: '总库存',
+            type: 'bar',
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                show: true,
+                // color: '#67c23a',
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#0E90FD'
+                  },
+                  {
+                    offset: 1,
+                    color: '#607080'
+                  }
+                ]),
+                borderWidth: 0
+              }
+            },
+            // data: [100, 51, 90, 41, 91, 61, 51]
+            // data: total,
+            data: total.length >= 7 ? total.slice(0, 7) : total
+          }
+        ]
+      }
+      let echart = document.getElementById('echart_d10')
+      this.myCharts10 = this.$echarts.init(echart)
+      this.myCharts10.setOption(option)
+      if (names.length > 7) {
+        let t = 1
+        let stotal = total.slice(0, 7)
+        let snames = names.slice(0, 7)
+        this.timer2 = setInterval(() => {
+          stotal.shift()
+          stotal.push(total[t + 6])
+          snames.shift()
+          snames.push(names[t + 6])
+          this.myCharts10.setOption({
+            xAxis: {
+              data: snames
+            },
+            series: [
+              {data: stotal}
+            ]
+          })
+          if (t + 7 < names.length) {
+            t++
+          } else {
+            t = -6
+          }
+        }, 2000)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import '~@css/mixin'
+.bg
+  _wh(100%, 100%)
+  background #050d20 center center / 100% 100% url(../assets/images/screen1/bg.png) no-repeat
+  overflow hidden
+header
+  width 100%
+  height 1rem
+  position relative
+  background center center / 100% 100% url(../assets/images/screen1/header.png) no-repeat
+  p
+    font-family "PangMenZhengDao"
+    _font(.48rem, 1rem, #ffffff, lighter, center)
+    letter-spacing .05rem
+    text-shadow 0 .08rem .08rem rgba(0,0,0,0.30)
+.data_box
+  position absolute
+  right 0
+  top .14rem
+  height .37rem
+.date, .week
+  padding-right .2rem
+.time
+  width 1.7rem
+  text-align center
+.date_item
+  float left
+  _font(.2rem, .37rem, #fff,,)
+.tiem_item
+  float left
+  _font(.32rem, .37rem, #fff,,)
+.colon
+  float left
+  _font(.32rem, .37rem, #fff,,)
+.container
+  _wh(100%, calc(100% - 1.38rem))
+  padding .3rem .2509rem 0
+  overflow hidden
+  clear both
+.bottom
+  _wh(100%, .38rem)
+  background center bottom / 19.06rem 100% url(../assets/images/screen1/bottom.png) no-repeat
+.left_wrap
+  float left
+  _wh(4.0756rem, 100%)
+.center_wrap
+  float left
+  // _wh(9.96rem, 100%)
+  _wh(10rem, 100%)
+  margin-left .2936rem
+  // padding .4rem .16rem
+.right_wrap
+  float right
+  _wh(4.0273rem, 100%)
+.item_wrap
+  _wh(100%, calc(100% / 3))
+.item_tip
+  clear both
+  _wh(100%, .32rem)
+  line-height .32rem
+  background center center / 100% 100% url(../assets/images/screen1/title_bg_1.png) no-repeat
+.item_tip_01
+  width 100%
+  background center center / 100% 100% url(../assets/images/screen1/title_bg_d1.png) no-repeat
+.item_tip_2
+  background center center / 100% 100% url(../assets/images/screen1/title_bg_d2.png) no-repeat
+.item_tip_left
+  float left
+  // _wh(60%, 100%)
+  _wh(100%, 100%)
+  font-family "SourceHanSansCN"
+  _font(.18rem, inherit, #fff, 700,)
+  letter-spacing .02rem
+  text-shadow 0 0 .09rem #159AFF
+  padding-left .38rem
+.item_content_1
+  _wh(100%, calc(100% - .32rem))
+  _fj(space-around)
+  padding .17rem 0 .24rem
+.item_content_1_inner
+  _wh(1.2rem, 100%)
+  background-color #011834
+.item_content_1_inner_1
+  _wh(100%, .37rem)
+  font-family "SourceHanSansCN"
+  _font(.14rem, .37rem, #78B1DE, 700, center)
+  letter-spacing .02rem
+  background center center / 100% 100% url(../assets/images/screen1/item_1.png) no-repeat
+.item_content_1_inner_2
+  _wh(100%, calc((100% - .37rem) / 4))
+  // overflow hidden
+  // _fj(space-evenly)
+  // flex-direction column
+  padding-top .06rem
+.item_content_1_inner_2_bg
+  background center bottom / 1.02rem .03rem url(../assets/images/screen1/line_1.png) no-repeat
+.item_content_1_inner_2_p1
+  float left
+  margin 0.14rem 0 0 0.08rem
+  font-family "SourceHanSansCN"
+  _font(.14rem, .14rem, #84B0DA, 700, left)
+.item_content_1_inner_2_p2
+  float right
+  margin 0.14rem 0.08rem 0 0
+  font-family "SourceHanSansCN"
+  _font(.18rem, .18rem, #FFFFFF, 700, right)
+.item_wrap_1
+  // _wh(100%, calc((100% - .4rem) / 2))
+  _wh(48.8%, calc((100% - .4rem) / 3))
+.item_wrap_2
+  // _wh(100%, calc((100% - .4rem) / 2))
+  _wh(100%, calc((100% - .4rem) / 3))
+.item_wrap_3
+  margin-top .26rem
+.inlblock
+  display inline-block
+  margin-right 0.08rem
+.item_content_2
+  _wh(100%, calc(100% - .32rem))
+  margin-top .06rem
+  border .01rem solid rgba(8,205,248,0.3)
+.scroll_wrap
+  _wh(100%, 100%)
+// scroll1
+.scroll_tab_1
+  _wh(100%, .4rem)
+  border-bottom .01rem solid rgba(8,205,248,0.3)
+  li
+    float left
+    width 12.2%
+    _font(.14rem,.4rem,#78B1DE,,center)
+    word-wrap break-word
+    word-break break-all
+    white-space nowrap
+    padding 0 .02rem
+    overflow hidden
+    box-sizing border-box
+    &:nth-child(8)
+      width 13.2%
+.scroll_container_1
+  width 100%
+  height calc(100% - .4rem)
+  overflow hidden
+.scroll-ul_1
+  li
+    _wh(100%, .4rem)
+    border-bottom .01rem solid rgba(8,205,248,0.3)
+    &:nth-child(even)
+      background rgba(1,24,52,0.60)
+      box-shadow inset 0px 1px 0px 0px rgba(13,89,115,0.3)
+    .scroll-ul_1_div
+      float left
+      _wh(12.2%, .4rem)
+      _fj(center)
+      _font(.14rem, .4rem, #fff,,center)
+      word-wrap break-word
+      word-break break-all
+      white-space nowrap
+      padding 0 .02rem
+      overflow hidden
+      &:nth-child(8)
+        width 13.2%
+// scroll2
+.scroll_tab_2
+  _wh(100%, .4rem)
+  border-bottom .01rem solid rgba(8,205,248,0.3)
+  li
+    float left
+    width 25%
+    _font(.14rem,.4rem,#78B1DE,,center)
+    word-wrap break-word
+    word-break break-all
+    white-space nowrap
+    padding 0 .02rem
+    overflow hidden
+    box-sizing border-box
+    &:nth-child(4)
+      width 25%
+.scroll_container_2
+  width 100%
+  height calc(100% - .4rem)
+  overflow hidden
+.scroll-ul_2
+  li
+    _wh(100%, .44rem)
+    border-bottom .01rem solid rgba(8,205,248,0.3)
+    &:nth-child(even)
+      background rgba(1,24,52,0.60)
+      box-shadow inset 0px 1px 0px 0px rgba(13,89,115,0.3)
+    .scroll-ul_2_div
+      float left
+      _wh(25%, .44rem)
+      _fj(center)
+      _font(.14rem, .44rem, #fff,,center)
+      word-wrap break-word
+      word-break break-all
+      white-space nowrap
+      padding 0 .02rem
+      overflow hidden
+      &:nth-child(4)
+        width 25%
+.right_1_up
+  clear both
+  _wh(100%, 1.6rem)
+  padding 0 .3rem .2rem
+  background center bottom / 100% .03rem url(../assets/images/screen1/line_2.png) no-repeat
+.right_1_up_left
+  float left
+  _wh(1.4rem, 1.4rem)
+  background center bottom / 100% 100% url(../assets/images/screen1/item_3.png) no-repeat
+  _fj(center)
+.right_1_up_right
+  float right
+  _wh(1.71rem, 100%)
+.right_1_up_right_item
+  _wh(100%, .6rem)
+  background center bottom / 100% 100% url(../assets/images/screen1/item_4.png) no-repeat
+  _fj(space-evenly)
+  flex-direction column
+  &:nth-child(2)
+    margin-top .2rem
+.right_1_up_p1
+  font-family "SourceHanSansCN"
+  _font(.14rem, .14rem, #78B1DE, 700, center)
+.right_1_up_p2
+  font-family "SourceHanSansCN"
+  _font(.18rem, .18rem, #fff, 700, center)
+  span
+    _font(.12rem, .18rem, #fff, 700, center)
+.right_1_down
+  _wh(100%, calc(100% - 1.6rem))
+  padding .05rem .3rem 0
+.right_1_down_inner_1
+  _wh(100%, .28rem)
+  overflow hidden
+  _fj()
+  div
+    &:nth-child(1)
+      font-family "SourceHanSansCN"
+      _font(.12rem, .28rem, #84B0DA, 700,)
+      letter-spacing .0171rem
+    &:nth-child(2)
+      font-family "SourceHanSansCN"
+      _font(.16rem, .28rem, #fff, 700, right)
+      letter-spacing .02rem
+.right_1_down_inner_2
+  _wh(100%, .1811rem)
+  background-color rgba(0,213,255,0.20)
+  _fj()
+  div
+    &:nth-child(1)
+      _wh(50%, .0805rem)
+      background-color #07E083
+    &:nth-child(2)
+      _wh(50%, .0805rem)
+      background-color #B68845
+.right_1_down_inner_3
+  _wh(100%, .3rem)
+  margin-top .1rem
+  _fj()
+.right_1_down_inner_3_i
+  _wh(1.83rem, .3rem)
+  _fj()
+  background center bottom / 100% 100% url(../assets/images/screen1/item_5.png) no-repeat
+.right_1_down_inner_3_l
+  _wh(50%, 100%)
+  overflow hidden
+  _fj()
+  span
+    display block
+    &:nth-child(1)
+      _wh(.0725rem, .0725rem)
+      border-radius 100%
+      background-color #07E083
+      margin-left .15rem
+    &:nth-child(2)
+      font-family "SourceHanSansCN"
+      _font(.14rem, .3rem, #fff,400,)
+.right_1_down_inner_3_r
+  _wh(50%, 100%)
+  line-height .3rem
+  overflow hidden
+  text-align center
+  span
+    font-family "SourceHanSansCN"
+    _font(.12rem, .3rem, #fff,700,)
+    &:nth-child(1)
+      font-family "SourceHanSansCN"
+      _font(.18rem, .3rem, #00D5FF,700,)
+.item_content_4
+  _wh(100%, calc(100% - .32rem))
+  padding .1rem 0 .2rem
+  overflow hidden
+.item_content_5
+  _wh(100%, calc(100% - .32rem))
+  padding-top .3rem
+  clear both
+.item_5_l
+  float left
+  _wh(1.83rem, .3rem)
+.item_5_r
+  float right
+  _wh(1.83rem, .3rem)
+  .right_1_down_inner_3_i
+    margin-bottom .045rem
+.item_5_l_1
+  _wh(100%, 1.42rem)
+  background right center / .02rem 100% url(../assets/images/screen1/line_3.png) no-repeat
+.item_5_l_2
+  _wh(100%, calc(100% - 1.42rem))
+  .right_1_down_inner_3_i
+    margin-bottom .03rem
+.total
+  position absolute
+  top 2.7rem
+  left 0.3rem
+  text-align center
+  width 4rem
+  div
+    line-height 0.24rem
+    // color #f80
+    color #00D9FF
+    font-size .3rem
+    margin-top 0.08rem
+    font-weight 700
+</style>