1.富尔达看板初稿实现

loulijun2021

2022-11-15 59fbd9a0bee7e07df2bd2fe7e851eb2b5fb8d3ae

1.富尔达看板初稿实现

 src/icons/svg/bll.svg

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1668488780072" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10609" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M283.3 515.5H552v59.6H283.3zM283.3 642.2H469v59.6H283.3z" fill="#09d8f2" p-id="10610"></path><path d="M236 219.6h302.6v142.8c0 19.7 16 35.7 35.7 35.7H749v131l59.6 103.3V338.7L629.9 159.8h-89.7v0.1H191.3c-8.2 0-14.9 6.7-14.9 14.9V832c0 8.2 6.7 14.9 14.9 14.9h276.6l34.4-59.6H236V219.6z m362.3-0.1h7l119 119h-126v-119z" fill="#09d8f2" p-id="10611"></path><path d="M891.1 839.1L726 553.1c-5.3-9.2-15.2-14.9-25.8-14.9-10.6 0-20.4 5.7-25.7 14.9l-165.1 286c-5.3 9.2-5.4 20.6-0.1 29.8 5.3 9.2 15.2 14.9 25.8 14.9h330.3c10.6 0 20.5-5.7 25.8-14.9 5.2-9.2 5.2-20.6-0.1-29.8z m-325-3l134.1-232.3 134.1 232.3H566.1z" fill="#09d8f2" p-id="10612"></path><path d="M676.4 678.9h47.7v76h-47.7zM700.2 766.2c-14.6 0-26.4 11.8-26.4 26.4 0 14.6 11.8 26.4 26.4 26.4 14.6 0 26.4-11.8 26.4-26.4 0-14.6-11.8-26.4-26.4-26.4z" fill="#09d8f2" p-id="10613"></path></svg>

 src/icons/svg/blmx.svg

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1668489874368" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12415" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M785.2 530L595.5 836l-1.9 123.4L703.4 903l189.7-306-107.9-67zM852.1 422.1L807.5 494l107.9 67 44.6-72-107.9-66.9zM533.1 887.1l-86.3-47.2-30.6-16.7-30.6 16.7-86.9 47.3-86.7-47.3-30.6-16.7-30.6 16.7-22.8 12.3V160c0-17.7 14.3-32 32-32h511.6c17.7 0 32 14.3 32 32v320h64V128c0-35.3-26.2-64-58.6-64H122.6C90.2 64 64 92.7 64 128v832l117.2-64 117.3 64L416 896l117 64v-72.9z" p-id="12416" fill="#09d8f2"></path><path d="M575.6 320H255.9c-17.7 0-32-14.3-32-32s14.3-32 32-32h319.8c17.7 0 32 14.3 32 32-0.1 17.7-14.4 32-32.1 32zM575.6 480H255.9c-17.7 0-32-14.3-32-32s14.3-32 32-32h319.8c17.7 0 32 14.3 32 32-0.1 17.7-14.4 32-32.1 32zM511.7 640H255.9c-17.7 0-32-14.3-32-32s14.3-32 32-32h255.8c17.7 0 32 14.3 32 32s-14.3 32-32 32z" p-id="12417" fill="#09d8f2"></path></svg>

 src/icons/svg/cxjg.svg

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1668497420604" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="33727" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M938.666667 810.666667V85.333333H106.666667v448h21.333333v64h64v85.333334h42.666667v-85.333334h64v-64h21.333333V298.666667h362.666667v512h-106.666667v-85.333334h-170.666667v85.333334h-106.666666v-85.333334H128v85.333334H42.666667v128h938.666666v-128zM256 554.666667H170.666667v-21.333334h85.333333z m21.333333-298.666667v234.666667H149.333333V128h746.666667v682.666667h-170.666667V256z m170.666667 512h85.333333v42.666667h-85.333333zM170.666667 768h85.333333v42.666667H170.666667z m768 128H85.333333v-42.666667h853.333334z" p-id="33728" fill="#09d8f2"></path><path d="M661.333333 192m-42.666666 0a42.666667 42.666667 0 1 0 85.333333 0 42.666667 42.666667 0 1 0-85.333333 0Z" p-id="33729" fill="#09d8f2"></path><path d="M277.333333 170.666667h298.666667v42.666666H277.333333zM789.333333 597.333333h42.666667v170.666667h-42.666667zM789.333333 469.333333h42.666667v85.333334h-42.666667zM789.333333 341.333333h42.666667v85.333334h-42.666667z" p-id="33730" fill="#09d8f2"></path></svg>

 src/icons/svg/cxmc.svg

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1668471903327" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2727" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M243.2 498.2c-87.8 0-159.2-71.4-159.2-159.2s71.4-159.2 159.2-159.2H738L681.4 126c-12-11.4-12.6-30.4-1.2-42.4s30.4-12.6 42.4-1.2L834 188c5.8 5.6 9.2 13.2 9.4 21.4 0.2 8-3 15.8-8.8 21.6l-104.2 104.2c-5.8 5.8-13.6 8.8-21.2 8.8s-15.4-3-21.2-8.8c-11.8-11.8-11.8-30.8 0-42.4l53-53H243.2c-54.6 0-99.2 44.4-99.2 99.2s44.4 99.2 99.2 99.2h272.2c57.2 0 107.2 30.2 135.4 75.6-20.2 4.2-38.2 16-50.2 32.8-17.4-29-49-48.4-85.2-48.4H243.2z m252.2 258.2h-124.2c-13 44.2-53.8 76.6-102.2 76.6-58.8 0-106.6-47.8-106.6-106.6s47.8-106.6 106.6-106.6c48.4 0 89.2 32.4 102.2 76.6h142.2l-7.2 12.6c-8.4 14.6-12 31.2-10.8 47.4z m-179.8-30c0-25.6-20.8-46.6-46.6-46.6-25.6 0-46.6 20.8-46.6 46.6s20.8 46.6 46.6 46.6c25.6 0 46.6-21 46.6-46.6z m502.8-112h-121.2c-11 0-21.2 5.8-26.8 15.4l-60.6 105c-5.6 9.6-5.6 21.4 0 31l60.6 105c5.6 9.6 15.8 15.4 26.8 15.4h121.2c11 0 21.2-5.8 26.8-15.4l60.6-105c5.6-9.6 5.6-21.4 0-31L845.2 630c-5.6-9.6-15.8-15.6-26.8-15.6m0-60c32.4 0 62.6 17.4 78.8 45.4l60.6 105c16.2 28 16.2 62.8 0 91l-60.6 105c-16.2 28-46.4 45.4-78.8 45.4h-121.2c-32.4 0-62.6-17.4-78.8-45.4l-60.6-105c-16.2-28-16.2-62.8 0-91l60.6-105c16.2-28 46.4-45.4 78.8-45.4h121.2z m21.8 196c0-45.6-37-82.6-82.6-82.6s-82.6 37-82.6 82.6 37 82.6 82.6 82.6 82.6-37 82.6-82.6z m-60 0c0 12.4-10.2 22.6-22.6 22.6s-22.6-10.2-22.6-22.6 10.2-22.6 22.6-22.6 22.6 10.2 22.6 22.6z" p-id="2728" fill="#09d8f2"></path></svg>

 src/icons/svg/drwg.svg

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1668496047823" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="33524" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M554.666667 874.666667c0 12.8-8.533333 21.333333-21.333334 21.333333h-298.666666C179.2 896 128 849.066667 128 789.333333v-554.666666C128 174.933333 179.2 128 234.666667 128h465.066666C759.466667 128 810.666667 174.933333 810.666667 234.666667v298.666666c0 12.8-8.533333 21.333333-21.333334 21.333334s-21.333333-8.533333-21.333333-21.333334v-298.666666c0-34.133333-29.866667-64-64-64h-469.333333C200.533333 170.666667 170.666667 200.533333 170.666667 234.666667v554.666666c0 34.133333 29.866667 64 64 64h298.666666c12.8 0 21.333333 8.533333 21.333334 21.333334z m128-554.666667c0-12.8-8.533333-21.333333-21.333334-21.333333h-384c-12.8 0-21.333333 8.533333-21.333333 21.333333s8.533333 21.333333 21.333333 21.333333h384c12.8 0 21.333333-8.533333 21.333334-21.333333z m-42.666667 128c0-12.8-8.533333-21.333333-21.333333-21.333333h-341.333334c-12.8 0-21.333333 8.533333-21.333333 21.333333s8.533333 21.333333 21.333333 21.333333h341.333334c12.8 0 21.333333-8.533333 21.333333-21.333333zM277.333333 554.666667c-12.8 0-21.333333 8.533333-21.333333 21.333333s8.533333 21.333333 21.333333 21.333333h298.666667c12.8 0 21.333333-8.533333 21.333333-21.333333s-8.533333-21.333333-21.333333-21.333333h-298.666667z m405.333334 170.666666l-170.666667-42.666666 170.666667 213.333333 213.333333-298.666667-213.333333 128z" fill="#09d8f2" p-id="33525"></path></svg>

 src/icons/svg/rbl.svg

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1668491268678" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="32076" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M725.333333 170.666667h74.709334C864.853333 170.666667 917.333333 223.189333 917.333333 288.096V799.893333C917.333333 864.757333 864.832 917.333333 800.042667 917.333333H223.957333C159.146667 917.333333 106.666667 864.810667 106.666667 799.904V288.106667C106.666667 223.242667 159.168 170.666667 223.957333 170.666667H298.666667v-32a32 32 0 0 1 64 0v32h298.666666v-32a32 32 0 0 1 64 0v32z m0 64v32a32 32 0 0 1-64 0v-32H362.666667v32a32 32 0 0 1-64 0v-32h-74.709334A53.354667 53.354667 0 0 0 170.666667 288.096V799.893333A53.301333 53.301333 0 0 0 223.957333 853.333333h576.085334A53.354667 53.354667 0 0 0 853.333333 799.904V288.106667A53.301333 53.301333 0 0 0 800.042667 234.666667H725.333333z m-10.666666 224a32 32 0 0 1 0 64H309.333333a32 32 0 0 1 0-64h405.333334zM586.666667 618.666667a32 32 0 0 1 0 64H309.333333a32 32 0 0 1 0-64h277.333334z" p-id="32077" fill="#09d8f2"></path></svg>

 src/icons/svg/scxx.svg

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1668481681646" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2970" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M676.32 328.8a23.36 23.36 0 0 0-19.52 6.56l-51.52 51.52a24 24 0 0 1-29.76 4.32 21.92 21.92 0 0 1-9.28-16 22.72 22.72 0 0 1 6.24-17.44L626.08 304a22.88 22.88 0 0 0-5.6-36.48A173.12 173.12 0 0 0 416 298.88a176 176 0 0 0-41.76 178.88L181.12 671.04a52.16 52.16 0 0 0 0 73.6l35.52 35.36a51.84 51.84 0 0 0 73.44 0l193.44-193.28a176 176 0 0 0 178.88-41.76 173.12 173.12 0 0 0 30.88-204.16 22.88 22.88 0 0 0-16.96-12zM629.92 512a128 128 0 0 1-142.72 26.24 23.04 23.04 0 0 0-25.6 4.8L257.76 747.68a5.44 5.44 0 0 1-8.64 0l-35.52-35.52a6.24 6.24 0 0 1 0-8.64L417.6 499.52a22.72 22.72 0 0 0 4.64-25.44 128 128 0 0 1 116.96-180.48 121.12 121.12 0 0 1 29.28 3.52l-28.48 28.32a67.68 67.68 0 0 0 8.8 103.04 69.76 69.76 0 0 0 88.8-9.28l26.4-26.56A128 128 0 0 1 629.92 512z" fill="#09d8f2" p-id="2971"></path><path d="M539.36 662.72m32 0l210.08 0q32 0 32 32l0 0q0 32-32 32l-210.08 0q-32 0-32-32l0 0q0-32 32-32Z" fill="#09d8f2" p-id="2972"></path><path d="M360.64 775.84m32 0l388.64 0q32 0 32 32l0 0q0 32-32 32l-388.64 0q-32 0-32-32l0 0q0-32 32-32Z" fill="#09d8f2" p-id="2973"></path><path d="M862.24 3.36H161.76a91.36 91.36 0 0 0-91.2 91.2v834.88a91.36 91.36 0 0 0 91.2 91.2h700.48a91.36 91.36 0 0 0 91.2-91.2V94.56a91.36 91.36 0 0 0-91.2-91.2z m-220.32 59.2a23.04 23.04 0 0 1 0 45.92h-304a23.04 23.04 0 1 1 0-45.92z m252.32 866.88a32 32 0 0 1-32 32H161.76a32 32 0 0 1-32-32V94.56a32 32 0 0 1 32-32h97.28A77.76 77.76 0 0 0 256 85.44a82.24 82.24 0 0 0 82.24 82.24h304a82.24 82.24 0 0 0 82.08-82.24A77.76 77.76 0 0 0 720 62.56h141.92a32 32 0 0 1 32 32z" fill="#09d8f2" p-id="2974"></path></svg>

 src/icons/svg/top5.svg

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1668487566764" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9285" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M1024 85.312H0V0h1024v85.312zM768 1024V170.688h256V1024h-256zM0 1024V170.688h256V1024H0z m384-170.688V170.688h256v682.624H384z" fill="#09d8f2" p-id="9286"></path></svg>

 src/icons/svg/zbl.svg

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1668491418779" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="33064" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M623.920534 436.249759l-135.403876 330.911642-45.358047 0L571.857784 459.710077 398.91699 459.710077l0-38.654368 225.003544 0L623.920534 436.249759zM796.559453 127.977743c-15.954367 0-29.007661-13.053294-29.007661-29.007661l0-5.930059c0-15.953344-13.053294-29.006637-29.007661-29.006637l-5.961782 0c-15.954367 0-29.007661 13.053294-29.007661 29.006637l0 5.930059c0 15.954367-13.053294 29.007661-29.007661 29.007661l-326.004889 0c-15.954367 0-29.007661-13.053294-29.007661-29.007661l0-5.930059c0-15.953344-13.053294-29.006637-29.007661-29.006637l-5.961782 0c-15.954367 0-29.007661 13.053294-29.007661 29.006637l0 5.930059c0 15.954367-13.053294 29.007661-29.007661 29.007661L92.708983 127.977743c-15.954367 0-29.007661 13.053294-29.007661 29.007661l0 773.423011c0 15.954367 13.053294 29.007661 29.007661 29.007661l837.421604 0c15.954367 0 29.007661-13.053294 29.007661-29.007661L959.138248 156.984381c0-15.954367-13.053294-29.007661-29.007661-29.007661L796.559453 127.97672zM895.201054 866.497826c0 15.954367-13.053294 29.007661-29.007661 29.007661L156.665621 895.505487c-15.954367 0-29.007661-13.053294-29.007661-29.007661L127.65796 220.948181c0-15.953344 13.053294-29.006637 29.007661-29.006637l69.90614 0c15.954367 0 29.007661 13.053294 29.007661 29.006637l0 69.930699c0 15.953344 13.053294 29.006637 29.007661 29.006637l5.961782 0c15.954367 0 29.007661-13.053294 29.007661-29.006637l0-69.930699c0-15.953344 13.053294-29.006637 29.007661-29.006637l326.004889 0c15.954367 0 29.007661 13.053294 29.007661 29.006637l0 69.930699c0 15.953344 13.053294 29.006637 29.007661 29.006637l5.961782 0c15.954367 0 29.007661-13.053294 29.007661-29.006637l0-69.930699c0-15.953344 13.053294-29.006637 29.007661-29.006637l69.634963 0c15.954367 0 29.007661 13.053294 29.007661 29.006637L895.204124 866.497826z" p-id="33065" fill="#09d8f2"></path></svg>

 src/permission.js

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

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

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

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

 src/router/index.js

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

  {
    path: '/login',
    component: () => import('@/views/login/index'),
@@ -151,13 +135,13 @@
        component: () => import('@/views/jcsz/wldw'),
        meta: { code: '1013', title: '往来单位', icon: '', keepAlive: true }
      },
      // {
      //   path: 'adsz',
      //   name: 'ADZZCancel',
      //   code: '1014',
      //   component: () => import('@/views/jcsz/adsz'),
      //   meta: { code: '1014', title: '安灯设置', icon: '', keepAlive: true }
      // }
      {
        path: 'adsz',
        name: 'ADZZCancel',
        code: '1014',
        component: () => import('@/views/jcsz/adsz'),
        meta: { code: '1014', title: '安灯设置', icon: '', keepAlive: true }
      }
    ]
  },
  {
@@ -169,26 +153,26 @@
    meta: { code: '1002', title: '设备管理', icon: 'example' },
    alwaysShow: true,
    children: [
      // {
      //   path: 'sblx',
      //   name: 'SBLXCancel',
      //   code: '1020',
      //   component: () => import('@/views/sbgl/sblx'),
      //   meta: { code: '1020', title: '设备类型', icon: '', keepAlive: true }
      // },
      // {
      //   path: 'wxjl',
      //   code: '1029Cancel',
      //   name: 'WXJL',
      //   component: () => import('@/views/sbgl/wxjl'),
      //   meta: { code: '1029', title: '维修记录', icon: '', keepAlive: true }
      // }, {
      //   path: 'sbz',
      //   name: 'SBZCancel',
      //   code: '1021',
      //   component: () => import('@/views/sbgl/sbz'),
      //   meta: { code: '1021', title: '设备组', icon: '', keepAlive: true }
      // },
      {
        path: 'sblx',
        name: 'SBLXCancel',
        code: '1020',
        component: () => import('@/views/sbgl/sblx'),
        meta: { code: '1020', title: '设备类型', icon: '', keepAlive: true }
      },
      {
        path: 'wxjl',
        code: '1029Cancel',
        name: 'WXJL',
        component: () => import('@/views/sbgl/wxjl'),
        meta: { code: '1029', title: '维修记录', icon: '', keepAlive: true }
      }, {
        path: 'sbz',
        name: 'SBZCancel',
        code: '1021',
        component: () => import('@/views/sbgl/sbz'),
        meta: { code: '1021', title: '设备组', icon: '', keepAlive: true }
      },
      {
        path: 'sbqd',
        name: 'sbqdCancel',
@@ -196,48 +180,48 @@
        component: () => import('@/views/sbgl/sbqd'),
        meta: { code: '1022', title: '设备清单', icon: '', keepAlive: true }
      },
      // {
      //   path: 'djbz',
      //   name: 'DJBZCancel',
      //   code: '1023',
      //   component: () => import('@/views/sbgl/djbz'),
      //   meta: { code: '1023', title: '点检标准', icon: '', keepAlive: true }
      // },
      // {
      //   path: 'djbw',
      //   name: 'DJBWCancel',
      //   code: '1024',
      //   component: () => import('@/views/sbgl/djbw'),
      //   meta: { code: '1024', title: '点检部位', icon: '', keepAlive: true }
      // },
      // {
      //   path: 'bybz',
      //   name: 'BYBZCancel',
      //   code: '1025',
      //   component: () => import('@/views/sbgl/bybz'),
      //   meta: { code: '1025', title: '保养标准', icon: '', keepAlive: true }
      // },
      // {
      //   path: 'bybw',
      //   name: 'BYBWCancel',
      //   code: '1026',
      //   component: () => import('@/views/sbgl/bybw'),
      //   meta: { code: '1026', title: '保养部位', icon: '', keepAlive: true }
      // },
      // {
      //   path: 'djjl',
      //   name: 'DJJLCancel',
      //   code: '1027',
      //   component: () => import('@/views/sbgl/djjl'),
      //   meta: { code: '1027', title: '点检记录', icon: '', keepAlive: true }
      // },
      // {
      //   path: 'byjl',
      //   name: 'BYJLCancel',
      //   code: '1028',
      //   component: () => import('@/views/sbgl/byjl'),
      //   meta: { code: '1028', title: '保养记录', icon: '', keepAlive: true }
      // }
      {
        path: 'djbz',
        name: 'DJBZCancel',
        code: '1023',
        component: () => import('@/views/sbgl/djbz'),
        meta: { code: '1023', title: '点检标准', icon: '', keepAlive: true }
      },
      {
        path: 'djbw',
        name: 'DJBWCancel',
        code: '1024',
        component: () => import('@/views/sbgl/djbw'),
        meta: { code: '1024', title: '点检部位', icon: '', keepAlive: true }
      },
      {
        path: 'bybz',
        name: 'BYBZCancel',
        code: '1025',
        component: () => import('@/views/sbgl/bybz'),
        meta: { code: '1025', title: '保养标准', icon: '', keepAlive: true }
      },
      {
        path: 'bybw',
        name: 'BYBWCancel',
        code: '1026',
        component: () => import('@/views/sbgl/bybw'),
        meta: { code: '1026', title: '保养部位', icon: '', keepAlive: true }
      },
      {
        path: 'djjl',
        name: 'DJJLCancel',
        code: '1027',
        component: () => import('@/views/sbgl/djjl'),
        meta: { code: '1027', title: '点检记录', icon: '', keepAlive: true }
      },
      {
        path: 'byjl',
        name: 'BYJLCancel',
        code: '1028',
        component: () => import('@/views/sbgl/byjl'),
        meta: { code: '1028', title: '保养记录', icon: '', keepAlive: true }
      }
    ]
  },
  {
@@ -390,13 +374,13 @@
        component: () => import('@/views/zzmx/chda'),
        meta: { code: '1061', title: '存货档案', icon: '', keepAlive: true }
      },
      // {
      //   path: 'wlqd',
      //   name: 'WLQDCancel',
      //   code: '1062',
      //   component: () => import('@/views/zzmx/wlqd'),
      //   meta: { code: '1062', title: '物料清单', icon: '', keepAlive: true }
      // },
      {
        path: 'wlqd',
        name: 'WLQDCancel',
        code: '1062',
        component: () => import('@/views/zzmx/wlqd'),
        meta: { code: '1062', title: '物料清单', icon: '', keepAlive: true }
      },
      {
        path: 'gylx',
        name: 'GYLXCancel',
@@ -587,13 +571,13 @@
        component: () => import('@/views/xtsz/bmgz'),
        meta: { code: '1101', title: '编码规则', icon: '', keepAlive: true }
      },
      // {
      //   path: 'mmxg',
      //   name: 'MMXGCancel',
      //   code: '1102',
      //   component: () => import('@/views/xtsz/mmxg'),
      //   meta: { code: '1102', title: '密码修改', icon: '', keepAlive: true }
      // },
      {
        path: 'mmxg',
        name: 'MMXGCancel',
        code: '1102',
        component: () => import('@/views/xtsz/mmxg'),
        meta: { code: '1102', title: '密码修改', icon: '', keepAlive: true }
      },
      {
        path: 'xtrz',
        name: 'XTRZCancel',

 src/utils/myEcharts.js

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

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

// ç³»ç»Ÿé¦–页图
export function barTop(data, colorArr) {
  var salvProName = ['x']
@@ -788,3 +791,606 @@
  }
  return option
}

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

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

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

  return option
}

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

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

