screen-lnsh/src/pages/ProdCount.vue

<template>
  <section>
    <t-header index='1'></t-header>
    <section>
      <div class="con1">
        <div class="c-title c-left">
          <span class="icon1"></span>
          <span>今日在制品量：</span>
          <div class="num">
            <div class="bg" v-for="item in showNum1" :key="item" :class="{dot: item === '.'}">{{item}}</div>
          </div>
          <span>吨</span>
        </div>
        <div class="c-title c-right">
          <span>今日成品量：</span>
          <div class="num">
            <div class="bg" v-for="item in showNum2" :key="item" :class="{dot: item === '.'}">{{item}}</div>
          </div>
          <span>吨</span>
        </div>
      </div>
      <div style="display:flex">
        <div class="con2">
        <div id="echart_d1" style="width: 100%; height:100%;"></div>
      </div>
      <div class="con3" style="position: relative">
        <div id="echarts2" style="width: 100%; height: 100%;"></div>
        <div class="title">在制品设备生产量</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>
          <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.workprocedure_name}}</span><span>{{e.device_name}}</span><span>{{e.material_code}}</span><span>{{e.material_name}}</span><span>{{e.factory_name}}</span><span>{{e.formula_code}}</span><span>{{e.plan_qty}}</span><span>{{e.produce_qty}}</span><span>{{e.shift_type_scode_name}}</span><span>{{e.status_name}}</span>
            </li>
          </ul>
        </vue-seamless-scroll>
      </div>
    </section>
  </section>
</template>

<script>
import THeader from '@components/header.vue'
import * as echarts from 'echarts'
export default {
  name: 'ProdCount',
  components: {
    THeader
  },
  data () {
    return {
      interTime: this.$store.getters.setTime,
      timer: null,
      showNum1: '',
      showNum2: '',
      showNum3: '',
      showNum4: '',
      materData: [],
      deviceData: [],
      taskData: []
    }
  },
  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.initData()
    this.refresh()
  },
  beforeDestroy () {
    clearInterval(this.timer)
  },
  methods: {
    refresh () {
      this.timer = setInterval(() => {
        this.initData()
      }, this.interTime)
    },
    initData () {
      let data = {
        '_SRVNAME': 'server.jxht.screen',
        '_SRVMETHOD': 'queryProduceInfo',
        '_DATA': JSON.stringify({
          accountId: '-1'
        })
      }
      this
        .$post(data)
        .then(res => {
          if (res.code === '1') {
            this.showNum1 = (res.result.form.produce_total_qty + '').split('')
            this.showNum2 = (res.result.form.finished_total_qty + '').split('')
            this.showNum3 = res.result.form.day_qty
            this.showNum4 = res.result.form.shift_qty
            this.materData = res.result.material_rows
            this.deviceData = res.result.device_rows
            this.taskData = res.result.task_rows
            this.getEchart1()
            this.getEchart2()
          } else {
            this.toast(res.desc)
          }
        })
    },
    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>
.con1
  width 18.14rem
  // height 1.23rem
  height 123px
  overflow hidden
  position relative
  background center center / 100% 100% url(../assets/images/sctj_top.png) no-repeat
  margin 0 auto
  // margin-top 0.32rem
  // margin-bottom 0.15rem
  margin-top 32px
  margin-bottom 15px
  text-align center
  .c-title
    float left
    // line-height 1.23rem
    line-height 123px
  .c-left
    margin 0 2.92rem 0 2.51rem
    display flex
    align-items center
  .c-right
    // margin 0 2.9rem 0 2.5rem
    display flex
    align-items center
  span
    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
.con2
  float left
  margin-left .49rem
  // width 4.45rem
  width 40%
  // height 4.05rem
  height 405px
  overflow hidden
  position relative
  background center center / 100% 100% url(../assets/images/sctj_bg1.png) no-repeat
  margin-right .15rem
.con3
  float left
  // width 13.57rem
  width 54%
  // height 4.05rem
  height 405px
  overflow hidden
  position relative
  background center center / 100% 100% url(../assets/images/sctj_bg2.png) no-repeat
  .title
    position absolute
    top .15rem
    left .15rem
  .desc1
    position absolute
    top .24rem
    left 4.28rem
    span
      color #32C5FF
      font-size .16rem
    .span3
      margin-right .5rem
    .num
      font-size .22rem
      color #F7B502
.con4
  float left
  margin-left .49rem
  // margin-top .16rem
  margin-top 16px
  width 18.17rem
  // height 3.35rem
  height 335px
  overflow hidden
  position relative
  background center center / 100% 100% url(../assets/images/sctj_bg3.png) no-repeat
  padding 0 .27rem 0 .27rem
  .block_h2
    h2
      font-size .16rem
      line-height .22rem
      margin .15rem 0 .15rem 0
  .list_scroll_title
    width 100%
    background #262F52
    span
      display inline-block
      width 10%
      text-align center
      line-height .32rem
      // float left
      font-size 14px
      &:nth-child(1)
        width 6%
      &:nth-child(4)
        width 14%
  .content-block-scroll
    width 100%
    height calc(100% - 0.6rem)
    overflow hidden
  .content-block-scroll-ul
    li
      width 100%
      &:nth-child(2n)
        background rgba(38,47,82,0.50)
      span
        display inline-block
        width 10%
        font-size 12px
        padding 0 .1rem
        text-align center
        line-height .38rem
        box-sizing border-box
        // float left
        &:nth-child(1)
          width 6%
        &:nth-child(4)
          width 14%
</style>