1.看板样式修改

loulijun2021

2023-03-14 ec25f869fa5febe6f8bb030284518cc135a21987

1.看板样式修改

 src/permission.js

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

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

const whiteList = ['/login', '/zhkb', '/ckgl', '/cgdd', '/bzcj', '/dccj', '/zpcj', '/back'] // no redirect whitelist
const whiteList = ['/login', '/jgcj','/zpcj'] // no redirect whitelist

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

 src/router/index.js

@@ -35,33 +35,13 @@
  * çœ‹æ¿éƒ¨åˆ†è·¯ç”±
  * */
  {
    path: '/zhkb',
    component: () => import('@/views/kb/zhkb'),
    hidden: true
  },
  {
    path: '/ckgl',
    component: () => import('@/views/kb/ckgl'),
    hidden: true
  },
  {
    path: '/cgdd',
    component: () => import('@/views/kb/cgdd'),
    path: '/jgcj',
    component: () => import('@/views/kb/jgcj'),
    hidden: true
  },
  {
    path: '/zpcj',
    component: () => import('@/views/kb/zpcj'),
    hidden: true
  },
  {
    path: '/dccj',
    component: () => import('@/views/kb/dccj'),
    hidden: true
  },
  {
    path: '/bzcj',
    component: () => import('@/views/kb/bzcj'),
    hidden: true
  },


 src/utils/myEcharts.js

@@ -26,6 +26,9 @@
  return myChart
}

const colorX = '#c7e7ff'
const colorY = '#7696c5'

// ç³»ç»Ÿé¦–页图
export function barTop(data, colorArr) {
  var salvProName = ['x']
@@ -98,19 +101,19 @@
      data: salvProValue

    },
    {
      name: '背景',
      type: 'bar',
      barWidth: 15,
      barGap: '-100%',
      data: Value,
      itemStyle: {
        normal: {
          color: `rgba(${color[1]},0.8)`,
          barBorderRadius: 30
      {
        name: '背景',
        type: 'bar',
        barWidth: 15,
        barGap: '-100%',
        data: Value,
        itemStyle: {
          normal: {
            color: `rgba(${color[1]},0.8)`,
            barBorderRadius: 30
          }
        }
      }
    }
    ]
  }

@@ -372,6 +375,7 @@
  // const myColor = ['#7af5f5', '#00FFFF', '#00FFFF', '#00FFFF', '#00FFFF']
  const myColor = ['rgba(122,245,245,1)', 'rgba(122,245,245,0.95)', 'rgba(122,245,245,0.9)', 'rgba(122,245,245,0.85)', 'rgba(122,245,245,0.8)']
  const option = {
    animation: false,
    backgroundColor: 'transparent',
    title: {
      show: false,
@@ -390,12 +394,13 @@
      }
    },
    grid: {
      left: '10%',
      right: '5%',
      left: '5%',
      right: '10%',
      bottom: '0%',
      top: '10%',
      containLabel: true
    },
    // animation: false, // å–消动画
    xAxis: {
      show: false
    },
@@ -418,7 +423,7 @@
          color: function(value, index) {
            return value === '0' ? 'transparent' : '#fff'
          },
          fontSize: 18,
          fontSize: 20,
          // formatter: function(value, index) {
          //   return [
          //     '{lg|' + (index + 1) + '、   }' + '{title|' + value + '} '
@@ -491,7 +496,7 @@
            show: true,
            position: 'right',
            formatter: '{c}',
            fontSize: 14,
            fontSize: 20,
            color: '#fff'
            // formatter: '{c}%',
          }
@@ -788,3 +793,988 @@
  }
  return option
}

// çœ‹æ¿å¤´éƒ¨èƒŒæ™¯æ¡
export function kbTop() {
  var getXY = ['学前教育系'] // æ•°æ®ç‚¹åç§°
  var getRS = [255] // å­¦ç”Ÿæ»¡æ„åº¦

  var max = Math.ceil(255 / 10) * 10

  const option = {
    animation: false,
    backgroundColor: 'transparent',
    grid: {
      left: '0%',
      right: '0%',
      bottom: '0%',
      top: '0%'
      // containLabel: true
    },
    xAxis: [
      {
        type: 'value',
        show: false,
        axisLabel: {
          margin: 5,
          color: '#666666',
          textStyle: {
            fontSize: '13'
          }
        },
        min: 0,
        max: max, // è®¡ç®—最大值
        interval: max / 5, //  å¹³å‡åˆ†ä¸º5份
        splitNumber: 5,
        splitLine: {
          show: true,
          lineStyle: {
            color: '#D1D1D1'
          }
        },
        axisLine: {
          lineStyle: {
            color: '#333333'
          }
        },
        axisTick: {
          show: false
        }
      }
    ],
    yAxis: [
      {
        type: 'category',
        inverse: true,
        show: false,
        axisLabel: {
          textStyle: {
            color: '#6F84BD',
            fontSize: '13'
          }
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: '#333333'
          }
        },
        data: getXY
      }
    ],
    series: [
      {
        name: '值',
        type: 'bar',
        zlevel: 1,
        xAxisIndex: 0,
        label: {
          show: false,
          position: 'right',
          color: '#6F84BD',
          fontSize: 14,
          offset: [10, 0]
        },
        itemStyle: {
          normal: {
            barBorderRadius: [10, 10, 10, 10],
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
              offset: 0,
              color: '#91ddec' // 0% å¤„的颜色
            }, {
              offset: 1,
              color: '#09d8f2' // 100% å¤„的颜色
            }], false)
          }
        },
        barWidth: 15,
        data: getRS
      }
    ]
  }

  return option
}

// è½¦é—´è´¨é‡å·¦ä¸‹å‘¨ä¸è‰¯
export function line02(dataX, dataY) {
  return {
    animation: false,
    backgroundColor: 'transparent',
    tooltip: {},
    // title: {
    //   show: false,
    //   text: '订单完成总数',
    //   left: '50%',
    //   top: '5%',
    //   textAlign: 'center',
    //   textStyle: {
    //     // color: '#fff',
    //     color: '#00ffff',
    //     fontSize: '20',
    //     fontWeight: 'bolder'
    //   }
    // },
    grid: {
      left: '0%',
      right: '2%',
      bottom: '5%',
      top: '8%',
      containLabel: true
    },
    legend: {
      show: false,
      itemGap: 50,
      data: ['注册总量', '最新注册量'],
      textStyle: {
        color: '#f9f9f9',
        borderColor: '#fff'
      }
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: true,
        axisLabel: {
          interval: 0,
          formatter: '{value}',
          fontSize: 18,
          margin: 20,
          textStyle: {
            color: colorX
          }
        },
        axisLine: {
          lineStyle: {
            color: '#032c58'
          }
        },
        splitLine: {
          show: false,
          lineStyle: {
            color: '#032c58'
          }
        },
        axisTick: {
          show: false
        },
        data: dataX
      }],
    yAxis: [
      {
        // max: 800,
        boundaryGap: false,
        splitNumber: 4,
        type: 'value',
        axisLabel: {
          textStyle: {
            fontSize: 18,
            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
        }
      }
    ],
    series: [
      {
        name: '注册总量',
        type: 'line',
        // smooth: true, //是否平滑曲线显示
        //             symbol:'circle',  // é»˜è®¤æ˜¯ç©ºå¿ƒåœ†ï¼ˆä¸­é—´æ˜¯ç™½è‰²çš„），改成实心圆
        showAllSymbol: true,
        symbol: 'emptyCircle',
        symbolSize: 6,
        lineStyle: {
          normal: {
            color: '#28ffb3' // çº¿æ¡é¢œè‰²
          },
          borderColor: '#f0f'
        },
        label: {
          show: true,
          position: 'top',
          textStyle: {
            color: '#fff',
            fontSize: 16
          }
        },
        itemStyle: {
          normal: {
            color: '#28ffb3'

          }
        },
        tooltip: {
          show: false
        },
        areaStyle: { // åŒºåŸŸå¡«å……样式
          normal: {
            // çº¿æ€§æ¸å˜ï¼Œå‰4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(0,154,120,1)'
            },
              {
                offset: 1,
                color: 'rgba(0,0,0, 0)'
              }
            ], false),
            shadowColor: 'rgba(53,142,215, 0.9)', // é˜´å½±é¢œè‰²
            shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, è®¾ç½®å›¾å½¢çš„阴影效果。
          }
        },
        data: dataY
        // 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)]
      }
      //   {
      //   name: '最新注册量',
      //   type: 'bar',
      //   barWidth: 20,
      //   tooltip: {
      //     show: false
      //   },
      //   label: {
      //     show: true,
      //     position: 'top',
      //     textStyle: {
      //       color: '#fff',
      //     }
      //   },
      //   itemStyle: {
      //     normal: {
      //       // barBorderRadius: 5,
      //       // color: new echarts.graphic.LinearGradient(
      //       //     0, 0, 0, 1,
      //       //     [{
      //       //             offset: 0,
      //       //             color: '#14c8d4'
      //       //         },
      //       //         {
      //       //             offset: 1,
      //       //             color: '#43eec6'
      //       //         }
      //       //     ]
      //       // )
      //       color: function (params) {
      //         var colorList = ['#0ec1ff', '#10cdff', '#12daff', '#15ebff', '#17f8ff', '#1cfffb', '#1dfff1'];
      //         return colorList[params.dataIndex];
      //       }
      //     }
      //   },
      //   data: [200, 382, 102, 267, 186, 315, 316]
      // }
    ]
  }
}

