1.看板字体整体增大

loulijun2021

2022-11-22 20ac76481e2748bec983dbf460cd44995ae08c0c

1.看板字体整体增大

 src/utils/myEcharts.js

@@ -399,6 +399,7 @@
      top: '10%',
      containLabel: true
    },
    // animation: false, // 取消动画
    xAxis: {
      show: false
    },
@@ -421,7 +422,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 +495,7 @@
            show: true,
            position: 'right',
            formatter: '{c}',
            fontSize: 14,
            fontSize: 20,
            color: '#fff'
            // formatter: '{c}%',
          }
@@ -933,34 +934,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: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      }],
    yAxis: [
      {
        // max: 800,
@@ -969,7 +971,7 @@
        type: 'value',
        axisLabel: {
          textStyle: {
            fontSize: 14,
            fontSize: 18,
            color: colorY
          }
        },
@@ -1015,7 +1017,8 @@
          show: true,
          position: 'top',
          textStyle: {
            color: '#fff'
            color: '#fff',
            fontSize: 16
          }
        },
        itemStyle: {
@@ -1158,7 +1161,7 @@
          title: {
            width: 50,
            align: 'right',
            fontSize: 18
            fontSize: 20
          }
        }
      }
@@ -1183,7 +1186,7 @@
        align: 'left',
        verticalAlign: 'center',
        lineHeight: 40,
        fontSize: 18,
        fontSize: 20,
        formatter: function(value, index) {
          return data[index].value + ''
        }
@@ -1286,13 +1289,13 @@
      textStyle: {
        rich: {
          name: {
            fontSize: 18,
            fontSize: 22,
            fontWeight: 'normal',
            color: '#fff',
            padding: [10, 0]
          },
          val: {
            fontSize: 32,
            fontSize: 22,
            fontWeight: 'bold',
            color: '#fff'
          }
@@ -1374,11 +1377,11 @@
            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 +1397,131 @@
  }
  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, // 取消动画
    // 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
}

 src/views/kb/cjsc.vue

@@ -31,18 +31,18 @@
                <el-table-column
                  prop="xsdd"
                  label="销售单号"
                  width="141"
                  width="165"
                />

                <el-table-column
                  prop="cpmc"
                  width="133"
                  width="120"
                  label="产品名称"
                />
                <el-table-column
                  prop="sl"
                  label="数量"
                  width="100"
                  width="80"
                />
              </el-table>
            </div>
@@ -65,18 +65,18 @@
                <el-table-column
                  prop="xsdd"
                  label="销售单号"
                  width="141"
                  width="165"
                />

                <el-table-column
                  prop="cpmc"
                  width="133"
                  width="120"
                  label="产品名称"
                />
                <el-table-column
                  prop="sl"
                  label="数量"
                  width="100"
                  width="80"
                />
              </el-table>
            </div>
@@ -101,11 +101,11 @@
              <el-table-column
                prop="xh"
                label="序号"
                width="50"
                width="60"
              >
                <template slot-scope="{row}">
                  <div
                    :style="{color:row.cxmc==='装配一线'?'#ffff00':row.cxmc==='装配二线'?'#FF3333':row.cxmc==='装配三线'?'#FF00FF':'#00FFFF'}"
                    :style="{color:row.cxmc==='装配一线'?'#FFFF77':row.cxmc==='装配二线'?'#FF8888':row.cxmc==='装配三线'?'#D28EFF':'#66FFFF'}"
                  > {{ row.xh }}
                  </div>
                </template>
