1.系统首页优化

loulijun2021

2023-05-06 b71a6118930041bc479979a085c4c156854a3b73

1.系统首页优化

 src/permission.js

@@ -1,16 +1,16 @@
import router from './router'
import store from './store'
import { Message } from 'element-ui'
import {Message} from 'element-ui'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import { getCookie, getToken } from '@/utils/auth' // get token from cookie
import {getCookie, getToken} from '@/utils/auth' // get token from cookie
import getPageTitle from '@/utils/get-page-title'

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

const whiteList = ['/login', '/jgcj','/zpcj','/ckgl'] // no redirect whitelist
const whiteList = ['/login', '/jgcj', '/zpcj', '/ckgl', '/zp1', '/zp2', '/zp3'] // no redirect whitelist

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

@@ -23,7 +23,7 @@
  if (hasToken) {
    if (to.path === '/login') {
      // if is logged in, redirect to the home page
      next({ path: '/' })
      next({path: '/'})
      NProgress.done()
    } else {
      const hasGetUserInfo = store.getters.name
@@ -42,7 +42,7 @@
          router.addRoutes(store.getters.addRouters)

          // hack方法 ç¡®ä¿addRoutes已完成
          next({ ...to, replace: true })
          next({...to, replace: true})

          // next()
        } catch (error) {

 src/router/index.js

@@ -52,6 +52,20 @@
  },

  {
    path: '/zp1',
    component: () => import('@/views/kb/zp1'),
    hidden: true
  },  {
    path: '/zp2',
    component: () => import('@/views/kb/zp2'),
    hidden: true
  },  {
    path: '/zp3',
    component: () => import('@/views/kb/zp3'),
    hidden: true
  },

  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
@@ -1253,6 +1267,21 @@
        name: 'ckglCancel',
        component: () => import('@/views/kb/ckgl'),
        meta: { title: '仓库管理', icon: '', keepAlive: true }
      }, {
        path: 'zp1',
        name: 'ckglCancel',
        component: () => import('@/views/kb/zp1'),
        meta: { title: '装配一线', icon: '', keepAlive: true }
      }, {
        path: 'zp2',
        name: 'ckglCancel',
        component: () => import('@/views/kb/zp2'),
        meta: { title: '装配二线', icon: '', keepAlive: true }
      }, {
        path: 'zp3',
        name: 'ckglCancel',
        component: () => import('@/views/kb/zp3'),
        meta: { title: '装配三线', icon: '', keepAlive: true }
      }
    ]
  }

 src/utils/myEcharts.js