// è½¦é—´è´¨é‡å³ä¸Š æ—¥ä¸è‰¯
export function bar04(resValueArr) {
  // let data = resValueArr.map(({ eqp_name, cont }) => ({ name: eqp_name, value: cont }))//替换数组对象中的键名

  const data = [
    {
      name: '装配一线',
      value: resValueArr.find(i => i.eqp_name === '装配一线') ? resValueArr.find(i => i.eqp_name === '装配一线').cont : 0
    },
    {
      name: '装配二线',
      value: resValueArr.find(i => i.eqp_name === '装配二线') ? resValueArr.find(i => i.eqp_name === '装配二线').cont : 0
    },
    {
      name: '装配三线',
      value: resValueArr.find(i => i.eqp_name === '装配三线') ? resValueArr.find(i => i.eqp_name === '装配三线').cont : 0
    },
    {
      name: '装配四线',
      value: resValueArr.find(i => i.eqp_name === '装配四线') ? resValueArr.find(i => i.eqp_name === '装配四线').cont : 0
    }
  ]
  const getSymbolData = (data) => {
    const arr = []
    for (var i = 0; i < data.length; i++) {
      arr.push({
        value: data[i].value,
        symbolPosition: 'end'
      })
    }
    return arr
  }

  const option = {
    animation: false,
    backgroundColor: 'transparent',
    grid: {
      top: '0%',
      bottom: 0,
      right: '4%',
      left: -20,
      containLabel: true
    },
    xAxis: {
      show: false
    },
    yAxis: [{
      triggerEvent: true,
      show: true,
      inverse: true,
      data: data.map(r => r.name),
      axisLine: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },

      axisLabel: {
        show: true,
        interval: 0,
        color: '#fff',
        align: 'left',
        margin: 60,
        formatter: function(value, index) {
          return '{title|' + value + '}'
        },
        rich: {
          title: {
            width: 50,
            align: 'right',
            fontSize: 20
          }
        }
      }
    }, {
      triggerEvent: true,
      show: true,
      inverse: true,
      data: data.map(r => r.name),
      axisLine: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        interval: 0,
        shadowOffsetX: '-20px',
        color: ['#fff'],
        align: 'left',
        verticalAlign: 'center',
        lineHeight: 40,
        fontSize: 20,
        formatter: function(value, index) {
          return data[index].value + ''
        }

      }
    }],
    series: [
      {
        name: 'XXX',
        type: 'pictorialBar',
        symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
        // symbolSize: [50, 50],
        symbolSize: function(params) {
          return params === 0 ? [0, 0] : [50, 50]
        },
        symbolOffset: [20, 0],
        z: 12,
        itemStyle: {
          normal: {
            color: '#fff'
          }
        },
        data: getSymbolData(data)
      },
      {
        name: '条',
        type: 'bar',
        showBackground: true,
        // barBorderRadius: 30,
        yAxisIndex: 0,
        data: data,
        barWidth: 10,
        // align: left,
        itemStyle: {
          normal: {
            color: 'rgba(41, 162, 245, 1)',
            barBorderRadius: 10
          }
          // color: '#A71A2B',
          // barBorderRadius: 4,
        }
        // label: {
        //     normal: {
        //         color: '#fff',
        //         show: true,
        //         position: ["-80px", 0],
        //         textStyle: {
        //             fontSize: 16
        //         },
        //         formatter: function(a, b) {
        //             return a.name
        //         }
        //     }
        // }
      }]
  }

  return option
}

// è½¦é—´è´¨é‡å³ä¸‹  å‘¨ä¸è‰¯
export function pie02(resValueArr) {
  const bgColor = 'transparent'
  const title = '总不良数'
  const color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0']
  const echartData = resValueArr.map(({ eqp_name, cont }) => ({ name: eqp_name, value: cont }))// æ›¿æ¢æ•°ç»„对象中的键名
  const formatNumber = function(num) {
    const reg = /(?=(\B)(\d{3})+$)/g
    return num.toString().replace(reg, ',')
  }
  const total = echartData.reduce((a, b) => {
    return a + b.value * 1
  }, 0)

  const option = {
    animation: false,
    backgroundColor: bgColor,
    color: color,
    // tooltip: {
    //     trigger: 'item'
    // },
    title: [{
      text: '{name|' + title + '}\n{val|' + formatNumber(total) + '}',
      top: 'center',
      left: 'center',
      textStyle: {
        rich: {
          name: {
            fontSize: 22,
            fontWeight: 'normal',
            color: '#fff',
            padding: [10, 0]
          },
          val: {
            fontSize: 22,
            fontWeight: 'bold',
            color: '#fff'
          }
        }
      }
    }
      // {
      //   text: '单位：个',
      //   top: 20,
      //   left: 20,
      //   textStyle: {
      //     fontSize: 14,
      //     color: '#666666',
      //     fontWeight: 400
      //   }
      // }
    ],
    // legend: {
    //     orient: 'vertical',
    //     icon: 'rect',
    //     x: '80%',
    //     y: 'center',
    //     itemWidth: 12,
    //     itemHeight: 12,
    //     align: 'left',
    //     textStyle: {
    //         rich: {
    //             name: {
    //                 fontSize: 12
    //             },
    //             value: {
    //                 fontSize: 16,
    //                 padding: [0, 5, 0, 15]
    //             },
    //             unit: {
    //                 fontSize: 12
    //             }
    //         }
    //     },
    //     formatter: function(name) {
    //         let res = echartData.filter(v => v.name === name);
    //         res = res[0] || {};
    //         let unit = res.unit || '';
    //         return '{name|' + name + '}  {value|' + res.value + '}{unit|' + unit + '}'
    //     }
    //     // data: legendName
    // },
    series: [
      {
        type: 'pie',
        radius: ['35%', '50%'],
        center: ['50%', '50%'],
        data: echartData,
        hoverAnimation: false,
        itemStyle: {
          normal: {
            borderColor: bgColor,
            borderWidth: 2
          }
        },
        labelLine: {
          normal: {
            // showAbove: false,
            length: 20,
            length2: 35,
            lineStyle: {
              color: '#fff'
            }
          }
        },
        label: {
          normal: {
            formatter: params => {
              return (
                '{icon|●}{name|' + params.name + '}{value|' +
                formatNumber(params.value) + '}'
              )
            },
            padding: [0, -50, 25, -50],
            rich: {
              icon: {
                fontSize: 18,
                color: 'red'
              },
              name: {
                fontSize: 18,
                padding: [0, 10, 0, 4],
                color: '#fff'
              },
              value: {
                fontSize: 18,
                fontWeight: 'bold',
                color: '#fff'
              }
            }
          }
        }
      }]
  }
  return option
}

// è½¦é—´ç”Ÿäº§  ç”Ÿäº§ä¿¡æ¯  ç”Ÿäº§è¿›åº¦ è¿›åº¦æ¡
export function progress(param1, param2) {
//   param1  æŠ¥å·¥æ•°é‡
  //  param2   ä»»åŠ¡æ•°é‡

  // æ‹¿åˆ°æ•°æ®ä¹‹åŽéœ€è¦è®¡ç®—出相对长度  param2的相对长度为100
  let relativeValue = ''// ç›¸å¯¹å€¼  ç»¿è‰²èƒŒæ™¯

  relativeValue = (param1 / param2) * 100
  // ç™¾åˆ†æ¯”数值的位置
  var position = 'right'
  // if (param1 >= 50) {
  //     position = 'inside';
  // } else if (param1 < 50) {
  //     position = 'right';
  // }

  var option = {
    animation: false,
    // animation: false, // å–消动画
    // animationDuration: 5000,
    grid: {
      top: 'center',
      left: '0%',
      right: '0%',
      // height: '%',
      // containLabel: false
      containLabel: true

    },
    xAxis: {
      type: 'value',
      axisLabel: {
        show: false
      },
      max: 100,
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      splitLine: {
        show: false
      }
    },
    yAxis: [{
      type: 'category',
      data: [],
      axisLabel: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      splitLine: {
        show: false
      },
      z: 10
    }, {
      type: 'category',
      axisLabel: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      splitLine: {
        show: false
      },
      data: []
    }],
    series: [{
      name: '',
      type: 'bar',
      barWidth: '100%',
      // barMaxWidth: '100%',
      label: {
        normal: {
          show: true,
          // position: ['24', '38%'],
          position: (param1.toString() + param2.toString()).length <= 6 ? ['24', '38%'] : 'insideLeft',
          // formatter: '{c} %',
          formatter: param1 + '/' + param2,
          textStyle: {
            color: '#FFFFFF',
            fontWeight: 'bold',
            fontFamily: 'Microsoft YaHei',
            fontSize: 18
          }
        }
      },
      itemStyle: {
        normal: {
          barBorderRadius: 5,
          shadowBlur: 10,
          shadowColor: '#111',
          color: '#2FD04F'
        }
      },
      // data: [param1],
      data: [relativeValue],
      z: 10
    }, {
      type: 'bar',
      barWidth: '100%',
      yAxisIndex: 1,
      silent: true,
      // barMaxWidth: '100%',
      itemStyle: {
        normal: {
          barBorderRadius: 5,
          color: '#42475B'
        }
      },
      // data: [param2]
      data: [100]
    }]
  }

  return option
}