@@ -113,35 +113,35 @@
              <el-table-column
                prop="jgdh"
                label="加工单号"
                width="150"
                width="165"
              >
                <template slot-scope="{row}">
                  <div
                    :style="{color:row.cxmc==='装配一线'?'#ffff00':row.cxmc==='装配二线'?'#FF3333':row.cxmc==='装配三线'?'#FF00FF':'#00FFFF'}"
                    :style="{color:row.cxmc==='装配一线'?'#FFFF77':row.cxmc==='装配二线'?'#FF8888':row.cxmc==='装配三线'?'#D28EFF':'#66FFFF'}"
                  > {{ row.jgdh }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="cxmc"
                width="130"
                width="100"
                label="产线名称"
              >
                <template slot-scope="{row}">
                  <div
                    :style="{color:row.cxmc==='装配一线'?'#ffff00':row.cxmc==='装配二线'?'#FF3333':row.cxmc==='装配三线'?'#FF00FF':'#00FFFF'}"
                    :style="{color:row.cxmc==='装配一线'?'#FFFF77':row.cxmc==='装配二线'?'#FF8888':row.cxmc==='装配三线'?'#D28EFF':'#66FFFF'}"
                  > {{ row.cxmc }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="cpmc"
                width="150"
                width="140"
                label="产品名称"
              >
                <template slot-scope="{row}">
                  <div
                    :style="{color:row.cxmc==='装配一线'?'#ffff00':row.cxmc==='装配二线'?'#FF3333':row.cxmc==='装配三线'?'#FF00FF':'#00FFFF'}"
                    :style="{color:row.cxmc==='装配一线'?'#FFFF77':row.cxmc==='装配二线'?'#FF8888':row.cxmc==='装配三线'?'#D28EFF':'#66FFFF'}"
                  > {{ row.cpmc }}
                  </div>
                </template>
@@ -153,7 +153,7 @@
              >
                <template slot-scope="{row}">
                  <div
                    :style="{color:row.cxmc==='装配一线'?'#ffff00':row.cxmc==='装配二线'?'#FF3333':row.cxmc==='装配三线'?'#FF00FF':'#00FFFF'}"
                    :style="{color:row.cxmc==='装配一线'?'#FFFF77':row.cxmc==='装配二线'?'#FF8888':row.cxmc==='装配三线'?'#D28EFF':'#66FFFF'}"
                  > {{ row.scsl }}
                  </div>
                </template>
@@ -161,11 +161,11 @@
              <el-table-column
                prop="yjks"
                label="预计开始"
                width="150"
                width="130"
              >
                <template slot-scope="{row}">
                  <div
                    :style="{color:row.cxmc==='装配一线'?'#ffff00':row.cxmc==='装配二线'?'#FF3333':row.cxmc==='装配三线'?'#FF00FF':'#00FFFF'}"
                    :style="{color:row.cxmc==='装配一线'?'#FFFF77':row.cxmc==='装配二线'?'#FF8888':row.cxmc==='装配三线'?'#D28EFF':'#66FFFF'}"
                  > {{ row.yjks }}
                  </div>
                </template>
@@ -173,11 +173,11 @@
              <el-table-column
                prop="yjwg"
                label="预计完工"
                width="150"
                width="130"
              >
                <template slot-scope="{row}">
                  <div
                    :style="{color:row.cxmc==='装配一线'?'#ffff00':row.cxmc==='装配二线'?'#FF3333':row.cxmc==='装配三线'?'#FF00FF':'#00FFFF'}"
                    :style="{color:row.cxmc==='装配一线'?'#FFFF77':row.cxmc==='装配二线'?'#FF8888':row.cxmc==='装配三线'?'#D28EFF':'#66FFFF'}"
                  > {{ row.yjwg }}
                  </div>
                </template>
@@ -189,21 +189,22 @@
              >
                <template slot-scope="{row}">
                  <div
                    :style="{color:row.cxmc==='装配一线'?'#ffff00':row.cxmc==='装配二线'?'#FF3333':row.cxmc==='装配三线'?'#FF00FF':'#00FFFF'}"
                    :style="{color:row.cxmc==='装配一线'?'#FFFF77':row.cxmc==='装配二线'?'#FF8888':row.cxmc==='装配三线'?'#D28EFF':'#66FFFF'}"
                  > {{ row.gx }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="scjd"
                prop="scjdxxx"
                label="生产进度"
                width="90"
                width="130"
              >
                <template slot-scope="{row}">
                  <div
                    :style="{color:row.cxmc==='装配一线'?'#ffff00':row.cxmc==='装配二线'?'#FF3333':row.cxmc==='装配三线'?'#FF00FF':'#00FFFF'}"
                  > {{ row.scjd }}
                  </div>
                  <!--                  <div-->
                  <!--                    :style="{color:row.cxmc==='装配一线'?'#FFFF77':row.cxmc==='装配二线'?'#FF8888':row.cxmc==='装配三线'?'#D28EFF':'#66FFFF'}"-->
                  <!--                  > {{ row.scjdxxx }}-->
                  <!--                  </div>-->
                  <div :id="'progress'+row.xh" style="width: 100%;height:30px" />
                </template>
              </el-table-column>
            </el-table>
@@ -228,18 +229,18 @@
                <el-table-column
                  prop="xsdd"
                  label="销售单号"
                  width="141"
                  width="165"
                />

                <el-table-column
                  prop="cpmc"
                  width="133"
                  width="120"
                  label="产品名称"
                />
                <el-table-column
                  prop="sl"
                  label="数量"
                  width="100"
                  width="80"
                />
              </el-table>
            </div>
@@ -262,18 +263,18 @@
                <el-table-column
                  prop="xsdd"
                  label="销售单号"
                  width="141"
                  width="165"
                />

                <el-table-column
                  prop="cpmc"
                  width="133"
                  width="120"
                  label="产品名称"
                />
                <el-table-column
                  prop="sl"
                  label="数量"
                  width="100"
                  width="80"
                />
              </el-table>
            </div>
@@ -287,7 +288,7 @@

<script>
import './kbCommon.css'
import { kbTop, loadEcharts } from '@/utils/myEcharts'
import { kbTop, line02, loadEcharts, progress } from '@/utils/myEcharts'

export default {
  name: 'Cjsc',
@@ -332,7 +333,8 @@
          yjks: '2022-10-01',
          yjwg: '2022-10-10',
          gx: '工序一',
          scjd: '10/20'
          scjd1: '20',
          scjd2: '30'
        },
        {
          xh: 2,
@@ -343,7 +345,8 @@
          yjks: '2022-10-01',
          yjwg: '2022-10-10',
          gx: '工序一',
          scjd: '10/20'
          scjd1: '10',
          scjd2: '20'
        },
        {
          xh: 3,
@@ -354,7 +357,8 @@
          yjks: '2022-10-01',
          yjwg: '2022-10-10',
          gx: '工序一',
          scjd: '10/20'
          scjd1: '50',
          scjd2: '100'
        },
        {
          xh: 4,
@@ -365,7 +369,8 @@
          yjks: '2022-10-01',
          yjwg: '2022-10-10',
          gx: '工序一',
          scjd: '10/20'
          scjd1: '20',
          scjd2: '60'
        },
        {
          xh: 5,
@@ -376,7 +381,8 @@
          yjks: '2022-10-01',
          yjwg: '2022-10-10',
          gx: '工序一',
          scjd: '10/20'
          scjd1: '50',
          scjd2: '60'
        },
        {
          xh: 6,
@@ -387,7 +393,8 @@
          yjks: '2022-10-01',
          yjwg: '2022-10-10',
          gx: '工序一',
          scjd: '10/20'
          scjd1: '10',
          scjd2: '20'
        },
        {
          xh: 7,
@@ -398,7 +405,8 @@
          yjks: '2022-10-01',
          yjwg: '2022-10-10',
          gx: '工序一',
          scjd: '10/20'
          scjd1: '10',
          scjd2: '20'
        },
        {
          xh: 8,
@@ -409,7 +417,8 @@
          yjks: '2022-10-01',
          yjwg: '2022-10-10',
          gx: '工序一',
          scjd: '10/20'
          scjd1: '30',
          scjd2: '30'
        },
        {
          xh: 9,
@@ -420,7 +429,8 @@
          yjks: '2022-10-01',
          yjwg: '2022-10-10',
          gx: '工序一',
          scjd: '10/20'
          scjd1: '10',
          scjd2: '20'
        },
        {
          xh: 10,
@@ -431,7 +441,8 @@
          yjks: '2022-10-01',
          yjwg: '2022-10-10',
          gx: '工序一',
          scjd: '10/20'
          scjd1: '1',
          scjd2: '2'
        },
        {
          xh: 11,
@@ -442,7 +453,8 @@
          yjks: '2022-10-01',
          yjwg: '2022-10-10',
          gx: '工序一',
          scjd: '10/20'
          scjd1: '10',
          scjd2: '20'
        },
        {
          xh: 12,
@@ -453,7 +465,8 @@
          yjks: '2022-10-01',
          yjwg: '2022-10-10',
          gx: '工序一',
          scjd: '10/20'
          scjd1: '1000',
          scjd2: '1000'
        },
        {
          xh: 13,
@@ -464,7 +477,8 @@
          yjks: '2022-10-01',
          yjwg: '2022-10-10',
          gx: '工序一',
          scjd: '10/20'
          scjd1: '16',
          scjd2: '33'
        },
        {
          xh: 14,
@@ -475,7 +489,8 @@
          yjks: '2022-10-01',
          yjwg: '2022-10-10',
          gx: '工序一',
          scjd: '10/20'
          scjd1: '19',
          scjd2: '81'
        },
        {
          xh: 15,
@@ -486,7 +501,8 @@
          yjks: '2022-10-01',
          yjwg: '2022-10-10',
          gx: '工序一',
          scjd: '10/20'
          scjd1: '100',
          scjd2: '200'
        },
        {
          xh: 16,
@@ -497,7 +513,8 @@
          yjks: '2022-10-01',
          yjwg: '2022-10-10',
          gx: '工序一',
          scjd: '10/20'
          scjd1: '1',
          scjd2: '2'
        },
        {
          xh: 17,
@@ -508,7 +525,8 @@
          yjks: '2022-10-01',
          yjwg: '2022-10-10',
          gx: '工序一',
          scjd: '10/20'
          scjd1: '10',
          scjd2: '20'
        },
        {
          xh: 18,
@@ -519,7 +537,8 @@
          yjks: '2022-10-01',
          yjwg: '2022-10-10',
          gx: '工序一',
          scjd: '10/20'
          scjd1: '1',
          scjd2: '2'
        },
        {
          xh: 19,
@@ -530,7 +549,8 @@
          yjks: '2022-10-01',
          yjwg: '2022-10-10',
          gx: '工序一',
          scjd: '10/20'
          scjd1: '10',
          scjd2: '20'
        },
        {
          xh: 20,
@@ -541,7 +561,8 @@
          yjks: '2022-10-01',
          yjwg: '2022-10-10',
          gx: '工序一',
          scjd: '10/20'
          scjd1: '10',
          scjd2: '20'
        },
        {
          xh: 21,
@@ -552,7 +573,8 @@
          yjks: '2022-10-01',
          yjwg: '2022-10-10',
          gx: '工序一',
          scjd: '10/20'
          scjd1: '10',
          scjd2: '20'
        },
        {
          xh: 22,
@@ -563,7 +585,8 @@
          yjks: '2022-10-01',
          yjwg: '2022-10-10',
          gx: '工序一',
          scjd: '10/20'
          scjd1: '1',
          scjd2: '2'
        },
        {
          xh: 23,
@@ -574,7 +597,8 @@
          yjks: '2022-10-01',
          yjwg: '2022-10-10',
          gx: '工序一',
          scjd: '10/20'
          scjd1: '10',
          scjd2: '20'
        },
        {
          xh: 24,
@@ -585,7 +609,8 @@
          yjks: '2022-10-01',
          yjwg: '2022-10-10',
          gx: '工序一',
          scjd: '10/20'
          scjd1: '10',
          scjd2: '20'
        },
        {
          xh: 25,
@@ -596,7 +621,8 @@
          yjks: '2022-10-01',
          yjwg: '2022-10-10',
          gx: '工序一',
          scjd: '10/20'
          scjd1: '10',
          scjd2: '20'
        },
        {
          xh: 26,
@@ -607,7 +633,8 @@
          yjks: '2022-10-01',
          yjwg: '2022-10-10',
          gx: '工序一',
          scjd: '10/20'
          scjd1: '10',
          scjd2: '20'
        },
        {
          xh: 27,
@@ -618,7 +645,8 @@
          yjks: '2022-10-01',
          yjwg: '2022-10-10',
          gx: '工序一',
          scjd: '10/20'
          scjd1: '10',
          scjd2: '20'
        }
      ]
    }
@@ -640,7 +668,7 @@
    // 中间部分的表格
    getCenterTableDataSetInterval() {
      let startValue = 0 // 初始值
      const scale = 23// 刻度
      const scale = 20// 刻度

      this.tableDataCenterTop = this.tableDataCenterTopTemp.slice(startValue, startValue + scale)

@@ -653,29 +681,39 @@
        if (nowLoop === loop) {
          this.getCenterTableDataSetInterval()
        }

        nowLoop++
      }, 5000)
        this.$nextTick(() => {
          this.tableDataCenterTop.forEach(i => {
            loadEcharts('progress' + i.xh, progress(i.scjd1, i.scjd2))
          })
        })
      }, 1000 * 10)

      this.$nextTick(() => {
        this.tableDataCenterTop.forEach(i => {
          loadEcharts('progress' + i.xh, progress(i.scjd1, i.scjd2))
        })
      })
    },

    // 定时刷新表格数据
    getTableDataSetInterval() {
      let startValue = 0 // 初始值
      const startValue = 0 // 初始值
      const scale = 10// 刻度

      this.tableDataLeftTop = this.tableDataLeftTopTemp.slice(startValue, startValue + scale)

      const loop = Math.floor(this.tableDataLeftTopTemp.length / scale)// 需要循环的次数
      let nowLoop = 0// 当前循环的次数

      setInterval(() => {
        startValue = startValue + scale
        this.tableDataLeftTop = this.tableDataLeftTopTemp.slice(startValue, startValue + scale)
        if (nowLoop === loop) {
          this.getTableDataSetInterval()
        }
        nowLoop++
      }, 5000)
      //
      // const loop = Math.floor(this.tableDataLeftTopTemp.length / scale)// 需要循环的次数
      // let nowLoop = 0// 当前循环的次数
      //
      // setInterval(() => {
      //   startValue = startValue + scale
      //   this.tableDataLeftTop = this.tableDataLeftTopTemp.slice(startValue, startValue + scale)
      //   if (nowLoop === loop) {
      //     this.getTableDataSetInterval()
      //   }
      //   nowLoop++
      // }, 5000)
    },

    // 获取topEcharts
