柱状

src/config/mork02.js

@@ -1,6 +1,28 @@
 /* eslint-disable */
 export const getAllBigScreen = () => {
     let res = {
+        "todaycpsituation": [
+            {
+                "customer": "海宁晶科（浙江）",
+                "plan_weight": "381.0",
+                "finish_weight": "0.0"
+            },
+            {
+                "customer": "海宁晶科（尖山）二期",
+                "plan_weight": "316.0",
+                "finish_weight": "0.185"
+            },
+            {
+                "customer": "山西晶科",
+                "plan_weight": "44.0",
+                "finish_weight": "40.0"
+            },
+            {
+                "customer": "眉山通威",
+                "plan_weight": "980.0",
+                "finish_weight": "308.0"
+            }
+        ],
         "dddatebase": [
             {
                 "customer": "海宁晶科（浙江）",
@@ -201,10 +223,6 @@ export const getAllBigScreen = () => {
                 "dd_status": "未开始"
             }
         ],
-        "fhsituation": {
-            "enter_proportion": "0.38",
-            "out_proportion": "0.62"
-        },
         "bzsituation": [
             {
                 "bz_situation": "未开始",
@@ -300,11 +318,7 @@ export const getAllBigScreen = () => {
                 "batch": "00250623129",
                 "dd_status": "未开始"
             }
-        ],
+        ]
-        "drbzsituation": {
-            "plan_weight": "1721.0",
-            "finish_weight": "934.0"
-        }
     }
     return res
 }

src/pages_960/Setup.vue

@@ -46,7 +46,7 @@ export default {
         setTime: this.setTime * 1000
       }
       this.$store.dispatch('setConfig', obj)
-      this.$router.push('/index')
+      this.$router.push('/wxdk')
       let element = document.documentElement
       if (!(document.fullscreenElement || document.mozFullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement)) {
         if (element.requestFullscreen) {

src/pages_960/modules/home/index2.vue

@@ -38,7 +38,7 @@
                           <div class="scroll-ul_1_div">{{e.small_model}}</div>
                           <div class="scroll-ul_1_div">{{e.batch_number}}</div>
                           <div class="scroll-ul_1_div">{{e.weight}}</div>
-                          <div class="scroll-ul_1_div">{{e.dd_status}}</div>
+                          <div class="scroll-ul_1_div" :class="{cyellow:e.dd_status ==='进行中',cgreen:e.dd_status ==='未开始',cpink:e.dd_status ==='已完成'}">{{e.dd_status}}</div>
                           </li>
                         </ul>
                       </vue-seamless-scroll>
@@ -52,12 +52,12 @@
             <div class="w_wraper">
               <div class="item_wraper">
                 <div class="title_wraper">
-                  <p>成品包装发货情况</p>
+                  <p>包装进度</p>
                 </div>
                 <div class="content_wraper content_wraper_2">
-                  <div class="pie_wraper pie_wraper1">
+                  <!-- <div class="pie_wraper pie_wraper1">
                     <div ref="echartsRef1" style="width: 100%; height: 100%;"></div>
-                  </div>
+                  </div> -->
                   <div class="pie_wraper pie_wraper2">
                     <div ref="echartsRef3" style="width: 100%; height: 100%;"></div>
                   </div>
@@ -65,7 +65,7 @@
               </div>
               <div class="item_wraper">
                 <div class="title_wraper">
-                  <p>当日包装完成情况</p>
+                  <p>成品包装情况</p>
                 </div>
                 <div class="content_wraper content_wraper_2">
                   <div class="w_wraper">
@@ -90,7 +90,7 @@
                           <li v-for="(e, i) in dataList2" :key="i">
                           <div class="scroll-ul_2_div">{{e.customer}}</div>
                           <div class="scroll-ul_2_div">{{e.batch_number}}</div>
-                          <div class="scroll-ul_2_div">{{e.dd_status}}</div>
+                          <div class="scroll-ul_2_div" :class="{cyellow:e.dd_status ==='进行中',cgreen:e.dd_status ==='未开始',cpink:e.dd_status ==='已完成'}">{{e.dd_status}}</div>
                           </li>
                         </ul>
                       </vue-seamless-scroll>
@@ -105,14 +105,14 @@
 </template>
 
 <script>
-import { getAllBigScreen } from '@js/mork02.js'
+// import { getAllBigScreen } from '@js/mork02.js'
-// import { getAllBigScreen } from '@js/getData2.js'
+import { getAllBigScreen } from '@js/getData2.js'
 export default {
   data () {
     return {
       interTime: this.$store.getters.setTime,
       timer: null,
-      // chart2Timer: null,
+      chart2Timer: null,
       curList: [], // 当日出入
       bzfhArr: [], // 包装发货
       historyList: [], // 历史分析
@@ -155,7 +155,7 @@ export default {
     this.refresh()
   },
   mounted () {
-    this.myChart1 = this.$echarts.init(this.$refs.echartsRef1)
+    // this.myChart1 = this.$echarts.init(this.$refs.echartsRef1)
     this.myChart2 = this.$echarts.init(this.$refs.echartsRef2)
     this.myChart3 = this.$echarts.init(this.$refs.echartsRef3)
   },
@@ -176,10 +176,10 @@ export default {
       clearInterval(this.timer)
       this.timer = null
     }
-    // if (this.chart2Timer !== null) {
+    if (this.chart2Timer !== null) {
-    //   clearInterval(this.chart2Timer)
+      clearInterval(this.chart2Timer)
-    //   this.chart2Timer = null
+      this.chart2Timer = null
-    // }
+    }
   },
   methods: {
     back () {
@@ -205,31 +205,93 @@ export default {
     },
     async _getAllBigScreen () {
       let res = await getAllBigScreen()
-      // if (this.chart2Timer !== null) {
+      if (this.chart2Timer !== null) {
-      //   clearInterval(this.chart2Timer)
+        clearInterval(this.chart2Timer)
-      //   this.chart2Timer = null
+        this.chart2Timer = null
-      // }
+      }
-      this.fhobj = res.fhsituation // 成品包装发货情况
+      // this.fhobj = res.fhsituation // 成品包装发货情况
-      this.bzfhArr = res.bzsituation // 成品-包装发货情况
+      this.bzsituation = res.bzsituation // 包装进度（一张饼图）
-      this.curList = res.drbzsituation // 当日包装完成情况
+      this.curList = [...res.todaycpsituation] // 成品包装情况（柱状图）
       this.dataList1 = [...res.dddatebase] // 滚动1-订单数据
       this.dataList2 = [...res.dddatebase] // 滚动2-（样品）包装发货进度
-      this.setEchart1()
+      // this.setEchart1()
-      this.setEchart2()
       this.setEchart3()
+      console.log(1)
+      this.setEchart2()
+      console.log(3)
     },
-    setEchart1 () {
+    // setEchart1 () {
-      let data = [
+    //   let data = [
-        {
+    //     {
-          value: this.fhobj.enter_proportion,
+    //       value: this.fhobj.enter_proportion,
-          name: '入库'
+    //       name: '入库'
+    //     },
+    //     {
+    //       value: this.fhobj.out_proportion,
+    //       name: '未入库'
+    //     }
+    //   ]
+    //   var option = {
+    //     legend: {
+    //       // orient: 'vertical',
+    //       orient: 'horizontal',
+    //       top: '4%',
+    //       // right: 0,
+    //       textStyle: {
+    //         color: '#fff',
+    //         fontWeight: 'bold',
+    //         fontSize: 12
+    //       },
+    //       itemGap: 10.86,
+    //       itemWidth: 14.16,
+    //       itemHeight: 7.38,
+    //       // data: dataName
+    //       data: ['入库', '未入库']
+    //     },
+    //     color: ['#0966E8', '#39E083', '#ffee0e', '#f975aa', '#32c5ff', '#f7b502'],
+    //     series: [
+    //       {
+    //         type: 'pie',
+    //         radius: ['38%', '70%'],
+    //         label: {
+    //           normal: {
+    //             show: false,
+    //             // position: 'inner',
+    //             formatter: '{d}%',
+    //             textStyle: {
+    //               color: '#fff',
+    //               fontWeight: 'bold',
+    //               fontSize: 12
+    //             }
+    //           }
+    //         },
+    //         labelLine: {
+    //           show: true
+    //         },
+    //         data: data
+    //       }
+    //     ]
+    //   }
+    //   this.myChart1.setOption(option, true)
+    // },
+    setEchart2 () {
+      let barName = []
+      let barData1 = []
+      let barData2 = []
+      console.log(this.curList, 666)
+      this.curList.map(el => {
+        barName.push(el.customer)
+        barData1.push(el.plan_weight)
+        barData2.push(el.finish_weight)
+      })
+      let option = {
+        grid: {
+          top: 20,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          containLabel: true
         },
-        {
-          value: this.fhobj.out_proportion,
-          name: '未入库'
-        }
-      ]
-      var option = {
         legend: {
           // orient: 'vertical',
           orient: 'horizontal',
@@ -243,106 +305,131 @@ export default {
           itemGap: 10.86,
           itemWidth: 14.16,
           itemHeight: 7.38,
-          // data: dataName
+          data: [{name: '入库', itemStyle: {color: '#67D470'}}, {name: '出库', itemStyle: {color: '#1980EA'}}]
-          data: ['入库', '未入库']
+        },
+        xAxis: {
+          type: 'category',
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              width: 1,
+              color: '#3C5787'
+            }
+          },
+          axisLabel: {
+            interval: 0,
+            fontSize: 12,
+            color: '#fff',
+            lineHeight: 10,
+            margin: 15
+          },
+          data: barName
+        },
+        yAxis: {
+          type: 'value',
+          // name: '单位：块',
+          axisLine: {
+            show: false
+          },
+          splitNumber: 4,
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            fontSize: 12,
+            color: '#fff'
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: [2, 1],
+              color: '#455C86'
+            }
+          }
         },
-        color: ['#0966E8', '#39E083', '#ffee0e', '#f975aa', '#32c5ff', '#f7b502'],
         series: [
           {
-            type: 'pie',
+            name: '入库',
-            radius: ['38%', '70%'],
+            type: 'bar',
-            label: {
+            barWidth: '18',
-              normal: {
+            itemStyle: {
-                show: false,
+              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                // position: 'inner',
+                {
-                formatter: '{d}%',
+                  offset: 1,
-                textStyle: {
+                  color: 'rgba(103,212,112,0.2)'
-                  color: '#fff',
+                },
-                  fontWeight: 'bold',
+                {
-                  fontSize: 12
+                  offset: 0.08,
+                  color: 'rgba(103,212,112,0.9)'
+                },
+                {
+                  offset: 0,
+                  color: 'rgba(255,255,255,0.9)'
                 }
-              }
+              ])
             },
-            labelLine: {
+            data: barData1
-              show: true
+          },
+          {
+            name: '出库',
+            type: 'bar',
+            barWidth: '18',
+            itemStyle: {
+              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 1,
+                  color: 'rgba(25,128,234,0.2)'
+                },
+                {
+                  offset: 0.08,
+                  color: 'rgba(25,128,234,0.9)'
+                },
+                {
+                  offset: 0,
+                  color: 'rgba(255,255,255,0.9)'
+                }
+              ])
             },
-            data: data
+            data: barData2
+          }
+        ],
+        dataZoom: [
+          {
+            xAxisIndex: 0, // 这里是从X轴的0刻度开始
+            show: false, // 是否显示滑动条，不影响使用
+            type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
+            startValue: 0, // 从头开始。
+            endValue: 2 // 展示到第几个。
           }
         ]
       }
-      this.myChart1.setOption(option, true)
-    },
-    setEchart2 () {
-      let data = [
-        {
-          value: this.curList.plan_weight,
-          name: '计划重量'
-        },
-        {
-          value: this.curList.finish_weight,
-          name: '已完成重量'
-        }
-      ]
-      var option = {
-        legend: {
-          orient: 'horizontal',
-          top: '4%',
-          textStyle: {
-            color: '#fff',
-            fontWeight: 'bold',
-            fontSize: 12
-          },
-          itemGap: 10.86,
-          itemWidth: 14.16,
-          itemHeight: 7.38,
-          data: ['计划重量', '已完成重量']
-        },
-        color: ['#0966E8', '#ffee0e'],
-        series: [
-          {
-            name: '当日包装完成情况',
-            type: 'pie',
-            radius: '70%',
-            label: {
-              normal: {
-                show: false,
-                // position: 'inner',
-                formatter: '{d}%',
-                textStyle: {
-                  color: '#fff',
-                  fontWeight: 'bold',
-                  fontSize: 12
-                }
-              }
-            },
-            labelLine: {
-              show: true
-            },
-            data: data,
-            emphasis: {
-              itemStyle: {
-                shadowBlur: 10,
-                shadowOffsetX: 0,
-                shadowColor: 'rgba(0, 0, 0, 0.5)'
-              }
-            }
-          }
-        ]
-      };
       this.myChart2.setOption(option, true)
+      this.chart2Timer = setInterval(() => {
+        if (option.dataZoom[0].endValue >= barData1.length - 1) {
+          option.dataZoom[0].endValue = 2
+          option.dataZoom[0].startValue = 0
+        } else {
+          option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
+          option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
+        }
+        this.myChart2.setOption(option, true)
+      }, 2000)
     },
     setEchart3 () {
       let data = [
         {
-          value: this.bzfhArr[0].bz_proportion,
+          value: this.bzsituation[0].bz_proportion,
           name: '未开始'
         },
         {
-          value: this.bzfhArr[1].bz_proportion,
+          value: this.bzsituation[1].bz_proportion,
           name: '进行中'
         },
         {
-          value: this.bzfhArr[2].bz_proportion,
+          value: this.bzsituation[2].bz_proportion,
           name: '已完成'
         }
       ]
@@ -367,7 +454,7 @@ export default {
         series: [
           {
             type: 'pie',
-            radius: ['38%', '70%'],
+            radius: ['50%', '90%'],
             label: {
               normal: {
                 show: false,
@@ -394,6 +481,12 @@ export default {
 </script>
 
 <style lang="stylus" scoped>
+.cyellow
+  color #ff0 !important
+.cgreen
+  color #30EBC9 !important
+.cpink
+  color #f975aa !important
 .n_container
   position relative
   width 100%
@@ -466,11 +559,11 @@ export default {
   &:last-child
     // margin-bottom 0
   &:nth-child(1), &:nth-child(6)
-    width 34%
+    width 20%
   &:nth-child(2)
-    width 17%
+    width 35%
   &:nth-child(3)
-    width 49%
+    width 45%
 .item_wraper_1
   // height calc((200% - 20px) / 3)
 .title_wraper
@@ -479,7 +572,7 @@ export default {
   background center / 100% 100% url('../../../images/bg-title_2_s.png') no-repeat
   padding 2px 22px
   p
-    font-size 10px
+    font-size 14px
     font-weight: 400;
     color: #fff;
     line-height 12px
@@ -519,9 +612,10 @@ export default {
   li
     float left
     width 14%
-    font-size 8px;
+    font-size 13px;
     line-height 20px
-    color #AFBED8
+    // color #AFBED8
+    color #E2BB0E
     text-align center
     font-weight: bold;
     font-style: italic;
@@ -586,9 +680,10 @@ export default {
   li
     float left
     width 33%
-    font-size 8px;
+    font-size 13px;
     line-height 20px
-    color #AFBED8
+    // color #AFBED8
+    color #E2BB0E
     text-align center
     font-weight: bold;
     font-style: italic;

src/pages_960/modules/home/indexbf.vue

@@ -0,0 +1,651 @@
+<template>
+  <div class="n_container">
+      <div class="n_header">
+          <div class="n_header_h1">
+              <h1>无锡帝科发货大数据平台</h1>
+          </div>
+          <div class="exit_btn iconfont" @click="back">&#xe85b;</div>
+      </div>
+      <div class="n_body_container">
+          <div class="n-center_wraper">
+            <div class="w_wraper">
+              <div class="item_wraper0">
+                <div class="title_wraper title_wraper_1">
+                  <p>订单数据</p>
+                </div>
+                <div class="content_wraper content_wraper3" style="padding: 0">
+                  <div class="scroll_wrap">
+                    <ul class="scroll_tab_1">
+                      <li>客户名称</li>
+                      <li>实发型号</li>
+                      <li>大型号</li>
+                      <li>小批次</li>
+                      <li>标签批次号</li>
+                      <li>重量</li>
+                      <li>订单状态</li>
+                    </ul>
+                    <div class="scroll_container_1">
+                      <vue-seamless-scroll :data="dataList1" :class-option="defaultOption1">
+                        <ul class="scroll-ul_1">
+                          <li v-for="(e, i) in dataList1" :key="i">
+                          <div class="scroll-ul_1_div">{{e.customer}}</div>
+                          <div class="scroll-ul_1_div">{{e.production_materials}}</div>
+                          <!-- <div class="scroll-ul_1_div">
+                            <span class="state" :class="'state_' + e.status"></span>
+                            <p class="state_name">{{['关机', '待机', '生产中', '故障'][Number(e.status)]}}</p>
+                          </div> -->
+                          <div class="scroll-ul_1_div">{{e.large_model}}</div>
+                          <div class="scroll-ul_1_div">{{e.small_model}}</div>
+                          <div class="scroll-ul_1_div">{{e.batch_number}}</div>
+                          <div class="scroll-ul_1_div">{{e.weight}}</div>
+                          <div class="scroll-ul_1_div">{{e.dd_status}}</div>
+                          </li>
+                        </ul>
+                      </vue-seamless-scroll>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="n_left_wraper">
+            <div class="w_wraper">
+              <div class="item_wraper">
+                <div class="title_wraper">
+                  <p>成品包装发货情况</p>
+                </div>
+                <div class="content_wraper content_wraper_2">
+                  <div class="pie_wraper pie_wraper1">
+                    <div ref="echartsRef1" style="width: 100%; height: 100%;"></div>
+                  </div>
+                  <!-- <div class="pie_wraper pie_wraper2">
+                    <div ref="echartsRef3" style="width: 100%; height: 100%;"></div>
+                  </div> -->
+                </div>
+              </div>
+              <div class="item_wraper">
+                <div class="title_wraper">
+                  <p>当日包装完成情况</p>
+                </div>
+                <div class="content_wraper content_wraper_2">
+                  <div class="w_wraper">
+                      <div ref="echartsRef2" style="width: 100%; height: 100%;"></div>
+                  </div>
+                </div>
+              </div>
+              <div class="item_wraper">
+                <div class="title_wraper">
+                  <p>包装发货进度</p>
+                </div>
+                <div class="content_wraper content_wraper3" style="padding: 0">
+                  <div class="scroll_wrap">
+                    <ul class="scroll_tab_2">
+                      <li>客户名称</li>
+                      <li>批次</li>
+                      <li>订单状态</li>
+                    </ul>
+                    <div class="scroll_container_2">
+                      <vue-seamless-scroll :data="dataList2" :class-option="defaultOption2">
+                        <ul class="scroll-ul_2">
+                          <li v-for="(e, i) in dataList2" :key="i">
+                          <div class="scroll-ul_2_div">{{e.customer}}</div>
+                          <div class="scroll-ul_2_div">{{e.batch_number}}</div>
+                          <div class="scroll-ul_2_div">{{e.dd_status}}</div>
+                          </li>
+                        </ul>
+                      </vue-seamless-scroll>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+      </div>
+  </div>
+</template>
+
+<script>
+import { getAllBigScreen } from '@js/mork02.js'
+// import { getAllBigScreen } from '@js/getData2.js'
+export default {
+  data () {
+    return {
+      interTime: this.$store.getters.setTime,
+      timer: null,
+      // chart2Timer: null,
+      curList: [], // 当日出入
+      bzfhArr: [], // 包装发货
+      historyList: [], // 历史分析
+      statisList: [], // 当日生产统计
+      loadList: [], // 当日车间上下料
+      dataList1: [], // 订单数据-滚动列表1
+      dataList2: [], // 订单数据-滚动列表2
+      myChart1: null,
+      myChart2: null,
+      myChart3: null
+    }
+  },
+  computed: {
+    defaultOption1 () {
+      return {
+        step: 0.3, // 数值越大速度滚动越快
+        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: 5000 // 单步运动停止的时间(默认值1000ms)
+      }
+    },
+    defaultOption2 () {
+      return {
+        step: 0.3, // 数值越大速度滚动越快
+        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: 5000 // 单步运动停止的时间(默认值1000ms)
+      }
+    }
+  },
+  created () {
+    this.refresh()
+  },
+  mounted () {
+    this.myChart1 = this.$echarts.init(this.$refs.echartsRef1)
+    this.myChart2 = this.$echarts.init(this.$refs.echartsRef2)
+    this.myChart3 = this.$echarts.init(this.$refs.echartsRef3)
+  },
+  destroyed () {
+    if (this.myChart1 !== null) {
+      this.myChart1.dispose()
+      this.myChart1 = null
+    }
+    if (this.myChart2 !== null) {
+      this.myChart2.dispose()
+      this.myChart2 = null
+    }
+    if (this.myChart3 !== null) {
+      this.myChart3.dispose()
+      this.myChart3 = null
+    }
+    if (this.timer !== null) {
+      clearInterval(this.timer)
+      this.timer = null
+    }
+    // if (this.chart2Timer !== null) {
+    //   clearInterval(this.chart2Timer)
+    //   this.chart2Timer = null
+    // }
+  },
+  methods: {
+    back () {
+      let flag = !!(document.fullscreenElement || document.mozFullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement)
+      if (flag) {
+        if (document.exitFullscreen) {
+          document.exitFullscreen()
+        } else if (document.webkitCancelFullScreen) {
+          document.webkitCancelFullScreen()
+        } else if (document.mozCancelFullScreen) {
+          document.mozCancelFullScreen()
+        } else if (document.msExitFullscreen) {
+          document.msExitFullscreen()
+        }
+      }
+      this.$router.push('/setup')
+    },
+    refresh () {
+      this._getAllBigScreen()
+      this.timer = setInterval(() => {
+        this._getAllBigScreen()
+      }, this.interTime)
+    },
+    async _getAllBigScreen () {
+      let res = await getAllBigScreen()
+      // if (this.chart2Timer !== null) {
+      //   clearInterval(this.chart2Timer)
+      //   this.chart2Timer = null
+      // }
+      this.fhobj = res.fhsituation // 成品包装发货情况
+      this.bzfhArr = res.bzsituation // 成品-包装发货情况
+      this.curList = res.drbzsituation // 当日包装完成情况
+      this.dataList1 = [...res.dddatebase] // 滚动1-订单数据
+      this.dataList2 = [...res.dddatebase] // 滚动2-（样品）包装发货进度
+      this.setEchart1()
+      this.setEchart2()
+      this.setEchart3()
+    },
+    setEchart1 () {
+      let data = [
+        {
+          value: this.fhobj.enter_proportion,
+          name: '入库'
+        },
+        {
+          value: this.fhobj.out_proportion,
+          name: '未入库'
+        }
+      ]
+      var option = {
+        legend: {
+          // orient: 'vertical',
+          orient: 'horizontal',
+          top: '4%',
+          // right: 0,
+          textStyle: {
+            color: '#fff',
+            fontWeight: 'bold',
+            fontSize: 12
+          },
+          itemGap: 10.86,
+          itemWidth: 14.16,
+          itemHeight: 7.38,
+          // data: dataName
+          data: ['入库', '未入库']
+        },
+        color: ['#0966E8', '#39E083', '#ffee0e', '#f975aa', '#32c5ff', '#f7b502'],
+        series: [
+          {
+            type: 'pie',
+            radius: ['38%', '70%'],
+            label: {
+              normal: {
+                show: false,
+                // position: 'inner',
+                formatter: '{d}%',
+                textStyle: {
+                  color: '#fff',
+                  fontWeight: 'bold',
+                  fontSize: 12
+                }
+              }
+            },
+            labelLine: {
+              show: true
+            },
+            data: data
+          }
+        ]
+      }
+      this.myChart1.setOption(option, true)
+    },
+    setEchart2 () {
+      let data = [
+        {
+          value: this.curList.plan_weight,
+          name: '计划重量'
+        },
+        {
+          value: this.curList.finish_weight,
+          name: '已完成重量'
+        }
+      ]
+      var option = {
+        legend: {
+          orient: 'horizontal',
+          top: '4%',
+          textStyle: {
+            color: '#fff',
+            fontWeight: 'bold',
+            fontSize: 12
+          },
+          itemGap: 10.86,
+          itemWidth: 14.16,
+          itemHeight: 7.38,
+          data: ['计划重量', '已完成重量']
+        },
+        color: ['#0966E8', '#ffee0e'],
+        series: [
+          {
+            name: '当日包装完成情况',
+            type: 'pie',
+            radius: '70%',
+            label: {
+              normal: {
+                show: false,
+                // position: 'inner',
+                formatter: '{d}%',
+                textStyle: {
+                  color: '#fff',
+                  fontWeight: 'bold',
+                  fontSize: 12
+                }
+              }
+            },
+            labelLine: {
+              show: true
+            },
+            data: data,
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ]
+      }
+      this.myChart2.setOption(option, true)
+    },
+    setEchart3 () {
+      let data = [
+        {
+          value: this.bzfhArr[0].bz_proportion,
+          name: '未开始'
+        },
+        {
+          value: this.bzfhArr[1].bz_proportion,
+          name: '进行中'
+        },
+        {
+          value: this.bzfhArr[2].bz_proportion,
+          name: '已完成'
+        }
+      ]
+      var option = {
+        legend: {
+          // orient: 'vertical',
+          orient: 'horizontal',
+          top: '4%',
+          // right: 0,
+          textStyle: {
+            color: '#fff',
+            fontWeight: 'bold',
+            fontSize: 12
+          },
+          itemGap: 10.86,
+          itemWidth: 14.16,
+          itemHeight: 7.38,
+          // data: dataName
+          data: ['未开始', '进行中', '已完成']
+        },
+        color: ['#39E083', '#ffee0e', '#f975aa', '#32c5ff', '#f7b502'],
+        series: [
+          {
+            type: 'pie',
+            radius: ['38%', '70%'],
+            label: {
+              normal: {
+                show: false,
+                // position: 'inner',
+                formatter: '{d}%',
+                textStyle: {
+                  color: '#fff',
+                  fontWeight: 'bold',
+                  fontSize: 12
+                }
+              }
+            },
+            labelLine: {
+              show: true
+            },
+            data: data
+          }
+        ]
+      }
+      this.myChart3.setOption(option, true)
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.n_container
+  position relative
+  width 100%
+  height 100%
+  overflow hidden
+.n_header
+  position absolute
+  left 0
+  top 0
+  width 100%
+  height 88px
+  background center / 100% url('../../../images/header_bg_s.png') no-repeat
+.n_header_h1
+  width: 100%;
+  height: 100%;
+  padding-top 12px
+  h1
+      font-size: 22px;
+      font-weight: 700;
+      color: #fff;
+      line-height: 1;
+      text-align center;
+      letter-spacing 4px
+.exit_btn
+  position absolute
+  left 3%
+  top 11%
+  z-index 100
+  height 16px
+  width 16px
+  line-height 16px
+  font-size 16px
+  color #AECAF5
+  text-align: center;
+.n_body_container
+  width 100%
+  height 100%
+  padding 60px 10px 10px 10px
+  display: flex;
+  // justify-content: space-between;
+  flex-direction: column;
+.n_left_wraper
+  width 100%
+  height 45%
+.n-center_wraper
+  width 100%
+  height 55%
+.w_wraper
+  width 100%
+  height 100%
+  display: flex;
+  justify-content: space-between;
+  overflow hidden
+.item_wraper0
+  width 100%
+  // height calc((100% - 20px) / 3)
+  height 100%
+  margin-bottom 10px
+  box-sizing: border-box;
+  padding: 8px 8px;
+  &:last-child
+    // margin-bottom 0
+.item_wraper
+  width 100%
+  // height calc((100% - 20px) / 3)
+  height 100%
+  margin-bottom 10px
+  box-sizing: border-box;
+  padding: 8px 8px;
+  &:last-child
+    // margin-bottom 0
+  &:nth-child(1), &:nth-child(6)
+    width 20%
+  &:nth-child(2)
+    width 35%
+  &:nth-child(3)
+    width 45%
+.item_wraper_1
+  // height calc((200% - 20px) / 3)
+.title_wraper
+  width 100%
+  height 24px
+  background center / 100% 100% url('../../../images/bg-title_2_s.png') no-repeat
+  padding 2px 22px
+  p
+    font-size 14px
+    font-weight: 400;
+    color: #fff;
+    line-height 12px
+.title_wraper_1
+  background-image url('../../../images/bg-title_1_s.png')
+.content_wraper
+  width 100%
+  height calc(100% - 24px)
+  padding 8px
+  background-color rgba(30, 65, 126, 70%)
+.content_wraper3
+  height 100%
+  overflow hidden
+.content_wraper_2
+  padding 0
+  display flex
+  justify-content: center;
+.pie_wraper
+  width 50%
+  height 100%
+  // padding 1px 0 0 1px
+  // background left center / 111px 111px url('../../../images/pie-bg_2_s.png') no-repeat
+.pie_wraper1
+  width 50%
+  // background #fff
+.pie_wraper2
+  width 50%
+  // background #ff0
+.scroll_wrap
+    width 100%
+    height 100%
+    padding 5px 10px 2px 10px
+.scroll_tab_1
+  width 100%
+  height 20px
+  background center / 100% 100% url('../../../images/table-bg_1.png') no-repeat
+  li
+    float left
+    width 14%
+    font-size 13px;
+    line-height 20px
+    // color #AFBED8
+    color #E2BB0E
+    text-align center
+    font-weight: bold;
+    font-style: italic;
+    word-wrap break-word
+    word-break break-all
+    white-space nowrap
+    padding 0 2px
+    overflow hidden
+    box-sizing border-box
+    &:nth-child(1), &:nth-child(6)
+      width 15%
+    .state
+      display block
+      width 20px
+      height 14px
+    .state_name
+      width calc(100% - 20px)
+.scroll_container_1
+  width 100%
+  height calc(100% - 20px)
+  overflow hidden
+.scroll-ul_1
+  li
+    width 100%
+    height 20px
+    border-bottom 1px solid rgba(122,159,224,0.17)
+    &:nth-child(even)
+      background rgba(31,46,73,0.7)
+    &:nth-child(odd)
+      background rgba(31,46,73,0.55)
+    .scroll-ul_1_div
+      float left
+      width 14%
+      height 20px
+      display flex
+      flex-direction row
+      justify-content center
+      align-items center
+      flex-wrap nowrap
+      font-size 8px
+      line-height 8px
+      color #B2BBD7
+      text-align center
+      // word-wrap break-word
+      // word-break break-all
+      white-space nowrap
+      padding 0 1px
+      overflow hidden
+      &:nth-child(1), &:nth-child(6)
+        width 15%
+      .state
+        display block
+        width 20px
+        height 14px
+      .state_name
+        width 100%
+        height 20px
+.scroll_tab_2
+  width 100%
+  height 20px
+  background center / 100% 100% url('../../../images/table-bg_1.png') no-repeat
+  li
+    float left
+    width 33%
+    font-size 13px;
+    line-height 20px
+    // color #AFBED8
+    color #E2BB0E
+    text-align center
+    font-weight: bold;
+    font-style: italic;
+    word-wrap break-word
+    word-break break-all
+    white-space nowrap
+    padding 0 2px
+    overflow hidden
+    box-sizing border-box
+    &:nth-child(1)
+      width 34%
+    .state
+      display block
+      width 20px
+      height 14px
+    .state_name
+      width calc(100% - 20px)
+.scroll_container_2
+  width 100%
+  height calc(100% - 20px)
+  overflow hidden
+.scroll-ul_2
+  li
+    width 100%
+    height 20px
+    border-bottom 1px solid rgba(122,159,224,0.17)
+    &:nth-child(even)
+      background rgba(31,46,73,0.7)
+    &:nth-child(odd)
+      background rgba(31,46,73,0.55)
+    .scroll-ul_2_div
+      float left
+      width 33%
+      height 20px
+      display flex
+      flex-direction row
+      justify-content center
+      align-items center
+      flex-wrap nowrap
+      font-size 8px
+      line-height 8px
+      color #B2BBD7
+      text-align center
+      // word-wrap break-word
+      // word-break break-all
+      white-space nowrap
+      padding 0 1px
+      overflow hidden
+      &:nth-child(1)
+        width 34%
+      .state
+        display block
+        width 20px
+        height 14px
+      .state_name
+        width 100%
+        height 20px
+</style>