@@ -35,7 +35,7 @@
  var salvProValue = [data]
  var Value = []// èƒŒæ™¯æŒ‰æœ€å¤§å€¼
  for (let i = 0; i < salvProValue.length; i++) {
    Value.push(salvProValue[0] + 20)
    Value.push(salvProValue[0] + 100)
  }
  const color = colorArr
  const option = {
@@ -308,9 +308,9 @@
      }
    },
    yAxis: {
      max: 1,
      max: 12,
      min: 0,
      interval: 0.2,
      interval: 2,
      splitLine: {
        show: false
      },

 src/views/kb/jgcj.vue

@@ -29,8 +29,8 @@
                <div class="circle"   style="background-color: rgb(255 255 255)"></div>
                <div  style="margin-left: 10px" >未开始</div>

                <div class="circle"  style="margin-left: 10px;background-color: blue;"></div>
                <div  style="margin-left: 10px" >开工</div>
<!--                <div class="circle"  style="margin-left: 10px;background-color: blue;"></div>-->
<!--                <div  style="margin-left: 10px" >开工</div>-->

                <div class="circleYellow" style="margin-left: 10px"></div>
                <div  style="margin-left: 10px" >执行中</div>
@@ -89,13 +89,13 @@
                      class="kb_block03_02_content flex_c_c"
                    >
                      <div class="flex_c_c content01">
<!--                        <div-->
<!--                          v-if="it.status==='START'&&(parseFloat(it.ngqty)===0||it.ngqty==='')&&(parseFloat(it.goodqty)===0||it.goodqty==='')"-->
<!--                          class="circle"-->
<!--                          style="background-color: blue;"-->
<!--                        />-->
                        <div
                          v-if="it.status==='START'&&(parseFloat(it.ngqty)===0||it.ngqty==='')&&(parseFloat(it.goodqty)===0||it.goodqty==='')"
                          class="circle"
                          style="background-color: blue;"
                        />
                        <div
                          v-else-if="it.status==='ALLO'&&(parseFloat(it.ngqty)===0||it.ngqty==='')&&(parseFloat(it.goodqty)===0||it.goodqty==='')"
                          v-if="it.status==='ALLO'&&(parseFloat(it.ngqty)===0||it.ngqty==='')&&(parseFloat(it.goodqty)===0||it.goodqty==='')"
                          class="circle"
                          style="background-color: rgb(255 255 255)"
                        />

 src/views/kb/zp1.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,712 @@
<template>
  <div>
    <div class="kb_dashboard">
      <!--    æ˜Ÿç©ºèƒŒæ™¯-->
      <div ref="starsRef" class="stars">
        <div v-for="(item, index) in starsCount" :key="index" class="star"/>
      </div>

      <div class="kb_header">
        <div class="flex_c_c kb_header_text">
          <div id="topBarLeft" style="width:600px;height:100%"/>
          è£…配一线数字化看板
          <div id="topBarRight" style="width:600px;height:100%;transform:rotate(180deg);"/>
        </div>
        <div class="kb_headTime">
          <span>{{ headTime }}</span>
        </div>
      </div>
      <div style="display: flex;justify-content: space-between;padding:0 20px 20px 20px">
        <!--       å·¦è¾¹-->
        <div style="width: 1400px ;height: 969px;" class="flex_c_b">
          <div>
            <div class="smallTitle">
              <svg-icon icon-class="cxjg" class="svg_class"/>
              äº§çº¿åŠ å·¥ä¸­ä»»åŠ¡

              <div style="display: flex;margin-left: 85px;">

                <div class="circle"   style="background-color: rgb(255 255 255)"></div>
                <div  style="margin-left: 10px" >未开始</div>

<!--                <div class="circle"  style="margin-left: 10px;background-color: blue;"></div>-->
<!--                <div  style="margin-left: 10px" >开工</div>-->

                <div class="circleYellow" style="margin-left: 10px"></div>
                <div  style="margin-left: 10px" >执行中</div>

                <div class="circle" style="margin-left: 10px"></div>
                <div  style="margin-left: 10px" >完工</div>

              </div>

            </div>
            <div class="lineContent horn">
              <div v-for="item in lineContent3" :key="item.workcode" class="kb_left_top_block">
                <div class="kb_block02 kb_pd10">
                  <div>
                    <div>销售订单:{{ item.saleordercode }}</div>
                    <div class="kb_mt10">
                      åŠ å·¥å•å·:{{ item.workcode }}
                    </div>
                    <div class="kb_mt10">
                      äº§å“åç§°:{{ item.partname }}
                    </div>
                    <div class="kb_mt10">
                      ä»»åŠ¡æ•°é‡:{{ parseFloat(item.qty) }}
                    </div>
                  </div>
                </div>
                <div class="kb_block03 kb_pd10 ">
                  <div v-if="item.children&&item.children.length>0" class="flex_s_c">
                    <div
                      v-for="(it,ind) in item.children"
                      :key="ind"
                      class="kb_block03_content flex_c_c"
                    >
                      <div>
                        <div class="content01">{{ it.stepname }}</div>
                      </div>
                      <div class="content02Parent">
                        <div class="content02">
                          <div class="content02_1 ">任务</div>
                          <div class="content02_2 borderTop ">{{ parseFloat(it.planqty) }}</div>
                        </div>
                        <div class="content02">
                          <div class="content02_1 ">合格</div>
                          <div class="content02_2 borderTop ">{{ parseFloat(it.goodqty) }}</div>
                        </div>
                        <div class="content02" style="border-right: 0">
                          <div class="content02_1 ">不良</div>
                          <div class="content02_2 borderTop ">{{ parseFloat(it.ngqty) }}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div v-if="item.children&&item.children.length>0" class="kb_block03_02 flex_s_c">
                    <div
                      v-for="(it,ind) in item.children"
                      :key="ind"
                      class="kb_block03_02_content flex_c_c"
                    >
                      <div class="flex_c_c content01">
<!--                        <div-->
<!--                          v-if="it.status==='START'&&(parseFloat(it.ngqty)===0||it.ngqty==='')&&(parseFloat(it.goodqty)===0||it.goodqty==='')"-->
<!--                          class="circle"-->
<!--                          style="background-color: blue;"-->
<!--                        />-->
                        <div
                          v-if="it.status==='ALLO'&&(parseFloat(it.ngqty)===0||it.ngqty==='')&&(parseFloat(it.goodqty)===0||it.goodqty==='')"
                          class="circle"
                          style="background-color: rgb(255 255 255)"
                        />
                        <div
                          v-else-if="parseFloat(it.ngqty)+parseFloat(it.goodqty)>=parseFloat(it.planqty)"
                          class="circle"
                        />
                        <div v-else class="circleYellow"/>
                      </div>
                    </div>
                  </div>

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

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

                <el-table-column
                  prop="status"
                  width="80"
                  label="状态"
                >
                  <template slot-scope="{row}">
                    <div v-if="row.status==='ALLO'">已派发</div>
                    <div v-if="row.status==='START'">开工</div>
                    <div v-if="row.status==='NEW'">新工单</div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="lm_date"
                  label="派发时间"
                  width="140"
                >
                  <template slot-scope="{row}">
                    <div>{{ row.lm_date.substring(0, 10) }}</div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="saleOrderCode"
                  label="销售订单号"
                  width="190"
                >
                  <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="220"
                />
                <el-table-column
                  prop="partname"
                  label="产品名称"
                  width="320"
                >
                  <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="125"
                />
                <el-table-column
                  prop="good_qty"
                  label="完工数量"
                  width="125"
                />
                <!--                <el-table-column-->
                <!--                  prop="ng_qty"-->
                <!--                  label="不良数量"-->
                <!--                  width="105"-->
                <!--                />-->
                <el-table-column
                  label="完成率"
                  width="134"
                >
                  <template slot-scope="{row}">
                    <div>{{ parseFloat((row.good_qty * 100 / row.plan_qty).toFixed(2)) }}%</div>
                  </template>
                </el-table-column>
                <!--                <el-table-column-->

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

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

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

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

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

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

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

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

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

    this.getShopSearch()
    this.setStarsRef()
  },
  methods: {
    setStarsRef() {
      const starNodes = Array.from(this.$refs.starsRef.children)
      starNodes.forEach(item => {
        const speed = 0.2 + Math.random() * 1
        const thisDistance = this.distance + Math.random() * 300
        item.style.transformOrigin = `0 0 ${thisDistance}px`
        item.style.transform = `
        translate3d(0,0,-${thisDistance}px)
        rotateY(${Math.random() * 360}deg)
        rotateX(${Math.random() * -50}deg)
        scale(${speed},${speed})`
      })
    },
    // èŽ·å–车间编码
    async getShopSearch() {
      // const res1 = await ShopSearch()
      // if (res1.code === '200') {
      //   this.ShopArr = []
      //   res1.data.forEach(item => {
      //     this.ShopArr.push(item.org_code)
      //   })

      // if (this.ShopArr.length > 0) {
      this.getShopSearchLine()
      this.getRightRightData()
      this.getLeftBottomData()
      this.getEcharts()
      // }
      // }
      // if (this.ShopArr.length > 0) {
      //   setInterval(() => {
      //     this.ShopSearchTask = ShopSearch().then(res1 => {
      //       if (res1.code === '200') {
      //         this.ShopArr = []
      //         res1.data.forEach(item => {
      //           this.ShopArr.push(item.org_code)
      //         })
      //       }
      //     })
      //   }, 1000 * 60)
      // }
    },
    // äº§çº¿åŠ å·¥ä¸­ä»»åŠ¡
    getShopSearchLine() {
      let length, count
      LineSearchTopLeftData({shopcode: this.ShopArr.join(',')}).then(res => {
        this.lineContent = res.data
        length = this.lineContent.length
        count = Math.ceil(length / 3) // éœ€è¦è½®æ’­çš„组数   3个为一组
        this.lineContent3 = this.lineContent.slice(0, 3)
        this.number1 = this.lineContent.length
      })

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

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

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

      LineSearchTopRightData({shopcode: this.ShopArr.join(',')}).then(res => {
        this.tableDataRightTopTemp = res.data

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

        const loop = Math.floor(this.tableDataRightTopTemp.length / scale)// éœ€è¦å¾ªçŽ¯çš„次数
        let nowLoop = 0// å½“前循环的次数

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

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

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

              if (this.tableDataLeftBottom.length > 10) {
                clearInterval(aaa)
                this.getLeftBottomData()
              }
            })
          }
        }, this.tableDataLeftBottom.length <= 10 ? 1000 * 15 : 100)
      })
    },

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

      setInterval(() => {
        LineSearchBottomRightData({shopcode: this.ShopArr.join(',')}).then(res => {
          dataArr = res.data.map(i => i.cont)
          titlenameArr = res.data.map(i => i.name)
          loadEcharts('bar01', bar02(dataArr, titlenameArr))
        })
      }, 1000 * 10)
    },
    // èŽ·å–topEcharts
    getTopBar() {
      loadEcharts('topBarLeft', kbTop())
      loadEcharts('topBarRight', kbTop())
    },
    // èŽ·å–当前时间
    getNowTime() {
      const dt = new Date()
      const wk = dt.getDay()
      const y = dt.getFullYear()
      const m = (dt.getMonth() + 1 + '').padStart(2, '0')
      const d = (dt.getDate() + '').padStart(2, '0')

      const hh = (dt.getHours() + '').padStart(2, '0')
      const mm = (dt.getMinutes() + '').padStart(2, '0')
      const ss = (dt.getSeconds() + '').padStart(2, '0')
      const weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      const week = weeks[wk]

      this.headTime = `${y}-${m}-${d}  ${hh}:${mm}:${ss}   ${week}`
    },
    headerCellStyle() {
      return {
        backgroundColor: '#000',
        padding: '10px 0',
        textAlign: 'center',
        color: '#07acc2',
        border: 'none',
        fontSize: '18px'
      }
    },
    cellStyle() {
      return {
        padding: '7px 0',
        textAlign: 'center',
        backgroundColor: '#000',
        color: '#fff',
        border: 'none',
        fontSize: '18px'
      }
    }
  }

}
</script>

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

