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

 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

 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 class="kb_header">
        <div class="flex_c_c" style="letter-spacing: 3px;margin-left: 1px;">
          é‡‡è´­è·Ÿè¸ªçœ‹æ¿

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

      <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>
      <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>
              <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 class="lineContent horn" style="height: 345px">
                <div id="cgddchart" class="flex_c_c" style="width: 100%;height:100%" />
            </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>
          <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,7 +143,7 @@
                  </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>
@@ -161,7 +153,7 @@
                  <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,38 +163,47 @@
                  <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">
        <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="headerCellStyle"
                  :cell-style="cellStyle"
                :header-cell-style="headerCellStyleCenter"
                :cell-style="cellStyleCenter"
                  :row-class-name="tableRowClassName"
                  height="865"
                height="920"
                >
                  <el-table-column
                    type="index"
                    label="序号"
                    width="70"
                  width="80"
                  >
                    <template slot-scope="{row}">
                      <div>NO.{{ row.index }}</div>
@@ -217,7 +218,7 @@
                  <el-table-column
                    prop="suppercode"
                    label="供应商编码"
                    width="130"
                  width="140"
                  >
                    <template slot-scope="{row}">
                      <div v-if="row.suppercode" class="ellipsis">{{ row.suppercode }}</div>
@@ -226,7 +227,7 @@
                  </el-table-column>
                  <el-table-column
                    prop="suppername"
                    width="283"
                  width="293"
                    label="供应商名称"
                  >
                    <template slot-scope="{row}">
