1 车间质量、仓库管理、及五个车间看板 递交

loulijun2021

2023-09-13 2bf7aff3435c9abcb38b9ced5b6fa56957aeae89

1  车间质量、仓库管理、及五个车间看板  递交

 src/api/kanbanManager.js

@@ -7,6 +7,7 @@
    method: 'get'
  })
}

// å¤§å²›è½¦é—´ç»¼åˆçœ‹æ¿,左上产线加工任务接口
export function LineSearchTopLeftData(data) {
  return request({
@@ -100,6 +101,7 @@
    method: 'get'
  })
}

// å¤§å²›ä»“库看板,右上成品库、半成品库top5库存排行
export function WareHouseRightTopData() {
  return request({
@@ -107,6 +109,7 @@
    method: 'get'
  })
}

// å¤§å²›ä»“库看板,右下原料库库top5库存排行
export function WareHouseRightBottomData() {
  return request({
@@ -114,6 +117,7 @@
    method: 'get'
  })
}

// è½¦é—´çœ‹æ¿å…¬å‘Š
export function WkspReportNotice(data) {
  return request({
@@ -138,6 +142,7 @@
    params: data
  })
}

export function QCBadCenterRightWeek(data) {
  return request({
    url: 'KanBanManagerent/QCBadCenterRightWeek',
@@ -145,6 +150,15 @@
    params: data
  })
}

export function QCBadBottomWeek(data) {
  return request({
    url: 'KanBanManagerent/QCBadBottomWeek',
    method: 'get',
    params: data
  })
}

export function BadWeekDistriBute(data) {
  return request({
    url: 'KanBanManagerent/BadWeekDistriBute',
@@ -152,6 +166,7 @@
    params: data
  })
}