.tableData {
  background: #000;
}

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

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

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

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

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

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

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

      .content02Parent {
        display: flex;

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

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

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

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

    }
  }

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

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

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

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

.circleYellow {
  width: 26px;
  height: 26px;
  background-color: rgb(255 255 0);
  border-radius: 50%;
}

::v-deep .el-table__body-wrapper{
  overflow: hidden !important;
}

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

</style>

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

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

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

 src/views/kb/zp2.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,712 @@
<template>
  <div>
    <div class="kb_dashboard">
      <!--    æ˜Ÿç©ºèƒŒæ™¯-->
      <div ref="starsRef" class="stars">
        <div v-for="(item, index) in starsCount" :key="index" class="star"/>
      </div>

      <div class="kb_header">
        <div class="flex_c_c kb_header_text">
          <div id="topBarLeft" style="width:600px;height:100%"/>
          è£…配二线数字化看板
          <div id="topBarRight" style="width:600px;height:100%;transform:rotate(180deg);"/>
        </div>
        <div class="kb_headTime">
          <span>{{ headTime }}</span>
        </div>
      </div>
      <div style="display: flex;justify-content: space-between;padding:0 20px 20px 20px">
        <!--       å·¦è¾¹-->
        <div style="width: 1400px ;height: 969px;" class="flex_c_b">
          <div>
            <div class="smallTitle">
              <svg-icon icon-class="cxjg" class="svg_class"/>
              äº§çº¿åŠ å·¥ä¸­ä»»åŠ¡

              <div style="display: flex;margin-left: 85px;">

                <div class="circle"   style="background-color: rgb(255 255 255)"></div>
                <div  style="margin-left: 10px" >未开始</div>