// è½¦é—´è´¨é‡å³ä¸Š æ—¥ä¸è‰¯
export function bar04() {
  const data = [
    {
      name: '产线一',
      value: 100
    },
    {
      name: '产线二',
      value: 200
    },
    {
      name: '产线三',
      value: 64
    },
    {
      name: '产线四',
      value: 44
    }
  ]
  const getSymbolData = (data) => {
    const arr = []
    for (var i = 0; i < data.length; i++) {
      arr.push({
        value: data[i].value,
        symbolPosition: 'end'
      })
    }
    return arr
  }

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

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

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

  return option
}

// è½¦é—´è´¨é‡å³ä¸‹  å‘¨ä¸è‰¯
export function pie02() {
  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 formatNumber = function(num) {
    const reg = /(?=(\B)(\d{3})+$)/g
    return num.toString().replace(reg, ',')
  }
  const total = echartData.reduce((a, b) => {
    return a + b.value * 1
  }, 0)

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

 src/views/kb/bzcj.vue

ÎļþÒÑɾ³ý

 src/views/kb/cgdd.vue

ÎļþÒÑɾ³ý

 src/views/kb/cjsc.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,791 @@
<template>
  <div>
    <div class="kb_dashboard">
      <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: 380px;height: 969px;" class="flex_c_b">
          <div>
            <div class="smallTitle">
              <svg-icon icon-class="cxmc" class="svg_class" />
              è£…配一线
            </div>
            <div class="lineContent horn">
              <el-table
                ref="tableDataLeftTopRef"
                :data="tableDataLeftTop"
                class="tableData"
                style="width: 100%;"
                :header-cell-style="headerCellStyle"
                :cell-style="cellStyle"
                height="428"
              >
                <el-table-column
                  prop="xsdd"
                  label="销售单号"
                  width="141"
                />

                <el-table-column
                  prop="cpmc"
                  width="133"
                  label="产品名称"
                />
                <el-table-column
                  prop="sl"
                  label="数量"
                  width="100"
                />
              </el-table>
            </div>
          </div>
          <div>
            <div class="smallTitle">
              <svg-icon icon-class="cxmc" class="svg_class" />
              è£…配二线
            </div>
            <div class="lineContent horn">
              <el-table
                ref="tableDataLeftTopRef"
                :data="tableDataLeftTop"
                class="tableData"
                style="width: 100%;"
                :header-cell-style="headerCellStyle"
                :cell-style="cellStyle"
                height="428"
              >
                <el-table-column
                  prop="xsdd"
                  label="销售单号"
                  width="141"
                />

                <el-table-column
                  prop="cpmc"
                  width="133"
                  label="产品名称"
                />
                <el-table-column
                  prop="sl"
                  label="数量"
                  width="100"
                />
              </el-table>
            </div>

          </div>
        </div>
        <div>
          <div class="smallTitle">
            <svg-icon icon-class="scxx" class="svg_class" />
            ç”Ÿäº§ä¿¡æ¯
          </div>
          <div class="lineContentCenter horn">
            <el-table
              ref="tableDataLeftCenterRef"
              :data="tableDataCenterTop"
              class="tableData"
              style="width: 100%;"
              :header-cell-style="headerCellStyleCenter"
              :cell-style="cellStyleCenter"
              height="927"
            >
              <el-table-column
                prop="xh"
                label="序号"
                width="50"
              >
                <template slot-scope="{row}">
                  <div
                    :style="{color:row.cxmc==='装配一线'?'#ffff00':row.cxmc==='装配二线'?'#FF3333':row.cxmc==='装配三线'?'#FF00FF':'#00FFFF'}"
                  > {{ row.xh }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="jgdh"
                label="加工单号"
                width="150"
              >
                <template slot-scope="{row}">
                  <div
                    :style="{color:row.cxmc==='装配一线'?'#ffff00':row.cxmc==='装配二线'?'#FF3333':row.cxmc==='装配三线'?'#FF00FF':'#00FFFF'}"
                  > {{ row.jgdh }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="cxmc"
                width="130"
                label="产线名称"
              >
                <template slot-scope="{row}">
                  <div
                    :style="{color:row.cxmc==='装配一线'?'#ffff00':row.cxmc==='装配二线'?'#FF3333':row.cxmc==='装配三线'?'#FF00FF':'#00FFFF'}"
                  > {{ row.cxmc }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="cpmc"
                width="150"
                label="产品名称"
              >
                <template slot-scope="{row}">
                  <div
                    :style="{color:row.cxmc==='装配一线'?'#ffff00':row.cxmc==='装配二线'?'#FF3333':row.cxmc==='装配三线'?'#FF00FF':'#00FFFF'}"
                  > {{ row.cpmc }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="scsl"
                label="生产数量"
                width="100"
              >
                <template slot-scope="{row}">
                  <div
                    :style="{color:row.cxmc==='装配一线'?'#ffff00':row.cxmc==='装配二线'?'#FF3333':row.cxmc==='装配三线'?'#FF00FF':'#00FFFF'}"
                  > {{ row.scsl }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="yjks"
                label="预计开始"
                width="150"
              >
                <template slot-scope="{row}">
                  <div
                    :style="{color:row.cxmc==='装配一线'?'#ffff00':row.cxmc==='装配二线'?'#FF3333':row.cxmc==='装配三线'?'#FF00FF':'#00FFFF'}"
                  > {{ row.yjks }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="yjwg"
                label="预计完工"
                width="150"
              >
                <template slot-scope="{row}">
                  <div
                    :style="{color:row.cxmc==='装配一线'?'#ffff00':row.cxmc==='装配二线'?'#FF3333':row.cxmc==='装配三线'?'#FF00FF':'#00FFFF'}"
                  > {{ row.yjwg }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="gx"
                label="工序"
                width="90"
              >
                <template slot-scope="{row}">
                  <div
                    :style="{color:row.cxmc==='装配一线'?'#ffff00':row.cxmc==='装配二线'?'#FF3333':row.cxmc==='装配三线'?'#FF00FF':'#00FFFF'}"
                  > {{ row.gx }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="scjd"
                label="生产进度"
                width="90"
              >
                <template slot-scope="{row}">
                  <div
                    :style="{color:row.cxmc==='装配一线'?'#ffff00':row.cxmc==='装配二线'?'#FF3333':row.cxmc==='装配三线'?'#FF00FF':'#00FFFF'}"
                  > {{ row.scjd }}
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div style="width: 380px;height: 969px;" class="flex_c_b">
          <div>
            <div class="smallTitle">
              <svg-icon icon-class="cxmc" class="svg_class" />
              è£…配三线
            </div>
            <div class="lineContent horn">
              <el-table
                ref="tableDataLeftTopRef"
                :data="tableDataLeftTop"
                class="tableData"
                style="width: 100%;"
                :header-cell-style="headerCellStyle"
                :cell-style="cellStyle"
                height="428"
              >
                <el-table-column
                  prop="xsdd"
                  label="销售单号"
                  width="141"
                />

                <el-table-column
                  prop="cpmc"
                  width="133"
                  label="产品名称"
                />
                <el-table-column
                  prop="sl"
                  label="数量"
                  width="100"
                />
              </el-table>
            </div>
          </div>
          <div>
            <div class="smallTitle">
              <svg-icon icon-class="cxmc" class="svg_class" />
              è£…配四线
            </div>
            <div class="lineContent horn">
              <el-table
                ref="tableDataLeftTopRef"
                :data="tableDataLeftTop"
                class="tableData"
                style="width: 100%;"
                :header-cell-style="headerCellStyle"
                :cell-style="cellStyle"
                height="428"
              >
                <el-table-column
                  prop="xsdd"
                  label="销售单号"
                  width="141"
                />

                <el-table-column
                  prop="cpmc"
                  width="133"
                  label="产品名称"
                />
                <el-table-column
                  prop="sl"
                  label="数量"
                  width="100"
                />
              </el-table>
            </div>

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

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

export default {
  name: 'Cjsc',
  data() {
    return {
      headTime: '',
      tableDataLeftTop: [],
      tableDataLeftTopTemp: [
        { xsdd: 'MO-2022111501', cpmc: '产品名称1', 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: [
        {
          xh: 1,
          jgdh: 'MO-2022-1115-01',
          cxmc: '装配一线',
          cpmc: '产品名称1',
          scsl: '100',
          yjks: '2022-10-01',
          yjwg: '2022-10-10',
          gx: '工序一',
          scjd: '10/20'
        },
        {
          xh: 2,
          jgdh: 'MO-2022-1115-01',
          cxmc: '装配二线',
          cpmc: '产品名称1',
          scsl: '100',
          yjks: '2022-10-01',
          yjwg: '2022-10-10',
          gx: '工序一',
          scjd: '10/20'
        },
        {
          xh: 3,
          jgdh: 'MO-2022-1115-01',
          cxmc: '装配三线',
          cpmc: '产品名称1',
          scsl: '100',
          yjks: '2022-10-01',
          yjwg: '2022-10-10',
          gx: '工序一',
          scjd: '10/20'
        },
        {
          xh: 4,
          jgdh: 'MO-2022-1115-01',
          cxmc: '装配四线',
          cpmc: '产品名称1',
          scsl: '100',
          yjks: '2022-10-01',
          yjwg: '2022-10-10',
          gx: '工序一',
          scjd: '10/20'
        },
        {
          xh: 5,
          jgdh: 'MO-2022-1115-01',
          cxmc: '装配一线',
          cpmc: '产品名称1',
          scsl: '100',
          yjks: '2022-10-01',
          yjwg: '2022-10-10',
          gx: '工序一',
          scjd: '10/20'
        },
        {
          xh: 6,
          jgdh: 'MO-2022-1115-01',
          cxmc: '装配一线',
          cpmc: '产品名称1',
          scsl: '100',
          yjks: '2022-10-01',
          yjwg: '2022-10-10',
          gx: '工序一',
          scjd: '10/20'
        },
        {
          xh: 7,
          jgdh: 'MO-2022-1115-01',
          cxmc: '装配一线',
          cpmc: '产品名称1',
          scsl: '100',
          yjks: '2022-10-01',
          yjwg: '2022-10-10',
          gx: '工序一',
          scjd: '10/20'
        },
        {
          xh: 8,
          jgdh: 'MO-2022-1115-01',
          cxmc: '装配一线',
          cpmc: '产品名称1',
          scsl: '100',
          yjks: '2022-10-01',
          yjwg: '2022-10-10',
          gx: '工序一',
          scjd: '10/20'
        },
        {
          xh: 9,
          jgdh: 'MO-2022-1115-01',
          cxmc: '装配二线',
          cpmc: '产品名称1',
          scsl: '100',
          yjks: '2022-10-01',
          yjwg: '2022-10-10',
          gx: '工序一',
          scjd: '10/20'
        },
        {
          xh: 10,
          jgdh: 'MO-2022-1115-01',
          cxmc: '装配二线',
          cpmc: '产品名称1',
          scsl: '100',
          yjks: '2022-10-01',
          yjwg: '2022-10-10',
          gx: '工序一',
          scjd: '10/20'
        },
        {
          xh: 11,
          jgdh: 'MO-2022-1115-01',
          cxmc: '装配三线',
          cpmc: '产品名称1',
          scsl: '100',
          yjks: '2022-10-01',
          yjwg: '2022-10-10',
          gx: '工序一',
          scjd: '10/20'
        },
        {
          xh: 12,
          jgdh: 'MO-2022-1115-01',
          cxmc: '装配三线',
          cpmc: '产品名称1',
          scsl: '100',
          yjks: '2022-10-01',
          yjwg: '2022-10-10',
          gx: '工序一',
          scjd: '10/20'
        },
        {
          xh: 13,
          jgdh: 'MO-2022-1115-01',
          cxmc: '装配一线',
          cpmc: '产品名称1',
          scsl: '100',
          yjks: '2022-10-01',
          yjwg: '2022-10-10',
          gx: '工序一',
          scjd: '10/20'
        },
        {
          xh: 14,
          jgdh: 'MO-2022-1115-01',
          cxmc: '装配一线',
          cpmc: '产品名称1',
          scsl: '100',
          yjks: '2022-10-01',
          yjwg: '2022-10-10',
          gx: '工序一',
          scjd: '10/20'
        },
        {
          xh: 15,
          jgdh: 'MO-2022-1115-01',
          cxmc: '装配一线',
          cpmc: '产品名称1',
          scsl: '100',
          yjks: '2022-10-01',
          yjwg: '2022-10-10',
          gx: '工序一',
          scjd: '10/20'
        },
        {
          xh: 16,
          jgdh: 'MO-2022-1115-01',
          cxmc: '装配四线',
          cpmc: '产品名称1',
          scsl: '100',
          yjks: '2022-10-01',
          yjwg: '2022-10-10',
          gx: '工序一',
          scjd: '10/20'
        },
        {
          xh: 17,
          jgdh: 'MO-2022-1115-01',
          cxmc: '装配四线',
          cpmc: '产品名称1',
          scsl: '100',
          yjks: '2022-10-01',
          yjwg: '2022-10-10',
          gx: '工序一',
          scjd: '10/20'
        },
        {
          xh: 18,
          jgdh: 'MO-2022-1115-01',
          cxmc: '装配四线',
          cpmc: '产品名称1',
          scsl: '100',
          yjks: '2022-10-01',
          yjwg: '2022-10-10',
          gx: '工序一',
          scjd: '10/20'
        },
        {
          xh: 19,
          jgdh: 'MO-2022-1115-01',
          cxmc: '装配四线',
          cpmc: '产品名称1',
          scsl: '100',
          yjks: '2022-10-01',
          yjwg: '2022-10-10',
          gx: '工序一',
          scjd: '10/20'
        },
        {
          xh: 20,
          jgdh: 'MO-2022-1115-01',
          cxmc: '装配四线',
          cpmc: '产品名称1',
          scsl: '100',
          yjks: '2022-10-01',
          yjwg: '2022-10-10',
          gx: '工序一',
          scjd: '10/20'
        },
        {
          xh: 21,
          jgdh: 'MO-2022-1115-01',
          cxmc: '装配四线',
          cpmc: '产品名称1',
          scsl: '100',
          yjks: '2022-10-01',
          yjwg: '2022-10-10',
          gx: '工序一',
          scjd: '10/20'
        },
        {
          xh: 22,
          jgdh: 'MO-2022-1115-01',
          cxmc: '装配一线',
          cpmc: '产品名称1',
          scsl: '100',
          yjks: '2022-10-01',
          yjwg: '2022-10-10',
          gx: '工序一',
          scjd: '10/20'
        },
        {
          xh: 23,
          jgdh: 'MO-2022-1115-01',
          cxmc: '装配一线',
          cpmc: '产品名称1',
          scsl: '100',
          yjks: '2022-10-01',
          yjwg: '2022-10-10',
          gx: '工序一',
          scjd: '10/20'
        },
        {
          xh: 24,
          jgdh: 'MO-2022-1115-01',
          cxmc: '装配三线',
          cpmc: '产品名称1',
          scsl: '100',
          yjks: '2022-10-01',
          yjwg: '2022-10-10',
          gx: '工序一',
          scjd: '10/20'
        },
        {
          xh: 25,
          jgdh: 'MO-2022-1115-01',
          cxmc: '装配二线',
          cpmc: '产品名称1',
          scsl: '100',
          yjks: '2022-10-01',
          yjwg: '2022-10-10',
          gx: '工序一',
          scjd: '10/20'
        },
        {
          xh: 26,
          jgdh: 'MO-2022-1115-01',
          cxmc: '装配三线',
          cpmc: '产品名称1',
          scsl: '100',
          yjks: '2022-10-01',
          yjwg: '2022-10-10',
          gx: '工序一',
          scjd: '10/20'
        },
        {
          xh: 27,
          jgdh: 'MO-2022-1115-01',
          cxmc: '装配四线',
          cpmc: '产品名称1',
          scsl: '100',
          yjks: '2022-10-01',
          yjwg: '2022-10-10',
          gx: '工序一',
          scjd: '10/20'
        }
      ]
    }
  },
  created() {
    setInterval(this.getNowTime, 1000)

    // ä¸¤å°æ—¶çœ‹æ¿åˆ·æ–°ä¸€æ¬¡
    setInterval(() => {
      window.location.reload()
    }, 1000 * 60 * 120)
  },
  mounted() {
    this.getTopBar()
    this.getTableDataSetInterval()
    this.getCenterTableDataSetInterval()
  },
  methods: {
    // ä¸­é—´éƒ¨åˆ†çš„表格
    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
        this.tableDataCenterTop = this.tableDataCenterTopTemp.slice(startValue, startValue + scale)
        if (nowLoop === loop) {
          this.getCenterTableDataSetInterval()
        }

        nowLoop++
      }, 5000)
    },

    // å®šæ—¶åˆ·æ–°è¡¨æ ¼æ•°æ®
    getTableDataSetInterval() {
      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
        this.tableDataLeftTop = this.tableDataLeftTopTemp.slice(startValue, startValue + scale)
        if (nowLoop === loop) {
          this.getTableDataSetInterval()
        }
        nowLoop++
      }, 5000)
    },

    // èŽ·å–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: 'rgb(30 ,33, 46)',
        backgroundColor: '#000',
        padding: '10px 0',
        textAlign: 'center',
        color: '#07acc2',
        border: 'none'
      }
    },
    cellStyle() {
      return {
        padding: '7px 0',
        textAlign: 'center',
        // backgroundColor: 'rgba(30, 33, 46)',
        backgroundColor: '#000',
        // backgroundColor: 'transparent',
        color: '#fff',
        border: 'none'
      }
    },
    headerCellStyleCenter() {
      return {
        // backgroundColor: 'rgb(30 ,33, 46)',
        backgroundColor: '#000',
        padding: '10px 0',
        textAlign: 'center',
        color: '#07acc2',
        border: 'none'
      }
    },
    cellStyleCenter() {
      return {
        padding: '7.5px 0',
        textAlign: 'center',
        backgroundColor: '#000',
        color: '#fff',
        border: 'none'
      }
    }
  }

}
</script>

<style lang="scss" scoped>
$main_color: #09d8f2;
$color01: #00FFFF;
.lineContent {
  height: 435px;
  border: 1px solid $main_color;
  //outline: 1px solid $main_color;
  border-radius: 5px;
  padding: 2px;
}

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

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

.tableData {
  background: #000;
}

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

.el-table__empty-text {
  color: $main_color;
}
</style>

 src/views/kb/cjzl.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,394 @@
<template>
  <div>
    <div class="kb_dashboard">
      <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: 480px;height: 969px;" class="flex_c_b">
          <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 class="smallTitle">
              <svg-icon icon-class="bll" class="svg_class" style="font-size: 30px" />
              å‘¨ä¸è‰¯è¶‹åŠ¿
            </div>
            <div class="lineContent horn">
              <div id="line01" class="flex_c_c" style="width: 100%;height:100%" />
            </div>

          </div>
        </div>
        <!--        ä¸­é—´éƒ¨åˆ†-->
        <div>
          <div class="smallTitle">
            <svg-icon icon-class="blmx" class="svg_class" />
            ä¸è‰¯æ˜Žç»†
          </div>
          <div class="lineContentCenter horn">
            <el-table
              ref="tableDataLeftCenterRef"
              :data="tableDataCenterTop"
              class="tableData"
              style="width: 100%;"
              :header-cell-style="headerCellStyleCenter"
              :cell-style="cellStyleCenter"
              height="927"
            >
              <el-table-column
                prop="xh"
                label="序号"
                width="50"
              />
              <el-table-column
                prop="cxmc"
                width="130"
                label="产线名称"
              >
                <template slot-scope="{row}">
                  <div>{{ row.cxmc }}</div>
                </template>
              </el-table-column>
              <el-table-column
                prop="jgdh"
                label="生产单号"
                width="150"
              >
                <template slot-scope="{row}">
                  <div style="color: #00FFFF">{{ row.jgdh }}</div>
                </template>
              </el-table-column>

              <el-table-column
                prop="cpmc"
                width="150"
                label="产品名称"
              />
              <el-table-column
                prop="blyy"
                label="不良原因"
                width="150"
              >
                <template slot-scope="{row}">
                  <div style="color:#d91010;">{{ row.blyy }}</div>
                </template>
              </el-table-column>
              <el-table-column
                prop="scsl"
                label="不良数量"
                width="100"
              />
              <el-table-column
                prop="bgsl"
                label="报工数量"
                width="100"
              />
              <!--              <el-table-column-->
              <!--                prop="yjks"-->
              <!--                label="预计开始"-->
              <!--                width="150"-->
              <!--              />-->
              <!--              <el-table-column-->
              <!--                prop="yjwg"-->
              <!--                label="预计完工"-->
              <!--                width="150"-->
              <!--              />-->

              <!--              <el-table-column-->
              <!--                prop="scjd"-->
              <!--                label="生产进度"-->
              <!--                width="90"-->
              <!--              />-->
            </el-table>
          </div>
        </div>
        <!--        å³è¾¹éƒ¨åˆ†-->
        <div style="width: 480px;height: 969px;" class="flex_c_b">
          <div>
            <div class="smallTitle">
              <svg-icon icon-class="rbl" class="svg_class" style="font-size: 28px" />
              æ—¥ä¸è‰¯åˆ†å¸ƒ
            </div>
            <div class="lineContent horn">
              <div id="bar02" class="flex_c_c" style="width: 100%;height:100%" />
            </div>
          </div>
          <div>
            <div class="smallTitle">
              <svg-icon icon-class="zbl" class="svg_class" style="font-size: 28px" />
              å‘¨ä¸è‰¯åˆ†å¸ƒ
            </div>
            <div class="lineContent horn">
              <div id="pie01" class="flex_c_c" style="width: 100%;height:100%" />
            </div>

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

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

export default {
  name: 'Cjsc',
  data() {
    return {
      headTime: '',
      tableDataLeftTop: [],
      tableDataLeftTopTemp: [
        { xsdd: 'MO-2022111501', cpmc: '产品名称1', 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: [
        { xh: 1, bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '产线名称1', cpmc: '产品名称1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 2, bgsl: 200, blyy: '尺寸、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '产线名称1', cpmc: '产品名称1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 3, bgsl: 200, blyy: '尺寸、色系', jgdh: 'MO-2022-1115-01', cxmc: '产线名称1', cpmc: '产品名称1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 4, bgsl: 200, blyy: '尺寸、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '产线名称1', cpmc: '产品名称1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 5, bgsl: 200, blyy: '色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '产线名称1', cpmc: '产品名称1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 6, bgsl: 200, blyy: '尺寸、色系', jgdh: 'MO-2022-1115-01', cxmc: '产线名称1', cpmc: '产品名称1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 7, bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '产线名称1', cpmc: '产品名称1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 8, bgsl: 200, blyy: '尺寸、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '产线名称1', cpmc: '产品名称1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 9, bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '产线名称1', cpmc: '产品名称1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 10, bgsl: 200, blyy: '毛刺', jgdh: 'MO-2022-1115-01', cxmc: '产线名称1', cpmc: '产品名称1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 11, bgsl: 200, blyy: '尺寸', jgdh: 'MO-2022-1115-01', cxmc: '产线名称1', cpmc: '产品名称1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 12, bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '产线名称1', cpmc: '产品名称1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 13, bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '产线名称1', cpmc: '产品名称1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 14, bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '产线名称1', cpmc: '产品名称1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 15, bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '产线名称1', cpmc: '产品名称1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 16, bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '产线名称1', cpmc: '产品名称1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 17, bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '产线名称1', cpmc: '产品名称1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 18, bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '产线名称1', cpmc: '产品名称1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 19, bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '产线名称1', cpmc: '产品名称1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 20, bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '产线名称1', cpmc: '产品名称1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 21, bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '产线名称1', cpmc: '产品名称1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 22, bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '产线名称1', cpmc: '产品名称1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 23, bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '产线名称1', cpmc: '产品名称1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 24, bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '产线名称1', cpmc: '产品名称1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 25, bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '产线名称1', cpmc: '产品名称1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 26, bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '产线名称1', cpmc: '产品名称1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' },
        { xh: 27, bgsl: 200, blyy: '尺寸、色系、毛刺', jgdh: 'MO-2022-1115-01', cxmc: '产线名称1', cpmc: '产品名称1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '工序一', scjd: '10/20' }
      ]
    }
  },
  created() {
    setInterval(this.getNowTime, 1000)

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

    this.getEcharts()
  },
  methods: {
    // èŽ·å–Echarts
    getEcharts() {
      const dataArr = [30, 20, 20, 18, 10]
      const titlenameArr = ['颜色', '尺寸', '气味', '毛刺', '裂痕']
      loadEcharts('bar01', bar02(dataArr, titlenameArr))

      loadEcharts('line01', line02())

      loadEcharts('bar02', bar04())

      loadEcharts('pie01', pie02())
    },
    // ä¸­é—´éƒ¨åˆ†çš„表格
    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
        this.tableDataCenterTop = this.tableDataCenterTopTemp.slice(startValue, startValue + scale)
        if (nowLoop === loop) {
          this.getCenterTableDataSetInterval()
        }

        nowLoop++
      }, 5000)
    },

    // å®šæ—¶åˆ·æ–°è¡¨æ ¼æ•°æ®
    getTableDataSetInterval() {
      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
        this.tableDataLeftTop = this.tableDataLeftTopTemp.slice(startValue, startValue + scale)
        if (nowLoop === loop) {
          this.getTableDataSetInterval()
        }
        nowLoop++
      }, 5000)
    },

    // èŽ·å–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: 'rgb(30 ,33, 46)',
        backgroundColor: '#000',
        padding: '10px 0',
        textAlign: 'center',
        color: '#07acc2',
        border: 'none'
      }
    },
    cellStyle() {
      return {
        padding: '7px 0',
        textAlign: 'center',
        // backgroundColor: 'rgba(30, 33, 46)',
        backgroundColor: '#000',
        // backgroundColor: 'transparent',
        color: '#fff',
        border: 'none'
      }
    },
    headerCellStyleCenter() {
      return {
        // backgroundColor: 'rgb(30 ,33, 46)',
        backgroundColor: '#000',
        padding: '10px 0',
        textAlign: 'center',
        color: '#07acc2',
        border: 'none'
      }
    },
    cellStyleCenter() {
      return {
        padding: '7.5px 0',
        textAlign: 'center',
        backgroundColor: '#000',
        color: '#fff',
        border: 'none'
      }
    }
  }

}
</script>

<style lang="scss" scoped>
$main_color:#09d8f2;
$color01: #00FFFF;
.lineContent {
  height: 435px;
  border: 1px solid $main_color;
  //outline: 1px solid $main_color;
  border-radius: 5px;
  padding: 2px;

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

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

.tableData{
  background: #000;
}

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

.el-table__empty-text{
  color: $main_color;
}
</style>

 src/views/kb/ckgl.vue

ÎļþÒÑɾ³ý

 src/views/kb/dccj.vue

ÎļþÒÑɾ³ý

 src/views/kb/kbCommon.css

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

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

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

/*scrollbar END*/


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

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

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

 src/views/kb/zhkb.vue

@@ -3,42 +3,34 @@
    <div class="kb_dashboard">
      <div class="kb_header">
        <div class="flex_c_c kb_header_text">
          è½¦é—´ç»¼åˆçœ‹æ¿
          <div id="topBarLeft" style="width:600px;height:100%" />
          è½¦é—´ç»¼åˆæ•°å­—化看板
          <div id="topBarRight" style="width:600px;height:100%;transform:rotate(180deg);" />
        </div>
        <div class="kb_headerPic" />
        <div class="kb_headTime">
          <span>{{ headTime }}</span>
        </div>
      </div>
      <MarqueeTips
        :content="MarqueeTipsContent"
        class="MarqueeTipsContentClass"
        :speed="180"
      />
      <!--      :speed="speed"-->
      <div class="kb_content">
        <div class="kb_left">
          <!-- 1-->
          <div class="kb_left_top_title01 kb_title_text">
            <!--            <div class="PG01" />-->
            <!--            <svg-icon icon-class="sccx" />-->
      <div style="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="margin-left: 30px">{{ number1 }} å•</div>
          </div>

          <div class="kb_left_top kb_pd10">
            <div class="kb_left_top02">
            <div class="lineContent horn">
              <div v-for="item in lineContent3" :key="item.workcode" class="kb_left_top_block">
                <div class="kb_block02 kb_pd10">
                  <div>
                    <div>销售单号:{{ item.saleordercode }}</div>
                    <div class="kb_mt5">
                    <div class="kb_mt10">
                      åŠ å·¥å•å·:{{ item.workcode }}
                    </div>
                    <div class="kb_mt5">
                    <div class="kb_mt10">
                      äº§å“åç§°:{{ item.partname }}
                    </div>
                    <div class="kb_mt5">
                    <div class="kb_mt10">
                      ä»»åŠ¡æ•°é‡:{{ parseFloat(item.qty) }}
                    </div>
                  </div>
@@ -98,205 +90,99 @@
                </div>
              </div>
            </div>

          </div>
          <!-- 2-->
          <div class="kb_left_bottom kb_pd10">
            <div class="kb_left_bottom_content">
              <div class="content_head kb_title_text">产线加工任务
                <div style="margin-left: 30px">{{ number2 }} å•</div>
          <div>
            <div class="smallTitle">
              <svg-icon icon-class="cxmc" class="svg_class" />
              äº§çº¿åŠ å·¥ä»»åŠ¡
              </div>
              <div class="content_body">
            <div class="lineContent horn">
                <el-table
                  ref="tableData"
                  :data="tableData"
                ref="tableDataLeftBottomRef"
                :data="tableDataLeftBottom"
                class="tableData"
                  style="width: 100%;"
                  :header-cell-style="headerCellStyle"
                  :cell-style="cellStyle"
                  height="440"
                height="428"
                >
                  <el-table-column
                    prop="RowNum"
                  prop="xh"
                    label="序号"
                    width="50"
                  />
                  <!--                  label="加工状态"-->

                  <el-table-column
                    prop="status"
                  prop="zt"
                  width="100"
                    label="状态"
                    width="65"
                  >
                    <template slot-scope="{row}">
                      <div v-if="row.status==='ALLO'">已派发</div>
                      <div v-if="row.status==='START'">开工</div>
                      <div v-if="row.status==='NEW'">新工单</div>
                    </template>
                  </el-table-column>
                />
                  <el-table-column
                    prop="lm_date"
                  prop="pfsj"
                    label="派发时间"
                    width="115"
                  >
                    <template slot-scope="{row}">
                      <div>{{ row.lm_date.substring(0, 10) }}</div>
                    </template>
                  </el-table-column>
                  width="160"
                />
                  <el-table-column
                    prop="saleOrderCode"
                  prop=""
                    label="销售订单号"
                    width="178"
                  >
                    <template slot-scope="{row}">
                      <div v-if="row.saleOrderCode" class="ellipsis">{{ row.saleOrderCode }}</div>
                      <div v-else>/</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="wo_code"
                    label="加工单号"
                    width="205"
                  >
                    <template slot-scope="{row}">
                      <div v-if="row.wo_code" class="ellipsis">{{ row.wo_code }}</div>
                      <div v-else>/</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="partname"
                    label="产品名称"
                    width="150"
                  >
                    <template slot-scope="{row}">
                      <div v-if="row.partname" class="ellipsis">{{ row.partname }}</div>
                      <div v-else>/</div>
                    </template>
                  </el-table-column>
                  <!--                  <el-table-column-->
                  <!--                    prop="partspec"-->
                  <!--                    label="规格"-->
                  <!--                    width="125"-->
                  <!--                  >-->
                  <!--                    <template slot-scope="{row}">-->
                  <!--                      <div v-if="row.partspec" class="ellipsis">{{ row.partspec }}</div>-->
                  <!--                      <div v-else>/</div>-->
                  <!--                    </template>-->
                  <!--                  </el-table-column>-->
                  <!--                  <el-table-column-->
                  <!--                    prop="name"-->
                  <!--                    label="单位"-->
                  <!--                    width="50"-->
                  <!--                  />-->
                  <el-table-column
                    prop="plan_qty"
                    label="任务数量"
                    width="85"
                  width="160"
                  />
                  <el-table-column
                    prop="good_qty"
                    label="完工数量"
                    width="85"
                  />
                  <el-table-column
                    prop="ng_qty"
                    label="不良数量"
                    width="85"
                  />
                  <el-table-column
                    prop="wcl"
                    label="完成率"
                    width="60"
                  >
                    <template slot-scope="{row}">
                      <div>{{ parseFloat((row.good_qty * 100 / row.plan_qty).toFixed(2)) }}%</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="planstartdate"
                    label="预计开始"
                    width="115"
                  >
                    <template slot-scope="{row}">
                      <div>{{ row.planstartdate.substring(0, 10) }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="planenddate"
                    label="预计结束"
                    width="125"
                  >
                    <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="kb_right kb_pd10">
          <div class="kb_right_top kb_pd10">
            <div class="kb_right_top_content">
              <div class="content_head kb_title_text">当日完工产品数量排行</div>
              <div class="content_body">
            <div class="lineContent horn">
                <el-table
                  ref="tableDataRank"
                  :data="tableDataRank"
                  class="tableDataRank"
                ref="tableDataRightTopRef"
                :data="tableDataRightTop"
                class="tableData"
                  style="width: 100%;"
                  :header-cell-style="headerCellStyle"
                  :cell-style="cellStyle"
                  height="396"
                height="428"
                >
                  <el-table-column
                    type="index"
                  prop="xh"
                    label="序号"
                    width="55"
                  width="50"
                  />
                  <el-table-column
                    prop="wkshname"
                    label="车间（供方）"
                    width="120"
                  >
                    <template slot-scope="{row}">
                      <div v-if="row.wkshname" class="ellipsis">{{ row.wkshname }}</div>
                      <div v-else>/</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="linename"
                  prop="cx"
                  width="144"
                    label="产线"
                    width="120"
                  >
                    <template slot-scope="{row}">
                      <div v-if="row.linename" class="ellipsis">{{ row.linename }}</div>
                      <div v-else>/</div>
                    </template>
                  </el-table-column>
                />
                  <el-table-column
                    prop="partname"
                    width="138"
                  prop="cp"
                  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"
                  prop="sl"
                    label="数量"
                    width="100"
                  width="90"
                  />
                </el-table>
              </div>

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

          </div>
        </div>
      </div>
@@ -306,52 +192,40 @@

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

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

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

      headTime: '',

      lineContent: [],
      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 }
      ],
      tableDataLeftBottom: [],
      tableDataLeftBottomTemp: [
        {}
      ],
      lineContent3: [],
      ShopArr: [] // è½¦é—´ç¼–码数组

      leftTopData: [],
      tableData: [],
      tableDataRank: [],
      lineCodeArr: [],

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

      number1: '',
      number2: '',

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

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

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

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

    this.getEcharts()
    this.getRightRightData()

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

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

        this.MarqueeTipsTask = setInterval(() => {
          WkspReportNotice({ shopcode: this.ShopArr.join(',') }).then(res1 => {
            let contentAll = ''
            res1.data.forEach(item => {
              contentAll += item.contents + ' '.padStart(item.contents.toString().length * 2, ' ')
            })
            this.MarqueeTipsContent = contentAll
            this.speed = this.MarqueeTipsContent.length / 10
          })
          // }, this.speed * 1000)
        }, 1000 * 60 * 5)
      })
    },
    // èŽ·å–车间编码
    async getShopSearch() {
      const res1 = await ShopSearch()
@@ -442,17 +251,18 @@
        res1.data.forEach(item => {
          this.ShopArr.push(item.org_code)
        })
        this.getShopSearchLine()
      }
      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 * 30)
    },
    // äº§çº¿åŠ å·¥ä¸­ä»»åŠ¡
    getShopSearchLine() {
@@ -462,97 +272,59 @@
        length = this.lineContent.length
        count = Math.ceil(length / 3) // éœ€è¦è½®æ’­çš„组数   3个为一组
        this.lineContent3 = this.lineContent.slice(0, 3)

        this.number1 = this.lineContent.length
      })

      let start = 0
      this.ShopSearchLineTask = setInterval(() => {
        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 * 3)
      // 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)
    },

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

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

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

      setInterval(() => {
        startValue = startValue + scale
        this.tableDataRightTop = this.tableDataRightTopTemp.slice(startValue, startValue + scale)
        if (nowLoop === loop) {
          this.getRightRightData()
              }
            })
          }
        }, this.tableData.length <= 10 ? 1000 * 3 : 100)
      })

        nowLoop++
      }, 5000)
    },
    // å½“日完工产品数量排行
    getTableDataRankRoll() {
      LineSearchTopRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
        this.tableDataRank = res.data

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

              if (this.tableDataRank.length > 9) {
                clearInterval(this.TableDataRankRollTask)
                this.getTableDataRankRoll()
              }
            })
          }
        }, this.tableDataRank.length <= 9 ? 1000 * 3 : 100)
      })
    },
    // èŽ·å–echarts
    getEcharts() {
      LineSearchBottomRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
        loadEcharts('bar02', bar02(res.data.map(i => i.cont), res.data.map(i => i.name)))
      })

      this.EchartsTask = setInterval(() => {
        LineSearchBottomRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
          loadEcharts('bar02', bar02(res.data.map(i => i.cont), res.data.map(i => i.name)))
        })
      }, 1000 * 15)
      const dataArr = [30, 20, 20, 18, 10]
      const titlenameArr = ['颜色', '尺寸', '气味', '毛刺', '裂痕']
      loadEcharts('bar01', bar02(dataArr, titlenameArr))
    },
    // èŽ·å–topEcharts
    getTopBar() {
      loadEcharts('topBarLeft', kbTop())
      loadEcharts('topBarRight', kbTop())
    },
    // èŽ·å–当前时间
    getNowTime() {
@@ -572,101 +344,84 @@
    },
    headerCellStyle() {
      return {
        backgroundColor: 'rgb(30 ,33, 46)',
        backgroundColor: '#000',
        padding: '10px 0',
        textAlign: 'center',
        color: '#07acc2',
        border: 'none'
        // fontSize: '16px'
      }
    },
    cellStyle() {
      return {
        padding: '8px 0',
        padding: '7px 0',
        textAlign: 'center',
        backgroundColor: 'rgba(30, 33, 46  )',
        // backgroundColor: 'transparent',
        backgroundColor: '#000',
        color: '#fff',
        border: 'none'
        // fontSize: '16px'
      }
      }
    }

  }
}
</script>

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

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

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

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

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

      .kb_left_top02 {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        border: 1px solid $kbBorderColor;
        height: 400px;
<style lang="scss" scoped>
$main_color: #09d8f2;
$color01: #00FFFF;
.lineContent {
  height: 435px;
  border: 1px solid $main_color;
        border-radius: 5px;
        background-color: $kbBackgroundColor;
  padding: 2px;
}

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

.tableData {
  background: #000;
}

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

        .kb_left_top_block {
          width: 100%;
          height: 133px;
  height: 143px;
          display: flex;
          font-size: 17px;
          border-bottom: 1px solid $kbBorderColor;
  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 $kbBorderColor;
    border-right: 1px solid $main_color;
          }

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

            .kb_block03_content {
              border: 1px solid $kbBorderColor;
      border: 1px solid $main_color;
              width: 180px;
              height: 80px;
              margin-right: 15px;
@@ -676,7 +431,7 @@
              .content01 {
                height: 30px;
                width: 100%;
                border-bottom: 1px solid $kbBorderColor;
        border-bottom: 1px solid $main_color;
                display: flex;
                align-items: center;
                justify-content: center;
@@ -687,13 +442,12 @@

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

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

@@ -705,7 +459,7 @@
                  }

                  .borderTop {
                    border-top: 1px solid $kbBorderColor;
            border-top: 1px solid $main_color;
                  }
                }
              }
