1. MES工单新增报废补单工单查询

loulijun2021

2023-03-07 406539dc819bfa5e98dda354006c6f55cc808b14

 src/utils/myEcharts.js

@@ -375,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,
@@ -393,12 +394,13 @@
      }
    },
    grid: {
      left: '10%',
      right: '5%',
      left: '5%',
      right: '10%',
      bottom: '0%',
      top: '10%',
      containLabel: true
    },
    // animation: false, // 取消动画
    xAxis: {
      show: false
    },
@@ -421,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 + '} '
@@ -494,7 +496,7 @@
            show: true,
            position: 'right',
            formatter: '{c}',
            fontSize: 14,
            fontSize: 20,
            color: '#fff'
            // formatter: '{c}%',
          }
@@ -800,6 +802,7 @@
  var max = Math.ceil(255 / 10) * 10

  const option = {
    animation: false,
    backgroundColor: 'transparent',
    grid: {
      left: '0%',
@@ -900,8 +903,9 @@
}

// 车间质量左下周不良
export function line02() {
export function line02(dataX, dataY) {
  return {
    animation: false,
    backgroundColor: 'transparent',
    tooltip: {},
    // title: {
@@ -933,34 +937,35 @@
        borderColor: '#fff'
      }
    },
    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: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    }],
    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,
@@ -969,7 +974,7 @@
        type: 'value',
        axisLabel: {
          textStyle: {
            fontSize: 14,
            fontSize: 18,
            color: colorY
          }
        },
@@ -1015,7 +1020,8 @@
          show: true,
          position: 'top',
          textStyle: {
            color: '#fff'
            color: '#fff',
            fontSize: 16
          }
        },
        itemStyle: {
@@ -1043,7 +1049,7 @@
            shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
          }
        },
        data: [393, 438, 485, 631, 689, 824, 700]
        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)]
      }
      //   {
@@ -1088,23 +1094,25 @@
}

// 车间质量右上 日不良
export function bar04() {
export function bar04(resValueArr) {
  // let data = resValueArr.map(({ eqp_name, cont }) => ({ name: eqp_name, value: cont }))//替换数组对象中的键名

  const data = [
    {
      name: '产线一',
      value: 100
      name: '装配一线',
      value: resValueArr.find(i => i.eqp_name === '装配一线') ? resValueArr.find(i => i.eqp_name === '装配一线').cont : 0
    },
    {
      name: '产线二',
      value: 200
      name: '装配二线',
      value: resValueArr.find(i => i.eqp_name === '装配二线') ? resValueArr.find(i => i.eqp_name === '装配二线').cont : 0
    },
    {
      name: '产线三',
      value: 64
      name: '装配三线',
      value: resValueArr.find(i => i.eqp_name === '装配三线') ? resValueArr.find(i => i.eqp_name === '装配三线').cont : 0
    },
    {
      name: '产线四',
      value: 44
      name: '装配四线',
      value: resValueArr.find(i => i.eqp_name === '装配四线') ? resValueArr.find(i => i.eqp_name === '装配四线').cont : 0
    }
  ]
  const getSymbolData = (data) => {
@@ -1119,6 +1127,7 @@
  }

  const option = {
    animation: false,
    backgroundColor: 'transparent',
    grid: {
      top: '0%',
@@ -1158,7 +1167,7 @@
          title: {
            width: 50,
            align: 'right',
            fontSize: 18
            fontSize: 20
          }
        }
      }
@@ -1183,7 +1192,7 @@
        align: 'left',
        verticalAlign: 'center',
        lineHeight: 40,
        fontSize: 18,
        fontSize: 20,
        formatter: function(value, index) {
          return data[index].value + ''
        }
@@ -1195,7 +1204,10 @@
        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: [50, 50],
        symbolSize: function(params) {
          return params === 0 ? [0, 0] : [50, 50]
        },
        symbolOffset: [20, 0],
        z: 12,
        itemStyle: {
@@ -1219,22 +1231,22 @@
            color: 'rgba(41, 162, 245, 1)',
            barBorderRadius: 10
          }
        // color: '#A71A2B',
        // barBorderRadius: 4,
          // color: '#A71A2B',
          // barBorderRadius: 4,
        }
      // label: {
      //     normal: {
      //         color: '#fff',
      //         show: true,
      //         position: ["-80px", 0],
      //         textStyle: {
      //             fontSize: 16
      //         },
      //         formatter: function(a, b) {
      //             return a.name
      //         }
      //     }
      // }
        // label: {
        //     normal: {
        //         color: '#fff',
        //         show: true,
        //         position: ["-80px", 0],
        //         textStyle: {
        //             fontSize: 16
        //         },
        //         formatter: function(a, b) {
        //             return a.name
        //         }
        //     }
        // }
      }]
  }

@@ -1242,29 +1254,11 @@
}

// 车间质量右下  周不良
export function pie02() {
export function pie02(resValueArr) {
  const bgColor = 'transparent'
  const title = '总不良数'
  const color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0']
  const echartData = [
    {
      name: '产线一',
      value: '456'
    },
    {
      name: '产线二',
      value: '123'
    },
    {
      name: '产线三',
      value: '312'
    },
    {
      name: '产线四',
      value: '222'
    }
  ]

  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, ',')
@@ -1274,6 +1268,7 @@
  }, 0)

  const option = {
    animation: false,
    backgroundColor: bgColor,
    color: color,
    // tooltip: {
@@ -1286,29 +1281,29 @@
      textStyle: {
        rich: {
          name: {
            fontSize: 18,
            fontSize: 22,
            fontWeight: 'normal',
            color: '#fff',
            padding: [10, 0]
          },
          val: {
            fontSize: 32,
            fontSize: 22,
            fontWeight: 'bold',
            color: '#fff'
          }
        }
      }
    }
    // {
    //   text: '单位：个',
    //   top: 20,
    //   left: 20,
    //   textStyle: {
    //     fontSize: 14,
    //     color: '#666666',
    //     fontWeight: 400
    //   }
    // }
      // {
      //   text: '单位：个',
      //   top: 20,
      //   left: 20,
      //   textStyle: {
      //     fontSize: 14,
      //     color: '#666666',
      //     fontWeight: 400
      //   }
      // }
    ],
    // legend: {
    //     orient: 'vertical',
@@ -1357,7 +1352,7 @@
          normal: {
            // showAbove: false,
            length: 20,
            length2: 45,
            length2: 35,
            lineStyle: {
              color: '#fff'
            }
@@ -1368,17 +1363,17 @@
            formatter: params => {
              return (
                '{icon|●}{name|' + params.name + '}{value|' +
              formatNumber(params.value) + '}'
                formatNumber(params.value) + '}'
              )
            },
            padding: [0, -50, 25, -50],
            rich: {
              icon: {
                fontSize: 16,
                fontSize: 18,
                color: 'red'
              },
              name: {
                fontSize: 16,
                fontSize: 18,
                padding: [0, 10, 0, 4],
                color: '#fff'
              },
@@ -1394,3 +1389,392 @@
  }
  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
}