@@ -706,7 +744,8 @@
        padding: '10px 0',
        textAlign: 'center',
        color: '#07acc2',
        border: 'none'
        border: 'none',
        fontSize: '18px'
      }
    },
    cellStyle() {
@@ -717,7 +756,8 @@
        backgroundColor: '#000',
        // backgroundColor: 'transparent',
        color: '#fff',
        border: 'none'
        border: 'none',
        fontSize: '18px'
      }
    },
    headerCellStyleCenter() {
@@ -727,16 +767,18 @@
        padding: '10px 0',
        textAlign: 'center',
        color: '#07acc2',
        border: 'none'
        border: 'none',
        fontSize: '18px'
      }
    },
    cellStyleCenter() {
      return {
        padding: '7.5px 0',
        padding: '7px 0',
        textAlign: 'center',
        backgroundColor: '#000',
        color: '#fff',
        border: 'none'
        border: 'none',
        fontSize: '18px'
      }
    }
  }
@@ -747,45 +789,17 @@
<style lang="scss" scoped>
$main_color: #09d8f2;
$color01: #00FFFF;
.lineContent {
  height: 435px;
  border: 1px solid $main_color;
  //outline: 1px solid $main_color;
  border-radius: 5px;
  padding: 2px;
}

.lineContentCenter {
  height: 935px;
  border: 1px solid $main_color;
  //outline: 1px solid $main_color;
  border-radius: 5px;
  padding: 2px;
}