export function BadContManger(data) {
  return request({
    url: 'KanBanManagerent/BadContManger',

 src/assets/images/background001.jpg

 src/permission.js

@@ -8,7 +8,7 @@

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

const whiteList = ['/login', '/zhkb', '/ckgl', '/cgdd', '/cjzl', '/back'] // no redirect whitelist
const whiteList = ['/login', '/zhkb', '/ckgl', '/cgdd', '/cjzl', '/all', '/back'] // no redirect whitelist

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

 src/router/index.js

@@ -51,6 +51,10 @@
    path: '/cjzl',
    component: () => import('@/views/kanbanManager/cjzl'),
    hidden: true
  }, {
    path: '/all',
    component: () => import('@/views/kanbanManager/all'),
    hidden: true
  },

  {

 src/utils/myEcharts.js

@@ -1745,7 +1745,7 @@
          textBorderColor: '#000',
          textBorderWidth: 1,
          textShadowBlur: 1,
          textShadowColor: colorY,
          textShadowColor: colorX,
          textShadowOffsetX: 0,
          textShadowOffsetY: 0,
          paddingTop: 10,
@@ -1797,7 +1797,7 @@
        splitLine: { // åˆ†éš”线
          length: 10, // å±žæ€§length控制线长
          lineStyle: { // å±žæ€§lineStyle（详见lineStyle）控制线条样式
            color: colorY
            color: colorX
          }
        },
        axisLabel: {
@@ -1829,7 +1829,7 @@
          textBorderColor: '#000',
          textBorderWidth: 1,
          textShadowBlur: 1,
          textShadowColor: colorY,
          textShadowColor: colorX,
          textShadowOffsetX: 0,
          textShadowOffsetY: 0,
          paddingTop: 10,
@@ -1856,52 +1856,16 @@

// è½¦é—´è´¨é‡
export function cjzl01(scaleData) {
  console.log(scaleData, 3)
  // var scaleData = [
  //   {
  //     'name': '毛刺',
  //     'value': 30
  //   },
  //   {
  //     'name': '色差',
  //     'value': 20
  //   },
  //   {
  //     'name': '抛光',
  //     'value': 10
  //   },
  //   {
  //     'name': '打磨',
  //     'value': 5
  //   },
  //   {
  //     'name': '折弯、压铸、打孔',
  //     'value': 10
  //   }
  // ]
  var rich = {
    white: {
      color: colorX,
      align: 'center',
      padding: [3, 0]
      // fontSize: 16
    }
  }
  var placeHolderStyle = {
    normal: {
      label: {
        show: false
      },
      labelLine: {
        show: false
      },
      color: 'rgba(0, 0, 0, 0)',
      borderColor: 'rgba(0, 0, 0, 0)',
      borderWidth: 0
      padding: [3, 0],
      fontSize: 20
    }
  }
  var data = []
  var color = ['#00ffff', '#ff3000', '#006ced', '#ffe000', '#ffa800', '#ff5b00', '#ff3000']
  var color = ['#00ffff', '#ff5b00', '#006ced', '#ffe000', '#ffa800', '#ff3000']
  for (var i = 0; i < scaleData.length; i++) {
    data.push({
      value: scaleData[i].value,
@@ -1915,11 +1879,6 @@
        }
      }
    }
    // {
    //   value: 2,
    //   name: '',
    //   itemStyle: placeHolderStyle
    // }
    )
  }
  var seriesObj = [{
@@ -1935,6 +1894,7 @@
          show: true,
          position: 'outside',
          color: colorX,
          fontSize: 20,
          formatter: function(params) {
            if (params.name !== '') {
              return params.name + '\n{white|' + params.value + '}'
@@ -1995,25 +1955,13 @@
    white: {
      color: '#ddd',
      align: 'center',
      padding: [5, 0]
      padding: [5, 0],
      fontSize: 20
    }
  }

  var placeHolderStyle = {
    normal: {
      label: {
        show: false
      },
      labelLine: {
        show: false
      },
      color: 'rgba(0, 0, 0, 0)',
      borderColor: 'rgba(0, 0, 0, 0)',
      borderWidth: 0
    }
  }
  var data = []
  var color = ['#00ffff', '#ff3000', '#006ced', '#ffe000', '#ffa800', '#ff5b00', '#ff3000']
  var color = ['#00ffff', '#ff3000', '#ffe000', '#ffa800', '#ff5b00']
  for (var i = 0; i < scaleData.length; i++) {
    data.push({
      value: scaleData[i].value,
@@ -2027,11 +1975,6 @@
        }
      }
    }
    //   {
    //   value: 4,
    //   name: '',
    //   itemStyle: placeHolderStyle
    // }
    )
  }
  var seriesObj = [{
@@ -2044,9 +1987,9 @@
    itemStyle: {
      normal: {
        label: {
          fontSize: 20,
          show: true,
          position: 'outside',
          // color: '#ddd',
          color: colorX,
          formatter: function(params) {
            // var percent = 0
@@ -2065,7 +2008,7 @@
        },
        labelLine: {
          length: 10,
          length2: 10,
          length2: 20,
          show: true,
          color: '#00ffff'
        }
@@ -2085,6 +2028,7 @@
      top: '45%',
      textAlign: 'center',
      textStyle: {
        // color: colorX,
        color: '#00ffff',
        fontSize: '20',
        fontWeight: 'bolder'
@@ -2110,332 +2054,10 @@
  return option
}

// export function cjzl03() {
// // mock数据
//   const dataArr = {
//     xdata: ['9月4号', '9月5号', '9月6号', '9月7号', '9月8号', '9月9号', '9月10号'],
//     vaccination: [1000, 1300, 1200, 800, 600, 700, 900],
//     unvaccinated: [700, 800, 900, 500, 300, 400, 500],
//     unvaccinatedTwo: [400, 300, 500, 200, 100, 100, 300],
//     rateDataOne: [98, 96, 97, 92, 94, 95, 100],
//     rateDataTwo: [3, 4, 5, 1, 3, 2, 3]
//   }
//
//   // tooltip
//   const tooltip = {
//     trigger: 'axis',
//     textStyle: { fontSize: '100%' },
//     formatter: params => {
//       const rander = params.map(item => item.seriesType !== 'pictorialBar' ? `<div>${item.seriesName}: ${item.seriesType !== 'line' ? item.value : item.value + '%'}</div>` : '').join('')
//       return `
//             <div>${params[0].axisValue}</div>
//             ${rander}
//         `
//     }
//   }
//   const legend = {
//     data: ['任务数', '合格数', '不良数', '合格率', '不良率'],
//     textStyle: { fontSize: 14, color: '#fff' },
//     itemWidth: 25,
//     itemHeight: 15,
//     itemGap: 15,
//     bottom: '5%',
//     selectedMode: false
//   }
//   const grid = {
//     left: '2%',
//     right: '2%',
//     bottom: '20%',
//     top: '10%',
//     containLabel: true
//   }
//   // xAxis
//   const xAxis = {
//     // axisTick: { show: true },
//     // axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' }},
//     // axisLabel: { textStyle: { fontSize: 12, color: '#fff' }},
//
//     type: 'category',
//     boundaryGap: true,
//     axisLabel: {
//       interval: 0,
//       formatter: '{value}',
//       fontSize: 14,
//       // margin: 20,
//       textStyle: {
//         color: colorX
//       }
//     },
//     axisLine: {
//       lineStyle: {
//         color: '#032c58'
//       }
//     },
//     splitLine: {
//       show: false,
//       lineStyle: {
//         color: '#032c58'
//       }
//     },
//     axisTick: {
//       show: false
//     },
//
//     data: dataArr.xdata
//   }
//
//   // yAxis
//   const yAxis = [{
//     // max: 800,
//     boundaryGap: false,
//     splitNumber: 4,
//     type: 'value',
//     axisLabel: {
//       textStyle: {
//         fontSize: 14,
//         color: colorY
//       }
//     },
//     // name: '单',
//     // nameTextStyle: {
//     //   color: colorY,
//     //   fontSize: 14,
//     //   lineHeight: 20
//     // },
//     splitLine: {
//       show: true,
//       lineStyle: {
//         color: '#032c58'
//       }
//     },
//     axisLine: {
//       show: true,
//       lineStyle: {
//         color: '#032c58'
//       }
//     },
//     axisTick: {
//       show: true
//     }
//     // axisTick: { show: false },
//     // axisLine: { show: false },
//     // splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' }},
//     // axisLabel: { textStyle: { fontSize: 16, color: '#fff' }}
//   }, {
//     show: true,
//     max: 100,
//     splitLine: { show: false },
//     axisLine: { show: false },
//     axisTick: { show: false },
//     axisLabel: {
//       textStyle: {
//         fontSize: 14,
//         color: colorY
//       },
//       formatter: params => {
//         return `${params}%`
//       }
//     }
//   }]
//
//   // series
//   const series = [{
//     z: 1,
//     name: '上部1',
//     type: 'pictorialBar',
//     symbolPosition: 'end',
//     data: dataArr.vaccination,
//     symbol: 'diamond',
//     symbolOffset: ['-50%', '-50%'],
//     symbolSize: [29, 19],
//     itemStyle: {
//       borderColor: '#2fffa4',
//       color: '#2fffa4'
//     }
//   },
//   {
//     z: 1,
//     type: 'bar',
//     name: '任务数',
//     barWidth: 30,
//     barGap: '-50%',
//     data: dataArr.vaccination,
//     itemStyle: {
//       color: {
//         type: 'linear',
//         x: 0, x2: 1, y: 0, y2: 0,
//         colorStops: [
//           { offset: 0, color: 'rgba(29, 245, 160, .7)' },
//           { offset: 0.5, color: 'rgba(29, 245, 160, .7)' },
//           { offset: 0.5, color: 'rgba(29, 245, 160, .3)' },
//           { offset: 1, color: 'rgba(29, 245, 160, .3)' }
//         ]
//       }
//     }
//   }, {
//     z: 2,
//     name: '上部1',
//     type: 'pictorialBar',
//     symbolPosition: 'end',
//     data: dataArr.unvaccinated,
//     symbol: 'diamond',
//     symbolOffset: [0, '-50%'],
//     symbolSize: [29, 19],
//     itemStyle: {
//       borderColor: '#32ffee',
//       color: '#32ffee'
//     }
//   },
//   {
//     z: 2,
//     type: 'bar',
//     name: '合格数',
//     barWidth: 30,
//     data: dataArr.unvaccinated,
//     itemStyle: {
//       color: {
//         type: 'linear',
//         x: 0, x2: 1, y: 0, y2: 0,
//         colorStops: [
//           { offset: 0, color: 'rgba(50, 255, 238, .7)' },
//           { offset: 0.5, color: 'rgba(50, 255, 238, .7)' },
//           { offset: 0.5, color: 'rgba(50, 255, 238, .3)' },
//           { offset: 1, color: 'rgba(50, 255, 238, .3)' }
//         ]
//       }
//     }
//   }, {
//     z: 3,
//     name: '上部1',
//     type: 'pictorialBar',
//     symbolPosition: 'end',
//     data: dataArr.unvaccinatedTwo,
//     symbol: 'diamond',
//     symbolOffset: ['50%', '-50%'],
//     symbolSize: [29, 19],
//     itemStyle: {
//       borderColor: '#ffd11a',
//       color: '#ffd11a'
//     }
//   }, {
//     z: 3,
//     type: 'bar',
//     name: '不良数',
//     barWidth: 30,
//     data: dataArr.unvaccinatedTwo,
//     itemStyle: {
//       color: {
//         type: 'linear',
//         x: 0, x2: 1, y: 0, y2: 0,
//         colorStops: [
//           { offset: 0, color: 'rgba(255, 209, 26, .7)' },
//           { offset: 0.5, color: 'rgba(255, 209, 26, .7)' },
//           { offset: 0.5, color: 'rgba(255, 209, 26, .3)' },
//           { offset: 1, color: 'rgba(255, 209, 26, .3)' }
//         ]
//       }
//     }
//   }, {
//     z: 9,
//     yAxisIndex: 1,
//     name: '合格率', type: 'line',
//     // symbol: 'emptyCircle',
//     symbol: `path://M9.312,4.594 C12.074,4.594 14.313,6.832 14.313,9.594 C14.313,12.355 12.074,14.594 9.312,14.594 C6.551,14.594 4.312,12.355 4.312,9.594 C4.312,6.832 6.551,4.594 9.312,4.594 Z`,
//     symbolSize: [10, 10],
//     color: {
//       type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
//       // 0% å¤„的颜色                           // 100% å¤„的颜色
//       colorStops: [{ offset: 0, color: '#32ffee' }, { offset: 1, color: '#8afff5' }],
//       global: false // ç¼ºçœä¸º false
//     },
//     lineStyle: {
//       color: {
//         type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
//         // 0% å¤„的颜色                           // 100% å¤„的颜色
//         colorStops: [{ offset: 0, color: '#32ffee' }, { offset: 1, color: '#8afff5' }],
//         global: false // ç¼ºçœä¸º false
//       }
//     },
//     // ä¿®æ”¹çš„是线下区域的颜色
//     areaStyle: {
//       color: new echarts.graphic.LinearGradient(
//         // å³/下/å·¦/上
//         0, 0, 0, 1, [
//           { offset: 0, color: 'rgba(50, 255, 238, .1)' },
//           { offset: 1, color: 'transparent' }
//         ])
//     },
//     label: {
//       show: true,
//       position: 'insideBottomLeft',
//       formatter: params => {
//         return `${params.value}%`
//       },
//       textStyle: { fontSize: 14, color: '#32ffee' }
//     },
//     data: dataArr.rateDataOne
//   }, {
//     z: 9,
//     yAxisIndex: 1,
//     name: '不良率', type: 'line',
//     symbol: `path://M9.312,4.594 C12.074,4.594 14.313,6.832 14.313,9.594 C14.313,12.355 12.074,14.594 9.312,14.594 C6.551,14.594 4.312,12.355 4.312,9.594 C4.312,6.832 6.551,4.594 9.312,4.594 Z`,
//     // symbol: 'emptyCircle',
//     symbolSize: [10, 10],
//     color: {
//       type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
//       // 0% å¤„的颜色                           // 100% å¤„的颜色
//       colorStops: [{ offset: 0, color: colorX }, { offset: 1, color: '#fff5cc' }],
//       global: false // ç¼ºçœä¸º false
//     },
//     lineStyle: {
//       color: {
//         type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
//         // 0% å¤„的颜色                           // 100% å¤„的颜色
//         colorStops: [{ offset: 0, color: colorX }, { offset: 1, color: '#fff5cc' }],
//         global: false // ç¼ºçœä¸º false
//       }
//     },
//     // ä¿®æ”¹çš„是线下区域的颜色
//     areaStyle: {
//       color: new echarts.graphic.LinearGradient(
//         // å³/下/å·¦/上
//         0, 0, 0, 1, [
//           { offset: 0, color: 'rgba(255, 209, 26, .2)' },
//           { offset: 1, color: 'transparent' }
//         ])
//     },
//     label: {
//       show: true,
//       position: 'insideBottomRight',
//       formatter: params => {
//         return `${params.value}%`
//       },
//       // textStyle: { fontSize: 14, color: '#ffd11a' }
//       textStyle: { fontSize: 14, color: colorX }
//     },
//     data: dataArr.rateDataTwo
//   }]
//   // const option = { tooltip, xAxis, yAxis, series, grid, legend, backgroundColor: 'rgba(0, 0, 0, .7)' }
//   const option = { xAxis, yAxis, series, grid, legend, backgroundColor: 'transparent' }
//   return option
// }

export function cjzl04() {
export function cjzl03(xData, legendData, yData) { // å·¦ä¾§
  return {
    backgroundColor: 'transparent',
    tooltip: {},
    // title: {
    //   text: '订单完成总数',
    //   left: '50%',
    //   top: '5%',
    //   textAlign: 'center',
    //   textStyle: {
    //     // color: '#fff',
    //     color: '#00ffff',
    //     fontSize: '20',
    //     fontWeight: 'bolder'
    //   }
    // },
    grid: {
      left: '2%',
      right: '2%',
@@ -2444,15 +2066,8 @@
      containLabel: true
    },
    legend: {
      // show: true,
      // itemGap: 20,
      // data: ['注册总量', '最新注册量'],
      // textStyle: {
      //   color: '#f9f9f9',
      //   borderColor: '#fff'
      // }
      data: ['精工车间', '装配车间', '机加工车间', '抛光车间', '打磨车间'],
      textStyle: { fontSize: 14, color: '#fff' },
      data: legendData,
      textStyle: { fontSize: 16, color: '#fff' },
      itemWidth: 25,
      itemHeight: 10,
      itemGap: 15,
@@ -2465,7 +2080,7 @@
      axisLabel: {
        interval: 0,
        formatter: '{value}',
        fontSize: 14,
        fontSize: 16,
        margin: 20,
        textStyle: {
          color: colorX
@@ -2485,7 +2100,7 @@
      axisTick: {
        show: false
      },
      data: ['9月4号', '9月5号', '9月6号', '9月7号', '9月8号', '9月9号', '9月10号']
      data: xData
    }],
    yAxis: [
      {
@@ -2495,8 +2110,8 @@
        type: 'value',
        axisLabel: {
          textStyle: {
            fontSize: 14,
            color: colorY
            fontSize: 16,
            color: colorX
          }
        },
        // name: '单',
@@ -2524,7 +2139,7 @@
    ],
    series: [
      {
        name: '精工车间',
        name: legendData[0],
        type: 'line',
        // smooth: true, //是否平滑曲线显示
        //             symbol:'circle',  // é»˜è®¤æ˜¯ç©ºå¿ƒåœ†ï¼ˆä¸­é—´æ˜¯ç™½è‰²çš„），改成实心圆
@@ -2533,9 +2148,9 @@
        symbolSize: 6,
        lineStyle: {
          normal: {
            color: `rgb(71, 226, 194)` // çº¿æ¡é¢œè‰²
            color: '#00ffff' // çº¿æ¡é¢œè‰²
          },
          borderColor: `rgb(71, 226, 194)`
          borderColor: '#00ffff'
        },
        // label: {
        //   show: true,
@@ -2546,7 +2161,7 @@
        // },
        itemStyle: {
          normal: {
            color: `rgb(71, 226, 194)`
            color: '#00ffff'
          }
        },
        tooltip: {
@@ -2568,11 +2183,10 @@
        //     shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, è®¾ç½®å›¾å½¢çš„阴影效果。
        //   }
        // },
        data: [393, 438, 485, 631, 689, 824, 987]
        // data: [600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100)]
        data: yData[0]
      },
      {
        name: '装配车间',
        name: legendData[1],
        type: 'line',
        // smooth: true, //是否平滑曲线显示
        //             symbol:'circle',  // é»˜è®¤æ˜¯ç©ºå¿ƒåœ†ï¼ˆä¸­é—´æ˜¯ç™½è‰²çš„），改成实心圆
@@ -2581,9 +2195,9 @@
        symbolSize: 6,
        lineStyle: {
          normal: {
            color: '#32ffee' // çº¿æ¡é¢œè‰²
            color: '#ff3000' // çº¿æ¡é¢œè‰²
          },
          borderColor: '#32ffee'
          borderColor: '#ff3000'
        },
        // label: {
        //   show: true,
@@ -2594,7 +2208,7 @@
        // },
        itemStyle: {
          normal: {
            color: '#32ffee'
            color: '#ff3000'
          }
        },
        tooltip: {
@@ -2616,11 +2230,10 @@
        //     shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, è®¾ç½®å›¾å½¢çš„阴影效果。
        //   }
        // },
        // data: [393, 438, 485, 631, 689, 824, 987]
        data: [10, 102, 30, 203, 40, 20, 405]
        data: yData[1]
      },
      {
        name: '机加工车间',
        name: legendData[2],
        type: 'line',
        // smooth: true, //是否平滑曲线显示
        //             symbol:'circle',  // é»˜è®¤æ˜¯ç©ºå¿ƒåœ†ï¼ˆä¸­é—´æ˜¯ç™½è‰²çš„），改成实心圆
@@ -2629,9 +2242,9 @@
        symbolSize: 6,
        lineStyle: {
          normal: {
            color: '#ffd11a' // çº¿æ¡é¢œè‰²
            color: '#ffe000' // çº¿æ¡é¢œè‰²
          },
          borderColor: '#ffd11a'
          borderColor: '#ffe000'
        },
        // label: {
        //   show: true,
@@ -2642,7 +2255,7 @@
        // },
        itemStyle: {
          normal: {
            color: '#ffd11a'
            color: '#ffe000'
          }
        },
        tooltip: {
@@ -2664,11 +2277,10 @@
        //     shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, è®¾ç½®å›¾å½¢çš„阴影效果。
        //   }
        // },
        data: [93, 48, 45, 61, 89, 84, 97]
        // data: [600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100)]
        data: yData[2]
      },
      {
        name: '抛光车间',
        name: legendData[3],
        type: 'line',
        // smooth: true, //是否平滑曲线显示
        //             symbol:'circle',  // é»˜è®¤æ˜¯ç©ºå¿ƒåœ†ï¼ˆä¸­é—´æ˜¯ç™½è‰²çš„），改成实心圆
@@ -2677,9 +2289,9 @@
        symbolSize: 6,
        lineStyle: {
          normal: {
            color: `rgb(254, 94, 94)` // çº¿æ¡é¢œè‰²
            color: '#ffa800' // çº¿æ¡é¢œè‰²
          },
          borderColor: `rgb(254, 94, 94)`
          borderColor: '#ffa800'
        },
        // label: {
        //   show: true,
@@ -2690,7 +2302,7 @@
        // },
        itemStyle: {
          normal: {
            color: `rgb(254, 94, 94)`
            color: '#ffa800'
          }
        },
        tooltip: {
@@ -2712,11 +2324,10 @@
        //     shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, è®¾ç½®å›¾å½¢çš„阴影效果。
        //   }
        // },
        data: [33, 438, 48, 63, 69, 82, 487]
        // data: [600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100)]
        data: yData[3]
      },
      {
        name: '打磨车间',
        name: legendData[4],
        type: 'line',
        // smooth: true, //是否平滑曲线显示
        //             symbol:'circle',  // é»˜è®¤æ˜¯ç©ºå¿ƒåœ†ï¼ˆä¸­é—´æ˜¯ç™½è‰²çš„），改成实心圆
@@ -2725,9 +2336,9 @@
        symbolSize: 6,
        lineStyle: {
          normal: {
            color: `rgb(255, 221, 97)` // çº¿æ¡é¢œè‰²
            color: '#ff5b00' // çº¿æ¡é¢œè‰²
          },
          borderColor: `rgb(255, 221, 97)`
          borderColor: '#ff5b00'
        },
        // label: {
        //   show: true,
@@ -2738,7 +2349,7 @@
        // },
        itemStyle: {
          normal: {
            color: `rgb(255, 221, 97)`
            color: '#ff5b00'
          }
        },
        tooltip: {
@@ -2760,325 +2371,18 @@
        //     shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, è®¾ç½®å›¾å½¢çš„阴影效果。
        //   }
        // },
        data: [93, 38, 85, 666, 555, 444, 333]
        // data: [600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100)]
        data: yData[4]
      }

    ]
  }
}

// export function cjzl03() {
//   const option = {
//     backgroundColor: 'transparent',
//     grid: {
//       left: '2%',
//       top: '10%',
//       right: '2%',
//       bottom: '20%',
//       containLabel: true
//     },
//     legend: {
//       // show: true,
//       // itemGap: 20,
//       // data: ['注册总量', '最新注册量'],
//       // textStyle: {
//       //   color: '#f9f9f9',
//       //   borderColor: '#fff'
//       // }
//       data: ['完成数', '完成率'],
//       textStyle: { fontSize: 14, color: '#fff' },
//       itemWidth: 25,
//       itemHeight: 10,
//       itemGap: 15,
//       bottom: '5%',
//       selectedMode: false
//     },
//     // tooltip: {
//     //   show: true,
//     //   trigger: 'axis', // axis , item
//     //   backgroundColor: 'RGBA(0, 0, 0, 0.3)',
//     //   borderColor: 'rgba(0, 151, 251, 0.6)',
//     //   borderWidth: 1,
//     //   borderRadius: 0,
//     //   textStyle: {
//     //     color: '#BCE9FC',
//     //     fontSize: 14,
//     //     align: 'left'
//     //   },
//     //   // formatter:'{b0}<br />{a0}:{c0}<br />{a1}:{c4}%'
//     //
//     //   // formatter: '{b0}<br/>' +
//     //   //   '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgb(255,224,144)"></span>提出再审检察建议数:{c0}<br/>' +
//     //   //   '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgb(72,226,198)"></span>采纳率:{c4}%<br/>'
//     //
//     //   formatter: function(params) {
//     //     var res = '' + params[0].name
//     //     var valueMap = new Map()
//     //     for (var i = 0, l = params.length; i < l; i++) {
//     //       if (params[i].value !== '-') {
//     //         valueMap.set(params[i].seriesName, params[i])
//     //       }
//     //     }
//     //     valueMap.forEach((value, key) => {
//     //       if (value.seriesName === '提出再审检察建议数') {
//     //         res += '<br/>' + value.marker + value.seriesName + ' : ' + value.value
//     //       } else if (value.seriesName === '采纳率' && value.value !== '-') {
//     //         res += '<br/>' + value.marker + value.seriesName + ' : ' + value.value
//     //       }
//     //     })
//     //     return res
//     //   }
//     //
//     // },
//     xAxis: {
//       type: 'category',
//       boundaryGap: true,
//       axisLabel: {
//         interval: 0,
//         formatter: '{value}',
//         fontSize: 14,
//         margin: 20,
//         textStyle: {
//           color: colorX
//         }
//       },
//       axisLine: {
//         lineStyle: {
//           color: '#032c58'
//         }
//       },
//       splitLine: {
//         show: false,
//         lineStyle: {
//           color: '#032c58'
//         }
//       },
//       axisTick: {
//         show: false
//       },
//       data: ['精工车间', '机加工车间', '车船车间', '粗车车间', '车船车间']
//     },
//     yAxis: [
//       {
//         boundaryGap: false,
//         // splitNumber: 4,
//         type: 'value',
//         // max: 100,
//         axisLabel: {
//           textStyle: {
//             fontSize: 14,
//             color: colorY
//           }
//         },
//         nameTextStyle: {
//           color: '#fff',
//           fontSize: 14,
//           lineHeight: 40
//         },
//         splitLine: {
//           show: true,
//           lineStyle: {
//             color: '#032c58'
//           }
//         },
//         axisLine: {
//           show: true,
//           lineStyle: {
//             color: '#032c58'
//           }
//         },
//         axisTick: {
//           show: false
//         }
//       },
//       {
//         boundaryGap: false,
//         splitNumber: 4,
//         type: 'value',
//         axisLabel: {
//           textStyle: {
//             fontSize: 14,
//             color: colorY
//           }
//         },
//         nameTextStyle: {
//           color: '#fff',
//           fontSize: 14,
//           lineHeight: 40
//         },
//         splitLine: {
//           lineStyle: {
//             color: '#032c58'
//           }
//         },
//         axisLine: {
//           show: false,
//           lineStyle: {
//             color: '#032c58'
//           }
//         },
//         axisTick: {
//           show: false
//         }
//       }
//     ],
//     series: [
//       {
//         name: '完成数',
//         type: 'bar',
//         yAxisIndex: 0,
//         showSymbol: true,
//         showAllSymbol: true,
//         symbolSize: 4,
//         barWidth: 14,
//         zlevel: 1,
//         itemStyle: {
//           color: {
//             type: 'linear',
//             x: 0,
//             y: 0,
//             x2: 0,
//             y2: 1,
//             colorStops: [{
//               offset: 0,
//               color: `rgba(255,224,144,1)` // 0% å¤„的颜色
//             }, {
//               offset: 1,
//               color: `rgba(72,226,198,1)` // 100% å¤„的颜色
//             }]
//           }
//         },
//         label: {
//           show: false,
//           position: 'top',
//           distance: 10,
//           fontSize: 16,
//           fontFamily: 'DIN',
//           color: '#ffffff',
//           zlevel: 4,
//           z: 10,
//           formatter: '{c}%'
//         },
//         data: [560, 760, 850, 490, 380]
//       },
//       {
//         // å€¼åˆ†éš”
//         type: 'pictorialBar',
//         itemStyle: {
//           normal: {
//             color: '#0F375F'
//           }
//         },
//         symbolRepeat: 'fixed',
//         symbolMargin: 3,
//         symbol: 'rect',
//         symbolClip: true,
//         symbolSize: [14, 3],
//         symbolPosition: 'start',
//         symbolOffset: [0, -1],
//         // symbolBoundingData: this.total,
//         // data: [100, 100, 100, 100, 100],
//         data: [1000, 1000, 1000, 1000, 1000],
//         width: 25,
//         z: 0,
//         zlevel: 2
//       },
//       {
//         // è¾…助背景图形
//         name: '任务数',
//         type: 'bar', // pictorialBar
//         barWidth: '14',
//         barGap: '-100%',
//         itemStyle: {
//           normal: {
//             borderWidth: 0,
//             // color: 'rgba(146,158,48,0)'
//             color: 'rgba(146,158,48,0)'
//           },
//           barBorderRadius: 10
//         },
//         data: [800, 900, 1000, 600, 700],
//         z: 0,
//         zlevel: 0
//       },
//       {
//         name: '完成率',
//         type: 'line',
//         yAxisIndex: 1,
//         showSymbol: true,
//         showAllSymbol: true,
//         symbolSize: 6,
//         barWidth: 14,
//         zlevel: 3,
//         lineStyle: {
//           normal: {
//             width: 2,
//             color: `rgba(72,226,198)`
//           }
//         },
//         areaStyle: {
//           normal: {
//             color: {
//               type: 'linear',
//               x: 0,
//               y: 0,
//               x2: 0,
//               y2: 1,
//               colorStops: [
//                 {
//                   offset: 0,
//                   color: `rgba(72,226,198, 0.3)`// 0% å¤„的颜色
//                 },
//                 {
//                   offset: 1,
//                   color: `rgba(72,226,198, 0.2)` // 100% å¤„的颜色
//                 }
//               ],
//               globalCoord: false // ç¼ºçœä¸º false
//             } // æ¸å˜é¢œè‰²
//           }
//         },
//         itemStyle: {
//           normal: {
//             color: {
//               type: 'linear',
//               x: 0,
//               y: 0,
//               x2: 0,
//               y2: 1,
//               colorStops: [
//                 {
//                   offset: 0,
//                   color: `rgba(72,226,198, 1)`// 0% å¤„的颜色
//                 },
//                 {
//                   offset: 1,
//                   color: `rgba(72,226,198, 0.2)` // 100% å¤„的颜色
//                 }
//               ],
//               globalCoord: false // ç¼ºçœä¸º false
//             } // æ¸å˜é¢œè‰²
//           }
//         },
//         data: [70, 80, 90, 20, 30]
//       }
//     ]
//   }
//   return option
// }

export function cjzl03() {
  const data1 = [300, 100, 200, 200, 100]
  const data2 = [300, 200, 300, 300, 400]

  // let percent=[]

export function cjzl04(xData, data1, data2, data3) { // å³ä¾§
  const option = {
    backgroundColor: 'transparent',
    grid: {
      left: '2%',
      top: '10%',
      top: '12%',
      right: '2%',
      bottom: '20%',
      containLabel: true
@@ -3092,7 +2396,7 @@
      //   borderColor: '#fff'
      // }
      data: ['完成数', '任务数', '完成率'],
      textStyle: { fontSize: 14, color: '#fff' },
      textStyle: { fontSize: 16, color: '#fff' },
      itemWidth: 25,
      itemHeight: 10,
      itemGap: 15,
@@ -3105,7 +2409,7 @@
      axisLabel: {
        interval: 0,
        formatter: '{value}',
        fontSize: 14,
        fontSize: 16,
        margin: 20,
        textStyle: {
          color: colorX
@@ -3125,7 +2429,7 @@
      axisTick: {
        show: false
      },
      data: ['精工车间', '机加工车间', '装配车间', '粗车车间', '包装车间']
      data: xData
    },
    yAxis: [
      {
@@ -3135,8 +2439,8 @@
        // max: 100,
        axisLabel: {
          textStyle: {
            fontSize: 14,
            color: colorY
            fontSize: 16,
            color: colorX
          }
        },
        nameTextStyle: {
@@ -3167,13 +2471,13 @@
        type: 'value',
        axisLabel: {
          textStyle: {
            fontSize: 14,
            color: colorY
            fontSize: 16,
            color: colorX
          }
        },
        nameTextStyle: {
          color: '#fff',
          fontSize: 14,
          fontSize: 16,
          lineHeight: 40
        },
        splitLine: {
@@ -3195,69 +2499,42 @@
    ],
    series: [
      { // ä¸‰ä¸ªæœ€åº•ä¸‹çš„圆片
        'name': '',
        'name': '完成数',
        'type': 'pictorialBar',
        'symbolSize': [45, 25],
        'symbolOffset': [0, 10],
        'z': 12,
        color: `rgb(37,196,238)`,
        itemStyle: {
          opacity: 1,
          color: function(params) {
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#00EC28' // 0% å¤„的颜色
              color: `rgb(37,196,238)` // 0% å¤„的颜色
            }, {
              offset: 1,
              color: '#5DF076'// 100% å¤„的颜色
              color: `rgb(37,196,238)`// 100% å¤„的颜色
            }], false)
          }
          // color: function(params) {
          //   var a = params.name.slice(0, 2)
          //   if (a === '精工') {
          //     return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          //       offset: 0,
          //       color: '#FF9A22' // 0% å¤„的颜色
          //     }, {
          //       offset: 1,
          //       color: '#FFD56E'// 100% å¤„的颜色
          //     }], false)
          //   } else if (a === '机加' || a === '粗车') {
          //     return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          //       offset: 0,
          //       color: '#00EC28' // 0% å¤„的颜色
          //     }, {
          //       offset: 1,
          //       color: '#5DF076'// 100% å¤„的颜色
          //     }], false)
          //   } else if (a === '装配' || a === '包装') {
          //     return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          //       offset: 0,
          //       color: '#12B9DB' // 0% å¤„的颜色
          //     }, {
          //       offset: 1,
          //       color: '#6F8EF2'// 100% å¤„的颜色
          //     }], false)
          //   }
          // }
        },
        'data': [1, 1, 1, 1, 1]
      },

      // ä¸‹åŠæˆªæŸ±çŠ¶å›¾
      {
        name: '完成数',
        name: '',
        type: 'bar',
        barWidth: 45,
        barGap: '-100%',
        itemStyle: { // lenged文本
          opacity: 0.7,
          opacity: 1,
          color: function(params) {
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#00EC28' // 0% å¤„的颜色
              color: `rgb(35,131,180)` // 0% å¤„的颜色
            }, {
              offset: 1,
              color: '#5DF076'// 100% å¤„的颜色
              color: `rgb(35,131,180)`// 100% å¤„的颜色
            }], false)
          }
        },
@@ -3276,10 +2553,8 @@
          normal: {
            show: true,
            position: 'left',

            fontSize: 14,
            fontSize: 16,
            color: colorX,
            // offset: [-50, 15],
            zIndex: 10
          }
        },
@@ -3311,10 +2586,10 @@
          color: function(params) {
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#00EC28' // 0% å¤„的颜色
              color: `rgb(37,196,238)` // 0% å¤„的颜色
            }, {
              offset: 1,
              color: '#5DF076'// 100% å¤„的颜色
              color: `rgb(37,196,238)`// 100% å¤„的颜色
            }], false)
          }
        },
@@ -3336,8 +2611,7 @@
          normal: {
            show: true,
            position: 'top',

            fontSize: 14,
            fontSize: 16,
            color: colorX,
            offset: [0, -5]
          }
@@ -3357,7 +2631,7 @@
        lineStyle: {
          normal: {
            width: 2,
            color: `rgba(72, 226, 198)`
            color: `rgb(108,237,100)`
          }
        },
        // areaStyle: {
@@ -3393,11 +2667,11 @@
              colorStops: [
                {
                  offset: 0,
                  color: `rgba(72, 226, 198, 1)`// 0% å¤„的颜色
                  color: `rgb(108,237,100)`// 0% å¤„的颜色
                },
                {
                  offset: 1,
                  color: `rgba(72, 226, 198, 0.2)` // 100% å¤„的颜色
                  color: `rgb(108,237,100)` // 100% å¤„的颜色
                }
              ],
              globalCoord: false // ç¼ºçœä¸º false
@@ -3416,7 +2690,7 @@
            // offset: [0, -5]
          }
        },
        data: [100, 50, 66.7, 66.7, 25]
        data: data3
      }
    ]
  }

 src/views/kanbanManager/all.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,12 @@
<!--总的综合看板-->
<template />

<script>
export default {
  name: 'All'
}
</script>

<style scoped>

</style>

 src/views/kanbanManager/cjzl.vue

@@ -2,35 +2,32 @@
  <div>
    <div class="kb_dashboard" style="display:flex;flex-direction: column;justify-content: space-between">

      <!--    æ˜Ÿç©ºèƒŒæ™¯-->
      <!--      <div ref="starsRef" class="stars">-->
      <!--        <div v-for="(item, index) in starsCount" :key="index" class="star" />-->
      <!--      </div>-->
      <div class="kb_backgroundCustom" />

      <div class="kb_header">
        <div class="flex_c_c kb_header_text">
          <div id="topBarLeft" style="width:600px;height:100%" />
          è½¦é—´è´¨é‡æ•°å­—化看板
          <div id="topBarRight" style="width:600px;height:100%;transform:rotate(180deg);" />
        <div class="kb_headTime" style="top: 35px;left:  20px">
          <span>浙江正清和日用制品有限公司</span>
        </div>

        <div class="kb_headTime" style="left: 85px">
          <span>浙江新凯迪数字科技股份有限公司</span>
        <div class="kb_headTime kb_header_text" style="top: 35px;left:  800px">
          <span>车间质量数字化看板</span>
        </div>

        <div class="kb_headTime">
        <div class="kb_headTime" style="top: 35px;right:  25px">
          <span>{{ headTime }}</span>
        </div>
      </div>
      <div style=" padding:5px 20px 20px 20px;height: 980px;flex-direction: column;justify-content: space-between">
      <div
        style=" padding:5px 20px 20px 20px;z-index:2;height: 950px;flex-direction: column;justify-content: space-between;"
      >
        <!--         ä¸Šé¢éƒ¨åˆ†-->
        <div>
        <div style="">
          <div class="smallTitle">
            <svg-icon icon-class="blcs" class="svg_class" />
            æ—¥ä¸è‰¯æ¬¡æ•°
            å‘¨ä¸è‰¯æ¬¡æ•°
          </div>
          <div class="lineContent horn" style="height: 250px;display: flex;justify-content: space-between">
            <div id="cjzl01" class="flex_c_c" style="width: 300px;height:100%" />
            <div id="cjzl01" class="flex_c_c" style="width: 300px;height:100%;" />
            <div id="cjzl02_1" class="flex_c_c" style="width: 300px;height:100%" />
            <div id="cjzl02_2" class="flex_c_c" style="width: 300px;height:100%" />
            <div id="cjzl02_3" class="flex_c_c" style="width: 300px;height:100%" />
@@ -46,7 +43,7 @@
              å‘¨ä¸è‰¯æ•°
            </div>
            <div class="lineContent horn" style="height: 250px;display: flex;justify-content: space-between">
              <div id="cjzl04" class="flex_c_c" style="width: 920px;height:100%" />
              <div id="cjzl03" class="flex_c_c" style="width: 920px;height:100%" />
            </div>
          </div>
          <div>
@@ -55,7 +52,7 @@
              å‘¨å®Œæˆæ•°ï¼ˆçŽ‡ï¼‰
            </div>
            <div class="lineContent horn" style="height: 250px;display: flex;justify-content: space-between">
              <div id="cjzl03" class="flex_c_c" style="width: 920px;height:100%" />
              <div id="cjzl04" class="flex_c_c" style="width: 920px;height:100%" />
            </div>
          </div>

@@ -66,7 +63,7 @@
            <svg-icon icon-class="cjrw" class="svg_class" />
            è½¦é—´ä»»åŠ¡å®Œæˆæƒ…况
          </div>
          <div class="lineContent horn" style="height: 310px;display: flex;justify-content: space-between">
          <div class="lineContent horn" style="height: 280px;display: flex;justify-content: space-between">
            <el-table
              ref="tableDataRightTopRef"
              :data="tableDataRightTop"
@@ -74,6 +71,7 @@
              style="width: 100%;"
              :header-cell-style="headerCellStyle"
              :cell-style="cellStyle"
              height="275"
            >
              <!--              height=""-->
              <el-table-column
@@ -82,39 +80,43 @@
                width="60"
              />
              <el-table-column
                prop="cjmc"
                prop="wkshp_name"
                width="220"
                label="车间名称"
              />
              <el-table-column
                prop="gdh"
                prop="wo_code"
                width="280"
                label="工单号"
              />
              <el-table-column
                prop="cpmc"
                prop="partname"
                width="280"
                label="产品名称"
              />
              <el-table-column
                prop="cpgg"
                prop="partspec"
                width="280"
                label="产品规格"
              />
              >
                <template slot-scope="{row}">
                  {{ row.partspec ? row.partspec : '/' }}
                </template>
              </el-table-column>
              <el-table-column
                prop="rwsl"
                prop="plan_qty"
                width="220"
                label="任务数"
              />
              <el-table-column
                prop="hgsl"
                prop="good_qty"
                width="220"
                label="合格数量"
              />
              <el-table-column
                prop="blsl"
                prop="radio"
                width="314"
                label="不良数量"
                label="完成率(%)"
              />
            </el-table>
          </div>
@@ -126,25 +128,21 @@

<script>
import './kbCommon.css'
import { cjzl01, cjzl02, cjzl03, cjzl04, kbTop, loadEcharts } from '@/utils/myEcharts'
import { QCBadCenterLeftWeek, QCBadCenterRightWeek, QCBadTop, ShopSearch } from '@/api/kanbanManager'
import { cjzl01, cjzl02, cjzl04, cjzl03, loadEcharts } from '@/utils/myEcharts'
import {
  QCBadBottomWeek,
  QCBadCenterLeftWeek,
  QCBadCenterRightWeek,
  QCBadTop,
  ShopSearch
} from '@/api/kanbanManager'

export default {
  name: 'Cjsc',
  data() {
    return {
      headTime: '',
      tableDataRightTop: [
        { cjmc: '精工车间', gdh: 'MO2023-09-12', cpmc: '电池包1', cpgg: '23款手动精模', rwsl: '1000', hgsl: '900', blsl: '100' },
        { cjmc: '装配车间', gdh: 'MO2023-09-12', cpmc: '电池包1', cpgg: '23款手动精模', rwsl: '1000', hgsl: '900', blsl: '100' },
        { cjmc: '精工车间', gdh: 'MO2023-09-12', cpmc: '电池包1', cpgg: '23款手动精模', rwsl: '1000', hgsl: '900', blsl: '100' },
        { cjmc: '装配车间', gdh: 'MO2023-09-12', cpmc: '电池包1', cpgg: '23款手动精模', rwsl: '1000', hgsl: '900', blsl: '100' },
        { cjmc: '机加工车间', gdh: 'MO2023-09-12', cpmc: '电池包1', cpgg: '23款手动精模#30', rwsl: '1000', hgsl: '900', blsl: '100' },
        { cjmc: '机加工车间', gdh: 'MO2023-09-12', cpmc: '电池包1', cpgg: '23款手动精模#30', rwsl: '1000', hgsl: '900', blsl: '100' },
        { cjmc: '机加工车间', gdh: 'MO2023-09-12', cpmc: '电池包1', cpgg: '23款手动精模#30', rwsl: '1000', hgsl: '900', blsl: '100' },
        { cjmc: '机加工车间', gdh: 'MO2023-09-12', cpmc: '电池包1', cpgg: '23款手动精模#30', rwsl: '1000', hgsl: '900', blsl: '100' },
        { cjmc: '机加工车间', gdh: 'MO2023-09-12', cpmc: '电池包1', cpgg: '23款手动精模#30', rwsl: '1000', hgsl: '900', blsl: '100' }
      ],
      tableDataRightTop: [],
      wkshopArr: [],

      cjzl01Data: [],
@@ -158,30 +156,35 @@
      cjzl02_4Data: [],
      cjzl02_5Title: '',
      cjzl02_5Data: [],
      starsCount: 800, // æ˜Ÿæ˜Ÿæ•°é‡
      distance: 900 // é—´è·
      cjzl03_xData: [],
      cjzl03_yData: [],
      legendData: [],
      cjzl04Data: []
    }
  },
  created() {
    setInterval(this.getNowTime, 1000)

    // ä¸¤å°æ—¶çœ‹æ¿åˆ·æ–°ä¸€æ¬¡
    // // ä¸¤å°æ—¶çœ‹æ¿åˆ·æ–°ä¸€æ¬¡
    setInterval(() => {
      window.location.reload()
    }, 1000 * 60 * 120)
  },
  mounted() {
    this.getTopBar()

    this.getAllApi()

    // this.setStarsRef()
  },
  methods: {
    async getAllApi() {
      const { data: res } = await ShopSearch()
      this.wkshopArr = res
      const temp = ['001', 'CJ001', '006', 'ZS001', '002']
      // const temp = ['001', 'CJ001', '006', 'ZS001', '002']
      const temp = this.wkshopArr.map(i => i.org_code)

      temp.forEach(i => {
        const aa = this.wkshopArr.find(j => j.org_code === i).org_name
        this.legendData.push(aa)
      })

      const { data: res2 } = await QCBadTop({ wkshopcode: temp.join(',') })
      for (const res2Key in res2) {
        if (res2Key === 'ALL') {
@@ -238,46 +241,199 @@
          })
        }
      }

      const { data: res3 } = await QCBadCenterLeftWeek({ wkshopcode: temp.join(',') })
      console.log(res3) // è¿™ä¸ªæ˜Žå¤©å†™

      const { data: res4 } = await QCBadCenterRightWeek({ wkshopcode: temp.join(',') })
      console.log(res4)

      this.getEcharts()
    },
    setStarsRef() {
      const starNodes = Array.from(this.$refs.starsRef.children)
      starNodes.forEach(item => {
        const speed = 0.2 + Math.random() * 1
        const thisDistance = this.distance + Math.random() * 300
        item.style.transformOrigin = `0 0 ${thisDistance}px`
        item.style.transform = `
        translate3d(0,0,-${thisDistance}px)
        rotateY(${Math.random() * 360}deg)
        rotateX(${Math.random() * -50}deg)
        scale(${speed},${speed})`
      })
    },
    // èŽ·å–Echarts
    getEcharts() {
      loadEcharts('cjzl01', cjzl01(this.cjzl01Data))

      loadEcharts('cjzl02_1', cjzl02(this.cjzl02_1Title, this.cjzl02_1Data))
      loadEcharts('cjzl02_2', cjzl02(this.cjzl02_2Title, this.cjzl02_2Data))
      loadEcharts('cjzl02_3', cjzl02(this.cjzl02_3Title, this.cjzl02_3Data))
      loadEcharts('cjzl02_4', cjzl02(this.cjzl02_4Title, this.cjzl02_4Data))
      loadEcharts('cjzl02_5', cjzl02(this.cjzl02_5Title, this.cjzl02_5Data))
      setInterval(() => {
        QCBadTop({ wkshopcode: temp.join(',') }).then(res2 => {
          for (const res2Key in res2.data) {
            if (res2Key === 'ALL') {
              this.cjzl01Data = res2.data[res2Key].map(i => {
                return {
                  name: i.name,
                  value: i.cont
                }
              })
            }
            if (res2Key === temp[0]) {
              this.cjzl02_1Title = this.wkshopArr.find(i => i.org_code === res2Key).org_name
              this.cjzl02_1Data = res2.data[res2Key].map(i => {
                return {
                  name: i.name,
                  value: i.cont
                }
              })
            }
            if (res2Key === temp[1]) {
              this.cjzl02_2Title = this.wkshopArr.find(i => i.org_code === res2Key).org_name
              this.cjzl02_2Data = res2.data[res2Key].map(i => {
                return {
                  name: i.name,
                  value: i.cont
                }
              })
            }
            if (res2Key === temp[2]) {
              this.cjzl02_3Title = this.wkshopArr.find(i => i.org_code === res2Key).org_name
              this.cjzl02_3Data = res2.data[res2Key].map(i => {
                return {
                  name: i.name,
                  value: i.cont
                }
              })
            }
            if (res2Key === temp[3]) {
              this.cjzl02_4Title = this.wkshopArr.find(i => i.org_code === res2Key).org_name
              this.cjzl02_4Data = res2.data[res2Key].map(i => {
                return {
                  name: i.name,
                  value: i.cont
                }
              })
            }
            if (res2Key === temp[4]) {
              this.cjzl02_5Title = this.wkshopArr.find(i => i.org_code === res2Key).org_name
              this.cjzl02_5Data = res2.data[res2Key].map(i => {
                return {
                  name: i.name,
                  value: i.cont
                }
              })
            }
          }
        })
        loadEcharts('cjzl01', cjzl01(this.cjzl01Data))
        loadEcharts('cjzl02_1', cjzl02(this.cjzl02_1Title, this.cjzl02_1Data))
        loadEcharts('cjzl02_2', cjzl02(this.cjzl02_2Title, this.cjzl02_2Data))
        loadEcharts('cjzl02_3', cjzl02(this.cjzl02_3Title, this.cjzl02_3Data))
        loadEcharts('cjzl02_4', cjzl02(this.cjzl02_4Title, this.cjzl02_4Data))
        loadEcharts('cjzl02_5', cjzl02(this.cjzl02_5Title, this.cjzl02_5Data))
      }, 1000 * 30)

      loadEcharts('cjzl03', cjzl03())
      loadEcharts('cjzl04', cjzl04())
      const { data: res3 } = await QCBadCenterLeftWeek({ wkshopcode: temp.join(',') })// å·¦ä¾§
      for (const res3Key in res3) {
        if (res3Key === temp[0]) {
          this.cjzl03_xData = res3[res3Key].map(i => i.click_date)

          this.cjzl03_yData.push(res3[res3Key].map(i => i.count))
        }
        if (res3Key === temp[1]) {
          this.cjzl03_yData.push(res3[res3Key].map(i => i.count))
        }
        if (res3Key === temp[2]) {
          this.cjzl03_yData.push(res3[res3Key].map(i => i.count))
        }
        if (res3Key === temp[3]) {
          this.cjzl03_yData.push(res3[res3Key].map(i => i.count))
        }
        if (res3Key === temp[4]) {
          this.cjzl03_yData.push(res3[res3Key].map(i => i.count))
        }
      }
      loadEcharts('cjzl03', cjzl03(this.cjzl03_xData, this.legendData, this.cjzl03_yData))// å·¦ä¾§
      setInterval(() => {
        QCBadCenterLeftWeek({ wkshopcode: temp.join(',') }).then(res3 => {
          this.cjzl03_xData = []
          this.cjzl03_yData = []
          for (const res3Key in res3.data) {
            if (res3Key === temp[0]) {
              this.cjzl03_xData = res3.data[res3Key].map(i => i.click_date)

              this.cjzl03_yData.push(res3.data[res3Key].map(i => i.count))
            }
            if (res3Key === temp[1]) {
              this.cjzl03_yData.push(res3.data[res3Key].map(i => i.count))
            }
            if (res3Key === temp[2]) {
              this.cjzl03_yData.push(res3.data[res3Key].map(i => i.count))
            }
            if (res3Key === temp[3]) {
              this.cjzl03_yData.push(res3.data[res3Key].map(i => i.count))
            }
            if (res3Key === temp[4]) {
              this.cjzl03_yData.push(res3.data[res3Key].map(i => i.count))
            }
          }
          loadEcharts('cjzl03', cjzl03(this.cjzl03_xData, this.legendData, this.cjzl03_yData))// å·¦ä¾§
        })
      }, 1000 * 40)

      const { data: res4 } = await QCBadCenterRightWeek({ wkshopcode: temp.join(',') }) // å³ä¾§
      let a = []
      let b = []
      let c = []
      for (const res4Key in res4) {
        a.push(res4[res4Key].length > 0 ? res4[res4Key][0].good_qty : 0)
        b.push(res4[res4Key].length > 0 ? res4[res4Key][0].plan_qty : 0)
        c.push(res4[res4Key].length > 0 ? res4[res4Key][0].radio : 0)
      }
      this.cjzl04Data.push(a, b, c)
      loadEcharts('cjzl04', cjzl04(this.legendData, this.cjzl04Data[0], this.cjzl04Data[1], this.cjzl04Data[2]))// å³ä¾§

      setInterval(() => {
        QCBadCenterRightWeek({ wkshopcode: temp.join(',') }).then(res4 => {
          a = []
          b = []
          c = []
          this.cjzl04Data = []
          for (const res4Key in res4.data) {
            a.push(res4.data[res4Key].length > 0 ? res4.data[res4Key][0].good_qty : 0)
            b.push(res4.data[res4Key].length > 0 ? res4.data[res4Key][0].plan_qty : 0)
            c.push(res4.data[res4Key].length > 0 ? res4.data[res4Key][0].radio : 0)
          }
          this.cjzl04Data.push(a, b, c)
          loadEcharts('cjzl04', cjzl04(this.legendData, this.cjzl04Data[0], this.cjzl04Data[1], this.cjzl04Data[2]))// å³ä¾§
        })
      }, 1000 * 50)

      this.$nextTick(() => {
        this.getQCBadBottomWeek()
      })

      // await this.getEcharts()
    },

    // èŽ·å–topEcharts
    getTopBar() {
      loadEcharts('topBarLeft', kbTop())
      loadEcharts('topBarRight', kbTop())
    // èŽ·å–Echarts
    getEcharts() {
      // loadEcharts('cjzl01', cjzl01(this.cjzl01Data))

      // loadEcharts('cjzl02_1', cjzl02(this.cjzl02_1Title, this.cjzl02_1Data))
      // loadEcharts('cjzl02_2', cjzl02(this.cjzl02_2Title, this.cjzl02_2Data))
      // loadEcharts('cjzl02_3', cjzl02(this.cjzl02_3Title, this.cjzl02_3Data))
      // loadEcharts('cjzl02_4', cjzl02(this.cjzl02_4Title, this.cjzl02_4Data))
      // loadEcharts('cjzl02_5', cjzl02(this.cjzl02_5Title, this.cjzl02_5Data))

      // loadEcharts('cjzl04', cjzl04(this.legendData, this.cjzl04Data[0], this.cjzl04Data[1], this.cjzl04Data[2]))// å³ä¾§
      // loadEcharts('cjzl03', cjzl03(this.cjzl03_xData, this.legendData, this.cjzl03_yData))// å·¦ä¾§
    },

    getQCBadBottomWeek() {
      const data = {
        wkshopcode: this.wkshopArr.map(i => i.org_code).join(',')
      }
      QCBadBottomWeek(data).then(res => {
        this.tableDataRightTop = res.data

        const divData = this.$refs.tableDataRightTopRef.bodyWrapper
        const temp = setInterval(() => {
          // å…ƒç´ è‡ªå¢žè·ç¦»é¡¶éƒ¨1像素
          divData.scrollTop += 1
          if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
            // é‡ç½®table距离顶部距离
            divData.scrollTop = 0
            QCBadBottomWeek(data).then(res => {
              this.tableDataRightTop = res.data
              if (this.tableDataRightTop.length > 7) {
                clearInterval(temp)
                this.getQCBadBottomWeek()
              }
            })
          }
        }, this.tableDataRightTop.length <= 7 ? 1000 * 10 : 300)
      })
    },
    // èŽ·å–当前时间
    getNowTime() {
@@ -297,46 +453,25 @@
    },
    headerCellStyle() {
      return {
        // backgroundColor: 'rgb(30 ,33, 46)',
        backgroundColor: '#000',
        backgroundColor: 'transparent ',
        padding: '10px 0',
        textAlign: 'center',
        color: '#07acc2',
        border: 'none'
        border: 'none',
        fontSize: '20px'
      }
    },
    cellStyle() {
      return {
        padding: '7px 0',
        textAlign: 'center',
        // backgroundColor: 'rgba(30, 33, 46)',
        backgroundColor: '#000',
        // backgroundColor: 'transparent',
        color: '#fff',
        border: 'none'
      }
    },
    headerCellStyleCenter() {
      return {
        // backgroundColor: 'rgb(30 ,33, 46)',
        backgroundColor: '#000',
        padding: '10px 0',
        textAlign: 'center',
        color: '#07acc2',
        border: 'none',
        fontSize: '20px'
      }
    },
    cellStyleCenter() {
      return {
        padding: '7.5px 0',
        textAlign: 'center',
        backgroundColor: '#000',
        color: '#fff',
        backgroundColor: 'transparent ',
        color: '#c7e7ff',
        border: 'none',
        fontSize: '20px'
      }
    }

  }

}
@@ -346,7 +481,7 @@
$main_color: #09d8f2;
$color01: #00FFFF;
.tableData {
  background: #000;
  background: transparent;
}

.el-table::before {
@@ -363,39 +498,15 @@
  }
}

</style>

<!--星空-->
<style lang="css" scoped>
@keyframes rotate {
  0% {
    transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
  }
  100% {
    transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
  }
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  /* width: 0;宽度为0暗藏 */
  width: 0;
  background: transparent;
}

.stars {
  transform: perspective(500px);
  transform-style: preserve-3d;
  position: absolute;
  perspective-origin: 50% 100%;
  left: 45%;
  animation: rotate 90s infinite linear;
  bottom: 0;
  z-index: 102;
}

.star {
  width: 2px;
  height: 2px;
  /*background: #f7f7b6;*/
  background: #8edffc;
  position: absolute;
  left: 0;
  top: 0;
  backface-visibility: hidden;
  z-index: 102;
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
  background-color: transparent;
}
</style>

 src/views/kanbanManager/ckgl.vue

@@ -2,34 +2,29 @@
  <div>
    <div class="kb_dashboard">

      <!--    æ˜Ÿç©ºèƒŒæ™¯-->
      <div ref="starsRef" class="stars">
        <div v-for="(item, index) in starsCount" :key="index" class="star" />
      </div>

      <div class="kb_backgroundCustom" />
      <div class="kb_header">
        <div class="flex_c_c kb_header_text">
          <div id="topBarLeft" style="width:600px;height:100%" />
          ä»“库管理数字化看板
          <div id="topBarRight" style="width:600px;height:100%;transform:rotate(180deg);" />
        <div class="kb_headTime" style="top: 35px;left:  20px">
          <span>浙江正清和日用制品有限公司</span>
        </div>

        <div class="kb_headTime" style="left: 85px">
          <span>浙江新凯迪数字科技股份有限公司</span>
        <div class="kb_headTime kb_header_text" style="top: 35px;left:  800px">
          <span>仓库管理数字化看板</span>
        </div>

        <div class="kb_headTime">
        <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: 980px">
        <div style="width: 1350px; " class="flex_c_b">

      <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 class="lineContent horn" style="height: 435px">
            <div class="lineContent horn" style="height: 410px">
              <el-table
                ref="tableDataTopRef"
                :data="tableDataTop"
@@ -37,7 +32,7 @@
                class="tableData"
                :header-cell-style="headerCellStyleCenter"
                :cell-style="cellStyleCenter"
                height="430"
                height="405"
              >
                <el-table-column
                  prop="voucherdate"
@@ -77,15 +72,15 @@
                    <div v-else>/</div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="materiel_code"
                  label="产品编号"
                  width="136"
                >
                  <template slot-scope="{row}">
                    <div class="ellipsis">{{ row.materiel_code }}</div>
                  </template>
                </el-table-column>
                <!--                <el-table-column-->
                <!--                  prop="materiel_code"-->
                <!--                  label="产品编号"-->
                <!--                  width="136"-->
                <!--                >-->
                <!--                  <template slot-scope="{row}">-->
                <!--                    <div class="ellipsis">{{ row.materiel_code }}</div>-->
                <!--                  </template>-->
                <!--                </el-table-column>-->
                <el-table-column
                  prop="materiel_name"
                  label="产品名称"
@@ -95,16 +90,16 @@
                    <div class="ellipsis">{{ row.materiel_name }}</div>
                  </template>
                </el-table-column>
                <!--                  <el-table-column-->
                <!--                    prop="specification"-->
                <!--                    label="规格型号"-->
                <!--                    width="128"-->
                <!--                  >-->
                <!--                    <template slot-scope="{row}">-->
                <!--                      <div v-if="row.specification" class="ellipsis">{{ row.specification }}</div>-->
                <!--                      <div v-else>/</div>-->
                <!--                    </template>-->
                <!--                  </el-table-column>-->
                <el-table-column
                  prop="specification"
                  label="规格型号"
                  width="136"
                >
                  <template slot-scope="{row}">
                    <div v-if="row.specification" class="ellipsis">{{ row.specification }}</div>
                    <div v-else>/</div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="stck_name"
                  label="预入仓库"
@@ -158,12 +153,12 @@
              </el-table>
            </div>
          </div>
          <div style="height: 470px;">
          <div style="height: 470px;margin-top: 30px;">
            <div class="smallTitle">
              <svg-icon icon-class="cpdfh" class="svg_class" />
              äº§å“å¾…发货
            </div>
            <div class="lineContent horn" style="height: 435px">
            <div class="lineContent horn" style="height: 410px">
              <el-table
                ref="tableDataBottomRef"
                :data="tableDataBottom"
@@ -171,11 +166,11 @@
                class="tableData"
                :header-cell-style="headerCellStyleCenter"
                :cell-style="cellStyleCenter"
                height="430"
                height="405"
              >
                <el-table-column
                  prop="voucherdate"
                  label="单据日期"
                  label="销售订单号"
                  width="131"
                >
                  <template slot-scope="{row}">
@@ -195,7 +190,7 @@
                <el-table-column
                  prop="customename"
                  label="客户"
                  width="388"
                  width="288"
                >
                  <template slot-scope="{row}">
                    <div v-if="row.customename" class="ellipsis">{{ row.customename }}</div>
@@ -236,16 +231,16 @@
                    <div v-if="row.materiel_name" class="ellipsis">{{ row.materiel_name }}</div>
                  </template>
                </el-table-column>
                <!--                  <el-table-column-->
                <!--                    prop="specification"-->
                <!--                    label="规格型号"-->
                <!--                    width="100"-->
                <!--                  >-->
                <!--                    <template slot-scope="{row}">-->
                <!--                      <div v-if="row.specification" class="ellipsis">{{ row.specification }}</div>-->
                <!--                      <div v-else>/</div>-->
                <!--                    </template>-->
                <!--                  </el-table-column>-->
                <el-table-column
                  prop="specification"
                  label="规格型号"
                  width="100"
                >
                  <template slot-scope="{row}">
                    <div v-if="row.specification" class="ellipsis">{{ row.specification }}</div>
                    <div v-else>/</div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="quantity"
                  label="数量"
@@ -300,23 +295,23 @@
          </div>

        </div>
        <div style="width: 500px;" class="flex_c_b">
        <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 class="lineContent horn" style="height: 435px">
            <div class="lineContent horn" style="height: 410px">
              <div id="bar03" style="width: 100%;height:100%; " />
              <!--/*              <div id="bar03" style="width: 100%;height:100%;margin-left: -25px;margin-top: -10px" />*/-->
            </div>
          </div>
          <div style="height: 470px;">
          <div style="height: 470px;margin-top: 30px;">
            <div class="smallTitle">
              <svg-icon icon-class="ph" class="svg_class" />
              åŽŸææ–™åº“存量排行Top5
            </div>
            <div class="lineContent horn" style="height: 435px">
            <div class="lineContent horn" style="height: 410px">
              <div id="bar04" style="width: 100%;height:100%;" />
              <!--              <div id="bar04" style="width: 100%;height:100%;margin-left: -25px;margin-top: -10px" />-->
            </div>
@@ -377,12 +372,9 @@
    window.addEventListener('offline', this.updateOnlineStatus)
    this.updateOnlineStatus({ type: this.onLine ? 'online' : 'offline', isFirst: true })

    this.getTopBar()

    this.getWareHouseTopLeftData()
    this.getWareHouseTopBottomData()
    this.getEcharts()
    this.setStarsRef()
  },
  beforeDestroy() {
    window.removeEventListener('online', this.updateOnlineStatus)
@@ -411,24 +403,7 @@
        }
      }
    },
    setStarsRef() {
      const starNodes = Array.from(this.$refs.starsRef.children)
      starNodes.forEach(item => {
        const speed = 0.2 + Math.random() * 1
        const thisDistance = this.distance + Math.random() * 300
        item.style.transformOrigin = `0 0 ${thisDistance}px`
        item.style.transform = `
        translate3d(0,0,-${thisDistance}px)
        rotateY(${Math.random() * 360}deg)
        rotateX(${Math.random() * -50}deg)
        scale(${speed},${speed})`
      })
    },
    // èŽ·å–topEcharts
    getTopBar() {
      loadEcharts('topBarLeft', kbTop())
      loadEcharts('topBarRight', kbTop())
    },

    // èŽ·å–左上table数据
    getWareHouseTopLeftData() {
      WareHouseTopLeftData().then(res => {
@@ -525,8 +500,7 @@
    },
    headerCellStyleCenter() {
      return {
        // backgroundColor: 'rgb(30 ,33, 46)',
        backgroundColor: '#000',
        backgroundColor: 'transparent ',
        padding: '10px 0',
        textAlign: 'center',
        color: '#07acc2',
@@ -538,8 +512,8 @@
      return {
        padding: '7.5px 0',
        textAlign: 'center',
        backgroundColor: '#000',
        color: '#fff',
        backgroundColor: 'transparent ',
        color: '#c7e7ff',
        border: 'none',
        fontSize: '18px'
      }
@@ -553,9 +527,13 @@
$main_color:#09d8f2;
$color01: #00FFFF;
.tableData{
  background: #000;
  background: transparent;
}

::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
  background-color: transparent;
}
.el-table__empty-text{
  color: $main_color;
}
@@ -576,37 +554,3 @@
}
</style>

<!--星空-->
<style lang="css" scoped>
@keyframes rotate {
  0% {
    transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
  }
  100% {
    transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
  }
}

.stars {
  transform: perspective(500px);
  transform-style: preserve-3d;
  position: absolute;
  perspective-origin: 50% 100%;
  left: 45%;
  animation: rotate 90s infinite linear;
  bottom: 0;
  z-index: 102;
}

.star {
  width: 2px;
  height: 2px;
  /*background: #f7f7b6;*/
  background: #8edffc;
  position: absolute;
  left: 0;
  top: 0;
  backface-visibility: hidden;
  z-index: 102;
}
</style>

 src/views/kanbanManager/kbCommon.css

@@ -14,6 +14,13 @@
  overflow: hidden;
}

.kb_backgroundCustom {
  position: absolute;
  width: 1920px;
  height: 1080px;
  background: url('../../assets/images/background001.jpg') no-repeat;
}

.kb_header {
  /*background-color: #123;*/
  height: 90px;
@@ -27,7 +34,7 @@
  font-weight: bolder;
}

.kb_title_text{
.kb_title_text {
  font-weight: bolder;
  font-size: 24px;
}
@@ -69,6 +76,7 @@
  justify-content: space-evenly;
  /*align-content: center;*/
}

.flex_c_b {
  display: flex;
  flex-direction: column;
@@ -99,6 +107,7 @@
.kb_mt10 {
  margin-top: 10px;
}

/*公告样式*/
.MarqueeTipsContentClass {
  color: #00ffff;
@@ -108,7 +117,7 @@
  font-size: 32px;
  z-index: 2;
  position: absolute;
  top:80px;
  top: 80px;
}

/*
@@ -124,7 +133,7 @@
/*scrollbar END*/


.smallTitle{
.smallTitle {
  height: 35px;
  display: flex;
  color: #00ffff;
@@ -132,11 +141,10 @@
  /*align-content: flex-start;*/
}

.svg_class{
.svg_class {
  margin-right: 10px;
  font-size: 28px;
}



.lineContent {

 src/views/kanbanManager/zhkb.vue

@@ -1,29 +1,26 @@
<template>
  <div>
    <div class="kb_dashboard">
      <!--    æ˜Ÿç©ºèƒŒæ™¯-->
      <div ref="starsRef" class="stars">
        <div v-for="(item, index) in starsCount" :key="index" class="star" />
      </div>

      <div class="kb_backgroundCustom" />

      <div class="kb_header">
        <div class="flex_c_c kb_header_text">
          <div id="topBarLeft" style="width:600px;height:100%" />
          è½¦é—´ç»¼åˆæ•°å­—化看板
          <div id="topBarRight" style="width:600px;height:100%;transform:rotate(180deg);" />
        <div class="kb_headTime" style="top: 35px;left:  20px">
          <span>浙江正清和日用制品有限公司</span>
        </div>

        <div class="kb_headTime" style="left: 85px">
          <span>浙江新凯迪数字科技股份有限公司</span>
        <div class="kb_headTime kb_header_text" style="top: 35px;" :style="{left:ShopArr[0]==='202'?'780px':'800px'}">
          <span>{{ title }}数字化看板</span>
        </div>

        <div class="kb_headTime">
        <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">

      <div style="display: flex;justify-content: space-between;padding:0 20px 20px 20px;">
        <!--       å·¦è¾¹-->
        <div style="width: 1400px ;height: 969px;" class="flex_c_b">
        <div style="width: 1400px ;height: 950px;z-index: 2;margin-top:50px;justify-content:flex-start" class="flex_c_b">
          <div>
            <div class="smallTitle">
              <svg-icon icon-class="cxjg" class="svg_class" />
@@ -102,12 +99,12 @@
            </div>

          </div>
          <div>
          <div style="margin-top: 20px;">
            <div class="smallTitle">
              <svg-icon icon-class="cxmc" class="svg_class" />
              äº§çº¿åŠ å·¥ä»»åŠ¡
            </div>
            <div class="lineContent horn">
            <div class="lineContent horn" style="height: 400px;">
              <el-table
                ref="tableDataLeftBottomRef"
                :data="tableDataLeftBottom"
@@ -115,7 +112,7 @@
                style="width: 100%;"
                :header-cell-style="headerCellStyle"
                :cell-style="cellStyle"
                height="428"
                height="390"
              >
                <el-table-column
                  prop="RowNum"
@@ -171,21 +168,21 @@
                <el-table-column
                  prop="plan_qty"
                  label="任务数量"
                  width="105"
                  width="106"
                />
                <el-table-column
                  prop="good_qty"
                  label="完工数量"
                  width="105"
                  width="106"
                />
                <el-table-column
                  prop="ng_qty"
                  label="不良数量"
                  width="105"
                  width="106"
                />
                <el-table-column
                  label="完成率"
                  width="105"
                  width="106"
                >
                  <template slot-scope="{row}">
                    <div>{{ parseFloat((row.good_qty * 100 / row.plan_qty).toFixed(2)) }}%</div>
@@ -215,7 +212,7 @@
          </div>
        </div>
        <!--        å³è¾¹-->
        <div style="width: 450px;height: 969px;" class="flex_c_b">
        <div style="width: 450px;height: 950px;z-index: 2;margin-top:50px;justify-content:flex-start" class="flex_c_b">
          <div>
            <div class="smallTitle">
              <svg-icon icon-class="drwg" class="svg_class" />
@@ -264,12 +261,12 @@
            </div>

          </div>
          <div>
          <div style="margin-top: 20px;">
            <div class="smallTitle">
              <svg-icon icon-class="top5" class="svg_class" />
              ä¸€å‘¨ä¸è‰¯Top5
            </div>
            <div class="lineContent horn">
            <div class="lineContent horn" style="height: 400px;">
              <div id="bar01" class="flex_c_c" style="width: 100%;height:100%" />
            </div>

@@ -306,14 +303,26 @@
      lineContent3: [],
      ShopArr: [], // è½¦é—´ç¼–码数组

      starsCount: 800, // æ˜Ÿæ˜Ÿæ•°é‡
      distance: 900 // é—´è·

      codeArr: [
        { code: '202', name: '机加工车间' },
        { code: '205', name: '包装车间' },
        { code: '204', name: '喷涂车间' },
        { code: '203', name: '抛光车间' },
        { code: '201', name: '压铸车间' }
      ],
      title: '车间综合'
    }
  },
  created() {
    setInterval(this.getNowTime, 1000)

    // this.getShopSearch()
    let code = ''
    if (window.location.hash.indexOf('?') !== -1) {
      code = window.location.hash.split('?')[1].split('=')[1]
      this.title = this.codeArr.find(i => i.code === code).name
      this.ShopArr = [code]
    }
    // ä¸¤å°æ—¶çœ‹æ¿åˆ·æ–°ä¸€æ¬¡
    setInterval(() => {
      window.location.reload()
@@ -324,17 +333,19 @@
    window.addEventListener('online', this.updateOnlineStatus)
    window.addEventListener('offline', this.updateOnlineStatus)
    this.updateOnlineStatus({ type: this.onLine ? 'online' : 'offline', isFirst: true })

    this.getTopBar()

    this.getShopSearch()
    this.setStarsRef()
    this.getAllApi()
  },
  beforeDestroy() {
    window.removeEventListener('online', this.updateOnlineStatus)
    window.removeEventListener('offline', this.updateOnlineStatus)
  },
  methods: {
    getAllApi() {
      this.getShopSearchLine()
      this.getLineSearchTopRightData()
      this.getLeftBottomData()
      this.getEcharts()
    },
    // æ›´æ–°ç½‘络状态
    updateOnlineStatus(e) {
      if (e.isFirst) {
@@ -357,50 +368,155 @@
        }
      }
    },
    setStarsRef() {
      const starNodes = Array.from(this.$refs.starsRef.children)
      starNodes.forEach(item => {
        const speed = 0.2 + Math.random() * 1
        const thisDistance = this.distance + Math.random() * 300
        item.style.transformOrigin = `0 0 ${thisDistance}px`
        item.style.transform = `
        translate3d(0,0,-${thisDistance}px)
        rotateY(${Math.random() * 360}deg)
        rotateX(${Math.random() * -50}deg)
        scale(${speed},${speed})`
      })
    },
    // èŽ·å–车间编码
    async getShopSearch() {
      const res1 = await ShopSearch()
      if (res1.code === '200') {
        this.ShopArr = []
        res1.data.forEach(item => {
          this.ShopArr.push(item.org_code)
        })
    // async getShopSearch() {
    //   const res1 = await ShopSearch()
    //   if (res1.code === '200') {
    //     this.ShopArr = []
    //     res1.data.forEach(item => {
    //       this.ShopArr.push(item.org_code)
    //     })
    //
    //     if (this.ShopArr.length > 0) {
    //       this.getShopSearchLine()
    //       this.getLineSearchTopRightData()
    //       this.getLeftBottomData()
    //       this.getEcharts()
    //     }
    //   }
    //   if (this.ShopArr.length > 0) {
    //     setInterval(() => {
    //       this.ShopSearchTask = ShopSearch().then(res1 => {
    //         if (res1.code === '200') {
    //           this.ShopArr = []
    //           res1.data.forEach(item => {
    //             this.ShopArr.push(item.org_code)
    //           })
    //         }
    //       })
    //     }, 1000 * 60)
    //   }
    // },
    // äº§çº¿åŠ å·¥ä¸­ä»»åŠ¡
    getShopSearchLine() {
      let length, count
      LineSearchTopLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
        this.lineContent = res.data // è°ƒç”¨æŽ¥å£è¿”回的数据
        this.number1 = this.lineContent.length // äº§çº¿åŠ å·¥ä¸­ä»»åŠ¡  å•æ•°

        if (this.ShopArr.length > 0) {
          this.getShopSearchLine()
          this.getRightRightData()
          this.getLeftBottomData()
          this.getEcharts()
        }
      }
      if (this.ShopArr.length > 0) {
        setInterval(() => {
          this.ShopSearchTask = ShopSearch().then(res1 => {
            if (res1.code === '200') {
              this.ShopArr = []
              res1.data.forEach(item => {
                this.ShopArr.push(item.org_code)
        const newData = []
        if (this.lineContent.length > 0) {
          this.lineContent.forEach(item => {
            if (item.children.length > 5) {
              newData.push({
                workcode: item.workcode,
                partname: item.partname,
                partnumber: item.partnumber,
                partspec: item.partspec,
                qty: item.qty,
                saleordercode: item.saleordercode,
                uom: item.uom,
                children: item.children.slice(0, 5)
              })

              newData.push({
                workcode: item.workcode,
                partname: item.partname,
                partnumber: item.partnumber,
                partspec: item.partspec,
                qty: item.qty,
                saleordercode: item.saleordercode,
                uom: item.uom,
                children: item.children.slice(5)
              })
            } else {
              newData.push({
                workcode: item.workcode,
                partname: item.partname,
                partnumber: item.partnumber,
                partspec: item.partspec,
                qty: item.qty,
                saleordercode: item.saleordercode,
                uom: item.uom,
                children: item.children
              })
            }
          })
        }, 1000 * 60)
      }

          // console.log(newData.length, 9777)
        }

        this.lineContent = newData
        length = this.lineContent.length
        count = Math.ceil(length / 3) // éœ€è¦è½®æ’­çš„组数   3个为一组
        this.lineContent3 = this.lineContent.slice(0, 3)
      })

      let start = 0
      this.ShopSearchLineTask = setInterval(() => {
        if (Math.floor(start / 3) === count && count !== 0) {
          start = 0
          LineSearchTopLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
            this.lineContent = res.data // è°ƒç”¨æŽ¥å£è¿”回的数据
            this.number1 = this.lineContent.length // äº§çº¿åŠ å·¥ä¸­ä»»åŠ¡  å•æ•°

            const newData = []
            if (this.lineContent.length > 0) {
              this.lineContent.forEach(item => {
                if (item.children.length > 5) {
                  newData.push({
                    workcode: item.workcode,
                    partname: item.partname,
                    partnumber: item.partnumber,
                    partspec: item.partspec,
                    qty: item.qty,
                    saleordercode: item.saleordercode,
                    uom: item.uom,
                    children: item.children.slice(0, 5)
                  }
                  )

                  newData.push({
                    workcode: item.workcode,
                    partname: item.partname,
                    partnumber: item.partnumber,
                    partspec: item.partspec,
                    qty: item.qty,
                    saleordercode: item.saleordercode,
                    uom: item.uom,
                    children: item.children.slice(5)
                  })
                } else {
                  newData.push({
                    workcode: item.workcode,
                    partname: item.partname,
                    partnumber: item.partnumber,
                    partspec: item.partspec,
                    qty: item.qty,
                    saleordercode: item.saleordercode,
                    uom: item.uom,
                    children: item.children
                  })
                }
              })
            }

            this.lineContent = newData
            length = this.lineContent.length
            count = Math.ceil(length / 3) // éœ€è¦è½®æ’­çš„组数   3个为一组
            this.lineContent3 = this.lineContent.slice(0, 3)
          })
        } else if (count === 0) {
          clearInterval(this.ShopSearchLineTask)
          this.getShopSearchLine()
        }

        this.lineContent3 = this.lineContent.slice(start, start + 3)
        start = start + 3
      }, 1000 * 10)
    },
    // äº§çº¿åŠ å·¥ä¸­ä»»åŠ¡
    getShopSearchLine() {
    // äº§çº¿åŠ å·¥ä¸­ä»»åŠ¡(备份  åŽŸå…ˆçš„方法)
    getShopSearchLineBack() {
      let length, count
      LineSearchTopLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
        this.lineContent = res.data
@@ -432,54 +548,96 @@
    },

    // èŽ·å–右上数据 å½“日完工产品数量排行
    getRightRightData() {
      let startValue = 0 // åˆå§‹å€¼
      const scale = 10// åˆ»åº¦

    getLineSearchTopRightData() {
      LineSearchTopRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
        this.tableDataRightTopTemp = res.data
        this.tableDataRightTop = res.data
        const divData = this.$refs.tableDataRightTopRef.bodyWrapper

        this.tableDataRightTop = this.tableDataRightTopTemp.slice(startValue, startValue + scale)
        const temp = setInterval(() => {
          divData.scrollTop += 1

        const loop = Math.floor(this.tableDataRightTopTemp.length / scale)// éœ€è¦å¾ªçŽ¯çš„次数
        let nowLoop = 0// å½“前循环的次数
          if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
            divData.scrollTop = 0
            LineSearchTopRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
              this.tableDataRightTop = res.data

        const timer = setInterval(() => {
          startValue = startValue + scale
          this.tableDataRightTop = this.tableDataRightTopTemp.slice(startValue, startValue + scale)
          if (nowLoop === loop) {
            clearInterval(timer)
            this.getRightRightData()
              if (this.tableDataRightTop.length > 10) {
                clearInterval(temp)
                this.getLineSearchTopRightData()
              }
            })
          }

          nowLoop++
        }, 1000 * 10)
        }, this.tableDataRightTop.length <= 10 ? 1000 * 15 : 300)
      })

      // let startValue = 0 // åˆå§‹å€¼
      // const scale = 10// åˆ»åº¦
      //
      // LineSearchTopRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
      //   this.tableDataRightTopTemp = res.data
      //
      //   this.tableDataRightTop = this.tableDataRightTopTemp.slice(startValue, startValue + scale)
      //
      //   const loop = Math.floor(this.tableDataRightTopTemp.length / scale)// éœ€è¦å¾ªçŽ¯çš„次数
      //   let nowLoop = 0// å½“前循环的次数
      //
      //   const timer = setInterval(() => {
      //     startValue = startValue + scale
      //     this.tableDataRightTop = this.tableDataRightTopTemp.slice(startValue, startValue + scale)
      //     if (nowLoop === loop) {
      //       clearInterval(timer)
      //       this.getLineSearchTopRightData()
      //     }
      //
      //     nowLoop++
      //   }, 1000 * 10)
      // })
    },
    // äº§çº¿åŠ å·¥ä»»åŠ¡  å·¦ä¸‹æ•°æ®
    getLeftBottomData() {
      let startValue = 0 // åˆå§‹å€¼
      const scale = 10// åˆ»åº¦

      LineSearchBottomLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
        this.tableDataLeftBottomTemp = res.data
        this.tableDataLeftBottom = this.tableDataLeftBottomTemp.slice(startValue, startValue + scale)
        this.tableDataLeftBottom = res.data

        const loop = Math.floor(this.tableDataLeftBottomTemp.length / scale)// éœ€è¦å¾ªçŽ¯çš„次数
        let nowLoop = 0// å½“前循环的次数
        const divData = this.$refs.tableDataLeftBottomRef.bodyWrapper
        this.TableDataRollTask = setInterval(() => {
          // å…ƒç´ è‡ªå¢žè·ç¦»é¡¶éƒ¨1像素
          divData.scrollTop += 1
          if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
            divData.scrollTop = 0
            LineSearchBottomLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
              this.tableDataLeftBottom = res.data

        const timer = setInterval(() => {
          startValue = startValue + scale
          this.tableDataLeftBottom = this.tableDataLeftBottomTemp.slice(startValue, startValue + scale)
          nowLoop++ // æ”¾åœ¨è¿™é‡Œå¯ä»¥äº†ï¼Œå°±ç­‰å¾…零点几秒
          if (nowLoop === loop) {
            clearInterval(timer)
            this.getLeftBottomData()
              if (this.tableDataLeftBottom.length > 10) {
                clearInterval(this.TableDataRollTask)
                this.getLeftBottomData()
              }
            })
          }

          // nowLoop++ //之前放在这里逻辑不对，相差了一次的循环，相当于多等待了10秒
        }, 1000 * 10)
        }, this.tableDataLeftBottom.length <= 10 ? 1000 * 15 : 200)
      })

      // let startValue = 0 // åˆå§‹å€¼
      // const scale = 10// åˆ»åº¦
      //
      // LineSearchBottomLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
      //   this.tableDataLeftBottomTemp = res.data
      //   this.tableDataLeftBottom = this.tableDataLeftBottomTemp.slice(startValue, startValue + scale)
      //
      //   const loop = Math.floor(this.tableDataLeftBottomTemp.length / scale)// éœ€è¦å¾ªçŽ¯çš„次数
      //   let nowLoop = 0// å½“前循环的次数
      //
      //   const timer = setInterval(() => {
      //     startValue = startValue + scale
      //     this.tableDataLeftBottom = this.tableDataLeftBottomTemp.slice(startValue, startValue + scale)
      //     nowLoop++ // æ”¾åœ¨è¿™é‡Œå¯ä»¥äº†ï¼Œå°±ç­‰å¾…零点几秒
      //     if (nowLoop === loop) {
      //       clearInterval(timer)
      //       this.getLeftBottomData()
      //     }
      //
      //     // nowLoop++ //之前放在这里逻辑不对，相差了一次的循环，相当于多等待了10秒
      //   }, 1000 * 10)
      // })
    },

    getEcharts() {
@@ -499,11 +657,6 @@
        })
      }, 1000 * 10)
    },
    // èŽ·å–topEcharts
    getTopBar() {
      loadEcharts('topBarLeft', kbTop())
      loadEcharts('topBarRight', kbTop())
    },
    // èŽ·å–当前时间
    getNowTime() {
      const dt = new Date()
@@ -522,7 +675,7 @@
    },
    headerCellStyle() {
      return {
        backgroundColor: '#000',
        backgroundColor: 'transparent ',
        padding: '10px 0',
        textAlign: 'center',
        color: '#07acc2',
@@ -534,8 +687,8 @@
      return {
        padding: '7px 0',
        textAlign: 'center',
        backgroundColor: '#000',
        color: '#fff',
        backgroundColor: 'transparent ',
        color: '#c7e7ff',
        border: 'none',
        fontSize: '18px'
      }
@@ -549,8 +702,14 @@
$main_color: #09d8f2;
$color01: #00FFFF;

::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
  background-color: transparent;
}

.tableData {
  background: #000;
  background: transparent;
}

.el-table::before {
@@ -661,39 +820,8 @@
  border-radius: 50%;
}

</style>

<!--星空-->
<style lang="css" scoped>
@keyframes rotate {
  0% {
    transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
  }
  100% {
    transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
  }
}

.stars {
  transform: perspective(500px);
  transform-style: preserve-3d;
  position: absolute;
  perspective-origin: 50% 100%;
  left: 45%;
  animation: rotate 90s infinite linear;
  bottom: 0;
  z-index: 102;
}

.star {
  width: 2px;
  height: 2px;
  /*background: #f7f7b6;*/
  background: #8edffc;
  position: absolute;
  left: 0;
  top: 0;
  backface-visibility: hidden;
  z-index: 102;
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  /* width: 0;宽度为0暗藏 */
  width: 0;
}
</style>