From 79bbac67dac29415775aae28ea1c26d78d1751dc Mon Sep 17 00:00:00 2001
From: caill <815519168@qq.com>
Date: Mon, 1 Aug 2022 11:16:17 +0800
Subject: [PATCH] change

---
 src/assets/css/reset.css       |   8 +-
 src/components/header.vue      |   4 +-
 src/pages/DeviceScreen.vue     | 407 ++++++++++----------
 src/pages/HomeScreen.vue       |  38 ++
 src/pages/MonitoringScreen.vue | 654 +++++++++++++++++----------------
 5 files changed, 573 insertions(+), 538 deletions(-)

diff --git a/src/assets/css/reset.css b/src/assets/css/reset.css
index 69c3747..132b8f3 100644
--- a/src/assets/css/reset.css
+++ b/src/assets/css/reset.css
@@ -80,12 +80,12 @@ li {
 }
  
 html, body {
-     /* width: 1920px;
-     height: 1080px; */
-     width: 100%;
+     width: 1920px;
+     height: 1080px;
+     /* width: 100%;
      height: 100%;
      min-width: 1440px;
-     min-height: 1080px;
+     min-height: 1080px; */
 }
  
 body {
diff --git a/src/components/header.vue b/src/components/header.vue
index 69abdeb..655e71c 100644
--- a/src/components/header.vue
+++ b/src/components/header.vue
@@ -1,6 +1,6 @@
 <template>
   <header>
-    <p>海亮铜管智能车间生产监控中心</p>
+    <p>{{title}}</p>
     <div class="data_box clearfix">
       <div class="date_item date">{{date}}</div>
       <div class="date_item week">{{week}}</div>
@@ -12,6 +12,7 @@
         <div class="tiem_item seconds">{{seconds}}</div>
       </div>
     </div>
+    <slot></slot>
   </header>
 </template>
 
@@ -67,6 +68,7 @@ export default {
 <style lang="stylus" scoped>
 @import '~@css/mixin'
 header
+  position relative
   width 100%
   height 1rem
   position relative
diff --git a/src/pages/DeviceScreen.vue b/src/pages/DeviceScreen.vue
index 6535a26..6a3694b 100644
--- a/src/pages/DeviceScreen.vue
+++ b/src/pages/DeviceScreen.vue
@@ -1,232 +1,215 @@
 <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 class="container">
+    <div class="left_wrap">
+      <div class="item_wrap">
+        <div class="item_tip">
+          <div class="item_tip_left">设备实时状态</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 class="item_5_l">
+          <div class="item_content_0">
+            <div id="echart_d01" style="width: 100%; height: 100%"></div>
           </div>
-          <div class="item_5_l">
-            <div class="item_content_0">
-              <div id="echart_d01" style="width: 100%; height: 100%"></div>
+          <div class="total">
+            <div v-if="totalNum">{{totalNum}}<span>台</span></div>
+          </div>
+          <div v-if="totalNum" 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="total">
-              <div v-if="totalNum">{{totalNum}}<span>台</span></div>
-            </div>
-            <div v-if="totalNum" 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.value}}</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">{{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">{{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">{{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">{{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">{{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">{{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">{{sbgl_jo2.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">{{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">{{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">{{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">{{sbgl_jo3.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">{{sbgl_jo3.err_times}}次</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 scroll_container_3" 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.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}"></span><i>{{e.device_status}}</i></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>
-              </div>
+            <div class="right_1_down_inner_3_r">
+              <span>{{e.value}}</span>
+              <span>台</span>
             </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 class="item_wrap">
+        <div class="item_tip">
+          <div class="item_tip_left">设备管理</div>
         </div>
-        <div class="item_wrap">
-          <div class="item_tip">
-            <div class="item_tip_left">设备报警信息</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">{{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">{{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">{{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">{{sbgl_jo1.err_times}}次</p>
+            </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 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>
-              </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">{{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">{{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">{{sbgl_jo2.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">{{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">{{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">{{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">{{sbgl_jo3.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">{{sbgl_jo3.err_times}}次</p>
             </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 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 scroll_container_3" 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.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}"></span><i>{{e.device_status}}</i></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>
+            </div>
           </div>
         </div>
       </div>
     </div>
-    <section class="bottom"></section>
-  </section>
+    <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 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>
+            </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>
 </template>
 
 <script>
diff --git a/src/pages/HomeScreen.vue b/src/pages/HomeScreen.vue
index 14b0799..7fa51d1 100644
--- a/src/pages/HomeScreen.vue
+++ b/src/pages/HomeScreen.vue
@@ -1,16 +1,21 @@
 <template>
   <section class="box">
+    <t-header :title="title1">
+      <p class="p1" @click="toJump">{{title2}}</p>
+    </t-header>
     <Monitoring-Screen v-if="page === 'two'"></Monitoring-Screen>
     <Device-Screen v-if="page === 'one'"></Device-Screen>
   </section>
 </template>
 
 <script>
+import THeader from '@components/header.vue'
 import MonitoringScreen from './MonitoringScreen.vue'
 import DeviceScreen from './DeviceScreen.vue'
 export default {
   name: 'HomeScreen',
   components: {
+    THeader,
     MonitoringScreen,
     DeviceScreen
   },
@@ -21,14 +26,38 @@ export default {
       iTime: this.$store.getters.setTime1
     }
   },
+  computed: {
+    title1 () {
+      let t = ''
+      t = this.page === 'one' ? '海亮铜管智能车间设备监控中心' : '海亮铜管智能车间生产监控中心'
+      return t
+    },
+    title2 () {
+      let t = ''
+      t = this.page === 'two' ? '海亮铜管智能车间设备监控中心' : '海亮铜管智能车间生产监控中心'
+      return t
+    }
+  },
   mounted () {
     this.swipePage()
   },
+  beforeDestroy () {
+    this.$once('hook:beforeDestroy', () => {
+      clearInterval(this.timer)
+    })
+  },
   methods: {
     swipePage () {
       this.timer = setInterval(() => {
         this.page = this.page === 'one' ? 'two' : 'one'
       }, this.iTime)
+    },
+    toJump () {
+      window.clearInterval(this.timer)
+      this.page = this.page === 'one' ? 'two' : 'one'
+      setTimeout(() => {
+        this.swipePage()
+      }, 2000)
     }
   }
 }
@@ -39,4 +68,13 @@ export default {
 .box
   _wh(100%, 100%)
   overflow hidden
+.p1
+  position absolute
+  display block
+  cursor pointer
+  left .2509rem
+  top .22rem
+  font-family "SourceHanSansCN"
+  _font(.18rem, .30rem, #fff, 700,)
+  letter-spacing .01rem
 </style>
diff --git a/src/pages/MonitoringScreen.vue b/src/pages/MonitoringScreen.vue
index 386f5fc..7a5591a 100644
--- a/src/pages/MonitoringScreen.vue
+++ b/src/pages/MonitoringScreen.vue
@@ -1,300 +1,289 @@
 <template>
-  <section class="bg">
-    <t-header title="海亮铜管智能车间生产监控中心"></t-header>
-    <div class="container">
-      <div class="left_wrap">
-        <div class="item_wrap">
-          <div class="item_tip">
-            <div class="item_tip_left" style="width: 40%">计划达成</div>
-            <div class="item_tip_right" style="width: 60%">
-              <span :class="{'span1': swiper === true}">日计划达成</span><span :class="{'span1': swiper === false}">/月计划达成</span>
-            </div>
+  <div class="container">
+    <div class="left_wrap">
+      <div class="item_wrap">
+        <div class="item_tip">
+          <div class="item_tip_left" style="width: 40%">计划达成</div>
+          <div class="item_tip_right" style="width: 60%">
+            <span :class="{'span1': swiper === true}">日计划达成</span><span :class="{'span1': swiper === false}">/月计划达成</span>
           </div>
-          <div class="swiper_wrap">
-            <div class="swiper_wrap_con">
-              <div v-if="swiper === false" class="swiper_item">
-                <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">{{jo1.plan_qty === '' ? 0 : jo1.plan_qty}}</p>
-                    <p class="item_content_1_inner_2_p2">日计划量</p>
-                  </div>
-                  <div class="item_content_1_inner_2 item_content_1_inner_2_bg">
-                    <p class="item_content_1_inner_2_p1">{{jo1.real_qty === '' ? 0 : jo1.real_qty}}</p>
-                    <p class="item_content_1_inner_2_p2">日完成量</p>
-                  </div>
-                  <div class="item_content_1_inner_2">
-                    <p class="item_content_1_inner_2_p1">{{jo1.finish_rate === '' ? 0 : jo1.finish_rate}}</p>
-                    <p class="item_content_1_inner_2_p2">日完成率</p>
-                  </div>
+        </div>
+        <div class="swiper_wrap">
+          <div class="swiper_wrap_con">
+            <div v-if="swiper === false" class="swiper_item">
+              <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">{{jo1.plan_qty === '' ? 0 : jo1.plan_qty}}</p>
+                  <p class="item_content_1_inner_2_p2">日计划量</p>
                 </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">{{jo2.plan_qty === '' ? 0 : jo2.plan_qty}}</p>
-                    <p class="item_content_1_inner_2_p2">日计划量</p>
-                  </div>
-                  <div class="item_content_1_inner_2 item_content_1_inner_2_bg">
-                    <p class="item_content_1_inner_2_p1">{{jo2.real_qty === '' ? 0 : jo2.real_qty}}</p>
-                    <p class="item_content_1_inner_2_p2">日完成量</p>
-                  </div>
-                  <div class="item_content_1_inner_2">
-                    <p class="item_content_1_inner_2_p1">{{jo2.finish_rate === '' ? 0 : jo2.finish_rate}}</p>
-                    <p class="item_content_1_inner_2_p2">日完成率</p>
-                  </div>
+                <div class="item_content_1_inner_2 item_content_1_inner_2_bg">
+                  <p class="item_content_1_inner_2_p1">{{jo1.real_qty === '' ? 0 : jo1.real_qty}}</p>
+                  <p class="item_content_1_inner_2_p2">日完成量</p>
                 </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">{{jo3.plan_qty === '' ? 0 : jo3.plan_qty}}</p>
-                    <p class="item_content_1_inner_2_p2">日计划量</p>
-                  </div>
-                  <div class="item_content_1_inner_2 item_content_1_inner_2_bg">
-                    <p class="item_content_1_inner_2_p1">{{jo3.real_qty === '' ? 0 : jo3.real_qty}}</p>
-                    <p class="item_content_1_inner_2_p2">日完成量</p>
-                  </div>
-                  <div class="item_content_1_inner_2">
-                    <p class="item_content_1_inner_2_p1">{{jo3.finish_rate === '' ? 0 : jo3.finish_rate}}</p>
-                    <p class="item_content_1_inner_2_p2">日完成率</p>
-                  </div>
+                <div class="item_content_1_inner_2">
+                  <p class="item_content_1_inner_2_p1">{{jo1.finish_rate === '' ? 0 : jo1.finish_rate}}</p>
+                  <p class="item_content_1_inner_2_p2">日完成率</p>
                 </div>
               </div>
-              <div v-else class="swiper_item">
-                <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">{{joo1.plan_qty === '' ? 0 : joo1.plan_qty}}</p>
-                    <p class="item_content_1_inner_2_p2">月计划量</p>
-                  </div>
-                  <div class="item_content_1_inner_2 item_content_1_inner_2_bg">
-                    <p class="item_content_1_inner_2_p1">{{joo1.real_qty === '' ? 0 : joo1.real_qty}}</p>
-                    <p class="item_content_1_inner_2_p2">月完成量</p>
-                  </div>
-                  <div class="item_content_1_inner_2">
-                    <p class="item_content_1_inner_2_p1">{{joo1.finish_rate === '' ? 0 : joo1.finish_rate}}</p>
-                    <p class="item_content_1_inner_2_p2">月完成率</p>
-                  </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">{{jo2.plan_qty === '' ? 0 : jo2.plan_qty}}</p>
+                  <p class="item_content_1_inner_2_p2">日计划量</p>
                 </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">{{joo2.plan_qty === '' ? 0 : joo2.plan_qty}}</p>
-                    <p class="item_content_1_inner_2_p2">月计划量</p>
-                  </div>
-                  <div class="item_content_1_inner_2 item_content_1_inner_2_bg">
-                    <p class="item_content_1_inner_2_p1">{{joo2.real_qty === '' ? 0 : joo2.real_qty}}</p>
-                    <p class="item_content_1_inner_2_p2">月完成量</p>
-                  </div>
-                  <div class="item_content_1_inner_2">
-                    <p class="item_content_1_inner_2_p1">{{joo2.finish_rate === '' ? 0 : joo2.finish_rate}}</p>
-                    <p class="item_content_1_inner_2_p2">月完成率</p>
-                  </div>
+                <div class="item_content_1_inner_2 item_content_1_inner_2_bg">
+                  <p class="item_content_1_inner_2_p1">{{jo2.real_qty === '' ? 0 : jo2.real_qty}}</p>
+                  <p class="item_content_1_inner_2_p2">日完成量</p>
                 </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">{{joo3.plan_qty === '' ? 0 : joo3.plan_qty}}</p>
-                    <p class="item_content_1_inner_2_p2">月计划量</p>
-                  </div>
-                  <div class="item_content_1_inner_2 item_content_1_inner_2_bg">
-                    <p class="item_content_1_inner_2_p1">{{joo3.real_qty === '' ? 0 : joo3.real_qty}}</p>
-                    <p class="item_content_1_inner_2_p2">月完成量</p>
-                  </div>
-                  <div class="item_content_1_inner_2">
-                    <p class="item_content_1_inner_2_p1">{{joo3.finish_rate === '' ? 0 : joo3.finish_rate}}</p>
-                    <p class="item_content_1_inner_2_p2">月完成率</p>
-                  </div>
+                <div class="item_content_1_inner_2">
+                  <p class="item_content_1_inner_2_p1">{{jo2.finish_rate === '' ? 0 : jo2.finish_rate}}</p>
+                  <p class="item_content_1_inner_2_p2">日完成率</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">{{jo3.plan_qty === '' ? 0 : jo3.plan_qty}}</p>
+                  <p class="item_content_1_inner_2_p2">日计划量</p>
+                </div>
+                <div class="item_content_1_inner_2 item_content_1_inner_2_bg">
+                  <p class="item_content_1_inner_2_p1">{{jo3.real_qty === '' ? 0 : jo3.real_qty}}</p>
+                  <p class="item_content_1_inner_2_p2">日完成量</p>
+                </div>
+                <div class="item_content_1_inner_2">
+                  <p class="item_content_1_inner_2_p1">{{jo3.finish_rate === '' ? 0 : jo3.finish_rate}}</p>
+                  <p class="item_content_1_inner_2_p2">日完成率</p>
+                </div>
+              </div>
+            </div>
+            <div v-else class="swiper_item">
+              <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">{{joo1.plan_qty === '' ? 0 : joo1.plan_qty}}</p>
+                  <p class="item_content_1_inner_2_p2">月计划量</p>
+                </div>
+                <div class="item_content_1_inner_2 item_content_1_inner_2_bg">
+                  <p class="item_content_1_inner_2_p1">{{joo1.real_qty === '' ? 0 : joo1.real_qty}}</p>
+                  <p class="item_content_1_inner_2_p2">月完成量</p>
+                </div>
+                <div class="item_content_1_inner_2">
+                  <p class="item_content_1_inner_2_p1">{{joo1.finish_rate === '' ? 0 : joo1.finish_rate}}</p>
+                  <p class="item_content_1_inner_2_p2">月完成率</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">{{joo2.plan_qty === '' ? 0 : joo2.plan_qty}}</p>
+                  <p class="item_content_1_inner_2_p2">月计划量</p>
+                </div>
+                <div class="item_content_1_inner_2 item_content_1_inner_2_bg">
+                  <p class="item_content_1_inner_2_p1">{{joo2.real_qty === '' ? 0 : joo2.real_qty}}</p>
+                  <p class="item_content_1_inner_2_p2">月完成量</p>
+                </div>
+                <div class="item_content_1_inner_2">
+                  <p class="item_content_1_inner_2_p1">{{joo2.finish_rate === '' ? 0 : joo2.finish_rate}}</p>
+                  <p class="item_content_1_inner_2_p2">月完成率</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">{{joo3.plan_qty === '' ? 0 : joo3.plan_qty}}</p>
+                  <p class="item_content_1_inner_2_p2">月计划量</p>
+                </div>
+                <div class="item_content_1_inner_2 item_content_1_inner_2_bg">
+                  <p class="item_content_1_inner_2_p1">{{joo3.real_qty === '' ? 0 : joo3.real_qty}}</p>
+                  <p class="item_content_1_inner_2_p2">月完成量</p>
+                </div>
+                <div class="item_content_1_inner_2">
+                  <p class="item_content_1_inner_2_p1">{{joo3.finish_rate === '' ? 0 : joo3.finish_rate}}</p>
+                  <p class="item_content_1_inner_2_p2">月完成率</p>
                 </div>
               </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_d1" style="width: 100%; height: 100%"></div>
-          </div>
-        </div>
-        <div class="item_wrap">
-          <div class="item_tip">
-            <div class="item_tip_left">近30天产量走势</div>
-          </div>
-          <div class="item_content_1">
-            <div id="echart_d2" style="width: 100%; height: 100%"></div>
           </div>
         </div>
       </div>
-      <div class="center_wrap">
-        <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>
-              </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.produceorder_code}}</div>
-                      <div class="scroll-ul_1_div">{{e.plan_qty}}</div>
-                      <div class="scroll-ul_1_div">{{e.real_qty}}</div>
-                      <div class="scroll-ul_1_div">{{e.gap_qty}}</div>
-                      <div class="scroll-ul_1_div">{{e.finish_rate | numFixed(1)}}</div>
-                      <div class="scroll-ul_1_div">
-                        <div class="progress_line_wrap">
-                          <div class="progress_dot_wrap">
-                            <div class="progress_dot" :style="{'left': Number(e.finish_rate) + '%'}"></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_d1" style="width: 100%; height: 100%"></div>
+        </div>
+      </div>
+      <div class="item_wrap">
+        <div class="item_tip">
+          <div class="item_tip_left">近30天产量走势</div>
+        </div>
+        <div class="item_content_1">
+          <div id="echart_d2" style="width: 100%; height: 100%"></div>
+        </div>
+      </div>
+    </div>
+    <div class="center_wrap">
+      <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.produceorder_code}}</div>
+                    <div class="scroll-ul_1_div">{{e.material_code}}</div>
+                    <div class="scroll-ul_1_div">{{e.material_spec}}</div>
+                    <div class="scroll-ul_1_div">{{e.plan_qty}}</div>
+                    <div class="scroll-ul_1_div">{{e.real_qty}}</div>
+                    <div class="scroll-ul_1_div">{{e.gap_qty}}</div>
+                    <div class="scroll-ul_1_div">{{e.finish_rate | numFixed(1)}}%</div>
+                    <div class="scroll-ul_1_div">
+                      <div class="progress_line_wrap">
+                        <div class="progress_dot_wrap">
+                          <div class="progress_dot" :style="{'left': Number(e.finish_rate) + '%'}"></div>
                         </div>
                       </div>
-                    </li>
-                  </ul>
-              </vue-seamless-scroll>
-              </div>
+                    </div>
+                  </li>
+                </ul>
+            </vue-seamless-scroll>
             </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_wrap_2 item_wrap_3">
+        <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 scroll_tab_2">
+              <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="scroll-ul_1 scroll-ul_2">
+                  <li v-for="(e, i) in array2" :key="i">
+                    <div class="scroll-ul_1_div">{{e.produceorder_code}}</div>
+                    <div class="scroll-ul_1_div">{{e.material_code}}</div>
+                    <div class="scroll-ul_1_div">{{e.material_spec}}</div>
+                    <div class="scroll-ul_1_div">{{e.plan_qty}}</div>
+                    <div class="scroll-ul_1_div">{{e.real_qty}}</div>
+                    <div class="scroll-ul_1_div">{{e.date}}</div>
+                  </li>
+                </ul>
+            </vue-seamless-scroll>
+            </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>
-              </ul>
-              <div class="scroll_container_1">
-                <vue-seamless-scroll :data="array2" :class-option="defaultOption1">
-                  <ul class="scroll-ul_1">
-                    <li v-for="(e, i) in array2" :key="i">
-                      <div class="scroll-ul_1_div">{{e.produceorder_code}}</div>
-                      <div class="scroll-ul_1_div">{{e.material_code}}</div>
-                      <div class="scroll-ul_1_div">{{e.material_spec}}</div>
-                      <div class="scroll-ul_1_div">{{e.plan_qty}}</div>
-                      <div class="scroll-ul_1_div">{{e.real_qty}}</div>
-                      <div class="scroll-ul_1_div">{{e.date}}</div>
-                    </li>
-                  </ul>
-              </vue-seamless-scroll>
+        </div>
+      </div>
+    </div>
+    <div class="right_wrap">
+      <div class="item_wrap">
+        <div class="item_tip">
+          <div class="item_tip_left">今日产量</div>
+        </div>
+        <div class="item_content_3">
+          <div class="right_1_up">
+            <div class="right_1_up_left">
+              <div class="echart_d3_wrap">
+                <div id="echart_d3" style="width: 100%; height: 100%"></div>
+              </div>
+            </div>
+            <div class="right_1_up_right">
+              <div class="right_1_up_right_item">
+                <p class="right_1_up_p1">计划产量</p>
+                <p class="right_1_up_p2">{{objL1.plan_qty}}<span>PCS</span></p>
+              </div>
+              <div class="right_1_up_right_item">
+                <p class="right_1_up_p1">实际产量</p>
+                <p class="right_1_up_p2">{{objL1.real_qty}}<span>PCS</span></p>
+              </div>
+            </div>
+          </div>
+          <div class="right_1_down">
+            <div class="right_1_down_inner_1">
+              <div>工单总数：</div>
+              <div>{{objL1.sum_qty}}个</div>
+            </div>
+            <div class="right_1_down_inner_2">
+              <div :style="{'width': Number(objL1.normal_qty) * 100 / (Number(objL1.normal_qty) + Number(objL1.delayed_qty)) + '%' }"></div>
+              <div :style="{'width': Number(objL1.delayed_qty) * 100 / (Number(objL1.normal_qty) + Number(objL1.delayed_qty)) + '%'}"></div>
+            </div>
+            <div class="right_1_down_inner_3">
+              <div class="right_1_down_inner_3_i">
+                <div class="right_1_down_inner_3_l">
+                  <span><i class="color1"></i></span>
+                  <span>正常工单</span>
+                </div>
+                <div class="right_1_down_inner_3_r">
+                  <span>{{objL1.normal_qty}}</span>
+                  <span>个</span>
+                </div>
+              </div>
+              <div class="right_1_down_inner_3_i">
+                <div class="right_1_down_inner_3_l">
+                  <span><i class="color2"></i></span>
+                  <span>延期工单</span>
+                </div>
+                <div class="right_1_down_inner_3_r">
+                  <span>{{objL1.delayed_qty}}</span>
+                  <span>个</span>
+                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
-      <div class="right_wrap">
-        <div class="item_wrap">
-          <div class="item_tip">
-            <div class="item_tip_left">今日产量</div>
-          </div>
-          <div class="item_content_3">
-            <div class="right_1_up">
-              <div class="right_1_up_left">
-                <div class="echart_d3_wrap">
-                  <div id="echart_d3" style="width: 100%; height: 100%"></div>
-                </div>
-              </div>
-              <div class="right_1_up_right">
-                <div class="right_1_up_right_item">
-                  <p class="right_1_up_p1">计划产量</p>
-                  <p class="right_1_up_p2">{{objL1.plan_qty}}<span>PCS</span></p>
-                </div>
-                <div class="right_1_up_right_item">
-                  <p class="right_1_up_p1">实际产量</p>
-                  <p class="right_1_up_p2">{{objL1.real_qty}}<span>PCS</span></p>
-                </div>
-              </div>
-            </div>
-            <div class="right_1_down">
-              <div class="right_1_down_inner_1">
-                <div>工单总数：</div>
-                <div>{{objL1.sum_qty}}个</div>
-              </div>
-              <div class="right_1_down_inner_2">
-                <div :style="{'width': Number(objL1.normal_qty) * 100 / (Number(objL1.normal_qty) + Number(objL1.delayed_qty)) + '%' }"></div>
-                <div :style="{'width': Number(objL1.delayed_qty) * 100 / (Number(objL1.normal_qty) + Number(objL1.delayed_qty)) + '%'}"></div>
-              </div>
-              <div class="right_1_down_inner_3">
-                <div class="right_1_down_inner_3_i">
-                  <div class="right_1_down_inner_3_l">
-                    <span><i class="color1"></i></span>
-                    <span>正常工单</span>
-                  </div>
-                  <div class="right_1_down_inner_3_r">
-                    <span>{{objL1.normal_qty}}</span>
-                    <span>个</span>
-                  </div>
-                </div>
-                <div class="right_1_down_inner_3_i">
-                  <div class="right_1_down_inner_3_l">
-                    <span><i class="color2"></i></span>
-                    <span>延期工单</span>
-                  </div>
-                  <div class="right_1_down_inner_3_r">
-                    <span>{{objL1.delayed_qty}}</span>
-                    <span>个</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
+      <div class="item_wrap">
+        <div class="item_tip">
+          <div class="item_tip_left">今日TOP10产量</div>
         </div>
-        <div class="item_wrap">
-          <div class="item_tip">
-            <div class="item_tip_left">今日TOP10产量</div>
-          </div>
-          <div class="item_content_4">
-            <vue-seamless-scroll :data="array3" :class-option="defaultOption3">
-              <ul class="scroll-ul_2">
-                <li v-for="(e, i) in array3" :key="i">
-                  <div class="scroll-ul_2_div_1"><span>{{e.sort}}</span></div>
-                  <div class="scroll-ul_2_div_2">{{e.material_spec}}</div>
-                  <div class="scroll-ul_2_div_3">
-                    <span>{{e.real_qty}}</span><span>产量</span>
-                  </div>
-                </li>
-              </ul>
-            </vue-seamless-scroll>
-          </div>
-        </div>
-        <div class="item_wrap">
-          <div class="item_tip">
-            <div class="item_tip_left">近30天生产订单分布</div>
-          </div>
-          <div class="item_content_5">
-            <div class="item_5_l">
-              <div class="item_5_l_1">
-                <div id="echart_d4" style="width: 100%; height: 100%"></div>
-              </div>
-              <div class="item_5_l_2">
-                <div class="right_1_down_inner_3_i" v-for="(e, i) in arrR1.slice(0,3)" :key="i">
-                  <div class="right_1_down_inner_3_l">
-                    <span><i :style="{'background-color': e.color}"></i></span>
-                    <span>{{e.material_spec}}</span>
-                  </div>
-                  <div class="right_1_down_inner_3_r">
-                    <span>{{e.real_qty}}</span>
-                    <span>个</span>
-                  </div>
+        <div class="item_content_4">
+          <vue-seamless-scroll :data="array3" :class-option="defaultOption3">
+            <ul class="scroll-ul_2">
+              <li v-for="(e, i) in array3" :key="i">
+                <div class="scroll-ul_2_div_1"><span>{{e.sort}}</span></div>
+                <div class="scroll-ul_2_div_2">{{e.material_spec}}</div>
+                <div class="scroll-ul_2_div_3">
+                  <span>{{e.real_qty}}</span><span>产量</span>
                 </div>
-              </div>
+              </li>
+            </ul>
+          </vue-seamless-scroll>
+        </div>
+      </div>
+      <div class="item_wrap">
+        <div class="item_tip">
+          <div class="item_tip_left">近30天生产订单分布</div>
+        </div>
+        <div class="item_content_5">
+          <div class="item_5_l">
+            <div class="item_5_l_1">
+              <div id="echart_d4" style="width: 100%; height: 100%"></div>
             </div>
-            <div class="item_5_r">
-              <div class="right_1_down_inner_3_i"  v-for="(e, i) in arrR1.slice(3,10)" :key="i">
+            <div class="item_5_l_2">
+              <div class="right_1_down_inner_3_i" v-for="(e, i) in arrR1.slice(0,3)" :key="i">
                 <div class="right_1_down_inner_3_l">
                   <span><i :style="{'background-color': e.color}"></i></span>
                   <span>{{e.material_spec}}</span>
@@ -306,11 +295,22 @@
               </div>
             </div>
           </div>
+          <div class="item_5_r">
+            <div class="right_1_down_inner_3_i"  v-for="(e, i) in arrR1.slice(3,10)" :key="i">
+              <div class="right_1_down_inner_3_l">
+                <span><i :style="{'background-color': e.color}"></i></span>
+                <span>{{e.material_spec}}</span>
+              </div>
+              <div class="right_1_down_inner_3_r">
+                <span>{{e.real_qty}}</span>
+                <span>个</span>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
-    <section class="bottom"></section>
-  </section>
+  </div>
 </template>
 
 <script>
@@ -425,7 +425,7 @@ export default {
       })
       let option = {
         grid: {
-          top: this.fontSize(50),
+          top: 50,
           left: 0,
           right: 0,
           bottom: 0,
@@ -435,22 +435,22 @@ export default {
           icon: 'rect',
           textStyle: {
             color: '#fff',
-            fontSize: this.fontSize(14),
-            lineHeight: this.fontSize(14)
+            fontSize: 14,
+            lineHeight: 14
           },
-          itemGap: this.fontSize(30.86),
-          itemWidth: this.fontSize(14.16),
-          itemHeight: this.fontSize(7.38),
+          itemGap: 30.86,
+          itemWidth: 14.16,
+          itemHeight: 7.38,
           data: [{name: '弯头工段', itemStyle: {color: '#0E90FD'}}, {name: '综合工段', itemStyle: {color: '#33CCCC'}}, {name: '成品工段', itemStyle: {color: '#EAAD24'}}]
         },
-        dataZoom: [
-          {
-            show: false, // 为true滚动条出现
-            type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动
-            startValue: 0, // 从头开始。
-            endValue: 4 // end百分比显示范围，endValue具体显示几个数值
-          }
-        ],
+        // dataZoom: [
+        //   {
+        //     show: false, // 为true滚动条出现
+        //     type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动
+        //     startValue: 0, // 从头开始。
+        //     endValue: 4 // end百分比显示范围，endValue具体显示几个数值
+        //   }
+        // ],
         xAxis: {
           type: 'category',
           axisTick: {
@@ -467,8 +467,9 @@ export default {
             interval: 0,
             textStyle: {
               color: '#8FABBF',
-              fontSize: this.fontSize(16)
-            }
+              fontSize: 16
+            },
+            rotate: 50
           },
           data: date
         },
@@ -484,7 +485,7 @@ export default {
           axisLabel: {
             textStyle: {
               color: '#8FABBF',
-              fontSize: this.fontSize(14)
+              fontSize: 14
             }
           },
           splitLine: {
@@ -568,7 +569,7 @@ export default {
       let echart = document.getElementById('echart_d1')
       this.myCharts1 = this.$echarts.init(echart)
       this.myCharts1.setOption(option)
-      this.autoMove(option, 1)
+      // this.autoMove(option, 1)
       window.addEventListener('resize', () => {
         this.myCharts1.resize()
       })
@@ -582,9 +583,9 @@ export default {
       })
       let option = {
         grid: {
-          top: this.fontSize(50),
+          top: 50,
           left: 0,
-          right: this.fontSize(25),
+          right: 25,
           bottom: 0,
           containLabel: true
         },
@@ -593,7 +594,7 @@ export default {
             show: false, // 为true滚动条出现
             type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动
             startValue: 0, // 从头开始。
-            endValue: 5 // end百分比显示范围，endValue具体显示几个数值
+            endValue: 9 // end百分比显示范围，endValue具体显示几个数值
           }
         ],
         xAxis: {
@@ -613,9 +614,10 @@ export default {
             interval: 0,
             textStyle: {
               color: '#8FABBF',
-              fontSize: this.fontSize(16),
-              align: 'center'
-            }
+              fontSize: 16
+              // align: 'center'
+            },
+            rotate: 50
           },
           data: date
         },
@@ -631,7 +633,7 @@ export default {
           axisLabel: {
             textStyle: {
               color: '#8FABBF',
-              fontSize: this.fontSize(14)
+              fontSize: 14
             }
           },
           splitLine: {
@@ -699,7 +701,7 @@ export default {
       } else if (type === 2) {
         this.timeOut2 = setInterval(() => {
           if (Number(option.dataZoom[0].endValue) === option.series[0].data.length - 1) {
-            option.dataZoom[0].endValue = 5
+            option.dataZoom[0].endValue = 9
             option.dataZoom[0].startValue = 0
           } else {
             option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
@@ -710,7 +712,7 @@ export default {
       }
     },
     setEchart3 () {
-      let value = parseFloat(this.objL1.finish_rate)
+      let value = Number(this.objL1.finish_rate)
       let title = '%'
       let text = '完成率'
       let option = {
@@ -722,24 +724,24 @@ export default {
             textStyle: {
               rich: {
                 a: {
-                  fontSize: this.fontSize(26),
+                  fontSize: 26,
                   color: '#00D9FF',
                   fontFamily: 'SourceHanSansCN',
                   foontWeight: '700'
                 },
                 b: {
-                  fontSize: this.fontSize(16),
+                  fontSize: 16,
                   color: '#ffffff',
                   fontFamily: 'SourceHanSansCN',
                   foontWeight: '700',
-                  padding: [this.fontSize(10), 0, 0, this.fontSize(3)]
+                  padding: [10, 0, 0, 3]
                 },
                 c: {
                   color: '#FFFFFF',
-                  fontSize: this.fontSize(13),
+                  fontSize: 13,
                   fontWeight: '700',
                   fontFamily: 'SourceHanSansCN',
-                  padding: [this.fontSize(10), 0, 0, 0]
+                  padding: [10, 0, 0, 0]
                 }
               }
             }
@@ -793,28 +795,22 @@ export default {
     },
     setEchart4 () {
       let arr = []
-      let colors = []
       this.arrR1.map(el => {
-        arr.push(el.real_qty)
-        colors.push(el.color)
+        arr.push({name: el.material_spec, value: parseFloat(el.real_qty), itemStyle: {color: el.color}})
       })
       var option = {
         tooltip: {
           trigger: 'item'
         },
-        color: colors,
         series: [
           {
             name: '区域',
             type: 'pie',
             radius: ['70%', '95%'],
             center: ['50%', '50%'],
-            left: 0,
-            roseType: 'area',
-            avoidLabelOverlap: false,
+            roseType: 'radius',
             label: {
-              show: false,
-              position: 'center'
+              show: false
             },
             labelLine: {
               show: false
@@ -1040,7 +1036,7 @@ export default {
   border-bottom .01rem solid rgba(8,205,248,0.3)
   li
     float left
-    width 15%
+    width 12%
     _font(.14rem,.4rem,#78B1DE,,center)
     word-wrap break-word
     word-break break-all
@@ -1048,8 +1044,12 @@ export default {
     padding 0 .02rem
     overflow hidden
     box-sizing border-box
-    &:nth-child(6)
-      width 25%
+    &:nth-child(8)
+      width 16%
+.scroll_tab_2 li
+  width 17%
+  &:first-child
+    width 15%
 .scroll_container_1
   width 100%
   height calc(100% - .4rem)
@@ -1063,7 +1063,7 @@ export default {
       box-shadow inset 0px 1px 0px 0px rgba(13,89,115,0.3)
     .scroll-ul_1_div
       float left
-      _wh(15%, .44rem)
+      _wh(12%, .44rem)
       _fj(center)
       _font(.14rem, .44rem, #fff,,center)
       word-wrap break-word
@@ -1071,8 +1071,12 @@ export default {
       white-space nowrap
       padding 0 .02rem
       overflow hidden
-      &:nth-child(6)
-        width 25%
+      &:nth-child(8)
+        width 16%
+.scroll-ul_2 li .scroll-ul_1_div
+  width 17%
+  &:first-child
+    width 15%
 .progress_line_wrap
   position relative
   _wh(1.35rem, .03rem)
@@ -1169,25 +1173,33 @@ export default {
       _wh(.0725rem, .3rem)
       margin-left .15rem
       _fj()
+      overflow hidden
       i
         display block
         _wh(.0725rem, .0725rem)
         border-radius 100%
     &:nth-child(2)
+      _wh(calc(100% - 0.2825rem), .3rem)
       font-family "SourceHanSansCN"
       _font(.12rem, .3rem, #fff,400,)
       margin-left .06rem
+      overflow hidden
+      text-overflow ellipsis
+      white-space nowrap
 .right_1_down_inner_3_r
   _wh(50%, 100%)
   line-height .3rem
   overflow hidden
-  text-align center
+  text-align right
   span
     font-family "SourceHanSansCN"
     _font(.12rem, .3rem, #fff,700,)
     &:nth-child(1)
       font-family "SourceHanSansCN"
       _font(.18rem, .3rem, #00D5FF,700,)
+      overflow hidden
+      text-overflow ellipsis
+      white-space nowrap
 .item_content_4
   _wh(100%, calc(100% - .32rem))
   padding .1rem 0 .2rem
@@ -1234,10 +1246,10 @@ export default {
   clear both
 .item_5_l
   float left
-  _wh(1.83rem, 100%)
+  _wh(50%, 100%)
 .item_5_r
   float right
-  _wh(1.83rem, 100%)
+  _wh(50%, 100%)
   _fj()
   flex-direction column
 .item_5_l_1