.horn {
  background: linear-gradient($color01, $color01) left top,
  linear-gradient($color01, $color01) left top,
  linear-gradient($color01, $color01) right top,
  linear-gradient($color01, $color01) right top,
  linear-gradient($color01, $color01) left bottom,
  linear-gradient($color01, $color01) left bottom,
  linear-gradient($color01, $color01) right bottom,
  linear-gradient($color01, $color01) right bottom;
  background-repeat: no-repeat;
  //background-size: 5px 20px, 20px 5px;
  background-size: 2px 20px, 20px 2px;
}

.tableData {
  background: #000;
}

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

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

</style>

 src/views/kb/cjzl.vue

@@ -53,11 +53,11 @@
              <el-table-column
                prop="xh"
                label="序号"
                width="50"
                width="60"
              />
              <el-table-column
                prop="cxmc"
                width="130"
                width="100"
                label="产线名称"
              >
                <template slot-scope="{row}">
@@ -67,7 +67,7 @@
              <el-table-column
                prop="jgdh"
                label="生产单号"
                width="150"
                width="165"
              >
                <template slot-scope="{row}">
                  <div style="color: #00FFFF">{{ row.jgdh }}</div>
@@ -76,13 +76,13 @@

              <el-table-column
                prop="cpmc"
                width="150"
                width="120"
                label="产品名称"
              />
              <el-table-column
                prop="blyy"
                label="不良原因"
                width="150"
                width="180"
              >
                <template slot-scope="{row}">
                  <div style="color:#d91010;">{{ row.blyy }}</div>
