1.看板样式更新迭代

loulijun2021

2023-03-16 086765836d22b11cf42f7dc2e9843a64d3d7da1c

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/cggz.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="1677632519697" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4679" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M578.33 870.33H198c-20.57 0-37.31-15.16-37.31-33.8V185.86c0-18.63 16.74-33.79 37.31-33.79h534.23c20.58 0 37.32 15.16 37.32 33.79v230.59a24 24 0 1 0 48 0V185.86c0-45.1-38.27-81.79-85.32-81.79H198c-47 0-85.31 36.69-85.31 81.79v650.67c0 45.1 38.27 81.8 85.31 81.8h380.33a24 24 0 0 0 0-48z" fill="#09d8f2" p-id="4680"></path><path d="M553.47 488.45a24 24 0 0 0-24-24H252a24 24 0 1 0 0 48h277.5a24 24 0 0 0 23.97-24zM696.56 307.21a24 24 0 0 0-24-24H252a24 24 0 1 0 0 48h420.56a24 24 0 0 0 24-24zM257.45 638.94a24 24 0 0 0 0 48h203.94a24 24 0 0 0 0-48zM717.83 463.55c-106.66 0-193.43 86.82-193.43 193.52 0 35.86 13.82 74 42.25 116.63 26.82 40.22 66.06 83.57 119.94 132.51a46.34 46.34 0 0 0 62.67 0c53.84-49 93-92.34 119.86-132.56 28.42-42.62 42.23-80.75 42.23-116.56 0-106.72-86.81-193.54-193.52-193.54z m0.09 406.26C621.35 781.94 572.4 710.37 572.4 657.07c0-80.24 65.24-145.52 145.43-145.52s145.52 65.28 145.52 145.52c0 53.19-48.92 124.76-145.43 212.74z" fill="#09d8f2" p-id="4681"></path><path d="M713.72 588a77.7 77.7 0 1 0 77.7 77.7 77.79 77.79 0 0 0-77.7-77.7z m0 107.4a29.7 29.7 0 1 1 29.7-29.7 29.73 29.73 0 0 1-29.7 29.7z" fill="#09d8f2" p-id="4682"></path></svg>

 src/icons/svg/cpdfh.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="1677640431200" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11139" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M765.696 967.1168c-132.7104 0-240.6912-107.9808-240.6912-240.6912s107.9808-240.6912 240.6912-240.6912 240.6912 107.9808 240.6912 240.6912-107.9296 240.6912-240.6912 240.6912z m0-442.0608c-111.0016 0-201.3184 90.3168-201.3184 201.3184s90.3168 201.3184 201.3184 201.3184 201.3184-90.3168 201.3184-201.3184-90.3168-201.3184-201.3184-201.3184z" p-id="11140" fill="#09d8f2"></path><path d="M964.0448 884.9408h-22.9888l1.1776 17.2544c-0.1024 5.5808-1.8432 9.7792-5.6832 13.568-19.3024 19.2512-79.4624 18.9952-115.3536 18.8928h-9.4208l-619.4688-0.0512H182.784c-37.4784 0.1024-107.3152 0.4096-128.3072-20.5312-3.4304-3.4304-5.0688-7.0656-5.2224-11.776L116.0192 169.3184l0.0512-1.4336c0-43.7248 35.584-79.3088 79.2576-79.3088h617.0112c43.7248 0 79.3088 35.584 79.3088 79.3088v0.5632l26.4192 383.2832h31.7952l-26.4704-384.4096c-0.3072-60.928-49.9712-110.4384-111.0016-110.4384H195.3792c-60.9792 0-110.592 49.408-111.0016 110.2336L17.6128 900.2496l-0.0512 1.4336c0 13.312 5.0176 25.3952 14.5408 34.8672 30.3616 30.208 102.8096 29.952 150.8352 29.7984h9.4208l619.4688 0.0512h9.2672c3.6352 0 7.3728 0.0512 11.1616 0.0512 44.6464 0 100.2496-1.8944 126.6688-28.16 9.8304-9.7792 15.0016-22.4256 15.0016-36.5568v-0.5632l-1.1776-17.2032c-2.816 0.6144-5.6832 0.9728-8.704 0.9728z" p-id="11141" fill="#09d8f2"></path><path d="M832.3072 971.52l-20.48-0.0512-619.4688-0.0512h-9.4208c-48.7424 0.2048-122.5728 0.512-154.4704-31.2832-10.496-10.4448-16.0256-23.7568-16.0256-38.5024l0.0512-1.6384L79.3088 166.656c0.4096-63.1808 52.48-114.8928 116.0704-114.8928h617.0112c63.6928 0 115.8144 51.8144 116.1216 115.5072l26.88 389.5808h-42.0352l-26.7776-388.9664c0-40.9088-33.28-74.1888-74.1888-74.1888H195.3792c-40.9088 0-74.1376 33.28-74.1376 74.1888l-0.0512 1.6896-66.7648 732.8768c0.1536 3.2256 1.2288 5.5296 3.6864 7.9872 19.4048 19.3536 90.2144 19.1488 124.2624 19.0464h9.984l628.8896 0.0512c33.024 0.1536 93.952 0.3072 111.7184-17.408 2.8672-2.8672 4.096-5.7856 4.1472-10.0352l-1.536-22.3232h28.5184c2.5088 0 5.0688-0.3072 7.6288-0.8704l5.7856-1.28 1.5872 24.0128c0 15.5136-5.6832 29.44-16.4864 40.192-26.2144 26.112-78.1312 29.696-130.304 29.696z m-639.9488-10.3424l639.9488 0.1024c50.0224 0 99.5328-3.2256 123.0336-26.6752 8.8064-8.8064 13.4656-20.1728 13.4656-32.9216V901.12l-0.768-11.3152c-1.3312 0.1024-2.6624 0.2048-3.9936 0.2048h-17.5104l0.8192 11.8272c-0.1024 7.3728-2.4064 12.8-7.168 17.5616-20.7872 20.6848-79.7696 20.5312-118.7328 20.3776h-9.6256l-619.4688-0.0512h-9.5232c-53.248 0.1536-111.2576-1.3824-131.9424-22.016-4.4032-4.4032-6.5536-9.216-6.7072-15.2576v-0.3072l0.0512-0.3072L110.9504 168.8576l0.0512-1.1776c0-46.2848 37.8368-84.1728 84.3776-84.1728h617.0112c46.5408 0 84.4288 37.888 84.4288 84.4288v0.5632l26.0608 378.1632h21.504l-26.112-378.9312c-0.3072-58.4192-47.7696-105.6768-105.8816-105.6768H195.3792c-58.0096 0-105.472 47.1552-105.8816 105.1648L22.7328 900.7104l-0.0512 1.1776c0 11.7248 4.5056 22.528 13.056 31.0272 28.8768 28.7744 100.0448 28.4672 147.2 28.2624h9.4208z" p-id="11142" fill="#09d8f2"></path><path d="M765.696 726.3744m-39.3216 0a39.3216 39.3216 0 1 0 78.6432 0 39.3216 39.3216 0 1 0-78.6432 0Z" p-id="11143" fill="#09d8f2"></path><path d="M766.3616 710.912c-9.3696 0-17.0496-7.68-17.0496-17.0496v-78.1312c0-9.3696 7.68-17.0496 17.0496-17.0496s17.0496 7.68 17.0496 17.0496v78.1312c0 9.3696-7.68 17.0496-17.0496 17.0496z" p-id="11144" fill="#09d8f2"></path><path d="M762.4704 718.848a17.09568 17.09568 0 0 1 14.5408-19.2l77.4144-10.6496c9.2672-1.28 17.92 5.2736 19.2 14.5408 1.28 9.2672-5.2736 17.92-14.5408 19.2l-77.4144 10.6496c-9.3184 1.28-17.92-5.2736-19.2-14.5408z" p-id="11145" fill="#09d8f2"></path><path d="M634.3168 533.0944c-25.2416 9.2672-35.6352 16.128-45.1584 29.2352-1.28 2.048-2.3552 3.1744-4.096 3.584-0.4096 1.2288-65.4336-5.2736-117.0432-54.9376-46.848 43.2128-102.6048 70.7584-176.4352 67.4816-1.2288-2.4576-2.4064-4.9664-3.6352-7.424 67.1744-6.8096 122.5216-33.536 165.7856-74.0352-30.208-34.304-50.5856-76.6976-61.0304-129.0752h-16.384C344.0128 448.8704 299.3664 521.8304 239.9232 552.96l-4.864-5.7856c57.9072-45.8752 108.1344-136.0896 144.5376-259.6864-31.9488 0.7168-63.9488 2.1504-95.8976 4.1984-4.5056 3.9936-8.96 7.9872-13.4656 11.9296-2.048 1.4848-3.584 2.5088-4.5568 2.56-0.9728 0.0512-1.9456-0.3584-2.8672-1.1776-7.8848-7.1168-15.616-13.9776-23.1424-20.5312 24.0128-8.5504 26.5216-10.9568 36.6592-30.2592 14.2336-26.7776 28.8256-54.3232 43.1616-82.2784 7.68 6.2464 15.6672 12.8 23.9616 19.6096 1.6896 1.28 2.4576 2.6112 2.4064 3.584-0.1024 0.9728-1.0752 2.048-3.0208 3.1744-5.888 2.9696-11.776 5.9904-17.7664 9.0112-13.568 25.344-27.2896 50.3296-40.704 74.6496 32.8192-2.4576 65.5872-4.0448 98.4064-4.864 11.6736-41.728 23.04-88.1664 31.9488-139.5712 10.7008 7.3216 21.76 14.9504 33.1776 22.8352 2.2528 1.536 3.584 2.56 3.6352 4.0448 0 0.9728-1.28 1.9456-3.4816 2.8672-7.936 3.2768-15.5648 13.7216-18.7904 27.648-6.9632 28.3648-13.9776 55.296-22.0672 81.664 62.6688-0.768 125.3376 1.4336 188.0576 6.6048 7.168-8.8064 14.08-17.3568 20.6848-25.5488 11.3152 10.8544 22.6816 21.4016 33.9968 31.6928 3.2256 2.8672 4.9152 5.1712 5.0688 6.4512 0.1536 1.28-1.7408 1.9456-6.144 1.536a2273.78176 2273.78176 0 0 0-244.6848-10.24c-7.1168 24.3712-15.3088 47.7696-23.808 69.9904 49.8688-0.1024 99.7376-0.0512 149.6064 0.1536 6.4512-6.4512 12.8512-12.8 19.2-19.0464 11.2128 8.1408 22.4256 16.1792 33.536 23.9104 1.9968 1.3824 3.4816 2.7648 3.4816 4.1984 0 1.3824-1.9968 2.304-5.9904 3.2768-11.4688 2.4064-17.408 7.5776-24.6272 21.504-21.1968 41.3184-45.312 76.288-72.8576 105.5232 46.1824 37.4272 95.8464 48.896 153.1904 30.976-0.6144 1.8432-1.0752 3.6864-1.5872 5.5296zM402.6368 367.9232c16.9984 48.5888 39.5776 89.2928 65.1776 114.8416 27.904-30.464 50.944-67.7376 67.5328-114.9952-44.2368 0.1024-88.4736 0.1536-132.7104 0.1536zM489.984 163.5328c36.096 14.2336 74.0864 37.12 85.3504 51.8144 2.7648 3.584 4.352 8.3456 4.9664 12.9536 1.1264 8.2944-2.2016 16.5888-9.3184 15.8208-6.1952-0.6656-10.8032-4.352-15.4624-13.7728-4.608-9.6256-26.112-37.12-67.7376-61.184 0.7168-1.8432 1.4336-3.7376 2.2016-5.632z" p-id="11146" fill="#09d8f2"></path><path d="M303.2576 588.9536c-3.9936 0-8.0384-0.1024-12.1344-0.256l-6.0928-0.256-12.7488-26.0608 14.592-1.4848c58.9312-5.9904 110.1824-27.7504 152.576-64.8192-26.6752-32.768-44.7488-71.4752-55.1424-117.9136h-1.1776c-38.4512 94.0544-85.0432 155.904-138.5472 183.9104l-7.3216 3.84-16.9472-20.1216 8.2944-6.5536c54.272-42.9568 101.5296-126.1568 137.0112-241.0496-25.9072 0.768-52.0192 1.9456-77.824 3.584l-10.8544 9.6256-0.7168 0.5632c-3.1744 2.3552-6.144 4.3008-9.984 4.5056-3.7888 0.256-7.4752-1.1776-10.4448-3.8912-7.7312-6.9632-15.4624-13.824-22.9376-20.3776l-13.1072-11.4688 16.4352-5.8368c21.76-7.7824 22.1184-8.448 31.0272-25.3952 14.592-27.4432 28.8768-54.3232 43.1104-82.176l5.7344-11.264 9.8304 7.9872c7.7312 6.2464 15.7184 12.8512 24.0128 19.712 4.1472 3.072 6.5024 7.68 6.0928 12.3904-0.3584 4.4032-3.072 8.1408-7.9872 11.0592l-0.6144 0.3584-14.848 7.5264c-9.8816 18.4832-19.7632 36.4544-30.208 55.4496 24.1152-1.5872 48.4352-2.7136 72.4992-3.3792 12.5952-45.8752 22.3232-88.8832 29.696-131.2768l2.7136-15.6672 13.1584 8.96a4223.488 4223.488 0 0 1 33.2288 22.8864c2.7136 1.8944 7.8848 5.4272 8.0384 12.2368 0.1024 3.7888-1.536 9.0624-9.728 12.544-4.4544 1.8432-10.24 9.472-12.8512 20.5824-5.0688 20.6848-11.1104 44.4928-18.2272 68.9664 56.4224-0.256 113.408 1.8432 169.728 6.3488 5.9392-7.3216 11.7248-14.4384 17.2544-21.3504l7.0144-8.704 8.0896 7.7312c11.3152 10.8544 22.6816 21.4528 33.792 31.488 5.3248 4.7616 7.936 8.7552 8.3968 12.9024 0.3584 3.3792-0.768 6.7072-3.1744 9.1648-3.9936 4.0448-9.6256 4.096-14.08 3.6864-78.2848-7.4752-157.696-11.008-236.032-10.2912-4.8128 15.872-10.2912 32.2048-16.64 49.5616 43.52-0.0512 87.3984 0 130.6112 0.1536 5.4272-5.4272 10.8544-10.752 16.2304-16.0768l6.1952-6.0928 7.0144 5.12c11.6224 8.448 22.8352 16.4352 33.3824 23.808 1.9456 1.3824 7.8848 5.5296 7.8336 12.5952-0.0512 9.8816-10.3936 12.3904-13.824 13.2096-7.3216 1.536-11.3664 3.6352-17.92 16.2816-19.8144 38.656-41.7792 71.3216-66.8672 99.5328 42.24 30.8736 85.4528 37.9904 135.0656 22.528l17.7152-5.5296-4.7616 17.92-1.536 5.632-1.3824 5.0688-4.9152 1.792c-25.1904 9.2672-32.8704 15.36-40.2432 25.3952-1.024 1.5872-2.304 3.328-4.096 4.7616l-0.5632 1.6896-5.5808 1.3824c-7.2704 1.792-68.5568-6.656-119.3984-51.1488-49.7152 42.9056-103.7824 64-164.9152 64z m172.544-84.6848c41.0112 39.0656 91.392 49.9712 105.5232 51.4048 2.6624-3.584 5.376-6.7072 8.3456-9.6256-40.192 1.3824-77.6704-12.3904-113.5616-41.472l-0.3072-0.3072z m-9.5232-8.6016l1.4336 1.6384 0.1024-0.1024-1.536-1.536z m83.5584-138.1376l-4.8128 13.6704c-14.5408 41.3696-34.2528 76.7488-60.1088 107.5712 22.8864-26.2656 43.0592-56.6272 61.44-92.416 5.376-10.3936 11.0592-18.2272 20.3264-22.9888-5.376-3.84-10.9568-7.7824-16.5888-11.8784-1.9968 1.9968-4.0448 3.9936-6.0416 6.0416h5.7856z m-132.5056 20.6336c14.1824 36.864 31.6416 67.8912 50.3296 89.3952 22.1184-26.0096 39.5776-55.4496 52.992-89.4464-34.4576 0-68.9152 0.0512-103.3216 0.0512z m-26.9312-91.0848l-0.9728 3.2768c-18.0736 61.2352-39.424 114.3808-63.488 158.208 13.9776-23.4496 27.1872-50.5856 39.5776-81.3056h-0.1024l5.3248-13.9264c9.0624-23.7568 16.4864-45.4656 22.6816-66.3552h-0.2048l4.096-13.4144c6.9632-22.7328 13.5168-47.0016 21.9136-81.1008 2.816-11.8784 8.4992-22.1184 15.6672-28.672-4.352-3.0208-8.6528-5.9904-12.9024-8.9088-7.5264 40.2432-17.152 81.2544-29.3376 124.928l-2.2528 7.2704z m-120.832 10.24l0.0512 0.0512c0-0.0512 0-0.0512-0.0512-0.0512z m-10.5984-9.5232c2.2528 1.9968 4.5056 4.0448 6.8096 6.0928 0.1536-0.1536 0.3584-0.3072 0.512-0.4608l9.0624-16.4352c1.5872-2.816 3.1232-5.632 4.6592-8.448-5.8368 9.6768-11.008 14.5408-21.0432 19.2512z m349.1328-4.3008c7.3728 0.5632 14.7968 1.1776 22.1696 1.8432-4.4544-4.1472-8.96-8.3456-13.4656-12.5952-2.816 3.5328-5.7344 7.1168-8.704 10.752zM322.816 187.8016c-11.9808 23.1936-23.9616 45.7728-36.1472 68.7104 10.1376-18.432 19.712-35.9936 29.3888-54.0672l1.536-2.816 12.1344-6.1952c-2.3552-1.8944-4.6592-3.7888-6.912-5.632z m14.4384 11.8272c0 0.0512 0.0512 0.0512 0 0 0.0512 0.0512 0 0.0512 0 0z m234.5984 54.8352c-0.6656 0-1.28-0.0512-1.9456-0.1024-13.056-1.3824-19.456-11.1104-23.552-19.4048-2.8672-5.9904-21.76-32.6144-63.6928-56.8832l-7.68-4.4544 9.3184-23.3984 9.5232 3.7376c32.9728 13.0048 75.6736 36.7616 89.7024 55.0912 4.608 5.9904 6.3488 13.056 6.9632 17.8688 1.1776 8.7552-1.1264 17.0496-6.0416 22.1184-3.4304 3.584-7.8336 5.4272-12.5952 5.4272z m-19.2-45.7728c5.9392 6.9632 9.9328 12.9536 12.032 17.3568 2.3552 4.7104 4.096 6.6048 5.376 7.3728 0.1536-0.9216 0.256-2.2016 0.0512-3.6864-0.4096-3.2768-1.4848-6.1952-2.9184-8.0384-2.6624-3.584-7.7312-8.0384-14.5408-13.0048z" p-id="11147" fill="#09d8f2"></path></svg>

 src/icons/svg/cpdrk.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="1677640256093" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9186" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M621.67 686.49a55.21 55.21 0 0 0-17 40.91c0.13 19.7 12.42 32.26 20.14 39.9l92.51 102.64q0.53 0.59 1.09 1.14l0.07 0.07c4.51 4.39 13.89 13.53 30.39 13.53 23.42 0 41.09-17.65 41.09-41v-39c38.78 4.11 68.62 25.32 94.67 66.6 7.82 14.71 19.41 22.16 34.47 22.16 19.41 0 41-16.86 41-41a24.21 24.21 0 0 0-0.16-2.75c-0.21-1.87-0.42-4.74-0.66-8.06-1.61-22.17-5-68.29-30.26-110.27a164.36 164.36 0 0 0-58.74-57.83c-22.75-13.25-49.74-22-80.45-26.15v-31.73c0-11.16-4.9-22.46-13.43-31s-19.83-13.43-31-13.43c-17.09 0-26.72 9.88-30.82 14.1l-0.48 0.51z m31.59 39.92a6.66 6.66 0 0 1 2.15-5q0.74-0.68 1.42-1.43l84.53-92v41.31a24.28 24.28 0 0 0 22.86 24.24c106.36 6.23 135.4 67.14 144.14 127.22-14.88-18.58-31.06-32.95-49-43.56C832 761 800 753.71 764.44 755.61a24.28 24.28 0 0 0-23 24.24v44.28l-81-89.86q-0.47-0.53-1-1c-1.69-1.73-5.17-5.16-6.18-6.85zM538.13 855.62h-52.7c-20.49 0-24.89 4.39-24.89 24.88v54.16c0 20.5 4.39 24.89 24.89 24.89h52.7c20.5 0 24.89-4.39 24.89-24.89v-54.15c-1.46-20.51-5.85-24.89-24.89-24.89zM362.48 855.62h-52.7c-20.49 0-24.89 4.39-24.89 24.88v54.16c0 20.5 4.39 24.89 24.89 24.89h52.7c20.49 0 24.88-4.39 24.88-24.89v-54.15c-1.47-20.51-5.86-24.89-24.88-24.89zM362.48 667.9h-52.7c-20.49 0-24.89 4.39-24.89 24.88v52.7c0 20.49 4.39 24.88 24.89 24.88h52.7c20.49 0 24.88-4.39 24.88-24.88v-54.15c-1.47-19.04-5.86-23.43-24.88-23.43zM485.43 490.78c-20.49 0-24.88 4.39-24.88 24.88v54.16c0 20.5 4.39 24.89 24.88 24.89h52.7c20.49 0 24.88-4.39 24.88-24.89v-54.16c-1.46-20.49-5.85-24.88-24.88-24.88zM538.13 667.9h-52.7c-20.49 0-24.89 4.39-24.89 24.88v52.7c0 20.49 4.39 24.88 24.89 24.88h52.7c20.5 0 24.89-4.39 24.89-24.88v-54.15c-1.46-19.04-5.85-23.43-24.89-23.43zM362.48 490.78h-52.7c-20.49 0-24.89 4.39-24.89 24.88v54.16c0 20.49 4.39 24.88 24.89 24.88h52.7c20.49 0 24.88-4.39 24.88-24.88v-54.16c-1.47-21.95-5.86-24.88-24.88-24.88z" p-id="9187" fill="#09d8f2"></path><path d="M914.29 427.93A28.7 28.7 0 1 0 948.68 382l-419-313.65a28.7 28.7 0 0 0-34.37 0L75.53 382a28.7 28.7 0 1 0 34.35 46l40.54-30.3v533.17a28.69 28.69 0 0 0 57.38 0v-576.1l304.65-227.63z" p-id="9188" 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/home.svg

