From 52ee218e68efba12ed5f304bbab85665c6a9d858 Mon Sep 17 00:00:00 2001
From: xiangxy <shione_xxy@163.com>
Date: Mon, 14 Aug 2023 18:15:50 +0800
Subject: [PATCH] =?UTF-8?q?=E7=94=9F=E4=BA=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/ProdCount2.vue             | 896 +++++++++++++++++++++++++++
 src/pages/{ => shunhe}/ProdCount.vue | 165 ++---
 src/router/index.js                  |   2 +-
 3 files changed, 985 insertions(+), 78 deletions(-)
 create mode 100644 src/pages/ProdCount2.vue
 rename src/pages/{ => shunhe}/ProdCount.vue (79%)

diff --git a/src/pages/ProdCount2.vue b/src/pages/ProdCount2.vue
new file mode 100644
index 0000000..fcb72f6
--- /dev/null
+++ b/src/pages/ProdCount2.vue
@@ -0,0 +1,896 @@
+<template>
+  <section>
+    <t-header index='1'></t-header>
+    <section class="content">
+      <div class="con1">
+        <!-- <div class="c-title c-left"> -->
+        <div class="cbox">
+          <!-- <span class="icon1"></span> -->
+          <div>今日压制量：</div>
+          <div class="num">
+            <div class="bg" v-for="item in showNum1" :key="item" :class="{dot: item === '.'}">{{item}}</div>
+          </div>
+          <div>吨</div>
+        </div>
+        <!-- <div class="c-title c-right"> -->
+        <div class="cbox">
+          <div>今日干燥量：</div>
+          <div class="num">
+            <div class="bg" v-for="item in showNum2" :key="item" :class="{dot: item === '.'}">{{item}}</div>
+          </div>
+          <div>吨</div>
+        </div>
+        <!-- <div class="c-title c-right" style="marginLeft: 1rem;"> -->
+        <div class="cbox">
+          <div>今日成品量：</div>
+          <div class="num">
+            <div class="bg" v-for="item in showNum3" :key="item" :class="{dot: item === '.'}">{{item}}</div>
+          </div>
+          <div>吨</div>
+        </div>
+      </div>
+      <div class="center_wrapper" style="display:flex">
+        <div class="con2">
+          <div class="title">混碾生产</div>
+          <div class="item_content_0">
+            <div id="echart_d01" style="width: 100%; height: 100%"></div>
+          </div>
+        </div>
+        <div class="con3" style="position: relative">
+          <div class="title">成品计划完成情况</div>
+          <div class="item_content_1">
+            <div id="echart_d05" style="width: 100%; height: 100%"></div>
+          </div>
+        </div>
+        <!-- <div class="con3" style="position: relative">
+          <div class="title">在制品设备生产量</div>
+          <div id="echarts2" style="width: 100%; height: 100%;"></div>
+          <div class="desc1">
+            <span>当日产量：</span>
+            <span class="num">{{showNum3}}</span>
+            <span class="span3">块</span>
+            <span>当班产量：</span>
+            <span class="num">{{showNum4}}</span>
+            <span>吨</span>
+          </div>
+        </div> -->
+      </div>
+      <div class="con4">
+        <div class="block_h2">
+          <h2>生产任务</h2>
+        </div>
+        <div class="list_scroll_title">
+          <span>订单</span><span>工序</span><span>设备</span><span>物料号</span><span>生产物料</span><span>厂家</span><span>计划量</span><span>生产量</span><span>生产状态</span><span>计划开始时间</span><span>开始时间</span><span>结束时间</span>
+        </div>
+        <vue-seamless-scroll :data="taskData" :class-option="classOption" class="content-block-scroll">
+          <ul class="content-block-scroll-ul">
+            <li v-for="(e, i) in taskData" :key="i">
+              <span>{{e.device_name}}</span><span>{{e.material_code}}</span><span>{{e.plan_qty}}</span><span>{{e.real_qty}}</span><span>{{e.qualified_qty}}</span><span>{{e.unqualified_qty}}</span><span>{{e.order_status_name}}</span><span>{{e.realproducestart_date}}</span><span>{{e.realproduceend_date}}</span>
+              <!-- <span :class="{blue:e.order_status ==='1',yellow:e.order_status ==='2',green:e.order_status ==='3',red:e.order_status ==='4',orange:e.order_status ==='5'}">{{e.device_name}}</span><span :class="{blue:e.order_status ==='1',yellow:e.order_status ==='2',green:e.order_status ==='3',red:e.order_status ==='4',orange:e.order_status ==='5'}">{{e.material_code}}</span><span :class="{blue:e.order_status ==='1',yellow:e.order_status ==='2',green:e.order_status ==='3',red:e.order_status ==='4',orange:e.order_status ==='5'}">{{e.plan_qty}}</span><span :class="{blue:e.order_status ==='1',yellow:e.order_status ==='2',green:e.order_status ==='3',red:e.order_status ==='4',orange:e.order_status ==='5'}">{{e.real_qty}}</span><span :class="{blue:e.order_status ==='1',yellow:e.order_status ==='2',green:e.order_status ==='3',red:e.order_status ==='4',orange:e.order_status ==='5'}">{{e.qualified_qty}}</span><span :class="{blue:e.order_status ==='1',yellow:e.order_status ==='2',green:e.order_status ==='3',red:e.order_status ==='4',orange:e.order_status ==='5'}">{{e.unqualified_qty}}</span><span :class="{blue:e.order_status ==='1',yellow:e.order_status ==='2',green:e.order_status ==='3',red:e.order_status ==='4',orange:e.order_status ==='5'}">{{e.order_status_name}}</span><span :class="{blue:e.order_status ==='1',yellow:e.order_status ==='2',green:e.order_status ==='3',red:e.order_status ==='4',orange:e.order_status ==='5'}">{{e.realproducestart_date}}</span><span :class="{blue:e.order_status ==='1',yellow:e.order_status ==='2',green:e.order_status ==='3',red:e.order_status ==='4',orange:e.order_status ==='5'}">{{e.realproduceend_date}}</span> -->
+            </li>
+          </ul>
+        </vue-seamless-scroll>
+      </div>
+    </section>
+  </section>
+</template>
+
+<script>
+import THeader from '@components/header.vue'
+import * as echarts from 'echarts'
+import { productionStatistics } from '@js/getData1'
+export default {
+  name: 'ProdCount',
+  components: {
+    THeader
+  },
+  data () {
+    return {
+      interTime: this.$store.getters.setTime,
+      timer: null,
+      showNum1: '',
+      showNum2: '',
+      showNum3: '222',
+      showNum4: '333',
+      myCharts05: '',
+      materData: [],
+      deviceData: [],
+      resData: {},
+      taskData: [],
+      realqty: '',
+      planqty: ''
+    }
+  },
+  computed: {
+    classOption () {
+      // return {
+      //   step: 0.4,
+      //   limitMoveNum: 6
+      // }
+      return {
+        step: 0.2, // 数值越大速度滚动越快
+        limitMoveNum: 3, // 开始无缝滚动的数据量 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.getEchart2()
+    this.initData()
+    this.refresh()
+  },
+  beforeDestroy () {
+    clearInterval(this.timer)
+  },
+  methods: {
+    refresh () {
+      this.timer = setInterval(() => {
+        this.initData()
+      }, this.interTime)
+    },
+    async initData () {
+      let res = await productionStatistics()
+      this.resData = res.result
+      this.showNum1 = (res.result.finishedRes[0].real_qty + '').split('')
+      this.showNum2 = (res.result.finishedRes[1].real_qty + '').split('')
+      this.showNum3 = (res.result.finishedRes[2].real_qty + '').split('')
+      this.taskData = [...res.result.productionTask]
+      this.setEchart05()
+      // this.getEchart2()
+      this.realqty = res.result.materialTask[0].real_qty
+      this.planqty = res.result.materialTask[0].plan_qty
+      this.setEchart01()
+      // 五种状态：未成产、已下发、生产中、停止、完成
+    },
+    // getEchart2 () {
+    //   // 基于准备好的dom，初始化echarts实例
+    //   var lineData = [4, 9, 8, 6, 8, 7, 3, 8]
+    //   var barData = [50002, 34120, 48370, 57370, 67582, 90892, 32321, 57370]
+    //   var xData = ['1号机', '2号机', '3号机', '4号机', '5号机', '6号机', '7号机', '8号机']
+    //   // var lineData = []
+    //   // var barData = []
+    //   // var xData = []
+    //   // this.deviceData.map(el => {
+    //   //   console.log(el.produce_qty)
+    //   //   lineData.push(el.produce_qty)
+    //   //   barData.push(el.produce_num)
+    //   //   xData.push(el.device_name)
+    //   // })
+    //   var myChart = echarts.init(document.getElementById('echarts2'))
+    //   var option = {
+    //     legend: {
+    //       top: 20,
+    //       right: 10,
+    //       textStyle: {
+    //         color: '#ffffff',
+    //         fontSize: 12,
+    //         lineHeight: 20
+    //       },
+    //       itemGap: 20,
+    //       itemHeight: 8,
+    //       data: ['数量', '重量']
+    //     },
+    //     // tooltip: {
+    //     //   trigger: 'axis'
+    //     // },
+    //     xAxis: {
+    //       // name: '设备',
+    //       type: 'category',
+    //       data: xData,
+    //       nameGap: 60, // 坐标轴名称与轴线之间的距离。
+    //       axisLine: {
+    //         show: true,
+    //         lineStyle: {
+    //           color: '#fff'
+    //         }
+    //       },
+    //       axisLabel: {
+    //         color: '#fff'
+    //       }
+    //     },
+    //     yAxis: [
+    //       {
+    //         // name: '交易额（亿元）',
+    //         type: 'value',
+    //         min: 0,
+    //         // max: 100000,
+    //         max: Math.max.apply(null, barData),
+    //         splitNumber: 10,
+    //         splitLine: {
+    //           show: true,
+    //           lineStyle: {
+    //             color: ['#315070'],
+    //             width: 1,
+    //             type: 'dotted'
+    //           }
+    //         },
+    //         axisLine: {
+    //           show: false,
+    //           lineStyle: {
+    //             color: '#fff'
+    //           }
+    //         }
+    //       },
+    //       {
+    //         // name: '增长率',
+    //         type: 'value',
+    //         min: 0,
+    //         // max: 10,
+    //         max: Math.max.apply(null, lineData),
+    //         splitNumber: 10,
+    //         // position: 'right',
+    //         // formatter: '{value}',
+    //         axisLine: {
+    //           show: false,
+    //           lineStyle: {
+    //             color: '#fff'
+    //           }
+    //         },
+    //         itemStyle: {
+    //           color: '#F7B502'
+    //         }
+    //       }
+    //     ],
+    //     series: [
+    //       {
+    //         name: '数量',
+    //         type: 'bar',
+    //         data: barData,
+    //         barWidth: 10,
+    //         itemStyle: {
+    //           color: '#32C5FF'
+    //         }
+    //       },
+    //       {
+    //         name: '重量',
+    //         type: 'line',
+    //         symbolSize: 12, // 拐点圆的大小
+    //         symbol: 'circle',
+    //         data: lineData,
+    //         lineStyle: {
+    //           color: '#F7B502'
+    //         },
+    //         itemStyle: {
+    //           normal: {
+    //             color: '#F7B502'
+    //           }
+    //         },
+    //         yAxisIndex: 1
+    //       }
+    //     ]
+    //   }
+    //   // 使用刚指定的配置项和数据显示图表。
+    //   myChart.setOption(option)
+    //   window.addEventListener('resize', function () {
+    //     myChart.resize()
+    //   })
+    // },
+    setEchart01 () {
+      let data = [
+        {
+          value: 10,
+          name: '1号砖'
+        },
+        {
+          value: 20,
+          name: '2号砖'
+        },
+        {
+          value: 30,
+          name: '3号砖'
+        },
+        {
+          value: 40,
+          name: '4号砖'
+        },
+        {
+          value: 50,
+          name: '5号砖'
+        },
+        {
+          value: 60,
+          name: '6号砖'
+        }
+      ]
+      var option = {
+        legend: {
+          orient: 'horizontal',
+          bottom: '1%',
+          textStyle: {
+            color: '#fff',
+            fontWeight: 'bold',
+            fontSize: 14
+          },
+          itemGap: 30.86,
+          itemWidth: 14.16,
+          itemHeight: 7.38,
+          data: ['1号砖', '2号砖', '3号砖', '4号砖', '5号砖', '6号砖']
+        },
+        color: ['#0966E8', '#07E083', '#e7E255', '#cda02e', '#01E38a', '#57c01d'],
+        series: [
+          {
+            type: 'pie',
+            radius: ['43%', '70%'],
+            label: {
+              normal: {
+                // position: 'inner',
+                formatter: '{d}%',
+                textStyle: {
+                  color: '#fff',
+                  fontWeight: 'bold',
+                  fontSize: 14
+                }
+              }
+            },
+            labelLine: {
+              show: true
+            },
+            data: data
+          }
+        ]
+      }
+      let echart = document.getElementById('echart_d01')
+      this.myCharts01 = this.$echarts.init(echart)
+      this.myCharts01.setOption(option)
+      window.addEventListener('resize', () => {
+        this.myCharts01.resize()
+      })
+    },
+    setEchart05 () {
+      var data05d0 = []
+      var data05d1 = []
+      var data05d2 = []
+      this.resData.planRes.map(el => {
+        data05d0.push(el.workorder_procedure)
+        data05d1.push(el.plan_qty)
+        data05d2.push(el.real_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: '#EAAD24'}}]
+        },
+        xAxis: {
+          type: 'category',
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              width: 2,
+              color: '#8FABBF'
+            }
+          },
+          axisLabel: {
+            interval: 0,
+            textStyle: {
+              color: '#8FABBF',
+              fontSize: 14
+            }
+          },
+          data: data05d0
+          // data: ['压制', '干燥', '包装']
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            show: false
+          },
+          splitNumber: 2,
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            textStyle: {
+              color: '#8FABBF',
+              fontSize: 14
+            }
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: [8, 4],
+              dashOffset: 4,
+              color: '#8FABBF',
+              opacity: 0.2
+            }
+          }
+        },
+        series: [
+          {
+            name: '计划生产数量',
+            type: 'bar',
+            barWidth: '28',
+            barGap: '100%', // 柱图间距
+            itemStyle: {
+              normal: {
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 1,
+                    color: 'rgba(96,112,128,0.10)',
+                    opacity: 1
+                  },
+                  {
+                    offset: 0,
+                    color: '#0E90FD',
+                    opacity: 0.1
+                  }
+                ])
+              }
+            },
+            data: data05d1
+            // data: ['390', '390', '390']
+          },
+          {
+            name: '已完成数量',
+            type: 'bar',
+            barWidth: '28',
+            barGap: '100%', // 柱图间距
+            itemStyle: {
+              normal: {
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#B68845',
+                    opacity: 1
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(134,98,45,0.25)',
+                    opacity: 0.25
+                  }
+                ])
+              }
+            },
+            data: data05d2
+            // data: ['210', '210', '210']
+          }
+        ]
+      }
+      let echart = document.getElementById('echart_d05')
+      if (this.myCharts05 !== '') {
+        this.myCharts05.dispose()
+      }
+      if (echart !== null) {
+        this.myCharts05 = this.$echarts.init(echart)
+        this.myCharts05.setOption(option)
+        window.addEventListener('resize', () => {
+          this.myCharts05.resize()
+        })
+      }
+    },
+    getEchart1 () {
+      // 基于准备好的dom，初始化echarts实例
+      var myChart = echarts.init(document.getElementById('echart_d1'))
+      var finishArr = []
+      var unFinishArr = []
+      var materArr = []
+      this.materData.map(el => {
+        finishArr.push(el.finished_qty)
+        unFinishArr.push(el.unfinished_qty)
+        materArr.push(el.material_code)
+      })
+      // 指定图表的配置项和数据
+      var option = {
+        legend: {
+          top: 20,
+          right: 10,
+          textStyle: {
+            color: '#ffffff',
+            fontSize: 12,
+            lineHeight: 20
+          },
+          itemGap: 20,
+          itemHeight: 8,
+          data: ['完成', '未完成']
+        },
+        title: {
+          text: '半成品计划完成率', // 标题
+          top: '12px',
+          left: '20px',
+          textStyle: {
+            color: '#fff',
+            fontSize: '16'
+          }
+        },
+        // tooltip: {
+        //   trigger: 'axis'
+        // },
+        xAxis: {
+          // data: ['1号砖', '2号砖', '3号砖', '4号砖'],
+          data: materArr,
+          axisLine: {
+            lineStyle: {
+              color: '#fff'
+            }
+          },
+          splitLine: {
+            show: false
+          }
+        },
+        // xAxis: {
+        //   type: 'category',
+        //   axisLine: {
+        //     lineStyle: {
+        //       color: '#fff'
+        //     }
+        //   }
+        // },
+        yAxis: {
+          axisLine: {
+            lineStyle: {
+              color: '#fff'
+            }
+          },
+          splitLine: {
+            show: false
+          }
+        },
+        series: [{
+          name: '未完成',
+          type: 'bar',
+          barWidth: 14,
+          stack: '完成情况',
+          // data: [15, 20, 36, 10],
+          data: unFinishArr,
+          itemStyle: {
+            normal: {
+              color: '#32C5FF'
+              // label: {
+              //   show: true,
+              //   position: 'inside',
+              //   formatter: function (params) {
+              //     if (params.value !== 0) {
+              //       return params.value
+              //     } else {
+              //       return ''
+              //     }
+              //   }
+              // }
+            }
+          }
+        }, {
+          name: '完成',
+          type: 'bar',
+          barWidth: 14,
+          stack: '完成情况',
+          // data: [40, 57, 18, 20],
+          data: finishArr,
+          itemStyle: {
+            normal: {
+              color: '#F7B502'
+              // label: {
+              //   show: true,
+              //   position: 'inside',
+              //   formatter: function (params) {
+              //     if (params.value !== 0) {
+              //       return params.value
+              //     } else {
+              //       return ''
+              //     }
+              //   }
+              // }
+            }
+          }
+        }]
+      }
+      // 使用刚指定的配置项和数据显示图表。
+      myChart.setOption(option)
+      window.addEventListener('resize', function () {
+        myChart.resize()
+      })
+    },
+    getEchart2 () {
+      // 基于准备好的dom，初始化echarts实例
+      // var lineData = [4, 9, 8, 6, 8, 7, 3, 8]
+      // var barData = [50002, 34120, 48370, 57370, 67582, 90892, 32321, 57370]
+      // var xData = ['1号机', '2号机', '3号机', '4号机', '5号机', '6号机', '7号机', '8号机']
+      var lineData = []
+      var barData = []
+      var xData = []
+      this.deviceData.map(el => {
+        console.log(el.produce_qty)
+        lineData.push(el.produce_qty)
+        barData.push(el.produce_num)
+        xData.push(el.device_name)
+      })
+      var myChart = echarts.init(document.getElementById('echarts2'))
+      var option = {
+        legend: {
+          top: 20,
+          right: 10,
+          textStyle: {
+            color: '#ffffff',
+            fontSize: 12,
+            lineHeight: 20
+          },
+          itemGap: 20,
+          itemHeight: 8,
+          data: ['数量', '重量']
+        },
+        // tooltip: {
+        //   trigger: 'axis'
+        // },
+        xAxis: {
+          // name: '设备',
+          type: 'category',
+          data: xData,
+          nameGap: 60, // 坐标轴名称与轴线之间的距离。
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#fff'
+            }
+          },
+          axisLabel: {
+            color: '#fff'
+          }
+        },
+        yAxis: [
+          {
+            // name: '交易额（亿元）',
+            type: 'value',
+            min: 0,
+            // max: 100000,
+            max: Math.max.apply(null, barData),
+            splitNumber: 10,
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: ['#315070'],
+                width: 1,
+                type: 'dotted'
+              }
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#fff'
+              }
+            }
+          },
+          {
+            // name: '增长率',
+            type: 'value',
+            min: 0,
+            // max: 10,
+            max: Math.max.apply(null, lineData),
+            splitNumber: 10,
+            // position: 'right',
+            // formatter: '{value}',
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#fff'
+              }
+            },
+            itemStyle: {
+              color: '#F7B502'
+            }
+          }
+        ],
+        series: [
+          {
+            name: '数量',
+            type: 'bar',
+            data: barData,
+            barWidth: 10,
+            itemStyle: {
+              color: '#32C5FF'
+            }
+          },
+          {
+            name: '重量',
+            type: 'line',
+            symbolSize: 12, // 拐点圆的大小
+            symbol: 'circle',
+            data: lineData,
+            lineStyle: {
+              color: '#F7B502'
+            },
+            itemStyle: {
+              normal: {
+                color: '#F7B502'
+              }
+            },
+            yAxisIndex: 1
+          }
+        ]
+      }
+      // 使用刚指定的配置项和数据显示图表。
+      myChart.setOption(option)
+      window.addEventListener('resize', function () {
+        myChart.resize()
+      })
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import '~@css/mixin'
+.content
+  _wh(calc(100% - 108px), calc(100% - 108px))
+  margin 12px auto
+.blue
+  color #32C5FF !important
+.green
+  color #30EBC9 !important
+.gray
+  color #516282 !important
+.yellow
+  color #E2BB0E !important
+.orange
+  color #F96700 !important
+.red
+  color #FF0000 !important
+.con1
+  width 100%
+  height 123px
+  overflow hidden
+  position relative
+  background center center / 100% 100% url(../assets/images/sctj_top.png) no-repeat
+  margin-bottom 15px
+  text-align center
+  display flex
+  justify-content space-between
+  align-items center
+  // .c-title
+  //   float left
+  //   // line-height 1.23rem
+  //   line-height 123px
+  // .c-left
+  //   margin 0 1.3rem 0 1.3rem
+  //   display flex
+  //   align-items center
+  // .c-right
+  //   // margin 0 2.9rem 0 2.5rem
+  //   display flex
+  //   align-items center
+  .cbox
+    width 30%
+    display flex
+    align-items center
+    justify-content center
+    div
+      font-size .24rem
+      color #32C5FF
+    .icon1
+      display inline-block
+      width .19rem
+      height .19rem
+      overflow hidden
+      position relative
+      background center center / 100% 100% url(../assets/images/sctj_icon.png) no-repeat
+      margin-right .2rem
+    .num
+      display flex
+      align-items center
+      .bg
+        width .44rem
+        height .6rem
+        background rgba(50,197,255,0.10)
+        display flex
+        align-items center
+        justify-content center
+        margin-right .1rem
+        font-size .5rem
+        color #F7B502
+      .dot
+        background none
+        width .14rem
+.center_wrapper
+  _wh(100%, calc(50% - 69px))
+  _fj(row)
+.con2
+  width 40%
+  height 100%
+  overflow hidden
+  position relative
+  .title
+    _wh(calc(100% - 34px), 32px)
+    margin 17px 0
+    padding-left 0.48rem
+    _font(16px, 32px, #fff,,left)
+    background center center / 100% 100% url(../assets/images/screen1/title_bg_d1.png) no-repeat
+  .desc
+    _wh(100%, 32px)
+    _fj(row, center)
+    div
+      _font(16px, 32px, #fff,,)
+      span
+        font-size 16px
+        color #F7B502
+        margin 0 30px
+  .item_content_0
+    _wh(calc(100% - 44px), calc(100% - 112px))
+    margin 17px auto
+.con3
+  width calc(60% - 15px)
+  height 100%
+  overflow hidden
+  position relative
+  .title
+    _wh(calc(100% - 34px), 32px)
+    margin 17px
+    padding-left 0.48rem
+    _font(16px, 32px, #fff,,left)
+    background center center / 100% 100% url(../assets/images/screen1/title_bg_d2.png) no-repeat
+  .item_content_1
+    _wh(calc(100% - 44px), calc(100% - 90px))
+    margin 17px auto
+.con4
+  _wh(100%, calc(50% - 85px))
+  margin-top 16px
+  overflow hidden
+  position relative
+  .block_h2
+    _wh(calc(100% - 34px), 32px)
+    margin 17px 0 10px 0
+    padding-left 0.55rem
+    background center center / 100% 100% url(../assets/images/screen1/title_bg_d2.png) no-repeat
+    h2
+      _font(16px, 32px, #fff,,left)
+  .list_scroll_title
+    _wh(calc(100% - 50px), 32px)
+    margin 0 auto
+    background #262F52
+    line-height 32px
+    span
+      display inline-block
+      width 8%
+      text-align center
+      line-height 32px
+      // float left
+      font-size 14px
+      &:nth-child(1)
+        width 8%
+      &:nth-child(2)
+        width 12%
+  .content-block-scroll
+    _wh(calc(100% - 50px), calc(100% - 113px))
+    margin 0 auto 25px auto
+    overflow hidden
+  .content-block-scroll-ul
+    width 100%
+    li
+      width 100%
+      height 38px
+      _fj(row, center)
+      &:nth-child(2n)
+        background rgba(38,47,82,0.50)
+      span
+        display inline-block
+        width 8%
+        font-size 12px
+        // padding 0 .1rem
+        text-align center
+        line-height 38px
+        box-sizing border-box
+        // float left
+        &:nth-child(1)
+          width 8%
+        &:nth-child(2)
+          width 12%
+</style>
diff --git a/src/pages/ProdCount.vue b/src/pages/shunhe/ProdCount.vue
similarity index 79%
rename from src/pages/ProdCount.vue
rename to src/pages/shunhe/ProdCount.vue
index 3ead425..1853cb5 100644
--- a/src/pages/ProdCount.vue
+++ b/src/pages/shunhe/ProdCount.vue
@@ -1,79 +1,82 @@
 <template>
-  <section>
-    <t-header index='1'></t-header>
-    <section class="content">
-      <div class="con1">
-        <!-- <div class="c-title c-left"> -->
-        <div class="cbox">
-          <!-- <span class="icon1"></span> -->
-          <div>今日压制量：</div>
-          <div class="num">
-            <div class="bg" v-for="item in showNum1" :key="item" :class="{dot: item === '.'}">{{item}}</div>
+    <section class="bg">
+      <t-header title="顺和大屏监控">
+        <p class="p1" @click="toJump">1</p>
+      </t-header>
+      <div class="container">
+        <div class="con1">
+          <!-- <div class="c-title c-left"> -->
+          <div class="cbox">
+            <!-- <span class="icon1"></span> -->
+            <div>今日压制量：</div>
+            <div class="num">
+              <div class="bg" v-for="item in showNum1" :key="item" :class="{dot: item === '.'}">{{item}}</div>
+            </div>
+            <div>吨</div>
+          </div>
+          <!-- <div class="c-title c-right"> -->
+          <div class="cbox">
+            <div>今日干燥量：</div>
+            <div class="num">
+              <div class="bg" v-for="item in showNum2" :key="item" :class="{dot: item === '.'}">{{item}}</div>
+            </div>
+            <div>吨</div>
+          </div>
+          <!-- <div class="c-title c-right" style="marginLeft: 1rem;"> -->
+          <div class="cbox">
+            <div>今日成品量：</div>
+            <div class="num">
+              <div class="bg" v-for="item in showNum3" :key="item" :class="{dot: item === '.'}">{{item}}</div>
+            </div>
+            <div>吨</div>
           </div>
-          <div>吨</div>
         </div>
-        <!-- <div class="c-title c-right"> -->
-        <div class="cbox">
-          <div>今日干燥量：</div>
-          <div class="num">
-            <div class="bg" v-for="item in showNum2" :key="item" :class="{dot: item === '.'}">{{item}}</div>
+        <div class="center_wrapper" style="display:flex">
+          <div class="con2">
+            <div class="title">混碾生产</div>
+            <div class="item_content_0">
+              <div id="echart_d01" style="width: 100%; height: 100%"></div>
+            </div>
           </div>
-          <div>吨</div>
+          <div class="con3" style="position: relative">
+            <div class="title">成品计划完成情况</div>
+            <div class="item_content_1">
+              <div id="echart_d05" style="width: 100%; height: 100%"></div>
+            </div>
+          </div>
+          <!-- <div class="con3" style="position: relative">
+            <div class="title">在制品设备生产量</div>
+            <div id="echarts2" style="width: 100%; height: 100%;"></div>
+            <div class="desc1">
+              <span>当日产量：</span>
+              <span class="num">{{showNum3}}</span>
+              <span class="span3">块</span>
+              <span>当班产量：</span>
+              <span class="num">{{showNum4}}</span>
+              <span>吨</span>
+            </div>
+          </div> -->
         </div>
-        <!-- <div class="c-title c-right" style="marginLeft: 1rem;"> -->
-        <div class="cbox">
-          <div>今日成品量：</div>
-          <div class="num">
-            <div class="bg" v-for="item in showNum3" :key="item" :class="{dot: item === '.'}">{{item}}</div>
+        <div class="con4">
+          <div class="block_h2">
+            <h2>生产任务</h2>
           </div>
-          <div>吨</div>
+          <div class="list_scroll_title">
+            <span>订单</span><span>工序</span><span>设备</span><span>物料号</span><span>生产物料</span><span>厂家</span><span>计划量</span><span>生产量</span><span>生产状态</span><span>计划开始时间</span><span>开始时间</span><span>结束时间</span>
+          </div>
+          <vue-seamless-scroll :data="taskData" :class-option="classOption" class="content-block-scroll">
+            <ul class="content-block-scroll-ul">
+              <li v-for="(e, i) in taskData" :key="i">
+                <span>{{e.device_name}}</span><span>{{e.material_code}}</span><span>{{e.plan_qty}}</span><span>{{e.real_qty}}</span><span>{{e.qualified_qty}}</span><span>{{e.unqualified_qty}}</span><span>{{e.order_status_name}}</span><span>{{e.realproducestart_date}}</span><span>{{e.realproduceend_date}}</span>
+                <!-- <span :class="{blue:e.order_status ==='1',yellow:e.order_status ==='2',green:e.order_status ==='3',red:e.order_status ==='4',orange:e.order_status ==='5'}">{{e.device_name}}</span><span :class="{blue:e.order_status ==='1',yellow:e.order_status ==='2',green:e.order_status ==='3',red:e.order_status ==='4',orange:e.order_status ==='5'}">{{e.material_code}}</span><span :class="{blue:e.order_status ==='1',yellow:e.order_status ==='2',green:e.order_status ==='3',red:e.order_status ==='4',orange:e.order_status ==='5'}">{{e.plan_qty}}</span><span :class="{blue:e.order_status ==='1',yellow:e.order_status ==='2',green:e.order_status ==='3',red:e.order_status ==='4',orange:e.order_status ==='5'}">{{e.real_qty}}</span><span :class="{blue:e.order_status ==='1',yellow:e.order_status ==='2',green:e.order_status ==='3',red:e.order_status ==='4',orange:e.order_status ==='5'}">{{e.qualified_qty}}</span><span :class="{blue:e.order_status ==='1',yellow:e.order_status ==='2',green:e.order_status ==='3',red:e.order_status ==='4',orange:e.order_status ==='5'}">{{e.unqualified_qty}}</span><span :class="{blue:e.order_status ==='1',yellow:e.order_status ==='2',green:e.order_status ==='3',red:e.order_status ==='4',orange:e.order_status ==='5'}">{{e.order_status_name}}</span><span :class="{blue:e.order_status ==='1',yellow:e.order_status ==='2',green:e.order_status ==='3',red:e.order_status ==='4',orange:e.order_status ==='5'}">{{e.realproducestart_date}}</span><span :class="{blue:e.order_status ==='1',yellow:e.order_status ==='2',green:e.order_status ==='3',red:e.order_status ==='4',orange:e.order_status ==='5'}">{{e.realproduceend_date}}</span> -->
+              </li>
+            </ul>
+          </vue-seamless-scroll>
         </div>
       </div>
-      <div class="center_wrapper" style="display:flex">
-        <div class="con2">
-          <div class="title">混碾生产</div>
-          <div class="item_content_0">
-            <div id="echart_d01" style="width: 100%; height: 100%"></div>
-          </div>
-        </div>
-        <div class="con3" style="position: relative">
-          <div class="title">成品计划完成情况</div>
-          <div class="item_content_1">
-            <div id="echart_d05" style="width: 100%; height: 100%"></div>
-          </div>
-        </div>
-        <!-- <div class="con3" style="position: relative">
-          <div class="title">在制品设备生产量</div>
-          <div id="echarts2" style="width: 100%; height: 100%;"></div>
-          <div class="desc1">
-            <span>当日产量：</span>
-            <span class="num">{{showNum3}}</span>
-            <span class="span3">块</span>
-            <span>当班产量：</span>
-            <span class="num">{{showNum4}}</span>
-            <span>吨</span>
-          </div>
-        </div> -->
-      </div>
-      <div class="con4">
-        <div class="block_h2">
-          <h2>生产任务</h2>
-        </div>
-        <div class="list_scroll_title">
-          <span>订单</span><span>工序</span><span>设备</span><span>物料号</span><span>生产物料</span><span>厂家</span><span>计划量</span><span>生产量</span><span>生产状态</span><span>计划开始时间</span><span>开始时间</span><span>结束时间</span>
-        </div>
-        <vue-seamless-scroll :data="taskData" :class-option="classOption" class="content-block-scroll">
-          <ul class="content-block-scroll-ul">
-            <li v-for="(e, i) in taskData" :key="i">
-              <span>{{e.device_name}}</span><span>{{e.material_code}}</span><span>{{e.plan_qty}}</span><span>{{e.real_qty}}</span><span>{{e.qualified_qty}}</span><span>{{e.unqualified_qty}}</span><span>{{e.order_status_name}}</span><span>{{e.realproducestart_date}}</span><span>{{e.realproduceend_date}}</span>
-              <!-- <span :class="{blue:e.order_status ==='1',yellow:e.order_status ==='2',green:e.order_status ==='3',red:e.order_status ==='4',orange:e.order_status ==='5'}">{{e.device_name}}</span><span :class="{blue:e.order_status ==='1',yellow:e.order_status ==='2',green:e.order_status ==='3',red:e.order_status ==='4',orange:e.order_status ==='5'}">{{e.material_code}}</span><span :class="{blue:e.order_status ==='1',yellow:e.order_status ==='2',green:e.order_status ==='3',red:e.order_status ==='4',orange:e.order_status ==='5'}">{{e.plan_qty}}</span><span :class="{blue:e.order_status ==='1',yellow:e.order_status ==='2',green:e.order_status ==='3',red:e.order_status ==='4',orange:e.order_status ==='5'}">{{e.real_qty}}</span><span :class="{blue:e.order_status ==='1',yellow:e.order_status ==='2',green:e.order_status ==='3',red:e.order_status ==='4',orange:e.order_status ==='5'}">{{e.qualified_qty}}</span><span :class="{blue:e.order_status ==='1',yellow:e.order_status ==='2',green:e.order_status ==='3',red:e.order_status ==='4',orange:e.order_status ==='5'}">{{e.unqualified_qty}}</span><span :class="{blue:e.order_status ==='1',yellow:e.order_status ==='2',green:e.order_status ==='3',red:e.order_status ==='4',orange:e.order_status ==='5'}">{{e.order_status_name}}</span><span :class="{blue:e.order_status ==='1',yellow:e.order_status ==='2',green:e.order_status ==='3',red:e.order_status ==='4',orange:e.order_status ==='5'}">{{e.realproducestart_date}}</span><span :class="{blue:e.order_status ==='1',yellow:e.order_status ==='2',green:e.order_status ==='3',red:e.order_status ==='4',orange:e.order_status ==='5'}">{{e.realproduceend_date}}</span> -->
-            </li>
-          </ul>
-        </vue-seamless-scroll>
-      </div>
+      <section class="bottom"></section>
     </section>
-  </section>
-</template>
+    </template>
 
 <script>
 import THeader from '@components/header.vue'
@@ -730,9 +733,17 @@ export default {
 
 <style lang="stylus" scoped>
 @import '~@css/mixin'
-.content
-  _wh(calc(100% - 108px), calc(100% - 108px))
-  margin 12px auto
+.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
 .blue
   color #32C5FF !important
 .green
@@ -750,8 +761,8 @@ export default {
   height 123px
   overflow hidden
   position relative
-  background center center / 100% 100% url(../assets/images/sctj_top.png) no-repeat
-  margin-bottom 15px
+  background center center / 100% 100% url(../../assets/images/sctj_top.png) no-repeat
+  margin 15px 0
   text-align center
   display flex
   justify-content space-between
@@ -782,7 +793,7 @@ export default {
       height .19rem
       overflow hidden
       position relative
-      background center center / 100% 100% url(../assets/images/sctj_icon.png) no-repeat
+      background center center / 100% 100% url(../../assets/images/sctj_icon.png) no-repeat
       margin-right .2rem
     .num
       display flex
@@ -810,10 +821,10 @@ export default {
   position relative
   .title
     _wh(calc(100% - 34px), 32px)
-    margin 17px
+    margin 17px 0
     padding-left 0.48rem
     _font(16px, 32px, #fff,,left)
-    background center center / 100% 100% url(../assets/images/screen1/title_bg_d1.png) no-repeat
+    background center center / 100% 100% url(../../assets/images/screen1/title_bg_d1.png) no-repeat
   .desc
     _wh(100%, 32px)
     _fj(row, center)
@@ -836,7 +847,7 @@ export default {
     margin 17px
     padding-left 0.48rem
     _font(16px, 32px, #fff,,left)
-    background center center / 100% 100% url(../assets/images/screen1/title_bg_d2.png) no-repeat
+    background center center / 100% 100% url(../../assets/images/screen1/title_bg_d2.png) no-repeat
   .item_content_1
     _wh(calc(100% - 44px), calc(100% - 90px))
     margin 17px auto
@@ -849,7 +860,7 @@ export default {
     _wh(calc(100% - 34px), 32px)
     margin 17px 0 10px 0
     padding-left 0.55rem
-    background center center / 100% 100% url(../assets/images/screen1/title_bg_d2.png) no-repeat
+    background center center / 100% 100% url(../../assets/images/screen1/title_bg_d2.png) no-repeat
     h2
       _font(16px, 32px, #fff,,left)
   .list_scroll_title
diff --git a/src/router/index.js b/src/router/index.js
index f7607f4..0a55595 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,7 +7,7 @@ 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 ProdCount = r => require.ensure([], () => r(require('@page/ProdCount')), 'ProdCount')
+const ProdCount = r => require.ensure([], () => r(require('@page/shunhe/ProdCount')), 'ProdCount')
 const LogisticsProcess = r => require.ensure([], () => r(require('@page/shunhe/LogisticsProcess')), 'LogisticsProcess')
 
 Vue.use(Router)