@@ -91,12 +91,12 @@
              <el-table-column
                prop="scsl"
                label="不良数量"
                width="100"
                width="110"
              />
              <el-table-column
                prop="bgsl"
                label="报工数量"
                width="100"
                width="110"
              />
              <!--              <el-table-column-->
              <!--                prop="yjks"-->
@@ -155,7 +155,7 @@
      headTime: '',
      tableDataLeftTop: [],
      tableDataLeftTopTemp: [
        { xsdd: 'MO-2022111501', cpmc: '产品名称1', sl: '100' },
        { xsdd: 'MO-2022111501', cpmc: '电池包test', sl: '100' },
        { xsdd: 'MO-2022111502', cpmc: '产品名称2', sl: '100' },
        { xsdd: 'MO-2022111503', cpmc: '产品名称3', sl: '100' },
        { xsdd: 'MO-2022111504', cpmc: '产品名称4', sl: '100' },
@@ -182,33 +182,33 @@
      ],
      tableDataCenterTop: [],
      tableDataCenterTopTemp: [
        { xh: 1, bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '产线名称1', cpmc: '产品名称1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 2, bgsl: 200, blyy: '尺寸、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '产线名称1', cpmc: '产品名称1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 3, bgsl: 200, blyy: '尺寸、色系', jgdh: 'MO-2022-1115-01', cxmc: '产线名称1', cpmc: '产品名称1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 4, bgsl: 200, blyy: '尺寸、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '产线名称1', cpmc: '产品名称1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 5, bgsl: 200, blyy: '色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '产线名称1', cpmc: '产品名称1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 6, bgsl: 200, blyy: '尺寸、色系', jgdh: 'MO-2022-1115-01', cxmc: '产线名称1', cpmc: '产品名称1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 7, bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '产线名称1', cpmc: '产品名称1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 8, bgsl: 200, blyy: '尺寸、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '产线名称1', cpmc: '产品名称1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 9, bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '产线名称1', cpmc: '产品名称1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 10, bgsl: 200, blyy: '毛刺', jgdh: 'MO-2022-1115-01', cxmc: '产线名称1', cpmc: '产品名称1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 11, bgsl: 200, blyy: '尺寸', jgdh: 'MO-2022-1115-01', cxmc: '产线名称1', cpmc: '产品名称1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 12, bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '产线名称1', cpmc: '产品名称1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 13, bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '产线名称1', cpmc: '产品名称1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 14, bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '产线名称1', cpmc: '产品名称1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 15, bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '产线名称1', cpmc: '产品名称1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 16, bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '产线名称1', cpmc: '产品名称1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 17, bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '产线名称1', cpmc: '产品名称1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 18, bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '产线名称1', cpmc: '产品名称1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 19, bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '产线名称1', cpmc: '产品名称1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 20, bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '产线名称1', cpmc: '产品名称1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 21, bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '产线名称1', cpmc: '产品名称1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 22, bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '产线名称1', cpmc: '产品名称1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 23, bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '产线名称1', cpmc: '产品名称1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 24, bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '产线名称1', cpmc: '产品名称1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 25, bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '产线名称1', cpmc: '产品名称1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 26, bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '产线名称1', cpmc: '产品名称1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 27, bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '产线名称1', cpmc: '产品名称1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' }
        { xh: 1, bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '装配一线', cpmc: '电池包test', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 2, bgsl: 200, blyy: '尺寸、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '装配一线', cpmc: '电池包test', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 3, bgsl: 200, blyy: '尺寸、色系', jgdh: 'MO-2022-1115-01', cxmc: '装配一线', cpmc: '电池包test', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 4, bgsl: 200, blyy: '尺寸、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '装配一线', cpmc: '电池包test', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 5, bgsl: 200, blyy: '色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '装配一线', cpmc: '电池包test', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 6, bgsl: 200, blyy: '尺寸、色系', jgdh: 'MO-2022-1115-01', cxmc: '装配一线', cpmc: '电池包test', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 7, bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '装配一线', cpmc: '电池包test', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 8, bgsl: 200, blyy: '尺寸、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '装配一线', cpmc: '电池包test', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 9, bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '装配一线', cpmc: '电池包test', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 10, bgsl: 200, blyy: '毛刺', jgdh: 'MO-2022-1115-01', cxmc: '装配一线', cpmc: '电池包test', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 11, bgsl: 200, blyy: '尺寸', jgdh: 'MO-2022-1115-01', cxmc: '装配一线', cpmc: '电池包test', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 12, bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '装配一线', cpmc: '电池包test', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 13, bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '装配一线', cpmc: '电池包test', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 14, bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '装配一线', cpmc: '电池包test', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 15, bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '装配一线', cpmc: '电池包test', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 16, bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '装配一线', cpmc: '电池包test', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 17, bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '装配一线', cpmc: '电池包test', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 18, bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '装配一线', cpmc: '电池包test', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 19, bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '装配一线', cpmc: '电池包test', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 20, bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '装配一线', cpmc: '电池包test', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 21, bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '装配一线', cpmc: '电池包test', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 22, bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '装配一线', cpmc: '电池包test', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 23, bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '装配一线', cpmc: '电池包test', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 24, bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '装配一线', cpmc: '电池包test', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 25, bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '装配一线', cpmc: '电池包test', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 26, bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '装配一线', cpmc: '电池包test', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 27, bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '装配一线', cpmc: '电池包test', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' }
      ]
    }
  },
