1.产能规划优化

loulijun2021

2022-11-05 c4b49d08cef0805e17646eef03e1c1a62316c3b2

 src/views/kb/ckgl.vue

@@ -21,7 +21,7 @@
          <!-- 1-->
          <div class="kb_left_top kb_pd10">
            <div class="kb_left_top_block" style="margin-top: 10px">
              <div class="headTitle kb_title_text">产品待入库</div>
              <div class="headTitle kb_title_text">产品待入库 <div style="margin-left: 30px">{{ number1 }} 单</div></div>
              <div class="content">
                <el-table
                  ref="tableDataTopRef"
@@ -151,7 +151,7 @@
              </div>
            </div>
            <div class="kb_left_top_block" style="margin-top: 25px">
              <div class="headTitle kb_title_text">产品待发货</div>
              <div class="headTitle kb_title_text">产品待发货 <div style="margin-left: 30px">{{ number2 }} 单</div></div>
              <div class="content">
                <el-table
                  ref="tableDataBottomRef"
@@ -291,11 +291,12 @@
        <div class="kb_right kb_pd10">
          <div class="kb_right_top kb_pd10">
            <div class="kb_right_top_content">
              <div class="content_head kb_title_text" style="margin-top: 30px;">产品库存量排行Top5</div>
              <div class="content_head kb_title_text" style="margin-top: 30px;">半成品、产品库存量排行Top5</div>
              <div class="content_body" style="height:402px;">
                <div id="bar03" style="width: 100%;height:100%" />
              </div>
              <div class="content_head kb_title_text" style="margin-top: 12px">半成品库存量排行Top5</div>
              <!--              <div class="content_head kb_title_text" style="margin-top: 12px">半成品库存量排行Top5</div>-->
              <div class="content_head kb_title_text" style="margin-top: 12px">原材料库存量排行Top5</div>
              <div class="content_body">
                <div id="bar04" style="width: 100%;height:100%" />
              </div>