// é‡‡è´­è®¢å•
export function cgddchart(data1, data2, data3) {
  // å¾—到最大值  5的倍数

  let max = Math.max(Math.max(data1, data2), data3) + 5
  if (max % 5 !== 0) {
    max = 5 - max % 5 + max
  }
  const option = {
    backgroundColor: 'transparent',
    tooltip: {
      formatter: '{a} <br/>{c} {b}'
    },
    series: [
      {
        name: '本月采购订单数',
        type: 'gauge',
        color: ['#f00'],
        min: 0,
        max: max,
        splitNumber: 5,
        radius: '70%',
        center: ['17%', '48%'],
        axisLine: { // åæ ‡è½´çº¿
          lineStyle: { // å±žæ€§lineStyle控制线条样式
            width: 10,
            color: [
              [0.4, '#09d8f2'],
              [1, '#00FFFFF']
            ]
          },
          backgroundColor: 'none'
        },
        tooltip: {
          show: false
        },
        axisTick: { // åæ ‡è½´å°æ ‡è®°
          length: 10, // å±žæ€§length控制线长
          lineStyle: { // å±žæ€§lineStyle控制线条样式
            color: 'auto'
          }
        },
        splitLine: { // åˆ†éš”线
          length: 10, // å±žæ€§length控制线长
          lineStyle: { // å±žæ€§lineStyle（详见lineStyle）控制线条样式
            color: colorY
          }
        },
        axisLabel: {
          borderRadius: 1,
          // color: 'rgba(255,255,255,0.7)',
          color: '#00FFFF',
          padding: 1,
          fontSize: 18
        },
        title: {
          // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
          // fontWeight: 'bolder',
          fontSize: 22,
          fontFamily: 'Microsoft YaHei',
          fontColor: '#FFF',
          color: '#FFF',
          paddingTop: 20,
          offsetCenter: [0, '120%']
          // fontStyle: 'italic'
        },
        itemStyle: {
          // color: '#1092ff'
          color: '#09d8f2'
        },
        detail: {
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          fontFamily: 'digital',
          fontSize: 26,
          color: '#fff',
          rich: {},
          offsetCenter: [0, '90%'],

          formatter: function(value) {
            return value
          }
        },
        data: [{
          value: data1,
          name: '本月采购订单数'
        }]
      },
      {
        name: '本月到货单数',
        type: 'gauge',
        color: ['#f00'],
        min: 0,
        max: max,
        splitNumber: 5,
        radius: '70%',
        center: ['50%', '48%'],
        axisLine: { // åæ ‡è½´çº¿
          lineStyle: { // å±žæ€§lineStyle控制线条样式
            width: 10,
            color: [
              [0.4, '#09d8f2'],
              [1, '#00FFFFF']
            ]
          },
          backgroundColor: 'none'
        },
        tooltip: {
          show: false
        },
        axisTick: { // åæ ‡è½´å°æ ‡è®°
          length: 10, // å±žæ€§length控制线长
          lineStyle: { // å±žæ€§lineStyle控制线条样式
            color: 'auto'
          }
        },
        splitLine: { // åˆ†éš”线
          length: 10, // å±žæ€§length控制线长
          lineStyle: { // å±žæ€§lineStyle（详见lineStyle）控制线条样式
            color: colorY
          }
        },
        axisLabel: {
          borderRadius: 1,
          // color: 'rgba(255,255,255,0.7)',
          color: '#00FFFF',
          padding: 1,
          fontSize: 18
        },
        title: {
          // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
          // fontWeight: 'bolder',
          fontSize: 22,
          fontColor: '#FFF',
          color: '#FFF',
          fontFamily: 'Microsoft YaHei',
          paddingTop: 20,
          offsetCenter: [0, '120%']
          // fontStyle: 'italic'
        },
        itemStyle: {
          // color: '#1092ff'
          color: '#09d8f2'
        },
        detail: {
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          // borderWidth: 1,
          textBorderColor: '#000',
          textBorderWidth: 1,
          textShadowBlur: 1,
          textShadowColor: colorY,
          textShadowOffsetX: 0,
          textShadowOffsetY: 0,
          paddingTop: 10,
          fontFamily: 'digital',
          fontSize: 20,
          width: 30,
          color: '#fff',
          rich: {},
          offsetCenter: [0, '90%'],
          formatter: function(value) {
            // console.info(value)
            // return (value * 10 + '%')
            return value
          }
        },
        data: [{
          value: data2,
          name: '本月到货单数'
        }]
      },
      {
        name: '本月采购入库单数',
        type: 'gauge',
        color: ['#f00'],
        min: 0,
        max: max,
        splitNumber: 5,
        radius: '70%',
        center: ['83%', '48%'],
        axisLine: { // åæ ‡è½´çº¿
          lineStyle: { // å±žæ€§lineStyle控制线条样式
            width: 10,
            color: [
              [0.4, '#09d8f2'],
              [1, '#00FFFFF']
            ]
          },
          backgroundColor: 'none'
        },
        tooltip: {
          show: false
        },
        axisTick: { // åæ ‡è½´å°æ ‡è®°
          length: 10, // å±žæ€§length控制线长
          lineStyle: { // å±žæ€§lineStyle控制线条样式
            color: 'auto'
          }
        },
        splitLine: { // åˆ†éš”线
          length: 10, // å±žæ€§length控制线长
          lineStyle: { // å±žæ€§lineStyle（详见lineStyle）控制线条样式
            color: colorY
          }
        },
        axisLabel: {
          borderRadius: 1,
          // color: 'rgba(255,255,255,0.7)',
          color: '#00FFFF',
          padding: 1,
          fontSize: 18
        },
        title: {
          // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
          // fontWeight: 'bolder',
          fontSize: 22,
          fontColor: '#FFF',
          color: '#FFF',
          fontFamily: 'Microsoft YaHei',
          paddingTop: 20,
          offsetCenter: [0, '120%']
          // fontStyle: 'italic'
        },
        itemStyle: {
          // color: '#1092ff'
          color: '#09d8f2'
        },
        detail: {
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          // borderWidth: 1,
          textBorderColor: '#000',
          textBorderWidth: 1,
          textShadowBlur: 1,
          textShadowColor: colorY,
          textShadowOffsetX: 0,
          textShadowOffsetY: 0,
          paddingTop: 10,
          fontFamily: 'digital',
          fontSize: 20,
          width: 30,
          color: '#fff',
          rich: {},
          offsetCenter: [0, '90%'],
          formatter: function(value) {
            return value
          }
        },
        data: [{
          value: data3,
          name: `本月采购入库单数`
        }]
      }

    ]
  }
  return option
}

 src/views/jcsz/wldw.vue

@@ -5,12 +5,12 @@
      <div class="bodyTopButtonGroup" style="justify-content: space-between">
        <el-button v-waves type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">新增</el-button>
        <div style="display: flex">
          <el-button
            v-waves
            icon="el-icon-refresh-right"
            @click="syncSeaveSearchPartner"
          >同步往来单位
          </el-button>
<!--          <el-button-->
<!--            v-waves-->
<!--            icon="el-icon-refresh-right"-->
<!--            @click="syncSeaveSearchPartner"-->
<!--          >同步往来单位-->
<!--          </el-button>-->
          <el-button v-waves icon="el-icon-download" @click="upload">导入</el-button>
        </div>
      </div>

 src/views/kb/bzcj.vue

ÎļþÒÑɾ³ý

 src/views/kb/cgdd.vue

ÎļþÒÑɾ³ý

 src/views/kb/ckgl.vue

ÎļþÒÑɾ³ý

 src/views/kb/dccj.vue

ÎļþÒÑɾ³ý

 src/views/kb/jgcj.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,660 @@