@@ -330,7 +330,8 @@
        padding: '10px 0',
        textAlign: 'center',
        color: '#07acc2',
        border: 'none'
        border: 'none',
        fontSize: '18px'
      }
    },
    cellStyleCenter() {
@@ -339,7 +340,8 @@
        textAlign: 'center',
        backgroundColor: '#000',
        color: '#fff',
        border: 'none'
        border: 'none',
        fontSize: '18px'
      }
    }
  }
@@ -350,43 +352,13 @@
<style lang="scss" scoped>
$main_color:#09d8f2;
$color01: #00FFFF;
.lineContent {
  height: 435px;
  border: 1px solid $main_color;
  //outline: 1px solid $main_color;
  border-radius: 5px;
  padding: 2px;

}
.lineContentCenter{
  height: 935px;
  border: 1px solid $main_color;
  //outline: 1px solid $main_color;
  border-radius: 5px;
  padding: 2px;
}

.horn {
  background: linear-gradient($color01, $color01) left top,
  linear-gradient($color01, $color01) left top,
  linear-gradient($color01, $color01) right top,
  linear-gradient($color01, $color01) right top,
  linear-gradient($color01, $color01) left bottom,
  linear-gradient($color01, $color01) left bottom,
  linear-gradient($color01, $color01) right bottom,
  linear-gradient($color01, $color01) right bottom;
  background-repeat: no-repeat;
  //background-size: 5px 20px, 20px 5px;
  background-size: 2px 20px, 20px 2px;
}