@@ -7,4 +7,4 @@
        <rect id="矩形" x="0" y="0" width="20" height="20"></rect>
        <path d="M15.4667218,18.9453146 C15.4288032,18.9453146 15.3983216,18.9442715 15.3764745,18.9431705 L3.82986779,18.9431705 C3.05639166,18.9431705 2.61116286,18.6173957 2.37387749,18.3441041 C1.85389337,17.7452309 1.89565591,16.9332761 1.91910628,16.7079863 L1.91910628,9.76308164 L3.15537002,9.76308164 L3.15537002,16.7926511 L3.1495364,16.8290243 C3.13483645,16.95267 3.13344566,17.3366071 3.30965187,17.5361865 C3.34693295,17.5784126 3.46037946,17.7069068 3.82988711,17.7069068 L15.4258092,17.7069068 L15.4402966,17.7084907 C15.4818853,17.7099588 15.871347,17.7168741 16.1163011,17.4852485 C16.2796038,17.3308315 16.3623948,17.0755044 16.3623948,16.7263371 L16.3623948,9.75775026 L17.5986586,9.75775026 L17.5986586,16.7263371 C17.5986586,17.6124099 17.2461882,18.1243003 16.9504894,18.3977078 C16.4186255,18.8895089 15.7448231,18.9453146 15.4667218,18.9453146 Z M2.53721884,10.3432177 L0.637448489,10.3432177 C0.380711281,10.3432177 0.150727593,10.184551 0.0595724588,9.94454198 C-0.0315633585,9.70453297 0.0351176168,9.43319239 0.227124828,9.26278116 L9.34880022,1.16737852 C9.58098601,0.961308808 9.9299794,0.95941578 10.1644059,1.16299365 L19.412837,9.19467076 C19.6051339,9.36168226 19.6753112,9.62954584 19.5896034,9.86938101 C19.5038955,10.1092162 19.2798613,10.2719394 19.025249,10.2792604 L16.9982014,10.3374421 C16.9921553,10.3376352 16.9861478,10.3377125 16.9801211,10.3377125 C16.6469673,10.3377125 16.3722077,10.0725146 16.3625687,9.73731327 C16.3527752,9.39606585 16.6214694,9.11149339 16.9627168,9.10169986 L17.4056662,9.08898953 L9.76354739,2.45220424 L2.26518286,9.10695398 L2.53721884,9.10695398 C2.87860148,9.10695398 3.1553507,9.38370321 3.1553507,9.72508585 C3.1553507,10.0664685 2.87860148,10.3432177 2.53721884,10.3432177 Z M7.68801511,18.3308916 C7.39996566,18.3308916 7.16646635,18.0973923 7.16646635,17.8093428 L7.16646635,13.4467612 C7.16646635,13.3527666 7.19030306,12.9657774 7.55320441,12.5969265 C7.99362337,12.1493025 8.7403653,11.9223322 9.77270347,11.9223322 C10.7894918,11.9223322 11.5281207,12.1524124 11.9680761,12.6061985 C12.3394381,12.9892084 12.3633714,13.3925009 12.3626528,13.4994763 L12.3626528,17.7925953 C12.3626528,18.0806447 12.129138,18.3141441 11.8410886,18.3141441 C11.5530391,18.3141441 11.3195398,18.0806447 11.3195398,17.7925953 L11.3195398,13.505619 C11.3160822,13.4830765 11.2942737,13.3877103 11.1646785,13.2826859 C11.018471,13.1641977 10.6431877,12.9654297 9.77268415,12.9654297 C8.76296575,12.9654297 8.4041402,13.2193467 8.29673978,13.3284856 C8.24400541,13.3820892 8.22186856,13.4276957 8.21257727,13.4564968 C8.21116715,13.4608431 8.21020132,13.464436 8.20954456,13.4671016 L8.20954456,17.8093428 C8.20956387,18.0973923 7.97606456,18.3308916 7.68801511,18.3308916 Z" id="形状" fill="#00A79D" fill-rule="nonzero"></path>
    </g>
</svg>
</svg>

 src/icons/svg/ph.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="1677640880885" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17507" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M821.555 0H1024v1023.949H821.555z m-274.79 551.885h201.984v472.064H546.765zM269.67 267.725h208.948v756.224H269.67zM0 749.158h199.22v274.79H0z" fill="#09d8f2" p-id="17508"></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/tree.svg

@@ -1 +1 @@
<svg t="1556618636358" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10538" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512 307.2c-112.9216 0-204.8 91.8784-204.8 204.8 0 112.9216 91.8784 204.8 204.8 204.8 112.9216 0 204.8-91.8784 204.8-204.8C716.8 399.0784 624.9216 307.2 512 307.2zM512 665.6c-84.8256 0-153.6-68.7744-153.6-153.6 0-84.8256 68.7744-153.6 153.6-153.6s153.6 68.7744 153.6 153.6C665.6 596.8256 596.8256 665.6 512 665.6zM985.6 384l-71.872 0c-34.2144 0-51.3408-41.3568-27.1488-65.5488l50.8288-50.8288c15.0016-15.0016 15.0016-39.3088 0-54.3104l-126.7072-126.72c-7.5008-7.5008-17.3312-11.2512-27.1488-11.2512s-19.6608 3.7504-27.1488 11.2512l-50.8288 50.8288c-7.8208 7.8208-17.4464 11.328-26.88 11.328-19.7376 0-38.6816-15.3344-38.6816-38.4768L640.0128 38.4c0-21.2096-17.1904-38.4-38.4-38.4L422.4 0c-21.2096 0-38.4 17.1904-38.4 38.4l0 71.872c0 23.1424-18.944 38.4768-38.6816 38.4768-9.4336 0-19.0464-3.4944-26.88-11.328l-50.8288-50.8288c-7.5008-7.5008-17.3312-11.2512-27.1488-11.2512s-19.6608 3.7504-27.1488 11.2512l-126.7072 126.72c-15.0016 15.0016-15.0016 39.3088 0 54.3104l50.8288 50.8288C161.6128 342.6432 144.4864 384 110.272 384L38.4 384c-21.2096 0-38.4 17.1904-38.4 38.4l0 179.2c0 21.2096 17.1904 38.4 38.4 38.4l71.872 0c34.2144 0 51.3408 41.3568 27.1488 65.5488l-50.8288 50.8288c-15.0016 15.0016-15.0016 39.3088 0 54.3104l126.7072 126.72c7.5008 7.5008 17.3312 11.2512 27.1488 11.2512s19.6608-3.7504 27.1488-11.2512l50.8288-50.8288c7.8208-7.8208 17.4464-11.328 26.88-11.328 19.7376 0 38.6816 15.3344 38.6816 38.4768L383.9872 985.6c0 21.2096 17.1904 38.4 38.4 38.4l179.2 0c21.2096 0 38.4-17.1904 38.4-38.4l0-71.872c0-23.1424 18.944-38.4768 38.6816-38.4768 9.4336 0 19.0464 3.4944 26.88 11.328l50.8288 50.8288c7.5008 7.5008 17.3312 11.2512 27.1488 11.2512s19.6608-3.7504 27.1488-11.2512l126.7072-126.72c15.0016-15.0016 15.0016-39.3088 0-54.3104l-50.8288-50.8288C862.3872 681.3568 879.5136 640 913.728 640L985.6 640c21.2096 0 38.4-17.1904 38.4-38.4L1024 422.4C1024 401.1904 1006.8096 384 985.6 384zM972.8 588.8l-59.072 0c-36.3648 0-68.864 21.7088-82.7776 55.3088s-6.2976 71.9232 19.4176 97.6384l41.7664 41.7664-108.608 108.608-41.7664-41.7664c-16.9728-16.9728-39.3728-26.3168-63.0784-26.3168-49.5616 0-89.8816 40.2304-89.8816 89.6768L588.8 972.8 435.2 972.8l0-59.072c0-49.4464-40.32-89.6768-89.8816-89.6768-23.7056 0-46.1056 9.344-63.0784 26.3168l-41.7664 41.7664-108.608-108.608 41.7664-41.7664c25.7152-25.7152 33.344-64.0512 19.4176-97.6512S146.6496 588.8 110.272 588.8L51.2 588.8 51.2 435.2l59.072 0c36.3648 0 68.864-21.7088 82.7776-55.3088 13.9136-33.6 6.2976-71.9232-19.4176-97.6512l-41.7664-41.7664 108.608-108.608 41.7664 41.7664c16.9728 16.9728 39.3728 26.3168 63.0784 26.3168 49.5616 0 89.8816-40.2304 89.8816-89.6768L435.2 51.2l153.6 0 0 59.072c0 49.4464 40.32 89.6768 89.8816 89.6768 23.7056 0 46.1056-9.344 63.0784-26.3168l41.7664-41.7664 108.608 108.608-41.7664 41.7664c-25.7152 25.7152-33.344 64.0512-19.4176 97.6512C844.864 413.4912 877.3504 435.2 913.728 435.2L972.8 435.2 972.8 588.8z" p-id="10539"></path></svg>
<svg t="1556618636358" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10538" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512 307.2c-112.9216 0-204.8 91.8784-204.8 204.8 0 112.9216 91.8784 204.8 204.8 204.8 112.9216 0 204.8-91.8784 204.8-204.8C716.8 399.0784 624.9216 307.2 512 307.2zM512 665.6c-84.8256 0-153.6-68.7744-153.6-153.6 0-84.8256 68.7744-153.6 153.6-153.6s153.6 68.7744 153.6 153.6C665.6 596.8256 596.8256 665.6 512 665.6zM985.6 384l-71.872 0c-34.2144 0-51.3408-41.3568-27.1488-65.5488l50.8288-50.8288c15.0016-15.0016 15.0016-39.3088 0-54.3104l-126.7072-126.72c-7.5008-7.5008-17.3312-11.2512-27.1488-11.2512s-19.6608 3.7504-27.1488 11.2512l-50.8288 50.8288c-7.8208 7.8208-17.4464 11.328-26.88 11.328-19.7376 0-38.6816-15.3344-38.6816-38.4768L640.0128 38.4c0-21.2096-17.1904-38.4-38.4-38.4L422.4 0c-21.2096 0-38.4 17.1904-38.4 38.4l0 71.872c0 23.1424-18.944 38.4768-38.6816 38.4768-9.4336 0-19.0464-3.4944-26.88-11.328l-50.8288-50.8288c-7.5008-7.5008-17.3312-11.2512-27.1488-11.2512s-19.6608 3.7504-27.1488 11.2512l-126.7072 126.72c-15.0016 15.0016-15.0016 39.3088 0 54.3104l50.8288 50.8288C161.6128 342.6432 144.4864 384 110.272 384L38.4 384c-21.2096 0-38.4 17.1904-38.4 38.4l0 179.2c0 21.2096 17.1904 38.4 38.4 38.4l71.872 0c34.2144 0 51.3408 41.3568 27.1488 65.5488l-50.8288 50.8288c-15.0016 15.0016-15.0016 39.3088 0 54.3104l126.7072 126.72c7.5008 7.5008 17.3312 11.2512 27.1488 11.2512s19.6608-3.7504 27.1488-11.2512l50.8288-50.8288c7.8208-7.8208 17.4464-11.328 26.88-11.328 19.7376 0 38.6816 15.3344 38.6816 38.4768L383.9872 985.6c0 21.2096 17.1904 38.4 38.4 38.4l179.2 0c21.2096 0 38.4-17.1904 38.4-38.4l0-71.872c0-23.1424 18.944-38.4768 38.6816-38.4768 9.4336 0 19.0464 3.4944 26.88 11.328l50.8288 50.8288c7.5008 7.5008 17.3312 11.2512 27.1488 11.2512s19.6608-3.7504 27.1488-11.2512l126.7072-126.72c15.0016-15.0016 15.0016-39.3088 0-54.3104l-50.8288-50.8288C862.3872 681.3568 879.5136 640 913.728 640L985.6 640c21.2096 0 38.4-17.1904 38.4-38.4L1024 422.4C1024 401.1904 1006.8096 384 985.6 384zM972.8 588.8l-59.072 0c-36.3648 0-68.864 21.7088-82.7776 55.3088s-6.2976 71.9232 19.4176 97.6384l41.7664 41.7664-108.608 108.608-41.7664-41.7664c-16.9728-16.9728-39.3728-26.3168-63.0784-26.3168-49.5616 0-89.8816 40.2304-89.8816 89.6768L588.8 972.8 435.2 972.8l0-59.072c0-49.4464-40.32-89.6768-89.8816-89.6768-23.7056 0-46.1056 9.344-63.0784 26.3168l-41.7664 41.7664-108.608-108.608 41.7664-41.7664c25.7152-25.7152 33.344-64.0512 19.4176-97.6512S146.6496 588.8 110.272 588.8L51.2 588.8 51.2 435.2l59.072 0c36.3648 0 68.864-21.7088 82.7776-55.3088 13.9136-33.6 6.2976-71.9232-19.4176-97.6512l-41.7664-41.7664 108.608-108.608 41.7664 41.7664c16.9728 16.9728 39.3728 26.3168 63.0784 26.3168 49.5616 0 89.8816-40.2304 89.8816-89.6768L435.2 51.2l153.6 0 0 59.072c0 49.4464 40.32 89.6768 89.8816 89.6768 23.7056 0 46.1056-9.344 63.0784-26.3168l41.7664-41.7664 108.608 108.608-41.7664 41.7664c-25.7152 25.7152-33.344 64.0512-19.4176 97.6512C844.864 413.4912 877.3504 435.2 913.728 435.2L972.8 435.2 972.8 588.8z" p-id="10539"></path></svg>

 src/icons/svg/yqjh.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="1677637966664" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5361" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M831.34464 205.38368c93.00992 98.16576 135.53664 230.12352 120.3968 364.21632-12.75904 113.03424-74.56768 216.3712-161.18784 288.36864-183.59808 152.61696-460.8512 120.09984-615.65952-55.76192C38.88128 647.7056 35.62496 414.49984 153.93792 249.6768c131.89632-183.74656 390.61504-230.85056 583.65952-118.66112 28.60544 16.62464 54.36416-27.63264 25.84064-44.2112C542.07488-41.84064 260.87936 19.46112 109.72672 223.83616c-140.20096 189.57312-116.15232 459.25888 42.39872 629.42208 160.21504 171.94496 429.34784 201.3952 626.21696 76.416 208.61952-132.43904 282.14272-403.5584 181.41184-626.432-22.4256-49.60768-54.86592-94.64832-92.2112-134.06208-22.74304-24.0128-58.89024 12.25728-36.1984 36.20352z" fill="#09d8f2" p-id="5362"></path><path d="M390.71744 423.3984c41.85088-1.52576 58.12736 20.92544 48.82432 67.42528-6.21056 34.10944-26.37312 81.37728-60.45184 141.824l-2.32448 4.64896c43.37664 52.7104 102.2976 79.04768 176.70144 79.04768h204.60032c13.952 0 21.68832 6.97344 23.24992 20.92544-1.5616 15.47264-9.29792 23.24992-23.24992 23.24992h-202.27584c-86.82496 1.52576-155.01312-25.5744-204.60032-81.37728-27.89888 34.10944-55.79776 61.21472-83.70176 81.37728-12.42624 7.74144-23.24992 6.17472-32.54784-4.64896-7.77728-12.42624-6.21056-24.04864 4.64896-34.87744 26.3424-17.03936 52.67456-44.93824 79.04768-83.70176a574.67904 574.67904 0 0 1-44.17536-111.60064c-4.64896-17.03936 0-28.66688 13.952-34.87744 15.47264-3.09248 26.3424 3.88608 32.54784 20.92544l20.92544 62.77632c1.52576 6.21056 3.09248 10.85952 4.64896 13.952 20.12672-32.54784 33.31584-64.30208 39.5264-95.32416 6.17472-18.60096 0.76288-27.10016-16.27648-25.5744H300.04224c-18.60096 0-31.0272-5.41696-37.20192-16.27648-4.64896-10.82368-1.5616-23.24992 9.29792-37.20192 9.29792-12.3904 21.68832-27.89888 37.20192-46.49984 13.952-18.60096 24.0128-31.74912 30.22336-39.5264 4.64896-6.17472 6.17472-11.62752 4.64896-16.27648-3.1232-3.09248-9.29792-4.64896-18.60096-4.64896H267.4944c-15.50848 0-23.24992-7.74144-23.24992-23.24992 0-13.952 7.74144-20.92544 23.24992-20.92544H383.744c34.0736 4.64896 40.28928 24.81152 18.60096 60.45184-7.77728 10.85952-18.60096 24.04864-32.54784 39.5264-15.50848 18.60096-25.5744 32.54784-30.22336 41.85088-4.64896 6.21056-6.21056 10.85952-4.64896 13.952 1.52576 3.1232 5.41696 4.64896 11.62752 4.64896h44.16512z m244.12672-2.32448h90.6752c15.47264 1.5616 24.0128 9.29792 25.5744 23.24992-1.5616 15.50848-10.10176 24.04864-25.5744 25.5744h-90.6752v148.80256h106.95168c12.3904 0 19.36384 7.77728 20.92544 23.24992-1.5616 15.50848-8.53504 23.24992-20.92544 23.24992h-202.27584c-48.06144 0-71.31136-24.0128-69.75488-72.07424V397.824c1.52576-15.47264 10.06592-24.0128 25.5744-25.5744 13.952 1.5616 21.69344 10.10176 23.25504 25.5744v195.3024c1.52576 13.952 7.74144 21.72416 18.60096 23.24992h51.1488V314.12736c-17.0752 3.1232-48.06144 6.21056-93.0048 9.29792h-16.27648c-17.0752 0-26.37312-7.74144-27.89888-23.24992 0-13.952 7.74144-21.68832 23.24992-23.24992 85.22752-1.52576 165.84192-13.14816 241.80224-34.87744 15.47264-3.08736 26.3424 1.5616 32.54784 13.952 3.09248 17.0752-2.32448 27.89888-16.27648 32.54784-43.41248 10.85952-75.96032 17.83296-97.64864 20.92544v111.60064z" fill="#09d8f2" p-id="5363"></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', '/ckgl', '/cgdd', '/back'] // no redirect whitelist

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

 src/router/index.js

