diff --git a/src/assets/js/getData1.js b/src/assets/js/getData1.js
index 09a5102..a606e43 100644
--- a/src/assets/js/getData1.js
+++ b/src/assets/js/getData1.js
@@ -1,10 +1,22 @@
 import {post} from '@js/http.js'
 
-/** 1.1小屏-上 */
-export const queryInfo5 = (did) => post('api/screen/pdm/queryInfo5', {
-  device_id: did
-})
-/** 1.1小屏-下 */
-export const queryInfo6 = (did) => post('api/screen/pdm/queryInfo6', {
-  device_id: did
-})
+/**  1.1设备实时状态 */
+export const deviceStatus = (id) => post('api/deviceScreen/deviceStatus', {})
+/**  1.2设备综合效率OEE&产能利用效率TEEP */
+export const oeeAndTeep = (id) => post('api/deviceScreen/oeeAndTeep', {})
+/**  1.3运行设备大类产能比 */
+export const queryDeviceByWork = (id) => post('api/deviceScreen/queryDeviceByWork', {})
+/**  1.4设备TOP10故障次数 */
+export const deviceErrorNum = (id) => post('api/deviceScreen/deviceErrorNum', {})
+/**  1.5设备管理 */
+export const deviceManage = (id) => post('api/deviceScreen/deviceManage', {})
+/**  1.6设备综合统计 */
+export const deviceCensus = (id) => post('api/deviceScreen/deviceCensus', {})
+/**  1.7设备报警信息 */
+export const deviceErrorInfo = (id) => post('api/deviceScreen/deviceErrorInfo', {})
+/**  1.8设备产能利用 */
+export const deviceUseRate = (id) => post('api/deviceScreen/deviceUseRate', {})
+/**  1.9设备状态列表 */
+export const deviceStatusList = (id) => post('api/deviceScreen/deviceStatusList', {})
+/**  1.10近30天设备故障统计 */
+export const errCensus = (id) => post('api/deviceScreen/errCensus', {})
diff --git a/src/pages/DeviceScreen.1.vue b/src/pages/DeviceScreen.1.vue
new file mode 100644
index 0000000..fa2cc87
--- /dev/null
+++ b/src/pages/DeviceScreen.1.vue
@@ -0,0 +1,1740 @@
+<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_5_l">
+            <div class="item_content_0">
+              <div id="echart_d01" style="width: 100%; height: 100%"></div>
+            </div>
+            <div class="total">
+              <div>110<span>台</span></div>
+            </div>
+            <div class="total-desc">设备总数</div>
+          </div>
+          <div class="item_5_r">
+            <div class="right_1_down_inner_3_i"  v-for="(e, i) in arrR01" :key="i">
+              <div class="right_1_down_inner_3_l">
+                <span :style="{'background-color': e.color}"><i :style="{'background-color': e.color}"></i></span>
+                <span>{{e.name}}</span>
+              </div>
+              <div class="right_1_down_inner_3_r">
+                <span>{{e.qty}}</span>
+                <span>台</span>
+              </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 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 cred">报警：</p>
+                <p class="item_content_1_inner_2_p2 cred">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 cred">
+                <p class="item_content_1_inner_2_p1 cred">报警：</p>
+                <p class="item_content_1_inner_2_p2 cred">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 cred">
+                <p class="item_content_1_inner_2_p1 cred">报警：</p>
+                <p class="item_content_1_inner_2_p2 cred">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"><span :style="{'background-color': ddddcolor}"><i></i></span>{{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: 'MonitoringScreen2',
+  data () {
+    return {
+      ddddcolor: '#f00',
+      arrR01: [
+        {
+          color: '#2D7CEB',
+          name: '正常运行',
+          qty: '10'
+        },
+        {
+          color: '#07E083',
+          name: '暂未生产',
+          qty: '20'
+        },
+        {
+          color: '#00D5FF',
+          name: '空闲设备',
+          qty: '30'
+        },
+        {
+          color: '#CC6060',
+          name: '故障设备',
+          qty: '40'
+        }
+      ],
+      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: {
+    fontSize (res) {
+      const clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
+      if (!clientWidth) return
+      let fontSize = clientWidth * res / 1920
+      return fontSize
+    },
+    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: '5',
+            axisLabel: {
+              textStyle: {
+                color: '#8FABBF', // y轴字体颜色
+                fontSize: '12'
+              }
+            },
+            data: ['设备01', '设备02', '设备03', '设备04', '设备05']
+          },
+          {
+            axisTick: 'none',
+            axisLine: 'none',
+            show: false,
+            axisLabel: {
+              textStyle: {
+                color: '#ffffff',
+                fontSize: '12'
+              }
+            },
+            data: [1, 1, 1, 1]
+          },
+          {
+            axisLine: {
+              lineStyle: {
+                type: [8, 4],
+                dashOffset: 4,
+                // color: 'rgba(0,0,0,0)' // y轴线颜色
+                color: '#3D5266', // y轴线颜色
+                opacity: 0.4
+              }
+            },
+            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: 2,
+                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(1, 0, 0, 0, [
+                  {
+                    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: 2,
+                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 = {
+        grid: {
+          top: this.fontSize(50),
+          left: 0,
+          right: this.fontSize(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: [{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: 14
+            }
+          },
+          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',
+              opacity: 0.2
+            }
+          }
+        },
+        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: 14
+            }
+          },
+          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',
+              opacity: 0.2
+            }
+          }
+        },
+        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: '#07E083'}}, {name: '关机设备', itemStyle: {color: '#EAAD24'}}, {name: '故障设备', itemStyle: {color: '#CC6060'}}]
+        },
+        xAxis: {
+          type: 'category',
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              width: 2,
+              color: '#8FABBF'
+            }
+          },
+          axisLabel: {
+            interval: 0,
+            textStyle: {
+              color: '#8FABBF',
+              fontSize: 14
+            }
+          },
+          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',
+              opacity: 0.2
+            }
+          }
+        },
+        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: '#07E083',
+                    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: '#CC6060',
+                    opacity: 1
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(123,33,33,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: false,
+            lineStyle: {
+              type: [8, 4],
+              dashOffset: 4,
+              color: '#8FABBF',
+              opacity: 0.2
+            }
+          },
+          max: max
+        },
+        series: [
+          {
+            type: 'bar',
+            barWidth: 8,
+            itemStyle: {
+              normal: {
+                show: true,
+                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: false,
+            lineStyle: {
+              type: [8, 4],
+              dashOffset: 4,
+              color: '#8FABBF',
+              opacity: 0.2
+            }
+          },
+          max: max
+        },
+        series: [
+          {
+            type: 'bar',
+            barWidth: 8,
+            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_0
+  width 2.2rem
+  height 2.2rem
+  // _fj(space-around)
+  // padding .17rem 0 .24rem
+.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%
+      &:nth-child(4)
+        span
+          _wh(.0725rem, .0725rem)
+          border-radius 100%
+          background-color #2D7CEB
+          margin-right .1rem
+// 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 #2D7CEB
+      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
+  margin-top .4rem
+  _wh(1.83rem, 60%)
+  _fj()
+  flex-direction column
+  .right_1_down_inner_3_i
+    margin-bottom .045rem
+.item_5_l_1
+  _wh(100%, 60%)
+  background right center / .02rem 100% url(../assets/images/screen1/line_3.png) no-repeat
+.item_5_l_2
+  _wh(100%, 40%)
+  .right_1_down_inner_3_i
+    &:nth-child(1), &:nth-child(2)
+      margin-bottom 5%
+.total
+  position absolute
+  top 2.5rem
+  left .3rem
+  text-align center
+  width 2.2rem
+  div
+    line-height 0.24rem
+    // color #f80
+    color #00D9FF
+    font-size .3rem
+    margin-top 0.08rem
+    font-weight 700
+.total-desc
+  width 2.2rem
+  text-align center
+.cred
+  color #CC6060
+</style>
diff --git a/src/pages/DeviceScreen.vue b/src/pages/DeviceScreen.vue
index fa2cc87..9573655 100644
--- a/src/pages/DeviceScreen.vue
+++ b/src/pages/DeviceScreen.vue
@@ -25,7 +25,7 @@
               <div id="echart_d01" style="width: 100%; height: 100%"></div>
             </div>
             <div class="total">
-              <div>110<span>台</span></div>
+              <div>{{totalNum}}<span>台</span></div>
             </div>
             <div class="total-desc">设备总数</div>
           </div>
@@ -36,7 +36,7 @@
                 <span>{{e.name}}</span>
               </div>
               <div class="right_1_down_inner_3_r">
-                <span>{{e.qty}}</span>
+                <span>{{e.value}}</span>
                 <span>台</span>
               </div>
             </div>
@@ -51,57 +51,57 @@
               <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>
+                <p class="item_content_1_inner_2_p2">{{sbgl_jo1.oee}}</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>
+                <p class="item_content_1_inner_2_p2">{{sbgl_jo1.MIBF}}h</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>
+                <p class="item_content_1_inner_2_p2">{{sbgl_jo1.MTTR}}h</p>
               </div>
               <div class="item_content_1_inner_2">
                 <p class="item_content_1_inner_2_p1 cred">报警：</p>
-                <p class="item_content_1_inner_2_p2 cred">4次</p>
+                <p class="item_content_1_inner_2_p2 cred">{{sbgl_jo1.err_times}}次</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>
+                <p class="item_content_1_inner_2_p2">{{sbgl_jo2.oee}}</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>
+                <p class="item_content_1_inner_2_p2">{{sbgl_jo2.MIBF}}h</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>
+                <p class="item_content_1_inner_2_p2">{{sbgl_jo2.MTTR}}h</p>
               </div>
-              <div class="item_content_1_inner_2 cred">
+              <div class="item_content_1_inner_2">
                 <p class="item_content_1_inner_2_p1 cred">报警：</p>
-                <p class="item_content_1_inner_2_p2 cred">4次</p>
+                <p class="item_content_1_inner_2_p2 cred">{{sbgl_jo2.err_times}}次</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>
+                <p class="item_content_1_inner_2_p2">{{sbgl_jo3.oee}}</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>
+                <p class="item_content_1_inner_2_p2">{{sbgl_jo3.MIBF}}h</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>
+                <p class="item_content_1_inner_2_p2">{{sbgl_jo3.MTTR}}h</p>
               </div>
-              <div class="item_content_1_inner_2 cred">
+              <div class="item_content_1_inner_2">
                 <p class="item_content_1_inner_2_p1 cred">报警：</p>
-                <p class="item_content_1_inner_2_p2 cred">4次</p>
+                <p class="item_content_1_inner_2_p2 cred">{{sbgl_jo3.err_times}}次</p>
               </div>
             </div>
           </div>
@@ -156,18 +156,18 @@
                 <li>关机时间</li>
                 <li>生产日期</li>
               </ul>
-              <div class="scroll_container_1">
+              <div class="scroll_container_1" v-if="array1.length">
                 <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"><span :style="{'background-color': ddddcolor}"><i></i></span>{{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.device_code}}</div>
+                      <div class="scroll-ul_1_div">{{e.device_name}}</div>
+                      <div class="scroll-ul_1_div">{{e.workprocedure_name}}</div>
+                      <div class="scroll-ul_1_div scroll-ul_1_div4"><span :style="{'background-color': e.color}"><i></i></span>{{e.device_status}}</div>
+                      <div class="scroll-ul_1_div">{{e.product_qty}}</div>
+                      <div class="scroll-ul_1_div">{{e.start_time}}</div>
+                      <div class="scroll-ul_1_div">{{e.end_time}}</div>
+                      <div class="scroll-ul_1_div">{{e.product_time}}</div>
                     </li>
                   </ul>
               </vue-seamless-scroll>
@@ -192,19 +192,19 @@
           <div class="item_content_4">
             <div class="scroll_wrap">
               <ul class="scroll_tab_2">
-                <li>设备编号</li>
-                <li>设备名称</li>
+                <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 v-for="(e, i) in array2" :key="i">
+                      <div class="scroll-ul_2_div">{{e.device_code}}</div>
+                      <div class="scroll-ul_2_div">{{e.device_name}}</div>
+                      <div class="scroll-ul_2_div">{{e.err_name}}</div>
+                      <div class="scroll-ul_2_div">{{e.start_time}}</div>
                     </li>
                   </ul>
               </vue-seamless-scroll>
@@ -230,99 +230,114 @@
 </template>
 
 <script>
+import {deviceStatus, oeeAndTeep, queryDeviceByWork, deviceErrorNum, deviceManage, deviceCensus, deviceErrorInfo, deviceUseRate, deviceStatusList, errCensus} from '@js/getData1.js'
 import * as echarts from 'echarts'
 export default {
   name: 'MonitoringScreen2',
   data () {
     return {
-      ddddcolor: '#f00',
-      arrR01: [
-        {
-          color: '#2D7CEB',
-          name: '正常运行',
-          qty: '10'
-        },
-        {
-          color: '#07E083',
-          name: '暂未生产',
-          qty: '20'
-        },
-        {
-          color: '#00D5FF',
-          name: '空闲设备',
-          qty: '30'
-        },
-        {
-          color: '#CC6060',
-          name: '故障设备',
-          qty: '40'
-        }
-      ],
+      totalNum: '',
+      // arrR01: [
+      //   {
+      //     color: '#2D7CEB',
+      //     name: '正常运行',
+      //     value: '10'
+      //   },
+      //   {
+      //     color: '#07E083',
+      //     name: '暂未生产',
+      //     value: '20'
+      //   },
+      //   {
+      //     color: '#00D5FF',
+      //     name: '空闲设备',
+      //     value: '30'
+      //   },
+      //   {
+      //     color: '#CC6060',
+      //     name: '故障设备',
+      //     value: '40'
+      //   }
+      // ],
+      arrR01: [],
       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'
-        }
-      ],
+      sbgl_jo1: {},
+      sbgl_jo2: {},
+      sbgl_jo3: {},
+      data03: '',
+      chartData1: [],
+      chartData2: [],
+      // chartData1: [
+      //   {
+      //     teep: '31',
+      //     workprocedure_name: 'D001'
+      //   },
+      //   {
+      //     teep: '22',
+      //     workprocedure_name: 'D002'
+      //   },
+      //   {
+      //     teep: '10',
+      //     workprocedure_name: 'D003'
+      //   },
+      //   {
+      //     teep: '38',
+      //     workprocedure_name: 'D004'
+      //   },
+      //   {
+      //     teep: '15',
+      //     workprocedure_name: 'D005'
+      //   },
+      //   {
+      //     teep: '66',
+      //     workprocedure_name: 'D006'
+      //   },
+      //   {
+      //     teep: '77',
+      //     workprocedure_name: 'D007'
+      //   }
+      // ],
+      // chartData2: [
+      //   {
+      //     err_times: '21',
+      //     device_name: 'SBGZ0001'
+      //   },
+      //   {
+      //     err_times: '32',
+      //     device_name: 'SBGZ0002'
+      //   },
+      //   {
+      //     err_times: '60',
+      //     device_name: 'SBGZ0003'
+      //   },
+      //   {
+      //     err_times: '78',
+      //     device_name: 'SBGZ0004'
+      //   },
+      //   {
+      //     err_times: '12',
+      //     device_name: 'SBGZ0005'
+      //   },
+      //   {
+      //     err_times: '6',
+      //     device_name: 'SBGZ0006'
+      //   },
+      //   {
+      //     err_times: '88',
+      //     device_name: 'SBGZ0007'
+      //   }
+      // ],
       xData: ['无屑下料机', '三通成型机', '推弯一体机', 'L22-35货压机'], // 横坐标
       yData: [23, 24, 18, 25], // 人数数据
       taskDate: [10, 11, 9, 17],
       taskDate2: [15, 19, 3, 23],
+      data05_d0: [],
+      data05_d1: [],
+      data05_d2: [],
+      data05_d3: [],
+      data05_d4: [],
+      data06_d0: [],
+      data06_d1: [],
       timer: null,
       time: '',
       hours: '',
@@ -340,8 +355,10 @@ export default {
       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'}],
+      // 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'}],
+      array1: [],
+      array2: [],
       num: 8
     }
   },
@@ -381,13 +398,23 @@ export default {
     })
   },
   mounted () {
-    this.setEchart08() // 右1
-    this.setEchart10() // 右3
-    this.setEchart01() // 左1
-    this.setEchart02() // 左3
-    this.setEchart03()
-    this.setEchart04()
-    this.setEchart05()
+    this._deviceStatus()
+    this._deviceManage()
+    this._deviceUseRate()
+    this._oeeAndTeep()
+    this._queryDeviceByWork() // gun
+    this._deviceCensus()
+    this._deviceStatusList() // 中grid
+    this._deviceErrorNum()
+    this._deviceErrorInfo() // 右grid
+    this._errCensus()
+    // this.setEchart01() // 左1
+    // this.setEchart02() // 左3
+    // this.setEchart03() // 中1
+    // this.setEchart04() // 中2
+    // this.setEchart05() // 中3
+    // this.setEchart08() // 右1
+    // this.setEchart10() // 右3
   },
   methods: {
     fontSize (res) {
@@ -415,10 +442,14 @@ export default {
       this.week = `${week}`
     },
     setEchart08 () {
-      // var myColor = ['#81E7ED'] // 内柱状图颜色
-      var dataLine = [5, 66, 33, 25, 10]
+      var dataLine = this.data06_d1
+      let numMax = Math.max.apply(null, dataLine)
+      let manNum = numMax + 1
       let positionLeft = 0.4
-      let max = 100 + 2 * positionLeft
+      let max = manNum + 2 * positionLeft
+      // var dataLine = [5, 66, 33, 25, 10]
+      // let positionLeft = 0.4
+      // let max = 100 + 2 * positionLeft
       var option = {
         grid: [
           {
@@ -451,7 +482,8 @@ export default {
                 fontSize: '12'
               }
             },
-            data: ['设备01', '设备02', '设备03', '设备04', '设备05']
+            data: this.data06_d0
+            // data: ['设备01', '设备02', '设备03', '设备04', '设备05']
           },
           {
             axisTick: 'none',
@@ -551,7 +583,7 @@ export default {
             type: 'bar',
             yAxisIndex: 2,
             barGap: '-100%',
-            data: [100, 100, 100, 100, 100],
+            data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
             barWidth: 23,
             label: {
               normal: {
@@ -591,7 +623,7 @@ export default {
         //   data: ['正常运行', '暂未生产', '空闲设备', '故障设备'],
         //   textStyle: {
         //     color: '#ffffff',
-        //     fontSize: '16'
+        //     fontSize: '12'
         //   }
         // },
         color: ['#0966E8', '#07E083', '#00D5FF', '#CC6060'],
@@ -620,6 +652,14 @@ export default {
       // 多列柱状图
       // 到外面壳边框的距离
       let option = {
+        dataZoom: [
+          {
+            show: false, // 为true滚动条出现
+            type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动
+            startValue: 0, // 从头开始。
+            endValue: 2 // end百分比显示范围，endValue具体显示几个数值
+          }
+        ],
         grid: {
           top: this.fontSize(50),
           left: 0,
@@ -764,14 +804,19 @@ export default {
       let echart = document.getElementById('echart_d04')
       this.myCharts04 = this.$echarts.init(echart)
       this.myCharts04.setOption(option)
+      this.autoMove(option, 1)
       window.addEventListener('resize', () => {
         this.myCharts04.resize()
       })
     },
     setEchart03 () {
-      let data1 = [50, 80]
-      let data2 = [50, 69]
-      let data3 = [25, 88]
+      let d03 = this.data03
+      let data1 = [d03.oee.value1, d03.teep.value1]
+      let data2 = [d03.oee.value2, d03.teep.value2]
+      let data3 = [d03.oee.value3, d03.teep.value3]
+      // let data1 = [50, 80]
+      // let data2 = [50, 69]
+      // let data3 = [25, 88]
       let option = {
         grid: {
           top: 50,
@@ -995,7 +1040,8 @@ export default {
               fontSize: 14
             }
           },
-          data: ['无屑下料机1', '无屑下料机1', '无屑下料机1', '无屑下料机1', '无屑下料机1', '无屑下料机1']
+          data: this.data05_d0
+          // data: ['无屑下料机1', '无屑下料机1', '无屑下料机1', '无屑下料机1', '无屑下料机1', '无屑下料机1']
         },
         yAxis: {
           type: 'value',
@@ -1044,7 +1090,8 @@ export default {
                 ])
               }
             },
-            data: ['390', '390', '390', '390', '390', '390']
+            data: this.data05_d1
+            // data: ['390', '390', '390', '390', '390', '390']
           },
           {
             name: '暂未生产设备',
@@ -1067,7 +1114,8 @@ export default {
                 ])
               }
             },
-            data: ['230', '230', '230', '230', '230', '230']
+            data: this.data05_d2
+            // data: ['230', '230', '230', '230', '230', '230']
           },
           {
             name: '关机设备',
@@ -1090,7 +1138,8 @@ export default {
                 ])
               }
             },
-            data: ['210', '210', '210', '210', '210', '210']
+            data: this.data05_d3
+            // data: ['210', '210', '210', '210', '210', '210']
           },
           {
             name: '故障设备',
@@ -1113,7 +1162,8 @@ export default {
                 ])
               }
             },
-            data: ['110', '110', '110', '110', '110', '110']
+            data: this.data05_d4
+            // data: ['110', '110', '110', '110', '110', '110']
           }
         ]
       }
@@ -1130,9 +1180,9 @@ export default {
       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))