.tableData{
  background: #000;
}

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

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

 src/views/kb/kbCommon.css

@@ -126,15 +126,42 @@
  height: 35px;
  display: flex;
  color: #00ffff;
  font-size: 24px;
  font-size: 26px;
  /*align-content: flex-start;*/
}

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

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


.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

@@ -110,7 +110,7 @@
                <el-table-column
                  prop="xh"
                  label="序号"
                  width="50"
                  width="60"
                />

                <el-table-column
@@ -121,12 +121,44 @@
                <el-table-column
                  prop="pfsj"
                  label="派发时间"
                  width="160"
                  width="140"
                />
                <el-table-column
                  prop=""
                  label="销售订单号"
                  width="160"
                />      <el-table-column
                  prop=""
                  label="加工单号"
                  width="160"
                />   <el-table-column
                  prop=""
                  label="产品名称"
                  width="100"
                />   <el-table-column
                  prop=""
                  label="任务数量"
                  width="100"
                />  <el-table-column
                  prop=""
                  label="完工数量"
                  width="100"
                /> <el-table-column
                  prop=""
                  label="不良数量"
                  width="100"
                /> <el-table-column
                  prop=""
                  label="完成率"
                  width="80"
                /> <el-table-column
                  prop=""
                  label="预计开始"
                  width="140"
                /> <el-table-column
                  prop=""
                  label="预计结束"
                  width="140"
                />
              </el-table>
            </div>