<!--                <div class="circle"  style="margin-left: 10px;background-color: blue;"></div>-->
<!--                <div  style="margin-left: 10px" >开工</div>-->

                <div class="circleYellow" style="margin-left: 10px"></div>
                <div  style="margin-left: 10px" >执行中</div>

                <div class="circle" style="margin-left: 10px"></div>
                <div  style="margin-left: 10px" >完工</div>

              </div>

            </div>
            <div class="lineContent horn">
              <div v-for="item in lineContent3" :key="item.workcode" class="kb_left_top_block">
                <div class="kb_block02 kb_pd10">
                  <div>
                    <div>销售订单:{{ item.saleordercode }}</div>
                    <div class="kb_mt10">
                      åŠ å·¥å•å·:{{ item.workcode }}
                    </div>
                    <div class="kb_mt10">
                      äº§å“åç§°:{{ item.partname }}
                    </div>
                    <div class="kb_mt10">
                      ä»»åŠ¡æ•°é‡:{{ parseFloat(item.qty) }}
                    </div>
                  </div>
                </div>
                <div class="kb_block03 kb_pd10 ">
                  <div v-if="item.children&&item.children.length>0" class="flex_s_c">
                    <div
                      v-for="(it,ind) in item.children"
                      :key="ind"
                      class="kb_block03_content flex_c_c"
                    >
                      <div>
                        <div class="content01">{{ it.stepname }}</div>
                      </div>
                      <div class="content02Parent">
                        <div class="content02">
                          <div class="content02_1 ">任务</div>
                          <div class="content02_2 borderTop ">{{ parseFloat(it.planqty) }}</div>
                        </div>
                        <div class="content02">
                          <div class="content02_1 ">合格</div>
                          <div class="content02_2 borderTop ">{{ parseFloat(it.goodqty) }}</div>
                        </div>
                        <div class="content02" style="border-right: 0">
                          <div class="content02_1 ">不良</div>
                          <div class="content02_2 borderTop ">{{ parseFloat(it.ngqty) }}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div v-if="item.children&&item.children.length>0" class="kb_block03_02 flex_s_c">
                    <div
                      v-for="(it,ind) in item.children"
                      :key="ind"
                      class="kb_block03_02_content flex_c_c"
                    >
                      <div class="flex_c_c content01">
<!--                        <div-->
<!--                          v-if="it.status==='START'&&(parseFloat(it.ngqty)===0||it.ngqty==='')&&(parseFloat(it.goodqty)===0||it.goodqty==='')"-->
<!--                          class="circle"-->
<!--                          style="background-color: blue;"-->
<!--                        />-->
                        <div
                          v-if="it.status==='ALLO'&&(parseFloat(it.ngqty)===0||it.ngqty==='')&&(parseFloat(it.goodqty)===0||it.goodqty==='')"
                          class="circle"
                          style="background-color: rgb(255 255 255)"
                        />
                        <div
                          v-else-if="parseFloat(it.ngqty)+parseFloat(it.goodqty)>=parseFloat(it.planqty)"
                          class="circle"
                        />
                        <div v-else class="circleYellow"/>
                      </div>
                    </div>
                  </div>

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

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

                <el-table-column
                  prop="status"
                  width="80"
                  label="状态"
                >
                  <template slot-scope="{row}">
                    <div v-if="row.status==='ALLO'">已派发</div>
                    <div v-if="row.status==='START'">开工</div>
                    <div v-if="row.status==='NEW'">新工单</div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="lm_date"
                  label="派发时间"
                  width="140"
                >
                  <template slot-scope="{row}">
                    <div>{{ row.lm_date.substring(0, 10) }}</div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="saleOrderCode"
                  label="销售订单号"
                  width="190"
                >
                  <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="220"
                />
                <el-table-column
                  prop="partname"
                  label="产品名称"
                  width="320"
                >
                  <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="125"
                />
                <el-table-column
                  prop="good_qty"
                  label="完工数量"
                  width="125"
                />
                <!--                <el-table-column-->
                <!--                  prop="ng_qty"-->
                <!--                  label="不良数量"-->
                <!--                  width="105"-->
                <!--                />-->
                <el-table-column
                  label="完成率"
                  width="134"
                >
                  <template slot-scope="{row}">
                    <div>{{ parseFloat((row.good_qty * 100 / row.plan_qty).toFixed(2)) }}%</div>
                  </template>
                </el-table-column>
                <!--                <el-table-column-->

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

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

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

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

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

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

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

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

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

    this.getShopSearch()
    this.setStarsRef()
  },
  methods: {
    setStarsRef() {
      const starNodes = Array.from(this.$refs.starsRef.children)
      starNodes.forEach(item => {
        const speed = 0.2 + Math.random() * 1
        const thisDistance = this.distance + Math.random() * 300
        item.style.transformOrigin = `0 0 ${thisDistance}px`
        item.style.transform = `
        translate3d(0,0,-${thisDistance}px)
        rotateY(${Math.random() * 360}deg)
        rotateX(${Math.random() * -50}deg)
        scale(${speed},${speed})`
      })
    },
    // èŽ·å–车间编码
    async getShopSearch() {
      // const res1 = await ShopSearch()
      // if (res1.code === '200') {
      //   this.ShopArr = []
      //   res1.data.forEach(item => {
      //     this.ShopArr.push(item.org_code)
      //   })

      // if (this.ShopArr.length > 0) {
      this.getShopSearchLine()
      this.getRightRightData()
      this.getLeftBottomData()
      this.getEcharts()
      // }
      // }
      // if (this.ShopArr.length > 0) {
      //   setInterval(() => {
      //     this.ShopSearchTask = ShopSearch().then(res1 => {
      //       if (res1.code === '200') {
      //         this.ShopArr = []
      //         res1.data.forEach(item => {
      //           this.ShopArr.push(item.org_code)
      //         })
      //       }
      //     })
      //   }, 1000 * 60)
      // }
    },
    // äº§çº¿åŠ å·¥ä¸­ä»»åŠ¡
    getShopSearchLine() {
      let length, count
      LineSearchTopLeftData({shopcode: this.ShopArr.join(',')}).then(res => {
        this.lineContent = res.data
        length = this.lineContent.length
        count = Math.ceil(length / 3) // éœ€è¦è½®æ’­çš„组数   3个为一组
        this.lineContent3 = this.lineContent.slice(0, 3)
        this.number1 = this.lineContent.length
      })

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

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

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

      LineSearchTopRightData({shopcode: this.ShopArr.join(',')}).then(res => {
        this.tableDataRightTopTemp = res.data

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

        const loop = Math.floor(this.tableDataRightTopTemp.length / scale)// éœ€è¦å¾ªçŽ¯çš„次数
        let nowLoop = 0// å½“前循环的次数

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

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

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

              if (this.tableDataLeftBottom.length > 10) {
                clearInterval(aaa)
                this.getLeftBottomData()
              }
            })
          }
        }, this.tableDataLeftBottom.length <= 10 ? 1000 * 15 : 100)
      })
    },

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

      setInterval(() => {
        LineSearchBottomRightData({shopcode: this.ShopArr.join(',')}).then(res => {
          dataArr = res.data.map(i => i.cont)
          titlenameArr = res.data.map(i => i.name)
          loadEcharts('bar01', bar02(dataArr, titlenameArr))
        })
      }, 1000 * 10)
    },
    // èŽ·å–topEcharts
    getTopBar() {
      loadEcharts('topBarLeft', kbTop())
      loadEcharts('topBarRight', kbTop())
    },
    // èŽ·å–当前时间
    getNowTime() {
      const dt = new Date()
      const wk = dt.getDay()
      const y = dt.getFullYear()
      const m = (dt.getMonth() + 1 + '').padStart(2, '0')
      const d = (dt.getDate() + '').padStart(2, '0')

      const hh = (dt.getHours() + '').padStart(2, '0')
      const mm = (dt.getMinutes() + '').padStart(2, '0')
      const ss = (dt.getSeconds() + '').padStart(2, '0')
      const weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      const week = weeks[wk]

      this.headTime = `${y}-${m}-${d}  ${hh}:${mm}:${ss}   ${week}`
    },
    headerCellStyle() {
      return {
        backgroundColor: '#000',
        padding: '10px 0',
        textAlign: 'center',
        color: '#07acc2',
        border: 'none',
        fontSize: '18px'
      }
    },
    cellStyle() {
      return {
        padding: '7px 0',
        textAlign: 'center',
        backgroundColor: '#000',
        color: '#fff',
        border: 'none',
        fontSize: '18px'
      }
    }
  }

}
</script>

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