+        total.push(el.teep)
+        names.push(el.workprocedure_name)
+        max = Math.max(max, Number(el.teep))
       })
       let option = {
         grid: {
@@ -1214,11 +1264,13 @@ export default {
                 color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                   {
                     offset: 0,
-                    color: '#0E90FD'
+                    color: '#0E90FD',
+                    opacity: 1
                   },
                   {
                     offset: 1,
-                    color: '#607080'
+                    color: 'rgba(96,112,128,0.10)',
+                    opacity: 0.1
                   }
                 ]),
                 borderWidth: 0
@@ -1277,9 +1329,9 @@ export default {
       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))
+        total.push(el.err_times)
+        names.push(el.device_name)
+        max = Math.max(max, Number(el.err_times))
       })
       let option = {
         grid: {
@@ -1343,11 +1395,13 @@ export default {
                 color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                   {
                     offset: 0,
-                    color: '#0E90FD'
+                    color: '#0E90FD',
+                    opacity: 1
                   },
                   {
                     offset: 1,
-                    color: '#607080'
+                    color: 'rgba(96,112,128,0.10)',
+                    opacity: 0.1
                   }
                 ]),
                 borderWidth: 0
@@ -1386,6 +1440,177 @@ export default {
           }
         }, 2000)
       }
+    },
+    autoMove (option, type) {
+      if (type === 1) {
+        this.timeOut1 = setInterval(() => {
+          if (Number(option.dataZoom[0].endValue) === option.series[0].data.length - 1) {
+            option.dataZoom[0].endValue = 2
+            option.dataZoom[0].startValue = 0
+          } else {
+            option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
+            option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
+          }
+          this.myCharts04.setOption(option)
+        }, 2000)
+      }
+    },
+    /** 左1 */
+    async _deviceStatus () {
+      let res = await deviceStatus()
+      if (res.code === '1') {
+        this.totalNum = res.result.total_num
+        this.data01 = res.result.ja
+        let colors = ['#2D7CEB', '#07E083', '#00D5FF', '#CC6060']
+        res.result.ja.map((e, i) => {
+          this.$set(e, 'color', colors[i])
+        })
+        this.arrR01 = [...res.result.ja]
+        this.setEchart01() // 左1
+      } else {
+        this.Dialog(res.desc)
+      }
+    },
+    /** 左2 */
+    async _deviceManage () {
+      let res = await deviceManage()
+      if (res.code === '1') {
+        this.sbgl_jo1 = res.result.jo1
+        this.sbgl_jo2 = res.result.jo2
+        this.sbgl_jo3 = res.result.jo3
+      } else {
+        this.Dialog(res.desc)
+      }
+    },
+    /** 左3 */
+    async _deviceUseRate () {
+      let res = await deviceUseRate()
+      if (res.code === '1') {
+        // console.log(res.result)
+        this.chartData1 = res.result
+        this.setEchart02() // 左3
+      } else {
+        this.Dialog(res.desc)
+      }
+    },
+    /** 中1 */
+    async _oeeAndTeep () {
+      let res = await oeeAndTeep()
+      if (res.code === '1') {
+        console.log(res.result)
+        this.data03 = res.result
+        this.setEchart03() // 中1
+      } else {
+        this.Dialog(res.desc)
+      }
+    },
+    /** 中2 */
+    async _queryDeviceByWork () {
+      let res = await queryDeviceByWork()
+      if (res.code === '1') {
+        console.log(res.result)
+        this.xData = []
+        this.yData = []
+        this.taskDate = []
+        this.taskDate2 = []
+        res.result.map((e, i) => {
+          this.xData.push(e.workprocedure_name)
+          this.yData.push(e.max_productivity)
+          this.taskDate.push(e.ave_productivity)
+          this.taskDate2.push(e.min_productivity)
+        })
+        if (res.result.length) {
+          window.clearInterval(this.timeOut1)
+          this.setEchart04() // 中2
+        }
+      } else {
+        this.Dialog(res.desc)
+      }
+    },
+    /** 中3 */
+    async _deviceCensus () {
+      let res = await deviceCensus()
+      if (res.code === '1') {
+        console.log(res.result)
+        this.data05_d0 = []
+        this.data05_d1 = []
+        this.data05_d2 = []
+        this.data05_d3 = []
+        this.data05_d4 = []
+        res.result.map((e, i) => {
+          this.data05_d0.push(e.workprocedure_name)
+          this.data05_d1.push(e.run_device)
+          this.data05_d2.push(e.prepare_device)
+          this.data05_d3.push(e.free_device)
+          this.data05_d4.push(e.err_device)
+        })
+        this.setEchart05() // 中3
+      } else {
+        this.Dialog(res.desc)
+      }
+    },
+    /** 中4 */
+    async _deviceStatusList () {
+      let res = await deviceStatusList()
+      if (res.code === '1') {
+        console.log(res.result)
+        // let colors = ['#2D7CEB', '#07E083', '#00D5FF', '#CC6060', '#fc0']
+        res.result.map((e, i) => {
+          if (e.device_status === '02') {
+            this.$set(e, 'color', '#2D7CEB')
+          }
+          if (e.device_status === '03') {
+            this.$set(e, 'color', '#07E083')
+          }
+          if (e.device_status === '04') {
+            this.$set(e, 'color', '#00D5FF')
+          }
+          if (e.device_status === '05') {
+            this.$set(e, 'color', '#CC6060')
+          }
+          if (e.device_status === '') {
+            this.$set(e, 'color', '#fc0')
+          }
+        })
+        this.array1 = res.result
+      } else {
+        this.Dialog(res.desc)
+      }
+    },
+    /** 右1 */
+    async _deviceErrorNum () {
+      let res = await deviceErrorNum()
+      if (res.code === '1') {
+        console.log(res.result)
+        res.result.map((e, i) => {
+          this.data06_d0.push(e.device_name)
+          this.data06_d1.push(e.err_num)
+        })
+        this.setEchart08() // 右1
+      } else {
+        this.Dialog(res.desc)
+      }
+    },
+    /** 右2 */
+    async _deviceErrorInfo () {
+      let res = await deviceErrorInfo()
+      if (res.code === '1') {
+        console.log(res.result)
+        this.array2 = res.result
+      } else {
+        this.Dialog(res.desc)
+      }
+    },
+    /** 右3 */
+    async _errCensus () {
+      let res = await errCensus()
+      if (res.code === '1') {
+        console.log(res.result)
+        this.chartData2 = res.result
+        this.setEchart10() // 右3
+      } else {
+        this.Dialog(res.desc)
+      }
     }
   }
 }
