SFVue.git - Gitblit

<template>
  <div>
    <div class="kb_dashboard">
 
      <div class="kb_backgroundCustom" />
      <div class="kb_header">
        <div class="kb_headTime" style="top: 35px;left:  20px">
          <span>永康市圣沣塑件加工厂</span>
        </div>
 
        <div class="kb_headTime kb_header_text" style="top: 35px;left:  800px">
          <span>仓库管理数字化看板</span>
        </div>
        <div class="kb_headTime" style="top: 35px;right:  25px">
          <span>{{ headTime }}</span>
        </div>
      </div>
 
      <div style="display: flex;justify-content: space-between;padding:0 20px 20px 20px;height: 950px">
        <div style="width: 1350px;z-index: 2;margin-top: 50px;" class="flex_c_b">
          <div style="height: 470px;">
            <div class="smallTitle">
              <svg-icon icon-class="cpdrk" class="svg_class" />
              采购待入库
            </div>
 
            <div style="height:410px;">
              <dv-border-box-12>
                <dv-scroll-board
                  ref="scrollBoardTop"
                  :config="configTableTop"
                  style="width: 1326px;height: 390px;margin:0 auto;padding-top: 13px;"
                />
              </dv-border-box-12>
            </div>
          </div>
          <div style="height: 470px;margin-top: 30px;">
            <div class="smallTitle">
              <svg-icon icon-class="cpdfh" class="svg_class" />
              销售待发货
            </div>
            <div style="height:410px;">
              <dv-border-box-12>
                <dv-scroll-board
                  ref="scrollBoardBottom"
                  :config="configTableBottom"
                  style="width: 1326px;height: 390px;margin:0 auto;padding-top: 13px;"
                />
              </dv-border-box-12>
            </div>
          </div>
 
        </div>
        <div style="width: 500px;z-index: 2;margin-top: 50px;" class="flex_c_b">
          <div style="height: 470px;">
            <div class="smallTitle">
              <svg-icon icon-class="ph" class="svg_class" />
              近一周采购待入库物料排行Top5
            </div>
 
            <div style="height:410px;">
              <dv-border-box-12>
                <div id="bar03" style="width: 100%;height:100%; " />
              </dv-border-box-12>
            </div>
 
          </div>
          <div style="height: 470px;margin-top: 30px;">
            <div class="smallTitle">
              <svg-icon icon-class="ph" class="svg_class" />
              近一周销售待发货产品排行Top5
            </div>
            <div style="height:410px;">
              <dv-border-box-12>
                <div id="bar04" style="width: 100%;height:100%;" />
              </dv-border-box-12>
            </div>
          </div>
        </div>
      </div>
 
    </div>
  </div>
</template>
 
<script>
import './kbCommon.css'
import { bar02, kbTop, loadEcharts } from '@/utils/myEcharts'
import {
  ProcureOutsourcLeftTop,
  ProductConsignmentLeftBottom,
  ProcureOutsourcRightTop,
  ProductionStockedInRightBottom
} from '@/api/kanbanManager'
 
