screen-shunhe/src/pages/shunhe/ProdCount.vue

<template>
    <section class="bg">
      <!-- <t-header title="顺和大屏监控-生产统计">
      </t-header> -->
      <t-header title="顺和大屏监控——物流工艺">
        <div class="pages">
          <router-link to="/LogisticsProcess">物流工艺</router-link>
          <router-link to="/StorageMonitor">仓储监控</router-link>
          <!-- <router-link to="/setup">设备监控</router-link> -->
        </div>
      </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 class="center_wrapper" style="display:flex">
          <div class="con2">
            <!-- <div class="title">混碾生产</div> -->
            <div class="title"><span class="dotIncon"></span><span class="tltxt">混碾生产</span></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="title"><span class="dotIncon"></span><span class="tltxt">在制品设备生产量</span></div>
            <div class="item_content_1">
              <div id="echarts2" style="width: 100%; height: 100%;"></div>
            </div>
            <div class="desc1">
              <span>当日产量：</span>
              <span class="num">{{showNum4}}</span>
              <span class="span3">块</span>
              <span>当班产量：</span>
              <span class="num">{{showNum5}}</span>
              <span>吨</span>
            </div>
          </div>
          <div class="con03">
            <!-- <div class="title">成品计划完成率</div> -->
            <div class="title"><span class="dotIncon"></span><span class="tltxt">成品计划完成率</span></div>
            <div class="item_content_1">
              <div id="echart_d1" style="width: 100%; height: 100%"></div>
            </div>
          </div>
        </div>
        <div class="con4">
          <div class="block_h2">
            <!-- <h2>生产任务</h2> -->
            <div class="title"><span class="dotIncon"></span><span class="tltxt">生产任务</span></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="workOrder" :class-option="classOption" class="content-block-scroll">
            <ul class="content-block-scroll-ul">
              <li v-for="(e, i) in workOrder" :key="i">
                <span>{{e.workOrderCode}}</span><span>{{e.workOrderCode}}</span><span>{{e.equipment}}</span><span>{{e.materialCode}}</span><span>{{e.materialCode}}</span><span>{{e.customer}}</span><span>{{e.planned}}</span><span>{{e.completed}}</span><span>{{e.status}}</span><span>{{e.planStartTime}}</span><span>{{e.startTime}}</span><span>{{e.endTime}}</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>
      <section class="bottom"></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: '',
      showNum4: '333',
      showNum5: '333',
      myCharts01: '',
      myCharts02: '',
      materData: [],
      deviceData: [],
      resData: {},
      workOrder: []
    }
  },
  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
      this.showNum1 = (res.total.pressWeight + '').split('')
      this.showNum2 = (res.total.dryWeight + '').split('')
      this.showNum3 = (res.total.sortWeight + '').split('')
      this.showNum4 = res.pressProduction.dailyProductionQty
      this.showNum5 = res.pressProduction.dailyProductionWeight
      this.workOrder = [...res.workOrder]
      this.setEchart01()
      this.getEchart1()
      this.getEchart2()
      // 五种状态：未成产、已下发、生产中、停止、完成
    },
    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号砖'
      //   }
      // ]
      let dataName = []
      this.resData.mixProduction.map(el => {
        dataName.push(el.name)
      })
      let data = this.resData.mixProduction
      var option = {
        legend: {
          // orient: 'vertical',
          orient: 'horizontal',
          top: '0%',
          textStyle: {
            color: '#fff',
            fontWeight: 'bold',
            fontSize: 14
          },
          itemGap: 30.86,
          itemWidth: 14.16,
          itemHeight: 7.38,
          data: dataName
          // data: ['1号砖', '2号砖', '3号砖', '4号砖', '5号砖', '6号砖']
        },
        color: ['#0966E8', '#39E083', '#ffee0e', '#f975aa', '#32c5ff', '#f7b502'],
        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()
      })
    },
    getEchart1 () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('echart_d1'))
      var finishArr = []
      var unFinishArr = []
      var materArr = []
      this.resData.finishedProductCompletionRate.map(el => {
        finishArr.push(el.completed)
        unFinishArr.push(el.uncompleted)
        materArr.push(el.name)
      })
      // 指定图表的配置项和数据
      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.resData.pressProduction.equipmentProduction.map(el => {
        lineData.push(el.weight)
        barData.push(el.qty)
        xData.push(el.name)
      })
      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: false,
              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}',
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#315070'],
                width: 1,
                type: 'dashed'
              }
            },
            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
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      // var myChart = echarts.init(document.getElementById('echarts2'))
      // myChart.setOption(option)
      // window.addEventListener('resize', function () {
      //   myChart.resize()
      // })
      let echart = document.getElementById('echarts2')
      this.myCharts02 = this.$echarts.init(echart)
      this.myCharts02.setOption(option)
      window.addEventListener('resize', () => {
        this.myCharts02.resize()
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@css/mixin'
.pages
  position absolute
  left .2509rem
  top 11%
  _wh(20%, .4rem)
  _fj(flex-start)
  a
    cursor pointer
    font-family "SourceHanSansCN"
    _font(.18rem, .30rem, #fff, 700,)
    letter-spacing .01rem
    padding .05rem .2rem
    border-radius .05rem
    background: radial-gradient(circle at 7.2% 13.6%, rgb(37, 249, 245) 0%, #004c92 90%)
    +a
      margin-left .2rem
.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
  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 15px 0
  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 30%
  height 100%
  overflow hidden
  position relative
  .title
    _wh(calc(100% - 34px), 32px)
    margin 17px 0
    padding-left 0.18rem
    _font(16px, 32px, #fff,,left)
    background center center / 100% 100% url(../../assets/images/screen1/bg_title_s.png) no-repeat
.tltxt
  position relative
  top -3px
.dotIncon
  display inline-block
  width 26px
  height 26px
  position relative
  top 3px
  left -6px
  background center center / 100% 100% url(../../assets/images/screen1/bg_title_tip.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
    position relative
    _wh(calc(100% - 44px), calc(100% - 112px))
    // margin 17px auto
.con3
  // width calc(40% - 15px)
  width 40%
  height 100%
  overflow hidden
  position relative
  .title
    position absolute
    _wh(calc(100% - 34px), 32px)
    margin 17px
    padding-left 0.18rem
    _font(16px, 32px, #fff,,left)
    background center center / 100% 100% url(../../assets/images/screen1/bg_title_l.png) no-repeat
  .item_content_1
    _wh(calc(100% - 44px), 100%)
    margin 45px auto
  .desc1
    position absolute
    top .56rem
    left 1.3rem
    span
      color #32C5FF
      font-size .16rem
    .span3
      margin-right .5rem
    .num
      font-size .22rem
      color #F7B502
.con03
  // width calc(30% - 15px)
  width 30%
  height 100%
  overflow hidden
  position relative
  .title
    position absolute
    _wh(calc(100% - 34px), 32px)
    margin 17px 0
    right 0
    padding-left 0.18rem
    _font(16px, 32px, #fff,,left)
    background center center / 100% 100% url(../../assets/images/screen1/bg_title_s.png) no-repeat
  .item_content_1
    _wh(calc(100% - 44px), 100%)
    margin 45px auto
    float right
.con4
  _wh(100%, calc(50% - 85px))
  margin-top 16px
  overflow hidden
  position relative
  .block_h2
    _wh(calc(100% - 0px), 32px)
    margin 17px 0 10px 0
    padding-left 0.18rem
    background center center / 100% 100% url(../../assets/images/screen1/bg_title_j.png) no-repeat
    h2
      _font(16px, 32px, #fff,,left)
  .list_scroll_title
    _wh(calc(100% - 0px), 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% - 0px), 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>