<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_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>
        <div class="kb_headTime">
          <span>{{ headTime }}</span>
        </div>
      </div>
      <div style="display: flex;justify-content: space-between;padding:0 20px 20px 20px">
        <!--       å·¦è¾¹-->
        <div style="width: 1400px ;height: 969px;" class="flex_c_b">
          <div>
            <div class="smallTitle">
              <svg-icon icon-class="cxjg" class="svg_class"/>
              äº§çº¿åŠ å·¥ä¸­ä»»åŠ¡
            </div>
            <div class="lineContent horn">
              <div v-for="item in lineContent3" :key="item.workcode" class="kb_left_top_block">
                <div class="kb_block02 kb_pd10">
                  <div>
                    <div>销售订单:{{ item.saleordercode }}</div>
                    <div class="kb_mt10">
                      åŠ å·¥å•å·:{{ item.workcode }}
                    </div>
                    <div class="kb_mt10">
                      äº§å“åç§°:{{ item.partname }}
                    </div>
                    <div class="kb_mt10">
                      ä»»åŠ¡æ•°é‡:{{ parseFloat(item.qty) }}
                    </div>
                  </div>
                </div>
                <div class="kb_block03 kb_pd10 ">
                  <div v-if="item.children&&item.children.length>0" class="flex_s_c">
                    <div
                      v-for="(it,ind) in item.children"
                      :key="ind"
                      class="kb_block03_content flex_c_c"
                    >
                      <div>
                        <div class="content01">{{ it.stepname }}</div>
                      </div>
                      <div class="content02Parent">
                        <div class="content02">
                          <div class="content02_1 ">任务</div>
                          <div class="content02_2 borderTop ">{{ parseFloat(it.planqty) }}</div>
                        </div>
                        <div class="content02">
                          <div class="content02_1 ">合格</div>
                          <div class="content02_2 borderTop ">{{ parseFloat(it.goodqty) }}</div>
                        </div>
                        <div class="content02" style="border-right: 0">
                          <div class="content02_1 ">不良</div>
                          <div class="content02_2 borderTop ">{{ parseFloat(it.ngqty) }}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div v-if="item.children&&item.children.length>0" class="kb_block03_02 flex_s_c">
                    <div
                      v-for="(it,ind) in item.children"
                      :key="ind"
                      class="kb_block03_02_content flex_c_c"
                    >
                      <div class="flex_c_c content01">
                        <div
                          v-if="it.status==='START'&&(parseFloat(it.ngqty)===0||it.ngqty==='')&&(parseFloat(it.goodqty)===0||it.goodqty==='')"
                          class="circle"
                          style="background-color: blue;"
                        />
                        <div
                          v-else-if="it.status==='ALLO'&&(parseFloat(it.ngqty)===0||it.ngqty==='')&&(parseFloat(it.goodqty)===0||it.goodqty==='')"
                          class="circle"
                          style="background-color: rgb(255 255 255)"
                        />
                        <div
                          v-else-if="parseFloat(it.ngqty)+parseFloat(it.goodqty)>=parseFloat(it.planqty)"
                          class="circle"
                        />
                        <div v-else class="circleYellow"/>
                      </div>
                    </div>
                  </div>

                </div>
              </div>
            </div>

          </div>
          <div>
            <div class="smallTitle">
              <svg-icon icon-class="cxmc" class="svg_class"/>
              äº§çº¿åŠ å·¥ä»»åŠ¡
            </div>
            <div class="lineContent horn">
              <el-table
                ref="tableDataLeftBottomRef"
                :data="tableDataLeftBottom"
                class="tableData"
                style="width: 100%;"
                :header-cell-style="headerCellStyle"
                :cell-style="cellStyle"
                height="428"
              >
                <el-table-column
                  prop="RowNum"
                  label="序号"
                  width="60"
                />

                <el-table-column
                  prop="status"
                  width="80"
                  label="状态"
                >
                  <template slot-scope="{row}">
                    <div v-if="row.status==='ALLO'">已派发</div>
                    <div v-if="row.status==='START'">开工</div>
                    <div v-if="row.status==='NEW'">新工单</div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="lm_date"
                  label="派发时间"
                  width="120"
                >
                  <template slot-scope="{row}">
                    <div>{{ row.lm_date.substring(0, 10) }}</div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="saleOrderCode"
                  label="销售订单号"
                  width="170"
                >
                  <template slot-scope="{row}">
                    <div v-if="row.saleOrderCode">{{ row.saleOrderCode }}</div>
                    <div v-else>/</div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="wo_code"
                  label="加工单号"
                  width="190"
                />
                <el-table-column
                  prop="partname"
                  label="产品名称"
                  width="350"
                >
                  <template slot-scope="{row}">
                    <div v-if="row.partname" class="ellipsis">{{ row.partname }}</div>
                    <div v-else>/</div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="plan_qty"
                  label="任务数量"
                  width="105"
                />
                <el-table-column
                  prop="good_qty"
                  label="完工数量"
                  width="105"
                />
                <el-table-column
                  prop="ng_qty"
                  label="不良数量"
                  width="105"
                />
                <el-table-column
                  label="完成率"
                  width="105"
                >
                  <template slot-scope="{row}">
                    <div>{{ parseFloat((row.good_qty * 100 / row.plan_qty).toFixed(2)) }}%</div>
                  </template>
                </el-table-column>
                <!--                <el-table-column-->

                <!--                  label="预计开始"-->
                <!--                  width="140"-->
                <!--                >-->
                <!--                  <template slot-scope="{row}">-->
                <!--                    <div>{{ row.planstartdate.substring(0, 10) }}</div>-->
                <!--                  </template>-->
                <!--                </el-table-column>-->
                <!--                <el-table-column-->
                <!--                  prop=""-->
                <!--                  label="预计结束"-->
                <!--                  width="140"-->
                <!--                >-->
                <!--                  <template slot-scope="{row}">-->
                <!--                    <div>{{ row.planenddate.substring(0, 10) }}</div>-->
                <!--                  </template>-->
                <!--                </el-table-column>-->
              </el-table>
            </div>

          </div>
        </div>
        <!--        å³è¾¹-->
        <div style="width: 450px;height: 969px;" class="flex_c_b">
          <div>
            <div class="smallTitle">
              <svg-icon icon-class="drwg" class="svg_class"/>
              å½“日完工产品数量排行
            </div>
            <div class="lineContent horn">
              <el-table
                ref="tableDataRightTopRef"
                :data="tableDataRightTop"
                class="tableData"
                style="width: 100%;"
                :header-cell-style="headerCellStyle"
                :cell-style="cellStyle"
                height="428"
              >
                <el-table-column
                  type="index"
                  label="序号"
                  width="60"
                />
                <el-table-column
                  prop="linename"
                  width="125"
                  label="产线"
                />
                <el-table-column
                  prop="partname"
                  width="160"
                  label="产品"
                >
                  <template slot-scope="{row}">
                    <div v-if="row.partname" class="ellipsis">{{ row.partname }}</div>
                    <div v-else>/</div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="good_qty"
                  label="数量"
                  width="90"
                >
                  <template slot-scope="{row}">
                    <div>{{ parseFloat(row.good_qty) }}</div>
                  </template>
                </el-table-column>
              </el-table>
            </div>

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

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import './kbCommon.css'
import {bar02, kbTop, loadEcharts} from '@/utils/myEcharts'
import {
  LineSearchBottomLeftData,
  LineSearchBottomRightData,
  LineSearchTopLeftData,
  LineSearchTopRightData,
  ShopSearch
} from '@/api/dzkb'
import {parseTime} from '@/utils'