.tableData {
  background: #000;
}

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

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

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

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

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

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

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

      .content02Parent {
        display: flex;

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

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

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

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

    }
  }

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

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

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

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

.circleYellow {
  width: 26px;
  height: 26px;
  background-color: rgb(255 255 0);
  border-radius: 50%;
}

::v-deep .el-table__body-wrapper{
  overflow: hidden !important;
}

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

</style>

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

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

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

 src/views/kb/zp3.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,712 @@
<template>
  <div>
    <div class="kb_dashboard">
      <!--    æ˜Ÿç©ºèƒŒæ™¯-->
      <div ref="starsRef" class="stars">
        <div v-for="(item, index) in starsCount" :key="index" class="star"/>
      </div>

      <div class="kb_header">
        <div class="flex_c_c kb_header_text">
          <div id="topBarLeft" style="width:600px;height:100%"/>
          è£…配三线数字化看板
          <div id="topBarRight" style="width:600px;height:100%;transform:rotate(180deg);"/>
        </div>
        <div class="kb_headTime">
          <span>{{ headTime }}</span>
        </div>
      </div>
      <div style="display: flex;justify-content: space-between;padding:0 20px 20px 20px">
        <!--       å·¦è¾¹-->
        <div style="width: 1400px ;height: 969px;" class="flex_c_b">
          <div>
            <div class="smallTitle">
              <svg-icon icon-class="cxjg" class="svg_class"/>
              äº§çº¿åŠ å·¥ä¸­ä»»åŠ¡

              <div style="display: flex;margin-left: 85px;">

                <div class="circle"   style="background-color: rgb(255 255 255)"></div>
                <div  style="margin-left: 10px" >未开始</div>

<!--                <div class="circle"  style="margin-left: 10px;background-color: blue;"></div>-->
<!--                <div  style="margin-left: 10px" >开工</div>-->

                <div class="circleYellow" style="margin-left: 10px"></div>
                <div  style="margin-left: 10px" >执行中</div>

                <div class="circle" style="margin-left: 10px"></div>
                <div  style="margin-left: 10px" >完工</div>

              </div>

            </div>
            <div class="lineContent horn">
              <div v-for="item in lineContent3" :key="item.workcode" class="kb_left_top_block">
                <div class="kb_block02 kb_pd10">
                  <div>
                    <div>销售订单:{{ item.saleordercode }}</div>
                    <div class="kb_mt10">
                      åŠ å·¥å•å·:{{ item.workcode }}
                    </div>
                    <div class="kb_mt10">
                      äº§å“åç§°:{{ item.partname }}
                    </div>
                    <div class="kb_mt10">
                      ä»»åŠ¡æ•°é‡:{{ parseFloat(item.qty) }}
                    </div>
                  </div>
                </div>
                <div class="kb_block03 kb_pd10 ">
                  <div v-if="item.children&&item.children.length>0" class="flex_s_c">
                    <div
                      v-for="(it,ind) in item.children"
                      :key="ind"
                      class="kb_block03_content flex_c_c"
                    >
                      <div>
                        <div class="content01">{{ it.stepname }}</div>
                      </div>
                      <div class="content02Parent">
                        <div class="content02">
                          <div class="content02_1 ">任务</div>
                          <div class="content02_2 borderTop ">{{ parseFloat(it.planqty) }}</div>
                        </div>
                        <div class="content02">
                          <div class="content02_1 ">合格</div>
                          <div class="content02_2 borderTop ">{{ parseFloat(it.goodqty) }}</div>
                        </div>
                        <div class="content02" style="border-right: 0">
                          <div class="content02_1 ">不良</div>
                          <div class="content02_2 borderTop ">{{ parseFloat(it.ngqty) }}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div v-if="item.children&&item.children.length>0" class="kb_block03_02 flex_s_c">
                    <div
                      v-for="(it,ind) in item.children"
                      :key="ind"
                      class="kb_block03_02_content flex_c_c"
                    >
                      <div class="flex_c_c content01">
