1.看板接入

loulijun2021

2022-12-01 0587a1eab55c688ccb9c69c768c5fd247adb407c

1.看板接入

 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,
@@ -801,6 +802,7 @@
  var max = Math.ceil(255 / 10) * 10

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

// 车间质量左下周不良
export function line02() {
export function line02(dataX, dataY) {
  return {
    animation: false,
    backgroundColor: 'transparent',
    tooltip: {},
    // title: {
@@ -961,7 +964,7 @@
        axisTick: {
          show: false
        },
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        data: dataX
      }],
    yAxis: [
      {
@@ -1046,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)]
      }
      //   {
@@ -1091,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) => {
@@ -1122,6 +1127,7 @@
  }

  const option = {
    animation: false,
    backgroundColor: 'transparent',
    grid: {
      top: '0%',
@@ -1198,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: {
@@ -1245,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, ',')
@@ -1277,6 +1268,7 @@
  }, 0)

  const option = {
    animation: false,
    backgroundColor: bgColor,
    color: color,
    // tooltip: {
@@ -1416,6 +1408,7 @@
  // }

  var option = {
    animation: false,
    // animation: false, // 取消动画
    // animationDuration: 5000,
    grid: {

 src/views/kb/cjsc.vue

@@ -15,7 +15,7 @@
        <div style="width: 380px;height: 969px;" class="flex_c_b">
          <div>
            <div class="smallTitle">
              <svg-icon icon-class="eqp_name" class="svg_class" />
              <svg-icon icon-class="cxmc" class="svg_class" />
              装配一线
            </div>
            <div class="lineContent horn">
@@ -29,7 +29,7 @@
                height="428"
              >
                <el-table-column
                  prop="xsdd"
                  prop="saleOrderCode"
                  label="销售单号"
                  width="165"
                />
@@ -40,7 +40,7 @@
                  label="产品名称"
                />
                <el-table-column
                  prop="sl"
                  prop="good_qty"
                  label="数量"
                  width="80"
                />
@@ -49,7 +49,7 @@
          </div>
          <div>
            <div class="smallTitle">
              <svg-icon icon-class="eqp_name" class="svg_class" />
              <svg-icon icon-class="cxmc" class="svg_class" />
              装配二线
            </div>
            <div class="lineContent horn">
@@ -63,7 +63,7 @@
                height="428"
              >
                <el-table-column
                  prop="xsdd"
                  prop="saleOrderCode"
                  label="销售单号"
                  width="165"
                />
@@ -74,7 +74,7 @@
                  label="产品名称"
                />
                <el-table-column
                  prop="sl"
                  prop="good_qty"
                  label="数量"
                  width="80"
                />
@@ -99,21 +99,21 @@
              height="927"
            >
              <el-table-column
                type="index"
                type="RowNum"
                label="序号"
                width="60"
              >
                <!--                <template slot-scope="{row}">-->
                <!--                  <div-->
                <!--                    :style="{color:row.eqp_name==='装配一线'?'#FFFF77':row.eqp_name==='装配二线'?'#FF8888':row.eqp_name==='装配三线'?'#D28EFF':'#66FFFF'}"-->
                <!--                  > {{ row.index }}-->
                <!--                  </div>-->
                <!--                </template>-->
                <template slot-scope="{row}">
                  <div
                    :style="{color:row.eqp_name==='装配一线'?'#FFFF77':row.eqp_name==='装配二线'?'#FF8888':row.eqp_name==='装配三线'?'#D28EFF':'#66FFFF'}"
                  > {{ row.RowNum }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="wo_code"
                label="加工单号"
                width="165"
                width="190"
              >
                <template slot-scope="{row}">
                  <div
@@ -165,9 +165,11 @@
              >
                <template slot-scope="{row}">
                  <div
                    v-if="row.plan_startdate"
                    :style="{color:row.eqp_name==='装配一线'?'#FFFF77':row.eqp_name==='装配二线'?'#FF8888':row.eqp_name==='装配三线'?'#D28EFF':'#66FFFF'}"
                  > {{ row.plan_startdate.substring(0, 11) }}
                  </div>
                  <div v-else />
                </template>
              </el-table-column>
              <el-table-column
@@ -177,9 +179,11 @@
              >
                <template slot-scope="{row}">
                  <div
                    v-if="row.plan_enddate"
                    :style="{color:row.eqp_name==='装配一线'?'#FFFF77':row.eqp_name==='装配二线'?'#FF8888':row.eqp_name==='装配三线'?'#D28EFF':'#66FFFF'}"
                  > {{ row.plan_enddate.substring(0, 11) }}
                  </div>
                  <div v-else />
                </template>
              </el-table-column>
              <el-table-column
@@ -200,11 +204,7 @@
                width="130"
              >
                <template slot-scope="{row}">
                  <!--                  <div-->
                  <!--                    :style="{color:row.eqp_name==='装配一线'?'#FFFF77':row.eqp_name==='装配二线'?'#FF8888':row.eqp_name==='装配三线'?'#D28EFF':'#66FFFF'}"-->
                  <!--                  > {{ row.scjdxxx }}-->
                  <!--                  </div>-->
                  <!--                  <div :id="'progress'+row.xh" style="width: 100%;height:30px" />-->
                  <div :id="'progress'+row.RowNum" style="width: 100%;height:30px" />
                </template>
              </el-table-column>
            </el-table>
@@ -213,7 +213,7 @@
        <div style="width: 380px;height: 969px;" class="flex_c_b">
          <div>
            <div class="smallTitle">
              <svg-icon icon-class="eqp_name" class="svg_class" />
              <svg-icon icon-class="cxmc" class="svg_class" />
              装配三线
            </div>
            <div class="lineContent horn">
@@ -227,7 +227,7 @@
                height="428"
              >
                <el-table-column
                  prop="xsdd"
                  prop="saleOrderCode"
                  label="销售单号"
                  width="165"
                />
@@ -238,7 +238,7 @@
                  label="产品名称"
                />
                <el-table-column
                  prop="sl"
                  prop="good_qty"
                  label="数量"
                  width="80"
                />
@@ -247,7 +247,7 @@
          </div>
          <div>
            <div class="smallTitle">
              <svg-icon icon-class="eqp_name" class="svg_class" />
              <svg-icon icon-class="cxmc" class="svg_class" />
              装配四线
            </div>
            <div class="lineContent horn">
@@ -261,7 +261,7 @@
                height="428"
              >
                <el-table-column
                  prop="xsdd"
                  prop="saleOrderCode"
                  label="销售单号"
                  width="165"
                />
@@ -272,7 +272,7 @@
                  label="产品名称"
                />
                <el-table-column
                  prop="sl"
                  prop="good_qty"
                  label="数量"
                  width="80"
                />
@@ -289,7 +289,8 @@
<script>
import './kbCommon.css'
import { kbTop, loadEcharts, progress } from '@/utils/myEcharts'
import { WkshpContentData } from '@/api/dzkb'
import { WkshpContentData, WkshpLineData } from '@/api/dzkb'
import clearAllChildren from '@/utils/global'

export default {
  name: 'Cjsc',
@@ -303,32 +304,7 @@
      tableDataRightTop: [],
      tableDataRightTopTemp: [],
      tableDataRightBottom: [],
      tableDataRightBottomTemp: [
        { xsdd: 'MO-2022111501', partname: '产品名称1', sl: '100' },
        { xsdd: 'MO-2022111502', partname: '产品名称2', sl: '100' },
        { xsdd: 'MO-2022111503', partname: '产品名称3', sl: '100' },
        { xsdd: 'MO-2022111504', partname: '产品名称4', sl: '100' },
        { xsdd: 'MO-2022111505', partname: '产品名称5', sl: '100' },
        { xsdd: 'MO-2022111506', partname: '产品名称6', sl: '100' },
        { xsdd: 'MO-2022111507', partname: '产品名称7', sl: '100' },
        { xsdd: 'MO-2022111508', partname: '产品名称8', sl: '100' },
        { xsdd: 'MO-2022111509', partname: '产品名称9', sl: '100' },
        { xsdd: 'MO-2022111510', partname: '产品名称10', sl: '100' },
        { xsdd: 'MO-2022111511', partname: '产品名称11', sl: '100' },
        { xsdd: 'MO-2022111512', partname: '产品名称12', sl: '100' },
        { xsdd: 'MO-2022111513', partname: '产品名称13', sl: '100' },
        { xsdd: 'MO-2022111514', partname: '产品名称14', sl: '100' },
        { xsdd: 'MO-2022111515', partname: '产品名称15', sl: '100' },
        { xsdd: 'MO-2022111516', partname: '产品名称16', sl: '100' },
        { xsdd: 'MO-2022111517', partname: '产品名称17', sl: '100' },
        { xsdd: 'MO-2022111518', partname: '产品名称18', sl: '100' },
        { xsdd: 'MO-2022111519', partname: '产品名称19', sl: '100' },
        { xsdd: 'MO-2022111520', partname: '产品名称20', sl: '100' },
        { xsdd: 'MO-2022111521', partname: '产品名称21', sl: '100' },
        { xsdd: 'MO-2022111522', partname: '产品名称22', sl: '100' },
        { xsdd: 'MO-2022111523', partname: '产品名称23', sl: '100' },
        { xsdd: 'MO-2022111524', partname: '产品名称24', sl: '100' }
      ],
      tableDataRightBottomTemp: [],

      tableDataCenterTop: [],
      tableDataCenterTopTemp: []
@@ -361,7 +337,6 @@

      WkshpContentData().then(res => {
        this.tableDataCenterTopTemp = res.data

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

        const loop = Math.floor(this.tableDataCenterTopTemp.length / scale)// 需要循环的次数
@@ -377,14 +352,14 @@
          nowLoop++
          this.$nextTick(() => {
            this.tableDataCenterTop.forEach(i => {
              loadEcharts('progress' + i.xh, progress(i.good_qty, i.scjd2))
              loadEcharts('progress' + i.RowNum, progress(i.good_qty, i.plan_qty))
            })
          })
        }, 1000 * 10)

        this.$nextTick(() => {
          this.tableDataCenterTop.forEach(i => {
            loadEcharts('progress' + i.xh, progress(i.good_qty, i.scjd2))
            loadEcharts('progress' + i.RowNum, progress(i.good_qty, i.plan_qty))
          })
        })
      })
@@ -395,76 +370,90 @@
      let 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
      WkshpLineData({ LineCode: 'DEV06' }).then(res => {
        this.tableDataLeftTopTemp = res.data
        this.tableDataLeftTop = this.tableDataLeftTopTemp.slice(startValue, startValue + scale)
        if (nowLoop === loop) {
          this.getLeftTopTableDataSetInterval()
        }
        nowLoop++
      }, 1000 * 5)

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

        const timer = setInterval(() => {
          startValue = startValue + scale
          this.tableDataLeftTop = this.tableDataLeftTopTemp.slice(startValue, startValue + scale)
          if (nowLoop === loop) {
            clearInterval(timer)
            this.getLeftTopTableDataSetInterval()
          }
          nowLoop++
        }, 1000 * 10)
      })
    },
    // 获取左下数据并定时刷新
    getLeftBottomTableDataSetInterval() {
      let startValue = 0 // 初始值
      const scale = 10// 刻度

      this.tableDataLeftBottom = this.tableDataLeftBottomTemp.slice(startValue, startValue + scale)

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

      setInterval(() => {
        startValue = startValue + scale
      WkshpLineData({ LineCode: 'DEV02' }).then(res => {
        this.tableDataLeftBottomTemp = res.data
        this.tableDataLeftBottom = this.tableDataLeftBottomTemp.slice(startValue, startValue + scale)
        if (nowLoop === loop) {
          this.getLeftBottomTableDataSetInterval()
        }
        nowLoop++
      }, 1000 * 5)

        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.getLeftBottomTableDataSetInterval()
          }
          nowLoop++
        }, 1000 * 10)
      })
    },
    // 获取右上数据并定时刷新
    getRightTopTableDataSetInterval() {
      let startValue = 0 // 初始值
      const scale = 10// 刻度

      this.tableDataRightTop = this.tableDataRightTopTemp.slice(startValue, startValue + scale)

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

      setInterval(() => {
        startValue = startValue + scale
      WkshpLineData({ LineCode: 'DEV03' }).then(res => {
        this.tableDataRightTop = this.tableDataRightTopTemp.slice(startValue, startValue + scale)
        if (nowLoop === loop) {
          this.getRightTopTableDataSetInterval()
        }
        nowLoop++
      }, 1000 * 5)

        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.getRightTopTableDataSetInterval()
          }
          nowLoop++
        }, 1000 * 10)
      })
    },
    // 获取右下数据并定时刷新
    getRightBottomTableDataSetInterval() {
      let startValue = 0 // 初始值
      const scale = 10// 刻度

      this.tableDataRightBottom = this.tableDataRightBottomTemp.slice(startValue, startValue + scale)

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

      setInterval(() => {
        startValue = startValue + scale
      WkshpLineData({ LineCode: 'DEV04' }).then(res => {
        this.tableDataRightBottom = this.tableDataRightBottomTemp.slice(startValue, startValue + scale)
        if (nowLoop === loop) {
          this.getRightBottomTableDataSetInterval()
        }
        nowLoop++
      }, 1000 * 5)

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

        const timer = setInterval(() => {
          startValue = startValue + scale
          this.tableDataRightBottom = this.tableDataRightBottomTemp.slice(startValue, startValue + scale)
          if (nowLoop === loop) {
            clearInterval(timer)
            this.getRightBottomTableDataSetInterval()
          }
          nowLoop++
        }, 1000 * 10)
      })
    },

    // 获取topEcharts

 src/views/kb/cjzl.vue