@@ -38,30 +38,13 @@
    path: '/zhkb',
    component: () => import('@/views/kb/zhkb'),
    hidden: true
  },
  {
    path: '/ckgl',
    component: () => import('@/views/kb/ckgl'),
    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'),
  }, {
    path: '/ckgl',
    component: () => import('@/views/kb/ckgl'),
    hidden: true
  },


 src/utils/myEcharts.js

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

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

// ç³»ç»Ÿé¦–页图
export function barTop(data, colorArr) {
  var salvProName = ['x']
@@ -372,6 +375,7 @@
  // const myColor = ['#7af5f5', '#00FFFF', '#00FFFF', '#00FFFF', '#00FFFF']
  const myColor = ['rgba(122,245,245,1)', 'rgba(122,245,245,0.95)', 'rgba(122,245,245,0.9)', 'rgba(122,245,245,0.85)', 'rgba(122,245,245,0.8)']
  const option = {
    animation: false,
    backgroundColor: 'transparent',
    title: {
      show: false,
@@ -390,12 +394,13 @@
      }
    },
    grid: {
      left: '10%',
      right: '5%',
      left: '5%',
      right: '10%',
      bottom: '0%',
      top: '10%',
      containLabel: true
    },
    // animation: false, // å–消动画
    xAxis: {
      show: false
    },
@@ -418,7 +423,7 @@
          color: function(value, index) {
            return value === '0' ? 'transparent' : '#fff'
          },
          fontSize: 18,
          fontSize: 20,
          // formatter: function(value, index) {
          //   return [
          //     '{lg|' + (index + 1) + '、   }' + '{title|' + value + '} '
@@ -491,7 +496,7 @@
            show: true,
            position: 'right',
            formatter: '{c}',
            fontSize: 14,
            fontSize: 20,
            color: '#fff'
            // formatter: '{c}%',
          }