@@ -1495,12 +1720,12 @@ header
   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
+  margin 0.26rem 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
+  margin 0.26rem 0.08rem 0 0
   font-family "SourceHanSansCN"
   _font(.18rem, .18rem, #FFFFFF, 700, right)
 .item_wrap_1
@@ -1560,7 +1785,9 @@ header
       &:nth-child(8)
         width 13.2%
       &:nth-child(4)
+        // text-align left
         span
+          // display inline-block
           _wh(.0725rem, .0725rem)
           border-radius 100%
           background-color #2D7CEB
@@ -1571,7 +1798,7 @@ header
   border-bottom .01rem solid rgba(8,205,248,0.3)
   li
     float left
-    width 25%
+    width 18%
     _font(.14rem,.4rem,#78B1DE,,center)
     word-wrap break-word
     word-break break-all
@@ -1580,7 +1807,7 @@ header
     overflow hidden
     box-sizing border-box
     &:nth-child(4)
-      width 25%
+      width 46%
 .scroll_container_2
   width 100%
   height calc(100% - .4rem)
@@ -1594,16 +1821,24 @@ header
       box-shadow inset 0px 1px 0px 0px rgba(13,89,115,0.3)
     .scroll-ul_2_div
       float left
-      _wh(25%, .44rem)
+      _wh(18%, .44rem)
       _fj(center)
-      _font(.14rem, .44rem, #fff,,center)
+      _font(.12rem, .44rem, #fff,,center)
       word-wrap break-word
       word-break break-all
       white-space nowrap
       padding 0 .02rem
       overflow hidden
       &:nth-child(4)
-        width 25%
+        font-size .12rem
+        width 46%
+        _fj(left)
+        _font(.12rem, .44rem, #fff,,left)
+        word-wrap break-word
+        word-break break-all
+        white-space nowrap
+        padding 0 .02rem
+        overflow hidden
 .right_1_up
   clear both
   _wh(100%, 1.6rem)
@@ -1703,6 +1938,7 @@ header
 .item_5_l
   float left
   _wh(1.83rem, .3rem)
+  margin-top .2rem
 .item_5_r
   float right
   margin-top .4rem
@@ -1721,7 +1957,7 @@ header
       margin-bottom 5%
 .total
   position absolute
-  top 2.5rem
+  top 2.7rem
   left .3rem
   text-align center
   width 2.2rem
diff --git a/src/pages/MonitoringScreen2.vue b/src/pages/MonitoringScreen2.vue
new file mode 100644
index 0000000..47ac9bc
--- /dev/null
+++ b/src/pages/MonitoringScreen2.vue
@@ -0,0 +1,1089 @@
+<template>
+  <section>
+    <t-header title="海亮铜管智能车间设备监控中心"></t-header>
+    <div class="goods_shelves">
+      <div class="yard-wrap">
+        <div class="content_left">
+          <div class="content_l_item_1">
+            <div id="EchartContainer" style="width:660px;min-height:280px;height:280px; margin:30px 0 0 -50px"></div>
+          </div>
+          <!-- <div class="content_l_item_1">
+            <div id="xEchartContainer1" style="width:480px;height:336px"></div>
+          </div> -->
+          <!-- <div class="content_l_item_1">
+            <div id="xEchartContainer2" style="width:480px;height:336px"></div>
+          </div> -->
+          <!-- <div class="content_l_item_1">
+            <div id="xEchartContainer3" style="width:100%;height:336px"></div>
+          </div> -->
+          <!-- <div>设备综合效率OEE&产能利用效率TEEP</div>
+          <div class="content_l_item_1">
+            <div id="xEchartContainer4" style="width:100%;height:336px"></div>
+          </div> -->
+          <!-- <div class="content_l_item_2">
+            <div class="tip_item">
+              <p>设备状态列表</p>
+              <div class="tip_item_bg1"></div>
+              <div class="tip_item_bg2"></div>
+            </div>
+            <div class="item_3">
+              <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="array2" :class-option="defaultOption1">
+                  <ul class="content-block-scroll-ul_1">
+                    <li v-for="(e, i) in array2" :key="i" :class="['fcgreen', 'fcred', 'fcwhite'][Number(e.color_flag) - 1]">
+                      <div>{{i + 1}}</div>
+                      <div>{{e.material_code}}</div>
+                      <div>{{e.pcsn}}</div>
+                      <div>{{e.workorder_qty}}</div>
+                      <div>{{e.product_qty}}</div>
+                      <div>{{e.unit_name}}</div>
+                      <div>{{e.start_time}}</div>
+                      <div>{{e.end_time}}</div>
+                    </li>
+                  </ul>
+              </vue-seamless-scroll>
+              </div>
+            </div>
+          </div> -->
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+import THeader from '@components/header.vue'
+import * as echarts from 'echarts'
+export default {
+  name: 'TaskScreen',
+  components: {
+    THeader
+  },
+  data () {
+    return {
+      data: [{value: 500, name: '正常运行'}, {value: 300, name: '暂未生产'}, {value: 200, name: '空闲设备'}, {value: 100, name: '故障设备'}],
+      arr5: [
+        ['product', '运行设备', '暂未生产设备', '关机设备', '故障设备'],
+        ['无屑下料机', 3, 5, 10, 15],
+        ['直管下料机', 2, 8, 12, 3],
+        ['三通成型机', 10, 6, 15, 8],
+        ['三通一体机', 5, 20, 10, 2]
+      ],
+      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'
+        }
+      ],
+      xData: ['无屑下料机', '三通成型机', '推弯一体机', 'L22-35货压机', '直管下料机', '三通一体机', 'L66-35货压机'], // 横坐标
+      yData: [23, 24, 18, 25, 27, 28, 25], // 人数数据
+      taskDate: [10, 11, 9, 17, 14, 13, 14],
+      taskDate2: [15, 19, 3, 23, 22, 11, 17],
+      // mdata1: [320, 332, 301, 334, 390,360,320, 332, 301, 334, 390,360],
+      // mdata2: [220, 182, 191, 234, 290,320,220, 182, 191, 234, 290,320],
+      // mdata3: [150, 232, 201, 154, 190,150,150, 232, 201, 154, 190,150],
+      interTime: this.$store.getters.setTime,
+      timer: null,
+      obj1: {},
+      array1: [],
+      array2: [],
+      obj2: {},
+      array3: [],
+      timeOut: null,
+      myCharts: ''
+    }
+  },
+  computed: {
+    defaultOption1 () {
+      return {
+        step: 0.4, // 数值越大速度滚动越快
+        limitMoveNum: 8, // 开始无缝滚动的数据量 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: 11, // 开始无缝滚动的数据量 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._getEchart()
+    // this._getEchart1()
+    // this._getEchart2()
+    // this._getEchart3()
+    // this._getEchart4()
+  },
+  beforeDestroy () {
+    window.clearInterval(this.timer)
+  },
+  methods: {
+    _getEchart4 () {
+      var mdata1 = [50, 80]
+      var mdata2 = [30, 20]
+      var mdata3 = [55, 77]
+      const option = {
+        color: ['#ffdf25', '#36a9ce', '#d0e17d'],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        grid: {
+          left: '0%',
+          right: '0%',
+          bottom: '10%',
+          top: '10%',
+          containLabel: true
+        },
+        calculable: true,
+        xAxis: [
+          {
+            type: 'category',
+            axisTick: {show: false},
+            data: ['1月', '2月']
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value'
+          }
+        ],
+        series: [
+          {
+            name: '全国平均业绩',
+            type: 'bar',
+            barGap: 0,
+            data: mdata1
+          },
+          {
+            name: '地区平均业绩',
+            type: 'bar',
+            data: mdata2
+          },
+          {
+            name: '业务员业绩',
+            type: 'bar',
+            data: mdata3
+          }
+        ]
+      }
+      const myChart = echarts.init(document.getElementById('xEchartContainer4'))
+      myChart.setOption(option)
+      // 随着屏幕大小调节图表
+      window.addEventListener('resize', () => {
+        myChart.resize()
+      })
+    },
+    _getEchart3 () {
+      // 多列柱状图
+      const mulColumnZZTData = {
+        xAxis: {
+          data: this.xData
+        },
+        // 图例
+        legend: {
+          data: ['设备运行最大产能', '设备运行平均产能', '设备运行最小产能'],
+          top: '0%'
+        },
+        yAxis: {},
+        series: [
+          {
+            type: 'bar', // 形状为柱状图
+            data: this.yData,
+            name: '设备运行最大产能', // legend属性
+            itemStyle: {
+              normal: {
+                show: true,
+                color: '#0966E8'
+              }
+            }
+            // label: {
+            //   // 柱状图上方文本标签，默认展示数值信息
+            //   show: true,
+            //   position: 'top'
+            // }
+          },
+          {
+            type: 'line', // 形状为折线图
+            data: this.taskDate2,
+            name: '设备运行最小产能', // legend属性
+            itemStyle: {
+              normal: {
+                show: true,
+                color: '#EAAD24'
+              }
+            }
+          },
+          {
+            type: 'bar', // 形状为柱状图
+            data: this.taskDate,
+            name: '设备运行平均产能', // legend属性
+            itemStyle: {
+              normal: {
+                show: true,
+                color: '#07E083'
+              }
+            }
+          }
+        ]
+      }
+      const myChart = echarts.init(document.getElementById('xEchartContainer3'))
+      myChart.setOption(mulColumnZZTData)
+      // 随着屏幕大小调节图表
+      window.addEventListener('resize', () => {
+        myChart.resize()
+      })
+    },
+    _getEchart () {
+      let data = this.data
+      var option = {
+        tooltip: {
+          trigger: 'item'
+          // formatter: '{a} <br/>{b}: {c} ({d}%)'
+        },
+        legend: {
+          orient: 'vertical',
+          right: 0,
+          data: ['正常运行', '暂未生产', '空闲设备', '故障设备'],
+          textStyle: {
+            color: '#ffffff',
+            fontSize: '16'
+          }
+        },
+        color: ['#0755F1', '#F6B042', '#67D939', '#0c6650'],
+        series: [
+          {
+            type: 'pie',
+            radius: ['50%', '70%'],
+            avoidLabelOverlap: true, // 防止重叠
+            label: {
+              // show: true,
+              // position: 'center',
+              // formatter: this.echartsBlable,
+              textStyle: {
+                color: '#ffffff',
+                fontSize: '16'
+              },
+              // formatter: '{b}: {d}%',
+              formatter: '{d}%'
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: '16'
+                // fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              normal: {
+                length: 15, // 设置延长线的长度
+                length2: 25 // 设置第二段延长线的长度
+              },
+              show: true
+            },
+            data: data
+          }
+        ]
+      }
+      var echart = document.getElementById('EchartContainer')
+      var myChart = echarts.init(echart)
+      myChart.setOption(option)
+    },
+    _getEchart1 () {
+      let data = this.arr5
+      var option1 = {
+        tooltip: {},
+        dataset: {
+          source: data
+        },
+        color: ['#0755F1', '#F6B042', '#ff0000', '#ffff00'],
+        title: {
+          text: '设备综合统计', // 标题
+          textStyle: {
+            color: '#F3953E',
+            fontSize: '20'
+          }
+        },
+        legend: {
+          // itemGap: 25,
+          data: ['运行设备', '暂未生产设备', '关机设备', '故障设备'],
+          align: 'right',
+          top: 20,
+          right: 20,
+          textStyle: {
+            color: '#ffffff'
+          }
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#fff'
+            }
+          }
+        },
+        yAxis: {
+          // 设置坐标轴字体颜色和宽度
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: '#fff'
+            }
+          }
+        },
+        series: [
+          {
+            type: 'bar',
+            barWidth: 20,
+            barGap: '0%',
+            itemStyle: {
+              normal: {
+                barBorderRadius: 2,
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                  offset: 0,
+                  color: '#F18349' // 0% 处的颜色
+                }, {
+                  offset: 0.6,
+                  color: '#F5AC41' // 60% 处的颜色
+                }, {
+                  offset: 1,
+                  color: '#F9CB48' // 100% 处的颜色
+                }], false)
+              }
+            }
+          },
+          {
+            type: 'bar',
+            barWidth: 20,
+            itemStyle: {
+              normal: {
+                barBorderRadius: 2,
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                  offset: 0,
+                  // color: '#8AD46F' // 0% 处的颜色
+                  color: '#1268f3' // 0% 处的颜色
+                }, {
+                  offset: 0.6,
+                  // color: '#5AC990' // 60% 处的颜色
+                  color: '#ffffff' // 60% 处的颜色
+                }, {
+                  offset: 1,
+                  // color: '#5BBCB8' // 100% 处的颜色
+                  color: '#01ccfe' // 100% 处的颜色
+                }], false)
+              }
+            }
+          },
+          {
+            type: 'bar',
+            barWidth: 20,
+            itemStyle: {
+              normal: {
+                barBorderRadius: 2,
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                  offset: 0,
+                  // color: '#8AD46F' // 0% 处的颜色
+                  color: '#ffff00' // 0% 处的颜色
+                }, {
+                  offset: 0.6,
+                  // color: '#5AC990' // 60% 处的颜色
+                  color: '#08a4fa' // 60% 处的颜色
+                }, {
+                  offset: 1,
+                  // color: '#5BBCB8' // 100% 处的颜色
+                  color: '#ffff00' // 100% 处的颜色
+                }], false)
+              }
+            }
+          },
+          {
+            type: 'bar',
+            barWidth: 20,
+            itemStyle: {
+              normal: {
+                barBorderRadius: 2,
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                  offset: 0,
+                  // color: '#8AD46F' // 0% 处的颜色
+                  color: '#ff0000' // 0% 处的颜色
+                }, {
+                  offset: 0.6,
+                  // color: '#5AC990' // 60% 处的颜色
+                  color: '#ffffff' // 60% 处的颜色
+                }, {
+                  offset: 1,
+                  // color: '#5BBCB8' // 100% 处的颜色
+                  color: '#ff0000' // 100% 处的颜色
+                }], false)
+              }
+            }
+          }
+        ]
+      }
+      var echart1 = document.getElementById('xEchartContainer1')
+      var myChart1 = echarts.init(echart1)
+      myChart1.setOption(option1)
+    },
+    _getEchart2 () {
+      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: 12,
+              lineHeight: 12
+            }
+          },
+          axisLabel: {
+            color: '#8FABBF '
+          },
+          // data: names
+          data: names.length >= 5 ? names.slice(0, 5) : names
+        },
+        yAxis: {
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#909399'
+            }
+          },
+          axisLabel: {
+            color: '#909399'
+          },
+          splitLine: {
+            show: false
+          },
+          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 >= 5 ? total.slice(0, 5) : total,
+            label: {
+              show: true,
+              position: 'top',
+              distance: 5,
+              fontSize: 12
+            }
+          }
+        ]
+      }
+      let echart = document.getElementById('xEchartContainer2')
+      this.myChart1 = this.$echarts.init(echart)
+      this.myChart1.setOption(option)
+      if (names.length > 5) {
+        let t = 1
+        let stotal = total.slice(0, 5)
+        let snames = names.slice(0, 5)
+        this.timer2 = setInterval(() => {
+          stotal.shift()
+          stotal.push(total[t + 4])
+          snames.shift()
+          snames.push(names[t + 4])
+          this.myChart1.setOption({
+            xAxis: {
+              data: snames
+            },
+            series: [
+              {data: stotal}
+            ]
+          })
+          if (t + 5 < names.length) {
+            t++
+          } else {
+            t = -4
+          }
+        }, 2000)
+      }
+    },
+    setEchart1 () {
+      let rate = []
+      this.array1.map(el => {
+        rate.push(el.rate)
+      })
+      let option = {
+        grid: {
+          top: 60,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          borderColor: '#ffffff',
+          containLabel: true
+        },
+        legend: {
+          top: 0,
+          right: 0,
+          textStyle: {
+            color: '#ffffff',
+            fontSize: 16,
+            lineHeight: 20
+          },
+          itemGap: 20,
+          itemHeight: 8,
+          data: ['已出重量', '总重量']
+        },
+        dataZoom: [
+          {
+            show: false, // 为true滚动条出现
+            type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动
+            startValue: 0, // 从头开始。
+            endValue: 5 // end百分比显示范围，endValue具体显示几个数值
+          }
+        ],
+        xAxis: {
+          type: 'category',
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              width: 1,
+              color: '#586473'
+            }
+          },
+          axisLabel: {
+            interval: 0,
+            textStyle: {
+              color: '#fff',
+              fontSize: 16
+            }
+          },
+          data: this.array1.map((it) => it.material_name)
+        },
+        yAxis: {
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: false
+          },
+          axisLabel: {
+            textStyle: {
+              color: '#fff',
+              fontSize: 16
+            }
+          },
+          splitLine: {
+            show: false,
+            lineStyle: {
+              color: '#586473'
+            }
+          }
+        },
+        series: [
+          {
+            name: '已出重量',
+            type: 'bar',
+            // stack: '数量',
+            barWidth: '30',
+            itemStyle: {
+              normal: {
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#09bcb7'
+                  },
+                  {
+                    offset: 1,
+                    color: '#8bd46e'
+                  }
+                ])
+              }
+            },
+            data: this.array1.map((it) => Number(it.put_qty)),
+            label: {
+              show: false,
+              // formatter: (params) => {
+              //   if (Number(rate[params.dataIndex]) !== 0) {
+              //     return rate[params.dataIndex] + '%'
+              //   } else {
+              //     return ''
+              //   }
+              // },
+              position: 'top',
+              distance: 0,
+              fontSize: 16,
+              color: '#fff'
+            }
+          },
+          {
+            name: '总重量',
+            type: 'bar',
+            // stack: '数量',
+            barWidth: '30',
+            barGap: '-100%',
+            zlevel: -1,
+            itemStyle: {
+              normal: {
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 1,
+                    color: '#fccb05'
+                  },
+                  {
+                    offset: 0,
+                    color: '#f5804d'
+                  }
+                ])
+              }
+            },
+            data: this.array1.map((it) => Number(it.total_qty).toFixed(4)),
+            label: {
+              show: true,
+              formatter: (params) => {
+                var index = params.dataIndex
+                var str = '' + params.value + '\n\n' + '占比: ' + rate[index] + '%'
+                return str
+              },
+              position: 'top',
+              offset: 0,
+              fontSize: 16,
+              color: '#fff'
+            }
+          }
+        ]
+      }
+      let echart = document.getElementById('echart_d1')
+      this.myCharts = this.$echarts.init(echart)
+      this.myCharts.setOption(option)
+      this.autoMove(option)
+      window.addEventListener('resize', () => {
+        this.myCharts.resize()
+      })
+    },
+    autoMove (option) {
+      this.timeOut = setInterval(() => {
+        if (Number(option.dataZoom[0].endValue) === option.series[0].data.length - 1) {
+          option.dataZoom[0].endValue = 5
+          option.dataZoom[0].startValue = 0
+        } else {
+          option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
+          option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
+        }
+        this.myCharts.setOption(option)
+      }, 2000)
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import '~@css/mixin'
+.goods_shelves
+  _wh(100%, calc(100% - .75rem))
+  padding .1rem
+.yard-wrap
+  _wh(100%, 100%)
+  clear both
+.content_left
+  float left
+  _wh(51%, 100%)
+  overflow hidden
+.content_right
+  float right
+  _wh(48%, 100%)
+  border .03rem solid #68efef
+  padding 0 .2rem
+  overflow hidden
+.content_l_item_1
+  _wh(100%, 47%)
+  padding .2rem
+  _bis('../assets/images/bg1.png', 100%, 100%)
+.content_l_item_2
+  _wh(100%, 50%)
+  margin-top 3%
+  padding .2rem
+  _bis('../assets/images/bg1.png', 100%, 100%)
+.content_r_item_1
+  _wh(100%, 2.15rem)
+  padding .2rem
+  margin-top .2rem
+  _bis('../assets/images/bg2.png', 100%, 100%)
+.content_r_item_1_a
+  height 2.75rem
+.item_1
+  _wh(100%, 1.2rem)
+  clear both
+  overflow hidden
+.item_inner_l
+  float left
+  width 50%
+.item_txt
+  width 100%
+  _fj(flex-start)
+.item_txt_1
+  width 1rem
+  _font(.2rem, .40rem, #fff)
+.item_txt_2
+  _font(.28rem, .40rem, $yellow)
+  padding-left .1rem
+.item_2
+  _wh(100%, calc(100% - 1.2rem))
+.tip_item
+  position relative
+  height .4rem
+  // _bis('../assets/images/tip.png', 1.5rem, .08rem, left, bottom)
+  p
+    _font(.2rem, .4rem, #fff)
+.tip_item_bg1
+  position absolute
+  bottom -.04rem
+  left 0
+  _wh(.08rem, .08rem)
+  background-color #53cdf9
+  transform rotate(45deg)
+.tip_item_bg2
+  position absolute
+  bottom -.015rem
+  left .03rem
+  _wh(.78rem, .03rem)
+  background-color #53cdf9
+.item_3
+  _wh(100%, calc(100% - .4rem))
+  padding-top .2rem
+.scroll_tab_1
+  li
+    float left
+    width 10%
+    _font(.18rem,.4rem,#3da1ff,,center)
+    word-wrap break-word
+    word-break break-all
+    white-space nowrap
+    padding 0 .02rem
+    overflow hidden
+    background-color #041e43
+    box-sizing border-box
+    &:nth-child(1)
+      width 5%
+    &:nth-child(2)
+      width 17%
+    &:nth-child(3)
+      width 10%
+    &:nth-child(7), &:nth-child(8)
+      width 19%
+.content-block-scroll-ul_1
+  li
+    _wh(100%, .4rem)
+    &:nth-child(even)
+      background-color #041e43
+    // &:nth-child(1) div, &:nth-child(2) div
+    //   color $green
+    // &:nth-child(3) div
+    //   color $red
+.content-block-scroll-ul_1
+  li
+    div
+      float left
+      _wh(10%, inherit)
+      _fj(center)
+      font-size .17rem
+      line-height .2rem
+      text-align center
+      word-wrap break-word
+      word-break break-all
+      white-space nowrap
+      padding 0 .02rem
+      overflow hidden
+      &:nth-child(1)
+        width 5%
+      &:nth-child(2)
+        width 17%
+      &:nth-child(3)
+        width 10%
+      &:nth-child(7)
+        width 19%
+      &:nth-child(8)
+        width 19%
+.content-block-scroll-ul_1 .fcgreen div
+  color $green
+.content-block-scroll-ul_1 .fcred div
+  color $red
+.content-block-scroll-ul_1 .fcwhite div
+  color #fff
+.scroll_tab_2
+  _wh(100%, .4rem)
+  background-color #0e3758
+  li
+    float left
+    width 10%
+    _font(.18rem,.4rem,#76c0ff,,center)
+    word-wrap break-word
+    word-break break-all
+    white-space nowrap
+    padding 0 .02rem
+    overflow hidden
+    box-sizing border-box
+    &:nth-child(1)
+      width 6%
+    &:nth-child(3)
+      width 10%
+    &:nth-child(4)
+      width 25%
+    &:nth-child(5)
+      width 17%
+    &:nth-child(6)
+      width 12%
+    &:nth-child(7)
+      width 20%
+.scroll_container_1
+  width 100%
+  height calc(100% - .3rem)
+  overflow hidden
+.scroll_container_2
+  width 100%
+  height calc(100% - .4rem)
+  overflow hidden
+.content-block-scroll-ul_2
+  li
+    div
+      float left
+      width 10%
+      _font(.18rem,.5rem,#76c0ff,,center)
+      word-wrap break-word
+      word-break break-all
+      white-space nowrap
+      padding 0 .02rem
+      overflow hidden
+      border-right .01rem solid #0e3758
+      border-bottom .01rem solid #0e3758
+      &:last-child
+        border-right none
+      &:nth-child(1)
+        width 6%
+      &:nth-child(3)
+        width 10%
+      &:nth-child(4)
+        width 25%
+      &:nth-child(5)
+        width 17%
+      &:nth-child(6)
+        width 12%
+      &:nth-child(7)
+        width 20%
+.item_4
+  _wh(100%, .4rem)
+  _fj()
+  span
+    display block
+    _wh(20%, .4rem)
+    padding 0 .05rem
+    _font(.22rem, .4rem, $orange,,right)
+    overflow hidden
+    &:nth-child(1)
+      width 10%
+    &:nth-child(3)
+      width 30%
+      text-align left
+    &:nth-child(5)
+      width 19%
+    &:nth-child(2)
+      width 28%
+      text-align left
+    &:nth-child(4)
+      width 13%
+  .span1
+    _font(.16rem, .4rem, #fff,,)
+.item_5
+  margin .05rem 0
+  span
+    &:nth-child(2)
+      width 90%
+  .span2
+    _wh(79%, .4rem)
+    vertical-align top
+.progress-bar
+  _wh(100%, 100%)
+.progress-bar__outer
+  height 100%
+  border-radius 100px
+  background-color #ebeef5
+  overflow hidden
+  position relative
+  vertical-align middle
+.progress-bar__inner
+  position absolute
+  top 0
+  width 0
+  height 100%
+  text-align center
+  line-height 1
+  white-space nowrap
+  transition width .6s ease
+.progress-bar__inner_l
+  left 0
+  background-color $green
+  border-top-left-radius 100px
+  border-bottom-left-radius 100px
+  transition all .3s linear
+.progress-bar__inner_r
+  right 0
+  background-color $yellow
+  border-top-right-radius 100px
+  border-bottom-right-radius 100px
+.progress-bar__innerText
+    display inline-block
+    vertical-align middle
+    _font(.24rem, .4rem, #000)
+    margin 0 .05rem
+.content_r_item_2
+  _wh(100%, calc(100% - 2.75rem))
+  margin .2rem 0
+.content_r_item_2_a
+  height calc(100% - 2.15rem)
+.item_6
+  _wh(100%, 100%)
+  padding .1rem
+  border .01rem solid #114880
+.item_7
+  margin-top .05rem
+  span
+    &:nth-child(2), &:nth-child(4)
+      width 30%
+      color $green
+      text-align left
+    &:nth-child(3)
+      width 10%
+    &:last-child
+      width 15%
+      overflow visible
+.item_8
+  margin-top .2rem
+  span
+    &:nth-child(1)
+      color $red
+      width 100%
+      text-align center
+.circle
+  position relative
+  float right
+  _wh(.4rem, .4rem)
+.small-circle
+  border-radius 50%
+  _wh(.2rem, .2rem)
+  position absolute
+  left 50%
+  top 50%
+  transform translate3d(-50%, -50%, 0)
+  z-index 100
+.big-circle
+  position absolute
+  _wh(100%, 100%)
+  border-radius 50%
+  animation twinkling 1s infinite ease-in-out
+  animation-fill-mode both
+  z-index 99
+@keyframes twinkling {
+  0% {
+    opacity 0.2
+    transform scale(1)
+  }
+  50% {
+    opacity 0.5
+    transform scale(1.12)
+  }
+  100% {
+    opacity 0.2
+    transform scale(1)
+  }
+}
+.bggreen
+  background-color $green
+.bgred
+  background-color $red
+</style>