@@ -51,10 +51,19 @@
              height="927"
            >
              <el-table-column
                prop="rq"
                prop="lm_date"
                label="日期"
                width="115"
              />
              >
                <template slot-scope="{row}">
                  <div
                    v-if="row.lm_date"
                  >
                    {{ row.lm_date.substring(0,11) }}
                  </div>
                  <div v-else />
                </template>
              </el-table-column>
              <el-table-column
                prop="cxmc"
                width="95"
@@ -65,12 +74,12 @@
                </template>
              </el-table-column>
              <el-table-column
                prop="jgdh"
                prop="wo_code"
                label="生产单号"
                width="165"
                width="188"
              >
                <template slot-scope="{row}">
                  <div style="color: #00FFFF">{{ row.jgdh }}</div>
                  <div style="color: #00FFFF">{{ row.wo_code }}</div>
                </template>
              </el-table-column>

@@ -84,45 +93,33 @@
                </template>
              </el-table-column>
              <el-table-column
                prop="blyy"
                prop="defect_name"
                label="不良原因"
                width="120"
              >
                <template slot-scope="{row}">
                  <div style="color:#ff0000;width: 120px" class="ellipsis">{{ row.blyy }}</div>
                  <div style="color:#ff0000;" class="ellipsis">{{ row.defect_name }}</div>
                </template>
              </el-table-column>
              <el-table-column
                prop="scsl"
                prop="ng_qty"
                label="不良数量"
                width="95"
                width="92"
              />
              <el-table-column
                prop="bgsl"
                prop="report_qty"
                label="报工数量"
                width="95"
                width="92"
              />
              <el-table-column
                prop="blzb"
                label="不良占比"
                width="95"
              />
              <!--              <el-table-column-->
              <!--                prop="yjks"-->
              <!--                label="预计开始"-->
              <!--                width="150"-->
              <!--              />-->
              <!--              <el-table-column-->
              <!--                prop="yjwg"-->
              <!--                label="预计完工"-->
              <!--                width="150"-->
              <!--              />-->
                width="92"
              >
                <template slot-scope="{row}">
                  <div>{{ parseFloat((row.ng_qty*100/(row.ng_qty+row.report_qty)).toFixed(2)) }}%</div>
                </template>
              </el-table-column>

              <!--              <el-table-column-->
              <!--                prop="scjd"-->
              <!--                label="生产进度"-->
              <!--                width="90"-->
              <!--              />-->
            </el-table>
          </div>
        </div>
