From 8568c89564123a008646631f9f93542f940ed7a1 Mon Sep 17 00:00:00 2001
From: caill <815519168@qq.com>
Date: Mon, 14 Aug 2023 14:20:42 +0800
Subject: [PATCH] =?UTF-8?q?=E7=89=A9=E6=B5=81=E5=B7=A5=E8=89=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/shunhe/LogisticsProcess.vue | 1306 +++++++++++++++++++++++++
 src/router/index.js                   |    6 +
 2 files changed, 1312 insertions(+)
 create mode 100644 src/pages/shunhe/LogisticsProcess.vue

diff --git a/src/pages/shunhe/LogisticsProcess.vue b/src/pages/shunhe/LogisticsProcess.vue
new file mode 100644
index 0000000..cec78a4
--- /dev/null
+++ b/src/pages/shunhe/LogisticsProcess.vue
@@ -0,0 +1,1306 @@
+<template>
+    <section class="bg">
+      <t-header title="顺和大屏监控">
+        <p class="p1" @click="toJump">海亮纯铜精密件智能车间设备监控中心</p>
+      </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>
+            <div class="swiper_wrap">
+              <div class="swiper_wrap_con">
+                <div v-show="swiper === false" class="swiper_item">
+                <!-- <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="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>
+                  <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-show="swiper === true" class="swiper_item">
+                <!-- <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>
+          <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>
+                        </div>
+                      </li>
+                    </ul>
+                </vue-seamless-scroll>
+                </div>
+              </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_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>
+          </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="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>
+                </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>
+      </div>
+      <section class="bottom"></section>
+    </section>
+    </template>
+
+<script>
+import THeader from '@components/header.vue'
+import {planReached, worksectionHarvest, monthHarvest, productSchedule, unfinishOrder, output, topHarvest, monthOrder} from '@js/getData2.js'
+export default {
+  name: 'LogisticsProcess',
+  components: {
+    THeader
+  },
+  data () {
+    return {
+      setTime: null,
+      iTime: this.$store.getters.setTime1,
+      interTime: this.$store.getters.setTime,
+      timer1: null,
+      timer2: null,
+      timer3: null,
+      timeOut1: null,
+      swiper: false,
+      myCharts1: '',
+      myCharts2: '',
+      myCharts3: '',
+      myCharts4: '',
+      jo1: {},
+      jo2: {},
+      jo3: {},
+      joo1: {},
+      joo2: {},
+      joo3: {},
+      arrL2: [],
+      arrL3: [],
+      array1: [],
+      array2: [],
+      array3: [],
+      objL1: {},
+      arrR1: [],
+      docState: 'saved'
+    }
+  },
+  computed: {
+    defaultOption1 () {
+      return {
+        step: 0.4, // 数值越大速度滚动越快
+        limitMoveNum: 7, // 开始无缝滚动的数据量 this.dataList.length
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
+      }
+    },
+    defaultOption2 () {
+      return {
+        step: 0.4, // 数值越大速度滚动越快
+        limitMoveNum: 7, // 开始无缝滚动的数据量 this.dataList.length
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
+      }
+    },
+    defaultOption3 () {
+      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)
+      }
+    }
+  },
+  mounted () {
+    this.refresh()
+    this.setTime = setTimeout(() => {
+      this.$router.push('/devicescreen')
+    }, this.iTime)
+  },
+  beforeDestroy () {
+    this.$once('hook:beforeDestroy', () => {
+      clearInterval(this.timer1)
+      clearInterval(this.timer2)
+      clearInterval(this.timer3)
+      clearInterval(this.interTime)
+      clearInterval(this.timeOut1)
+      clearTimeout(this.setTime)
+    })
+  },
+  methods: {
+    toJump () {
+      this.$router.push('/devicescreen')
+    },
+    initData () {
+      this._planReached()
+      this._worksectionHarvest()
+      this._productSchedule()
+      this._output()
+      this._unfinishOrder()
+      this._topHarvest()
+      this._monthOrder()
+    },
+    refresh () {
+      this.initData()
+      this._monthHarvest()
+      this.timer2 = setInterval(() => {
+        this.initData()
+      }, this.interTime)
+      this.timer1 = setInterval(() => {
+        this._monthHarvest()
+      }, this.iTime)
+    },
+    setEchart1 () {
+      let date = []
+      let data1 = []
+      let data2 = []
+      let data3 = []
+      this.arrL2.map(e => {
+        date.push(e.date)
+        data1.push(e.elbow_qty)
+        data2.push(e.comprehensive_qty)
+        data3.push(e.comprehensive_qty)
+      })
+      let option = {
+        grid: {
+          top: 50,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          containLabel: true
+        },
+        legend: {
+          icon: 'rect',
+          textStyle: {
+            color: '#fff',
+            fontSize: 14,
+            lineHeight: 14
+          },
+          itemGap: 30.86,
+          itemWidth: 14.16,
+          itemHeight: 7.38,
+          data: [{name: '弯头工段', itemStyle: {color: '#0E90FD'}}, {name: '综合工段', itemStyle: {color: '#33CCCC'}}, {name: '成品工段', itemStyle: {color: '#EAAD24'}}]
+        },
+        xAxis: {
+          type: 'category',
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              width: 2,
+              color: '#8FABBF'
+            }
+          },
+          axisLabel: {
+            interval: 0,
+            textStyle: {
+              color: '#8FABBF',
+              fontSize: 16
+            },
+            rotate: 50
+          },
+          data: date
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            show: false
+          },
+          splitNumber: 2,
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            textStyle: {
+              color: '#8FABBF',
+              fontSize: 14
+            }
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: [8, 4],
+              dashOffset: 4,
+              color: '#8FABBF'
+            }
+          }
+        },
+        series: [
+          {
+            name: '弯头工段',
+            type: 'bar',
+            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
+                  }
+                ])
+              }
+            },
+            data: data1
+          },
+          {
+            name: '综合工段',
+            type: 'bar',
+            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
+                  }
+                ])
+              }
+            },
+            data: data2
+          },
+          {
+            name: '成品工段',
+            type: 'bar',
+            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
+                  }
+                ])
+              }
+            },
+            data: data3
+          }
+        ]
+      }
+      let echart = document.getElementById('echart_d1')
+      if (this.myCharts1 !== '') {
+        this.myCharts1.dispose()
+      }
+      if (echart !== null) {
+        this.myCharts1 = this.$echarts.init(echart)
+        this.myCharts1.setOption(option)
+        window.addEventListener('resize', () => {
+          this.myCharts1.resize()
+        })
+      }
+    },
+    setEchart2 () {
+      let date = []
+      let qty = []
+      this.arrL3.map(el => {
+        date.push(el.date)
+        qty.push(el.real_qty)
+      })
+      let option = {
+        grid: {
+          top: 50,
+          left: 0,
+          right: 25,
+          bottom: 0,
+          containLabel: true
+        },
+        dataZoom: [
+          {
+            show: false, // 为true滚动条出现
+            type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动
+            startValue: 0, // 从头开始。
+            endValue: 9 // end百分比显示范围，endValue具体显示几个数值
+          }
+        ],
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              width: 2,
+              color: '#8FABBF'
+            }
+          },
+          axisLabel: {
+            interval: 0,
+            textStyle: {
+              color: '#8FABBF',
+              fontSize: 16
+              // align: 'center'
+            },
+            rotate: 50
+          },
+          data: date
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            show: false
+          },
+          splitNumber: 2,
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            textStyle: {
+              color: '#8FABBF',
+              fontSize: 14
+            }
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: [8, 4],
+              dashOffset: 4,
+              color: '#8FABBF'
+            }
+          }
+        },
+        series: [
+          {
+            name: '今日',
+            type: 'line',
+            smooth: true,
+            symbolSize: 5,
+            showSymbol: false,
+            itemStyle: {
+              normal: {
+                lineStyle: {
+                  color: '#33CCCC',
+                  width: 2.4
+                }
+              }
+            },
+            areaStyle: {
+              normal: {
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: 'rgba(38,191,191,0.50)'
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(31,89,89,0.00)'
+                  }
+                ], false)
+              }
+            },
+            data: qty
+          }
+        ]
+      }
+      let echart = document.getElementById('echart_d2')
+      if (this.myCharts2 !== '') {
+        this.myCharts2.dispose()
+      }
+      if (echart !== null) {
+        this.myCharts2 = this.$echarts.init(echart)
+        this.myCharts2.setOption(option)
+        this.autoMove(option)
+        window.addEventListener('resize', () => {
+          this.myCharts2.resize()
+        })
+      }
+    },
+    autoMove (option) {
+      this.timeOut1 = setInterval(() => {
+        if (Number(option.dataZoom[0].endValue) === option.series[0].data.length - 1) {
+          option.dataZoom[0].endValue = 9
+          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.myCharts2.setOption(option)
+      }, 2000)
+    },
+    setEchart3 () {
+      let value = Number(this.objL1.finish_rate)
+      let title = '%'
+      let text = '完成率'
+      let option = {
+        title: [
+          {
+            text: '{a|' + value + '}{b|' + title + '}\n{c|' + text + '}',
+            x: 'center',
+            y: 'center',
+            textStyle: {
+              rich: {
+                a: {
+                  fontSize: 26,
+                  color: '#00D9FF',
+                  fontFamily: 'SourceHanSansCN',
+                  foontWeight: '700'
+                },
+                b: {
+                  fontSize: 16,
+                  color: '#ffffff',
+                  fontFamily: 'SourceHanSansCN',
+                  foontWeight: '700',
+                  padding: [10, 0, 0, 3]
+                },
+                c: {
+                  color: '#FFFFFF',
+                  fontSize: 13,
+                  fontWeight: '700',
+                  fontFamily: 'SourceHanSansCN',
+                  padding: [10, 0, 0, 0]
+                }
+              }
+            }
+          }
+        ],
+        polar: {
+          radius: ['75%', '83%'],
+          center: ['50%', '50%']
+        },
+        angleAxis: {
+          max: 100,
+          show: false
+        },
+        radiusAxis: {
+          type: 'category',
+          show: true,
+          axisLabel: {
+            show: false
+          },
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        series: [
+          {name: '',
+            type: 'bar',
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: '#0a2543'
+            },
+            data: [value],
+            coordinateSystem: 'polar',
+            itemStyle: {
+              normal: {
+                color: '#00dfff'
+              }
+            }
+          }
+        ]
+      }
+      let echart = document.getElementById('echart_d3')
+      if (this.myCharts3 !== '') {
+        this.myCharts3.dispose()
+      }
+      if (echart !== null) {
+        this.myCharts3 = this.$echarts.init(echart)
+        this.myCharts3.setOption(option)
+        window.addEventListener('resize', () => {
+          this.myCharts3.resize()
+        })
+      }
+    },
+    setEchart4 () {
+      let arr = []
+      this.arrR1.map(el => {
+        arr.push({name: el.material_spec, value: parseFloat(el.real_qty), itemStyle: {color: el.color}})
+      })
+      var option = {
+        tooltip: {
+          trigger: 'item'
+        },
+        series: [
+          {
+            name: '区域',
+            type: 'pie',
+            radius: ['70%', '95%'],
+            center: ['50%', '50%'],
+            roseType: 'radius',
+            label: {
+              show: false
+            },
+            labelLine: {
+              show: false
+            },
+            data: arr
+          }
+        ]
+      }
+      let echart = document.getElementById('echart_d4')
+      if (this.myCharts4 !== '') {
+        this.myCharts4.dispose()
+      }
+      if (echart !== null) {
+        this.myCharts4 = this.$echarts.init(echart)
+        this.myCharts4.setOption(option)
+        window.addEventListener('resize', () => {
+          this.myCharts4.resize()
+        })
+      }
+    },
+    /** 左一 */
+    async _planReached () {
+      let res = await planReached()
+      if (res.code === '1') {
+        this.jo1 = res.dayResult.jo1
+        this.jo2 = res.dayResult.jo2
+        this.jo3 = res.dayResult.jo3
+        this.joo1 = res.monthResult.joo1
+        this.joo2 = res.monthResult.joo2
+        this.joo3 = res.monthResult.joo3
+        clearInterval(this.timer3)
+        this.toSwiper()
+      } else {
+        this.Dialog(res.desc)
+      }
+    },
+    /** 轮播 */
+    toSwiper () {
+      this.timer3 = setInterval(() => {
+        this.swiper = !this.swiper
+      }, 5000)
+    },
+    /** 左二 */
+    async _worksectionHarvest () {
+      let res = await worksectionHarvest()
+      if (res.code === '1') {
+        this.arrL2 = [...res.result]
+        if (this.arrL2.length > 0) {
+          this.setEchart1()
+        }
+      } else {
+        this.Dialog(res.desc)
+      }
+    },
+    /** 左三 */
+    async _monthHarvest () {
+      let res = await monthHarvest()
+      if (res.code === '1') {
+        this.arrL3 = [...res.result]
+        clearInterval(this.timeOut1)
+        this.setEchart2()
+      } else {
+        this.Dialog(res.desc)
+      }
+    },
+    /** 中一 */
+    async _productSchedule () {
+      let res = await productSchedule()
+      if (res.code === '1') {
+        this.array1 = [...res.result]
+      } else {
+        this.Dialog(res.desc)
+      }
+    },
+    /** 中二 */
+    async _unfinishOrder () {
+      let res = await unfinishOrder()
+      if (res.code === '1') {
+        this.array2 = [...res.result]
+      } else {
+        this.Dialog(res.desc)
+      }
+    },
+    /** 右一 */
+    async _output () {
+      let res = await output()
+      if (res.code === '1') {
+        this.objL1 = res.result
+        this.setEchart3()
+      } else {
+        this.Dialog(res.desc)
+      }
+    },
+    /** 右二 */
+    async _topHarvest () {
+      let res = await topHarvest()
+      if (res.code === '1') {
+        res.result.map((e, i) => {
+          let index = parseInt(i) + 1
+          if (index >= 4) {
+            this.$set(e, 'sort', `NO.${index}`)
+          }
+        })
+        this.array3 = [...res.result]
+      } else {
+        this.Dialog(res.desc)
+      }
+    },
+    /** 右三 */
+    async _monthOrder () {
+      let res = await monthOrder()
+      if (res.code === '1') {
+        let colors = ['#E0CA07', '#007744', '#C0C0C0', '#B68845', '#07E083', '#2D7CEB', '#00D5FF ', '#C44545', '#8B31A1', '#E1BF94']
+        res.result.map((e, i) => {
+          this.$set(e, 'color', colors[i])
+        })
+        this.arrR1 = [...res.result]
+        this.setEchart4()
+      } else {
+        this.Dialog(res.desc)
+      }
+    }
+  }
+}
+</script>
+
+    <style lang="stylus" scoped>
+    @import '~@css/mixin'
+    .bg
+      _wh(100%, 100%)
+      overflow hidden
+    .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%)
+      margin-left .2936rem
+      padding .4rem .16rem
+      background center bottom / 100% 100% url(../../assets/images/screen1/item_2.png) no-repeat
+    .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_2
+      background center center / 100% 100% url(../../assets/images/screen1/title_bg_2.png) no-repeat
+    .item_tip_left
+      float left
+      _wh(60%, 100%)
+      font-family "SourceHanSansCN"
+      _font(.18rem, inherit, #fff, 700,)
+      letter-spacing .02rem
+      text-shadow 0 0 .09rem #159AFF
+      padding-left .38rem
+    .item_tip_right
+      float right
+      _wh(39%, 100%)
+      line-height inherit
+      text-align right
+      padding-right .09rem
+      span
+        _font(.14rem, inherit, #FFCB00, lighter,)
+      .span1
+        font-size .12rem
+        color #84B0DA
+    .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) / 3))
+      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
+      font-family "SourceHanSansCN"
+      _font(.18rem, .18rem, #fff, 700, center)
+      letter-spacing .0188rem
+    .item_content_1_inner_2_p2
+      font-family "SourceHanSansCN"
+      _font(.14rem, .14rem, #84B0DA, 700, center)
+      letter-spacing .02rem
+    .item_wrap_2
+      _wh(100%, calc((100% - .4rem) / 2))
+    .item_wrap_3
+      margin-top .4rem
+    .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%)
+    .scroll_tab_1
+      _wh(100%, .4rem)
+      border-bottom .01rem solid rgba(8,205,248,0.3)
+      li
+        float left
+        width 12%
+        _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 16%
+    .scroll_tab_2 li
+      width 17%
+      &:first-child
+        width 15%
+    .scroll_container_1
+      width 100%
+      height calc(100% - .4rem)
+      overflow hidden
+    .scroll-ul_1
+      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_1_div
+          float left
+          _wh(12%, .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(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)
+      background-image linear-gradient(270deg, #00EFFF 2%, #00527D 100%)
+    .progress_dot_wrap
+      position absolute
+      _wh(100%, .15rem)
+      top -.06rem
+      left -.05rem
+    .progress_dot
+      position absolute
+      top 0
+      left 0
+      _wh(.15rem, .15rem)
+      background center center / 100% 100% url(../../assets/images/screen1/dot_1.png) no-repeat
+    .item_content_3
+      _wh(100%, calc(100% - .32rem))
+      padding-top .1rem
+      _fj(flex-start)
+      flex-direction column
+    .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)
+    .echart_d3_wrap
+      _wh(80%, 80%)
+    .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)
+        padding-left .1rem
+    .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
+        height .0805rem
+        &:nth-child(1)
+          background-color #07E083
+        &:nth-child(2)
+          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
+      clear both
+      span
+        display block
+        float left
+        &:nth-child(1)
+          _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 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
+      overflow hidden
+    .scroll-ul_2
+      li
+        _wh(100%, .4rem)
+        clear both
+        margin-bottom .1rem
+        &:nth-child(-n+3)
+          background center center / 100% 100% url(../../assets/images/screen1/item_6.png) no-repeat
+        &:nth-child(n+4)
+          background center center / 100% 100% url(../../assets/images/screen1/item_7.png) no-repeat
+        &:nth-child(1) .scroll-ul_2_div_1
+          background center center / .24rem .27rem url(../../assets/images/screen1/top_1.png) no-repeat
+        &:nth-child(2) .scroll-ul_2_div_1
+          background center center / .24rem .27rem url(../../assets/images/screen1/top_2.png) no-repeat
+        &:nth-child(3) .scroll-ul_2_div_1
+          background center center / .24rem .27rem url(../../assets/images/screen1/top_3.png) no-repeat
+    .scroll-ul_2_div_1
+      float left
+      _wh(.6rem, 100%)
+      _font(.16rem, .4rem, #fff, 700, center)
+    .scroll-ul_2_div_2
+      float left
+      _wh(calc(60% - .6rem), 100%)
+      font-family "SourceHanSansCN"
+      _font(.14rem, .4rem, #fff, 700,)
+      padding-left .1rem
+      letter-spacing .02rem
+    .scroll-ul_2_div_3
+      float right
+      _wh(30%, 100%)
+      font-family "SourceHanSansCN"
+      _font(.12rem, .4rem, #fff, 700, right)
+      padding-right .2rem
+      span
+       &:nth-child(1)
+        font-size .18rem
+        letter-spacing: .0125rem
+    .item_content_5
+      _wh(100%, calc(100% - .32rem))
+      padding-top .3rem
+      clear both
+    .item_5_l
+      float left
+      _wh(50%, 100%)
+    .item_5_r
+      float right
+      _wh(50%, 100%)
+      _fj()
+      flex-direction column
+    .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%)
+      _fj()
+      flex-direction column
+      // .right_1_down_inner_3_i
+      //   &:nth-child(1), &:nth-child(2)
+      //     margin-bottom 5%
+    .color1
+      background-color #07E083
+    .color2
+      background-color #B68845
+    .swiper_wrap
+      clear both
+      _wh(100%, calc(100% - .32rem))
+      padding .17rem 0 .24rem
+      overflow hidden
+    .swiper_wrap_con
+      _wh(100%, 100%)
+    .swiper_item
+      position relative
+      left 0
+      float left
+      _wh(100%, 100%)
+      _fj(space-around)
+    .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/router/index.js b/src/router/index.js
index 1ccdf4c..e519ffe 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,6 +7,8 @@ const DeviceScreen = r => require.ensure([], () => r(require('@page/DeviceScreen
 const WorkshopScreen = r => require.ensure([], () => r(require('@page/WorkshopScreen')), 'WorkshopScreen')
 const HomeScreen = r => require.ensure([], () => r(require('@page/HomeScreen')), 'HomeScreen')
 
+const LogisticsProcess = r => require.ensure([], () => r(require('@page/shunhe/LogisticsProcess')), 'LogisticsProcess')
+
 Vue.use(Router)
 
 export default new Router({
@@ -35,6 +37,10 @@ export default new Router({
     {
       path: '/HomeScreen',
       component: HomeScreen
+    },
+    {
+      path: '/LogisticsProcess',
+      component: LogisticsProcess
     }
   ]
 })