<!--                        <div-->
<!--                          v-if="it.status==='START'&&(parseFloat(it.ngqty)===0||it.ngqty==='')&&(parseFloat(it.goodqty)===0||it.goodqty==='')"-->
<!--                          class="circle"-->
<!--                          style="background-color: blue;"-->
<!--                        />-->
                        <div
                          v-if="it.status==='ALLO'&&(parseFloat(it.ngqty)===0||it.ngqty==='')&&(parseFloat(it.goodqty)===0||it.goodqty==='')"
                          class="circle"
                          style="background-color: rgb(255 255 255)"
                        />
                        <div
                          v-else-if="parseFloat(it.ngqty)+parseFloat(it.goodqty)>=parseFloat(it.planqty)"
                          class="circle"
                        />
                        <div v-else class="circleYellow"/>
                      </div>
                    </div>
                  </div>

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

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

                <el-table-column
                  prop="status"
                  width="80"
                  label="状态"
                >
                  <template slot-scope="{row}">
                    <div v-if="row.status==='ALLO'">已派发</div>
                    <div v-if="row.status==='START'">开工</div>
                    <div v-if="row.status==='NEW'">新工单</div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="lm_date"
                  label="派发时间"
                  width="140"
                >
                  <template slot-scope="{row}">
                    <div>{{ row.lm_date.substring(0, 10) }}</div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="saleOrderCode"
                  label="销售订单号"
                  width="190"
                >
                  <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="220"
                />
                <el-table-column
                  prop="partname"
                  label="产品名称"
                  width="320"
                >
                  <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="125"
                />
                <el-table-column
                  prop="good_qty"
                  label="完工数量"
                  width="125"
                />
                <!--                <el-table-column-->
                <!--                  prop="ng_qty"-->
                <!--                  label="不良数量"-->
                <!--                  width="105"-->
                <!--                />-->
                <el-table-column
                  label="完成率"
                  width="134"
                >
                  <template slot-scope="{row}">
                    <div>{{ parseFloat((row.good_qty * 100 / row.plan_qty).toFixed(2)) }}%</div>
                  </template>
                </el-table-column>
                <!--                <el-table-column-->

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

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

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

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

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

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

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

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

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

    this.getShopSearch()
    this.setStarsRef()
  },
  methods: {
    setStarsRef() {
      const starNodes = Array.from(this.$refs.starsRef.children)
      starNodes.forEach(item => {
        const speed = 0.2 + Math.random() * 1
        const thisDistance = this.distance + Math.random() * 300
        item.style.transformOrigin = `0 0 ${thisDistance}px`
        item.style.transform = `
        translate3d(0,0,-${thisDistance}px)
        rotateY(${Math.random() * 360}deg)
        rotateX(${Math.random() * -50}deg)
        scale(${speed},${speed})`
      })
    },
    // èŽ·å–车间编码
    async getShopSearch() {
      // const res1 = await ShopSearch()
      // if (res1.code === '200') {
      //   this.ShopArr = []
      //   res1.data.forEach(item => {
      //     this.ShopArr.push(item.org_code)
      //   })

      // if (this.ShopArr.length > 0) {
      this.getShopSearchLine()
      this.getRightRightData()
      this.getLeftBottomData()
      this.getEcharts()
      // }
      // }
      // if (this.ShopArr.length > 0) {
      //   setInterval(() => {
      //     this.ShopSearchTask = ShopSearch().then(res1 => {
      //       if (res1.code === '200') {
      //         this.ShopArr = []
      //         res1.data.forEach(item => {
      //           this.ShopArr.push(item.org_code)
      //         })
      //       }
      //     })
      //   }, 1000 * 60)
      // }
    },
    // äº§çº¿åŠ å·¥ä¸­ä»»åŠ¡
    getShopSearchLine() {
      let length, count
      LineSearchTopLeftData({shopcode: this.ShopArr.join(',')}).then(res => {
        this.lineContent = res.data
        length = this.lineContent.length
        count = Math.ceil(length / 3) // éœ€è¦è½®æ’­çš„组数   3个为一组
        this.lineContent3 = this.lineContent.slice(0, 3)
        this.number1 = this.lineContent.length
      })

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

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

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

      LineSearchTopRightData({shopcode: this.ShopArr.join(',')}).then(res => {
        this.tableDataRightTopTemp = res.data

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

        const loop = Math.floor(this.tableDataRightTopTemp.length / scale)// éœ€è¦å¾ªçŽ¯çš„次数
        let nowLoop = 0// å½“前循环的次数

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

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

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

              if (this.tableDataLeftBottom.length > 10) {
                clearInterval(aaa)
                this.getLeftBottomData()
              }
            })
          }
        }, this.tableDataLeftBottom.length <= 10 ? 1000 * 15 : 100)
      })
    },

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

      setInterval(() => {
        LineSearchBottomRightData({shopcode: this.ShopArr.join(',')}).then(res => {
          dataArr = res.data.map(i => i.cont)
          titlenameArr = res.data.map(i => i.name)
          loadEcharts('bar01', bar02(dataArr, titlenameArr))
        })
      }, 1000 * 10)
    },
    // èŽ·å–topEcharts
    getTopBar() {
      loadEcharts('topBarLeft', kbTop())
      loadEcharts('topBarRight', kbTop())
    },
    // èŽ·å–当前时间
    getNowTime() {
      const dt = new Date()
      const wk = dt.getDay()
      const y = dt.getFullYear()
      const m = (dt.getMonth() + 1 + '').padStart(2, '0')
      const d = (dt.getDate() + '').padStart(2, '0')

      const hh = (dt.getHours() + '').padStart(2, '0')
      const mm = (dt.getMinutes() + '').padStart(2, '0')
      const ss = (dt.getSeconds() + '').padStart(2, '0')
      const weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      const week = weeks[wk]

      this.headTime = `${y}-${m}-${d}  ${hh}:${mm}:${ss}   ${week}`
    },
    headerCellStyle() {
      return {
        backgroundColor: '#000',
        padding: '10px 0',
        textAlign: 'center',
        color: '#07acc2',
        border: 'none',
        fontSize: '18px'
      }
    },
    cellStyle() {
      return {
        padding: '7px 0',
        textAlign: 'center',
        backgroundColor: '#000',
        color: '#fff',
        border: 'none',
        fontSize: '18px'
      }
    }
  }

}
</script>

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

