1.客户看板发布

小小儁爺

2024-07-26 559ba5b4f27be7f8f4c73f4ab75386f126c3fed2

1.客户看板发布

 src/permission.js

@@ -9,7 +9,7 @@

NProgress.configure({ showSpinner: false }) // NProgress Configuration

const whiteList = ['/login', '/zhkb', '/cj'] // no redirect whitelist
const whiteList = ['/login', '/zhkb', '/cj', '/cj2', '/ckgl'] // no redirect whitelist

router.beforeEach(async(to, from, next) => {
  // start progress bar

 src/router/index.js

@@ -44,6 +44,10 @@
    component: () => import('@/views/kanbanManager/cj'),
    hidden: true
  }, {
    path: '/cj2',
    component: () => import('@/views/kanbanManager/cj2'),
    hidden: true
  }, {
    path: '/ckgl',
    component: () => import('@/views/kanbanManager/ckgl'),
    hidden: true

 src/views/kanbanManager/cj.vue

@@ -10,7 +10,7 @@
        </div>

        <div class="kb_headTime kb_header_text" style="top: 35px;left:  800px">
          <span>装配车间数字化看板</span>
          <span>注塑车间数字化看板</span>
        </div>

        <div class="kb_headTime" style="top: 35px;right:  25px">
@@ -159,7 +159,7 @@
  },
  methods: {
    getWorkShopProduceTopData() {
      WorkShopProduceTopData().then(res => {
      WorkShopProduceTopData({ wkshopcode: '1501' }).then(res => {
        const flag = this.compareArrays(this.configTableTop.data, res.data)
        if (!flag) {
          this.configTableTop.data = res.data.map(i =>
@@ -184,7 +184,7 @@
      })
    },
    async getWorkShopProduceBottomLeftData() {
      const res4 = await WorkShopProduceBottomLeftData()
      const res4 = await WorkShopProduceBottomLeftData({ wkshopcode: '1501' })
      this.cjzl03_xData = res4.data.map(i => i.click_date)
      this.cjzl03_yData = res4.data.map(i => i.count)

@@ -192,7 +192,7 @@
    },

    async getWorkShopProduceBottomRightData() {
      const res5 = await WorkShopProduceBottomRightData()
      const res5 = await WorkShopProduceBottomRightData({ wkshopcode: '1501' })
      this.RightBottom = res5.data
      if (this.RightBottom.length > 0) {
        loadEcharts('cjzl04', cjzl04(this.RightBottom.map(i => i.name), this.RightBottom.map(i => i.cont)))

 src/views/kanbanManager/cj2.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,252 @@
<template>
  <div>
    <div class="kb_dashboard" style="display:flex;flex-direction: column;justify-content: space-between">

      <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=" padding:5px 20px 20px 20px;z-index:2;height: 940px;flex-direction: column;justify-content: space-between;"
      >
        <!--        ä¸Šè¾¹-->
        <div style="display: flex;justify-content: space-between">
          <div style="width:100%">
            <div class="smallTitle">
              <svg-icon icon-class="cxjg" class="svg_class" />
              ç”Ÿäº§ä¿¡æ¯
            </div>

            <div style="height: 450px">
              <dv-border-box-12>
                <dv-scroll-board
                  ref="scrollBoardTop"
                  :config="configTableTop"
                  style="width: 99%;height: 430px;margin:0 auto;padding-top: 13px;"
                />
              </dv-border-box-12>
            </div>

          </div>
        </div>

        <!--        ä¸‹è¾¹-->
        <div style="display: flex;justify-content: space-between;margin-top: 15px;">
          <div style="width: 1000px;">
            <div class="smallTitle">
              <svg-icon icon-class="blcs" class="svg_class" />
              è´¨é‡ä¸è‰¯(近一周)
            </div>

            <div style="height: 380px;">
              <dv-border-box-12>
                <div id="cjzl03" class="flex_c_c" style="width: 100%;height:100%" />
              </dv-border-box-12>
            </div>

          </div>
          <div style="width: 850px;">
            <div class="smallTitle">
              <svg-icon icon-class="ckkc" class="svg_class" />
              ä¸è‰¯ç»Ÿè®¡(近一月)
            </div>
            <div style="height: 380px;">
              <dv-border-box-12>
                <div id="cjzl04" class="flex_c_c" style="width: 100%;height:100%" />
              </dv-border-box-12>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import './kbCommon.css'
import { loadEcharts, cjzl04, cjzl03_2 } from '@/utils/myEcharts'
import {
  WorkShopProduceBottomLeftData,
  WorkShopProduceBottomRightData,
  WorkShopProduceTopData
} from '@/api/kanbanManager'

export default {
  name: 'Cjsc',
  data() {
    return {
      headTime: '',

      cjzl03_xData: [],
      cjzl03_yData: [],
      RightBottom: [],

      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>',
          '<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, 7, 8, 9, 10, 11, 12],
          // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
          // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
          // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
          // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
          // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
          // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
          // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
          // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
          // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
          // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
          // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]

        ],
        // index: true,
        columnWidth: [150, 150, 150, 150, 150, 150, 150, 150, 150, 150, 150, 150, 150],
        align: ['center', 'center', 'center', '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.getWorkShopProduceTopData()
    setInterval(() => {
      this.getWorkShopProduceTopData()
    }, 10 * 1000)

    this.getWorkShopProduceBottomLeftData()
    this.getWorkShopProduceBottomRightData()
  },
  methods: {
    getWorkShopProduceTopData() {
      WorkShopProduceTopData({ wkshopcode: '1502' }).then(res => {
        const flag = this.compareArrays(this.configTableTop.data, res.data)
        if (!flag) {
          this.configTableTop.data = res.data.map(i =>
            [
              i.wo_code,
              i.partcode,
              i.partname,
              i.partspec ? i.partspec : '/',
              i.plan_qty,
              i.good_qty,
              `<span style="color: red;">${i.ng_qty}</span>`,
              `<span style="color: red;">${i.laborbad_qty}</span>`,
              `<span style="color: red;">${i.materielbad_qty}</span>`,
              i.seq,
              i.step_code,
              i.step_name,
              parseFloat(i.schedule.toFixed(2))
            ]
          )
          this.$refs['scrollBoardTop'].updateRows(this.configTableTop.data)
        }
      })
    },
    async getWorkShopProduceBottomLeftData() {
      const res4 = await WorkShopProduceBottomLeftData({ wkshopcode: '1502' })
      this.cjzl03_xData = res4.data.map(i => i.click_date)
      this.cjzl03_yData = res4.data.map(i => i.count)

      loadEcharts('cjzl03', cjzl03_2(this.cjzl03_xData, this.cjzl03_yData))
    },

    async getWorkShopProduceBottomRightData() {
      const res5 = await WorkShopProduceBottomRightData({ wkshopcode: '1502' })
      this.RightBottom = res5.data
      if (this.RightBottom.length > 0) {
        loadEcharts('cjzl04', cjzl04(this.RightBottom.map(i => i.name), this.RightBottom.map(i => i.cont)))
      }
    },

    // èŽ·å–当前时间
    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>

 src/views/kanbanManager/zhkb.vue

@@ -123,17 +123,17 @@
            <dv-border-box-12 style="height: 415px;">
              <div style="display: flex;justify-content: center;position: relative">
                <div class="kb_center_block_children all_block05">
                  <div style="font-size: 24px;">{{ parseFloat(RightBottom.Y) }}</div>
                  <div style="font-size: 24px;">{{ RightBottom? parseFloat(RightBottom.Y):'NaN' }}</div>
                  <div class="box02" />
                  <div>原材料</div>
                </div>
                <div class="kb_center_block_children all_block06">
                  <div style="font-size: 24px;">{{ parseFloat(RightBottom.B) }}</div>
                  <div style="font-size: 24px;">{{ RightBottom? parseFloat(RightBottom.B):'NaN' }}</div>
                  <div class="box02" />
                  <div>半成品</div>
                </div>
                <div class="kb_center_block_children all_block07">
                  <div style="font-size: 24px;">{{ parseFloat(RightBottom.C) }}</div>
                  <div style="font-size: 24px;">{{ RightBottom? parseFloat(RightBottom.C):'NaN' }}</div>
                  <div class="box02" />
                  <div>产成品</div>
                </div>
@@ -207,7 +207,7 @@
  },
  methods: {
    getWorkShopCompreLeftTop() {
      WorkShopCompreLeftTop().then(res2 => {
      WorkShopCompreLeftTop({ wkshopcode: '1501,1502' }).then(res2 => {
        this.LeftTopData01 = []
        this.LeftTopData02 = []
        res2.data.LeftTop.forEach(i => {

 vue.config.js

@@ -52,8 +52,8 @@
    },
    proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: 'http://192.168.1.237:8000', // è¯·æ±‚的第三⽅接⼝地址    å®¢æˆ·
        // target: 'http://121.196.36.24:8032', // è¯·æ±‚的第三⽅接⼝地址       æœ¬åœ°å¼€å‘服务器
        // target: 'http://192.168.1.237:8000', // è¯·æ±‚的第三⽅接⼝地址    å®¢æˆ·
        target: 'http://192.168.2.254:8000', // è¯·æ±‚的第三⽅接⼝地址       æœ¬åœ°å¼€å‘服务器  æ²£æ²£
        changeOrigin: true, // è¯·æ±‚跨域时，需 é…ç½®æ­¤é¡¹
        pathRewrite: { // è·¯å¾„重写,替换target中的请求地址
          ['^' + process.env.VUE_APP_BASE_API]: '/api/'