@@ -156,69 +153,16 @@
<script>
import './kbCommon.css'
import { bar02, bar04, kbTop, line02, loadEcharts, pie02 } from '@/utils/myEcharts'
import { BadContManger, BadDayDistriBute, BadTop5, BadWeek, BadWeekDistriBute } from '@/api/dzkb'

export default {
  name: 'Cjsc',
  data() {
    return {
      headTime: '',
      tableDataLeftTop: [],
      tableDataLeftTopTemp: [
        { xsdd: 'MO-2022111501', cpmc: '电池包', sl: '100' },
        { xsdd: 'MO-2022111502', cpmc: '产品名称2', sl: '100' },
        { xsdd: 'MO-2022111503', cpmc: '产品名称3', sl: '100' },
        { xsdd: 'MO-2022111504', cpmc: '产品名称4', sl: '100' },
        { xsdd: 'MO-2022111505', cpmc: '产品名称5', sl: '100' },
        { xsdd: 'MO-2022111506', cpmc: '产品名称6', sl: '100' },
        { xsdd: 'MO-2022111507', cpmc: '产品名称7', sl: '100' },
        { xsdd: 'MO-2022111508', cpmc: '产品名称8', sl: '100' },
        { xsdd: 'MO-2022111509', cpmc: '产品名称9', sl: '100' },
        { xsdd: 'MO-2022111510', cpmc: '产品名称10', sl: '100' },
        { xsdd: 'MO-2022111511', cpmc: '产品名称11', sl: '100' },
        { xsdd: 'MO-2022111512', cpmc: '产品名称12', sl: '100' },
        { xsdd: 'MO-2022111513', cpmc: '产品名称13', sl: '100' },
        { xsdd: 'MO-2022111514', cpmc: '产品名称14', sl: '100' },
        { xsdd: 'MO-2022111515', cpmc: '产品名称15', sl: '100' },
        { xsdd: 'MO-2022111516', cpmc: '产品名称16', sl: '100' },
        { xsdd: 'MO-2022111517', cpmc: '产品名称17', sl: '100' },
        { xsdd: 'MO-2022111518', cpmc: '产品名称18', sl: '100' },
        { xsdd: 'MO-2022111519', cpmc: '产品名称19', sl: '100' },
        { xsdd: 'MO-2022111520', cpmc: '产品名称20', sl: '100' },
        { xsdd: 'MO-2022111521', cpmc: '产品名称21', sl: '100' },
        { xsdd: 'MO-2022111522', cpmc: '产品名称22', sl: '100' },
        { xsdd: 'MO-2022111523', cpmc: '产品名称23', sl: '100' },
        { xsdd: 'MO-2022111524', cpmc: '产品名称24', sl: '100' }
      ],

      tableDataCenterTop: [],
      tableDataCenterTopTemp: [
        { blzb: '50%', rq: '2022-11-30', bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '装配一线', cpmc: '电池包', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { blzb: '50%', rq: '2022-11-30', bgsl: 200, blyy: '尺寸、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '装配一线', cpmc: '电池包', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { blzb: '50%', rq: '2022-11-30', bgsl: 200, blyy: '尺寸、色系', jgdh: 'MO-2022-1115-01', cxmc: '装配一线', cpmc: '电池包', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { blzb: '50%', rq: '2022-11-30', bgsl: 200, blyy: '尺寸、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '装配一线', cpmc: '电池包', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { blzb: '50%', rq: '2022-11-30', bgsl: 200, blyy: '色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '装配一线', cpmc: '电池包', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { blzb: '50%', rq: '2022-11-30', bgsl: 200, blyy: '尺寸、色系', jgdh: 'MO-2022-1115-01', cxmc: '装配一线', cpmc: '电池包', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { blzb: '50%', rq: '2022-11-30', bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '装配一线', cpmc: '电池包', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { blzb: '50%', rq: '2022-11-30', bgsl: 200, blyy: '尺寸、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '装配一线', cpmc: '电池包', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { blzb: '50%', rq: '2022-11-30', bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '装配一线', cpmc: '电池包', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { blzb: '50%', rq: '2022-11-30', bgsl: 200, blyy: '毛刺', jgdh: 'MO-2022-1115-01', cxmc: '装配一线', cpmc: '电池包', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { blzb: '50%', rq: '2022-11-30', bgsl: 200, blyy: '尺寸', jgdh: 'MO-2022-1115-01', cxmc: '装配一线', cpmc: '电池包', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { blzb: '50%', rq: '2022-11-30', bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '装配一线', cpmc: '电池包', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { blzb: '50%', rq: '2022-11-30', bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '装配一线', cpmc: '电池包', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { blzb: '50%', rq: '2022-11-30', bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '装配一线', cpmc: '电池包', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { blzb: '50%', rq: '2022-11-30', bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '装配一线', cpmc: '电池包', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { blzb: '50%', rq: '2022-11-30', bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '装配一线', cpmc: '电池包', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { blzb: '50%', rq: '2022-11-30', bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '装配一线', cpmc: '电池包', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { blzb: '50%', rq: '2022-11-30', bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '装配一线', cpmc: '电池包', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { blzb: '50%', rq: '2022-11-30', bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '装配一线', cpmc: '电池包', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { blzb: '50%', rq: '2022-11-30', bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '装配一线', cpmc: '电池包', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { blzb: '50%', rq: '2022-11-30', bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '装配一线', cpmc: '电池包', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { blzb: '50%', rq: '2022-11-30', bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '装配一线', cpmc: '电池包', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { blzb: '50%', rq: '2022-11-30', bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '装配一线', cpmc: '电池包', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { blzb: '50%', rq: '2022-11-30', bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '装配一线', cpmc: '电池包', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { blzb: '50%', rq: '2022-11-30', bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '装配一线', cpmc: '电池包', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { blzb: '50%', rq: '2022-11-30', bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '装配一线', cpmc: '电池包', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { blzb: '50%', rq: '2022-11-30', bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '装配一线', cpmc: '电池包', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' }
      ]
      tableDataCenterTopTemp: []
    }
  },
  created() {
@@ -231,7 +175,7 @@
  },
  mounted() {
    this.getTopBar()
    this.getTableDataSetInterval()

    this.getCenterTableDataSetInterval()

    this.getEcharts()
@@ -239,55 +183,72 @@
  methods: {
    // 获取Echarts
    getEcharts() {
      const dataArr = [30, 20, 20, 18, 10]
      const titlenameArr = ['颜色', '尺寸', '气味', '毛刺', '裂痕']
      loadEcharts('bar01', bar02(dataArr, titlenameArr))
      this.getLeftTopEcharts()
      setInterval(() => {
        this.getLeftTopEcharts()
      }, 1000 * 10)

      loadEcharts('line01', line02())
      this.getLeftBottomEcharts()
      setInterval(() => {
        this.getLeftBottomEcharts()
      }, 1000 * 10)

      loadEcharts('bar02', bar04())
      this.getRightTopEcharts()
      setInterval(() => {
        this.getRightTopEcharts()
      }, 1000 * 10)

      loadEcharts('pie01', pie02())
      this.getRightBottomEcharts()
      setInterval(() => {
        this.getRightBottomEcharts()
      }, 1000 * 10)
    },
    getLeftTopEcharts() {
      BadTop5({ StepCode: 'Step02' }).then(res => {
        const dataArr = res.data.map(i => i.cont)
        const titlenameArr = res.data.map(i => i.name)
        loadEcharts('bar01', bar02(dataArr, titlenameArr))
      })
    },
    getLeftBottomEcharts() {
      BadWeek({ StepCode: 'Step02' }).then(res => {
        const dataX = res.data.map(i => i.click_date)
        const dataY = res.data.map(i => i.count)
        loadEcharts('line01', line02(dataX, dataY))
      })
    },
    getRightTopEcharts() {
      BadDayDistriBute({ StepCode: 'Step02' }).then(res => {
        loadEcharts('bar02', bar04(res.data))
      })
    },
    getRightBottomEcharts() {
      BadWeekDistriBute({ StepCode: 'Step02' }).then(res => {
        loadEcharts('pie01', pie02(res.data))
      })
    },
    // 中间部分的表格
    getCenterTableDataSetInterval() {
      let startValue = 0 // 初始值
      const scale = 23// 刻度

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

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

      setInterval(() => {
        startValue = startValue + scale
      BadContManger({ StepCode: 'Step02' }).then(res => {
        this.tableDataCenterTopTemp = res.data
        this.tableDataCenterTop = this.tableDataCenterTopTemp.slice(startValue, startValue + scale)
        if (nowLoop === loop) {
          this.getCenterTableDataSetInterval()
        }

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

    // 定时刷新表格数据
    getTableDataSetInterval() {
      let startValue = 0 // 初始值
      const scale = 10// 刻度
        const timer = setInterval(() => {
          startValue = startValue + scale
          this.tableDataCenterTop = this.tableDataCenterTopTemp.slice(startValue, startValue + scale)
          if (nowLoop === loop) {
            clearInterval(timer)
            this.getCenterTableDataSetInterval()
          }

      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)
          nowLoop++
        }, 1000 * 10)
      })
    },

    // 获取topEcharts

 src/views/kb/zhkb.vue

@@ -108,58 +108,97 @@
                height="428"
              >
                <el-table-column
                  prop="xh"
                  prop="RowNum"
                  label="序号"
                  width="60"
                />

                <el-table-column
                  prop="zt"
                  width="100"
                  prop="status"
                  width="70"
                  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="pfsj"
                  prop="lm_date"
                  label="派发时间"
                  width="140"
                  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=""
                  label="销售订单号"
                  width="160"
                />      <el-table-column
                  prop=""
                  label="加工单号"
                  width="160"
                />   <el-table-column
                  prop=""
                  prop="partname"
                  label="产品名称"
                  width="100"
                />   <el-table-column
                  prop=""
                >
                  <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="100"
                />  <el-table-column
                  prop=""
                />
                <el-table-column
                  prop="good_qty"
                  label="完工数量"
                  width="100"
                /> <el-table-column
                  prop=""
                />
                <el-table-column
                  prop="ng_qty"
                  label="不良数量"
                  width="100"
                /> <el-table-column
                  prop=""
                />
                <el-table-column
                  label="完成率"
                  width="80"
                /> <el-table-column
                  prop=""
                  width="100"
                >
                  <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"
                /> <el-table-column
                >
                  <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>

@@ -183,25 +222,29 @@
                height="428"
              >
                <el-table-column
                  prop="xh"
                  type="index"
                  label="序号"
                  width="60"
                />
                <el-table-column
                  prop="cx"
                  prop="linename"
                  width="165"
                  label="产线"
                />
                <el-table-column
                  prop="cp"
                  prop="partname"
                  width="120"
                  label="产品"
                />
                <el-table-column
                  prop="sl"
                  prop="good_qty"
                  label="数量"
                  width="90"
                />
                >
                  <template slot-scope="{row}">
                    <div>{{ parseFloat(row.good_qty) }}</div>
                  </template>
                </el-table-column>
              </el-table>
            </div>

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

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

      tableDataRightTop: [],
      tableDataRightTopTemp: [
        { xh: 1, cx: '装配一线', cp: '沙滩椅', sl: 2000 },
        { xh: 2, cx: '装配一线', cp: '沙滩椅', sl: 2000 },
        { xh: 3, cx: '装配一线', cp: '沙滩椅', sl: 2000 },
        { xh: 4, cx: '装配一线', cp: '沙滩椅', sl: 2000 },
        { xh: 5, cx: '装配一线', cp: '沙滩椅', sl: 2000 },
        { xh: 6, cx: '装配一线', cp: '沙滩椅', sl: 2000 },
        { xh: 7, cx: '装配一线', cp: '沙滩椅', sl: 2000 },
        { xh: 8, cx: '装配一线', cp: '沙滩椅', sl: 2000 },
        { xh: 9, cx: '装配一线', cp: '沙滩椅', sl: 2000 },
        { xh: 10, cx: '装配一线', cp: '沙滩椅', sl: 2000 },
        { xh: 11, cx: '装配一线', cp: '沙滩椅', sl: 2000 },
        { xh: 12, cx: '装配一线', cp: '沙滩椅', sl: 2000 },
        { xh: 13, cx: '装配一线', cp: '沙滩椅', sl: 2000 }
      ],
      tableDataRightTopTemp: [],
      tableDataLeftBottom: [],
      tableDataLeftBottomTemp: [
        {}
      ],
      tableDataLeftBottomTemp: [],
      lineContent3: [],
      ShopArr: [] // 车间编码数组

@@ -269,9 +302,6 @@
  mounted() {
    this.getTopBar()

    this.getEcharts()
    this.getRightRightData()

    this.getShopSearch()
  },
  methods: {
@@ -284,17 +314,20 @@
          this.ShopArr.push(item.org_code)
        })
        this.getShopSearchLine()
        this.getRightRightData()
        this.getLeftBottomData()
        this.getEcharts()
      }
      // setInterval(() => {
      //   this.ShopSearchTask = ShopSearch().then(res1 => {
      //     if (res1.code === '200') {
      //       this.ShopArr = []
      //       res1.data.forEach(item => {
      //         this.ShopArr.push(item.org_code)
      //       })
      //     }
      //   })
      // }, 1000 * 30)
      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() {
@@ -307,51 +340,94 @@
        this.number1 = this.lineContent.length
      })

      // let start = 0
      // this.ShopSearchLineTask = setInterval(() => {
      //   if (Math.floor(start / 3) === count && count !== 0) {
      //     start = 0
      //     LineSearchTopLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
      //       this.lineContent = res.data
      //       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(this.ShopSearchLineTask)
      //     this.getShopSearchLine()
      //   }
      //   this.lineContent3 = this.lineContent.slice(start, start + 3)
      //   start = start + 3
      // }, 1000 * 5)
      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// 刻度

      this.tableDataRightTop = this.tableDataRightTopTemp.slice(startValue, startValue + scale)
      LineSearchTopRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
        this.tableDataRightTopTemp = res.data

      const loop = Math.floor(this.tableDataRightTopTemp.length / scale)// 需要循环的次数
      let nowLoop = 0// 当前循环的次数
        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(() => {
        startValue = startValue + scale
        this.tableDataRightTop = this.tableDataRightTopTemp.slice(startValue, startValue + scale)
        if (nowLoop === loop) {
          this.getRightRightData()
        }

        nowLoop++
      }, 5000)
    },
    getEcharts() {
      const dataArr = [30, 20, 20, 18, 10]
      const titlenameArr = ['颜色', '尺寸', '气味', '毛刺', '裂痕']
      loadEcharts('bar01', bar02(dataArr, 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))
        })
      }, 1000 * 10)
    },
    // 获取topEcharts
    getTopBar() {
@@ -407,7 +483,7 @@
  background: #000;
}

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

@@ -435,7 +511,7 @@
    font-size: 16px;
    display: flex;
    flex-direction: column;
     border-radius: 5px;
    border-radius: 5px;

    .kb_block03_content {
      border: 1px solid $main_color;
@@ -465,7 +541,7 @@
            display: flex;
            align-items: center;
            justify-content: center;
             height: 25px;
            height: 25px;
          }

          .content02_2 {
@@ -507,6 +583,7 @@
.kb_left_top_block:nth-child(3n) {
  border-bottom: none !important;
}

.circleYellow {
  width: 26px;
  height: 26px;