@@ -788,3 +793,1063 @@
  }
  return option
}

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

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

  const option = {
    animation: false,
    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(dataX, dataY) {
  return {
    animation: false,
    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: 18,
          margin: 20,
          textStyle: {
            color: colorX
          }
        },
        axisLine: {
          lineStyle: {
            color: '#032c58'
          }
        },
        splitLine: {
          show: false,
          lineStyle: {
            color: '#032c58'
          }
        },
        axisTick: {
          show: false
        },
        data: dataX
      }],
    yAxis: [
      {
        // max: 800,
        boundaryGap: false,
        splitNumber: 4,
        type: 'value',
        axisLabel: {
          textStyle: {
            fontSize: 18,
            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',
            fontSize: 16
          }
        },
        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: dataY
        // data: [600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100)]
      }
      //   {
      //   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(resValueArr) {
  // let data = resValueArr.map(({ eqp_name, cont }) => ({ name: eqp_name, value: cont }))//替换数组对象中的键名

  const data = [
    {
      name: '装配一线',
      value: resValueArr.find(i => i.eqp_name === '装配一线') ? resValueArr.find(i => i.eqp_name === '装配一线').cont : 0
    },
    {
      name: '装配二线',
      value: resValueArr.find(i => i.eqp_name === '装配二线') ? resValueArr.find(i => i.eqp_name === '装配二线').cont : 0
    },
    {
      name: '装配三线',
      value: resValueArr.find(i => i.eqp_name === '装配三线') ? resValueArr.find(i => i.eqp_name === '装配三线').cont : 0
    },
    {
      name: '装配四线',
      value: resValueArr.find(i => i.eqp_name === '装配四线') ? resValueArr.find(i => i.eqp_name === '装配四线').cont : 0
    }
  ]
  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 = {
    animation: false,
    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: 20
          }
        }
      }
    }, {
      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: 20,
        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],
        symbolSize: function(params) {
          return params === 0 ? [0, 0] : [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(resValueArr) {
  const bgColor = 'transparent'
  const title = '总不良数'
  const color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0']
  const echartData = resValueArr.map(({ eqp_name, cont }) => ({ name: eqp_name, value: cont }))// æ›¿æ¢æ•°ç»„对象中的键名
  const formatNumber = function(num) {
    const reg = /(?=(\B)(\d{3})+$)/g
    return num.toString().replace(reg, ',')
  }
  const total = echartData.reduce((a, b) => {
    return a + b.value * 1
  }, 0)

  const option = {
    animation: false,
    backgroundColor: bgColor,
    color: color,
    // tooltip: {
    //     trigger: 'item'
    // },
    title: [{
      text: '{name|' + title + '}\n{val|' + formatNumber(total) + '}',
      top: 'center',
      left: 'center',
      textStyle: {
        rich: {
          name: {
            fontSize: 22,
            fontWeight: 'normal',
            color: '#fff',
            padding: [10, 0]
          },
          val: {
            fontSize: 22,
            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: 35,
            lineStyle: {
              color: '#fff'
            }
          }
        },
        label: {
          normal: {
            formatter: params => {
              return (
                '{icon|●}{name|' + params.name + '}{value|' +
                formatNumber(params.value) + '}'
              )
            },
            padding: [0, -50, 25, -50],
            rich: {
              icon: {
                fontSize: 18,
                color: 'red'
              },
              name: {
                fontSize: 18,
                padding: [0, 10, 0, 4],
                color: '#fff'
              },
              value: {
                fontSize: 18,
                fontWeight: 'bold',
                color: '#fff'
              }
            }
          }
        }
      }]
  }
  return option
}

// è½¦é—´ç”Ÿäº§  ç”Ÿäº§ä¿¡æ¯  ç”Ÿäº§è¿›åº¦ è¿›åº¦æ¡
export function progress(param1, param2) {
//   param1  æŠ¥å·¥æ•°é‡
  //  param2   ä»»åŠ¡æ•°é‡

  // æ‹¿åˆ°æ•°æ®ä¹‹åŽéœ€è¦è®¡ç®—出相对长度  param2的相对长度为100
  let relativeValue = ''// ç›¸å¯¹å€¼  ç»¿è‰²èƒŒæ™¯

  relativeValue = (param1 / param2) * 100
  // ç™¾åˆ†æ¯”数值的位置
  var position = 'right'
  // if (param1 >= 50) {
  //     position = 'inside';
  // } else if (param1 < 50) {
  //     position = 'right';
  // }

  var option = {
    animation: false,
    // animation: false, // å–消动画
    // animationDuration: 5000,
    grid: {
      top: 'center',
      left: '0%',
      right: '0%',
      // height: '%',
      // containLabel: false
      containLabel: true

    },
    xAxis: {
      type: 'value',
      axisLabel: {
        show: false
      },
      max: 100,
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      splitLine: {
        show: false
      }
    },
    yAxis: [{
      type: 'category',
      data: [],
      axisLabel: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      splitLine: {
        show: false
      },
      z: 10
    }, {
      type: 'category',
      axisLabel: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      splitLine: {
        show: false
      },
      data: []
    }],
    series: [{
      name: '',
      type: 'bar',
      barWidth: '100%',
      // barMaxWidth: '100%',
      label: {
        normal: {
          show: true,
          // position: ['24', '38%'],
          position: (param1.toString() + param2.toString()).length <= 6 ? ['24', '38%'] : 'insideLeft',
          // formatter: '{c} %',
          formatter: param1 + '/' + param2,
          textStyle: {
            color: '#FFFFFF',
            fontWeight: 'bold',
            fontFamily: 'Microsoft YaHei',
            fontSize: 18
          }
        }
      },
      itemStyle: {
        normal: {
          barBorderRadius: 5,
          shadowBlur: 10,
          shadowColor: '#111',
          color: '#2FD04F'
        }
      },
      // data: [param1],
      data: [relativeValue],
      z: 10
    }, {
      type: 'bar',
      barWidth: '100%',
      yAxisIndex: 1,
      silent: true,
      // barMaxWidth: '100%',
      itemStyle: {
        normal: {
          barBorderRadius: 5,
          color: '#42475B'
        }
      },
      // data: [param2]
      data: [100]
    }]
  }

  return option
}

// é‡‡è´­è®¢å•
export function cgddchart(data1, data2, data3) {
  // å¾—到最大值  5的倍数

  let max = Math.max(Math.max(data1, data2), data3) + 5
  if (max % 5 !== 0) {
    max = 5 - max % 5 + max
  }
  const option = {
    backgroundColor: 'transparent',
    tooltip: {
      formatter: '{a} <br/>{c} {b}'
    },
    series: [
      {
        show: false,
        name: ' ',
        type: 'gauge',
        color: ['#f00'],
        min: 0,
        max: max,
        splitNumber: 5,
        radius: '70%',
        center: ['17%', '48%'],
        axisLine: { // åæ ‡è½´çº¿
          lineStyle: { // å±žæ€§lineStyle控制线条样式
            width: 10,
            color: [
              [0.4, '#09d8f2'],
              [1, '#00FFFFF']
            ]
          },
          backgroundColor: 'none'
        },
        tooltip: {
          show: false
        },
        axisTick: { // åæ ‡è½´å°æ ‡è®°
          length: 10, // å±žæ€§length控制线长
          lineStyle: { // å±žæ€§lineStyle控制线条样式
            color: 'auto'
          }
        },
        splitLine: { // åˆ†éš”线
          length: 10, // å±žæ€§length控制线长
          lineStyle: { // å±žæ€§lineStyle（详见lineStyle）控制线条样式
            color: colorY
          }
        },
        axisLabel: {
          borderRadius: 1,
          // color: 'rgba(255,255,255,0.7)',
          color: '#00FFFF',
          padding: 1,
          fontSize: 18
        },
        title: {
          // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
          // fontWeight: 'bolder',
          fontSize: 22,
          fontFamily: 'Microsoft YaHei',
          fontColor: '#FFF',
          color: '#FFF',
          paddingTop: 20,
          offsetCenter: [0, '120%']
          // fontStyle: 'italic'
        },
        itemStyle: {
          // color: '#1092ff'
          color: '#09d8f2'
        },
        detail: {
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          fontFamily: 'digital',
          fontSize: 26,
          color: '#fff',
          rich: {},
          offsetCenter: [0, '90%'],

          formatter: function(value) {
            return value
          }
        },
        data: [{
          value: data1,
          name: '本月采购订单数'
        }]
      },
      {
        name: '本月采购订单数',
        type: 'gauge',
        color: ['#f00'],
        min: 0,
        max: max,
        splitNumber: 5,
        radius: '70%',
        center: ['17%', '48%'],
        axisLine: { // åæ ‡è½´çº¿
          lineStyle: { // å±žæ€§lineStyle控制线条样式
            width: 10,
            color: [
              [0.4, '#09d8f2'],
              [1, '#00FFFFF']
            ]
          },
          backgroundColor: 'none'
        },
        tooltip: {
          show: false
        },
        axisTick: { // åæ ‡è½´å°æ ‡è®°
          length: 10, // å±žæ€§length控制线长
          lineStyle: { // å±žæ€§lineStyle控制线条样式
            color: 'auto'
          }
        },
        splitLine: { // åˆ†éš”线
          length: 10, // å±žæ€§length控制线长
          lineStyle: { // å±žæ€§lineStyle（详见lineStyle）控制线条样式
            color: colorY
          }
        },
        axisLabel: {
          borderRadius: 1,
          // color: 'rgba(255,255,255,0.7)',
          color: '#00FFFF',
          padding: 1,
          fontSize: 18
        },
        title: {
          // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
          // fontWeight: 'bolder',
          fontSize: 22,
          fontFamily: 'Microsoft YaHei',
          fontColor: '#FFF',
          color: '#FFF',
          paddingTop: 20,
          offsetCenter: [0, '120%']
          // fontStyle: 'italic'
        },
        itemStyle: {
          // color: '#1092ff'
          color: '#09d8f2'
        },
        detail: {
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          fontFamily: 'digital',
          fontSize: 26,
          color: '#fff',
          rich: {},
          offsetCenter: [0, '90%'],

          formatter: function(value) {
            return value
          }
        },
        data: [{
          value: data1,
          name: '本月采购订单数'
        }]
      },
      {
        name: '本月到货单数',
        type: 'gauge',
        color: ['#f00'],
        min: 0,
        max: max,
        splitNumber: 5,
        radius: '70%',
        center: ['50%', '48%'],
        axisLine: { // åæ ‡è½´çº¿
          lineStyle: { // å±žæ€§lineStyle控制线条样式
            width: 10,
            color: [
              [0.4, '#09d8f2'],
              [1, '#00FFFFF']
            ]
          },
          backgroundColor: 'none'
        },
        tooltip: {
          show: false
        },
        axisTick: { // åæ ‡è½´å°æ ‡è®°
          length: 10, // å±žæ€§length控制线长
          lineStyle: { // å±žæ€§lineStyle控制线条样式
            color: 'auto'
          }
        },
        splitLine: { // åˆ†éš”线
          length: 10, // å±žæ€§length控制线长
          lineStyle: { // å±žæ€§lineStyle（详见lineStyle）控制线条样式
            color: colorY
          }
        },
        axisLabel: {
          borderRadius: 1,
          // color: 'rgba(255,255,255,0.7)',
          color: '#00FFFF',
          padding: 1,
          fontSize: 18
        },
        title: {
          // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
          // fontWeight: 'bolder',
          fontSize: 22,
          fontColor: '#FFF',
          color: '#FFF',
          fontFamily: 'Microsoft YaHei',
          paddingTop: 20,
          offsetCenter: [0, '120%']
          // fontStyle: 'italic'
        },
        itemStyle: {
          // color: '#1092ff'
          color: '#09d8f2'
        },
        detail: {
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          // borderWidth: 1,
          textBorderColor: '#000',
          textBorderWidth: 1,
          textShadowBlur: 1,
          textShadowColor: colorY,
          textShadowOffsetX: 0,
          textShadowOffsetY: 0,
          paddingTop: 10,
          fontFamily: 'digital',
          fontSize: 20,
          width: 30,
          color: '#fff',
          rich: {},
          offsetCenter: [0, '90%'],
          formatter: function(value) {
            // console.info(value)
            // return (value * 10 + '%')
            return value
          }
        },
        data: [{
          value: data2,
          name: '本月到货单数'
        }]
      },
      {
        name: '本月采购入库单数',
        type: 'gauge',
        color: ['#f00'],
        min: 0,
        max: max,
        splitNumber: 5,
        radius: '70%',
        center: ['83%', '48%'],
        axisLine: { // åæ ‡è½´çº¿
          lineStyle: { // å±žæ€§lineStyle控制线条样式
            width: 10,
            color: [
              [0.4, '#09d8f2'],
              [1, '#00FFFFF']
            ]
          },
          backgroundColor: 'none'
        },
        tooltip: {
          show: false
        },
        axisTick: { // åæ ‡è½´å°æ ‡è®°
          length: 10, // å±žæ€§length控制线长
          lineStyle: { // å±žæ€§lineStyle控制线条样式
            color: 'auto'
          }
        },
        splitLine: { // åˆ†éš”线
          length: 10, // å±žæ€§length控制线长
          lineStyle: { // å±žæ€§lineStyle（详见lineStyle）控制线条样式
            color: colorY
          }
        },
        axisLabel: {
          borderRadius: 1,
          // color: 'rgba(255,255,255,0.7)',
          color: '#00FFFF',
          padding: 1,
          fontSize: 18
        },
        title: {
          // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
          // fontWeight: 'bolder',
          fontSize: 22,
          fontColor: '#FFF',
          color: '#FFF',
          fontFamily: 'Microsoft YaHei',
          paddingTop: 20,
          offsetCenter: [0, '120%']
          // fontStyle: 'italic'
        },
        itemStyle: {
          // color: '#1092ff'
          color: '#09d8f2'
        },
        detail: {
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          // borderWidth: 1,
          textBorderColor: '#000',
          textBorderWidth: 1,
          textShadowBlur: 1,
          textShadowColor: colorY,
          textShadowOffsetX: 0,
          textShadowOffsetY: 0,
          paddingTop: 10,
          fontFamily: 'digital',
          fontSize: 20,
          width: 30,
          color: '#fff',
          rich: {},
          offsetCenter: [0, '90%'],
          formatter: function(value) {
            return value
          }
        },
        data: [{
          value: data3,
          name: `本月采购入库单数`
        }]
      }

    ]
  }
  return option
}

 src/views/kb/bzcj.vue

ÎļþÒÑɾ³ý

 src/views/kb/cgdd.vue

@@ -1,69 +1,55 @@
<template>
  <div>
    <div class="kb_dashboard">

      <!--    æ˜Ÿç©ºèƒŒæ™¯-->
      <div ref="starsRef" class="stars">
        <div v-for="(item, index) in starsCount" :key="index" class="star" />
      </div>

      <div class="kb_header">
        <div class="flex_c_c" style="letter-spacing: 3px;margin-left: 1px;">
        <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"
        style="top:100px"
        :speed="180"
      />
      <div class="kb_content">
        <div class="kb_left">
          <!-- 1-->
          <div class="kb_left_top kb_pd10">
            <div class="kb_left_top_block kb_pd10">
              <div class="content01">
                <div class="pic01" />
                <div class="number">{{ purchaseLeftTopData.ThisMonthPurchaseArrivalOrderCont }}</div>
                <div class="text">本月采购订单数</div>
      <div style="display: flex;justify-content: space-between;padding:0 20px 20px 20px;height: 980px">
        <div style="width: 1250px;" class="flex_c_b">
          <div style="height: 380px;">
            <div>
              <div class="smallTitle">
                <svg-icon icon-class="cggz" class="svg_class" />
                é‡‡è´­è·Ÿè¸ª
              </div>
              <div class="content01">
                <div class="pic01" />
                <div class="number">{{ purchaseLeftTopData.ThisMonthPurchaseOrderCont }}</div>
                <div class="text">本月到货单数</div>
              <div class="lineContent horn" style="height: 345px">
                <div id="cgddchart" class="flex_c_c" style="width: 100%;height:100%" />
              </div>
              <div class="content01">
                <div class="pic01" />
                <div class="number">{{ purchaseLeftTopData.ThisMonthWareHouseOrderCont }}</div>
                <div class="text">本月采购入库单数</div>
                <!--                <div id="pie01" ref="pie01" class="pie01" />-->
                <!--                <div class="text" style="margin-top: -10px">当月延期占比</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">{{ number1 }} å•</div></div>
              <div class="content_body">
          <div style="height: 560px; ">
            <div>
              <div class="smallTitle">
                <svg-icon icon-class="cggz" class="svg_class" />
                é‡‡è´­åˆ°è´§è·Ÿè¸ª
              </div>
              <div class="lineContent horn" style="height: 525px">
                <el-table
                  ref="tableData"
                  :data="tableData"
                  class="tableData"
                  style="width: 100%;"
                  :header-cell-style="headerCellStyle"
                  :cell-style="cellStyle"
                  height="588"
                  :header-cell-style="headerCellStyleCenter"
                  :cell-style="cellStyleCenter"
                  height="515"
                >
                  <!--                  <el-table-column-->
                  <!--                    prop="RowNum"-->
                  <!--                    label="序号"-->
                  <!--                    width="53"-->
                  <!--                  />-->

                  <el-table-column
                    prop="PurchaseOrder"
                    label="采购订单"
                    width="203"
                    width="225"
                  >
                    <template slot-scope="{row}">
                      <div class="ellipsis">{{ row.PurchaseOrder }}</div>
@@ -72,23 +58,24 @@
                  <el-table-column
                    prop="suppername"
                    label="供应商"
                    width="163"
                    width="183"
                  >
                    <template slot-scope="{row}">
                      <div v-if="row.suppername" class="ellipsis">{{ row.suppername }}</div>
                      <div v-else />
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="username"
                    label="采购员"
                    width="78"
                  >
                    <template slot-scope="{row}">
                      <div v-if="row.username">{{ row.username }}</div>
                      <div v-else>/</div>
                    </template>
                  </el-table-column>
                  <!--                  <el-table-column-->
                  <!--                    prop="username"-->
                  <!--                    label="采购员"-->
                  <!--                    width="78"-->
                  <!--                  >-->
                  <!--                    <template slot-scope="{row}">-->
                  <!--                      <div v-if="row.username">{{ row.username }}</div>-->
                  <!--                      <div v-else>/</div>-->
                  <!--                    </template>-->
                  <!--                  </el-table-column>-->

                  <!--                  <el-table-column-->
                  <!--                    prop="partcode"-->
                  <!--                    label="产品编码"-->
@@ -97,7 +84,7 @@
                  <el-table-column
                    prop="partname"
                    label="产品名称"
                    width="175"
                    width="215"
                  >
                    <template slot-scope="{row}">
                      <div v-if="row.partname" class="ellipsis">{{ row.partname }}</div>
@@ -117,32 +104,37 @@
                  <el-table-column
                    prop="quantity"
                    label="订单数量"
                    width="94"
                    width="114"
                  >
                    <template slot-scope="{row}">
                      <div v-if="row.quantity">{{ parseFloat(row.quantity) }}</div>
                      <div v-else>0</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="checktype"
                    label="检验状态"
                    width="94"
                  >
                    <template slot-scope="{row}">
                      <div v-if="row.checktype===null">未检验</div>
                      <div v-else>已检验</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="checkuser"
                    label="检验人员"
                    width="94"
                  />
                  <!--                  <el-table-column-->
                  <!--                    prop="checktype"-->
                  <!--                    label="检验状态"-->
                  <!--                    width="104"-->
                  <!--                  >-->
                  <!--                    <template slot-scope="{row}">-->
                  <!--                      <div v-if="row.checktype===null">未检验</div>-->
                  <!--                      <div v-else>已检验</div>-->
                  <!--                    </template>-->
                  <!--                  </el-table-column>-->
                  <!--                  <el-table-column-->
                  <!--                    prop="checkuser"-->
                  <!--                    label="检验人员"-->
                  <!--                    width="94"-->
                  <!--                  >-->
                  <!--                    <template slot-scope="{row}">-->
                  <!--                      <div v-if="row.checkuser===null">/</div>-->
                  <!--                      <div v-else>{{ row.checkuser }}</div>-->
                  <!--                    </template>-->
                  <!--                  </el-table-column>-->
                  <el-table-column
                    prop="quantity1"
                    label="已收数量"
                    width="94"
                    width="114"
                  >
                    <template slot-scope="{row}">
                      <div v-if="row.quantity1">{{ parseFloat(row.quantity1) }}</div>
@@ -151,17 +143,17 @@
                  </el-table-column>
                  <el-table-column
                    label="未收数量"
                    width="94"
                    width="114"
                  >
                    <template slot-scope="{row}">
                      <div v-if="row.quantity- row.quantity1">{{ parseFloat(row.quantity- row.quantity1) }}</div>
                      <div v-if="row.quantity- row.quantity1">{{ parseFloat(row.quantity - row.quantity1) }}</div>
                      <div v-else>0</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="acceptDate"
                    label="预计交期"
                    width="115"
                    width="135"
                  >
                    <template slot-scope="{row}">
                      <div v-if="row.acceptDate">{{ row.acceptDate.substring(0, 10) }}</div>
@@ -171,114 +163,113 @@
                  <el-table-column
                    prop="warning"
                    label="延期天数"
                    width="114"
                    width="144"
                  >
                    <template slot-scope="{row}">
                      <div v-if="parseFloat(row.warning)<0" style="color: red">{{ Math.abs(parseFloat(row.warning)) }}</div>
                      <div v-else-if="row.warning===null||row.warning===''||row.warning===0">0</div>
                      <div v-else-if="parseFloat(row.warning)>3">{{ row.warning }}</div>
                      <div v-else-if="parseFloat(row.warning)>0&&parseFloat(row.warning)<=3" style="color:yellow;">{{ row.warning }}</div>
                      <div v-if="parseFloat(row.warning)<0" style="color: red">{{
                        Math.abs(parseFloat(row.warning))
                      }}
                      </div>
                      <div v-else-if="row.warning===null||row.warning===''||row.warning>=0">0</div>
                      <!--                      <div v-else-if="parseFloat(row.warning)>3">{{ row.warning }}</div>-->
                      <!--                      <div v-else-if="parseFloat(row.warning)>0&&parseFloat(row.warning)<=3" style="color:yellow;">-->
                      <!--                        {{ row.warning }}-->
                      <!--                      </div>-->
                    </template>
                  </el-table-column>
                </el-table>
                <!--                <div id="cgddchart" class="flex_c_c" style="width: 100%;height:100%" />-->
              </div>
            </div>
          </div>
        </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">
                <el-table
                  ref="tableDataRank"
                  :data="tableDataRank"
                  style="width: 100%;"
                  :header-cell-style="headerCellStyle"
                  :cell-style="cellStyle"
                  :row-class-name="tableRowClassName"
                  height="865"
        <div style="width: 600px;">
          <div>
            <div class="smallTitle">
              <svg-icon icon-class="yqjh" class="svg_class" />
              ä¾›åº”商延期交货排行
            </div>
            <div class="lineContent horn" style="height: 925px">
              <el-table
                ref="tableDataRank"
                :data="tableDataRank"
                class="tableData"
                style="width: 100%;"
                :header-cell-style="headerCellStyleCenter"
                :cell-style="cellStyleCenter"
                :row-class-name="tableRowClassName"
                height="920"
              >
                <el-table-column
                  type="index"
                  label="序号"
                  width="80"
                >
                  <el-table-column
                    type="index"
                    label="序号"
                    width="70"
                  >
                    <template slot-scope="{row}">
                      <div>NO.{{ row.index }}</div>
                      <!--                      <div>NO.100</div>-->
                    </template>
                  </el-table-column>
                  <!--                  <el-table-column-->
                  <!--                    prop="cj"-->
                  <!--                    label="车间"-->
                  <!--                    width="100"-->
                  <!--                  />-->
                  <el-table-column
                    prop="suppercode"
                    label="供应商编码"
                    width="130"
                  >
                    <template slot-scope="{row}">
                      <div v-if="row.suppercode" class="ellipsis">{{ row.suppercode }}</div>
                      <div v-else />
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="suppername"
                    width="283"
                    label="供应商名称"
                  >
                    <template slot-scope="{row}">
                      <div class="ellipsis">{{ row.suppername }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="cont"
                    label="次数"
                    width="50"
                  />
                </el-table>
              </div>
                  <template slot-scope="{row}">
                    <div>NO.{{ row.index }}</div>
                    <!--                      <div>NO.100</div>-->
                  </template>
                </el-table-column>
                <!--                  <el-table-column-->
                <!--                    prop="cj"-->
                <!--                    label="车间"-->
                <!--                    width="100"-->
                <!--                  />-->
                <el-table-column
                  prop="suppercode"
                  label="供应商编码"
                  width="140"
                >
                  <template slot-scope="{row}">
                    <div v-if="row.suppercode" class="ellipsis">{{ row.suppercode }}</div>
                    <div v-else />
                  </template>
                </el-table-column>
                <el-table-column
                  prop="suppername"
                  width="293"
                  label="供应商名称"
                >
                  <template slot-scope="{row}">
                    <div class="ellipsis">{{ row.suppername }}</div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="cont"
                  label="次数"
                  width="81"
                />
              </el-table>
            </div>
          </div>

        </div>
      </div>

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

<script>
import './kbCommon.css'
import { bar02, loadEcharts, pie01 } from '@/utils/myEcharts'
import * as echarts from 'echarts'
import { cgddchart, kbTop, loadEcharts } from '@/utils/myEcharts'
import { PurchaseLeftBottom, PurchaseLeftTop, PurchaseRight } from '@/api/dzkb'
import MarqueeTips from 'vue-marquee-tips'

export default {
  name: 'Index2',
  components: {
    MarqueeTips
  },
  data() {
    return {
      onLine: navigator.onLine, // ç›‘听网络是否在线

      headTime: '',
      purchaseLeftTopData: {},

      purchaseLeftTopData: [],
      tableData: [],
      tableDataRank: [],

      number1: '',

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

      PurchaseLeftTop: null,
      PurchaseRight: null,
      PurchaseLeftBottom: null,
      PurchaseRight: null

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

    }
  },

@@ -291,71 +282,52 @@
    }, 1000 * 60 * 120)
  },
  mounted() {
    window.addEventListener('online', this.updateOnlineStatus)
    window.addEventListener('offline', this.updateOnlineStatus)
    this.updateOnlineStatus({ type: this.onLine ? 'online' : 'offline', isFirst: true })
    this.getTopBar()
    this.getEcharts()
    this.getPurchaseLeftBottom()
    this.getPurchaseRight()

    this.setStarsRef()
  },
  beforeDestroy() {
    window.removeEventListener('online', this.updateOnlineStatus)
    window.removeEventListener('offline', this.updateOnlineStatus)
  },

  methods: {
    // æ›´æ–°ç½‘络状态
    updateOnlineStatus(e) {
      if (e.isFirst) {
        this.getPurchaseLeftTop()
        this.getPurchaseLeftBottom()
        this.getPurchaseRight()

        // this.getMarqueeTipsContent()
      } 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.getPurchaseLeftTop()
          this.getPurchaseLeftBottom()
          this.getPurchaseRight()
          // this.getMarqueeTipsContent()
          loading.close()
          this.$message.success('网络连接成功！')
        } else {
          clearInterval(this.PurchaseLeftTop)
          clearInterval(this.PurchaseLeftBottom)
          clearInterval(this.PurchaseRight)
          this.$message.error('网络掉线，请关注网络状态！')
        }
      }
    setStarsRef() {
      const starNodes = Array.from(this.$refs.starsRef.children)
      starNodes.forEach(item => {
        const speed = 0.2 + Math.random() * 1
        const thisDistance = this.distance + Math.random() * 300
        item.style.transformOrigin = `0 0 ${thisDistance}px`
        item.style.transform = `
        translate3d(0,0,-${thisDistance}px)
        rotateY(${Math.random() * 360}deg)
        rotateX(${Math.random() * -50}deg)
        scale(${speed},${speed})`
      })
    },

    // èŽ·å–公告
    getMarqueeTipsContent() {
      // this.MarqueeTipsContent = '各位员工们：根据上级的通知，结合我企实际情况，现将20xx年的元旦放假通知如下：一、1月1日至1月3日放假调休，共3天。1月4日正式上班。二、节假日期间，各班组要严格落实上级的重要指示精神，按照上级的具体要求，认真抓好落实节日期间值班备勤工作，确保节日期间企业各项工作正常运转。xx企业20xxå¹´12月28日'
      // const spance = ' '.padStart(this.MarqueeTipsContent.length * 2, ' ')
      // this.MarqueeTipsContent = this.MarqueeTipsContent + spance
      // this.speed = this.MarqueeTipsContent.length / 10
    // èŽ·å–topEcharts
    getTopBar() {
      loadEcharts('topBarLeft', kbTop())
      loadEcharts('topBarRight', kbTop())
    },
    getPurchaseLeftTop() {
    // èŽ·å–echarts
    async getEcharts() {
      PurchaseLeftTop().then(res => {
        this.purchaseLeftTopData = res.data[0]
        // console.log(this.purchaseLeftTopData)
        loadEcharts('cgddchart', cgddchart(this.purchaseLeftTopData.ThisMonthPurchaseOrderCont, this.purchaseLeftTopData.ThisMonthPurchaseArrivalOrderCont, this.purchaseLeftTopData.ThisMonthWareHouseOrderCont))
        // loadEcharts('cgddchart', cgddchart(30, 5, 10))
      })
      this.PurchaseLeftTop = setInterval(() => {
      setInterval(() => {
        PurchaseLeftTop().then(res => {
          this.purchaseLeftTopData = res.data[0]
          loadEcharts('cgddchart', cgddchart(this.purchaseLeftTopData.ThisMonthPurchaseOrderCont, this.purchaseLeftTopData.ThisMonthPurchaseArrivalOrderCont, this.purchaseLeftTopData.ThisMonthWareHouseOrderCont))
        })
      }, 1000 * 6)
    },
    getPurchaseLeftBottom() {
      PurchaseLeftBottom().then(res => {
        this.tableData = res.data
        this.number1 = this.tableData.length
        this.tableData = res.data.filter(i => !parseFloat(i.quantity1))// è¿‡æ»¤æŽ‰å·²æ”¶æ•°é‡å¤§äºŽé›¶çš„值

        // this.number1 = this.tableData.length

        const divData = this.$refs.tableData.bodyWrapper
        // æ‹¿åˆ°å…ƒç´ åŽï¼Œå¯¹å…ƒç´ è¿›è¡Œå®šæ—¶å¢žåŠ è·ç¦»é¡¶éƒ¨è·ç¦»ï¼Œå®žçŽ°æ»šåŠ¨æ•ˆæžœ(此配置为每100毫秒移动1像素)
@@ -367,15 +339,15 @@
            // é‡ç½®table距离顶部距离
            divData.scrollTop = 0
            PurchaseLeftBottom().then(res => {
              this.tableData = res.data
              this.number1 = this.tableData.length
              if (this.tableData.length > 14) {
              this.tableData = res.data.filter(i => !parseFloat(i.quantity1))// è¿‡æ»¤æŽ‰å·²æ”¶æ•°é‡å¤§äºŽé›¶çš„值
              // this.number1 = this.tableData.length
              if (this.tableData.length > 13) {
                clearInterval(this.PurchaseLeftBottom)
                this.getPurchaseLeftBottom()
              }
            })
          }
        }, this.tableData.length <= 14 ? 1000 * 3 : 100)
        }, this.tableData.length <= 13 ? 1000 * 3 : 100)
      })
    },
    getPurchaseRight() {
@@ -401,19 +373,10 @@
        }, this.tableDataRank.length <= 21 ? 1000 * 3 : 100)
      })
    },

    tableRowClassName({ row, rowIndex }) {
      // æŠŠæ¯ä¸€è¡Œçš„索引放进row
      row.index = rowIndex + 1
    },
    // èŽ·å–echarts
    // getEcharts() {
    //   loadEcharts('pie01', pie01())
    //
    //   // setInterval(() => {
    //   //   loadEcharts('pie01', pie01())
    //   // }, 5000)
    // },

    // èŽ·å–当前时间
    getNowTime() {
@@ -431,23 +394,25 @@

      this.headTime = `${y}-${m}-${d}  ${hh}:${mm}:${ss}   ${week}`
    },
    headerCellStyle() {
    headerCellStyleCenter() {
      return {
        backgroundColor: 'rgb(30 ,33, 46)',
        // backgroundColor: 'rgb(30 ,33, 46)',
        backgroundColor: '#000',
        padding: '10px 0',
        textAlign: 'center',
        color: '#07acc2',
        border: 'none'
        border: 'none',
        fontSize: '18px'
      }
    },
    cellStyle() {
    cellStyleCenter() {
      return {
        padding: '8px 0',
        padding: '7.5px 0',
        textAlign: 'center',
        backgroundColor: 'rgba(30, 33, 46  )',
        // backgroundColor: 'transparent',
        backgroundColor: '#000',
        color: '#fff',
        border: 'none'
        border: 'none',
        fontSize: '18px'
      }
    }
  }
@@ -455,130 +420,18 @@
</script>

<style scoped lang="scss">
//$kbBorderColor: #09d8f2;
$kbBorderColor: rgba(9,216,242,0.4);
$main_color: #09d8f2;
$color01: #00FFFF;
.tableData {
  background: #000;
}

.kb_content {
  display: flex;
  position: relative;
  height: 990px;
  width: 100%;
  background-color: #000;
  letter-spacing: 2px;

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

    .kb_left_top {
      height: 345px;
      display: flex;
      flex-direction: column;
      //justify-content: space-around;
      justify-content: flex-end;

      .kb_left_top_block {
        width: 100%;
        height: 237px;
        display: flex;
        //border: 1px solid rgba(255, 255, 255, 0.6);
        justify-content: space-around;
        background-color: rgba(30, 33, 46,0.6);

        .content01 {
          margin: auto;
          position: relative;
          width: 202px;
          text-align: center;

          .pic01 {
            height: 145px;
            background: url("../../assets/images/pic01.png");
          }

          //.pie01{
          //  height: 200px;
          //  width: 200px;
          //  margin-top: -30px;
          //}

          .number {
            margin-top: -50px;
            font-size: 18px;
            font-size: 20px;
          }

          .text{
            margin-top: 50px;
            font-size: 20px;
          }
        }
      }

    }

    .kb_left_bottom {
      height: 645px;

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

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

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

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

    .kb_right_top {
      height: 906px;
      margin-top: 58px;
      width: 100%;

      .kb_right_top_content {
        height: 100%;
        display: flex;
        flex-direction: column;

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

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

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

::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 {
@@ -590,5 +443,38 @@
  padding: 0 !important;
  font-size: 18px;
}
</style>
<!--星空-->
<style lang="css" scoped>
@keyframes rotate {
  0% {
    transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
  }
  100% {
    transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
  }
}

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

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

 src/views/kb/cjsc.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,650 @@
<!--<template>-->
<!--  <div>-->
<!--    <div class="kb_dashboard">-->

<!--      &lt;!&ndash;    æ˜Ÿç©ºèƒŒæ™¯&ndash;&gt;-->
<!--      <div ref="starsRef" class="stars">-->
<!--        <div v-for="(item, index) in starsCount" :key="index" class="star" />-->
<!--      </div>-->

<!--      <div class="kb_header">-->
<!--        <div class="flex_c_c kb_header_text">-->
<!--          <div id="topBarLeft" style="width:600px;height:100%" />-->
<!--          è½¦é—´ç”Ÿäº§æ•°å­—化看板-->
<!--          <div id="topBarRight" style="width:600px;height:100%;transform:rotate(180deg);" />-->
<!--        </div>-->
<!--        <div class="kb_headTime">-->
<!--          <span>{{ headTime }}</span>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div style="display: flex;justify-content: space-between;padding:0 20px 20px 20px">-->
<!--        <div style="width: 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  tableDataCell"-->
<!--                style="width: 100%;"-->
<!--                :header-cell-style="headerCellStyle"-->
<!--                :cell-style="cellStyle"-->
<!--                height="428"-->
<!--              >-->
<!--                <el-table-column-->
<!--                  prop="saleOrderCode"-->
<!--                  label="销售单号"-->
<!--                  width="130"-->
<!--                >-->
<!--                  <template slot-scope="{row}">-->
<!--                    <div v-if="row.saleOrderCode" style="text-align: left" class="ellipsis">{{ row.saleOrderCode }}</div>-->
<!--                    <div v-else>/</div>-->
<!--                  </template>-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                  prop="partname"-->
<!--                  width="170"-->
<!--                  label="产品名称"-->
<!--                >-->
<!--                  <template slot-scope="{row}">-->
<!--                    <div v-if="row.partname" class="ellipsis">{{ row.partname }}</div>-->
<!--                    <div v-else>/</div>-->
<!--                  </template>-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                  prop="good_qty"-->
<!--                  label="数量"-->
<!--                  width="70"-->
<!--                />-->
<!--              </el-table>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div>-->
<!--            <div class="smallTitle">-->
<!--              <svg-icon icon-class="cxmc" class="svg_class" />-->
<!--              è£…配二线-->
<!--            </div>-->
<!--            <div class="lineContent horn">-->
<!--              <el-table-->
<!--                ref="tableDataLeftBottomRef"-->
<!--                :data="tableDataLeftBottom"-->
<!--                class="tableData tableDataCell"-->
<!--                style="width: 100%;"-->
<!--                :header-cell-style="headerCellStyle"-->
<!--                :cell-style="cellStyle"-->
<!--                height="428"-->
<!--              >-->
<!--                <el-table-column-->
<!--                  prop="saleOrderCode"-->
<!--                  label="销售单号"-->
<!--                  width="130"-->
<!--                >-->
<!--                  <template slot-scope="{row}">-->
<!--                    <div v-if="row.saleOrderCode" style="text-align: left" class="ellipsis">{{ row.saleOrderCode }}</div>-->
<!--                    <div v-else>/</div>-->
<!--                  </template>-->
<!--                </el-table-column>-->

<!--                <el-table-column-->
<!--                  prop="partname"-->
<!--                  width="170"-->
<!--                  label="产品名称"-->
<!--                >-->
<!--                  <template slot-scope="{row}">-->
<!--                    <div v-if="row.partname" class="ellipsis">{{ row.partname }}</div>-->
<!--                    <div v-else>/</div>-->
<!--                  </template>-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                  prop="good_qty"-->
<!--                  label="数量"-->
<!--                  width="70"-->
<!--                />-->
<!--              </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 tableDataCell"-->
<!--              style="width: 100%;"-->
<!--              :header-cell-style="headerCellStyleCenter"-->
<!--              :cell-style="cellStyleCenter"-->
<!--              height="927"-->
<!--            >-->
<!--              <el-table-column-->
<!--                type="RowNum"-->
<!--                label="序号"-->
<!--                width="50"-->
<!--              >-->
<!--                <template slot-scope="{row}">-->
<!--                  <div-->
<!--                    :style="{color:row.eqp_name==='装配一线'?'#FFFF77':row.eqp_name==='装配二线'?'#FF8888':row.eqp_name==='装配三线'?'#D28EFF':'#66FFFF'}"-->
<!--                  > {{ row.RowNum }}-->
<!--                  </div>-->
<!--                </template>-->
<!--              </el-table-column>-->
<!--              <el-table-column-->
<!--                prop="wo_code"-->
<!--                label="加工单号"-->
<!--                width="190"-->
<!--              >-->
<!--                <template slot-scope="{row}">-->
<!--                  <div-->
<!--                    :style="{color:row.eqp_name==='装配一线'?'#FFFF77':row.eqp_name==='装配二线'?'#FF8888':row.eqp_name==='装配三线'?'#D28EFF':'#66FFFF'}"-->
<!--                  > {{ row.wo_code }}-->
<!--                  </div>-->
<!--                </template>-->
<!--              </el-table-column>-->
<!--              <el-table-column-->
<!--                prop="eqp_name"-->
<!--                width="90"-->
<!--                label="产线名称"-->
<!--              >-->
<!--                <template slot-scope="{row}">-->
<!--                  <div-->
<!--                    :style="{color:row.eqp_name==='装配一线'?'#FFFF77':row.eqp_name==='装配二线'?'#FF8888':row.eqp_name==='装配三线'?'#D28EFF':'#66FFFF'}"-->
<!--                  > {{ row.eqp_name }}-->
<!--                  </div>-->
<!--                </template>-->
<!--              </el-table-column>-->
<!--              <el-table-column-->
<!--                prop="partname"-->
<!--                width="170"-->
<!--                label="产品名称"-->
<!--              >-->
<!--                <template slot-scope="{row}">-->
<!--                  <div-->
<!--                    class="ellipsis"-->
<!--                    :style="{color:row.eqp_name==='装配一线'?'#FFFF77':row.eqp_name==='装配二线'?'#FF8888':row.eqp_name==='装配三线'?'#D28EFF':'#66FFFF'}"-->
<!--                  > {{ row.partname }}-->
<!--                  </div>-->
<!--                </template>-->
<!--              </el-table-column>-->
<!--              <el-table-column-->
<!--                prop="plan_qty"-->
<!--                label="生产数量"-->
<!--                width="90"-->
<!--              >-->
<!--                <template slot-scope="{row}">-->
<!--                  <div-->
<!--                    :style="{color:row.eqp_name==='装配一线'?'#FFFF77':row.eqp_name==='装配二线'?'#FF8888':row.eqp_name==='装配三线'?'#D28EFF':'#66FFFF'}"-->
<!--                  > {{ row.plan_qty }}-->
<!--                  </div>-->
<!--                </template>-->
<!--              </el-table-column>-->
<!--              <el-table-column-->
<!--                prop="plan_startdate"-->
<!--                label="预计开始"-->
<!--                width="125"-->
<!--              >-->
<!--                <template slot-scope="{row}">-->
<!--                  <div-->
<!--                    v-if="row.plan_startdate"-->
<!--                    :style="{color:row.eqp_name==='装配一线'?'#FFFF77':row.eqp_name==='装配二线'?'#FF8888':row.eqp_name==='装配三线'?'#D28EFF':'#66FFFF'}"-->
<!--                  > {{ row.plan_startdate.substring(0, 11) }}-->
<!--                  </div>-->
<!--                  <div v-else />-->
<!--                </template>-->
<!--              </el-table-column>-->
<!--              <el-table-column-->
<!--                prop="plan_enddate"-->
<!--                label="预计完工"-->
<!--                width="125"-->
<!--              >-->
<!--                <template slot-scope="{row}">-->
<!--                  <div-->
<!--                    v-if="row.plan_enddate"-->
<!--                    :style="{color:row.eqp_name==='装配一线'?'#FFFF77':row.eqp_name==='装配二线'?'#FF8888':row.eqp_name==='装配三线'?'#D28EFF':'#66FFFF'}"-->
<!--                  > {{ row.plan_enddate.substring(0, 11) }}-->
<!--                  </div>-->
<!--                  <div v-else />-->
<!--                </template>-->
<!--              </el-table-column>-->
<!--              <el-table-column-->
<!--                prop="stepname"-->
<!--                label="工序"-->
<!--                width="100"-->
<!--              >-->
<!--                <template slot-scope="{row}">-->
<!--                  <div-->
<!--                    class="ellipsis"-->
<!--                    :style="{color:row.eqp_name==='装配一线'?'#FFFF77':row.eqp_name==='装配二线'?'#FF8888':row.eqp_name==='装配三线'?'#D28EFF':'#66FFFF'}"-->
<!--                  > {{ row.stepname }}-->
<!--                  </div>-->
<!--                </template>-->
<!--              </el-table-column>-->
<!--              <el-table-column-->
<!--                prop="scjdxxx"-->
<!--                label="生产进度"-->
<!--                width="130"-->
<!--              >-->
<!--                <template slot-scope="{row}">-->
<!--                  <div :id="'progress'+row.RowNum" style="width: 100%;height:30px" />-->
<!--                </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="tableDataRightTopRef"-->
<!--                :data="tableDataRightTop"-->
<!--                class="tableData tableDataCell"-->
<!--                style="width: 100%;"-->
<!--                :header-cell-style="headerCellStyle"-->
<!--                :cell-style="cellStyle"-->
<!--                height="428"-->
<!--              >-->
<!--                <el-table-column-->
<!--                  prop="saleOrderCode"-->
<!--                  label="销售单号"-->
<!--                  width="130"-->
<!--                >-->
<!--                  <template slot-scope="{row}">-->
<!--                    <div v-if="row.saleOrderCode" style="text-align: left" class="ellipsis">{{ row.saleOrderCode }}</div>-->
<!--                    <div v-else>/</div>-->
<!--                  </template>-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                  prop="partname"-->
<!--                  width="170"-->
<!--                  label="产品名称"-->
<!--                >-->
<!--                  <template slot-scope="{row}">-->
<!--                    <div v-if="row.partname" class="ellipsis">{{ row.partname }}</div>-->
<!--                    <div v-else>/</div>-->
<!--                  </template>-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                  prop="good_qty"-->
<!--                  label="数量"-->
<!--                  width="70"-->
<!--                />-->
<!--              </el-table>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div>-->
<!--            <div class="smallTitle">-->
<!--              <svg-icon icon-class="cxmc" class="svg_class" />-->
<!--              è£…配四线-->
<!--            </div>-->
<!--            <div class="lineContent horn">-->
<!--              <el-table-->
<!--                ref="tableDataRightBottomRef"-->
<!--                :data="tableDataRightBottom"-->
<!--                class="tableData tableDataCell"-->
<!--                style="width: 100%;"-->
<!--                :header-cell-style="headerCellStyle"-->
<!--                :cell-style="cellStyle"-->
<!--                height="428"-->
<!--              >-->
<!--                <el-table-column-->
<!--                  prop="saleOrderCode"-->
<!--                  label="销售单号"-->
<!--                  width="130"-->
<!--                >-->
<!--                  <template slot-scope="{row}">-->
<!--                    <div v-if="row.saleOrderCode" style="text-align: left" class="ellipsis">{{ row.saleOrderCode }}</div>-->
<!--                    <div v-else>/</div>-->
<!--                  </template>-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                  prop="partname"-->
<!--                  width="170"-->
<!--                  label="产品名称"-->
<!--                >-->
<!--                  <template slot-scope="{row}">-->
<!--                    <div v-if="row.partname" class="ellipsis">{{ row.partname }}</div>-->
<!--                    <div v-else>/</div>-->
<!--                  </template>-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                  prop="good_qty"-->
<!--                  label="数量"-->
<!--                  width="70"-->
<!--                />-->
<!--              </el-table>-->
<!--            </div>-->

<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import './kbCommon.css'-->
<!--import { kbTop, loadEcharts, progress } from '@/utils/myEcharts'-->
<!--import { WkshpContentData, WkshpLineData } from '@/api/dzkb'-->
<!--import clearAllChildren from '@/utils/global'-->

<!--export default {-->
<!--  name: 'Cjsc',-->
<!--  data() {-->
<!--    return {-->
<!--      headTime: '',-->
<!--      tableDataLeftTop: [],-->
<!--      tableDataLeftTopTemp: [],-->
<!--      tableDataLeftBottom: [],-->
<!--      tableDataLeftBottomTemp: [],-->
<!--      tableDataRightTop: [],-->
<!--      tableDataRightTopTemp: [],-->
<!--      tableDataRightBottom: [],-->
<!--      tableDataRightBottomTemp: [],-->

<!--      tableDataCenterTop: [],-->
<!--      tableDataCenterTopTemp: [],-->

<!--      starsCount: 800, // æ˜Ÿæ˜Ÿæ•°é‡-->
<!--      distance: 900 // é—´è·-->
<!--    }-->
<!--  },-->
<!--  created() {-->
<!--    setInterval(this.getNowTime, 1000)-->

<!--    // ä¸¤å°æ—¶çœ‹æ¿åˆ·æ–°ä¸€æ¬¡-->
<!--    setInterval(() => {-->
<!--      window.location.reload()-->
<!--    }, 1000 * 60 * 120)-->
<!--  },-->
<!--  mounted() {-->
<!--    this.getTopBar()-->
<!--    // è¾¹ä¸Šå››ä¸ªè¡¨æ ¼æ•°æ®å†…容-->
<!--    this.getLeftTopTableDataSetInterval()-->
<!--    this.getLeftBottomTableDataSetInterval()-->
<!--    this.getRightTopTableDataSetInterval()-->
<!--    this.getRightBottomTableDataSetInterval()-->

<!--    // ä¸­é—´è¡¨æ ¼æ•°æ®å†…容-->
<!--    this.getCenterTableDataSetInterval()-->

<!--    this.setStarsRef()-->
<!--  },-->
<!--  methods: {-->
<!--    setStarsRef() {-->
<!--      const starNodes = Array.from(this.$refs.starsRef.children)-->
<!--      starNodes.forEach(item => {-->
<!--        const speed = 0.2 + Math.random() * 1-->
<!--        const thisDistance = this.distance + Math.random() * 300-->
<!--        item.style.transformOrigin = `0 0 ${thisDistance}px`-->
<!--        item.style.transform = `-->
<!--        translate3d(0,0,-${thisDistance}px)-->
<!--        rotateY(${Math.random() * 360}deg)-->
<!--        rotateX(${Math.random() * -50}deg)-->
<!--        scale(${speed},${speed})`-->
<!--      })-->
<!--    },-->
<!--    // ä¸­é—´éƒ¨åˆ†çš„表格-->
<!--    getCenterTableDataSetInterval() {-->
<!--      let startValue = 0 // åˆå§‹å€¼-->
<!--      const scale = 20// åˆ»åº¦-->

<!--      WkshpContentData().then(res => {-->
<!--        this.tableDataCenterTopTemp = res.data-->
<!--        this.tableDataCenterTop = this.tableDataCenterTopTemp.slice(startValue, startValue + scale)-->

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

<!--        const timer = setInterval(() => {-->
<!--          startValue = startValue + scale-->
<!--          this.tableDataCenterTop = this.tableDataCenterTopTemp.slice(startValue, startValue + scale)-->
<!--          if (nowLoop === loop) {-->
<!--            clearInterval(timer)-->
<!--            this.getCenterTableDataSetInterval()-->
<!--          }-->
<!--          nowLoop++-->
<!--          this.$nextTick(() => {-->
<!--            this.tableDataCenterTop.forEach(i => {-->
<!--              loadEcharts('progress' + i.RowNum, progress(i.good_qty, i.plan_qty))-->
<!--            })-->
<!--          })-->
<!--        }, 1000 * 10)-->

<!--        this.$nextTick(() => {-->
<!--          this.tableDataCenterTop.forEach(i => {-->
<!--            loadEcharts('progress' + i.RowNum, progress(i.good_qty, i.plan_qty))-->
<!--          })-->
<!--        })-->
<!--      })-->
<!--    },-->

<!--    // èŽ·å–左上数据并定时刷新-->
<!--    getLeftTopTableDataSetInterval() {-->
<!--      let startValue = 0 // åˆå§‹å€¼-->
<!--      const scale = 10// åˆ»åº¦-->

<!--      WkshpLineData({ LineCode: '001' }).then(res => {-->
<!--        this.tableDataLeftTopTemp = res.data-->
<!--        this.tableDataLeftTop = this.tableDataLeftTopTemp.slice(startValue, startValue + scale)-->

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

<!--        const timer = setInterval(() => {-->
<!--          startValue = startValue + scale-->
<!--          this.tableDataLeftTop = this.tableDataLeftTopTemp.slice(startValue, startValue + scale)-->
<!--          if (nowLoop === loop) {-->
<!--            clearInterval(timer)-->
<!--            this.getLeftTopTableDataSetInterval()-->
<!--          }-->
<!--          nowLoop++-->
<!--        }, 1000 * 10)-->
<!--      })-->
<!--    },-->
<!--    // èŽ·å–左下数据并定时刷新-->
<!--    getLeftBottomTableDataSetInterval() {-->
<!--      let startValue = 0 // åˆå§‹å€¼-->
<!--      const scale = 10// åˆ»åº¦-->

<!--      WkshpLineData({ LineCode: '002' }).then(res => {-->
<!--        this.tableDataLeftBottomTemp = res.data-->
<!--        this.tableDataLeftBottom = this.tableDataLeftBottomTemp.slice(startValue, startValue + scale)-->

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

<!--        const timer = setInterval(() => {-->
<!--          startValue = startValue + scale-->
<!--          this.tableDataLeftBottom = this.tableDataLeftBottomTemp.slice(startValue, startValue + scale)-->
<!--          if (nowLoop === loop) {-->
<!--            clearInterval(timer)-->
<!--            this.getLeftBottomTableDataSetInterval()-->
<!--          }-->
<!--          nowLoop++-->
<!--        }, 1000 * 10)-->
<!--      })-->
<!--    },-->
<!--    // èŽ·å–右上数据并定时刷新-->
<!--    getRightTopTableDataSetInterval() {-->
<!--      let startValue = 0 // åˆå§‹å€¼-->
<!--      const scale = 10// åˆ»åº¦-->

<!--      WkshpLineData({ LineCode: '003' }).then(res => {-->
<!--        this.tableDataRightTopTemp = res.data-->
<!--        this.tableDataRightTop = this.tableDataRightTopTemp.slice(startValue, startValue + scale)-->

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

<!--        const timer = setInterval(() => {-->
<!--          startValue = startValue + scale-->
<!--          this.tableDataRightTop = this.tableDataRightTopTemp.slice(startValue, startValue + scale)-->
<!--          if (nowLoop === loop) {-->
<!--            clearInterval(timer)-->
<!--            this.getRightTopTableDataSetInterval()-->
<!--          }-->
<!--          nowLoop++-->
<!--        }, 1000 * 10)-->
<!--      })-->
<!--    },-->
<!--    // èŽ·å–右下数据并定时刷新-->
<!--    getRightBottomTableDataSetInterval() {-->
<!--      let startValue = 0 // åˆå§‹å€¼-->
<!--      const scale = 10// åˆ»åº¦-->

<!--      WkshpLineData({ LineCode: '004' }).then(res => {-->
<!--        this.tableDataRightBottomTemp = res.data-->
<!--        this.tableDataRightBottom = this.tableDataRightBottomTemp.slice(startValue, startValue + scale)-->

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

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

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

<!--}-->
<!--</script>-->

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

<!--.tableDataCell {-->
<!--  ::v-deep .cell{-->
<!--    padding: 0 2px ;-->
<!--  }-->
<!--}-->

<!--.tableData {-->
<!--  background: #000;-->
<!--}-->

<!--.el-table::before {-->
<!--  height: 0;-->
<!--}-->

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

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

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

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

 src/views/kb/cjzl.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,404 @@
<!--<template>-->
<!--  <div>-->
<!--    <div class="kb_dashboard">-->

<!--      &lt;!&ndash;    æ˜Ÿç©ºèƒŒæ™¯&ndash;&gt;-->
<!--      <div ref="starsRef" class="stars">-->
<!--        <div v-for="(item, index) in starsCount" :key="index" class="star" />-->
<!--      </div>-->

<!--      <div class="kb_header">-->
<!--        <div class="flex_c_c kb_header_text">-->
<!--          <div id="topBarLeft" style="width:600px;height:100%" />-->
<!--          è½¦é—´è´¨é‡æ•°å­—化看板-->
<!--          <div id="topBarRight" style="width:600px;height:100%;transform:rotate(180deg);" />-->
<!--        </div>-->
<!--        <div class="kb_headTime">-->
<!--          <span>{{ headTime }}</span>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div style="display: flex;justify-content: space-between;padding:0 20px 20px 20px">-->
<!--        &lt;!&ndash;        å·¦è¾¹éƒ¨åˆ†&ndash;&gt;-->
<!--        <div style="width: 470px;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>-->
<!--        &lt;!&ndash;        ä¸­é—´éƒ¨åˆ†&ndash;&gt;-->
<!--        <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 tableDataCell"-->
<!--              style="width: 100%;"-->
<!--              :header-cell-style="headerCellStyleCenter"-->
<!--              :cell-style="cellStyleCenter"-->
<!--              height="927"-->
<!--            >-->
<!--              <el-table-column-->
<!--                prop="lm_date"-->
<!--                label="日期"-->
<!--                width="100"-->
<!--              >-->
<!--                <template slot-scope="{row}">-->
<!--                  <div-->
<!--                    v-if="row.lm_date"-->
<!--                  >-->
<!--                    {{ row.lm_date.substring(0,11) }}-->
<!--                  </div>-->
<!--                  <div v-else />-->
<!--                </template>-->
<!--              </el-table-column>-->
<!--              <el-table-column-->
<!--                prop="eqp_name"-->
<!--                width="80"-->
<!--                label="产线名称"-->
<!--              >-->
<!--                <template slot-scope="{row}">-->
<!--                  <div>{{ row.eqp_name }}</div>-->
<!--                </template>-->
<!--              </el-table-column>-->
<!--              <el-table-column-->
<!--                prop="wo_code"-->
<!--                label="生产单号"-->
<!--                width="173"-->
<!--              >-->
<!--                <template slot-scope="{row}">-->
<!--                  <div style="color: #00FFFF">{{ row.wo_code }}</div>-->
<!--                </template>-->
<!--              </el-table-column>-->

<!--              <el-table-column-->
<!--                prop="partname"-->
<!--                width="190"-->
<!--                label="产品名称"-->
<!--              >-->
<!--                <template slot-scope="{row}">-->
<!--                  <div class="ellipsis">{{ row.partname }}</div>-->
<!--                </template>-->
<!--              </el-table-column>-->
<!--              <el-table-column-->
<!--                prop="defect_name"-->
<!--                label="不良原因"-->
<!--                width="120"-->
<!--              >-->
<!--                <template slot-scope="{row}">-->
<!--                  <div style="color:#ff0000;" class="ellipsis">{{ row.defect_name }}</div>-->
<!--                </template>-->
<!--              </el-table-column>-->
<!--              <el-table-column-->
<!--                prop="ng_qty"-->
<!--                label="不良数量"-->
<!--                width="77"-->
<!--              />-->
<!--              <el-table-column-->
<!--                prop="report_qty"-->
<!--                label="报工数量"-->
<!--                width="77"-->
<!--              />-->
<!--              <el-table-column-->
<!--                label="不良占比"-->
<!--                width="77"-->
<!--              >-->
<!--                <template slot-scope="{row}">-->
<!--                  <div>{{ parseFloat((row.ng_qty*100/(row.ng_qty+row.report_qty)).toFixed(2)) }}%</div>-->
<!--                </template>-->
<!--              </el-table-column>-->

<!--            </el-table>-->
<!--          </div>-->
<!--        </div>-->
<!--        &lt;!&ndash;        å³è¾¹éƒ¨åˆ†&ndash;&gt;-->
<!--        <div style="width: 470px;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'-->
<!--import { BadContManger, BadDayDistriBute, BadTop5, BadWeek, BadWeekDistriBute } from '@/api/dzkb'-->

<!--export default {-->
<!--  name: 'Cjsc',-->
<!--  data() {-->
<!--    return {-->
<!--      headTime: '',-->

<!--      tableDataCenterTop: [],-->
<!--      tableDataCenterTopTemp: [],-->

<!--      StepCode: '02',-->

<!--      starsCount: 800, // æ˜Ÿæ˜Ÿæ•°é‡-->
<!--      distance: 900 // é—´è·-->
<!--    }-->
<!--  },-->
<!--  created() {-->
<!--    setInterval(this.getNowTime, 1000)-->

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

<!--    this.getCenterTableDataSetInterval()-->

<!--    this.getEcharts()-->

<!--    this.setStarsRef()-->
<!--  },-->
<!--  methods: {-->
<!--    setStarsRef() {-->
<!--      const starNodes = Array.from(this.$refs.starsRef.children)-->
<!--      starNodes.forEach(item => {-->
<!--        const speed = 0.2 + Math.random() * 1-->
<!--        const thisDistance = this.distance + Math.random() * 300-->
<!--        item.style.transformOrigin = `0 0 ${thisDistance}px`-->
<!--        item.style.transform = `-->
<!--        translate3d(0,0,-${thisDistance}px)-->
<!--        rotateY(${Math.random() * 360}deg)-->
<!--        rotateX(${Math.random() * -50}deg)-->
<!--        scale(${speed},${speed})`-->
<!--      })-->
<!--    },-->
<!--    // èŽ·å–Echarts-->
<!--    getEcharts() {-->
<!--      this.getLeftTopEcharts()-->
<!--      setInterval(() => {-->
<!--        this.getLeftTopEcharts()-->
<!--      }, 1000 * 10)-->

<!--      this.getLeftBottomEcharts()-->
<!--      setInterval(() => {-->
<!--        this.getLeftBottomEcharts()-->
<!--      }, 1000 * 10)-->

<!--      this.getRightTopEcharts()-->
<!--      setInterval(() => {-->
<!--        this.getRightTopEcharts()-->
<!--      }, 1000 * 10)-->

<!--      this.getRightBottomEcharts()-->
<!--      setInterval(() => {-->
<!--        this.getRightBottomEcharts()-->
<!--      }, 1000 * 10)-->
<!--    },-->
<!--    getLeftTopEcharts() {-->
<!--      BadTop5({ StepCode: this.StepCode }).then(res => {-->
<!--        const dataArr = res.data.map(i => i.cont)-->
<!--        const titlenameArr = res.data.map(i => i.name)-->
<!--        loadEcharts('bar01', bar02(dataArr, titlenameArr))-->
<!--      })-->
<!--    },-->
<!--    getLeftBottomEcharts() {-->
<!--      BadWeek({ StepCode: this.StepCode }).then(res => {-->
<!--        const dataX = res.data.map(i => i.click_date)-->
<!--        const dataY = res.data.map(i => i.count)-->
<!--        loadEcharts('line01', line02(dataX, dataY))-->
<!--      })-->
<!--    },-->
<!--    getRightTopEcharts() {-->
<!--      BadDayDistriBute({ StepCode: this.StepCode }).then(res => {-->
<!--        loadEcharts('bar02', bar04(res.data))-->
<!--      })-->
<!--    },-->
<!--    getRightBottomEcharts() {-->
<!--      BadWeekDistriBute({ StepCode: this.StepCode }).then(res => {-->
<!--        loadEcharts('pie01', pie02(res.data))-->
<!--      })-->
<!--    },-->
<!--    // ä¸­é—´éƒ¨åˆ†çš„表格-->
<!--    getCenterTableDataSetInterval() {-->
<!--      let startValue = 0 // åˆå§‹å€¼-->
<!--      const scale = 23// åˆ»åº¦-->
<!--      BadContManger({ StepCode: this.StepCode }).then(res => {-->
<!--        this.tableDataCenterTopTemp = res.data-->
<!--        this.tableDataCenterTop = this.tableDataCenterTopTemp.slice(startValue, startValue + scale)-->

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

<!--        const timer = setInterval(() => {-->
<!--          startValue = startValue + scale-->
<!--          this.tableDataCenterTop = this.tableDataCenterTopTemp.slice(startValue, startValue + scale)-->
<!--          if (nowLoop === loop) {-->
<!--            clearInterval(timer)-->
<!--            this.getCenterTableDataSetInterval()-->
<!--          }-->

<!--          nowLoop++-->
<!--        }, 1000 * 10)-->
<!--      })-->
<!--    },-->

<!--    // èŽ·å–topEcharts-->
<!--    getTopBar() {-->
<!--      loadEcharts('topBarLeft', kbTop())-->
<!--      loadEcharts('topBarRight', kbTop())-->
<!--    },-->
<!--    // èŽ·å–当前时间-->
<!--    getNowTime() {-->
<!--      const dt = new Date()-->
<!--      const wk = dt.getDay()-->
<!--      const y = dt.getFullYear()-->
<!--      const m = (dt.getMonth() + 1 + '').padStart(2, '0')-->
<!--      const d = (dt.getDate() + '').padStart(2, '0')-->

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

<!--      this.headTime = `${y}-${m}-${d}  ${hh}:${mm}:${ss}   ${week}`-->
<!--    },-->
<!--    headerCellStyle() {-->
<!--      return {-->
<!--        // backgroundColor: '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',-->
<!--        fontSize: '18px'-->
<!--      }-->
<!--    },-->
<!--    cellStyleCenter() {-->
<!--      return {-->
<!--        padding: '7.5px 0',-->
<!--        textAlign: 'center',-->
<!--        backgroundColor: '#000',-->
<!--        color: '#fff',-->
<!--        border: 'none',-->
<!--        fontSize: '18px'-->
<!--      }-->
<!--    }-->
<!--  }-->

<!--}-->
<!--</script>-->

<!--<style lang="scss" scoped>-->
<!--$main_color:#09d8f2;-->
<!--$color01: #00FFFF;-->
<!--.tableData{-->
<!--  background: #000;-->
<!--}-->

<!--.el-table::before{-->
<!--  height: 0;-->
<!--}-->

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

<!--.tableDataCell {-->
<!--  ::v-deep .cell{-->
<!--    padding: 0 2px ;-->
<!--  }-->
<!--}-->

<!--</style>-->

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

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

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

 src/views/kb/ckgl.vue

@@ -1,340 +1,347 @@
<template>
  <div>
    <div class="kb_dashboard">

      <!--    æ˜Ÿç©ºèƒŒæ™¯-->
      <div ref="starsRef" class="stars">
        <div v-for="(item, index) in starsCount" :key="index" class="star" />
      </div>

      <div class="kb_header">
        <div class="flex_c_c kb_header_text">
          <div id="topBarLeft" style="width:600px;height:100%" />
          ä»“库管理看板
          <div id="topBarRight" style="width:600px;height:100%;transform:rotate(180deg);" />
        </div>
        <div class="kb_headerPic" />
        <div class="kb_headTime">
          <span>{{ headTime }}</span>
        </div>
      </div>
      <MarqueeTips
        :content="MarqueeTipsContent"
        class="MarqueeTipsContentClass"
        style="top:90px"
        :speed="180"
      />
      <div class="kb_content">
        <div class="kb_left">
          <!-- 1-->
          <div class="kb_left_top kb_pd10">
            <div class="kb_left_top_block" style="margin-top: 10px">
              <div class="headTitle kb_title_text">产品待入库 <div style="margin-left: 30px">{{ number1 }} å•</div></div>
              <div class="content">
                <el-table
                  ref="tableDataTopRef"
                  :data="tableDataTop"
                  style="width: 100%;"
                  :header-cell-style="headerCellStyle"
                  :cell-style="cellStyle"
                  height="400"
                >
                  <el-table-column
                    prop="voucherdate"
                    label="单据日期"
                    width="140"
                  >
                    <template slot-scope="{row}">
                      <div v-if="row.voucherdate" class="ellipsis">{{ row.voucherdate.substring(0, 10) }}</div>
                      <div v-else />
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="wo"
                    label="单据编号"
                    width="189"
                  >
                    <template slot-scope="{row}">
                      <div class="ellipsis">{{ row.wo }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="wkshp_name"
                    label="生产车间"
                    width="105"
                  >
                    <template slot-scope="{row}">
                      <div class="ellipsis">{{ row.wkshp_name }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="saleOrderCode"
                    label="销售订单号"
                    width="200"
                  >
                    <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="materiel_code"
                    label="产品编号"
                    width="136"
                  >
                    <template slot-scope="{row}">
                      <div class="ellipsis">{{ row.materiel_code }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="materiel_name"
                    label="产品名称"
                    width="180"
                  >
                    <template slot-scope="{row}">
                      <div class="ellipsis">{{ row.materiel_name }}</div>
                    </template>
                  </el-table-column>
                  <!--                  <el-table-column-->
                  <!--                    prop="specification"-->
                  <!--                    label="规格型号"-->
                  <!--                    width="128"-->
                  <!--                  >-->
                  <!--                    <template slot-scope="{row}">-->
                  <!--                      <div v-if="row.specification" class="ellipsis">{{ row.specification }}</div>-->
                  <!--                      <div v-else>/</div>-->
                  <!--                    </template>-->
                  <!--                  </el-table-column>-->
                  <el-table-column
                    prop="stck_name"
                    label="预入仓库"
                    width="100"
                  >
                    <template slot-scope="{row}">
                      <div v-if="row.stck_name" class="ellipsis">{{ row.stck_name }}</div>
                      <div v-else>/</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="quantity"
                    label="数量"
                    width="63"
                  />
                  <el-table-column
                    prop="totalStockInQuantity"
                    label="已入库数量"
                    width="100"
                  >
                    <template slot-scope="{row}">
                      <div v-if="row.totalStockInQuantity">{{ row.totalStockInQuantity }}</div>
                      <div v-else>0</div>
                    </template>
                  </el-table-column>
                  <!--                  <el-table-column-->
                  <!--                    prop="uomname"-->
                  <!--                    label="单位"-->
                  <!--                    width="50"-->
                  <!--                  />-->
                  <!--                  <el-table-column-->
                  <!--                    prop="preStartDate"-->
                  <!--                    label="预计开工"-->
                  <!--                    width="100"-->
                  <!--                  >-->
                  <!--                    <template slot-scope="{row}">-->
                  <!--                      <div v-if="row.preStartDate">{{ row.preStartDate.substring(0, 10) }}</div>-->
                  <!--                      <div v-else />-->
                  <!--                    </template>-->
                  <!--                  </el-table-column>-->
                  <el-table-column
                    prop="preFinishDate"
                    label="预计入库"
                    width="140"
                  >
                    <template slot-scope="{row}">
                      <div v-if="row.preFinishDate">{{ row.preFinishDate.substring(0, 10) }}</div>
                      <div v-else />
                    </template>
                  </el-table-column>
                </el-table>
              </div>
      <div style="display: flex;justify-content: space-between;padding:0 20px 20px 20px;height: 980px">
        <div style="width: 1350px; " class="flex_c_b">
          <div style="height: 470px;">
            <div class="smallTitle">
              <svg-icon icon-class="cpdrk" class="svg_class" />
              ç”Ÿäº§å¾…入库
            </div>
            <div class="kb_left_top_block" style="margin-top: 25px">
              <div class="headTitle kb_title_text">产品待发货 <div style="margin-left: 30px">{{ number2 }} å•</div></div>
              <div class="content">
                <el-table
                  ref="tableDataBottomRef"
                  :data="tableDataBottom"
                  style="width: 100%;"
                  :header-cell-style="headerCellStyle"
                  :cell-style="cellStyle"
                  height="440"
            <div class="lineContent horn" style="height: 435px">
              <el-table
                ref="tableDataTopRef"
                :data="tableDataTop"
                style="width: 100%;"
                class="tableData"
                :header-cell-style="headerCellStyleCenter"
                :cell-style="cellStyleCenter"
                height="430"
              >
                <el-table-column
                  prop="voucherdate"
                  label="单据日期"
                  width="131"
                >
                  <el-table-column
                    prop="voucherdate"
                    label="单据日期"
                    width="130"
                  >
                    <template slot-scope="{row}">
                      <div v-if="row.voucherdate" class="ellipsis">{{ row.voucherdate.substring(0, 10) }}</div>
                      <div v-else>/</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="wo"
                    label="单据编号"
                    width="195"
                  >
                    <template slot-scope="{row}">
                      <div class="ellipsis">{{ row.wo }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="customename"
                    label="客户"
                    width="125"
                  >
                    <template slot-scope="{row}">
                      <div v-if="row.customename" class="ellipsis">{{ row.customename }}</div>
                      <div v-else>/</div>
                    </template>
                  </el-table-column>
                  <!--                  <el-table-column-->
                  <!--                    prop="username"-->
                  <!--                    label="业务员"-->
                  <!--                    width="65"-->
                  <!--                  >-->
                  <!--                    <template slot-scope="{row}">-->
                  <!--                      <div v-if="row.username" class="ellipsis">{{ row.username }}</div>-->
                  <!--                      <div v-else>/</div>-->
                  <!--                    </template>-->
                  <!--                  </el-table-column>-->
                  <el-table-column
                    prop="SourceVoucherCode"
                    label="来源单号"
                    width="185"
                  >
                    <template slot-scope="{row}">
                      <div v-if="row.SourceVoucherCode" class="ellipsis">{{ row.SourceVoucherCode }}</div>
                      <div v-else>/</div>
                    </template>
                  </el-table-column>
                  <!--                  <el-table-column-->
                  <!--                    prop="materiel_code"-->
                  <!--                    label="产品编号"-->
                  <!--                    width="96"-->
                  <!--                  />-->
                  <el-table-column
                    prop="materiel_name"
                    label="产品名称"
                    width="170"
                  >
                    <template slot-scope="{row}">
                      <div v-if="row.materiel_name" class="ellipsis">{{ row.materiel_name }}</div>
                    </template>
                  </el-table-column>
                  <!--                  <el-table-column-->
                  <!--                    prop="specification"-->
                  <!--                    label="规格型号"-->
                  <!--                    width="100"-->
                  <!--                  >-->
                  <!--                    <template slot-scope="{row}">-->
                  <!--                      <div v-if="row.specification" class="ellipsis">{{ row.specification }}</div>-->
                  <!--                      <div v-else>/</div>-->
                  <!--                    </template>-->
                  <!--                  </el-table-column>-->
                  <el-table-column
                    prop="quantity"
                    label="数量"
                    width="87"
                  >
                    <template slot-scope="{row}">
                      <div class="ellipsis">{{ row.quantity }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="saleOutQuantity"
                    label="已发货数量"
                    width="100"
                  >
                    <template slot-scope="{row}">
                      <div v-if="row.saleOutQuantity" class="ellipsis">{{ row.saleOutQuantity }}</div>
                      <div v-else>0</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="priuserdefnvc1"
                    label="检验方式"
                    width="110"
                  >
                    <template slot-scope="{row}">
                      <div v-if="row.priuserdefnvc1">{{ row.priuserdefnvc1 }}</div>
                      <div v-else>/</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="priuserdefnvc2"
                    label="检验人员"
                    width="110"
                  >
                    <template slot-scope="{row}">
                      <div v-if="row.priuserdefnvc2">{{ row.priuserdefnvc2 }}</div>
                      <div v-else>/</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="deliveryDate"
                    label="预计交货日期"
                    width="141"
                  >
                    <template slot-scope="{row}">
                      <div v-if="row.deliveryDate">{{ row.deliveryDate.substring(0,10) }}</div>
                      <div v-else>/</div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
                  <template slot-scope="{row}">
                    <div v-if="row.voucherdate" class="ellipsis">{{ row.voucherdate.substring(0, 10) }}</div>
                    <div v-else />
                  </template>
                </el-table-column>
                <el-table-column
                  prop="wo"
                  label="单据编号"
                  width="189"
                >
                  <template slot-scope="{row}">
                    <div class="ellipsis">{{ row.wo }}</div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="wkshp_name"
                  label="生产车间"
                  width="105"
                >
                  <template slot-scope="{row}">
                    <div class="ellipsis">{{ row.wkshp_name }}</div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="saleOrderCode"
                  label="销售订单号"
                  width="200"
                >
                  <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="materiel_code"
                  label="产品编号"
                  width="136"
                >
                  <template slot-scope="{row}">
                    <div class="ellipsis">{{ row.materiel_code }}</div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="materiel_name"
                  label="产品名称"
                  width="180"
                >
                  <template slot-scope="{row}">
                    <div class="ellipsis">{{ row.materiel_name }}</div>
                  </template>
                </el-table-column>
                <!--                  <el-table-column-->
                <!--                    prop="specification"-->
                <!--                    label="规格型号"-->
                <!--                    width="128"-->
                <!--                  >-->
                <!--                    <template slot-scope="{row}">-->
                <!--                      <div v-if="row.specification" class="ellipsis">{{ row.specification }}</div>-->
                <!--                      <div v-else>/</div>-->
                <!--                    </template>-->
                <!--                  </el-table-column>-->
                <el-table-column
                  prop="stck_name"
                  label="预入仓库"
                  width="100"
                >
                  <template slot-scope="{row}">
                    <div v-if="row.stck_name" class="ellipsis">{{ row.stck_name }}</div>
                    <div v-else>/</div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="quantity"
                  label="数量"
                  width="63"
                />
                <el-table-column
                  prop="totalStockInQuantity"
                  label="已入库数量"
                  width="100"
                >
                  <template slot-scope="{row}">
                    <div v-if="row.totalStockInQuantity">{{ row.totalStockInQuantity }}</div>
                    <div v-else>0</div>
                  </template>
                </el-table-column>
                <!--                  <el-table-column-->
                <!--                    prop="uomname"-->
                <!--                    label="单位"-->
                <!--                    width="50"-->
                <!--                  />-->
                <!--                  <el-table-column-->
                <!--                    prop="preStartDate"-->
                <!--                    label="预计开工"-->
                <!--                    width="100"-->
                <!--                  >-->
                <!--                    <template slot-scope="{row}">-->
                <!--                      <div v-if="row.preStartDate">{{ row.preStartDate.substring(0, 10) }}</div>-->
                <!--                      <div v-else />-->
                <!--                    </template>-->
                <!--                  </el-table-column>-->
                <el-table-column
                  prop="preFinishDate"
                  label="预计入库"
                  width="140"
                >
                  <template slot-scope="{row}">
                    <div v-if="row.preFinishDate">{{ row.preFinishDate.substring(0, 10) }}</div>
                    <div v-else />
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </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" style="margin-top: 30px;">半成品、产品库存量排行Top5</div>
              <div class="content_body" style="height:402px;">
                <div id="bar03" style="width: 100%;height:100%" />
              </div>
              <!--              <div class="content_head kb_title_text" style="margin-top: 12px">半成品库存量排行Top5</div>-->
              <div class="content_head kb_title_text" style="margin-top: 12px">原材料库存量排行Top5</div>
              <div class="content_body">
                <div id="bar04" style="width: 100%;height:100%" />
              </div>
          <div style="height: 470px;">
            <div class="smallTitle">
              <svg-icon icon-class="cpdfh" class="svg_class" />
              äº§å“å¾…发货
            </div>
            <div class="lineContent horn" style="height: 435px">
              <el-table
                ref="tableDataBottomRef"
                :data="tableDataBottom"
                style="width: 100%;"
                class="tableData"
                :header-cell-style="headerCellStyleCenter"
                :cell-style="cellStyleCenter"
                height="430"
              >
                <el-table-column
                  prop="voucherdate"
                  label="单据日期"
                  width="131"
                >
                  <template slot-scope="{row}">
                    <div v-if="row.voucherdate" class="ellipsis">{{ row.voucherdate.substring(0, 10) }}</div>
                    <div v-else>/</div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="wo"
                  label="单据编号"
                  width="205"
                >
                  <template slot-scope="{row}">
                    <div class="ellipsis">{{ row.wo }}</div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="customename"
                  label="客户"
                  width="388"
                >
                  <template slot-scope="{row}">
                    <div v-if="row.customename" class="ellipsis">{{ row.customename }}</div>
                    <div v-else>/</div>
                  </template>
                </el-table-column>
                <!--                  <el-table-column-->
                <!--                    prop="username"-->
                <!--                    label="业务员"-->
                <!--                    width="65"-->
                <!--                  >-->
                <!--                    <template slot-scope="{row}">-->
                <!--                      <div v-if="row.username" class="ellipsis">{{ row.username }}</div>-->
                <!--                      <div v-else>/</div>-->
                <!--                    </template>-->
                <!--                  </el-table-column>-->
                <!--                <el-table-column-->
                <!--                  prop="SourceVoucherCode"-->
                <!--                  label="来源单号"-->
                <!--                  width="185"-->
                <!--                >-->
                <!--                  <template slot-scope="{row}">-->
                <!--                    <div v-if="row.SourceVoucherCode" class="ellipsis">{{ row.SourceVoucherCode }}</div>-->
                <!--                    <div v-else>/</div>-->
                <!--                  </template>-->
                <!--                </el-table-column>-->
                <!--                  <el-table-column-->
                <!--                    prop="materiel_code"-->
                <!--                    label="产品编号"-->
                <!--                    width="96"-->
                <!--                  />-->
                <el-table-column
                  prop="materiel_name"
                  label="产品名称"
                  width="200"
                >
                  <template slot-scope="{row}">
                    <div v-if="row.materiel_name" class="ellipsis">{{ row.materiel_name }}</div>
                  </template>
                </el-table-column>
                <!--                  <el-table-column-->
                <!--                    prop="specification"-->
                <!--                    label="规格型号"-->
                <!--                    width="100"-->
                <!--                  >-->
                <!--                    <template slot-scope="{row}">-->
                <!--                      <div v-if="row.specification" class="ellipsis">{{ row.specification }}</div>-->
                <!--                      <div v-else>/</div>-->
                <!--                    </template>-->
                <!--                  </el-table-column>-->
                <el-table-column
                  prop="quantity"
                  label="数量"
                  width="100"
                >
                  <template slot-scope="{row}">
                    <div class="ellipsis">{{ row.quantity }}</div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="saleOutQuantity"
                  label="已发货数量"
                  width="120"
                >
                  <template slot-scope="{row}">
                    <div v-if="row.saleOutQuantity" class="ellipsis">{{ row.saleOutQuantity }}</div>
                    <div v-else>0</div>
                  </template>
                </el-table-column>
                <!--                <el-table-column-->
                <!--                  prop="priuserdefnvc1"-->
                <!--                  label="检验方式"-->
                <!--                  width="110"-->
                <!--                >-->
                <!--                  <template slot-scope="{row}">-->
                <!--                    <div v-if="row.priuserdefnvc1">{{ row.priuserdefnvc1 }}</div>-->
                <!--                    <div v-else>/</div>-->
                <!--                  </template>-->
                <!--                </el-table-column>-->
                <!--                <el-table-column-->
                <!--                  prop="priuserdefnvc2"-->
                <!--                  label="检验人员"-->
                <!--                  width="110"-->
                <!--                >-->
                <!--                  <template slot-scope="{row}">-->
                <!--                    <div v-if="row.priuserdefnvc2">{{ row.priuserdefnvc2 }}</div>-->
                <!--                    <div v-else>/</div>-->
                <!--                  </template>-->
                <!--                </el-table-column>-->
                <el-table-column
                  prop="deliveryDate"
                  label="预计交货日期"
                  width="200"
                >
                  <template slot-scope="{row}">
                    <div v-if="row.deliveryDate">{{ row.deliveryDate.substring(0,10) }}</div>
                    <div v-else>/</div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>

        </div>
        <div style="width: 500px;" class="flex_c_b">
          <div style="height: 470px;">
            <div class="smallTitle">
              <svg-icon icon-class="ph" class="svg_class" />
              åŠæˆå“ã€äº§å“åº“存量排行Top5
            </div>
            <div class="lineContent horn" style="height: 435px">
              <div id="bar03" style="width: 100%;height:100%; " />
              <!--/*              <div id="bar03" style="width: 100%;height:100%;margin-left: -25px;margin-top: -10px" />*/-->
            </div>
          </div>
          <div style="height: 470px;">
            <div class="smallTitle">
              <svg-icon icon-class="ph" class="svg_class" />
              åŽŸææ–™åº“存量排行Top5
            </div>
            <div class="lineContent horn" style="height: 435px">
              <div id="bar04" style="width: 100%;height:100%;" />
              <!--              <div id="bar04" style="width: 100%;height:100%;margin-left: -25px;margin-top: -10px" />-->
            </div>
          </div>
        </div>
      </div>

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

<script>
import './kbCommon.css'
import { bar02, loadEcharts } from '@/utils/myEcharts'
import { bar02, kbTop, loadEcharts } from '@/utils/myEcharts'
import {
  WareHouseRightBottomData,
  WareHouseRightTopData,
  WareHouseTopBottomData,
  WareHouseTopLeftData
} from '@/api/dzkb'
import MarqueeTips from 'vue-marquee-tips'

export default {
  name: 'Index2',
  components: {
    MarqueeTips
  },

  data() {
    return {
      onLine: navigator.onLine, // ç›‘听网络是否在线

      headTime: '',
      tableDataTop: [],
      tableDataBottom: [],

      number1: '',
      number2: '',

      MarqueeTipsContent: '', // å…¬å‘Š
      speed: 100, // å…¬å‘Šæ’­æ”¾çš„速度
@@ -342,7 +349,10 @@
      tableTopTask: null,
      tableBottomTask: null,
      echartsRightTop: null,
      echartsRightBottom: null
      echartsRightBottom: null,

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

    }
  },
@@ -356,60 +366,38 @@
    }, 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)
  },
  methods: {
    // æ›´æ–°ç½‘络状态
    updateOnlineStatus(e) {
      if (e.isFirst) {
        this.getWareHouseTopLeftData()
        this.getWareHouseTopBottomData()
        this.getEcharts()
        // this.getMarqueeTipsContent()
      } 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.getWareHouseTopLeftData()
          this.getWareHouseTopBottomData()
          this.getEcharts()
          loading.close()
          this.$message.success('网络连接成功！')
        } else {
          clearInterval(this.tableTopTask)
          clearInterval(this.tableBottomTask)
          clearInterval(this.echartsRightTop)
          clearInterval(this.echartsRightBottom)
          this.$message.error('网络掉线，请关注网络状态！')
        }
      }
    },
    this.getTopBar()

    // èŽ·å–公告
    getMarqueeTipsContent() {
      // this.MarqueeTipsContent = '各位员工们：根据上级的通知，结合我企实际情况，现将20xx年的元旦放假通知如下：一、1月1日至1月3日放假调休，共3天。1月4日正式上班。二、节假日期间，各班组要严格落实上级的重要指示精神，按照上级的具体要求，认真抓好落实节日期间值班备勤工作，确保节日期间企业各项工作正常运转。xx企业20xxå¹´12月28日'
      // const spance = ' '.padStart(this.MarqueeTipsContent.length * 2, ' ')
      // this.MarqueeTipsContent = this.MarqueeTipsContent + spance
      // this.speed = this.MarqueeTipsContent.length / 10
    this.getWareHouseTopLeftData()
    this.getWareHouseTopBottomData()
    this.getEcharts()
    this.setStarsRef()
  },

  methods: {
    setStarsRef() {
      const starNodes = Array.from(this.$refs.starsRef.children)
      starNodes.forEach(item => {
        const speed = 0.2 + Math.random() * 1
        const thisDistance = this.distance + Math.random() * 300
        item.style.transformOrigin = `0 0 ${thisDistance}px`
        item.style.transform = `
        translate3d(0,0,-${thisDistance}px)
        rotateY(${Math.random() * 360}deg)
        rotateX(${Math.random() * -50}deg)
        scale(${speed},${speed})`
      })
    },
    // èŽ·å–topEcharts
    getTopBar() {
      loadEcharts('topBarLeft', kbTop())
      loadEcharts('topBarRight', kbTop())
    },
    // èŽ·å–左上table数据
    getWareHouseTopLeftData() {
      WareHouseTopLeftData().then(res => {
        this.tableDataTop = res.data
        this.number1 = this.tableDataTop.length
        // this.number1 = this.tableDataTop.length
        const divData = this.$refs.tableDataTopRef.bodyWrapper
        // æ‹¿åˆ°å…ƒç´ åŽï¼Œå¯¹å…ƒç´ è¿›è¡Œå®šæ—¶å¢žåŠ è·ç¦»é¡¶éƒ¨è·ç¦»ï¼Œå®žçŽ°æ»šåŠ¨æ•ˆæžœ(此配置为每100毫秒移动1像素)
        this.tableTopTask = setInterval(() => {
@@ -422,7 +410,7 @@
            divData.scrollTop = 0
            WareHouseTopLeftData().then(res => {
              this.tableDataTop = res.data
              this.number1 = this.tableDataTop.length
              // this.number1 = this.tableDataTop.length
              if (this.tableDataTop.length > 9) {
                clearInterval(this.tableTopTask)
                this.getWareHouseTopLeftData()
@@ -499,23 +487,25 @@

      this.headTime = `${y}-${m}-${d}  ${hh}:${mm}:${ss}   ${week}`
    },
    headerCellStyle() {
    headerCellStyleCenter() {
      return {
        backgroundColor: 'rgb(30 ,33, 46)',
        // backgroundColor: 'rgb(30 ,33, 46)',
        backgroundColor: '#000',
        padding: '10px 0',
        textAlign: 'center',
        color: '#07acc2',
        border: 'none'
        border: 'none',
        fontSize: '18px'
      }
    },
    cellStyle() {
    cellStyleCenter() {
      return {
        padding: '8px 0',
        padding: '7.5px 0',
        textAlign: 'center',
        backgroundColor: 'rgba(30, 33, 46  )',
        // backgroundColor: 'transparent',
        backgroundColor: '#000',
        color: '#fff',
        border: 'none'
        border: 'none',
        fontSize: '18px'
      }
    }
  }
@@ -523,94 +513,15 @@
</script>

<style scoped lang="scss">
//$kbBorderColor: #09d8f2;
$kbBorderColor: rgba(9,216,242,0.4);
$kbBackgroundColor: rgba(30, 33, 46, 0.6);

.kb_content {
  display: flex;
  position: relative;
  height: 990px;
  width: 100%;
  background-color: #000;
  letter-spacing: 2px;

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

    .kb_left_top {
      height:880px;
      margin-top: 40px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;

      .kb_left_top_block {
        width: 100%;
        height: 460px;
        display: flex;
        flex-direction: column;

        .headTitle {
          //line-height: 54px;
          //border-bottom: 1px solid rgba(255, 255, 255, 0.6);
          //text-align: center;
          //font-size: 26px;
          line-height: 20px;
          //font-size: 18px;
          margin-bottom: 10px;
          margin-top: -10px;
          display: flex;
          color: #00ffff;

        }

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

    }

  }

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

    .kb_right_top {
      height: 972px;
      width: 100%;

      .kb_right_top_content {
        height: 100%;
        display: flex;
        flex-direction: column;

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

        .content_body {
          height: 443px;
          border: 1px solid $kbBorderColor;
          background-color: $kbBackgroundColor;

        }
      }
    }

  }
$main_color:#09d8f2;
$color01: #00FFFF;
.tableData{
  background: #000;
}

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

::v-deep .el-table__body-wrapper::-webkit-scrollbar {
@@ -628,3 +539,38 @@
  font-size: 18px;
}
</style>

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

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

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

 src/views/kb/dccj.vue

ÎļþÒÑɾ³ý

 src/views/kb/kbCommon.css

@@ -10,6 +10,8 @@
  color: #fff;
  background-size: 1920px 1080px;
  /*background: url("../../assets/images/kb_bg.png") no-repeat;*/

  overflow: hidden;
}

.kb_header {
@@ -67,6 +69,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 +96,8 @@
  margin-top: 10px;
}

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

/*scrollbar END*/


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

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



.lineContent {
  height: 435px;
  border: 1px solid #09d8f2;
  border-radius: 5px;
  padding: 2px;
  box-shadow: #00FFFF 0 0 10px;
}

.lineContentCenter {
  height: 935px;
  border: 1px solid #09d8f2;
  border-radius: 5px;
  padding: 2px;
  box-shadow: #00FFFF 0 0 10px;
}

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

 src/views/kb/zhkb.vue

@@ -1,44 +1,41 @@
<template>
  <div>
    <div class="kb_dashboard">
      <!--    æ˜Ÿç©ºèƒŒæ™¯-->
      <div ref="starsRef" class="stars">
        <div v-for="(item, index) in starsCount" :key="index" class="star" />
      </div>

      <div class="kb_header">
        <div class="flex_c_c kb_header_text">
          è½¦é—´ç»¼åˆçœ‹æ¿
          <div id="topBarLeft" style="width:600px;height:100%" />
          è½¦é—´ç»¼åˆæ•°å­—化看板
          <div id="topBarRight" style="width:600px;height:100%;transform:rotate(180deg);" />
        </div>
        <div class="kb_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="margin-left: 30px">{{ number1 }} å•</div>
          </div>

          <div class="kb_left_top kb_pd10">
            <div class="kb_left_top02">
      <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>
            <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>销售订单:{{ item.saleordercode }}</div>
                    <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 +95,179 @@
                </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="content_body">
                <el-table
                  ref="tableData"
                  :data="tableData"
                  style="width: 100%;"
                  :header-cell-style="headerCellStyle"
                  :cell-style="cellStyle"
                  height="440"
                >
                  <el-table-column
                    prop="RowNum"
                    label="序号"
                    width="50"
                  />
                  <!--                  label="加工状态"-->
                  <el-table-column
                    prop="status"
                    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"
                    label="派发时间"
                    width="115"
                  >
                    <template slot-scope="{row}">
                      <div>{{ row.lm_date.substring(0, 10) }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="saleOrderCode"
                    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"
                  />
                  <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="planenddate"
                    label="预计开始"
                    width="115"
                  >
                    <template slot-scope="{row}">
                      <div>{{ row.planenddate.substring(0, 10) }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="planstartdate"
                    label="预计结束"
                    width="125"
                  >
                    <template slot-scope="{row}">
                      <div>{{ row.planstartdate.substring(0, 10) }}</div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
          <div>
            <div class="smallTitle">
              <svg-icon icon-class="cxmc" class="svg_class" />
              äº§çº¿åŠ å·¥ä»»åŠ¡
            </div>
            <div class="lineContent horn">
              <el-table
                ref="tableDataLeftBottomRef"
                :data="tableDataLeftBottom"
                class="tableData"
                style="width: 100%;"
                :header-cell-style="headerCellStyle"
                :cell-style="cellStyle"
                height="428"
              >
                <el-table-column
                  prop="RowNum"
                  label="序号"
                  width="60"
                />

                <el-table-column
                  prop="status"
                  width="80"
                  label="状态"
                >
                  <template slot-scope="{row}">
                    <div v-if="row.status==='ALLO'">已派发</div>
                    <div v-if="row.status==='START'">开工</div>
                    <div v-if="row.status==='NEW'">新工单</div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="lm_date"
                  label="派发时间"
                  width="120"
                >
                  <template slot-scope="{row}">
                    <div>{{ row.lm_date.substring(0, 10) }}</div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="saleOrderCode"
                  label="销售订单号"
                  width="170"
                >
                  <template slot-scope="{row}">
                    <div v-if="row.saleOrderCode">{{ row.saleOrderCode }}</div>
                    <div v-else>/</div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="wo_code"
                  label="加工单号"
                  width="190"
                />
                <el-table-column
                  prop="partname"
                  label="产品名称"
                  width="350"
                >
                  <template slot-scope="{row}">
                    <div v-if="row.partname" class="ellipsis">{{ row.partname }}</div>
                    <div v-else>/</div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="plan_qty"
                  label="任务数量"
                  width="105"
                />
                <el-table-column
                  prop="good_qty"
                  label="完工数量"
                  width="105"
                />
                <el-table-column
                  prop="ng_qty"
                  label="不良数量"
                  width="105"
                />
                <el-table-column
                  label="完成率"
                  width="105"
                >
                  <template slot-scope="{row}">
                    <div>{{ parseFloat((row.good_qty * 100 / row.plan_qty).toFixed(2)) }}%</div>
                  </template>
                </el-table-column>
                <!--                <el-table-column-->

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

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

          </div>
          <div 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 +277,33 @@

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

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

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

      headTime: '',

      lineContent: [],
      tableDataRightTop: [],
      tableDataRightTopTemp: [],
      tableDataLeftBottom: [],
      tableDataLeftBottomTemp: [],
      lineContent3: [],

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

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

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

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

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

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

@@ -361,77 +313,23 @@
    }, 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.getShopSearch()
    this.setStarsRef()
  },
  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)
    setStarsRef() {
      const starNodes = Array.from(this.$refs.starsRef.children)
      starNodes.forEach(item => {
        const speed = 0.2 + Math.random() * 1
        const thisDistance = this.distance + Math.random() * 300
        item.style.transformOrigin = `0 0 ${thisDistance}px`
        item.style.transform = `
        translate3d(0,0,-${thisDistance}px)
        rotateY(${Math.random() * 360}deg)
        rotateX(${Math.random() * -50}deg)
        scale(${speed},${speed})`
      })
    },
    // èŽ·å–车间编码
@@ -442,17 +340,26 @@
        res1.data.forEach(item => {
          this.ShopArr.push(item.org_code)
        })

        if (this.ShopArr.length > 0) {
          this.getShopSearchLine()
          this.getRightRightData()
          this.getLeftBottomData()
          this.getEcharts()
        }
      }
      setInterval(() => {
        this.ShopSearchTask = ShopSearch().then(res1 => {
          if (res1.code === '200') {
            this.ShopArr = []
            res1.data.forEach(item => {
              this.ShopArr.push(item.org_code)
            })
          }
        })
      }, 1000 * 30)
      if (this.ShopArr.length > 0) {
        setInterval(() => {
          this.ShopSearchTask = ShopSearch().then(res1 => {
            if (res1.code === '200') {
              this.ShopArr = []
              res1.data.forEach(item => {
                this.ShopArr.push(item.org_code)
              })
            }
          })
        }, 1000 * 60)
      }
    },
    // äº§çº¿åŠ å·¥ä¸­ä»»åŠ¡
    getShopSearchLine() {
@@ -462,12 +369,11 @@
        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(() => {
      const timer = setInterval(() => {
        if (Math.floor(start / 3) === count && count !== 0) {
          start = 0
          LineSearchTopLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
@@ -479,80 +385,85 @@
            this.number1 = this.lineContent.length
          })
        } else if (count === 0) {
          clearInterval(this.ShopSearchLineTask)
          clearInterval(timer)
          this.getShopSearchLine()
        }
        this.lineContent3 = this.lineContent.slice(start, start + 3)
        start = start + 3
      }, 1000 * 3)
      }, 1000 * 10)
    },

    // äº§çº¿åŠ å·¥ä»»åŠ¡
    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.tableData.length <= 10 ? 1000 * 3 : 100)
      })
    },
    // å½“日完工产品数量排行
    getTableDataRankRoll() {
      LineSearchTopRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
        this.tableDataRank = res.data
        this.tableDataRightTopTemp = 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
        this.tableDataRightTop = this.tableDataRightTopTemp.slice(startValue, startValue + scale)

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

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

          nowLoop++
        }, 1000 * 10)
      })
    },
    // èŽ·å–echarts
    // äº§çº¿åŠ å·¥ä»»åŠ¡  å·¦ä¸‹æ•°æ®
    getLeftBottomData() {
      let startValue = 0 // åˆå§‹å€¼
      const scale = 10// åˆ»åº¦

      LineSearchBottomLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
        this.tableDataLeftBottomTemp = res.data
        this.tableDataLeftBottom = this.tableDataLeftBottomTemp.slice(startValue, startValue + scale)

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

        const timer = setInterval(() => {
          startValue = startValue + scale
          this.tableDataLeftBottom = this.tableDataLeftBottomTemp.slice(startValue, startValue + scale)
          if (nowLoop === loop) {
            clearInterval(timer)
            this.getLeftBottomData()
          }

          nowLoop++
        }, 1000 * 10)
      })
    },

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

      this.EchartsTask = setInterval(() => {
      setInterval(() => {
        LineSearchBottomRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
          loadEcharts('bar02', bar02(res.data.map(i => i.cont), res.data.map(i => i.name)))
          dataArr = res.data.map(i => i.cont)
          titlenameArr = res.data.map(i => i.name)
          loadEcharts('bar01', bar02(dataArr, titlenameArr))
        })
      }, 1000 * 15)
      }, 1000 * 10)
    },
    // èŽ·å–topEcharts
    getTopBar() {
      loadEcharts('topBarLeft', kbTop())
      loadEcharts('topBarRight', kbTop())
    },
    // èŽ·å–当前时间
    getNowTime() {
@@ -572,266 +483,136 @@
    },
    headerCellStyle() {
      return {
        backgroundColor: 'rgb(30 ,33, 46)',
        backgroundColor: '#000',
        padding: '10px 0',
        textAlign: 'center',
        color: '#07acc2',
        border: 'none'
        border: 'none',
        fontSize: '18px'
      }
    },
    cellStyle() {
      return {
        padding: '8px 0',
        padding: '7px 0',
        textAlign: 'center',
        backgroundColor: 'rgba(30, 33, 46  )',
        // backgroundColor: 'transparent',
        backgroundColor: '#000',
        color: '#fff',
        border: 'none'
        border: 'none',
        fontSize: '18px'
      }
    }

  }

}
</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;
<style lang="scss" scoped>
$main_color: #09d8f2;
$color01: #00FFFF;

  .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;
        border-radius: 5px;
        background-color: $kbBackgroundColor;

        .kb_left_top_block {
          width: 100%;
          height: 133px;
          display: flex;
          font-size: 17px;
          border-bottom: 1px solid $kbBorderColor;
          justify-content: flex-start;

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

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

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

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

              .content02Parent {
                display: flex;

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

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

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

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

            }
          }

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

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

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

              }

            }
          }

        }

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

    .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;
      }
    }
  }
.tableData {
  background: #000;
}

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

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

::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  /* width: 0;宽度为0暗藏 */
  width: 0;
.kb_left_top_block {
  width: 100%;
  height: 143px;
  display: flex;
  font-size: 16px;
  border-bottom: 1px solid $main_color;
  justify-content: flex-start;

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

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

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

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

      .content02Parent {
        display: flex;

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

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

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

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

    }
  }

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

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

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

::v-deep .cell {
  padding: 0 !important;
  font-size: 18px;
.kb_left_top_block:nth-child(3n) {
  border-bottom: none !important;
}

.circleYellow {
@@ -840,4 +621,40 @@
  background-color: rgb(255 255 0);
  border-radius: 50%;
}

</style>

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

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

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

 src/views/kb/zhkb_back.vue

ÎļþÒÑɾ³ý

 src/views/kb/zpcj.vue

ÎļþÒÑɾ³ý