@@ -714,7 +468,7 @@
          }

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

            .kb_block03_02_content {
@@ -728,112 +482,14 @@
                  background-color: #00ff8b;
                  border-radius: 50%;
                }

              }

            }
          }

  }
        }

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

    .kb_left_bottom {
      height: 495px;

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

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

        }

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

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

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

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

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

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

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

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

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

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

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

::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  /* width: 0;宽度为0暗藏 */
  width: 0;
}

::v-deep .cell {
  padding: 0 !important;
  font-size: 18px;
}

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

 src/views/kb/zhkb_back.vue

@@ -3,14 +3,19 @@
    <div class="kb_dashboard">
      <div class="kb_header">
        <div class="flex_c_c kb_header_text">
          å¤§å²›è½¦é—´ç»¼åˆçœ‹æ¿
          è½¦é—´ç»¼åˆçœ‹æ¿
        </div>
        <div class="kb_headerPic" />
        <div class="kb_headTime">
          <span>{{ headTime }}</span>
        </div>
      </div>

      <MarqueeTips
        :content="MarqueeTipsContent"
        class="MarqueeTipsContentClass"
        :speed="180"
      />
      <!--      :speed="speed"-->
      <div class="kb_content">
        <div class="kb_left">
          <!-- 1-->
@@ -18,88 +23,71 @@
            <!--            <div class="PG01" />-->
            <!--            <svg-icon icon-class="sccx" />-->
            äº§çº¿åŠ å·¥ä¸­ä»»åŠ¡
            <div style="margin-left: 30px">{{ number1 }} å•</div>
          </div>

          <div class="kb_left_top kb_pd10">

            <div class="kb_left_top_block">
              <div class="kb_block01 kb_pd10">
                <div>
                  <div>产线名称:{{ lineContent01.linename }}</div>
                  <div class="kb_mt10">产线总量:{{
                    lineContent01.children !== undefined ? lineContent01.lineworkcont : ''
                  }}
                  </div>
                </div>
                <div>
                  <!--                  <div>{{ lineContent01.linename }}</div>-->
                  <!--                  <div v-if="lineContent01.children!==undefined" class="kb_mt10">{{ lineContent01.lineworkcont }}</div>-->
                </div>
              </div>
            <div class="kb_left_top02">
              <div v-for="item in lineContent3" :key="item.workcode" class="kb_left_top_block">
              <div class="kb_block02 kb_pd10">
                <div>
                  <div>销售单号:{{ lineContent01.children !== undefined ? lineContent01.children.saleordercode : '' }}</div>
                    <div>销售单号:{{ item.saleordercode }}</div>
                  <div class="kb_mt5">
                    åŠ å·¥å•å·:{{ lineContent01.children !== undefined ? lineContent01.children.workcode : '' }}
                      åŠ å·¥å•å·:{{ item.workcode }}
                  </div>
                  <div class="kb_mt5">
                    äº§å“åç§°:{{ lineContent01.children !== undefined ? lineContent01.children.partname : '' }}
                      äº§å“åç§°:{{ item.partname }}
                  </div>

                  <div v-if="lineContent01.children&&lineContent01.children.length===0" class="kb_mt5">
                    ä»»åŠ¡æ•°é‡:
                  </div>
                  <div v-else class="kb_mt5">
                    ä»»åŠ¡æ•°é‡:{{ lineContent01.children? parseFloat(lineContent01.children.qty) : '' }}
                    <div class="kb_mt5">
                      ä»»åŠ¡æ•°é‡:{{ parseFloat(item.qty) }}
                  </div>
                </div>

              </div>
              <div class="kb_block03 kb_pd10 ">
                <div v-if="lineContent01.children!==undefined" class="flex_s_c">
                  <div v-if="item.children&&item.children.length>0" class="flex_s_c">
                  <div
                    v-for="item in lineContent01.children.children"
                    :key="item.stepseq"
                      v-for="(it,ind) in item.children"
                      :key="ind"
                    class="kb_block03_content flex_c_c"
                  >
                    <div>
                      <div class="content01">{{ item.stepname }}</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(item.planqty) }}</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(item.goodqty) }}</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(item.ngqty) }}</div>
                          <div class="content02_2 borderTop ">{{ parseFloat(it.ngqty) }}</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-if="lineContent01.children!==undefined" class="kb_block03_02 flex_s_c">
                  <div v-if="item.children&&item.children.length>0" class="kb_block03_02 flex_s_c">
                  <div
                    v-for="item in lineContent01.children.children"
                    :key="item.stepseq"
                      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="item.status==='START'&&(parseFloat(item.ngqty)===0||item.ngqty==='')&&(parseFloat(item.goodqty)===0||item.goodqty==='')"
                          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="item.status==='ALLO'&&(parseFloat(item.ngqty)===0||item.ngqty==='')&&(parseFloat(item.goodqty)===0||item.goodqty==='')"
                          v-else-if="it.status==='ALLO'&&(parseFloat(it.ngqty)===0||it.ngqty==='')&&(parseFloat(it.goodqty)===0||it.goodqty==='')"
                        class="circle"
                        style="background-color: rgb(255 255 255)"
                      />
                      <div
                        v-else-if="parseFloat(item.ngqty)+parseFloat(item.goodqty)>=parseFloat(item.planqty)"
                          v-else-if="parseFloat(it.ngqty)+parseFloat(it.goodqty)>=parseFloat(it.planqty)"
                        class="circle"
                      />
                      <div v-else class="circleYellow" />