export default {
  name: 'Index2',
 
  data() {
    return {
      headTime: '',
 
      configTableTop: {
        headerBGC: 'rgba(38, 68 ,139, 0.2)', // 表头背景色
        oddRowBGC: 'transparent', // 奇数行背景色
        evenRowBGC: 'transparent', // 偶数行背景色
        headerHeight: 45,
        waitTime: 3000,
        rowNum: 8,
 
        header: [
          '<span style="color:#09d8f2;">单据日期</span>',
          '<span style="color:#09d8f2;">单据编号</span>',
          '<span style="color:#09d8f2;">销售订单号</span>',
          '<span style="color:#09d8f2;">产品名称</span>',
          '<span style="color:#09d8f2;">规格型号</span>',
          '<span style="color:#09d8f2;">数量</span>',
          '<span style="color:#09d8f2;">已入库数量</span>',
          '<span style="color:#09d8f2;">未入库数量</span>'
        ],
        data: [
          // ['<span style="color:#37a2da;">行1列1</span>', '行1列2', '行1列3'],
          // [1, 2, 3, 4, 5, 6, 8, 9],
          // [1, 2, 3, 4, 5, 6, 8, 9],
          // [1, 2, 3, 4, 5, 6, 8, 9],
          // [1, 2, 3, 4, 5, 6, 8, 9],
          // [1, 2, 3, 4, 5, 6, 8, 9],
          // [1, 2, 3, 4, 5, 6, 8, 9],
          // [1, 2, 3, 4, 5, 6, 8, 9],
          // [1, 2, 3, 4, 5, 6, 8, 9],
          // [1, 2, 3, 4, 5, 6, 8, 9],
          // [1, 2, 3, 4, 5, 6, 8, 9],
          // [1, 2, 3, 4, 5, 6, 8, 9],
          // [1, 2, 3, 4, 5, 6, 8, 9]
 
        ],
        index: true,
        columnWidth: [50, 130, 150, 300, 200, 120, 120, 120, 120],
        align: ['center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center']
        // carousel: 'page'
      },
 
      configTableBottom: {
        headerBGC: 'rgba(38, 68 ,139, 0.2)', // 表头背景色
        oddRowBGC: 'transparent', // 奇数行背景色
        evenRowBGC: 'transparent', // 偶数行背景色
        headerHeight: 45,
        waitTime: 3000,
        rowNum: 8,
 
        header: [
          '<span style="color:#09d8f2;">单据日期</span>',
          '<span style="color:#09d8f2;">单据编号</span>',
          '<span style="color:#09d8f2;">产品名称</span>',
          '<span style="color:#09d8f2;">规格型号</span>',
          '<span style="color:#09d8f2;">数量</span>',
          '<span style="color:#09d8f2;">已发货数量</span>',
          '<span style="color:#09d8f2;">未发货数量</span>',
 
          '<span style="color:#09d8f2;">预计交付日期</span>',
          '<span style="color:#09d8f2;">延期天数</span>'
        ],
        data: [
          // ['<span style="color:#37a2da;">行1列1</span>', '行1列2', '行1列3'],
 
          // [1, 2, 3, 4, 5, 6, 8, 9],
          // [1, 2, 3, 4, 5, 6, 8, 9],
          // [1, 2, 3, 4, 5, 6, 8, 9],
          // [1, 2, 3, 4, 5, 6, 8, 9],
          // [1, 2, 3, 4, 5, 6, 8, 9],
          // [1, 2, 3, 4, 5, 6, 8, 9],
          // [1, 2, 3, 4, 5, 6, 8, 9],
          // [1, 2, 3, 4, 5, 6, 8, 9],
          // [1, 2, 3, 4, 5, 6, 8, 9],
          // [1, 2, 3, 4, 5, 6, 8, 9],
          // [1, 2, 3, 4, 5, 6, 8, 9],
          // [1, 2, 3, 4, 5, 6, 7, 8]
 
        ],
        index: true,
        columnWidth: [50, 150, 150, 150, 150, 100, 150, 150, 150, 150],
        align: ['center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center']
        // carousel: 'page'
      }
 
    }
  },
 
  created() {
    setInterval(this.getNowTime, 1000)
 
    // 两小时看板刷新一次
    setInterval(() => {
      window.location.reload()
    }, 1000 * 60 * 120)
  },
  mounted() {
    this.getProcureOutsourcLeftTop()
    setInterval(() => {
      this.getProcureOutsourcLeftTop()
    }, 10 * 1000)
 
    this.getProductConsignmentLeftBottom()
    setInterval(() => {
      this.getProcureOutsourcLeftTop()
    }, 15 * 1000)
 
    this.getEcharts()
  },
 
  methods: {
    // 获取左上table数据
    getProcureOutsourcLeftTop() {
      ProcureOutsourcLeftTop().then(res => {
        const flag = this.compareArrays(this.configTableTop.data, res.data)
        if (!flag) {
          this.configTableTop.data = res.data.map(i =>
            [i.voucherdate.substring(0, 10),
              i.wo,
              i.saleOrderCode ? i.saleOrderCode : '/',
              i.materiel_name,
              i.specification,
              i.quantity,
              i.countInQuantity ? i.countInQuantity : 0,
              `<span style="color: red;">${i.quantity - i.countInQuantity}</span>`
            ]
          )
          this.$refs['scrollBoardTop'].updateRows(this.configTableTop.data)
        }
      })
    },
    // 获取左下table数据
    getProductConsignmentLeftBottom() {
      ProductConsignmentLeftBottom().then(res => {
        const flag = this.compareArrays(this.configTableBottom.data, res.data)
        if (!flag) {
          this.configTableBottom.data = res.data.map(i =>
            [
              i.voucherdate.substring(0, 10),
              i.wo,
              i.materiel_name,
              i.specification ? i.specification : '/',
              i.quantity,
              i.saleOutQuantity ? i.saleOutQuantity : '/',
              `<span style="color:red;">  ${i.saleOutQuantity ? i.quantity - i.saleOutQuantity : i.quantity}</span>`, // 未发货数量
              i.deliveryDate ? i.deliveryDate.substring(0, 10) : '/',
              i.warning < 0 ? `<span style="color:red;">${Math.abs(i.warning)}</span>` : `<span>${Math.abs(i.warning)}</span>`
            ]
          )
          this.$refs['scrollBoardBottom'].updateRows(this.configTableBottom.data)
        }
      })
    },
 
    // 获取echarts
    getEcharts() {
      ProcureOutsourcRightTop().then(res => {
        loadEcharts('bar03', bar02(res.data.filter(i => i.qty > 0).map(i => i.qty), res.data.filter(i => i.qty > 0).map(i => i.materiel_name)))
      })
 
      ProductionStockedInRightBottom().then(res => {
        loadEcharts('bar04', bar02(res.data.filter(i => i.qty > 0).map(i => i.qty), res.data.filter(i => i.qty > 0).map(i => i.materiel_name)))
      })
 
      setInterval(() => {
        ProcureOutsourcRightTop().then(res => {
          loadEcharts('bar03', bar02(res.data.filter(i => i.qty > 0).map(i => i.qty), res.data.filter(i => i.qty > 0).map(i => i.materiel_name)))
        })
      }, 1000 * 25)
 
      setInterval(() => {
        ProductionStockedInRightBottom().then(res => {
          loadEcharts('bar04', bar02(res.data.filter(i => i.qty > 0).map(i => i.qty), res.data.filter(i => i.qty > 0).map(i => i.materiel_name)))
        })
      }, 1000 * 30)
    },
    // 获取当前时间
    getNowTime() {
      const dt = new Date()
      const wk = dt.getDay()
      const y = dt.getFullYear()
      const m = (dt.getMonth() + 1 + '').padStart(2, '0')
      const d = (dt.getDate() + '').padStart(2, '0')
 
      const hh = (dt.getHours() + '').padStart(2, '0')
      const mm = (dt.getMinutes() + '').padStart(2, '0')
      const ss = (dt.getSeconds() + '').padStart(2, '0')
      const weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      const week = weeks[wk]
 
      this.headTime = `${y}-${m}-${d}  ${hh}:${mm}:${ss}   ${week}`
    },
 
    // 两个数组做对比
    compareArrays(arr1, arr2) {
      const set1 = new Set(arr1)
      const set2 = new Set(arr2)
 
      if (set1.size !== set2.size) {
        return false
      }
 
      for (const value of set1) {
        if (!set2.has(value)) {
          return false
        }
      }
 
      return true
    }
 
  }
}
</script>
 
<style lang="scss" scoped>
 
::v-deep .header-item {
  font-size: 16px !important;
}
 
::v-deep .row-item {
  font-size: 16px !important;
}
 
</style>