.tableData {
  background: #000;
}

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

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

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

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

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

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

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

      .content02Parent {
        display: flex;

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

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

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

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

    }
  }

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

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

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

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

.circleYellow {
  width: 26px;
  height: 26px;
  background-color: rgb(255 255 0);
  border-radius: 50%;
}

::v-deep .el-table__body-wrapper{
  overflow: hidden !important;
}

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

</style>

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

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

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

 src/views/kb/zpcj.vue

@@ -29,8 +29,8 @@
                <div class="circle"   style="background-color: rgb(255 255 255)"></div>
                <div  style="margin-left: 10px" >未开始</div>

                <div class="circle"  style="margin-left: 10px;background-color: blue;"></div>
                <div  style="margin-left: 10px" >开工</div>
<!--                <div class="circle"  style="margin-left: 10px;background-color: blue;"></div>-->
<!--                <div  style="margin-left: 10px" >开工</div>-->

                <div class="circleYellow" style="margin-left: 10px"></div>
                <div  style="margin-left: 10px" >执行中</div>
@@ -90,13 +90,13 @@
                      class="kb_block03_02_content flex_c_c"
                    >
                      <div class="flex_c_c content01">
<!--                        <div-->
<!--                          v-if="it.status==='START'&&(parseFloat(it.ngqty)===0||it.ngqty==='')&&(parseFloat(it.goodqty)===0||it.goodqty==='')"-->
<!--                          class="circle"-->
<!--                          style="background-color: blue;"-->
<!--                        />-->
                        <div
                          v-if="it.status==='START'&&(parseFloat(it.ngqty)===0||it.ngqty==='')&&(parseFloat(it.goodqty)===0||it.goodqty==='')"
                          class="circle"
                          style="background-color: blue;"
                        />
                        <div
                          v-else-if="it.status==='ALLO'&&(parseFloat(it.ngqty)===0||it.ngqty==='')&&(parseFloat(it.goodqty)===0||it.goodqty==='')"
                          v-if="it.status==='ALLO'&&(parseFloat(it.ngqty)===0||it.ngqty==='')&&(parseFloat(it.goodqty)===0||it.goodqty==='')"
                          class="circle"
                          style="background-color: rgb(255 255 255)"
                        />
@@ -314,7 +314,7 @@
      tableDataLeftBottom: [],
      tableDataLeftBottomTemp: [],
      lineContent3: [],
      ShopArr: ['102'], // è½¦é—´ç¼–码数组   è£…配车间
      ShopArr: ['102','10201','10202','10203'], // è½¦é—´ç¼–码数组   è£…配车间

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

 src/views/xtsy/index.vue

@@ -11,18 +11,18 @@
            <div class="top_card_content_flex">
              <div class="content" style="width: 84%">
                <div class="content_title1">今日登录</div>
                <div class="content_end1" :style="{color:`rgb(${barTopColor01[0]})`}">1/
                  <countTo :start-val="0" :end-val="999" :duration="3000" />
                <div class="content_end1" :style="{color:`rgb(${barTopColor01[0]})`}">10/
                  <countTo :start-val="0" :end-val="130" :duration="3000" />
                </div>
              </div>
              <div id="barTop01" class="barTop" style="width: 100%;" />
              <div id="barTop01" class="barTop" style="width: 94%;" />
              <div class="content" style="width: 84%">
                <div class="content_title1">昨日登录</div>
                <div class="content_end1">0/
                  <countTo :start-val="0" :end-val="999" :duration="3000" />
                <div class="content_end1">12/
                  <countTo :start-val="0" :end-val="130" :duration="3000" />
                </div>
              </div>
              <div id="barTop02" class="barTop" />
              <div id="barTop02" class="barTop" style="width: 92%;" />
            </div>
          </div>
        </div>
@@ -33,18 +33,18 @@
            <div class="top_card_content_flex">
              <div class="content" style="width: 84%">
                <div class="content_title1">今日活跃</div>
                <div class="content_end1" :style="{color:`rgb(${barTopColor02[0]})`}">0/
                  <countTo :start-val="0" :end-val="999" :duration="3000" />
                <div class="content_end1" :style="{color:`rgb(${barTopColor02[0]})`}">10/
                  <countTo :start-val="0" :end-val="130" :duration="3000" />
                </div>
              </div>
              <div id="barTop03" class="barTop" />
              <div id="barTop03" class="barTop" style="width:94%;" />
              <div class="content" style="width: 84%">
                <div class="content_title1">昨日活跃</div>
                <div class="content_end1">0/
                  <countTo :start-val="0" :end-val="999" :duration="3000" />
                <div class="content_end1">12/
                  <countTo :start-val="0" :end-val="130" :duration="3000" />
                </div>
              </div>
              <div id="barTop04" class="barTop" />
              <div id="barTop04" class="barTop" style="width: 92%;" />
            </div>
          </div>
        </div>