@@ -153,16 +185,16 @@
                <el-table-column
                  prop="xh"
                  label="序号"
                  width="50"
                  width="60"
                />
                <el-table-column
                  prop="cx"
                  width="144"
                  width="165"
                  label="产线"
                />
                <el-table-column
                  prop="cp"
                  width="160"
                  width="120"
                  label="产品"
                />
                <el-table-column
@@ -348,8 +380,8 @@
        padding: '10px 0',
        textAlign: 'center',
        color: '#07acc2',
        border: 'none'
        // fontSize: '16px'
        border: 'none',
        fontSize: '18px'
      }
    },
    cellStyle() {
@@ -358,8 +390,8 @@
        textAlign: 'center',
        backgroundColor: '#000',
        color: '#fff',
        border: 'none'
        // fontSize: '16px'
        border: 'none',
        fontSize: '18px'
      }
    }
  }
@@ -370,28 +402,13 @@
<style lang="scss" scoped>
$main_color: #09d8f2;
$color01: #00FFFF;
.lineContent {
  height: 435px;
  border: 1px solid $main_color;
  border-radius: 5px;
  padding: 2px;
}

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

.tableData {
  background: #000;
}

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

.el-table__empty-text {
@@ -496,4 +513,5 @@
  background-color: rgb(255 255 0);
  border-radius: 50%;
}

</style>