@@ -109,274 +97,14 @@

              </div>
            </div>

            <!--            234-->
            <div class="kb_left_top_block">
              <div class="kb_block01 kb_pd10">
                <div>
                  <div>产线名称:{{ lineContent02.linename }}</div>
                  <div class="kb_mt10">产线总量:{{
                    lineContent02.children !== undefined ? lineContent02.lineworkcont : ''
                  }}
                  </div>
                </div>
                <div>
                  <!--                  <div>{{ lineContent02.linename }}</div>-->
                  <!--                  <div v-if="lineContent02.children!==undefined" class="kb_mt10">{{ lineContent02.lineworkcont }}</div>-->
                </div>
              </div>
              <div class="kb_block02 kb_pd10">
                <div>
                  <div>销售单号:{{ lineContent02.children !== undefined ? lineContent02.children.saleordercode : '' }}</div>
                  <div class="kb_mt5">
                    åŠ å·¥å•å·:{{ lineContent02.children !== undefined ? lineContent02.children.workcode : '' }}
                  </div>
                  <div class="kb_mt5">
                    äº§å“åç§°:{{ lineContent02.children !== undefined ? lineContent02.children.partname : '' }}
                  </div>
                  <div v-if="lineContent02.children&&lineContent02.children.length===0" class="kb_mt5">
                    ä»»åŠ¡æ•°é‡:
                  </div>
                  <div v-else class="kb_mt5">
                    ä»»åŠ¡æ•°é‡:{{ lineContent02.children ? parseFloat(lineContent02.children.qty) : '' }}
                  </div>
                </div>

              </div>
              <div class="kb_block03 kb_pd10 ">
                <div v-if="lineContent02.children!==undefined" class="flex_s_c">
                  <div
                    v-for="item in lineContent02.children.children"
                    :key="item.stepseq"
                    class="kb_block03_content flex_c_c"
                  >
                    <div>
                      <div class="content01">{{ item.stepname }}</div>
                    </div>
                    <div class="content02Parent">
                      <div class="content02">
                        <div class="content02_1 ">任务</div>
                        <div class="content02_2 borderTop ">{{ parseFloat(item.planqty) }}</div>
                      </div>
                      <div class="content02">
                        <div class="content02_1 ">合格</div>
                        <div class="content02_2 borderTop ">{{ parseFloat(item.goodqty) }}</div>
                      </div>
                      <div class="content02" style="border-right: 0">
                        <div class="content02_1 ">不良</div>
                        <div class="content02_2 borderTop ">{{ parseFloat(item.ngqty) }}</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-if="lineContent02.children!==undefined" class="kb_block03_02 flex_s_c">
                  <div
                    v-for="item in lineContent02.children.children"
                    :key="item.stepseq"
                    class="kb_block03_02_content flex_c_c"
                  >
                    <div class="flex_c_c content01">
                      <div
                        v-if="item.status==='START'&&(parseFloat(item.ngqty)===0||item.ngqty==='')&&(parseFloat(item.goodqty)===0||item.goodqty==='')"
                        class="circle"
                        style="background-color: blue;"
                      />
                      <div
                        v-else-if="item.status==='ALLO'&&(parseFloat(item.ngqty)===0||item.ngqty==='')&&(parseFloat(item.goodqty)===0||item.goodqty==='')"
                        class="circle"
                        style="background-color: rgb(255 255 255)"
                      />
                      <div
                        v-else-if="parseFloat(item.ngqty)+parseFloat(item.goodqty)>=parseFloat(item.planqty)"
                        class="circle"
                      />
                      <div v-else class="circleYellow" />
                    </div>
                  </div>
                </div>

              </div>
            </div>

            <div class="kb_left_top_block">
              <div class="kb_block01 kb_pd10">
                <div>
                  <div>产线名称:{{ lineContent03.linename }}</div>
                  <div class="kb_mt10">产线总量:{{
                    lineContent03.children !== undefined ? lineContent03.lineworkcont : ''
                  }}
                  </div>
                </div>
                <div>
                  <!--                  <div>{{ lineContent03.linename }}</div>-->
                  <!--                  <div v-if="lineContent03.children!==undefined" class="kb_mt10">{{ lineContent03.lineworkcont }}</div>-->
                </div>
              </div>
              <div class="kb_block02 kb_pd10">
                <div>
                  <div>销售单号:{{ lineContent03.children !== undefined ? lineContent03.children.saleordercode : '' }}</div>
                  <div class="kb_mt5">
                    åŠ å·¥å•å·:{{ lineContent03.children !== undefined ? lineContent03.children.workcode : '' }}
                  </div>
                  <div class="kb_mt5">
                    äº§å“åç§°:{{ lineContent03.children !== undefined ? lineContent03.children.partname : '' }}
                  </div>
                  <div v-if="lineContent03.children&&lineContent03.children.length===0" class="kb_mt5">
                    ä»»åŠ¡æ•°é‡:
                  </div>
                  <div v-else class="kb_mt5">
                    ä»»åŠ¡æ•°é‡:{{ lineContent03.children ? parseFloat(lineContent03.children.qty) : '' }}
                  </div>
                </div>

              </div>
              <div class="kb_block03 kb_pd10 ">
                <div v-if="lineContent03.children!==undefined" class="flex_s_c">
                  <div
                    v-for="item in lineContent03.children.children"
                    :key="item.stepseq"
                    class="kb_block03_content flex_c_c"
                  >
                    <div>
                      <div class="content01">{{ item.stepname }}</div>
                    </div>
                    <div class="content02Parent">
                      <div class="content02">
                        <div class="content02_1 ">任务</div>
                        <div class="content02_2 borderTop ">{{ parseFloat(item.planqty) }}</div>
                      </div>
                      <div class="content02">
                        <div class="content02_1 ">合格</div>
                        <div class="content02_2 borderTop ">{{ parseFloat(item.goodqty) }}</div>
                      </div>
                      <div class="content02" style="border-right: 0">
                        <div class="content02_1 ">不良</div>
                        <div class="content02_2 borderTop ">{{ parseFloat(item.ngqty) }}</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-if="lineContent03.children!==undefined" class="kb_block03_02 flex_s_c">
                  <div
                    v-for="item in lineContent03.children.children"
                    :key="item.stepseq"
                    class="kb_block03_02_content flex_c_c"
                  >
                    <div class="flex_c_c content01">
                      <div
                        v-if="item.status==='START'&&(parseFloat(item.ngqty)===0||item.ngqty==='')&&(parseFloat(item.goodqty)===0||item.goodqty==='')"
                        class="circle"
                        style="background-color: blue;"
                      />
                      <div
                        v-else-if="item.status==='ALLO'&&(parseFloat(item.ngqty)===0||item.ngqty==='')&&(parseFloat(item.goodqty)===0||item.goodqty==='')"
                        class="circle"
                        style="background-color: rgb(255 255 255)"
                      />
                      <div
                        v-else-if="parseFloat(item.ngqty)+parseFloat(item.goodqty)>=parseFloat(item.planqty)"
                        class="circle"
                      />
                      <div v-else class="circleYellow" />
                    </div>
                  </div>
                </div>

              </div>
            </div>

            <div class="kb_left_top_block">
              <div class="kb_block01 kb_pd10">
                <div>
                  <div>产线名称:{{ lineContent04.linename }}</div>
                  <div class="kb_mt10">产线总量:{{
                    lineContent04.children !== undefined ? lineContent04.lineworkcont : ''
                  }}
                  </div>
                </div>
                <div>
                  <!--                  <div>{{ lineContent04.linename }}</div>-->
                  <!--                  <div v-if="lineContent04.children!==undefined" class="kb_mt10">{{ lineContent04.lineworkcont }}</div>-->
                </div>
              </div>
              <div class="kb_block02 kb_pd10">
                <div>
                  <div>销售单号:{{ lineContent04.children !== undefined ? lineContent04.children.saleordercode : '' }}</div>
                  <div class="kb_mt5">
                    åŠ å·¥å•å·:{{ lineContent04.children !== undefined ? lineContent04.children.workcode : '' }}
                  </div>
                  <div class="kb_mt5">
                    äº§å“åç§°:{{ lineContent04.children !== undefined ? lineContent04.children.partname : '' }}
                  </div>
                  <div v-if="lineContent04.children&&lineContent04.children.length===0" class="kb_mt5">
                    ä»»åŠ¡æ•°é‡:
                  </div>
                  <div v-else class="kb_mt5">
                    ä»»åŠ¡æ•°é‡:{{ lineContent04.children ? parseFloat(lineContent04.children.qty) : '' }}
                  </div>
                </div>

              </div>
              <div class="kb_block03 kb_pd10 ">
                <div v-if="lineContent04.children!==undefined" class="flex_s_c">
                  <div
                    v-for="item in lineContent04.children.children"
                    :key="item.stepseq"
                    class="kb_block03_content flex_c_c"
                  >
                    <div>
                      <div class="content01">{{ item.stepname }}</div>
                    </div>
                    <div class="content02Parent">
                      <div class="content02">
                        <div class="content02_1 ">任务</div>
                        <div class="content02_2 borderTop ">{{ parseFloat(item.planqty) }}</div>
                      </div>
                      <div class="content02">
                        <div class="content02_1 ">合格</div>
                        <div class="content02_2 borderTop ">{{ parseFloat(item.goodqty) }}</div>
                      </div>
                      <div class="content02" style="border-right: 0">
                        <div class="content02_1 ">不良</div>
                        <div class="content02_2 borderTop ">{{ parseFloat(item.ngqty) }}</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-if="lineContent04.children!==undefined" class="kb_block03_02 flex_s_c">
                  <div
                    v-for="item in lineContent04.children.children"
                    :key="item.stepseq"
                    class="kb_block03_02_content flex_c_c"
                  >
                    <div class="flex_c_c content01">
                      <div
                        v-if="item.status==='START'&&(parseFloat(item.ngqty)===0||item.ngqty==='')&&(parseFloat(item.goodqty)===0||item.goodqty==='')"
                        class="circle"
                        style="background-color: blue;"
                      />
                      <div
                        v-else-if="item.status==='ALLO'&&(parseFloat(item.ngqty)===0||item.ngqty==='')&&(parseFloat(item.goodqty)===0||item.goodqty==='')"
                        class="circle"
                        style="background-color: rgb(255 255 255)"
                      />
                      <div
                        v-else-if="parseFloat(item.ngqty)+parseFloat(item.goodqty)>=parseFloat(item.planqty)"
                        class="circle"
                      />
                      <div v-else class="circleYellow" />
                    </div>
                  </div>
                </div>

              </div>
            </div>

          </div>
          <!-- 2-->
          <div class="kb_left_bottom kb_pd10">
            <div class="kb_left_bottom_content">
              <div class="content_head kb_title_text">产线加工任务</div>
              <div class="content_head kb_title_text">产线加工任务
                <div style="margin-left: 30px">{{ number2 }} å•</div>
              </div>
              <div class="content_body">
                <el-table
                  ref="tableData"