@@ -326,26 +327,77 @@
  },
  data() {
    return {
      onLine: navigator.onLine, // 监听网络是否在线

      headTime: '',
      tableDataTop: [],
      tableDataBottom: [],

      number1: '',
      number2: '',

      MarqueeTipsContent: '', // 公告
      speed: 100// 公告播放的速度
      speed: 100, // 公告播放的速度

      tableTopTask: null,
      tableBottomTask: null,
      echartsRightTop: null,
      echartsRightBottom: null

    }
  },

  created() {
    setInterval(this.getNowTime, 1000)

    // 两小时看板刷新一次
    setInterval(() => {
      window.location.reload()
    }, 1000 * 60 * 120)
  },
  mounted() {
    this.getWareHouseTopLeftData()
    this.getWareHouseTopBottomData()
    this.getEcharts()

    this.getMarqueeTipsContent()
    window.addEventListener('online', this.updateOnlineStatus)
    window.addEventListener('offline', this.updateOnlineStatus)
    this.updateOnlineStatus({ type: this.onLine ? 'online' : 'offline', isFirst: true })
  },
  beforeDestroy() {
    window.removeEventListener('online', this.updateOnlineStatus)
    window.removeEventListener('offline', this.updateOnlineStatus)
  },
  methods: {
    // 更新网络状态
    updateOnlineStatus(e) {
      if (e.isFirst) {
        this.getWareHouseTopLeftData()
        this.getWareHouseTopBottomData()
        this.getEcharts()
        // this.getMarqueeTipsContent()
      } else {
        const loading = this.$loading({
          lock: true,
          text: '断网了，正在拼命联网中，请检查网络是否正常...',
          spinner: 'el-icon-loading',
          customClass: 'osloading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        const { type } = e
        this.onLine = type === 'online'
        if (this.onLine) {
          this.getWareHouseTopLeftData()
          this.getWareHouseTopBottomData()
          this.getEcharts()
          loading.close()
          this.$message.success('网络连接成功！')
        } else {
          clearInterval(this.tableTopTask)
          clearInterval(this.tableBottomTask)
          clearInterval(this.echartsRightTop)
          clearInterval(this.echartsRightBottom)
          this.$message.error('网络掉线，请关注网络状态！')
        }
      }
    },

    // 获取公告
    getMarqueeTipsContent() {
      // this.MarqueeTipsContent = '各位员工们：根据上级的通知，结合我企实际情况，现将20xx年的元旦放假通知如下：一、1月1日至1月3日放假调休，共3天。1月4日正式上班。二、节假日期间，各班组要严格落实上级的重要指示精神，按照上级的具体要求，认真抓好落实节日期间值班备勤工作，确保节日期间企业各项工作正常运转。xx企业20xx年12月28日'
@@ -357,10 +409,10 @@
    getWareHouseTopLeftData() {
      WareHouseTopLeftData().then(res => {
        this.tableDataTop = res.data

        this.number1 = this.tableDataTop.length
        const divData = this.$refs.tableDataTopRef.bodyWrapper
        // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
        const task = setInterval(() => {
        this.tableTopTask = setInterval(() => {
          // 元素自增距离顶部1像素
          divData.scrollTop += 1
          // divData.scrollTop += divData.scrollHeight / this.tableData.length
@@ -370,8 +422,9 @@
            divData.scrollTop = 0
            WareHouseTopLeftData().then(res => {
              this.tableDataTop = res.data
              this.number1 = this.tableDataTop.length
              if (this.tableDataTop.length > 9) {
                clearInterval(task)
                clearInterval(this.tableTopTask)
                this.getWareHouseTopLeftData()
              }
            })
@@ -383,10 +436,11 @@
    getWareHouseTopBottomData() {
      WareHouseTopBottomData().then(res => {
        this.tableDataBottom = res.data

        this.number2 = this.tableDataBottom.length
        const divData = this.$refs.tableDataBottomRef.bodyWrapper
        // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
        const task = setInterval(() => {
        // const task = setInterval(() => {
        this.tableBottomTask = setInterval(() => {
          // 元素自增距离顶部1像素
          divData.scrollTop += 1
          // divData.scrollTop += divData.scrollHeight / this.tableData.length
@@ -396,9 +450,9 @@
            divData.scrollTop = 0
            WareHouseTopBottomData().then(res => {
              this.tableDataBottom = res.data

              this.number2 = this.tableDataBottom.length
              if (this.tableDataBottom.length > 10) {
                clearInterval(task)
                clearInterval(this.tableBottomTask)
                this.getWareHouseTopBottomData()
              }
            })
@@ -417,13 +471,13 @@
        loadEcharts('bar04', bar02(res.data.filter(i => i.CanuseBaseQuantity > 0).map(i => i.CanuseBaseQuantity), res.data.filter(i => i.CanuseBaseQuantity > 0).map(i => i.materiel_name)))
      })

      setInterval(() => {
      this.echartsRightTop = setInterval(() => {
        WareHouseRightTopData().then(res => {
          loadEcharts('bar03', bar02(res.data.filter(i => i.CanuseBaseQuantity > 0).map(i => i.CanuseBaseQuantity), res.data.filter(i => i.CanuseBaseQuantity > 0).map(i => i.materiel_name)))
        })
      }, 1000 * 15)

      setInterval(() => {
      this.echartsRightBottom = setInterval(() => {
        WareHouseRightBottomData().then(res => {
          loadEcharts('bar04', bar02(res.data.filter(i => i.CanuseBaseQuantity > 0).map(i => i.CanuseBaseQuantity), res.data.filter(i => i.CanuseBaseQuantity > 0).map(i => i.materiel_name)))
        })
@@ -508,6 +562,7 @@
          //font-size: 18px;
          margin-bottom: 10px;
          margin-top: -10px;
          display: flex;
          color: #00ffff;

        }