@@ -236,49 +237,39 @@
                  <el-table-column
                    prop="cont"
                    label="次数"
                    width="50"
                  width="81"
                  />
                </el-table>
              </div>
            </div>
          </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)'
    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})`
        })
        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('网络掉线，请关注网络状态！')
        }
      }
    },

    // èŽ·å–公告
    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);

.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");
$main_color: #09d8f2;
$color01: #00FFFF;
.tableData {
  background: #000;
          }

          //.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,40 +1,43 @@
<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">
      <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="lineContent horn" style="height: 435px">
                <el-table
                  ref="tableDataTopRef"
                  :data="tableDataTop"
                  style="width: 100%;"
                  :header-cell-style="headerCellStyle"
                  :cell-style="cellStyle"
                  height="400"
                class="tableData"
                :header-cell-style="headerCellStyleCenter"
                :cell-style="cellStyleCenter"
                height="430"
                >
                  <el-table-column
                    prop="voucherdate"
                    label="单据日期"
                    width="140"
                  width="131"
                  >
                    <template slot-scope="{row}">
                      <div v-if="row.voucherdate" class="ellipsis">{{ row.voucherdate.substring(0, 10) }}</div>
@@ -150,21 +153,25 @@
                </el-table>
              </div>
            </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">
          <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%;"
                  :header-cell-style="headerCellStyle"
                  :cell-style="cellStyle"
                  height="440"
                class="tableData"
                :header-cell-style="headerCellStyleCenter"
                :cell-style="cellStyleCenter"
                height="430"
                >
                  <el-table-column
                    prop="voucherdate"
                    label="单据日期"
                    width="130"
                  width="131"
                  >
                    <template slot-scope="{row}">
                      <div v-if="row.voucherdate" class="ellipsis">{{ row.voucherdate.substring(0, 10) }}</div>
@@ -174,7 +181,7 @@
                  <el-table-column
                    prop="wo"
                    label="单据编号"
                    width="195"
                  width="205"
                  >
                    <template slot-scope="{row}">
                      <div class="ellipsis">{{ row.wo }}</div>
@@ -183,7 +190,7 @@
                  <el-table-column
                    prop="customename"
                    label="客户"
                    width="125"
                  width="388"
                  >
                    <template slot-scope="{row}">
                      <div v-if="row.customename" class="ellipsis">{{ row.customename }}</div>
@@ -200,16 +207,16 @@
                  <!--                      <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="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="产品编号"-->
@@ -218,7 +225,7 @@
                  <el-table-column
                    prop="materiel_name"
                    label="产品名称"
                    width="170"
                  width="200"
                  >
                    <template slot-scope="{row}">
                      <div v-if="row.materiel_name" class="ellipsis">{{ row.materiel_name }}</div>
@@ -237,7 +244,7 @@
                  <el-table-column
                    prop="quantity"
                    label="数量"
                    width="87"
                  width="100"
                  >
                    <template slot-scope="{row}">
                      <div class="ellipsis">{{ row.quantity }}</div>
@@ -246,37 +253,37 @@
                  <el-table-column
                    prop="saleOutQuantity"
                    label="已发货数量"
                    width="100"
                  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="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"
                  width="200"
                  >
                    <template slot-scope="{row}">
                      <div v-if="row.deliveryDate">{{ row.deliveryDate.substring(0,10) }}</div>
@@ -286,55 +293,55 @@
                </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 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 style="height: 470px;">
            <div class="smallTitle">
              <svg-icon icon-class="ph" class="svg_class" />
              åŽŸææ–™åº“存量排行Top5
              </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 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>
    </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.getTopBar()

        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.setStarsRef()
    },

    // èŽ·å–公告
    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
  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;

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

        .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;

        }
      }
    }

  }
}

::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="display: flex;justify-content: space-between;padding:0 20px 20px 20px">
        <!--       å·¦è¾¹-->
        <div style="width: 1400px ;height: 969px;" class="flex_c_b">
          <div>
            <div class="smallTitle">
              <svg-icon icon-class="cxjg" class="svg_class" />
            äº§çº¿åŠ å·¥ä¸­ä»»åŠ¡
            <div style="margin-left: 30px">{{ number1 }} å•</div>
          </div>

          <div class="kb_left_top kb_pd10">
            <div class="kb_left_top02">
            <div class="lineContent horn">
              <div v-for="item in lineContent3" :key="item.workcode" class="kb_left_top_block">
                <div class="kb_block02 kb_pd10">
                  <div>
                    <div>销售单号:{{ item.saleordercode }}</div>
                    <div class="kb_mt5">
                    <div>销售订单:{{ 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,32 +95,33 @@
                </div>
              </div>
            </div>

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

                  <el-table-column
                    prop="status"
                  width="80"
                    label="状态"
                    width="65"
                  >
                    <template slot-scope="{row}">
                      <div v-if="row.status==='ALLO'">已派发</div>
@@ -134,7 +132,7 @@
                  <el-table-column
                    prop="lm_date"
                    label="派发时间"
                    width="115"
                  width="120"
                  >
                    <template slot-scope="{row}">
                      <div>{{ row.lm_date.substring(0, 10) }}</div>
@@ -143,137 +141,104 @@
                  <el-table-column
                    prop="saleOrderCode"
                    label="销售订单号"
                    width="178"
                  width="170"
                  >
                    <template slot-scope="{row}">
                      <div v-if="row.saleOrderCode" class="ellipsis">{{ row.saleOrderCode }}</div>
                    <div v-if="row.saleOrderCode">{{ 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>
                  width="190"
                />
                  <el-table-column
                    prop="partname"
                    label="产品名称"
                    width="150"
                  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="partspec"-->
                  <!--                    label="规格"-->
                  <!--                    width="125"-->
                  <!--                  >-->
                  <!--                    <template slot-scope="{row}">-->
                  <!--                      <div v-if="row.partspec" class="ellipsis">{{ row.partspec }}</div>-->
                  <!--                      <div v-else>/</div>-->
                  <!--                    </template>-->
                  <!--                  </el-table-column>-->
                  <!--                  <el-table-column-->
                  <!--                    prop="name"-->
                  <!--                    label="单位"-->
                  <!--                    width="50"-->
                  <!--                  />-->
                  <el-table-column
                    prop="plan_qty"
                    label="任务数量"
                    width="85"
                  width="105"
                  />
                  <el-table-column
                    prop="good_qty"
                    label="完工数量"
                    width="85"
                  width="105"
                  />
                  <el-table-column
                    prop="ng_qty"
                    label="不良数量"
                    width="85"
                  width="105"
                  />
                  <el-table-column
                    prop="wcl"
                    label="完成率"
                    width="60"
                  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
                    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-column-->

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

            </div>
          </div>
        <!--        å³è¾¹-->
        <div style="width: 450px;height: 969px;" class="flex_c_b">
          <div>
            <div class="smallTitle">
              <svg-icon icon-class="drwg" class="svg_class" />
              å½“日完工产品数量排行
        </div>
        <div class="kb_right kb_pd10">
          <div class="kb_right_top kb_pd10">
            <div class="kb_right_top_content">
              <div class="content_head kb_title_text">当日完工产品数量排行</div>
              <div class="content_body">
            <div class="lineContent horn">
                <el-table
                  ref="tableDataRank"
                  :data="tableDataRank"
                  class="tableDataRank"
                ref="tableDataRightTopRef"
                :data="tableDataRightTop"
                class="tableData"
                  style="width: 100%;"
                  :header-cell-style="headerCellStyle"
                  :cell-style="cellStyle"
                  height="396"
                height="428"
                >
                  <el-table-column
                    type="index"
                    label="序号"
                    width="55"
                  width="60"
                  />
                  <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"
                  width="125"
                    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"
                  width="160"
                    label="产品"
                  >
                    <template slot-scope="{row}">
@@ -284,19 +249,25 @@
                  <el-table-column
                    prop="good_qty"
                    label="数量"
                    width="100"
                  />
                  width="90"
                >
                  <template slot-scope="{row}">
                    <div>{{ parseFloat(row.good_qty) }}</div>
                  </template>
                </el-table-column>
                </el-table>
              </div>

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

          </div>
        </div>
      </div>
@@ -306,52 +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,7 +340,15 @@
        res1.data.forEach(item => {
          this.ShopArr.push(item.org_code)
        })

        if (this.ShopArr.length > 0) {
          this.getShopSearchLine()
          this.getRightRightData()
          this.getLeftBottomData()
          this.getEcharts()
      }
      }
      if (this.ShopArr.length > 0) {
      setInterval(() => {
        this.ShopSearchTask = ShopSearch().then(res1 => {
          if (res1.code === '200') {
@@ -452,7 +358,8 @@
            })
          }
        })
      }, 1000 * 30)
        }, 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,101 +483,69 @@
    },
    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;
      }
.tableData {
  background: #000;
    }

    .kb_left_top {
      height: 495px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      padding-top: 70px;
.el-table::before {
  height: 0;
}

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

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

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

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

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

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

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

@@ -705,7 +583,7 @@
                  }

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

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

            .kb_block03_02_content {
@@ -728,110 +606,13 @@
                  background-color: #00ff8b;
                  border-radius: 50%;
                }

              }

            }
          }

  }
        }

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

    .kb_left_bottom {
      height: 495px;

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

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

        }

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

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

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

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

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

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

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

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

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

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

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

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

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

.circleYellow {
@@ -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

ÎļþÒÑɾ³ý