@@ -389,12 +117,13 @@
                  <el-table-column
                    prop="RowNum"
                    label="序号"
                    width="40"
                    width="50"
                  />
                  <!--                  label="加工状态"-->
                  <el-table-column
                    prop="status"
                    label="加工状态"
                    width="70"
                    label="状态"
                    width="65"
                  >
                    <template slot-scope="{row}">
                      <div v-if="row.status==='ALLO'">已派发</div>
@@ -405,7 +134,7 @@
                  <el-table-column
                    prop="lm_date"
                    label="派发时间"
                    width="95"
                    width="115"
                  >
                    <template slot-scope="{row}">
                      <div>{{ row.lm_date.substring(0, 10) }}</div>
@@ -414,78 +143,88 @@
                  <el-table-column
                    prop="saleOrderCode"
                    label="销售订单号"
                    width="158"
                    width="178"
                  >
                    <template slot-scope="{row}">
                      <div v-if="row.saleOrderCode">{{ row.saleOrderCode }}</div>
                      <div v-if="row.saleOrderCode" class="ellipsis">{{ row.saleOrderCode }}</div>
                      <div v-else>/</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="wo_code"
                    label="加工单号"
                    width="170"
                  />
                  <el-table-column
                    prop="partname"
                    label="产品名称"
                    width="145"
                  />
                  <el-table-column
                    prop="partspec"
                    label="规格"
                    width="130"
                    width="205"
                  >
                    <template slot-scope="{row}">
                      <div v-if="row.partspec" class="ellipsis">{{ row.partspec }}</div>
                      <div v-if="row.wo_code" class="ellipsis">{{ row.wo_code }}</div>
                      <div v-else>/</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="name"
                    label="单位"
                    width="50"
                  />
                    prop="partname"
                    label="产品名称"
                    width="150"
                  >
                    <template slot-scope="{row}">
                      <div v-if="row.partname" class="ellipsis">{{ row.partname }}</div>
                      <div v-else>/</div>
                    </template>
                  </el-table-column>
                  <!--                  <el-table-column-->
                  <!--                    prop="partspec"-->
                  <!--                    label="规格"-->
                  <!--                    width="125"-->
                  <!--                  >-->
                  <!--                    <template slot-scope="{row}">-->
                  <!--                      <div v-if="row.partspec" class="ellipsis">{{ row.partspec }}</div>-->
                  <!--                      <div v-else>/</div>-->
                  <!--                    </template>-->
                  <!--                  </el-table-column>-->
                  <!--                  <el-table-column-->
                  <!--                    prop="name"-->
                  <!--                    label="单位"-->
                  <!--                    width="50"-->
                  <!--                  />-->
                  <el-table-column
                    prop="plan_qty"
                    label="任务数量"
                    width="70"
                    width="85"
                  />
                  <el-table-column
                    prop="good_qty"
                    label="完工数量"
                    width="70"
                    width="85"
                  />
                  <el-table-column
                    prop="ng_qty"
                    label="不良数量"
                    width="70"
                    width="85"
                  />
                  <el-table-column
                    prop="wcl"
                    label="完成率"
                    width="50"
                    width="60"
                  >
                    <template slot-scope="{row}">
                      <div>{{ parseFloat((row.good_qty * 100 / row.plan_qty).toFixed(2)) }}%</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="planenddate"
                    label="预计开始"
                    width="95"
                  >
                    <template slot-scope="{row}">
                      <div>{{ row.planenddate.substring(0, 10) }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="planstartdate"
                    label="预计结束"
                    width="105"
                    label="预计开始"
                    width="115"
                  >
                    <template slot-scope="{row}">
                      <div>{{ row.planstartdate.substring(0, 10) }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="planenddate"
                    label="预计结束"
                    width="125"
                  >
                    <template slot-scope="{row}">
                      <div>{{ row.planenddate.substring(0, 10) }}</div>
                    </template>
                  </el-table-column>
                </el-table>
@@ -505,7 +244,7 @@
                  style="width: 100%;"
                  :header-cell-style="headerCellStyle"
                  :cell-style="cellStyle"
                  height="426"
                  height="396"
                >
                  <el-table-column
                    type="index"
@@ -526,12 +265,22 @@
                    prop="linename"
                    label="产线"
                    width="120"
                  />
                  >
                    <template slot-scope="{row}">
                      <div v-if="row.linename" class="ellipsis">{{ row.linename }}</div>
                      <div v-else>/</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="partname"
                    width="138"
                    label="产品"
                  />
                  >
                    <template slot-scope="{row}">
                      <div v-if="row.partname" class="ellipsis">{{ row.partname }}</div>
                      <div v-else>/</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="good_qty"
                    label="数量"
@@ -562,271 +311,191 @@
  LineSearchBottomLeftData,
  LineSearchBottomRightData,
  LineSearchTopLeftData,
  LineSearchTopRightData,
  ShopSearchLine
  LineSearchTopRightData, ShopSearch, WkspReportNotice
} from '@/api/dzkb'
import MarqueeTips from 'vue-marquee-tips'

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

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

      headTime: '',

      lineArr: [],
      // lineContent01: {},
      lineContent01: {
        linename: '',
        lineworkcont: '',
        children: undefined
      },
      lineContent02: {
        linename: '',
        lineworkcont: '',
        children: undefined
      },
      lineContent03: {
        linename: '',
        lineworkcont: '',
        children: undefined
      },
      lineContent04: {
        linename: '',
        lineworkcont: '',
        children: undefined
        // children: {
        //   workcode: '',
        //   partname: '',
        //   qty: 0,
        //   saleordercode: '',
        //   children: [
        //     {
        //       stepseq: '',
        //       stepname: '',
        //       planqty: 0,
        //       goodqty: '',
        //       ngqty: ''
        //     }
        //   ]
        // }
      },
      lineContent: [],
      lineContent3: [],

      leftTopData: [],
      tableData: [],
      tableDataRank: [],
      lineCodeArr: []
      lineCodeArr: [],

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

      number1: '',
      number2: '',

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

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

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

    // ä¸¤å°æ—¶çœ‹æ¿åˆ·æ–°ä¸€æ¬¡
    setInterval(() => {
      window.location.reload()
    }, 1000 * 60 * 120)
  },
  mounted() {
    this.getValue()
    // ç›‘听网络是否在线
    window.addEventListener('online', this.updateOnlineStatus)
    window.addEventListener('offline', this.updateOnlineStatus)
    this.updateOnlineStatus({ type: this.onLine ? 'online' : 'offline', isFirst: true })
  },
  beforeDestroy() {
    window.removeEventListener('online', this.updateOnlineStatus)
    window.removeEventListener('offline', this.updateOnlineStatus)
  },
  methods: {
    // æ›´æ–°ç½‘络状态
    updateOnlineStatus(e) {
      if (e.isFirst) {
        this.getValue()// èŽ·å–值
      } else {
        const loading = this.$loading({
          lock: true,
          text: '断网了，正在拼命联网中，请检查网络是否正常...',
          spinner: 'el-icon-loading',
          customClass: 'osloading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        const { type } = e
        this.onLine = type === 'online'
        if (this.onLine) {
          this.getValue()
          loading.close()
          this.$message.success('网络连接成功！')
        } else {
          clearInterval(this.MarqueeTipsTask)
          clearInterval(this.ShopSearchTask)
          clearInterval(this.ShopSearchLineTask)
          clearInterval(this.TableDataRollTask)
          clearInterval(this.TableDataRankRollTask)
          clearInterval(this.EchartsTask)
          this.$message.error('网络掉线，请关注网络状态！')
        }
      }
    },
    // èŽ·å–值
    async getValue() {
      await this.getShopSearch()
      await this.getShopSearchLine()
      await this.getLineSearchTopLeftData()

      this.getEcharts()
      this.getTableDataRoll()
      this.getTableDataRankRoll()
      await this.getEcharts()
      await this.getTableDataRoll()
      await this.getTableDataRankRoll()
      await this.getMarqueeTipsContent()
      await this.getMarqueeTipsContent()
    },
    // ç”Ÿäº§äº§çº¿
    async getShopSearchLine() {
      const { data: res } = await ShopSearchLine({ shopcode: 'CJ001' })
      this.lineArr = res
    },
    // èŽ·å–公告
    getMarqueeTipsContent() {
      WkspReportNotice({ shopcode: this.ShopArr.join(',') }).then(res => {
        let contentAll = ''
        res.data.forEach(item => {
          contentAll += item.contents + ' '.padStart(item.contents.toString().length * 2, ' ')
        })
        this.MarqueeTipsContent = contentAll
        this.speed = this.MarqueeTipsContent.length / 10

    getLineSearchTopLeftData() {
      this.lineArr.forEach((item, index) => {
        if (index <= 3) {
          this.handleEveryLine(item, index)
          this.lineCodeArr.push(item.code)
        }
        this.MarqueeTipsTask = setInterval(() => {
          WkspReportNotice({ shopcode: this.ShopArr.join(',') }).then(res1 => {
            let contentAll = ''
            res1.data.forEach(item => {
              contentAll += item.contents + ' '.padStart(item.contents.toString().length * 2, ' ')
            })
            this.MarqueeTipsContent = contentAll
            this.speed = this.MarqueeTipsContent.length / 10
          })
          // }, this.speed * 1000)
        }, 1000 * 60 * 5)
      })
    },
    // å¤„理每一条产线
    async handleEveryLine(item, index) {
      const res = await LineSearchTopLeftData([item])

      let res1, res2, res3, res4
      if (res.data[0].linecode === this.lineCodeArr[0]) {
        res1 = res
      }
      if (res.data[0].linecode === this.lineCodeArr[1]) {
        res2 = res
      }
      if (res.data[0].linecode === this.lineCodeArr[2]) {
        res3 = res
      }
      if (res.data[0].linecode === this.lineCodeArr[3]) {
        res4 = res
      }

      let flag1 = true
      let flag2 = true
      let flag3 = true
      let flag4 = true
      if (index === 0) {
        let count = 0
        if (flag1) {
          this.lineContent01 = {
            linename: res1.data[0].linename,
            lineworkcont: res1.data[0].lineworkcont,
            children: res1.data[0].children ? res.data[0].children[count] : []
          }
          flag1 = false
        }
        setInterval(() => {
          if (count > 0) {
            this.lineContent01 = {
              linename: res1.data[0].linename,
              lineworkcont: res1.data[0].lineworkcont,
              children: res1.data[0].children ? res1.data[0].children[count] : []
            }
          }
          console.log(res1.data[0].children === null, 999)
          if (res1.data[0].children === null) {
            res1.data[0].children = []
          }
          if (this.lineContent01.children === undefined || res1.data[0].children.length >= 0) {
            LineSearchTopLeftData([item]).then(res => {
              res1 = res
    // èŽ·å–车间编码
    async getShopSearch() {
      const res1 = await ShopSearch()
      if (res1.code === '200') {
        this.ShopArr = []
        res1.data.forEach(item => {
          this.ShopArr.push(item.org_code)
            })
          }
          if (res1.data[0].children.length === count++) {
            count = 0
            this.lineContent01 = {
              linename: res1.data[0].linename,
              lineworkcont: res1.data[0].lineworkcont,
              children: res1.data[0].children ? res1.data[0].children[count] : []
            }
          }
        }, 1000 * 3)
      } else if (index === 1) {
        let count = 0
        if (flag2) {
          this.lineContent02 = {
            linename: res2.data[0].linename,
            lineworkcont: res2.data[0].lineworkcont,
            children: res2.data[0].children ? res2.data[0].children[count] : []
          }
          flag2 = false
        }
        setInterval(() => {
          if (count > 0) {
            this.lineContent02 = {
              linename: res2.data[0].linename,
              lineworkcont: res2.data[0].lineworkcont,
              children: res2.data[0].children ? res2.data[0].children[count] : []
            }
          }
          if (res2.data[0].children === null) {
            res2.data[0].children = []
          }
          if (this.lineContent02.children === undefined || res2.data[0].children.length >= 0) {
            LineSearchTopLeftData([item]).then(res => {
              res2 = res
        this.ShopSearchTask = ShopSearch().then(res1 => {
          if (res1.code === '200') {
            this.ShopArr = []
            res1.data.forEach(item => {
              this.ShopArr.push(item.org_code)
            })
          }
          if (res2.data[0].children.length === count++) {
            count = 0
            this.lineContent02 = {
              linename: res2.data[0].linename,
              lineworkcont: res2.data[0].lineworkcont,
              children: res2.data[0].children ? res2.data[0].children[count] : []
            }
          }
        }, 1000 * 3)
      } else if (index === 2) {
        let count = 0
        if (flag3) {
          this.lineContent03 = {
            linename: res3.data[0].linename,
            lineworkcont: res3.data[0].lineworkcont,
            children: res3.data[0].children ? res3.data[0].children[count] : []
          }
          flag3 = false
        }
        setInterval(() => {
          if (count > 0) {
            this.lineContent03 = {
              linename: res3.data[0].linename,
              lineworkcont: res3.data[0].lineworkcont,
              children: res3.data[0].children ? res3.data[0].children[count] : []
            }
          }

          if (res3.data[0].children === null) {
            res3.data[0].children = []
          }

          if (this.lineContent03.children === undefined || res3.data[0].children.length >= 0) {
            LineSearchTopLeftData([item]).then(res => {
              res3 = res
            })
          }
      }, 1000 * 30)
    },
    // äº§çº¿åŠ å·¥ä¸­ä»»åŠ¡
    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)

          if (res3.data[0].children.length === count++) {
            count = 0
            this.lineContent03 = {
              linename: res3.data[0].linename,
              lineworkcont: res3.data[0].lineworkcont,
              children: res3.data[0].children ? res3.data[0].children[count] : []
            }
          }
        }, 1000 * 3)
      } else if (index === 3) {
        let count = 0
        if (flag4) {
          this.lineContent04 = {
            linename: res4.data[0].linename,
            lineworkcont: res4.data[0].lineworkcont,
            children: res4.data[0].children ? res4.data[0].children[count] : []
          }
          flag4 = false
        }
        setInterval(() => {
          if (count > 0) {
            this.lineContent04 = {
              linename: res4.data[0].linename,
              lineworkcont: res4.data[0].lineworkcont,
              children: res4.data[0].children ? res4.data[0].children[count] : []
            }
          }

          if (res4.data[0].children === null) {
            res4.data[0].children = []
          }

          if (res4.data[0].children.length === count || this.lineContent04.children === undefined) {
            LineSearchTopLeftData([item]).then(res => {
              res4 = res
        this.number1 = this.lineContent.length
            })
          }

          if (res4.data[0].children.length === count++) {
            count = 0
            this.lineContent04 = {
              linename: res4.data[0].linename,
              lineworkcont: res4.data[0].lineworkcont,
              children: res4.data[0].children ? res4.data[0].children[count] : []
      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 * 3)
      }
    },

    // äº§çº¿åŠ å·¥ä»»åŠ¡
    getTableDataRoll() {
      LineSearchBottomLeftData().then(res => {
      LineSearchBottomLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
        this.tableData = res.data
        this.number2 = this.tableData.length

        const divData = this.$refs.tableData.bodyWrapper
        // æ‹¿åˆ°å…ƒç´ åŽï¼Œå¯¹å…ƒç´ è¿›è¡Œå®šæ—¶å¢žåŠ è·ç¦»é¡¶éƒ¨è·ç¦»ï¼Œå®žçŽ°æ»šåŠ¨æ•ˆæžœ(此配置为每100毫秒移动1像素)
        const task = setInterval(() => {
        this.TableDataRollTask = setInterval(() => {
          // å…ƒç´ è‡ªå¢žè·ç¦»é¡¶éƒ¨1像素
          divData.scrollTop += 1
          // divData.scrollTop += divData.scrollHeight / this.tableData.length
@@ -834,10 +503,11 @@
          if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
            // é‡ç½®table距离顶部距离
            divData.scrollTop = 0
            LineSearchBottomLeftData().then(res => {
            LineSearchBottomLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
              this.tableData = res.data
              this.number2 = this.tableData.length
              if (this.tableData.length > 10) {
                clearInterval(task)
                clearInterval(this.TableDataRollTask)
                this.getTableDataRoll()
              }
            })
@@ -847,12 +517,12 @@
    },
    // å½“日完工产品数量排行
    getTableDataRankRoll() {
      LineSearchTopRightData().then(res => {
      LineSearchTopRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
        this.tableDataRank = res.data

        const divData = this.$refs.tableDataRank.bodyWrapper
        // æ‹¿åˆ°å…ƒç´ åŽï¼Œå¯¹å…ƒç´ è¿›è¡Œå®šæ—¶å¢žåŠ è·ç¦»é¡¶éƒ¨è·ç¦»ï¼Œå®žçŽ°æ»šåŠ¨æ•ˆæžœ(此配置为每100毫秒移动1像素)
        const task = setInterval(() => {
        this.TableDataRankRollTask = setInterval(() => {
          // å…ƒç´ è‡ªå¢žè·ç¦»é¡¶éƒ¨1像素
          // divData.scrollTop += divData.scrollHeight / this.tableDataRank.length
          divData.scrollTop += 1
@@ -860,26 +530,26 @@
          if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
            // é‡ç½®table距离顶部距离
            divData.scrollTop = 0
            LineSearchTopRightData().then(res => {
            LineSearchTopRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
              this.tableDataRank = res.data

              if (this.tableDataRank.length > 10) {
                clearInterval(task)
              if (this.tableDataRank.length > 9) {
                clearInterval(this.TableDataRankRollTask)
                this.getTableDataRankRoll()
              }
            })
          }
        }, this.tableDataRank.length <= 10 ? 1000 * 3 : 100)
        }, this.tableDataRank.length <= 9 ? 1000 * 3 : 100)
      })
    },
    // èŽ·å–echarts
    getEcharts() {
      LineSearchBottomRightData().then(res => {
      LineSearchBottomRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
        loadEcharts('bar02', bar02(res.data.map(i => i.cont), res.data.map(i => i.name)))
      })

      setInterval(() => {
        LineSearchBottomRightData().then(res => {
      this.EchartsTask = setInterval(() => {
        LineSearchBottomRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
          loadEcharts('bar02', bar02(res.data.map(i => i.cont), res.data.map(i => i.name)))
        })
      }, 1000 * 15)
@@ -925,8 +595,6 @@
</script>

<style scoped lang="scss">
//$kbBorderColor: #3A0088;
//$kbBorderColor: #09d8f2;
$kbBorderColor: rgba(9, 216, 242, 0.4);
$kbBackgroundColor: rgba(30, 33, 46, 0.6);
.kb_content {
@@ -934,9 +602,7 @@
  position: relative;
  height: 990px;
  width: 100%;
  //background-color: #000;
  letter-spacing: 2px;
  //color: #d8d7d9;
  color: #fff;

  .kb_left {
@@ -946,9 +612,8 @@

    .kb_left_top_title01 {
      position: absolute;
      top: 10px;
      top: 37px;
      left: 15px;
      font-size: 18px;
      display: flex;
      color: #00ffff;

@@ -966,59 +631,51 @@
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      padding-top: 30px;
      padding-top: 70px;

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

      .kb_left_top_block {
        margin-top: 10px;
        width: 100%;
        height: 100px;
          height: 133px;
        display: flex;
        border-radius: 5px;
        font-size: 14px;
        //border: 1px solid rgba(255, 255, 255, 0.6);
        border: 1px solid $kbBorderColor;
          font-size: 17px;
          border-bottom: 1px solid $kbBorderColor;
        justify-content: flex-start;

        .kb_block01 {
          width: 171px;
          display: flex;
          align-items: center;
          border-right: 1px solid $kbBorderColor;
          background-color: $kbBackgroundColor;
          border-bottom-left-radius: 5px;
          border-top-left-radius: 5px;

        }

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

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

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

            .content01 {
              //width: 50px;
                height: 30px;
              width: 100%;
              height: 20px;
              border-bottom: 1px solid $kbBorderColor;
              display: flex;
              align-items: center;
@@ -1029,18 +686,19 @@
              display: flex;

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

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

                .content02_2 {
                  height: 50%;
                    height: 25px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
@@ -1060,7 +718,7 @@
          display: flex;

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

            .content01 {
@@ -1078,6 +736,10 @@

      }

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

    .kb_left_bottom {
@@ -1087,20 +749,10 @@
        height: 460px;
        display: flex;
        flex-direction: column;
        //border: 1px solid $kbBorderColor;

        .content_head {
          ////font-size: 26px;
          //font-size: 18px;
          //height: 55px;
          //line-height: 55px;
          ////border-bottom: 1px solid $kbBorderColor;
          ////text-align: center;
          //padding-left: 10px;

          font-size: 18px;
          display: flex;
          line-height: 20px;
          //padding-left: 10px;
          margin-bottom: 10px;
          margin-top: -10px;
          color: #00ffff;
@@ -1119,19 +771,19 @@
    height: 100%;

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

      .kb_right_top_content {
        //border: 1px solid $kbBorderColor;
        height: 460px;
        height: 430px;
        display: flex;
        flex-direction: column;

        .content_head {
          font-size: 18px;
          //font-size: 18px;
          line-height: 20px;
          //padding-left: 10px;
          margin-bottom: 10px;
          margin-top: -10px;
          color: #00ffff;
@@ -1139,29 +791,26 @@

        .content_body {
          border: 1px solid $kbBorderColor;
          //border-radius: 5px;
        }
      }
    }

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

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

      .kb_right_bottom_content {
        border: 1px solid $kbBorderColor;
        height: 440px;
        height: 441px;
        width: 100%;
        border-radius: 5px;
        background-color: $kbBackgroundColor;
        //height: 100%;
      }
    }
  }
@@ -1172,7 +821,6 @@
}

::v-deep .el-table__body-wrapper {
  //background-color: #044563;
  background-color: rgba(30, 33, 46);
}

@@ -1183,66 +831,13 @@

::v-deep .cell {
  padding: 0 !important;
  font-size: 18px;
}

//
///* å®šä¹‰keyframes动画，命名为blink*/
//@keyframes blink {
//  0% {
//    opacity: 1
//  }
//  100% {
//    opacity: 0
//  }
//}
//
///*添加兼容性前缀*/
//@-webkit-keyframes blink {
//  0% {
//    opacity: 1
//  }
//  100% {
//    opacity: 0
//  }
//}
//
//@-o-keyframes blink {
//  0% {
//    opacity: 1
//  }
//  100% {
//    opacity: 0
//  }
//}
//
//@-moz-keyframes blink {
//  0% {
//    opacity: 1
//  }
//  100% {
//    opacity: 0
//  }
//}
//
//@-ms-keyframes blink {
//  0% {
//    opacity: 1
//  }
//  100% {
//    opacity: 0
//  }
//}
//
.circleYellow {
  width: 26px;
  height: 26px;
  background-color: rgb(255 255 0);
  border-radius: 50%;

  //animation: blink 2s linear infinite;
  //-webkit-animation: blink 2s linear infinite;
  //-moz-animation: blink 2s linear infinite;
  //-ms-animation: blink 2s linear infinite;
  //-o-animation: blink 2s linear infinite;
}
</style>

 src/views/kb/zpcj.vue

ÎļþÒÑɾ³ý