@@ -55,18 +55,18 @@
            <div class="top_card_content_flex">
              <div class="content" style="width: 84%">
                <div class="content_title1">今日活跃</div>
                <div class="content_end1" :style="{color:`rgb(${barTopColor03[0]})`}">0/
                  <countTo :start-val="0" :end-val="999" :duration="3000" />
                <div class="content_end1" :style="{color:`rgb(${barTopColor03[0]})`}">10/
                  <countTo :start-val="0" :end-val="130" :duration="3000" />
                </div>
              </div>
              <div id="barTop05" class="barTop" />
              <div id="barTop05" class="barTop" style="width:94%;" />
              <div class="content" style="width: 84%">
                <div class="content_title1">昨日活跃</div>
                <div class="content_end1">0/
                  <countTo :start-val="0" :end-val="999" :duration="3000" />
                <div class="content_end1">12/
                  <countTo :start-val="0" :end-val="130" :duration="3000" />
                </div>
              </div>
              <div id="barTop06" class="barTop" />
              <div id="barTop06" class="barTop" style="width: 92%;" />
            </div>
          </div>
        </div>
@@ -78,17 +78,17 @@
              <div class="content" style="width: 84%">
                <div class="content_title1">今日活跃</div>
                <div class="content_end1" :style="{color:`rgb(${barTopColor04[0]})`}">0/
                  <countTo :start-val="0" :end-val="999" :duration="3000" />
                  <countTo :start-val="0" :end-val="130" :duration="3000" />
                </div>
              </div>
              <div id="barTop07" class="barTop" />
              <div id="barTop07" class="barTop" style="width: 92%;" />
              <div class="content" style="width: 84%">
                <div class="content_title1">昨日活跃</div>
                <div class="content_end1">0/
                  <countTo :start-val="0" :end-val="999" :duration="3000" />
                  <countTo :start-val="0" :end-val="130" :duration="3000" />
                </div>
              </div>
              <div id="barTop08" class="barTop" />
              <div id="barTop08" class="barTop" style="width: 92%;" />
            </div>
          </div>
        </div>
@@ -134,7 +134,7 @@
      mainHeight: 0,
      tableHeight: 0,
      barTopColor01: ['42,197,137', '187,236,218'],
      barTopColor02: ['248,216,76', '255,250,238'],
      barTopColor02: ['248,216,76', '255,250,188'],
      barTopColor03: ['42,197,137', '187,236,218'],
      barTopColor04: ['232,103,103', '253,240,240']
    }
@@ -167,28 +167,28 @@
      this.getLine01()
    },
    getTopData() {
      loadEcharts('barTop01', barTop(1, this.barTopColor01))
      loadEcharts('barTop02', barTop(0, this.barTopColor01))
      loadEcharts('barTop03', barTop(0, this.barTopColor02))
      loadEcharts('barTop04', barTop(0, this.barTopColor02))
      loadEcharts('barTop05', barTop(0, this.barTopColor03))
      loadEcharts('barTop06', barTop(0, this.barTopColor03))
      loadEcharts('barTop01', barTop(10, this.barTopColor01))
      loadEcharts('barTop02', barTop(12, this.barTopColor01))
      loadEcharts('barTop03', barTop(10, this.barTopColor02))
      loadEcharts('barTop04', barTop(12, this.barTopColor02))
      loadEcharts('barTop05', barTop(10, this.barTopColor03))
      loadEcharts('barTop06', barTop(12, this.barTopColor03))
      loadEcharts('barTop07', barTop(0, this.barTopColor04))
      loadEcharts('barTop08', barTop(0, this.barTopColor04))
    },
    async getBar01() {
      // const res=await  xxx()
      let data = [
        { key: '石文超', value: 300 },
        { key: '王俊', value: 310 },
        { key: '温顺', value: 180 },
        { key: '陈云科', value: 190 },
        { key: '杜群冬', value: 120 },
        { key: '朱国兵', value: 230 },
        { key: '田兴来', value: 270 },
        { key: '石文超', value: 322 },
        { key: '王俊', value: 317 },
        { key: '温顺', value: 186 },
        { key: '陈云科', value: 199 },
        { key: '杜群冬', value: 121 },
        { key: '朱国兵', value: 232 },
        { key: '田兴来', value: 273 },
        { key: '李伟', value: 250 },
        { key: '杨胜刚', value: 260 },
        { key: '潘臻', value: 180 }
        { key: '杨胜刚', value: 268 },
        { key: '潘臻', value: 189 }
      ]
      data = data.sort((a, b) => b.value - a.value)
      loadEcharts('bar01', bar01(data))
@@ -202,17 +202,17 @@
      // console.log(document.getElementById('line01'))
      const data2 = [
        { key: '2', value: 0 },
        { key: '4', value: 0.2 },
        { key: '6', value: 0.3 },
        { key: '8', value: 0.1 },
        { key: '10', value: 0.8 },
        { key: '12', value: 0.2 },
        { key: '14', value: 0.3 },
        { key: '16', value: 0.3 },
        { key: '18', value: 0 },
        { key: '20', value: 0.2 },
        { key: '22', value: 0.1 },
        { key: '24', value: 0.4 }
        { key: '4', value: 0 },
        { key: '6', value: 0 },
        { key: '8', value: 8 },
        { key: '10', value: 10 },
        { key: '12', value: 8 },
        { key: '14', value: 6 },
        { key: '16', value: 8 },
        { key: '18', value: 3 },
        { key: '20', value: 1 },
        { key: '22', value: 0 },
        { key: '24', value: 0 }
      ]
      loadEcharts('line01', line01(data2))
    }