export default {
  name: 'Cjsc',
  data() {
    return {
      headTime: '',
      tableDataRightTop: [],
      tableDataRightTopTemp: [],
      tableDataLeftBottom: [],
      tableDataLeftBottomTemp: [],
      lineContent3: [],
      ShopArr: ['101'], // è½¦é—´ç¼–码数组   //金工车间

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

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

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

    this.getShopSearch()
    this.setStarsRef()
  },
  methods: {
    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)
      //   })

      // 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)
      //         })
      //       }
      //     })
      //   }, 1000 * 60)
      // }
    },
    // äº§çº¿åŠ å·¥ä¸­ä»»åŠ¡
    getShopSearchLine() {
      let length, count
      LineSearchTopLeftData({shopcode: this.ShopArr.join(',')}).then(res => {
        this.lineContent = res.data
        length = this.lineContent.length
        count = Math.ceil(length / 3) // éœ€è¦è½®æ’­çš„组数   3个为一组
        this.lineContent3 = this.lineContent.slice(0, 3)
        this.number1 = this.lineContent.length
      })

      let start = 0
      const timer = setInterval(() => {
        if (Math.floor(start / 3) === count && count !== 0) {
          start = 0
          LineSearchTopLeftData({shopcode: this.ShopArr.join(',')}).then(res => {
            this.lineContent = res.data
            length = this.lineContent.length
            count = Math.ceil(length / 3) // éœ€è¦è½®æ’­çš„组数   3个为一组
            this.lineContent3 = this.lineContent.slice(0, 3)

            this.number1 = this.lineContent.length
          })
        } else if (count === 0) {
          clearInterval(timer)
          this.getShopSearchLine()
        }
        this.lineContent3 = this.lineContent.slice(start, start + 3)
        start = start + 3
      }, 1000 * 10)
    },

    // èŽ·å–右上数据 å½“日完工产品数量排行
    getRightRightData() {
      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.getRightRightData()
          }

          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)

        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)
          if (nowLoop === loop) {
            clearInterval(timer)
            this.getLeftBottomData()
          }

          nowLoop++
        }, 1000 * 10)
      })
    },

    getEcharts() {
      let dataArr = [30, 20, 20, 18, 10]
      let titlenameArr = ['颜色', '尺寸', '气味', '毛刺', '裂痕']
      LineSearchBottomRightData({shopcode: this.ShopArr.join(',')}).then(res => {
        dataArr = res.data.map(i => i.cont)
        titlenameArr = res.data.map(i => i.name)
        loadEcharts('bar01', bar02(dataArr, titlenameArr))
      })

      setInterval(() => {
        LineSearchBottomRightData({shopcode: this.ShopArr.join(',')}).then(res => {
          dataArr = res.data.map(i => i.cont)
          titlenameArr = res.data.map(i => i.name)
          loadEcharts('bar01', bar02(dataArr, titlenameArr))
        })
      }, 1000 * 10)
    },
    // èŽ·å–topEcharts
    getTopBar() {
      loadEcharts('topBarLeft', kbTop())
      loadEcharts('topBarRight', kbTop())
    },
    // èŽ·å–当前时间
    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}`
    },
    headerCellStyle() {
      return {
        backgroundColor: '#000',
        padding: '10px 0',
        textAlign: 'center',
        color: '#07acc2',
        border: 'none',
        fontSize: '18px'
      }
    },
    cellStyle() {
      return {
        padding: '7px 0',
        textAlign: 'center',
        backgroundColor: '#000',
        color: '#fff',
        border: 'none',
        fontSize: '18px'
      }
    }
  }

}
</script>

<style lang="scss" scoped>
$main_color: #09d8f2;
$color01: #00FFFF;

.tableData {
  background: #000;
}

.el-table::before {
  height: 0;
}

.el-table__empty-text {
  color: $main_color;
}

.kb_left_top_block {
  width: 100%;
  height: 143px;
  display: flex;
  font-size: 16px;
  border-bottom: 1px solid $main_color;
  justify-content: flex-start;

  .kb_block02 {
    width: 304px;
    display: flex;
    align-items: center;
    border-right: 1px solid $main_color;
  }

  .kb_block03 {
    width: 1020px;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    border-radius: 5px;

    .kb_block03_content {
      border: 1px solid $main_color;
      width: 180px;
      height: 80px;
      margin-right: 15px;
      display: flex;
      flex-direction: column;

      .content01 {
        height: 30px;
        width: 100%;
        border-bottom: 1px solid $main_color;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .content02Parent {
        display: flex;

        .content02 {
          width: 60px;
          border-right: 1px solid $main_color;

          .content02_1 {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 25px;
          }

          .content02_2 {
            height: 25px;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .borderTop {
            border-top: 1px solid $main_color;
          }
        }
      }

    }
  }

  .kb_block03_02 {
    margin-top: 15px;
    display: flex;

    .kb_block03_02_content {
      width: 180px;
      margin-right: 15px;

      .content01 {
        .circle {
          width: 26px;
          height: 26px;
          background-color: #00ff8b;
          border-radius: 50%;
        }
      }
    }
  }
}

.kb_left_top_block:nth-child(3n) {
  border-bottom: none !important;
}

.circleYellow {
  width: 26px;
  height: 26px;
  background-color: rgb(255 255 0);
  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;
}
</style>

 src/views/kb/kbCommon.css

@@ -10,6 +10,8 @@
  color: #fff;
  background-size: 1920px 1080px;
  /*background: url("../../assets/images/kb_bg.png") no-repeat;*/

  overflow: hidden;
}

.kb_header {
@@ -67,6 +69,12 @@
  justify-content: space-evenly;
  /*align-content: center;*/
}
.flex_c_b {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-content: space-between;
}

.flex_e_c {
  display: flex;
@@ -88,8 +96,8 @@
  margin-top: 10px;
}

.kb_mt5 {
  margin-top: 5px;
.kb_mt10 {
  margin-top: 10px;
}
/*公告样式*/
.MarqueeTipsContentClass {
@@ -114,3 +122,48 @@
/*}*/

/*scrollbar END*/


.smallTitle{
  height: 35px;
  display: flex;
  color: #00ffff;
  font-size: 26px;
  /*align-content: flex-start;*/
}

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



.lineContent {
  height: 435px;
  border: 1px solid #09d8f2;
  border-radius: 5px;
  padding: 2px;
  box-shadow: #00FFFF 0 0 10px;
}

.lineContentCenter {
  height: 935px;
  border: 1px solid #09d8f2;
  border-radius: 5px;
  padding: 2px;
  box-shadow: #00FFFF 0 0 10px;
}

.horn {
  background: linear-gradient(#00FFFF, #00FFFF) left top,
  linear-gradient(#00FFFF, #00FFFF) left top,
  linear-gradient(#00FFFF, #00FFFF) right top,
  linear-gradient(#00FFFF, #00FFFF) right top,
  linear-gradient(#00FFFF, #00FFFF) left bottom,
  linear-gradient(#00FFFF, #00FFFF) left bottom,
  linear-gradient(#00FFFF, #00FFFF) right bottom,
  linear-gradient(#00FFFF, #00FFFF) right bottom;
  background-repeat: no-repeat;
  background-size: 2px 20px, 20px 2px;
}

 src/views/kb/zhkb.vue

ÎļþÒÑɾ³ý

 src/views/kb/zhkb_back.vue

ÎļþÒÑɾ³ý

 src/views/kb/zpcj.vue

@@ -1,44 +1,41 @@
<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_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>
        <div class="kb_headerPic" />
        <div class="kb_headTime">
          <span>{{ headTime }}</span>
        </div>
      </div>
      <MarqueeTips
        :content="MarqueeTipsContent"
        class="MarqueeTipsContentClass"
        :speed="180"
      />
      <!--      :speed="speed"-->
      <div class="kb_content">
        <div class="kb_left">
          <!-- 1-->
          <div class="kb_left_top_title01 kb_title_text">
            <!--            <div class="PG01" />-->
            <!--            <svg-icon icon-class="sccx" />-->
            äº§çº¿åŠ å·¥ä¸­ä»»åŠ¡
            <div style="margin-left: 30px">{{ number1 }} å•</div>
          </div>

          <div class="kb_left_top kb_pd10">
            <div class="kb_left_top02">
      <div style="display: flex;justify-content: space-between;padding:0 20px 20px 20px">
        <!--       å·¦è¾¹-->
        <div style="width: 1400px ;height: 969px;" class="flex_c_b">
          <div>
            <div class="smallTitle">
              <svg-icon icon-class="cxjg" class="svg_class"/>
              äº§çº¿åŠ å·¥ä¸­ä»»åŠ¡
            </div>
            <div class="lineContent horn">
              <div v-for="item in lineContent3" :key="item.workcode" class="kb_left_top_block">
                <div class="kb_block02 kb_pd10">
                  <div>
                    <div>销售单号:{{ item.saleordercode }}</div>
                    <div class="kb_mt5">
                    <div>销售订单:{{ item.saleordercode }}</div>
                    <div class="kb_mt10">
                      åŠ å·¥å•å·:{{ item.workcode }}
                    </div>
                    <div class="kb_mt5">
                    <div class="kb_mt10">
                      äº§å“åç§°:{{ item.partname }}
                    </div>
                    <div class="kb_mt5">
                    <div class="kb_mt10">
                      ä»»åŠ¡æ•°é‡:{{ parseFloat(item.qty) }}
                    </div>
                  </div>
@@ -90,7 +87,7 @@
                          v-else-if="parseFloat(it.ngqty)+parseFloat(it.goodqty)>=parseFloat(it.planqty)"
                          class="circle"
                        />
                        <div v-else class="circleYellow" />
                        <div v-else class="circleYellow"/>
                      </div>
                    </div>
                  </div>
@@ -98,205 +95,179 @@
                </div>
              </div>
            </div>

          </div>
          <!-- 2-->
          <div class="kb_left_bottom kb_pd10">
            <div class="kb_left_bottom_content">
              <div class="content_head kb_title_text">产线加工任务
                <div style="margin-left: 30px">{{ number2 }} å•</div>
              </div>
              <div class="content_body">
                <el-table
                  ref="tableData"
                  :data="tableData"
                  style="width: 100%;"
                  :header-cell-style="headerCellStyle"
                  :cell-style="cellStyle"
                  height="440"
                >
                  <el-table-column
                    prop="RowNum"
                    label="序号"
                    width="50"
                  />
                  <!--                  label="加工状态"-->
                  <el-table-column
                    prop="status"
                    label="状态"
                    width="65"
                  >
                    <template slot-scope="{row}">
                      <div v-if="row.status==='ALLO'">已派发</div>
                      <div v-if="row.status==='START'">开工</div>
                      <div v-if="row.status==='NEW'">新工单</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="lm_date"
                    label="派发时间"
                    width="115"
                  >
                    <template slot-scope="{row}">
                      <div>{{ row.lm_date.substring(0, 10) }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="saleOrderCode"
                    label="销售订单号"
                    width="178"
                  >
                    <template slot-scope="{row}">
                      <div v-if="row.saleOrderCode" class="ellipsis">{{ row.saleOrderCode }}</div>
                      <div v-else>/</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="wo_code"
                    label="加工单号"
                    width="205"
                  >
                    <template slot-scope="{row}">
                      <div v-if="row.wo_code" class="ellipsis">{{ row.wo_code }}</div>
                      <div v-else>/</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="partname"
                    label="产品名称"
                    width="150"
                  >
                    <template slot-scope="{row}">
                      <div v-if="row.partname" class="ellipsis">{{ row.partname }}</div>
                      <div v-else>/</div>
                    </template>
                  </el-table-column>
                  <!--                  <el-table-column-->
                  <!--                    prop="partspec"-->
                  <!--                    label="规格"-->
                  <!--                    width="125"-->
                  <!--                  >-->
                  <!--                    <template slot-scope="{row}">-->
                  <!--                      <div v-if="row.partspec" class="ellipsis">{{ row.partspec }}</div>-->
                  <!--                      <div v-else>/</div>-->
                  <!--                    </template>-->
                  <!--                  </el-table-column>-->
                  <!--                  <el-table-column-->
                  <!--                    prop="name"-->
                  <!--                    label="单位"-->
                  <!--                    width="50"-->
                  <!--                  />-->
                  <el-table-column
                    prop="plan_qty"
                    label="任务数量"
                    width="85"
                  />
                  <el-table-column
                    prop="good_qty"
                    label="完工数量"
                    width="85"
                  />
                  <el-table-column
                    prop="ng_qty"
                    label="不良数量"
                    width="85"
                  />
                  <el-table-column
                    prop="wcl"
                    label="完成率"
                    width="60"
                  >
                    <template slot-scope="{row}">
                      <div>{{ parseFloat((row.good_qty * 100 / row.plan_qty).toFixed(2)) }}%</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="planenddate"
                    label="预计开始"
                    width="115"
                  >
                    <template slot-scope="{row}">
                      <div>{{ row.planenddate.substring(0, 10) }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="planstartdate"
                    label="预计结束"
                    width="125"
                  >
                    <template slot-scope="{row}">
                      <div>{{ row.planstartdate.substring(0, 10) }}</div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
          <div>
            <div class="smallTitle">
              <svg-icon icon-class="cxmc" class="svg_class"/>
              äº§çº¿åŠ å·¥ä»»åŠ¡
            </div>
            <div class="lineContent horn">
              <el-table
                ref="tableDataLeftBottomRef"
                :data="tableDataLeftBottom"
                class="tableData"
                style="width: 100%;"
                :header-cell-style="headerCellStyle"
                :cell-style="cellStyle"
                height="428"
              >
                <el-table-column
                  prop="RowNum"
                  label="序号"
                  width="60"
                />

                <el-table-column
                  prop="status"
                  width="80"
                  label="状态"
                >
                  <template slot-scope="{row}">
                    <div v-if="row.status==='ALLO'">已派发</div>
                    <div v-if="row.status==='START'">开工</div>
                    <div v-if="row.status==='NEW'">新工单</div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="lm_date"
                  label="派发时间"
                  width="120"
                >
                  <template slot-scope="{row}">
                    <div>{{ row.lm_date.substring(0, 10) }}</div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="saleOrderCode"
                  label="销售订单号"
                  width="170"
                >
                  <template slot-scope="{row}">
                    <div v-if="row.saleOrderCode">{{ row.saleOrderCode }}</div>
                    <div v-else>/</div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="wo_code"
                  label="加工单号"
                  width="190"
                />
                <el-table-column
                  prop="partname"
                  label="产品名称"
                  width="350"
                >
                  <template slot-scope="{row}">
                    <div v-if="row.partname" class="ellipsis">{{ row.partname }}</div>
                    <div v-else>/</div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="plan_qty"
                  label="任务数量"
                  width="105"
                />
                <el-table-column
                  prop="good_qty"
                  label="完工数量"
                  width="105"
                />
                <el-table-column
                  prop="ng_qty"
                  label="不良数量"
                  width="105"
                />
                <el-table-column
                  label="完成率"
                  width="105"
                >
                  <template slot-scope="{row}">
                    <div>{{ parseFloat((row.good_qty * 100 / row.plan_qty).toFixed(2)) }}%</div>
                  </template>
                </el-table-column>
                <!--                <el-table-column-->

                <!--                  label="预计开始"-->
                <!--                  width="140"-->
                <!--                >-->
                <!--                  <template slot-scope="{row}">-->
                <!--                    <div>{{ row.planstartdate.substring(0, 10) }}</div>-->
                <!--                  </template>-->
                <!--                </el-table-column>-->
                <!--                <el-table-column-->
                <!--                  prop=""-->
                <!--                  label="预计结束"-->
                <!--                  width="140"-->
                <!--                >-->
                <!--                  <template slot-scope="{row}">-->
                <!--                    <div>{{ row.planenddate.substring(0, 10) }}</div>-->
                <!--                  </template>-->
                <!--                </el-table-column>-->
              </el-table>
            </div>

          </div>
        </div>
        <div class="kb_right kb_pd10">
          <div class="kb_right_top kb_pd10">
            <div class="kb_right_top_content">
              <div class="content_head kb_title_text">当日完工产品数量排行</div>
              <div class="content_body">
                <el-table
                  ref="tableDataRank"
                  :data="tableDataRank"
                  class="tableDataRank"
                  style="width: 100%;"
                  :header-cell-style="headerCellStyle"
                  :cell-style="cellStyle"
                  height="396"
                >
                  <el-table-column
                    type="index"
                    label="序号"
                    width="55"
                  />
                  <el-table-column
                    prop="wkshname"
                    label="车间（供方）"
                    width="120"
                  >
                    <template slot-scope="{row}">
                      <div v-if="row.wkshname" class="ellipsis">{{ row.wkshname }}</div>
                      <div v-else>/</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="linename"
                    label="产线"
                    width="120"
                  >
                    <template slot-scope="{row}">
                      <div v-if="row.linename" class="ellipsis">{{ row.linename }}</div>
                      <div v-else>/</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="partname"
                    width="138"
                    label="产品"
                  >
                    <template slot-scope="{row}">
                      <div v-if="row.partname" class="ellipsis">{{ row.partname }}</div>
                      <div v-else>/</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="good_qty"
                    label="数量"
                    width="100"
                  />
                </el-table>
              </div>
        <!--        å³è¾¹-->
        <div style="width: 450px;height: 969px;" class="flex_c_b">
          <div>
            <div class="smallTitle">
              <svg-icon icon-class="drwg" class="svg_class"/>
              å½“日完工产品数量排行
            </div>
            <div class="lineContent horn">
              <el-table
                ref="tableDataRightTopRef"
                :data="tableDataRightTop"
                class="tableData"
                style="width: 100%;"
                :header-cell-style="headerCellStyle"
                :cell-style="cellStyle"
                height="428"
              >
                <el-table-column
                  type="index"
                  label="序号"
                  width="60"
                />
                <el-table-column
                  prop="linename"
                  width="125"
                  label="产线"
                />
                <el-table-column
                  prop="partname"
                  width="160"
                  label="产品"
                >
                  <template slot-scope="{row}">
                    <div v-if="row.partname" class="ellipsis">{{ row.partname }}</div>
                    <div v-else>/</div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="good_qty"
                  label="数量"
                  width="90"
                >
                  <template slot-scope="{row}">
                    <div>{{ parseFloat(row.good_qty) }}</div>
                  </template>
                </el-table-column>
              </el-table>
            </div>

          </div>
          <div class="kb_right_bottom kb_pd10">
            <div class="kb_right_bottom_content_title kb_title_text">
          <div>
            <div class="smallTitle">
              <svg-icon icon-class="top5" class="svg_class"/>
              ä¸€å‘¨ä¸è‰¯Top5
            </div>
            <div class="kb_right_bottom_content">
              <div id="bar02" style="width: 100%;height:100%" />
            <div class="lineContent horn">
              <div id="bar01" class="flex_c_c" style="width: 100%;height:100%"/>
            </div>

          </div>
        </div>
      </div>
@@ -306,52 +277,33 @@

<script>
import './kbCommon.css'
import { bar02, loadEcharts } from '@/utils/myEcharts'
import {bar02, kbTop, loadEcharts} from '@/utils/myEcharts'
import {
  LineSearchBottomLeftData,
  LineSearchBottomRightData,
  LineSearchTopLeftData,
  LineSearchTopRightData, ShopSearch, WkspReportNotice
  LineSearchTopRightData,
  ShopSearch
} from '@/api/dzkb'
import MarqueeTips from 'vue-marquee-tips'
import {parseTime} from '@/utils'

export default {
  name: 'Index2',
  components: {
    MarqueeTips
  },
  name: 'Cjsc',
  data() {
    return {

      onLine: navigator.onLine, // ç›‘听网络是否在线

      headTime: '',

      lineContent: [],
      tableDataRightTop: [],
      tableDataRightTopTemp: [],
      tableDataLeftBottom: [],
      tableDataLeftBottomTemp: [],
      lineContent3: [],
      ShopArr: ['102'], // è½¦é—´ç¼–码数组   è£…配车间

      leftTopData: [],
      tableData: [],
      tableDataRank: [],
      lineCodeArr: [],
      starsCount: 800, // æ˜Ÿæ˜Ÿæ•°é‡
      distance: 900 // é—´è·

      ShopArr: ['CJ001'], // è½¦é—´ç¼–码数组

      number1: '',
      number2: '',

      MarqueeTipsContent: '', // å…¬å‘Š
      speed: 100, // å…¬å‘Šæ’­æ”¾çš„速度

      MarqueeTipsTask: null,
      ShopSearchTask: null,
      ShopSearchLineTask: null,
      TableDataRollTask: null,
      TableDataRankRollTask: null,
      EchartsTask: null
    }
  },

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

@@ -361,116 +313,70 @@
    }, 1000 * 60 * 120)
  },
  mounted() {
    // ç›‘听网络是否在线
    window.addEventListener('online', this.updateOnlineStatus)
    window.addEventListener('offline', this.updateOnlineStatus)
    this.updateOnlineStatus({ type: this.onLine ? 'online' : 'offline', isFirst: true })
  },
  beforeDestroy() {
    window.removeEventListener('online', this.updateOnlineStatus)
    window.removeEventListener('offline', this.updateOnlineStatus)
    this.getTopBar()

    this.getShopSearch()
    this.setStarsRef()
  },
  methods: {
    // æ›´æ–°ç½‘络状态
    updateOnlineStatus(e) {
      if (e.isFirst) {
        this.getValue()// èŽ·å–值
      } else {
        const loading = this.$loading({
          lock: true,
          text: '断网了，正在拼命联网中，请检查网络是否正常...',
          spinner: 'el-icon-loading',
          customClass: 'osloading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        const { type } = e
        this.onLine = type === 'online'
        if (this.onLine) {
          this.getValue()
          loading.close()
          this.$message.success('网络连接成功！')
        } else {
          clearInterval(this.MarqueeTipsTask)
          clearInterval(this.ShopSearchTask)
          clearInterval(this.ShopSearchLineTask)
          clearInterval(this.TableDataRollTask)
          clearInterval(this.TableDataRankRollTask)
          clearInterval(this.EchartsTask)
          this.$message.error('网络掉线，请关注网络状态！')
        }
      }
    },
    // èŽ·å–值
    async getValue() {
      // await this.getShopSearch()
      await this.getShopSearchLine()

      await this.getEcharts()
      await this.getTableDataRoll()
      await this.getTableDataRankRoll()
      await this.getMarqueeTipsContent()
      await this.getMarqueeTipsContent()
    },
    // èŽ·å–公告
    getMarqueeTipsContent() {
      WkspReportNotice({ shopcode: this.ShopArr.join(',') }).then(res => {
        let contentAll = ''
        res.data.forEach(item => {
          contentAll += item.contents + ' '.padStart(item.contents.toString().length * 2, ' ')
        })
        this.MarqueeTipsContent = contentAll
        this.speed = this.MarqueeTipsContent.length / 10

        this.MarqueeTipsTask = setInterval(() => {
          WkspReportNotice({ shopcode: this.ShopArr.join(',') }).then(res1 => {
            let contentAll = ''
            res1.data.forEach(item => {
              contentAll += item.contents + ' '.padStart(item.contents.toString().length * 2, ' ')
            })
            this.MarqueeTipsContent = contentAll
            this.speed = this.MarqueeTipsContent.length / 10
          })
          // }, this.speed * 1000)
        }, 1000 * 60 * 5)
    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)
        })
      }
      setInterval(() => {
        this.ShopSearchTask = ShopSearch().then(res1 => {
          if (res1.code === '200') {
            this.ShopArr = []
            res1.data.forEach(item => {
              this.ShopArr.push(item.org_code)
            })
          }
        })
      }, 1000 * 30)
      // 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.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)
      //         })
      //       }
      //     })
      //   }, 1000 * 60)
      // }
    },
    // äº§çº¿åŠ å·¥ä¸­ä»»åŠ¡
    getShopSearchLine() {
      let length, count
      LineSearchTopLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
      LineSearchTopLeftData({shopcode: this.ShopArr.join(',')}).then(res => {
        this.lineContent = res.data
        length = this.lineContent.length
        count = Math.ceil(length / 3) // éœ€è¦è½®æ’­çš„组数   3个为一组
        this.lineContent3 = this.lineContent.slice(0, 3)

        this.number1 = this.lineContent.length
      })

      let start = 0
      this.ShopSearchLineTask = setInterval(() => {
      const timer = setInterval(() => {
        if (Math.floor(start / 3) === count && count !== 0) {
          start = 0
          LineSearchTopLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
          LineSearchTopLeftData({shopcode: this.ShopArr.join(',')}).then(res => {
            this.lineContent = res.data
            length = this.lineContent.length
            count = Math.ceil(length / 3) // éœ€è¦è½®æ’­çš„组数   3个为一组
@@ -479,80 +385,85 @@
            this.number1 = this.lineContent.length
          })
        } else if (count === 0) {
          clearInterval(this.ShopSearchLineTask)
          clearInterval(timer)
          this.getShopSearchLine()
        }
        this.lineContent3 = this.lineContent.slice(start, start + 3)
        start = start + 3
      }, 1000 * 3)
      }, 1000 * 10)
    },

    // äº§çº¿åŠ å·¥ä»»åŠ¡
    getTableDataRoll() {
      LineSearchBottomLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
        this.tableData = res.data
        this.number2 = this.tableData.length
    // èŽ·å–右上数据 å½“日完工产品数量排行
    getRightRightData() {
      let startValue = 0 // åˆå§‹å€¼
      const scale = 10// åˆ»åº¦

        const divData = this.$refs.tableData.bodyWrapper
        // æ‹¿åˆ°å…ƒç´ åŽï¼Œå¯¹å…ƒç´ è¿›è¡Œå®šæ—¶å¢žåŠ è·ç¦»é¡¶éƒ¨è·ç¦»ï¼Œå®žçŽ°æ»šåŠ¨æ•ˆæžœ(此配置为每100毫秒移动1像素)
        this.TableDataRollTask = setInterval(() => {
          // å…ƒç´ è‡ªå¢žè·ç¦»é¡¶éƒ¨1像素
          divData.scrollTop += 1
          // divData.scrollTop += divData.scrollHeight / this.tableData.length
          // åˆ¤æ–­å…ƒç´ æ˜¯å¦æ»šåŠ¨åˆ°åº•éƒ¨(可视高度+距离顶部=整个高度)
          if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
            // é‡ç½®table距离顶部距离
            divData.scrollTop = 0
            LineSearchBottomLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
              this.tableData = res.data
              this.number2 = this.tableData.length
              if (this.tableData.length > 10) {
                clearInterval(this.TableDataRollTask)
                this.getTableDataRoll()
              }
            })
      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.getRightRightData()
          }
        }, this.tableData.length <= 10 ? 1000 * 3 : 100)

          nowLoop++
        }, 1000 * 10)
      })
    },
    // å½“日完工产品数量排行
    getTableDataRankRoll() {
      LineSearchTopRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
        this.tableDataRank = res.data
    // äº§çº¿åŠ å·¥ä»»åŠ¡  å·¦ä¸‹æ•°æ®
    getLeftBottomData() {
      let startValue = 0 // åˆå§‹å€¼
      const scale = 10// åˆ»åº¦

        const divData = this.$refs.tableDataRank.bodyWrapper
        // æ‹¿åˆ°å…ƒç´ åŽï¼Œå¯¹å…ƒç´ è¿›è¡Œå®šæ—¶å¢žåŠ è·ç¦»é¡¶éƒ¨è·ç¦»ï¼Œå®žçŽ°æ»šåŠ¨æ•ˆæžœ(此配置为每100毫秒移动1像素)
        this.TableDataRankRollTask = setInterval(() => {
          // å…ƒç´ è‡ªå¢žè·ç¦»é¡¶éƒ¨1像素
          // divData.scrollTop += divData.scrollHeight / this.tableDataRank.length
          divData.scrollTop += 1
          // åˆ¤æ–­å…ƒç´ æ˜¯å¦æ»šåŠ¨åˆ°åº•éƒ¨(可视高度+距离顶部=整个高度)
          if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
            // é‡ç½®table距离顶部距离
            divData.scrollTop = 0
            LineSearchTopRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
              this.tableDataRank = res.data
      LineSearchBottomLeftData({shopcode: this.ShopArr.join(',')}).then(res => {
        this.tableDataLeftBottomTemp = res.data
        this.tableDataLeftBottom = this.tableDataLeftBottomTemp.slice(startValue, startValue + scale)

              if (this.tableDataRank.length > 9) {
                clearInterval(this.TableDataRankRollTask)
                this.getTableDataRankRoll()
              }
            })
        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)
          if (nowLoop === loop) {
            clearInterval(timer)
            this.getLeftBottomData()
          }
        }, this.tableDataRank.length <= 9 ? 1000 * 3 : 100)

          nowLoop++
        }, 1000 * 10)
      })
    },
    // èŽ·å–echarts

    getEcharts() {
      LineSearchBottomRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
        loadEcharts('bar02', bar02(res.data.map(i => i.cont), res.data.map(i => i.name)))
      let dataArr = [30, 20, 20, 18, 10]
      let titlenameArr = ['颜色', '尺寸', '气味', '毛刺', '裂痕']
      LineSearchBottomRightData({shopcode: this.ShopArr.join(',')}).then(res => {
        dataArr = res.data.map(i => i.cont)
        titlenameArr = res.data.map(i => i.name)
        loadEcharts('bar01', bar02(dataArr, titlenameArr))
      })

      this.EchartsTask = setInterval(() => {
        LineSearchBottomRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
          loadEcharts('bar02', bar02(res.data.map(i => i.cont), res.data.map(i => i.name)))
      setInterval(() => {
        LineSearchBottomRightData({shopcode: this.ShopArr.join(',')}).then(res => {
          dataArr = res.data.map(i => i.cont)
          titlenameArr = res.data.map(i => i.name)
          loadEcharts('bar01', bar02(dataArr, titlenameArr))
        })
      }, 1000 * 15)
      }, 1000 * 10)
    },
    // èŽ·å–topEcharts
    getTopBar() {
      loadEcharts('topBarLeft', kbTop())
      loadEcharts('topBarRight', kbTop())
    },
    // èŽ·å–当前时间
    getNowTime() {
@@ -572,266 +483,136 @@
    },
    headerCellStyle() {
      return {
        backgroundColor: 'rgb(30 ,33, 46)',
        backgroundColor: '#000',
        padding: '10px 0',
        textAlign: 'center',
        color: '#07acc2',
        border: 'none'
        border: 'none',
        fontSize: '18px'
      }
    },
    cellStyle() {
      return {
        padding: '8px 0',
        padding: '7px 0',
        textAlign: 'center',
        backgroundColor: 'rgba(30, 33, 46  )',
        // backgroundColor: 'transparent',
        backgroundColor: '#000',
        color: '#fff',
        border: 'none'
        border: 'none',
        fontSize: '18px'
      }
    }

  }

}
</script>

<style scoped lang="scss">
$kbBorderColor: rgba(9, 216, 242, 0.4);
$kbBackgroundColor: rgba(30, 33, 46, 0.6);
.kb_content {
  display: flex;
  position: relative;
  height: 990px;
  width: 100%;
  letter-spacing: 2px;
  color: #fff;
<style lang="scss" scoped>
$main_color: #09d8f2;
$color01: #00FFFF;

  .kb_left {
    width: 1345px;
    height: 100%;
    padding-left: 5px;

    .kb_left_top_title01 {
      position: absolute;
      top: 37px;
      left: 15px;
      display: flex;
      color: #00ffff;

      .PG01 {
        background: url("../../assets/images/GP_1.png") no-repeat;
        width: 28px;
        height: 12px;
        margin-top: 4px;
        margin-right: 10px;
      }
    }

    .kb_left_top {
      height: 495px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      padding-top: 70px;

      .kb_left_top02 {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        border: 1px solid $kbBorderColor;
        height: 400px;
        border-radius: 5px;
        background-color: $kbBackgroundColor;

        .kb_left_top_block {
          width: 100%;
          height: 133px;
          display: flex;
          font-size: 17px;
          border-bottom: 1px solid $kbBorderColor;
          justify-content: flex-start;

          .kb_block02 {
            width: 304px;
            display: flex;
            align-items: center;
            border-right: 1px solid $kbBorderColor;
          }

          .kb_block03 {
            width: 1020px;
            font-size: 17px;
            display: flex;
            flex-direction: column;
            //font-size: 12px;
            border-radius: 5px;

            .kb_block03_content {
              border: 1px solid $kbBorderColor;
              width: 180px;
              height: 80px;
              margin-right: 15px;
              display: flex;
              flex-direction: column;

              .content01 {
                height: 30px;
                width: 100%;
                border-bottom: 1px solid $kbBorderColor;
                display: flex;
                align-items: center;
                justify-content: center;
              }

              .content02Parent {
                display: flex;

                .content02 {
                  width: 60px;
                  border-right: 1px solid $kbBorderColor;

                  .content02_1 {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    //height: 50%;
                    height: 25px;
                  }

                  .content02_2 {
                    height: 25px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                  }

                  .borderTop {
                    border-top: 1px solid $kbBorderColor;
                  }
                }
              }

            }
          }

          .kb_block03_02 {
            margin-top: 7px;
            display: flex;

            .kb_block03_02_content {
              width: 180px;
              margin-right: 15px;

              .content01 {
                .circle {
                  width: 26px;
                  height: 26px;
                  background-color: #00ff8b;
                  border-radius: 50%;
                }

              }

            }
          }

        }

        .kb_left_top_block:nth-child(3n) {
          border-bottom: none !important;
        }
      }
    }

    .kb_left_bottom {
      height: 495px;

      .kb_left_bottom_content {
        height: 460px;
        display: flex;
        flex-direction: column;

        .content_head {
          display: flex;
          line-height: 20px;
          margin-bottom: 10px;
          margin-top: -10px;
          color: #00ffff;

        }

        .content_body {
          border: 1px solid $kbBorderColor;
        }
      }
    }
  }

  .kb_right {
    width: 575px;
    height: 100%;

    .kb_right_top {
      margin-top: 30px;
      margin-bottom: -30px;
      height: 476px;
      width: 100%;

      .kb_right_top_content {
        height: 430px;
        display: flex;
        flex-direction: column;

        .content_head {
          //font-size: 18px;
          line-height: 20px;
          margin-bottom: 10px;
          margin-top: -10px;
          color: #00ffff;
        }

        .content_body {
          border: 1px solid $kbBorderColor;
        }
      }
    }

    .kb_right_bottom {
      height: 482px;
      margin-top: 8px;

      .kb_right_bottom_content_title {
        color: #00ffff;
        margin-bottom: 5px;
        margin-top: -12px;
      }

      .kb_right_bottom_content {
        border: 1px solid $kbBorderColor;
        height: 441px;
        width: 100%;
        border-radius: 5px;
        background-color: $kbBackgroundColor;
      }
    }
  }
.tableData {
  background: #000;
}

::v-deep .el-table::before {
.el-table::before {
  height: 0;
}

::v-deep .el-table__body-wrapper {
  background-color: rgba(30, 33, 46);
.el-table__empty-text {
  color: $main_color;
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  /* width: 0;宽度为0暗藏 */
  width: 0;
.kb_left_top_block {
  width: 100%;
  height: 143px;
  display: flex;
  font-size: 16px;
  border-bottom: 1px solid $main_color;
  justify-content: flex-start;

  .kb_block02 {
    width: 304px;
    display: flex;
    align-items: center;
    border-right: 1px solid $main_color;
  }

  .kb_block03 {
    width: 1020px;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    border-radius: 5px;

    .kb_block03_content {
      border: 1px solid $main_color;
      width: 180px;
      height: 80px;
      margin-right: 15px;
      display: flex;
      flex-direction: column;

      .content01 {
        height: 30px;
        width: 100%;
        border-bottom: 1px solid $main_color;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .content02Parent {
        display: flex;

        .content02 {
          width: 60px;
          border-right: 1px solid $main_color;

          .content02_1 {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 25px;
          }

          .content02_2 {
            height: 25px;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .borderTop {
            border-top: 1px solid $main_color;
          }
        }
      }

    }
  }

  .kb_block03_02 {
    margin-top: 15px;
    display: flex;

    .kb_block03_02_content {
      width: 180px;
      margin-right: 15px;

      .content01 {
        .circle {
          width: 26px;
          height: 26px;
          background-color: #00ff8b;
          border-radius: 50%;
        }
      }
    }
  }
}

::v-deep .cell {
  padding: 0 !important;
  font-size: 18px;
.kb_left_top_block:nth-child(3n) {
  border-bottom: none !important;
}

.circleYellow {
@@ -840,4 +621,40 @@
  background-color: rgb(255 255 0);
  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;
}
</style>

 src/views/wlgl/ckdy.vue

@@ -5,12 +5,12 @@
      <div class="bodyTopButtonGroup" style="justify-content: space-between">
        <el-button v-waves type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">新增</el-button>
        <div style="display: flex">
          <el-button
            v-waves
            icon="el-icon-refresh-right"
            @click="syncSeaveSearchWhareHouseLocation"
          >同步仓库/库位
          </el-button>
<!--          <el-button-->
<!--            v-waves-->
<!--            icon="el-icon-refresh-right"-->
<!--            @click="syncSeaveSearchWhareHouseLocation"-->
<!--          >同步仓库/库位-->
<!--          </el-button>-->
          <el-button v-waves icon="el-icon-download" @click="upload">导入</el-button>
        </div>


 src/views/zzmx/chda.vue

@@ -6,26 +6,26 @@

        <el-button v-waves type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">新增</el-button>
        <!--        <el-button v-waves type="primary" icon="el-icon-office-building" @click="office">单位</el-button>-->
        <div style="display: flex">
          <el-button
            v-waves
            icon="el-icon-refresh-right"
            @click="syncSeaveSearchUnit"
          >同步计量单位
          </el-button>
          <el-button
            v-waves
            icon="el-icon-refresh-right"
            @click="syncInventoryFileSelect"
          >同步存货档案
          </el-button>
          <el-button
            v-waves
            icon="el-icon-refresh-right"
            @click="syncStockTypeSelect"
          >同步存货类型
          </el-button>
        </div>
<!--        <div style="display: flex">-->
<!--          <el-button-->
<!--            v-waves-->
<!--            icon="el-icon-refresh-right"-->
<!--            @click="syncSeaveSearchUnit"-->
<!--          >同步计量单位-->
<!--          </el-button>-->
<!--          <el-button-->
<!--            v-waves-->
<!--            icon="el-icon-refresh-right"-->
<!--            @click="syncInventoryFileSelect"-->
<!--          >同步存货档案-->
<!--          </el-button>-->
<!--          <el-button-->
<!--            v-waves-->
<!--            icon="el-icon-refresh-right"-->
<!--            @click="syncStockTypeSelect"-->
<!--          >同步存货类型-->
<!--          </el-button>-->
<!--        </div>-->
        <!--        <el-button v-waves type="primary" icon="el-icon-upload2" @click="upload">导入</el-button>-->
      </div>