From c400c87b6193d402bd0a3b233a9b08049b2ca426 Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期二, 21 三月 2023 16:24:32 +0800
Subject: [PATCH] 1.莱科看板迭代
---
src/icons/svg/cxmc.svg | 1
src/views/kb/cgdd.vue | 573 ++----
src/views/kb/ckgl.vue | 826 ++++-----
src/icons/svg/zbl.svg | 1
src/icons/svg/cxjg.svg | 1
src/views/kb/cjsc.vue | 523 ++++++
src/icons/svg/drwg.svg | 1
src/views/kb/kbCommon.css | 59
src/icons/svg/tree.svg | 2
src/icons/svg/bll.svg | 1
src/icons/svg/home.svg | 2
src/icons/svg/rbl.svg | 1
src/icons/svg/yqjh.svg | 1
src/icons/svg/cggz.svg | 1
src/permission.js | 2
src/icons/svg/cpdfh.svg | 1
src/icons/svg/ph.svg | 1
src/views/kb/zhkb.vue | 1047 +++++-------
src/router/index.js | 27
src/utils/myEcharts.js | 1095 ++++++++++++
/dev/null | 843 ---------
src/icons/svg/blmx.svg | 1
src/api/dzkb.js | 61
src/icons/svg/scxx.svg | 1
src/icons/svg/cpdrk.svg | 1
src/icons/svg/top5.svg | 1
26 files changed, 2,791 insertions(+), 2,283 deletions(-)
diff --git a/src/api/dzkb.js b/src/api/dzkb.js
index f55828e..2094fc5 100644
--- a/src/api/dzkb.js
+++ b/src/api/dzkb.js
@@ -122,3 +122,64 @@
params: data
})
}
+
+// 瀵屽皵杈捐溅闂寸敓浜ф暟瀛楀寲鐪嬫澘锛屼骇绾挎暟鎹�
+export function WkshpLineData(data) {
+ return request({
+ url: 'KanBanManagerent/WkshpLineData',
+ method: 'get',
+ params: data
+ })
+}
+
+// 瀵屽皵杈捐溅闂寸敓浜ф暟瀛楀寲鐪嬫澘锛岀敓浜т俊鎭�
+export function WkshpContentData() {
+ return request({
+ url: 'KanBanManagerent/WkshpContentData',
+ method: 'get'
+ })
+}
+// 瀵屽皵杈捐溅闂磋川閲忔暟瀛楀寲鐪嬫澘,top5涓嶈壇
+export function BadTop5(data) {
+ return request({
+ url: 'KanBanManagerent/BadTop5',
+ method: 'get',
+ params: data
+ })
+}
+
+// 瀵屽皵杈捐溅闂磋川閲忔暟瀛楀寲鐪嬫澘,鍛ㄤ笉鑹秼鍔�
+export function BadWeek(data) {
+ return request({
+ url: 'KanBanManagerent/BadWeek',
+ method: 'get',
+ params: data
+ })
+}
+
+// 瀵屽皵杈捐溅闂磋川閲忔暟瀛楀寲鐪嬫澘,鏃ヤ笉鑹垎甯�
+export function BadDayDistriBute(data) {
+ return request({
+ url: 'KanBanManagerent/BadDayDistriBute',
+ method: 'get',
+ params: data
+ })
+}
+
+// 瀵屽皵杈捐溅闂磋川閲忔暟瀛楀寲鐪嬫澘,鍛ㄤ笉鑹垎甯�
+export function BadWeekDistriBute(data) {
+ return request({
+ url: 'KanBanManagerent/BadWeekDistriBute',
+ method: 'get',
+ params: data
+ })
+}
+
+// 瀵屽皵杈捐溅闂磋川閲忔暟瀛楀寲鐪嬫澘,涓嶈壇鏄庣粏
+export function BadContManger(data) {
+ return request({
+ url: 'KanBanManagerent/BadContManger',
+ method: 'get',
+ params: data
+ })
+}
diff --git a/src/icons/svg/bll.svg b/src/icons/svg/bll.svg
new file mode 100644
index 0000000..c29228d
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/icons/svg/blmx.svg b/src/icons/svg/blmx.svg
new file mode 100644
index 0000000..2b3d6b0
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/icons/svg/cggz.svg b/src/icons/svg/cggz.svg
new file mode 100644
index 0000000..7f9eecd
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/icons/svg/cpdfh.svg b/src/icons/svg/cpdfh.svg
new file mode 100644
index 0000000..44cd3e4
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/icons/svg/cpdrk.svg b/src/icons/svg/cpdrk.svg
new file mode 100644
index 0000000..b3c4378
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/icons/svg/cxjg.svg b/src/icons/svg/cxjg.svg
new file mode 100644
index 0000000..846ea0f
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/icons/svg/cxmc.svg b/src/icons/svg/cxmc.svg
new file mode 100644
index 0000000..2cdee5f
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/icons/svg/drwg.svg b/src/icons/svg/drwg.svg
new file mode 100644
index 0000000..552eb2a
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/icons/svg/home.svg b/src/icons/svg/home.svg
index 7c09a33..41733d0 100644
--- a/src/icons/svg/home.svg
+++ b/src/icons/svg/home.svg
@@ -7,4 +7,4 @@
<rect id="鐭╁舰" x="0" y="0" width="20" height="20"></rect>
<path d="M15.4667218,18.9453146 C15.4288032,18.9453146 15.3983216,18.9442715 15.3764745,18.9431705 L3.82986779,18.9431705 C3.05639166,18.9431705 2.61116286,18.6173957 2.37387749,18.3441041 C1.85389337,17.7452309 1.89565591,16.9332761 1.91910628,16.7079863 L1.91910628,9.76308164 L3.15537002,9.76308164 L3.15537002,16.7926511 L3.1495364,16.8290243 C3.13483645,16.95267 3.13344566,17.3366071 3.30965187,17.5361865 C3.34693295,17.5784126 3.46037946,17.7069068 3.82988711,17.7069068 L15.4258092,17.7069068 L15.4402966,17.7084907 C15.4818853,17.7099588 15.871347,17.7168741 16.1163011,17.4852485 C16.2796038,17.3308315 16.3623948,17.0755044 16.3623948,16.7263371 L16.3623948,9.75775026 L17.5986586,9.75775026 L17.5986586,16.7263371 C17.5986586,17.6124099 17.2461882,18.1243003 16.9504894,18.3977078 C16.4186255,18.8895089 15.7448231,18.9453146 15.4667218,18.9453146 Z M2.53721884,10.3432177 L0.637448489,10.3432177 C0.380711281,10.3432177 0.150727593,10.184551 0.0595724588,9.94454198 C-0.0315633585,9.70453297 0.0351176168,9.43319239 0.227124828,9.26278116 L9.34880022,1.16737852 C9.58098601,0.961308808 9.9299794,0.95941578 10.1644059,1.16299365 L19.412837,9.19467076 C19.6051339,9.36168226 19.6753112,9.62954584 19.5896034,9.86938101 C19.5038955,10.1092162 19.2798613,10.2719394 19.025249,10.2792604 L16.9982014,10.3374421 C16.9921553,10.3376352 16.9861478,10.3377125 16.9801211,10.3377125 C16.6469673,10.3377125 16.3722077,10.0725146 16.3625687,9.73731327 C16.3527752,9.39606585 16.6214694,9.11149339 16.9627168,9.10169986 L17.4056662,9.08898953 L9.76354739,2.45220424 L2.26518286,9.10695398 L2.53721884,9.10695398 C2.87860148,9.10695398 3.1553507,9.38370321 3.1553507,9.72508585 C3.1553507,10.0664685 2.87860148,10.3432177 2.53721884,10.3432177 Z M7.68801511,18.3308916 C7.39996566,18.3308916 7.16646635,18.0973923 7.16646635,17.8093428 L7.16646635,13.4467612 C7.16646635,13.3527666 7.19030306,12.9657774 7.55320441,12.5969265 C7.99362337,12.1493025 8.7403653,11.9223322 9.77270347,11.9223322 C10.7894918,11.9223322 11.5281207,12.1524124 11.9680761,12.6061985 C12.3394381,12.9892084 12.3633714,13.3925009 12.3626528,13.4994763 L12.3626528,17.7925953 C12.3626528,18.0806447 12.129138,18.3141441 11.8410886,18.3141441 C11.5530391,18.3141441 11.3195398,18.0806447 11.3195398,17.7925953 L11.3195398,13.505619 C11.3160822,13.4830765 11.2942737,13.3877103 11.1646785,13.2826859 C11.018471,13.1641977 10.6431877,12.9654297 9.77268415,12.9654297 C8.76296575,12.9654297 8.4041402,13.2193467 8.29673978,13.3284856 C8.24400541,13.3820892 8.22186856,13.4276957 8.21257727,13.4564968 C8.21116715,13.4608431 8.21020132,13.464436 8.20954456,13.4671016 L8.20954456,17.8093428 C8.20956387,18.0973923 7.97606456,18.3308916 7.68801511,18.3308916 Z" id="褰㈢姸" fill="#00A79D" fill-rule="nonzero"></path>
</g>
-</svg>
+</svg>
\ No newline at end of file
diff --git a/src/icons/svg/ph.svg b/src/icons/svg/ph.svg
new file mode 100644
index 0000000..ee6c52a
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/icons/svg/rbl.svg b/src/icons/svg/rbl.svg
new file mode 100644
index 0000000..fdbb37e
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/icons/svg/scxx.svg b/src/icons/svg/scxx.svg
new file mode 100644
index 0000000..02a4f9f
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/icons/svg/top5.svg b/src/icons/svg/top5.svg
new file mode 100644
index 0000000..00fa43d
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/icons/svg/tree.svg b/src/icons/svg/tree.svg
index f7ee5bd..d535ade 100644
--- a/src/icons/svg/tree.svg
+++ b/src/icons/svg/tree.svg
@@ -1 +1 @@
-<svg t="1556618636358" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10538" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512 307.2c-112.9216 0-204.8 91.8784-204.8 204.8 0 112.9216 91.8784 204.8 204.8 204.8 112.9216 0 204.8-91.8784 204.8-204.8C716.8 399.0784 624.9216 307.2 512 307.2zM512 665.6c-84.8256 0-153.6-68.7744-153.6-153.6 0-84.8256 68.7744-153.6 153.6-153.6s153.6 68.7744 153.6 153.6C665.6 596.8256 596.8256 665.6 512 665.6zM985.6 384l-71.872 0c-34.2144 0-51.3408-41.3568-27.1488-65.5488l50.8288-50.8288c15.0016-15.0016 15.0016-39.3088 0-54.3104l-126.7072-126.72c-7.5008-7.5008-17.3312-11.2512-27.1488-11.2512s-19.6608 3.7504-27.1488 11.2512l-50.8288 50.8288c-7.8208 7.8208-17.4464 11.328-26.88 11.328-19.7376 0-38.6816-15.3344-38.6816-38.4768L640.0128 38.4c0-21.2096-17.1904-38.4-38.4-38.4L422.4 0c-21.2096 0-38.4 17.1904-38.4 38.4l0 71.872c0 23.1424-18.944 38.4768-38.6816 38.4768-9.4336 0-19.0464-3.4944-26.88-11.328l-50.8288-50.8288c-7.5008-7.5008-17.3312-11.2512-27.1488-11.2512s-19.6608 3.7504-27.1488 11.2512l-126.7072 126.72c-15.0016 15.0016-15.0016 39.3088 0 54.3104l50.8288 50.8288C161.6128 342.6432 144.4864 384 110.272 384L38.4 384c-21.2096 0-38.4 17.1904-38.4 38.4l0 179.2c0 21.2096 17.1904 38.4 38.4 38.4l71.872 0c34.2144 0 51.3408 41.3568 27.1488 65.5488l-50.8288 50.8288c-15.0016 15.0016-15.0016 39.3088 0 54.3104l126.7072 126.72c7.5008 7.5008 17.3312 11.2512 27.1488 11.2512s19.6608-3.7504 27.1488-11.2512l50.8288-50.8288c7.8208-7.8208 17.4464-11.328 26.88-11.328 19.7376 0 38.6816 15.3344 38.6816 38.4768L383.9872 985.6c0 21.2096 17.1904 38.4 38.4 38.4l179.2 0c21.2096 0 38.4-17.1904 38.4-38.4l0-71.872c0-23.1424 18.944-38.4768 38.6816-38.4768 9.4336 0 19.0464 3.4944 26.88 11.328l50.8288 50.8288c7.5008 7.5008 17.3312 11.2512 27.1488 11.2512s19.6608-3.7504 27.1488-11.2512l126.7072-126.72c15.0016-15.0016 15.0016-39.3088 0-54.3104l-50.8288-50.8288C862.3872 681.3568 879.5136 640 913.728 640L985.6 640c21.2096 0 38.4-17.1904 38.4-38.4L1024 422.4C1024 401.1904 1006.8096 384 985.6 384zM972.8 588.8l-59.072 0c-36.3648 0-68.864 21.7088-82.7776 55.3088s-6.2976 71.9232 19.4176 97.6384l41.7664 41.7664-108.608 108.608-41.7664-41.7664c-16.9728-16.9728-39.3728-26.3168-63.0784-26.3168-49.5616 0-89.8816 40.2304-89.8816 89.6768L588.8 972.8 435.2 972.8l0-59.072c0-49.4464-40.32-89.6768-89.8816-89.6768-23.7056 0-46.1056 9.344-63.0784 26.3168l-41.7664 41.7664-108.608-108.608 41.7664-41.7664c25.7152-25.7152 33.344-64.0512 19.4176-97.6512S146.6496 588.8 110.272 588.8L51.2 588.8 51.2 435.2l59.072 0c36.3648 0 68.864-21.7088 82.7776-55.3088 13.9136-33.6 6.2976-71.9232-19.4176-97.6512l-41.7664-41.7664 108.608-108.608 41.7664 41.7664c16.9728 16.9728 39.3728 26.3168 63.0784 26.3168 49.5616 0 89.8816-40.2304 89.8816-89.6768L435.2 51.2l153.6 0 0 59.072c0 49.4464 40.32 89.6768 89.8816 89.6768 23.7056 0 46.1056-9.344 63.0784-26.3168l41.7664-41.7664 108.608 108.608-41.7664 41.7664c-25.7152 25.7152-33.344 64.0512-19.4176 97.6512C844.864 413.4912 877.3504 435.2 913.728 435.2L972.8 435.2 972.8 588.8z" p-id="10539"></path></svg>
+<svg t="1556618636358" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10538" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512 307.2c-112.9216 0-204.8 91.8784-204.8 204.8 0 112.9216 91.8784 204.8 204.8 204.8 112.9216 0 204.8-91.8784 204.8-204.8C716.8 399.0784 624.9216 307.2 512 307.2zM512 665.6c-84.8256 0-153.6-68.7744-153.6-153.6 0-84.8256 68.7744-153.6 153.6-153.6s153.6 68.7744 153.6 153.6C665.6 596.8256 596.8256 665.6 512 665.6zM985.6 384l-71.872 0c-34.2144 0-51.3408-41.3568-27.1488-65.5488l50.8288-50.8288c15.0016-15.0016 15.0016-39.3088 0-54.3104l-126.7072-126.72c-7.5008-7.5008-17.3312-11.2512-27.1488-11.2512s-19.6608 3.7504-27.1488 11.2512l-50.8288 50.8288c-7.8208 7.8208-17.4464 11.328-26.88 11.328-19.7376 0-38.6816-15.3344-38.6816-38.4768L640.0128 38.4c0-21.2096-17.1904-38.4-38.4-38.4L422.4 0c-21.2096 0-38.4 17.1904-38.4 38.4l0 71.872c0 23.1424-18.944 38.4768-38.6816 38.4768-9.4336 0-19.0464-3.4944-26.88-11.328l-50.8288-50.8288c-7.5008-7.5008-17.3312-11.2512-27.1488-11.2512s-19.6608 3.7504-27.1488 11.2512l-126.7072 126.72c-15.0016 15.0016-15.0016 39.3088 0 54.3104l50.8288 50.8288C161.6128 342.6432 144.4864 384 110.272 384L38.4 384c-21.2096 0-38.4 17.1904-38.4 38.4l0 179.2c0 21.2096 17.1904 38.4 38.4 38.4l71.872 0c34.2144 0 51.3408 41.3568 27.1488 65.5488l-50.8288 50.8288c-15.0016 15.0016-15.0016 39.3088 0 54.3104l126.7072 126.72c7.5008 7.5008 17.3312 11.2512 27.1488 11.2512s19.6608-3.7504 27.1488-11.2512l50.8288-50.8288c7.8208-7.8208 17.4464-11.328 26.88-11.328 19.7376 0 38.6816 15.3344 38.6816 38.4768L383.9872 985.6c0 21.2096 17.1904 38.4 38.4 38.4l179.2 0c21.2096 0 38.4-17.1904 38.4-38.4l0-71.872c0-23.1424 18.944-38.4768 38.6816-38.4768 9.4336 0 19.0464 3.4944 26.88 11.328l50.8288 50.8288c7.5008 7.5008 17.3312 11.2512 27.1488 11.2512s19.6608-3.7504 27.1488-11.2512l126.7072-126.72c15.0016-15.0016 15.0016-39.3088 0-54.3104l-50.8288-50.8288C862.3872 681.3568 879.5136 640 913.728 640L985.6 640c21.2096 0 38.4-17.1904 38.4-38.4L1024 422.4C1024 401.1904 1006.8096 384 985.6 384zM972.8 588.8l-59.072 0c-36.3648 0-68.864 21.7088-82.7776 55.3088s-6.2976 71.9232 19.4176 97.6384l41.7664 41.7664-108.608 108.608-41.7664-41.7664c-16.9728-16.9728-39.3728-26.3168-63.0784-26.3168-49.5616 0-89.8816 40.2304-89.8816 89.6768L588.8 972.8 435.2 972.8l0-59.072c0-49.4464-40.32-89.6768-89.8816-89.6768-23.7056 0-46.1056 9.344-63.0784 26.3168l-41.7664 41.7664-108.608-108.608 41.7664-41.7664c25.7152-25.7152 33.344-64.0512 19.4176-97.6512S146.6496 588.8 110.272 588.8L51.2 588.8 51.2 435.2l59.072 0c36.3648 0 68.864-21.7088 82.7776-55.3088 13.9136-33.6 6.2976-71.9232-19.4176-97.6512l-41.7664-41.7664 108.608-108.608 41.7664 41.7664c16.9728 16.9728 39.3728 26.3168 63.0784 26.3168 49.5616 0 89.8816-40.2304 89.8816-89.6768L435.2 51.2l153.6 0 0 59.072c0 49.4464 40.32 89.6768 89.8816 89.6768 23.7056 0 46.1056-9.344 63.0784-26.3168l41.7664-41.7664 108.608 108.608-41.7664 41.7664c-25.7152 25.7152-33.344 64.0512-19.4176 97.6512C844.864 413.4912 877.3504 435.2 913.728 435.2L972.8 435.2 972.8 588.8z" p-id="10539"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/yqjh.svg b/src/icons/svg/yqjh.svg
new file mode 100644
index 0000000..fca095f
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/icons/svg/zbl.svg b/src/icons/svg/zbl.svg
new file mode 100644
index 0000000..a922a9d
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/permission.js b/src/permission.js
index fd74217..2b3357a 100644
--- a/src/permission.js
+++ b/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', '/cjsc'] // no redirect whitelist
router.beforeEach(async(to, from, next) => {
// start progress bar
diff --git a/src/router/index.js b/src/router/index.js
index 3e3bdc9..dae553d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -38,30 +38,17 @@
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'),
+ },{
+ path: '/ckgl',
+ component: () => import('@/views/kb/ckgl'),
hidden: true
- },
- {
- path: '/dccj',
- component: () => import('@/views/kb/dccj'),
- hidden: true
- },
- {
- path: '/bzcj',
- component: () => import('@/views/kb/bzcj'),
+ },{
+ path: '/cjsc',
+ component: () => import('@/views/kb/cjsc'),
hidden: true
},
diff --git a/src/utils/myEcharts.js b/src/utils/myEcharts.js
index ac3560d..011c1d3 100644
--- a/src/utils/myEcharts.js
+++ b/src/utils/myEcharts.js
@@ -26,6 +26,9 @@
return myChart
}
+const colorX = '#c7e7ff'
+const colorY = '#7696c5'
+
// 绯荤粺棣栭〉鍥�
export function barTop(data, colorArr) {
var salvProName = ['x']
@@ -98,19 +101,19 @@
data: salvProValue
},
- {
- name: '鑳屾櫙',
- type: 'bar',
- barWidth: 15,
- barGap: '-100%',
- data: Value,
- itemStyle: {
- normal: {
- color: `rgba(${color[1]},0.8)`,
- barBorderRadius: 30
+ {
+ name: '鑳屾櫙',
+ type: 'bar',
+ barWidth: 15,
+ barGap: '-100%',
+ data: Value,
+ itemStyle: {
+ normal: {
+ color: `rgba(${color[1]},0.8)`,
+ barBorderRadius: 30
+ }
}
}
- }
]
}
@@ -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);鐩稿綋浜庡浘褰㈠寘鍥寸洅涓殑鐧惧垎姣斻�傚鏋滄渶鍚庝竴涓弬鏁版槸鈥榯rue鈥欙紝鍒欒鍥涗釜鍊兼槸缁濆鍍忕礌浣嶇疆銆�
+ 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璁惧浘褰㈤槾褰辩殑妯＄硦澶у皬銆傞厤鍚坰hadowColor,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: [
+ {
+ name: '鏈湀閲囪喘璁㈠崟鏁�',
+ type: 'gauge',
+ color: ['#f00'],
+ min: 0,
+ max: max,
+ splitNumber: 5,
+ radius: '70%',
+ center: ['17%', '48%'],
+ axisLine: { // 鍧愭爣杞寸嚎
+ lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ width: 10,
+ color: [
+ [0.4, '#09d8f2'],
+ [1, '#00FFFFF']
+ ]
+ },
+ backgroundColor: 'none'
+ },
+ tooltip: {
+ show: false
+ },
+ axisTick: { // 鍧愭爣杞村皬鏍囪
+ length: 10, // 灞炴�ength鎺у埗绾块暱
+ lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ color: 'auto'
+ }
+ },
+ splitLine: { // 鍒嗛殧绾�
+ length: 10, // 灞炴�ength鎺у埗绾块暱
+ lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮�
+ color: colorY
+ }
+ },
+ axisLabel: {
+ borderRadius: 1,
+ // color: 'rgba(255,255,255,0.7)',
+ color: '#00FFFF',
+ padding: 1,
+ fontSize: 18
+ },
+ title: {
+ // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+ // 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: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ width: 10,
+ color: [
+ [0.4, '#09d8f2'],
+ [1, '#00FFFFF']
+ ]
+ },
+ backgroundColor: 'none'
+ },
+ tooltip: {
+ show: false
+ },
+ axisTick: { // 鍧愭爣杞村皬鏍囪
+ length: 10, // 灞炴�ength鎺у埗绾块暱
+ lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ color: 'auto'
+ }
+ },
+ splitLine: { // 鍒嗛殧绾�
+ length: 10, // 灞炴�ength鎺у埗绾块暱
+ lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮�
+ color: colorY
+ }
+ },
+ axisLabel: {
+ borderRadius: 1,
+ // color: 'rgba(255,255,255,0.7)',
+ color: '#00FFFF',
+ padding: 1,
+ fontSize: 18
+ },
+ title: {
+ // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+ // 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: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ width: 10,
+ color: [
+ [0.4, '#09d8f2'],
+ [1, '#00FFFFF']
+ ]
+ },
+ backgroundColor: 'none'
+ },
+ tooltip: {
+ show: false
+ },
+ axisTick: { // 鍧愭爣杞村皬鏍囪
+ length: 10, // 灞炴�ength鎺у埗绾块暱
+ lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ color: 'auto'
+ }
+ },
+ splitLine: { // 鍒嗛殧绾�
+ length: 10, // 灞炴�ength鎺у埗绾块暱
+ lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮�
+ color: colorY
+ }
+ },
+ axisLabel: {
+ borderRadius: 1,
+ // color: 'rgba(255,255,255,0.7)',
+ color: '#00FFFF',
+ padding: 1,
+ fontSize: 18
+ },
+ title: {
+ // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+ // 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: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ width: 10,
+ color: [
+ [0.4, '#09d8f2'],
+ [1, '#00FFFFF']
+ ]
+ },
+ backgroundColor: 'none'
+ },
+ tooltip: {
+ show: false
+ },
+ axisTick: { // 鍧愭爣杞村皬鏍囪
+ length: 10, // 灞炴�ength鎺у埗绾块暱
+ lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ color: 'auto'
+ }
+ },
+ splitLine: { // 鍒嗛殧绾�
+ length: 10, // 灞炴�ength鎺у埗绾块暱
+ lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮�
+ color: colorY
+ }
+ },
+ axisLabel: {
+ borderRadius: 1,
+ // color: 'rgba(255,255,255,0.7)',
+ color: '#00FFFF',
+ padding: 1,
+ fontSize: 18
+ },
+ title: {
+ // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+ // 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
+}
diff --git a/src/views/kb/bzcj.vue b/src/views/kb/bzcj.vue
deleted file mode 100644
index cdb18ff..0000000
--- a/src/views/kb/bzcj.vue
+++ /dev/null
@@ -1,843 +0,0 @@
-<template>
- <div>
- <div class="kb_dashboard">
- <div class="kb_header">
- <div class="flex_c_c kb_header_text">
- 鍖呰杞﹂棿鐪嬫澘
- </div>
- <div class="kb_headerPic" />
- <div class="kb_headTime">
- <span>{{ headTime }}</span>
- </div>
- </div>
- <MarqueeTips
- :content="MarqueeTipsContent"
- class="MarqueeTipsContentClass"
- :speed="180"
- />
- <!-- :speed="speed"-->
- <div class="kb_content">
- <div class="kb_left">
- <!-- 1-->
- <div class="kb_left_top_title01 kb_title_text">
- <!-- <div class="PG01" />-->
- <!-- <svg-icon icon-class="sccx" />-->
- 浜х嚎鍔犲伐涓换鍔�
- <div style="margin-left: 30px">{{ number1 }} 鍗�</div>
- </div>
-
- <div class="kb_left_top kb_pd10">
- <div class="kb_left_top02">
- <div 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">
- 鍔犲伐鍗曞彿:{{ item.workcode }}
- </div>
- <div class="kb_mt5">
- 浜у搧鍚嶇О:{{ item.partname }}
- </div>
- <div class="kb_mt5">
- 浠诲姟鏁伴噺:{{ parseFloat(item.qty) }}
- </div>
- </div>
- </div>
- <div class="kb_block03 kb_pd10 ">
- <div v-if="item.children&&item.children.length>0" class="flex_s_c">
- <div
- v-for="(it,ind) in item.children"
- :key="ind"
- class="kb_block03_content flex_c_c"
- >
- <div>
- <div class="content01">{{ it.stepname }}</div>
- </div>
- <div class="content02Parent">
- <div class="content02">
- <div class="content02_1 ">浠诲姟</div>
- <div class="content02_2 borderTop ">{{ parseFloat(it.planqty) }}</div>
- </div>
- <div class="content02">
- <div class="content02_1 ">鍚堟牸</div>
- <div class="content02_2 borderTop ">{{ parseFloat(it.goodqty) }}</div>
- </div>
- <div class="content02" style="border-right: 0">
- <div class="content02_1 ">涓嶈壇</div>
- <div class="content02_2 borderTop ">{{ parseFloat(it.ngqty) }}</div>
- </div>
- </div>
- </div>
- </div>
- <div v-if="item.children&&item.children.length>0" class="kb_block03_02 flex_s_c">
- <div
- v-for="(it,ind) in item.children"
- :key="ind"
- class="kb_block03_02_content flex_c_c"
- >
- <div class="flex_c_c content01">
- <div
- v-if="it.status==='START'&&(parseFloat(it.ngqty)===0||it.ngqty==='')&&(parseFloat(it.goodqty)===0||it.goodqty==='')"
- class="circle"
- style="background-color: blue;"
- />
- <div
- v-else-if="it.status==='ALLO'&&(parseFloat(it.ngqty)===0||it.ngqty==='')&&(parseFloat(it.goodqty)===0||it.goodqty==='')"
- class="circle"
- style="background-color: rgb(255 255 255)"
- />
- <div
- v-else-if="parseFloat(it.ngqty)+parseFloat(it.goodqty)>=parseFloat(it.planqty)"
- class="circle"
- />
- <div v-else class="circleYellow" />
- </div>
- </div>
- </div>
-
- </div>
- </div>
- </div>
- </div>
- <!-- 2-->
- <div class="kb_left_bottom kb_pd10">
- <div class="kb_left_bottom_content">
- <div class="content_head kb_title_text">浜х嚎鍔犲伐浠诲姟
- <div style="margin-left: 30px">{{ number2 }} 鍗�</div>
- </div>
- <div class="content_body">
- <el-table
- ref="tableData"
- :data="tableData"
- style="width: 100%;"
- :header-cell-style="headerCellStyle"
- :cell-style="cellStyle"
- height="440"
- >
- <el-table-column
- prop="RowNum"
- label="搴忓彿"
- width="50"
- />
- <!-- label="鍔犲伐鐘舵��"-->
- <el-table-column
- prop="status"
- label="鐘舵��"
- width="65"
- >
- <template slot-scope="{row}">
- <div v-if="row.status==='ALLO'">宸叉淳鍙�</div>
- <div v-if="row.status==='START'">寮�宸�</div>
- <div v-if="row.status==='NEW'">鏂板伐鍗�</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="lm_date"
- label="娲惧彂鏃堕棿"
- width="115"
- >
- <template slot-scope="{row}">
- <div>{{ row.lm_date.substring(0, 10) }}</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="saleOrderCode"
- label="閿�鍞鍗曞彿"
- width="178"
- >
- <template slot-scope="{row}">
- <div v-if="row.saleOrderCode" class="ellipsis">{{ row.saleOrderCode }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="wo_code"
- label="鍔犲伐鍗曞彿"
- width="205"
- >
- <template slot-scope="{row}">
- <div v-if="row.wo_code" class="ellipsis">{{ row.wo_code }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="partname"
- label="浜у搧鍚嶇О"
- width="150"
- >
- <template slot-scope="{row}">
- <div v-if="row.partname" class="ellipsis">{{ row.partname }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <!-- <el-table-column-->
- <!-- prop="partspec"-->
- <!-- label="瑙勬牸"-->
- <!-- width="125"-->
- <!-- >-->
- <!-- <template slot-scope="{row}">-->
- <!-- <div v-if="row.partspec" class="ellipsis">{{ row.partspec }}</div>-->
- <!-- <div v-else>/</div>-->
- <!-- </template>-->
- <!-- </el-table-column>-->
- <!-- <el-table-column-->
- <!-- prop="name"-->
- <!-- label="鍗曚綅"-->
- <!-- width="50"-->
- <!-- />-->
- <el-table-column
- prop="plan_qty"
- label="浠诲姟鏁伴噺"
- width="85"
- />
- <el-table-column
- prop="good_qty"
- label="瀹屽伐鏁伴噺"
- width="85"
- />
- <el-table-column
- prop="ng_qty"
- label="涓嶈壇鏁伴噺"
- width="85"
- />
- <el-table-column
- prop="wcl"
- label="瀹屾垚鐜�"
- width="60"
- >
- <template slot-scope="{row}">
- <div>{{ parseFloat((row.good_qty * 100 / row.plan_qty).toFixed(2)) }}%</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="planenddate"
- label="棰勮寮�濮�"
- width="115"
- >
- <template slot-scope="{row}">
- <div>{{ row.planenddate.substring(0, 10) }}</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="planstartdate"
- label="棰勮缁撴潫"
- width="125"
- >
- <template slot-scope="{row}">
- <div>{{ row.planstartdate.substring(0, 10) }}</div>
- </template>
- </el-table-column>
- </el-table>
- </div>
- </div>
- </div>
- </div>
- <div class="kb_right kb_pd10">
- <div class="kb_right_top kb_pd10">
- <div class="kb_right_top_content">
- <div class="content_head kb_title_text">褰撴棩瀹屽伐浜у搧鏁伴噺鎺掕</div>
- <div class="content_body">
- <el-table
- ref="tableDataRank"
- :data="tableDataRank"
- class="tableDataRank"
- style="width: 100%;"
- :header-cell-style="headerCellStyle"
- :cell-style="cellStyle"
- height="396"
- >
- <el-table-column
- type="index"
- label="搴忓彿"
- width="55"
- />
- <el-table-column
- prop="wkshname"
- label="杞﹂棿锛堜緵鏂癸級"
- width="120"
- >
- <template slot-scope="{row}">
- <div v-if="row.wkshname" class="ellipsis">{{ row.wkshname }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="linename"
- label="浜х嚎"
- width="120"
- >
- <template slot-scope="{row}">
- <div v-if="row.linename" class="ellipsis">{{ row.linename }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="partname"
- width="138"
- label="浜у搧"
- >
- <template slot-scope="{row}">
- <div v-if="row.partname" class="ellipsis">{{ row.partname }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="good_qty"
- label="鏁伴噺"
- width="100"
- />
- </el-table>
- </div>
- </div>
- </div>
- <div class="kb_right_bottom kb_pd10">
- <div class="kb_right_bottom_content_title kb_title_text">
- 涓�鍛ㄤ笉鑹疶op5
- </div>
- <div class="kb_right_bottom_content">
- <div id="bar02" style="width: 100%;height:100%" />
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
-</template>
-
-<script>
-import './kbCommon.css'
-import { bar02, loadEcharts } from '@/utils/myEcharts'
-import {
- LineSearchBottomLeftData,
- LineSearchBottomRightData,
- LineSearchTopLeftData,
- LineSearchTopRightData, ShopSearch, WkspReportNotice
-} from '@/api/dzkb'
-import MarqueeTips from 'vue-marquee-tips'
-
-export default {
- name: 'Index2',
- components: {
- MarqueeTips
- },
- data() {
- return {
-
- onLine: navigator.onLine, // 鐩戝惉缃戠粶鏄惁鍦ㄧ嚎
-
- headTime: '',
-
- lineContent: [],
- lineContent3: [],
-
- leftTopData: [],
- tableData: [],
- tableDataRank: [],
- lineCodeArr: [],
-
- ShopArr: ['CJ003'], // 杞﹂棿缂栫爜鏁扮粍
-
- number1: '',
- number2: '',
-
- MarqueeTipsContent: '', // 鍏憡
- speed: 100, // 鍏憡鎾斁鐨勯�熷害
-
- MarqueeTipsTask: null,
- ShopSearchTask: null,
- ShopSearchLineTask: null,
- TableDataRollTask: null,
- TableDataRankRollTask: null,
- EchartsTask: null
- }
- },
-
- created() {
- setInterval(this.getNowTime, 1000)
-
- // 涓ゅ皬鏃剁湅鏉垮埛鏂颁竴娆�
- setInterval(() => {
- window.location.reload()
- }, 1000 * 60 * 120)
- },
- mounted() {
- // 鐩戝惉缃戠粶鏄惁鍦ㄧ嚎
- window.addEventListener('online', this.updateOnlineStatus)
- window.addEventListener('offline', this.updateOnlineStatus)
- this.updateOnlineStatus({ type: this.onLine ? 'online' : 'offline', isFirst: true })
- },
- beforeDestroy() {
- window.removeEventListener('online', this.updateOnlineStatus)
- window.removeEventListener('offline', this.updateOnlineStatus)
- },
- methods: {
- // 鏇存柊缃戠粶鐘舵��
- updateOnlineStatus(e) {
- if (e.isFirst) {
- this.getValue()// 鑾峰彇鍊�
- } else {
- const loading = this.$loading({
- lock: true,
- text: '鏂綉浜嗭紝姝ｅ湪鎷煎懡鑱旂綉涓紝璇锋鏌ョ綉缁滄槸鍚︽甯�...',
- spinner: 'el-icon-loading',
- customClass: 'osloading',
- background: 'rgba(0, 0, 0, 0.7)'
- })
- const { type } = e
- this.onLine = type === 'online'
- if (this.onLine) {
- this.getValue()
- loading.close()
- this.$message.success('缃戠粶杩炴帴鎴愬姛锛�')
- } else {
- clearInterval(this.MarqueeTipsTask)
- clearInterval(this.ShopSearchTask)
- clearInterval(this.ShopSearchLineTask)
- clearInterval(this.TableDataRollTask)
- clearInterval(this.TableDataRankRollTask)
- clearInterval(this.EchartsTask)
- this.$message.error('缃戠粶鎺夌嚎锛岃鍏虫敞缃戠粶鐘舵�侊紒')
- }
- }
- },
- // 鑾峰彇鍊�
- async getValue() {
- // await this.getShopSearch()
- await this.getShopSearchLine()
-
- await this.getEcharts()
- await this.getTableDataRoll()
- await this.getTableDataRankRoll()
- await this.getMarqueeTipsContent()
- await this.getMarqueeTipsContent()
- },
- // 鑾峰彇鍏憡
- getMarqueeTipsContent() {
- WkspReportNotice({ shopcode: this.ShopArr.join(',') }).then(res => {
- let contentAll = ''
- res.data.forEach(item => {
- contentAll += item.contents + ' '.padStart(item.contents.toString().length * 2, ' ')
- })
- this.MarqueeTipsContent = contentAll
- this.speed = this.MarqueeTipsContent.length / 10
-
- this.MarqueeTipsTask = setInterval(() => {
- WkspReportNotice({ shopcode: this.ShopArr.join(',') }).then(res1 => {
- let contentAll = ''
- res1.data.forEach(item => {
- contentAll += item.contents + ' '.padStart(item.contents.toString().length * 2, ' ')
- })
- this.MarqueeTipsContent = contentAll
- this.speed = this.MarqueeTipsContent.length / 10
- })
- // }, this.speed * 1000)
- }, 1000 * 60 * 5)
- })
- },
- // 鑾峰彇杞﹂棿缂栫爜
- async getShopSearch() {
- const res1 = await ShopSearch()
- if (res1.code === '200') {
- this.ShopArr = []
- res1.data.forEach(item => {
- this.ShopArr.push(item.org_code)
- })
- }
- setInterval(() => {
- this.ShopSearchTask = ShopSearch().then(res1 => {
- if (res1.code === '200') {
- this.ShopArr = []
- res1.data.forEach(item => {
- this.ShopArr.push(item.org_code)
- })
- }
- })
- }, 1000 * 30)
- },
- // 浜х嚎鍔犲伐涓换鍔�
- getShopSearchLine() {
- let length, count
- LineSearchTopLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
- this.lineContent = res.data
- length = this.lineContent.length
- count = Math.ceil(length / 3) // 闇�瑕佽疆鎾殑缁勬暟 3涓负涓�缁�
- this.lineContent3 = this.lineContent.slice(0, 3)
-
- this.number1 = this.lineContent.length
- })
-
- let start = 0
- this.ShopSearchLineTask = setInterval(() => {
- if (Math.floor(start / 3) === count && count !== 0) {
- start = 0
- LineSearchTopLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
- this.lineContent = res.data
- length = this.lineContent.length
- count = Math.ceil(length / 3) // 闇�瑕佽疆鎾殑缁勬暟 3涓负涓�缁�
- this.lineContent3 = this.lineContent.slice(0, 3)
-
- this.number1 = this.lineContent.length
- })
- } else if (count === 0) {
- clearInterval(this.ShopSearchLineTask)
- this.getShopSearchLine()
- }
- this.lineContent3 = this.lineContent.slice(start, start + 3)
- start = start + 3
- }, 1000 * 3)
- },
-
- // 浜х嚎鍔犲伐浠诲姟
- getTableDataRoll() {
- LineSearchBottomLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
- this.tableData = res.data
- this.number2 = this.tableData.length
-
- 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
-
- const divData = this.$refs.tableDataRank.bodyWrapper
- // 鎷垮埌鍏冪礌鍚庯紝瀵瑰厓绱犺繘琛屽畾鏃跺鍔犺窛绂婚《閮ㄨ窛绂伙紝瀹炵幇婊氬姩鏁堟灉(姝ら厤缃负姣�100姣绉诲姩1鍍忕礌)
- this.TableDataRankRollTask = setInterval(() => {
- // 鍏冪礌鑷璺濈椤堕儴1鍍忕礌
- // divData.scrollTop += divData.scrollHeight / this.tableDataRank.length
- divData.scrollTop += 1
- // 鍒ゆ柇鍏冪礌鏄惁婊氬姩鍒板簳閮�(鍙楂樺害+璺濈椤堕儴=鏁翠釜楂樺害)
- if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
- // 閲嶇疆table璺濈椤堕儴璺濈
- divData.scrollTop = 0
- LineSearchTopRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
- this.tableDataRank = res.data
-
- if (this.tableDataRank.length > 9) {
- clearInterval(this.TableDataRankRollTask)
- this.getTableDataRankRoll()
- }
- })
- }
- }, this.tableDataRank.length <= 9 ? 1000 * 3 : 100)
- })
- },
- // 鑾峰彇echarts
- getEcharts() {
- LineSearchBottomRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
- loadEcharts('bar02', bar02(res.data.map(i => i.cont), res.data.map(i => i.name)))
- })
-
- this.EchartsTask = setInterval(() => {
- LineSearchBottomRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
- loadEcharts('bar02', bar02(res.data.map(i => i.cont), res.data.map(i => i.name)))
- })
- }, 1000 * 15)
- },
- // 鑾峰彇褰撳墠鏃堕棿
- 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)',
- padding: '10px 0',
- textAlign: 'center',
- color: '#07acc2',
- border: 'none'
- }
- },
- cellStyle() {
- return {
- padding: '8px 0',
- textAlign: 'center',
- backgroundColor: 'rgba(30, 33, 46 )',
- // backgroundColor: 'transparent',
- color: '#fff',
- border: 'none'
- }
- }
-
- }
-}
-</script>
-
-<style scoped lang="scss">
-$kbBorderColor: rgba(9, 216, 242, 0.4);
-$kbBackgroundColor: rgba(30, 33, 46, 0.6);
-.kb_content {
- display: flex;
- position: relative;
- height: 990px;
- width: 100%;
- letter-spacing: 2px;
- color: #fff;
-
- .kb_left {
- width: 1345px;
- height: 100%;
- padding-left: 5px;
-
- .kb_left_top_title01 {
- position: absolute;
- top: 37px;
- left: 15px;
- display: flex;
- color: #00ffff;
-
- .PG01 {
- background: url("../../assets/images/GP_1.png") no-repeat;
- width: 28px;
- height: 12px;
- margin-top: 4px;
- margin-right: 10px;
- }
- }
-
- .kb_left_top {
- height: 495px;
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- padding-top: 70px;
-
- .kb_left_top02 {
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- border: 1px solid $kbBorderColor;
- height: 400px;
- border-radius: 5px;
- background-color: $kbBackgroundColor;
-
- .kb_left_top_block {
- width: 100%;
- height: 133px;
- display: flex;
- font-size: 17px;
- border-bottom: 1px solid $kbBorderColor;
- justify-content: flex-start;
-
- .kb_block02 {
- width: 304px;
- display: flex;
- align-items: center;
- border-right: 1px solid $kbBorderColor;
- }
-
- .kb_block03 {
- width: 1020px;
- font-size: 17px;
- display: flex;
- flex-direction: column;
- //font-size: 12px;
- border-radius: 5px;
-
- .kb_block03_content {
- border: 1px solid $kbBorderColor;
- width: 180px;
- height: 80px;
- margin-right: 15px;
- display: flex;
- flex-direction: column;
-
- .content01 {
- height: 30px;
- width: 100%;
- border-bottom: 1px solid $kbBorderColor;
- display: flex;
- align-items: center;
- justify-content: center;
- }
-
- .content02Parent {
- display: flex;
-
- .content02 {
- width: 60px;
- border-right: 1px solid $kbBorderColor;
-
- .content02_1 {
- display: flex;
- align-items: center;
- justify-content: center;
- //height: 50%;
- height: 25px;
- }
-
- .content02_2 {
- height: 25px;
- display: flex;
- align-items: center;
- justify-content: center;
- }
-
- .borderTop {
- border-top: 1px solid $kbBorderColor;
- }
- }
- }
-
- }
- }
-
- .kb_block03_02 {
- margin-top: 7px;
- display: flex;
-
- .kb_block03_02_content {
- width: 180px;
- margin-right: 15px;
-
- .content01 {
- .circle {
- width: 26px;
- height: 26px;
- background-color: #00ff8b;
- border-radius: 50%;
- }
-
- }
-
- }
- }
-
- }
-
- .kb_left_top_block:nth-child(3n) {
- border-bottom: none !important;
- }
- }
- }
-
- .kb_left_bottom {
- height: 495px;
-
- .kb_left_bottom_content {
- height: 460px;
- display: flex;
- flex-direction: column;
-
- .content_head {
- display: flex;
- line-height: 20px;
- margin-bottom: 10px;
- margin-top: -10px;
- color: #00ffff;
-
- }
-
- .content_body {
- border: 1px solid $kbBorderColor;
- }
- }
- }
- }
-
- .kb_right {
- width: 575px;
- height: 100%;
-
- .kb_right_top {
- margin-top: 30px;
- margin-bottom: -30px;
- height: 476px;
- width: 100%;
-
- .kb_right_top_content {
- height: 430px;
- display: flex;
- flex-direction: column;
-
- .content_head {
- //font-size: 18px;
- line-height: 20px;
- margin-bottom: 10px;
- margin-top: -10px;
- color: #00ffff;
- }
-
- .content_body {
- border: 1px solid $kbBorderColor;
- }
- }
- }
-
- .kb_right_bottom {
- height: 482px;
- margin-top: 8px;
-
- .kb_right_bottom_content_title {
- color: #00ffff;
- margin-bottom: 5px;
- margin-top: -12px;
- }
-
- .kb_right_bottom_content {
- border: 1px solid $kbBorderColor;
- height: 441px;
- width: 100%;
- border-radius: 5px;
- background-color: $kbBackgroundColor;
- }
- }
- }
-}
-
-::v-deep .el-table::before {
- height: 0;
-}
-
-::v-deep .el-table__body-wrapper {
- background-color: rgba(30, 33, 46);
-}
-
-::v-deep .el-table__body-wrapper::-webkit-scrollbar {
- /* width: 0;瀹藉害涓�0鏆楄棌 */
- width: 0;
-}
-
-::v-deep .cell {
- padding: 0 !important;
- font-size: 18px;
-}
-
-.circleYellow {
- width: 26px;
- height: 26px;
- background-color: rgb(255 255 0);
- border-radius: 50%;
-}
-</style>
diff --git a/src/views/kb/cgdd.vue b/src/views/kb/cgdd.vue
index 3c48a08..211eafb 100644
--- a/src/views/kb/cgdd.vue
+++ b/src/views/kb/cgdd.vue
@@ -1,69 +1,55 @@
<template>
<div>
<div class="kb_dashboard">
+
+ <!-- 鏄熺┖鑳屾櫙-->
+ <div ref="starsRef" class="stars">
+ <div v-for="(item, index) in starsCount" :key="index" class="star" />
+ </div>
+
<div class="kb_header">
- <div class="flex_c_c" style="letter-spacing: 3px;margin-left: 1px;">
- 閲囪喘璺熻釜鐪嬫澘
+ <div class="flex_c_c kb_header_text">
+ <div id="topBarLeft" style="width:600px;height:100%" />
+ 閲囪喘璺熻釜鏁板瓧鍖栫湅鏉�
+ <div id="topBarRight" style="width:600px;height:100%;transform:rotate(180deg);" />
</div>
- <div class="kb_headerPic" />
<div class="kb_headTime">
<span>{{ headTime }}</span>
</div>
</div>
- <MarqueeTips
- :content="MarqueeTipsContent"
- class="MarqueeTipsContentClass"
- style="top:100px"
- :speed="180"
- />
- <div class="kb_content">
- <div class="kb_left">
- <!-- 1-->
- <div class="kb_left_top kb_pd10">
- <div class="kb_left_top_block kb_pd10">
- <div class="content01">
- <div class="pic01" />
- <div class="number">{{ purchaseLeftTopData.ThisMonthPurchaseArrivalOrderCont }}</div>
- <div class="text">鏈湀閲囪喘璁㈠崟鏁�</div>
+ <div style="display: flex;justify-content: space-between;padding:0 20px 20px 20px;height: 980px">
+ <div style="width: 1250px;" class="flex_c_b">
+ <div style="height: 380px;">
+ <div>
+ <div class="smallTitle">
+ <svg-icon icon-class="cggz" class="svg_class" />
+ 閲囪喘璺熻釜
</div>
- <div class="content01">
- <div class="pic01" />
- <div class="number">{{ purchaseLeftTopData.ThisMonthPurchaseOrderCont }}</div>
- <div class="text">鏈湀鍒拌揣鍗曟暟</div>
+ <div class="lineContent horn" style="height: 345px">
+ <div id="cgddchart" class="flex_c_c" style="width: 100%;height:100%" />
</div>
- <div class="content01">
- <div class="pic01" />
- <div class="number">{{ purchaseLeftTopData.ThisMonthWareHouseOrderCont }}</div>
- <div class="text">鏈湀閲囪喘鍏ュ簱鍗曟暟</div>
- <!-- <div id="pie01" ref="pie01" class="pie01" />-->
- <!-- <div class="text" style="margin-top: -10px">褰撴湀寤舵湡鍗犳瘮</div>-->
- </div>
-
</div>
</div>
- <!-- 2-->
- <div class="kb_left_bottom kb_pd10">
- <div class="kb_left_bottom_content">
- <div class="content_head kb_title_text">閲囪喘鍒拌揣璺熻釜 <div style="margin-left: 30px">{{ number1 }} 鍗�</div></div>
- <div class="content_body">
+ <div style="height: 560px; ">
+ <div>
+ <div class="smallTitle">
+ <svg-icon icon-class="cggz" class="svg_class" />
+ 閲囪喘鍒拌揣璺熻釜
+ </div>
+ <div class="lineContent horn" style="height: 525px">
<el-table
ref="tableData"
:data="tableData"
+ class="tableData"
style="width: 100%;"
- :header-cell-style="headerCellStyle"
- :cell-style="cellStyle"
- height="588"
+ :header-cell-style="headerCellStyleCenter"
+ :cell-style="cellStyleCenter"
+ height="515"
>
- <!-- <el-table-column-->
- <!-- prop="RowNum"-->
- <!-- label="搴忓彿"-->
- <!-- width="53"-->
- <!-- />-->
-
<el-table-column
prop="PurchaseOrder"
label="閲囪喘璁㈠崟"
- width="203"
+ width="225"
>
<template slot-scope="{row}">
<div class="ellipsis">{{ row.PurchaseOrder }}</div>
@@ -72,23 +58,24 @@
<el-table-column
prop="suppername"
label="渚涘簲鍟�"
- width="163"
+ width="183"
>
<template slot-scope="{row}">
<div v-if="row.suppername" class="ellipsis">{{ row.suppername }}</div>
<div v-else />
</template>
</el-table-column>
- <el-table-column
- prop="username"
- label="閲囪喘鍛�"
- width="78"
- >
- <template slot-scope="{row}">
- <div v-if="row.username">{{ row.username }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
+ <!-- <el-table-column-->
+ <!-- prop="username"-->
+ <!-- label="閲囪喘鍛�"-->
+ <!-- width="78"-->
+ <!-- >-->
+ <!-- <template slot-scope="{row}">-->
+ <!-- <div v-if="row.username">{{ row.username }}</div>-->
+ <!-- <div v-else>/</div>-->
+ <!-- </template>-->
+ <!-- </el-table-column>-->
+
<!-- <el-table-column-->
<!-- prop="partcode"-->
<!-- label="浜у搧缂栫爜"-->
@@ -97,7 +84,7 @@
<el-table-column
prop="partname"
label="浜у搧鍚嶇О"
- width="175"
+ width="215"
>
<template slot-scope="{row}">
<div v-if="row.partname" class="ellipsis">{{ row.partname }}</div>
@@ -117,32 +104,37 @@
<el-table-column
prop="quantity"
label="璁㈠崟鏁伴噺"
- width="94"
+ width="114"
>
<template slot-scope="{row}">
<div v-if="row.quantity">{{ parseFloat(row.quantity) }}</div>
<div v-else>0</div>
</template>
</el-table-column>
- <el-table-column
- prop="checktype"
- label="妫�楠岀姸鎬�"
- width="94"
- >
- <template slot-scope="{row}">
- <div v-if="row.checktype===null">鏈楠�</div>
- <div v-else>宸叉楠�</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="checkuser"
- label="妫�楠屼汉鍛�"
- width="94"
- />
+ <!-- <el-table-column-->
+ <!-- prop="checktype"-->
+ <!-- label="妫�楠岀姸鎬�"-->
+ <!-- width="104"-->
+ <!-- >-->
+ <!-- <template slot-scope="{row}">-->
+ <!-- <div v-if="row.checktype===null">鏈楠�</div>-->
+ <!-- <div v-else>宸叉楠�</div>-->
+ <!-- </template>-->
+ <!-- </el-table-column>-->
+ <!-- <el-table-column-->
+ <!-- prop="checkuser"-->
+ <!-- label="妫�楠屼汉鍛�"-->
+ <!-- width="94"-->
+ <!-- >-->
+ <!-- <template slot-scope="{row}">-->
+ <!-- <div v-if="row.checkuser===null">/</div>-->
+ <!-- <div v-else>{{ row.checkuser }}</div>-->
+ <!-- </template>-->
+ <!-- </el-table-column>-->
<el-table-column
prop="quantity1"
label="宸叉敹鏁伴噺"
- width="94"
+ width="114"
>
<template slot-scope="{row}">
<div v-if="row.quantity1">{{ parseFloat(row.quantity1) }}</div>
@@ -151,17 +143,17 @@
</el-table-column>
<el-table-column
label="鏈敹鏁伴噺"
- width="94"
+ width="114"
>
<template slot-scope="{row}">
- <div v-if="row.quantity- row.quantity1">{{ parseFloat(row.quantity- row.quantity1) }}</div>
+ <div v-if="row.quantity- row.quantity1">{{ parseFloat(row.quantity - row.quantity1) }}</div>
<div v-else>0</div>
</template>
</el-table-column>
<el-table-column
prop="acceptDate"
label="棰勮浜ゆ湡"
- width="115"
+ width="135"
>
<template slot-scope="{row}">
<div v-if="row.acceptDate">{{ row.acceptDate.substring(0, 10) }}</div>
@@ -171,114 +163,113 @@
<el-table-column
prop="warning"
label="寤舵湡澶╂暟"
- width="114"
+ width="144"
>
<template slot-scope="{row}">
- <div v-if="parseFloat(row.warning)<0" style="color: red">{{ Math.abs(parseFloat(row.warning)) }}</div>
- <div v-else-if="row.warning===null||row.warning===''||row.warning===0">0</div>
- <div v-else-if="parseFloat(row.warning)>3">{{ row.warning }}</div>
- <div v-else-if="parseFloat(row.warning)>0&&parseFloat(row.warning)<=3" style="color:yellow;">{{ row.warning }}</div>
+ <div v-if="parseFloat(row.warning)<0" style="color: red">{{
+ Math.abs(parseFloat(row.warning))
+ }}
+ </div>
+ <div v-else-if="row.warning===null||row.warning===''||row.warning>=0">0</div>
+ <!-- <div v-else-if="parseFloat(row.warning)>3">{{ row.warning }}</div>-->
+ <!-- <div v-else-if="parseFloat(row.warning)>0&&parseFloat(row.warning)<=3" style="color:yellow;">-->
+ <!-- {{ row.warning }}-->
+ <!-- </div>-->
</template>
</el-table-column>
</el-table>
+ <!-- <div id="cgddchart" class="flex_c_c" style="width: 100%;height:100%" />-->
</div>
</div>
</div>
</div>
- <div class="kb_right kb_pd10">
- <div class="kb_right_top kb_pd10">
- <div class="kb_right_top_content">
- <div class="content_head kb_title_text">渚涘簲鍟嗗欢鏈熶氦璐ф帓琛�</div>
- <div class="content_body">
- <el-table
- ref="tableDataRank"
- :data="tableDataRank"
- style="width: 100%;"
- :header-cell-style="headerCellStyle"
- :cell-style="cellStyle"
- :row-class-name="tableRowClassName"
- height="865"
+ <div style="width: 600px;">
+ <div>
+ <div class="smallTitle">
+ <svg-icon icon-class="yqjh" class="svg_class" />
+ 渚涘簲鍟嗗欢鏈熶氦璐ф帓琛�
+ </div>
+ <div class="lineContent horn" style="height: 925px">
+ <el-table
+ ref="tableDataRank"
+ :data="tableDataRank"
+ class="tableData"
+ style="width: 100%;"
+ :header-cell-style="headerCellStyleCenter"
+ :cell-style="cellStyleCenter"
+ :row-class-name="tableRowClassName"
+ height="920"
+ >
+ <el-table-column
+ type="index"
+ label="搴忓彿"
+ width="80"
>
- <el-table-column
- type="index"
- label="搴忓彿"
- width="70"
- >
- <template slot-scope="{row}">
- <div>NO.{{ row.index }}</div>
- <!-- <div>NO.100</div>-->
- </template>
- </el-table-column>
- <!-- <el-table-column-->
- <!-- prop="cj"-->
- <!-- label="杞﹂棿"-->
- <!-- width="100"-->
- <!-- />-->
- <el-table-column
- prop="suppercode"
- label="渚涘簲鍟嗙紪鐮�"
- width="130"
- >
- <template slot-scope="{row}">
- <div v-if="row.suppercode" class="ellipsis">{{ row.suppercode }}</div>
- <div v-else />
- </template>
- </el-table-column>
- <el-table-column
- prop="suppername"
- width="283"
- label="渚涘簲鍟嗗悕绉�"
- >
- <template slot-scope="{row}">
- <div class="ellipsis">{{ row.suppername }}</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="cont"
- label="娆℃暟"
- width="50"
- />
- </el-table>
- </div>
+ <template slot-scope="{row}">
+ <div>NO.{{ row.index }}</div>
+ <!-- <div>NO.100</div>-->
+ </template>
+ </el-table-column>
+ <!-- <el-table-column-->
+ <!-- prop="cj"-->
+ <!-- label="杞﹂棿"-->
+ <!-- width="100"-->
+ <!-- />-->
+ <el-table-column
+ prop="suppercode"
+ label="渚涘簲鍟嗙紪鐮�"
+ width="140"
+ >
+ <template slot-scope="{row}">
+ <div v-if="row.suppercode" class="ellipsis">{{ row.suppercode }}</div>
+ <div v-else />
+ </template>
+ </el-table-column>
+ <el-table-column
+ prop="suppername"
+ width="293"
+ label="渚涘簲鍟嗗悕绉�"
+ >
+ <template slot-scope="{row}">
+ <div class="ellipsis">{{ row.suppername }}</div>
+ </template>
+ </el-table-column>
+ <el-table-column
+ prop="cont"
+ label="娆℃暟"
+ width="81"
+ />
+ </el-table>
</div>
</div>
-
</div>
</div>
+
</div>
</div>
</template>
<script>
import './kbCommon.css'
-import { bar02, loadEcharts, pie01 } from '@/utils/myEcharts'
-import * as echarts from 'echarts'
+import { cgddchart, kbTop, loadEcharts } from '@/utils/myEcharts'
import { PurchaseLeftBottom, PurchaseLeftTop, PurchaseRight } from '@/api/dzkb'
-import MarqueeTips from 'vue-marquee-tips'
export default {
name: 'Index2',
- components: {
- MarqueeTips
- },
data() {
return {
- onLine: navigator.onLine, // 鐩戝惉缃戠粶鏄惁鍦ㄧ嚎
-
headTime: '',
+ purchaseLeftTopData: {},
- purchaseLeftTopData: [],
tableData: [],
tableDataRank: [],
- number1: '',
-
- MarqueeTipsContent: '', // 鍏憡
- speed: 100, // 鍏憡鎾斁鐨勯�熷害
-
- PurchaseLeftTop: null,
+ PurchaseRight: null,
PurchaseLeftBottom: null,
- PurchaseRight: null
+
+ starsCount: 800, // 鏄熸槦鏁伴噺
+ distance: 900 // 闂磋窛
+
}
},
@@ -291,71 +282,51 @@
}, 1000 * 60 * 120)
},
mounted() {
- window.addEventListener('online', this.updateOnlineStatus)
- window.addEventListener('offline', this.updateOnlineStatus)
- this.updateOnlineStatus({ type: this.onLine ? 'online' : 'offline', isFirst: true })
+ this.getTopBar()
+ this.getEcharts()
+ this.getPurchaseLeftBottom()
+ this.getPurchaseRight()
+
+ this.setStarsRef()
},
- beforeDestroy() {
- window.removeEventListener('online', this.updateOnlineStatus)
- window.removeEventListener('offline', this.updateOnlineStatus)
- },
+
methods: {
- // 鏇存柊缃戠粶鐘舵��
- updateOnlineStatus(e) {
- if (e.isFirst) {
- this.getPurchaseLeftTop()
- this.getPurchaseLeftBottom()
- this.getPurchaseRight()
-
- // this.getMarqueeTipsContent()
- } else {
- const loading = this.$loading({
- lock: true,
- text: '鏂綉浜嗭紝姝ｅ湪鎷煎懡鑱旂綉涓紝璇锋鏌ョ綉缁滄槸鍚︽甯�...',
- spinner: 'el-icon-loading',
- customClass: 'osloading',
- background: 'rgba(0, 0, 0, 0.7)'
- })
- const { type } = e
- this.onLine = type === 'online'
- if (this.onLine) {
- this.getPurchaseLeftTop()
- this.getPurchaseLeftBottom()
- this.getPurchaseRight()
- // this.getMarqueeTipsContent()
- loading.close()
- this.$message.success('缃戠粶杩炴帴鎴愬姛锛�')
- } else {
- clearInterval(this.PurchaseLeftTop)
- clearInterval(this.PurchaseLeftBottom)
- clearInterval(this.PurchaseRight)
- this.$message.error('缃戠粶鎺夌嚎锛岃鍏虫敞缃戠粶鐘舵�侊紒')
- }
- }
+ setStarsRef() {
+ const starNodes = Array.from(this.$refs.starsRef.children)
+ starNodes.forEach(item => {
+ const speed = 0.2 + Math.random() * 1
+ const thisDistance = this.distance + Math.random() * 300
+ item.style.transformOrigin = `0 0 ${thisDistance}px`
+ item.style.transform = `
+ translate3d(0,0,-${thisDistance}px)
+ rotateY(${Math.random() * 360}deg)
+ rotateX(${Math.random() * -50}deg)
+ scale(${speed},${speed})`
+ })
},
-
- // 鑾峰彇鍏憡
- getMarqueeTipsContent() {
- // this.MarqueeTipsContent = '鍚勪綅鍛樺伐浠細鏍规嵁涓婄骇鐨勯�氱煡锛岀粨鍚堟垜浼佸疄闄呮儏鍐碉紝鐜板皢20xx骞寸殑鍏冩棪鏀惧亣閫氱煡濡備笅锛氫竴銆�1鏈�1鏃ヨ嚦1鏈�3鏃ユ斁鍋囪皟浼戯紝鍏�3澶┿��1鏈�4鏃ユ寮忎笂鐝�備簩銆佽妭鍋囨棩鏈熼棿锛屽悇鐝粍瑕佷弗鏍艰惤瀹炰笂绾х殑閲嶈鎸囩ず绮剧锛屾寜鐓т笂绾х殑鍏蜂綋瑕佹眰锛岃鐪熸姄濂借惤瀹炶妭鏃ユ湡闂村�肩彮澶囧嫟宸ヤ綔锛岀‘淇濊妭鏃ユ湡闂翠紒涓氬悇椤瑰伐浣滄甯歌繍杞�倄x浼佷笟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))
})
- 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 +338,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 +372,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 +393,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 +419,18 @@
</script>
<style scoped lang="scss">
-//$kbBorderColor: #09d8f2;
-$kbBorderColor: rgba(9,216,242,0.4);
+$main_color: #09d8f2;
+$color01: #00FFFF;
+.tableData {
+ background: #000;
+}
-.kb_content {
- display: flex;
- position: relative;
- height: 990px;
- width: 100%;
- background-color: #000;
- letter-spacing: 2px;
-
- .kb_left {
- width: 1345px;
- height: 100%;
- padding-left: 5px;
-
- .kb_left_top {
- height: 345px;
- display: flex;
- flex-direction: column;
- //justify-content: space-around;
- justify-content: flex-end;
-
- .kb_left_top_block {
- width: 100%;
- height: 237px;
- display: flex;
- //border: 1px solid rgba(255, 255, 255, 0.6);
- justify-content: space-around;
- background-color: rgba(30, 33, 46,0.6);
-
- .content01 {
- margin: auto;
- position: relative;
- width: 202px;
- text-align: center;
-
- .pic01 {
- height: 145px;
- background: url("../../assets/images/pic01.png");
- }
-
- //.pie01{
- // height: 200px;
- // width: 200px;
- // margin-top: -30px;
- //}
-
- .number {
- margin-top: -50px;
- font-size: 18px;
- font-size: 20px;
- }
-
- .text{
- margin-top: 50px;
- font-size: 20px;
- }
- }
- }
-
- }
-
- .kb_left_bottom {
- height: 645px;
-
- .kb_left_bottom_content {
- height: 610px;
- display: flex;
- flex-direction: column;
-
- .content_head {
- display: flex;
- color: #00ffff;
- line-height: 20px;
- //font-size: 18px;
- margin-bottom: 10px;
- margin-top: -10px;
- }
-
- .content_body {
- border: 1px solid $kbBorderColor;
- }
- }
- }
- }
-
- .kb_right {
- width: 575px;
- height: 100%;
-
- .kb_right_top {
- height: 906px;
- margin-top: 58px;
- width: 100%;
-
- .kb_right_top_content {
- height: 100%;
- display: flex;
- flex-direction: column;
-
- .content_head {
- color: #00ffff;
- line-height: 20px;
- //font-size: 18px;
- margin-bottom: 10px;
- margin-top: -10px;
- }
-
- .content_body {
- border: 1px solid $kbBorderColor;
- }
- }
- }
-
- }
+.el-table__empty-text {
+ color: $main_color;
}
::v-deep .el-table::before {
height: 0;
-}
-
-::v-deep .el-table__body-wrapper {
- background-color: rgba(30, 33, 46);
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
@@ -590,5 +442,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>
diff --git a/src/views/kb/cjsc.vue b/src/views/kb/cjsc.vue
new file mode 100644
index 0000000..0245b6b
--- /dev/null
+++ b/src/views/kb/cjsc.vue
@@ -0,0 +1,523 @@
+<template>
+ <div>
+ <div class="kb_dashboard">
+
+ <!-- 鏄熺┖鑳屾櫙-->
+ <div ref="starsRef" class="stars">
+ <div v-for="(item, index) in starsCount" :key="index" class="star"/>
+ </div>
+
+ <div class="kb_header">
+ <div class="flex_c_c kb_header_text">
+ <div id="topBarLeft" style="width:600px;height:100%"/>
+ 杞﹂棿鐢熶骇鏁板瓧鍖栫湅鏉�
+ <div id="topBarRight" style="width:600px;height:100%;transform:rotate(180deg);"/>
+ </div>
+ <div class="kb_headTime">
+ <span>{{ headTime }}</span>
+ </div>
+ </div>
+ <div style="display: flex;justify-content: space-between;padding:0 20px 20px 20px">
+ <!-- 宸﹁竟閮ㄥ垎-->
+ <div style="width: 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="927"
+ >
+ <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="60"
+ >
+ <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="180"
+ >
+ <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="100"
+ 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="150"
+ 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="100"
+ >
+ <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="927"
+ >
+ <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'
+
+export default {
+ name: 'Cjsc',
+ data() {
+ return {
+ headTime: '',
+ tableDataLeftTop: [],
+ tableDataLeftTopTemp: [],
+
+ tableDataRightTop: [],
+ tableDataRightTopTemp: [],
+
+ tableDataCenterTop: [],
+ tableDataCenterTopTemp: [],
+
+ starsCount: 800, // 鏄熸槦鏁伴噺
+ distance: 900 // 闂磋窛
+ }
+ },
+ created() {
+ setInterval(this.getNowTime, 1000)
+
+ // 涓ゅ皬鏃剁湅鏉垮埛鏂颁竴娆�
+ setInterval(() => {
+ window.location.reload()
+ }, 1000 * 60 * 120)
+ },
+ mounted() {
+ this.getTopBar()
+ // 杈逛笂鍥涗釜琛ㄦ牸鏁版嵁鍐呭
+ this.getLeftTopTableDataSetInterval()
+
+ this.getRightTopTableDataSetInterval()
+
+ // 涓棿琛ㄦ牸鏁版嵁鍐呭
+ 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)
+ })
+ },
+
+ // 鑾峰彇鍙充笂鏁版嵁骞跺畾鏃跺埛鏂�
+ getRightTopTableDataSetInterval() {
+ let startValue = 0 // 鍒濆鍊�
+ const scale = 10// 鍒诲害
+
+ WkshpLineData({ LineCode: '002' }).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)
+ })
+ },
+
+ // 鑾峰彇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>
+<!--鏄熺┖-->
+<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>
diff --git a/src/views/kb/ckgl.vue b/src/views/kb/ckgl.vue
index cc72add..af2ca5c 100644
--- a/src/views/kb/ckgl.vue
+++ b/src/views/kb/ckgl.vue
@@ -1,340 +1,347 @@
<template>
<div>
<div class="kb_dashboard">
+
+ <!-- 鏄熺┖鑳屾櫙-->
+ <div ref="starsRef" class="stars">
+ <div v-for="(item, index) in starsCount" :key="index" class="star" />
+ </div>
+
<div class="kb_header">
<div class="flex_c_c kb_header_text">
- 浠撳簱绠＄悊鐪嬫澘
+ <div id="topBarLeft" style="width:600px;height:100%" />
+ 浠撳簱绠＄悊鏁板瓧鍖栫湅鏉�
+ <div id="topBarRight" style="width:600px;height:100%;transform:rotate(180deg);" />
</div>
- <div class="kb_headerPic" />
<div class="kb_headTime">
<span>{{ headTime }}</span>
</div>
</div>
- <MarqueeTips
- :content="MarqueeTipsContent"
- class="MarqueeTipsContentClass"
- style="top:90px"
- :speed="180"
- />
- <div class="kb_content">
- <div class="kb_left">
- <!-- 1-->
- <div class="kb_left_top kb_pd10">
- <div class="kb_left_top_block" style="margin-top: 10px">
- <div class="headTitle kb_title_text">浜у搧寰呭叆搴� <div style="margin-left: 30px">{{ number1 }} 鍗�</div></div>
- <div class="content">
- <el-table
- ref="tableDataTopRef"
- :data="tableDataTop"
- style="width: 100%;"
- :header-cell-style="headerCellStyle"
- :cell-style="cellStyle"
- height="400"
- >
- <el-table-column
- prop="voucherdate"
- label="鍗曟嵁鏃ユ湡"
- width="140"
- >
- <template slot-scope="{row}">
- <div v-if="row.voucherdate" class="ellipsis">{{ row.voucherdate.substring(0, 10) }}</div>
- <div v-else />
- </template>
- </el-table-column>
- <el-table-column
- prop="wo"
- label="鍗曟嵁缂栧彿"
- width="189"
- >
- <template slot-scope="{row}">
- <div class="ellipsis">{{ row.wo }}</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="wkshp_name"
- label="鐢熶骇杞﹂棿"
- width="105"
- >
- <template slot-scope="{row}">
- <div class="ellipsis">{{ row.wkshp_name }}</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="saleOrderCode"
- label="閿�鍞鍗曞彿"
- width="200"
- >
- <template slot-scope="{row}">
- <div v-if="row.saleOrderCode" class="ellipsis">{{ row.saleOrderCode }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="materiel_code"
- label="浜у搧缂栧彿"
- width="136"
- >
- <template slot-scope="{row}">
- <div class="ellipsis">{{ row.materiel_code }}</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="materiel_name"
- label="浜у搧鍚嶇О"
- width="180"
- >
- <template slot-scope="{row}">
- <div class="ellipsis">{{ row.materiel_name }}</div>
- </template>
- </el-table-column>
- <!-- <el-table-column-->
- <!-- prop="specification"-->
- <!-- label="瑙勬牸鍨嬪彿"-->
- <!-- width="128"-->
- <!-- >-->
- <!-- <template slot-scope="{row}">-->
- <!-- <div v-if="row.specification" class="ellipsis">{{ row.specification }}</div>-->
- <!-- <div v-else>/</div>-->
- <!-- </template>-->
- <!-- </el-table-column>-->
- <el-table-column
- prop="stck_name"
- label="棰勫叆浠撳簱"
- width="100"
- >
- <template slot-scope="{row}">
- <div v-if="row.stck_name" class="ellipsis">{{ row.stck_name }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="quantity"
- label="鏁伴噺"
- width="63"
- />
- <el-table-column
- prop="totalStockInQuantity"
- label="宸插叆搴撴暟閲�"
- width="100"
- >
- <template slot-scope="{row}">
- <div v-if="row.totalStockInQuantity">{{ row.totalStockInQuantity }}</div>
- <div v-else>0</div>
- </template>
- </el-table-column>
- <!-- <el-table-column-->
- <!-- prop="uomname"-->
- <!-- label="鍗曚綅"-->
- <!-- width="50"-->
- <!-- />-->
- <!-- <el-table-column-->
- <!-- prop="preStartDate"-->
- <!-- label="棰勮寮�宸�"-->
- <!-- width="100"-->
- <!-- >-->
- <!-- <template slot-scope="{row}">-->
- <!-- <div v-if="row.preStartDate">{{ row.preStartDate.substring(0, 10) }}</div>-->
- <!-- <div v-else />-->
- <!-- </template>-->
- <!-- </el-table-column>-->
- <el-table-column
- prop="preFinishDate"
- label="棰勮鍏ュ簱"
- width="140"
- >
- <template slot-scope="{row}">
- <div v-if="row.preFinishDate">{{ row.preFinishDate.substring(0, 10) }}</div>
- <div v-else />
- </template>
- </el-table-column>
- </el-table>
- </div>
+ <div style="display: flex;justify-content: space-between;padding:0 20px 20px 20px;height: 980px">
+ <div style="width: 1350px; " class="flex_c_b">
+ <div style="height: 470px;">
+ <div class="smallTitle">
+ <svg-icon icon-class="cpdrk" class="svg_class" />
+ 鐢熶骇寰呭叆搴�
</div>
- <div class="kb_left_top_block" style="margin-top: 25px">
- <div class="headTitle kb_title_text">浜у搧寰呭彂璐� <div style="margin-left: 30px">{{ number2 }} 鍗�</div></div>
- <div class="content">
- <el-table
- ref="tableDataBottomRef"
- :data="tableDataBottom"
- style="width: 100%;"
- :header-cell-style="headerCellStyle"
- :cell-style="cellStyle"
- height="440"
+ <div class="lineContent horn" style="height: 435px">
+ <el-table
+ ref="tableDataTopRef"
+ :data="tableDataTop"
+ style="width: 100%;"
+ class="tableData"
+ :header-cell-style="headerCellStyleCenter"
+ :cell-style="cellStyleCenter"
+ height="430"
+ >
+ <el-table-column
+ prop="voucherdate"
+ label="鍗曟嵁鏃ユ湡"
+ width="131"
>
- <el-table-column
- prop="voucherdate"
- label="鍗曟嵁鏃ユ湡"
- width="140"
- >
- <template slot-scope="{row}">
- <div v-if="row.voucherdate" class="ellipsis">{{ row.voucherdate.substring(0, 10) }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="wo"
- label="鍗曟嵁缂栧彿"
- width="228"
- >
- <template slot-scope="{row}">
- <div class="ellipsis">{{ row.wo }}</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="customename"
- label="瀹㈡埛"
- width="345"
- >
- <template slot-scope="{row}">
- <div v-if="row.customename" class="ellipsis">{{ row.customename }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <!-- <el-table-column-->
- <!-- prop="username"-->
- <!-- label="涓氬姟鍛�"-->
- <!-- width="65"-->
- <!-- >-->
- <!-- <template slot-scope="{row}">-->
- <!-- <div v-if="row.username" class="ellipsis">{{ row.username }}</div>-->
- <!-- <div v-else>/</div>-->
- <!-- </template>-->
- <!-- </el-table-column>-->
-<!-- <el-table-column-->
-<!-- prop="SourceVoucherCode"-->
-<!-- label="鏉ユ簮鍗曞彿"-->
-<!-- width="185"-->
-<!-- >-->
-<!-- <template slot-scope="{row}">-->
-<!-- <div v-if="row.SourceVoucherCode" class="ellipsis">{{ row.SourceVoucherCode }}</div>-->
-<!-- <div v-else>/</div>-->
-<!-- </template>-->
-<!-- </el-table-column>-->
- <!-- <el-table-column-->
- <!-- prop="materiel_code"-->
- <!-- label="浜у搧缂栧彿"-->
- <!-- width="96"-->
- <!-- />-->
- <el-table-column
- prop="materiel_name"
- label="浜у搧鍚嶇О"
- width="200"
- >
- <template slot-scope="{row}">
- <div v-if="row.materiel_name" class="ellipsis">{{ row.materiel_name }}</div>
- </template>
- </el-table-column>
- <!-- <el-table-column-->
- <!-- prop="specification"-->
- <!-- label="瑙勬牸鍨嬪彿"-->
- <!-- width="100"-->
- <!-- >-->
- <!-- <template slot-scope="{row}">-->
- <!-- <div v-if="row.specification" class="ellipsis">{{ row.specification }}</div>-->
- <!-- <div v-else>/</div>-->
- <!-- </template>-->
- <!-- </el-table-column>-->
- <el-table-column
- prop="quantity"
- label="鏁伴噺"
- width="130"
- >
- <template slot-scope="{row}">
- <div class="ellipsis">{{ row.quantity }}</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="saleOutQuantity"
- label="宸插彂璐ф暟閲�"
- width="130"
- >
- <template slot-scope="{row}">
- <div v-if="row.saleOutQuantity" class="ellipsis">{{ row.saleOutQuantity }}</div>
- <div v-else>0</div>
- </template>
- </el-table-column>
-<!-- <el-table-column-->
-<!-- prop="priuserdefnvc1"-->
-<!-- label="妫�楠屾柟寮�"-->
-<!-- width="110"-->
-<!-- >-->
-<!-- <template slot-scope="{row}">-->
-<!-- <div v-if="row.priuserdefnvc1">{{ row.priuserdefnvc1 }}</div>-->
-<!-- <div v-else>/</div>-->
-<!-- </template>-->
-<!-- </el-table-column>-->
-<!-- <el-table-column-->
-<!-- prop="priuserdefnvc2"-->
-<!-- label="妫�楠屼汉鍛�"-->
-<!-- width="110"-->
-<!-- >-->
-<!-- <template slot-scope="{row}">-->
-<!-- <div v-if="row.priuserdefnvc2">{{ row.priuserdefnvc2 }}</div>-->
-<!-- <div v-else>/</div>-->
-<!-- </template>-->
-<!-- </el-table-column>-->
- <el-table-column
- prop="deliveryDate"
- label="棰勮浜よ揣鏃ユ湡"
- width="180"
- >
- <template slot-scope="{row}">
- <div v-if="row.deliveryDate">{{ row.deliveryDate.substring(0,10) }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- </el-table>
- </div>
+ <template slot-scope="{row}">
+ <div v-if="row.voucherdate" class="ellipsis">{{ row.voucherdate.substring(0, 10) }}</div>
+ <div v-else />
+ </template>
+ </el-table-column>
+ <el-table-column
+ prop="wo"
+ label="鍗曟嵁缂栧彿"
+ width="189"
+ >
+ <template slot-scope="{row}">
+ <div class="ellipsis">{{ row.wo }}</div>
+ </template>
+ </el-table-column>
+ <el-table-column
+ prop="wkshp_name"
+ label="鐢熶骇杞﹂棿"
+ width="105"
+ >
+ <template slot-scope="{row}">
+ <div class="ellipsis">{{ row.wkshp_name }}</div>
+ </template>
+ </el-table-column>
+ <el-table-column
+ prop="saleOrderCode"
+ label="閿�鍞鍗曞彿"
+ width="200"
+ >
+ <template slot-scope="{row}">
+ <div v-if="row.saleOrderCode" class="ellipsis">{{ row.saleOrderCode }}</div>
+ <div v-else>/</div>
+ </template>
+ </el-table-column>
+ <el-table-column
+ prop="materiel_code"
+ label="浜у搧缂栧彿"
+ width="136"
+ >
+ <template slot-scope="{row}">
+ <div class="ellipsis">{{ row.materiel_code }}</div>
+ </template>
+ </el-table-column>
+ <el-table-column
+ prop="materiel_name"
+ label="浜у搧鍚嶇О"
+ width="180"
+ >
+ <template slot-scope="{row}">
+ <div class="ellipsis">{{ row.materiel_name }}</div>
+ </template>
+ </el-table-column>
+ <!-- <el-table-column-->
+ <!-- prop="specification"-->
+ <!-- label="瑙勬牸鍨嬪彿"-->
+ <!-- width="128"-->
+ <!-- >-->
+ <!-- <template slot-scope="{row}">-->
+ <!-- <div v-if="row.specification" class="ellipsis">{{ row.specification }}</div>-->
+ <!-- <div v-else>/</div>-->
+ <!-- </template>-->
+ <!-- </el-table-column>-->
+ <el-table-column
+ prop="stck_name"
+ label="棰勫叆浠撳簱"
+ width="100"
+ >
+ <template slot-scope="{row}">
+ <div v-if="row.stck_name" class="ellipsis">{{ row.stck_name }}</div>
+ <div v-else>/</div>
+ </template>
+ </el-table-column>
+ <el-table-column
+ prop="quantity"
+ label="鏁伴噺"
+ width="63"
+ />
+ <el-table-column
+ prop="totalStockInQuantity"
+ label="宸插叆搴撴暟閲�"
+ width="100"
+ >
+ <template slot-scope="{row}">
+ <div v-if="row.totalStockInQuantity">{{ row.totalStockInQuantity }}</div>
+ <div v-else>0</div>
+ </template>
+ </el-table-column>
+ <!-- <el-table-column-->
+ <!-- prop="uomname"-->
+ <!-- label="鍗曚綅"-->
+ <!-- width="50"-->
+ <!-- />-->
+ <!-- <el-table-column-->
+ <!-- prop="preStartDate"-->
+ <!-- label="棰勮寮�宸�"-->
+ <!-- width="100"-->
+ <!-- >-->
+ <!-- <template slot-scope="{row}">-->
+ <!-- <div v-if="row.preStartDate">{{ row.preStartDate.substring(0, 10) }}</div>-->
+ <!-- <div v-else />-->
+ <!-- </template>-->
+ <!-- </el-table-column>-->
+ <el-table-column
+ prop="preFinishDate"
+ label="棰勮鍏ュ簱"
+ width="140"
+ >
+ <template slot-scope="{row}">
+ <div v-if="row.preFinishDate">{{ row.preFinishDate.substring(0, 10) }}</div>
+ <div v-else />
+ </template>
+ </el-table-column>
+ </el-table>
</div>
</div>
- </div>
- <div class="kb_right kb_pd10">
- <div class="kb_right_top kb_pd10">
- <div class="kb_right_top_content">
- <div class="content_head kb_title_text" style="margin-top: 30px;">鍗婃垚鍝併�佷骇鍝佸簱瀛橀噺鎺掕Top5</div>
- <div class="content_body" style="height:402px;">
- <div id="bar03" style="width: 100%;height:100%" />
- </div>
- <!-- <div class="content_head kb_title_text" style="margin-top: 12px">鍗婃垚鍝佸簱瀛橀噺鎺掕Top5</div>-->
- <div class="content_head kb_title_text" style="margin-top: 12px">鍘熸潗鏂欏簱瀛橀噺鎺掕Top5</div>
- <div class="content_body">
- <div id="bar04" style="width: 100%;height:100%" />
- </div>
+ <div style="height: 470px;">
+ <div class="smallTitle">
+ <svg-icon icon-class="cpdfh" class="svg_class" />
+ 浜у搧寰呭彂璐�
+ </div>
+ <div class="lineContent horn" style="height: 435px">
+ <el-table
+ ref="tableDataBottomRef"
+ :data="tableDataBottom"
+ style="width: 100%;"
+ class="tableData"
+ :header-cell-style="headerCellStyleCenter"
+ :cell-style="cellStyleCenter"
+ height="430"
+ >
+ <el-table-column
+ prop="voucherdate"
+ label="鍗曟嵁鏃ユ湡"
+ width="131"
+ >
+ <template slot-scope="{row}">
+ <div v-if="row.voucherdate" class="ellipsis">{{ row.voucherdate.substring(0, 10) }}</div>
+ <div v-else>/</div>
+ </template>
+ </el-table-column>
+ <el-table-column
+ prop="wo"
+ label="鍗曟嵁缂栧彿"
+ width="205"
+ >
+ <template slot-scope="{row}">
+ <div class="ellipsis">{{ row.wo }}</div>
+ </template>
+ </el-table-column>
+ <el-table-column
+ prop="customename"
+ label="瀹㈡埛"
+ width="388"
+ >
+ <template slot-scope="{row}">
+ <div v-if="row.customename" class="ellipsis">{{ row.customename }}</div>
+ <div v-else>/</div>
+ </template>
+ </el-table-column>
+ <!-- <el-table-column-->
+ <!-- prop="username"-->
+ <!-- label="涓氬姟鍛�"-->
+ <!-- width="65"-->
+ <!-- >-->
+ <!-- <template slot-scope="{row}">-->
+ <!-- <div v-if="row.username" class="ellipsis">{{ row.username }}</div>-->
+ <!-- <div v-else>/</div>-->
+ <!-- </template>-->
+ <!-- </el-table-column>-->
+ <!-- <el-table-column-->
+ <!-- prop="SourceVoucherCode"-->
+ <!-- label="鏉ユ簮鍗曞彿"-->
+ <!-- width="185"-->
+ <!-- >-->
+ <!-- <template slot-scope="{row}">-->
+ <!-- <div v-if="row.SourceVoucherCode" class="ellipsis">{{ row.SourceVoucherCode }}</div>-->
+ <!-- <div v-else>/</div>-->
+ <!-- </template>-->
+ <!-- </el-table-column>-->
+ <!-- <el-table-column-->
+ <!-- prop="materiel_code"-->
+ <!-- label="浜у搧缂栧彿"-->
+ <!-- width="96"-->
+ <!-- />-->
+ <el-table-column
+ prop="materiel_name"
+ label="浜у搧鍚嶇О"
+ width="200"
+ >
+ <template slot-scope="{row}">
+ <div v-if="row.materiel_name" class="ellipsis">{{ row.materiel_name }}</div>
+ </template>
+ </el-table-column>
+ <!-- <el-table-column-->
+ <!-- prop="specification"-->
+ <!-- label="瑙勬牸鍨嬪彿"-->
+ <!-- width="100"-->
+ <!-- >-->
+ <!-- <template slot-scope="{row}">-->
+ <!-- <div v-if="row.specification" class="ellipsis">{{ row.specification }}</div>-->
+ <!-- <div v-else>/</div>-->
+ <!-- </template>-->
+ <!-- </el-table-column>-->
+ <el-table-column
+ prop="quantity"
+ label="鏁伴噺"
+ width="100"
+ >
+ <template slot-scope="{row}">
+ <div class="ellipsis">{{ row.quantity }}</div>
+ </template>
+ </el-table-column>
+ <el-table-column
+ prop="saleOutQuantity"
+ label="宸插彂璐ф暟閲�"
+ width="120"
+ >
+ <template slot-scope="{row}">
+ <div v-if="row.saleOutQuantity" class="ellipsis">{{ row.saleOutQuantity }}</div>
+ <div v-else>0</div>
+ </template>
+ </el-table-column>
+ <!-- <el-table-column-->
+ <!-- prop="priuserdefnvc1"-->
+ <!-- label="妫�楠屾柟寮�"-->
+ <!-- width="110"-->
+ <!-- >-->
+ <!-- <template slot-scope="{row}">-->
+ <!-- <div v-if="row.priuserdefnvc1">{{ row.priuserdefnvc1 }}</div>-->
+ <!-- <div v-else>/</div>-->
+ <!-- </template>-->
+ <!-- </el-table-column>-->
+ <!-- <el-table-column-->
+ <!-- prop="priuserdefnvc2"-->
+ <!-- label="妫�楠屼汉鍛�"-->
+ <!-- width="110"-->
+ <!-- >-->
+ <!-- <template slot-scope="{row}">-->
+ <!-- <div v-if="row.priuserdefnvc2">{{ row.priuserdefnvc2 }}</div>-->
+ <!-- <div v-else>/</div>-->
+ <!-- </template>-->
+ <!-- </el-table-column>-->
+ <el-table-column
+ prop="deliveryDate"
+ label="棰勮浜よ揣鏃ユ湡"
+ width="200"
+ >
+ <template slot-scope="{row}">
+ <div v-if="row.deliveryDate">{{ row.deliveryDate.substring(0,10) }}</div>
+ <div v-else>/</div>
+ </template>
+ </el-table-column>
+ </el-table>
</div>
</div>
</div>
+ <div style="width: 500px;" class="flex_c_b">
+ <div style="height: 470px;">
+ <div class="smallTitle">
+ <svg-icon icon-class="ph" class="svg_class" />
+ 鍗婃垚鍝併�佷骇鍝佸簱瀛橀噺鎺掕Top5
+ </div>
+ <div class="lineContent horn" style="height: 435px">
+ <div id="bar03" style="width: 100%;height:100%; " />
+ <!--/* <div id="bar03" style="width: 100%;height:100%;margin-left: -25px;margin-top: -10px" />*/-->
+ </div>
+ </div>
+ <div style="height: 470px;">
+ <div class="smallTitle">
+ <svg-icon icon-class="ph" class="svg_class" />
+ 鍘熸潗鏂欏簱瀛橀噺鎺掕Top5
+ </div>
+ <div class="lineContent horn" style="height: 435px">
+ <div id="bar04" style="width: 100%;height:100%;" />
+ <!-- <div id="bar04" style="width: 100%;height:100%;margin-left: -25px;margin-top: -10px" />-->
+ </div>
+ </div>
+ </div>
</div>
+
</div>
</div>
</template>
<script>
import './kbCommon.css'
-import { bar02, loadEcharts } from '@/utils/myEcharts'
+import { bar02, kbTop, loadEcharts } from '@/utils/myEcharts'
import {
WareHouseRightBottomData,
WareHouseRightTopData,
WareHouseTopBottomData,
WareHouseTopLeftData
} from '@/api/dzkb'
-import MarqueeTips from 'vue-marquee-tips'
export default {
name: 'Index2',
- components: {
- MarqueeTips
- },
+
data() {
return {
- onLine: navigator.onLine, // 鐩戝惉缃戠粶鏄惁鍦ㄧ嚎
headTime: '',
tableDataTop: [],
tableDataBottom: [],
-
- number1: '',
- number2: '',
MarqueeTipsContent: '', // 鍏憡
speed: 100, // 鍏憡鎾斁鐨勯�熷害
@@ -342,7 +349,10 @@
tableTopTask: null,
tableBottomTask: null,
echartsRightTop: null,
- echartsRightBottom: null
+ echartsRightBottom: null,
+
+ starsCount: 800, // 鏄熸槦鏁伴噺
+ distance: 900 // 闂磋窛
}
},
@@ -356,60 +366,38 @@
}, 1000 * 60 * 120)
},
mounted() {
- window.addEventListener('online', this.updateOnlineStatus)
- window.addEventListener('offline', this.updateOnlineStatus)
- this.updateOnlineStatus({ type: this.onLine ? 'online' : 'offline', isFirst: true })
- },
- beforeDestroy() {
- window.removeEventListener('online', this.updateOnlineStatus)
- window.removeEventListener('offline', this.updateOnlineStatus)
- },
- methods: {
- // 鏇存柊缃戠粶鐘舵��
- updateOnlineStatus(e) {
- if (e.isFirst) {
- this.getWareHouseTopLeftData()
- this.getWareHouseTopBottomData()
- this.getEcharts()
- // this.getMarqueeTipsContent()
- } else {
- const loading = this.$loading({
- lock: true,
- text: '鏂綉浜嗭紝姝ｅ湪鎷煎懡鑱旂綉涓紝璇锋鏌ョ綉缁滄槸鍚︽甯�...',
- spinner: 'el-icon-loading',
- customClass: 'osloading',
- background: 'rgba(0, 0, 0, 0.7)'
- })
- const { type } = e
- this.onLine = type === 'online'
- if (this.onLine) {
- this.getWareHouseTopLeftData()
- this.getWareHouseTopBottomData()
- this.getEcharts()
- loading.close()
- this.$message.success('缃戠粶杩炴帴鎴愬姛锛�')
- } else {
- clearInterval(this.tableTopTask)
- clearInterval(this.tableBottomTask)
- clearInterval(this.echartsRightTop)
- clearInterval(this.echartsRightBottom)
- this.$message.error('缃戠粶鎺夌嚎锛岃鍏虫敞缃戠粶鐘舵�侊紒')
- }
- }
- },
+ this.getTopBar()
- // 鑾峰彇鍏憡
- getMarqueeTipsContent() {
- // this.MarqueeTipsContent = '鍚勪綅鍛樺伐浠細鏍规嵁涓婄骇鐨勯�氱煡锛岀粨鍚堟垜浼佸疄闄呮儏鍐碉紝鐜板皢20xx骞寸殑鍏冩棪鏀惧亣閫氱煡濡備笅锛氫竴銆�1鏈�1鏃ヨ嚦1鏈�3鏃ユ斁鍋囪皟浼戯紝鍏�3澶┿��1鏈�4鏃ユ寮忎笂鐝�備簩銆佽妭鍋囨棩鏈熼棿锛屽悇鐝粍瑕佷弗鏍艰惤瀹炰笂绾х殑閲嶈鎸囩ず绮剧锛屾寜鐓т笂绾х殑鍏蜂綋瑕佹眰锛岃鐪熸姄濂借惤瀹炶妭鏃ユ湡闂村�肩彮澶囧嫟宸ヤ綔锛岀‘淇濊妭鏃ユ湡闂翠紒涓氬悇椤瑰伐浣滄甯歌繍杞�倄x浼佷笟20xx骞�12鏈�28鏃�'
- // const spance = ' '.padStart(this.MarqueeTipsContent.length * 2, ' ')
- // this.MarqueeTipsContent = this.MarqueeTipsContent + spance
- // this.speed = this.MarqueeTipsContent.length / 10
+ this.getWareHouseTopLeftData()
+ this.getWareHouseTopBottomData()
+ this.getEcharts()
+ this.setStarsRef()
+ },
+
+ methods: {
+ setStarsRef() {
+ const starNodes = Array.from(this.$refs.starsRef.children)
+ starNodes.forEach(item => {
+ const speed = 0.2 + Math.random() * 1
+ const thisDistance = this.distance + Math.random() * 300
+ item.style.transformOrigin = `0 0 ${thisDistance}px`
+ item.style.transform = `
+ translate3d(0,0,-${thisDistance}px)
+ rotateY(${Math.random() * 360}deg)
+ rotateX(${Math.random() * -50}deg)
+ scale(${speed},${speed})`
+ })
+ },
+ // 鑾峰彇topEcharts
+ getTopBar() {
+ loadEcharts('topBarLeft', kbTop())
+ loadEcharts('topBarRight', kbTop())
},
// 鑾峰彇宸︿笂table鏁版嵁
getWareHouseTopLeftData() {
WareHouseTopLeftData().then(res => {
this.tableDataTop = res.data
- this.number1 = this.tableDataTop.length
+ // this.number1 = this.tableDataTop.length
const divData = this.$refs.tableDataTopRef.bodyWrapper
// 鎷垮埌鍏冪礌鍚庯紝瀵瑰厓绱犺繘琛屽畾鏃跺鍔犺窛绂婚《閮ㄨ窛绂伙紝瀹炵幇婊氬姩鏁堟灉(姝ら厤缃负姣�100姣绉诲姩1鍍忕礌)
this.tableTopTask = setInterval(() => {
@@ -422,7 +410,7 @@
divData.scrollTop = 0
WareHouseTopLeftData().then(res => {
this.tableDataTop = res.data
- this.number1 = this.tableDataTop.length
+ // this.number1 = this.tableDataTop.length
if (this.tableDataTop.length > 9) {
clearInterval(this.tableTopTask)
this.getWareHouseTopLeftData()
@@ -499,23 +487,25 @@
this.headTime = `${y}-${m}-${d} ${hh}:${mm}:${ss} ${week}`
},
- headerCellStyle() {
+ headerCellStyleCenter() {
return {
- backgroundColor: 'rgb(30 ,33, 46)',
+ // backgroundColor: 'rgb(30 ,33, 46)',
+ backgroundColor: '#000',
padding: '10px 0',
textAlign: 'center',
color: '#07acc2',
- border: 'none'
+ border: 'none',
+ fontSize: '18px'
}
},
- cellStyle() {
+ cellStyleCenter() {
return {
- padding: '8px 0',
+ padding: '7.5px 0',
textAlign: 'center',
- backgroundColor: 'rgba(30, 33, 46 )',
- // backgroundColor: 'transparent',
+ backgroundColor: '#000',
color: '#fff',
- border: 'none'
+ border: 'none',
+ fontSize: '18px'
}
}
}
@@ -523,94 +513,15 @@
</script>
<style scoped lang="scss">
-//$kbBorderColor: #09d8f2;
-$kbBorderColor: rgba(9,216,242,0.4);
-$kbBackgroundColor: rgba(30, 33, 46, 0.6);
-.kb_content {
- display: flex;
- position: relative;
- height: 990px;
- width: 100%;
- background-color: #000;
- letter-spacing: 2px;
-
- .kb_left {
- width: 1380px;
- height: 100%;
- padding-left: 5px;
-
- .kb_left_top {
- height:880px;
- margin-top: 40px;
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
-
- .kb_left_top_block {
- width: 100%;
- height: 460px;
- display: flex;
- flex-direction: column;
-
- .headTitle {
- //line-height: 54px;
- //border-bottom: 1px solid rgba(255, 255, 255, 0.6);
- //text-align: center;
- //font-size: 26px;
- line-height: 20px;
- //font-size: 18px;
- margin-bottom: 10px;
- margin-top: -10px;
- display: flex;
- color: #00ffff;
-
- }
-
- .content {
- border: 1px solid $kbBorderColor;
- }
- }
-
- }
-
- }
-
- .kb_right {
- width: 540px;
- height: 100%;
-
- .kb_right_top {
- height: 972px;
- width: 100%;
-
- .kb_right_top_content {
- height: 100%;
- display: flex;
- flex-direction: column;
-
- .content_head {
- line-height: 20px;
- //font-size: 18px;
- margin-bottom: 10px;
- margin-top: -10px;
- color: #00ffff;
- }
-
- .content_body {
- height: 443px;
- border: 1px solid $kbBorderColor;
- background-color: $kbBackgroundColor;
-
- }
- }
- }
-
- }
+$main_color:#09d8f2;
+$color01: #00FFFF;
+.tableData{
+ background: #000;
}
-::v-deep .el-table__body-wrapper {
- background-color: rgba(30, 33, 46);
+.el-table__empty-text{
+ color: $main_color;
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
@@ -628,3 +539,38 @@
font-size: 18px;
}
</style>
+
+<!--鏄熺┖-->
+<style lang="css" scoped>
+@keyframes rotate {
+ 0% {
+ transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
+ }
+ 100% {
+ transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
+ }
+}
+
+.stars {
+ transform: perspective(500px);
+ transform-style: preserve-3d;
+ position: absolute;
+ perspective-origin: 50% 100%;
+ left: 45%;
+ animation: rotate 90s infinite linear;
+ bottom: 0;
+ z-index: 102;
+}
+
+.star {
+ width: 2px;
+ height: 2px;
+ /*background: #f7f7b6;*/
+ background: #8edffc;
+ position: absolute;
+ left: 0;
+ top: 0;
+ backface-visibility: hidden;
+ z-index: 102;
+}
+</style>
diff --git a/src/views/kb/dccj.vue b/src/views/kb/dccj.vue
deleted file mode 100644
index 047a598..0000000
--- a/src/views/kb/dccj.vue
+++ /dev/null
@@ -1,843 +0,0 @@
-<template>
- <div>
- <div class="kb_dashboard">
- <div class="kb_header">
- <div class="flex_c_c kb_header_text">
- 鐢垫睜杞﹂棿鐪嬫澘
- </div>
- <div class="kb_headerPic" />
- <div class="kb_headTime">
- <span>{{ headTime }}</span>
- </div>
- </div>
- <MarqueeTips
- :content="MarqueeTipsContent"
- class="MarqueeTipsContentClass"
- :speed="180"
- />
- <!-- :speed="speed"-->
- <div class="kb_content">
- <div class="kb_left">
- <!-- 1-->
- <div class="kb_left_top_title01 kb_title_text">
- <!-- <div class="PG01" />-->
- <!-- <svg-icon icon-class="sccx" />-->
- 浜х嚎鍔犲伐涓换鍔�
- <div style="margin-left: 30px">{{ number1 }} 鍗�</div>
- </div>
-
- <div class="kb_left_top kb_pd10">
- <div class="kb_left_top02">
- <div 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">
- 鍔犲伐鍗曞彿:{{ item.workcode }}
- </div>
- <div class="kb_mt5">
- 浜у搧鍚嶇О:{{ item.partname }}
- </div>
- <div class="kb_mt5">
- 浠诲姟鏁伴噺:{{ parseFloat(item.qty) }}
- </div>
- </div>
- </div>
- <div class="kb_block03 kb_pd10 ">
- <div v-if="item.children&&item.children.length>0" class="flex_s_c">
- <div
- v-for="(it,ind) in item.children"
- :key="ind"
- class="kb_block03_content flex_c_c"
- >
- <div>
- <div class="content01">{{ it.stepname }}</div>
- </div>
- <div class="content02Parent">
- <div class="content02">
- <div class="content02_1 ">浠诲姟</div>
- <div class="content02_2 borderTop ">{{ parseFloat(it.planqty) }}</div>
- </div>
- <div class="content02">
- <div class="content02_1 ">鍚堟牸</div>
- <div class="content02_2 borderTop ">{{ parseFloat(it.goodqty) }}</div>
- </div>
- <div class="content02" style="border-right: 0">
- <div class="content02_1 ">涓嶈壇</div>
- <div class="content02_2 borderTop ">{{ parseFloat(it.ngqty) }}</div>
- </div>
- </div>
- </div>
- </div>
- <div v-if="item.children&&item.children.length>0" class="kb_block03_02 flex_s_c">
- <div
- v-for="(it,ind) in item.children"
- :key="ind"
- class="kb_block03_02_content flex_c_c"
- >
- <div class="flex_c_c content01">
- <div
- v-if="it.status==='START'&&(parseFloat(it.ngqty)===0||it.ngqty==='')&&(parseFloat(it.goodqty)===0||it.goodqty==='')"
- class="circle"
- style="background-color: blue;"
- />
- <div
- v-else-if="it.status==='ALLO'&&(parseFloat(it.ngqty)===0||it.ngqty==='')&&(parseFloat(it.goodqty)===0||it.goodqty==='')"
- class="circle"
- style="background-color: rgb(255 255 255)"
- />
- <div
- v-else-if="parseFloat(it.ngqty)+parseFloat(it.goodqty)>=parseFloat(it.planqty)"
- class="circle"
- />
- <div v-else class="circleYellow" />
- </div>
- </div>
- </div>
-
- </div>
- </div>
- </div>
- </div>
- <!-- 2-->
- <div class="kb_left_bottom kb_pd10">
- <div class="kb_left_bottom_content">
- <div class="content_head kb_title_text">浜х嚎鍔犲伐浠诲姟
- <div style="margin-left: 30px">{{ number2 }} 鍗�</div>
- </div>
- <div class="content_body">
- <el-table
- ref="tableData"
- :data="tableData"
- style="width: 100%;"
- :header-cell-style="headerCellStyle"
- :cell-style="cellStyle"
- height="440"
- >
- <el-table-column
- prop="RowNum"
- label="搴忓彿"
- width="50"
- />
- <!-- label="鍔犲伐鐘舵��"-->
- <el-table-column
- prop="status"
- label="鐘舵��"
- width="65"
- >
- <template slot-scope="{row}">
- <div v-if="row.status==='ALLO'">宸叉淳鍙�</div>
- <div v-if="row.status==='START'">寮�宸�</div>
- <div v-if="row.status==='NEW'">鏂板伐鍗�</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="lm_date"
- label="娲惧彂鏃堕棿"
- width="115"
- >
- <template slot-scope="{row}">
- <div>{{ row.lm_date.substring(0, 10) }}</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="saleOrderCode"
- label="閿�鍞鍗曞彿"
- width="178"
- >
- <template slot-scope="{row}">
- <div v-if="row.saleOrderCode" class="ellipsis">{{ row.saleOrderCode }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="wo_code"
- label="鍔犲伐鍗曞彿"
- width="205"
- >
- <template slot-scope="{row}">
- <div v-if="row.wo_code" class="ellipsis">{{ row.wo_code }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="partname"
- label="浜у搧鍚嶇О"
- width="150"
- >
- <template slot-scope="{row}">
- <div v-if="row.partname" class="ellipsis">{{ row.partname }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <!-- <el-table-column-->
- <!-- prop="partspec"-->
- <!-- label="瑙勬牸"-->
- <!-- width="125"-->
- <!-- >-->
- <!-- <template slot-scope="{row}">-->
- <!-- <div v-if="row.partspec" class="ellipsis">{{ row.partspec }}</div>-->
- <!-- <div v-else>/</div>-->
- <!-- </template>-->
- <!-- </el-table-column>-->
- <!-- <el-table-column-->
- <!-- prop="name"-->
- <!-- label="鍗曚綅"-->
- <!-- width="50"-->
- <!-- />-->
- <el-table-column
- prop="plan_qty"
- label="浠诲姟鏁伴噺"
- width="85"
- />
- <el-table-column
- prop="good_qty"
- label="瀹屽伐鏁伴噺"
- width="85"
- />
- <el-table-column
- prop="ng_qty"
- label="涓嶈壇鏁伴噺"
- width="85"
- />
- <el-table-column
- prop="wcl"
- label="瀹屾垚鐜�"
- width="60"
- >
- <template slot-scope="{row}">
- <div>{{ parseFloat((row.good_qty * 100 / row.plan_qty).toFixed(2)) }}%</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="planenddate"
- label="棰勮寮�濮�"
- width="115"
- >
- <template slot-scope="{row}">
- <div>{{ row.planenddate.substring(0, 10) }}</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="planstartdate"
- label="棰勮缁撴潫"
- width="125"
- >
- <template slot-scope="{row}">
- <div>{{ row.planstartdate.substring(0, 10) }}</div>
- </template>
- </el-table-column>
- </el-table>
- </div>
- </div>
- </div>
- </div>
- <div class="kb_right kb_pd10">
- <div class="kb_right_top kb_pd10">
- <div class="kb_right_top_content">
- <div class="content_head kb_title_text">褰撴棩瀹屽伐浜у搧鏁伴噺鎺掕</div>
- <div class="content_body">
- <el-table
- ref="tableDataRank"
- :data="tableDataRank"
- class="tableDataRank"
- style="width: 100%;"
- :header-cell-style="headerCellStyle"
- :cell-style="cellStyle"
- height="396"
- >
- <el-table-column
- type="index"
- label="搴忓彿"
- width="55"
- />
- <el-table-column
- prop="wkshname"
- label="杞﹂棿锛堜緵鏂癸級"
- width="120"
- >
- <template slot-scope="{row}">
- <div v-if="row.wkshname" class="ellipsis">{{ row.wkshname }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="linename"
- label="浜х嚎"
- width="120"
- >
- <template slot-scope="{row}">
- <div v-if="row.linename" class="ellipsis">{{ row.linename }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="partname"
- width="138"
- label="浜у搧"
- >
- <template slot-scope="{row}">
- <div v-if="row.partname" class="ellipsis">{{ row.partname }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="good_qty"
- label="鏁伴噺"
- width="100"
- />
- </el-table>
- </div>
- </div>
- </div>
- <div class="kb_right_bottom kb_pd10">
- <div class="kb_right_bottom_content_title kb_title_text">
- 涓�鍛ㄤ笉鑹疶op5
- </div>
- <div class="kb_right_bottom_content">
- <div id="bar02" style="width: 100%;height:100%" />
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
-</template>
-
-<script>
-import './kbCommon.css'
-import { bar02, loadEcharts } from '@/utils/myEcharts'
-import {
- LineSearchBottomLeftData,
- LineSearchBottomRightData,
- LineSearchTopLeftData,
- LineSearchTopRightData, ShopSearch, WkspReportNotice
-} from '@/api/dzkb'
-import MarqueeTips from 'vue-marquee-tips'
-
-export default {
- name: 'Index2',
- components: {
- MarqueeTips
- },
- data() {
- return {
-
- onLine: navigator.onLine, // 鐩戝惉缃戠粶鏄惁鍦ㄧ嚎
-
- headTime: '',
-
- lineContent: [],
- lineContent3: [],
-
- leftTopData: [],
- tableData: [],
- tableDataRank: [],
- lineCodeArr: [],
-
- ShopArr: ['CJ002'], // 杞﹂棿缂栫爜鏁扮粍
-
- number1: '',
- number2: '',
-
- MarqueeTipsContent: '', // 鍏憡
- speed: 100, // 鍏憡鎾斁鐨勯�熷害
-
- MarqueeTipsTask: null,
- ShopSearchTask: null,
- ShopSearchLineTask: null,
- TableDataRollTask: null,
- TableDataRankRollTask: null,
- EchartsTask: null
- }
- },
-
- created() {
- setInterval(this.getNowTime, 1000)
-
- // 涓ゅ皬鏃剁湅鏉垮埛鏂颁竴娆�
- setInterval(() => {
- window.location.reload()
- }, 1000 * 60 * 120)
- },
- mounted() {
- // 鐩戝惉缃戠粶鏄惁鍦ㄧ嚎
- window.addEventListener('online', this.updateOnlineStatus)
- window.addEventListener('offline', this.updateOnlineStatus)
- this.updateOnlineStatus({ type: this.onLine ? 'online' : 'offline', isFirst: true })
- },
- beforeDestroy() {
- window.removeEventListener('online', this.updateOnlineStatus)
- window.removeEventListener('offline', this.updateOnlineStatus)
- },
- methods: {
- // 鏇存柊缃戠粶鐘舵��
- updateOnlineStatus(e) {
- if (e.isFirst) {
- this.getValue()// 鑾峰彇鍊�
- } else {
- const loading = this.$loading({
- lock: true,
- text: '鏂綉浜嗭紝姝ｅ湪鎷煎懡鑱旂綉涓紝璇锋鏌ョ綉缁滄槸鍚︽甯�...',
- spinner: 'el-icon-loading',
- customClass: 'osloading',
- background: 'rgba(0, 0, 0, 0.7)'
- })
- const { type } = e
- this.onLine = type === 'online'
- if (this.onLine) {
- this.getValue()
- loading.close()
- this.$message.success('缃戠粶杩炴帴鎴愬姛锛�')
- } else {
- clearInterval(this.MarqueeTipsTask)
- clearInterval(this.ShopSearchTask)
- clearInterval(this.ShopSearchLineTask)
- clearInterval(this.TableDataRollTask)
- clearInterval(this.TableDataRankRollTask)
- clearInterval(this.EchartsTask)
- this.$message.error('缃戠粶鎺夌嚎锛岃鍏虫敞缃戠粶鐘舵�侊紒')
- }
- }
- },
- // 鑾峰彇鍊�
- async getValue() {
- // await this.getShopSearch()
- await this.getShopSearchLine()
-
- await this.getEcharts()
- await this.getTableDataRoll()
- await this.getTableDataRankRoll()
- await this.getMarqueeTipsContent()
- await this.getMarqueeTipsContent()
- },
- // 鑾峰彇鍏憡
- getMarqueeTipsContent() {
- WkspReportNotice({ shopcode: this.ShopArr.join(',') }).then(res => {
- let contentAll = ''
- res.data.forEach(item => {
- contentAll += item.contents + ' '.padStart(item.contents.toString().length * 2, ' ')
- })
- this.MarqueeTipsContent = contentAll
- this.speed = this.MarqueeTipsContent.length / 10
-
- this.MarqueeTipsTask = setInterval(() => {
- WkspReportNotice({ shopcode: this.ShopArr.join(',') }).then(res1 => {
- let contentAll = ''
- res1.data.forEach(item => {
- contentAll += item.contents + ' '.padStart(item.contents.toString().length * 2, ' ')
- })
- this.MarqueeTipsContent = contentAll
- this.speed = this.MarqueeTipsContent.length / 10
- })
- // }, this.speed * 1000)
- }, 1000 * 60 * 5)
- })
- },
- // 鑾峰彇杞﹂棿缂栫爜
- async getShopSearch() {
- const res1 = await ShopSearch()
- if (res1.code === '200') {
- this.ShopArr = []
- res1.data.forEach(item => {
- this.ShopArr.push(item.org_code)
- })
- }
- setInterval(() => {
- this.ShopSearchTask = ShopSearch().then(res1 => {
- if (res1.code === '200') {
- this.ShopArr = []
- res1.data.forEach(item => {
- this.ShopArr.push(item.org_code)
- })
- }
- })
- }, 1000 * 30)
- },
- // 浜х嚎鍔犲伐涓换鍔�
- getShopSearchLine() {
- let length, count
- LineSearchTopLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
- this.lineContent = res.data
- length = this.lineContent.length
- count = Math.ceil(length / 3) // 闇�瑕佽疆鎾殑缁勬暟 3涓负涓�缁�
- this.lineContent3 = this.lineContent.slice(0, 3)
-
- this.number1 = this.lineContent.length
- })
-
- let start = 0
- this.ShopSearchLineTask = setInterval(() => {
- if (Math.floor(start / 3) === count && count !== 0) {
- start = 0
- LineSearchTopLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
- this.lineContent = res.data
- length = this.lineContent.length
- count = Math.ceil(length / 3) // 闇�瑕佽疆鎾殑缁勬暟 3涓负涓�缁�
- this.lineContent3 = this.lineContent.slice(0, 3)
-
- this.number1 = this.lineContent.length
- })
- } else if (count === 0) {
- clearInterval(this.ShopSearchLineTask)
- this.getShopSearchLine()
- }
- this.lineContent3 = this.lineContent.slice(start, start + 3)
- start = start + 3
- }, 1000 * 3)
- },
-
- // 浜х嚎鍔犲伐浠诲姟
- getTableDataRoll() {
- LineSearchBottomLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
- this.tableData = res.data
- this.number2 = this.tableData.length
-
- 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
-
- const divData = this.$refs.tableDataRank.bodyWrapper
- // 鎷垮埌鍏冪礌鍚庯紝瀵瑰厓绱犺繘琛屽畾鏃跺鍔犺窛绂婚《閮ㄨ窛绂伙紝瀹炵幇婊氬姩鏁堟灉(姝ら厤缃负姣�100姣绉诲姩1鍍忕礌)
- this.TableDataRankRollTask = setInterval(() => {
- // 鍏冪礌鑷璺濈椤堕儴1鍍忕礌
- // divData.scrollTop += divData.scrollHeight / this.tableDataRank.length
- divData.scrollTop += 1
- // 鍒ゆ柇鍏冪礌鏄惁婊氬姩鍒板簳閮�(鍙楂樺害+璺濈椤堕儴=鏁翠釜楂樺害)
- if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
- // 閲嶇疆table璺濈椤堕儴璺濈
- divData.scrollTop = 0
- LineSearchTopRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
- this.tableDataRank = res.data
-
- if (this.tableDataRank.length > 9) {
- clearInterval(this.TableDataRankRollTask)
- this.getTableDataRankRoll()
- }
- })
- }
- }, this.tableDataRank.length <= 9 ? 1000 * 3 : 100)
- })
- },
- // 鑾峰彇echarts
- getEcharts() {
- LineSearchBottomRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
- loadEcharts('bar02', bar02(res.data.map(i => i.cont), res.data.map(i => i.name)))
- })
-
- this.EchartsTask = setInterval(() => {
- LineSearchBottomRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
- loadEcharts('bar02', bar02(res.data.map(i => i.cont), res.data.map(i => i.name)))
- })
- }, 1000 * 15)
- },
- // 鑾峰彇褰撳墠鏃堕棿
- 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)',
- padding: '10px 0',
- textAlign: 'center',
- color: '#07acc2',
- border: 'none'
- }
- },
- cellStyle() {
- return {
- padding: '8px 0',
- textAlign: 'center',
- backgroundColor: 'rgba(30, 33, 46 )',
- // backgroundColor: 'transparent',
- color: '#fff',
- border: 'none'
- }
- }
-
- }
-}
-</script>
-
-<style scoped lang="scss">
-$kbBorderColor: rgba(9, 216, 242, 0.4);
-$kbBackgroundColor: rgba(30, 33, 46, 0.6);
-.kb_content {
- display: flex;
- position: relative;
- height: 990px;
- width: 100%;
- letter-spacing: 2px;
- color: #fff;
-
- .kb_left {
- width: 1345px;
- height: 100%;
- padding-left: 5px;
-
- .kb_left_top_title01 {
- position: absolute;
- top: 37px;
- left: 15px;
- display: flex;
- color: #00ffff;
-
- .PG01 {
- background: url("../../assets/images/GP_1.png") no-repeat;
- width: 28px;
- height: 12px;
- margin-top: 4px;
- margin-right: 10px;
- }
- }
-
- .kb_left_top {
- height: 495px;
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- padding-top: 70px;
-
- .kb_left_top02 {
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- border: 1px solid $kbBorderColor;
- height: 400px;
- border-radius: 5px;
- background-color: $kbBackgroundColor;
-
- .kb_left_top_block {
- width: 100%;
- height: 133px;
- display: flex;
- font-size: 17px;
- border-bottom: 1px solid $kbBorderColor;
- justify-content: flex-start;
-
- .kb_block02 {
- width: 304px;
- display: flex;
- align-items: center;
- border-right: 1px solid $kbBorderColor;
- }
-
- .kb_block03 {
- width: 1020px;
- font-size: 17px;
- display: flex;
- flex-direction: column;
- //font-size: 12px;
- border-radius: 5px;
-
- .kb_block03_content {
- border: 1px solid $kbBorderColor;
- width: 180px;
- height: 80px;
- margin-right: 15px;
- display: flex;
- flex-direction: column;
-
- .content01 {
- height: 30px;
- width: 100%;
- border-bottom: 1px solid $kbBorderColor;
- display: flex;
- align-items: center;
- justify-content: center;
- }
-
- .content02Parent {
- display: flex;
-
- .content02 {
- width: 60px;
- border-right: 1px solid $kbBorderColor;
-
- .content02_1 {
- display: flex;
- align-items: center;
- justify-content: center;
- //height: 50%;
- height: 25px;
- }
-
- .content02_2 {
- height: 25px;
- display: flex;
- align-items: center;
- justify-content: center;
- }
-
- .borderTop {
- border-top: 1px solid $kbBorderColor;
- }
- }
- }
-
- }
- }
-
- .kb_block03_02 {
- margin-top: 7px;
- display: flex;
-
- .kb_block03_02_content {
- width: 180px;
- margin-right: 15px;
-
- .content01 {
- .circle {
- width: 26px;
- height: 26px;
- background-color: #00ff8b;
- border-radius: 50%;
- }
-
- }
-
- }
- }
-
- }
-
- .kb_left_top_block:nth-child(3n) {
- border-bottom: none !important;
- }
- }
- }
-
- .kb_left_bottom {
- height: 495px;
-
- .kb_left_bottom_content {
- height: 460px;
- display: flex;
- flex-direction: column;
-
- .content_head {
- display: flex;
- line-height: 20px;
- margin-bottom: 10px;
- margin-top: -10px;
- color: #00ffff;
-
- }
-
- .content_body {
- border: 1px solid $kbBorderColor;
- }
- }
- }
- }
-
- .kb_right {
- width: 575px;
- height: 100%;
-
- .kb_right_top {
- margin-top: 30px;
- margin-bottom: -30px;
- height: 476px;
- width: 100%;
-
- .kb_right_top_content {
- height: 430px;
- display: flex;
- flex-direction: column;
-
- .content_head {
- //font-size: 18px;
- line-height: 20px;
- margin-bottom: 10px;
- margin-top: -10px;
- color: #00ffff;
- }
-
- .content_body {
- border: 1px solid $kbBorderColor;
- }
- }
- }
-
- .kb_right_bottom {
- height: 482px;
- margin-top: 8px;
-
- .kb_right_bottom_content_title {
- color: #00ffff;
- margin-bottom: 5px;
- margin-top: -12px;
- }
-
- .kb_right_bottom_content {
- border: 1px solid $kbBorderColor;
- height: 441px;
- width: 100%;
- border-radius: 5px;
- background-color: $kbBackgroundColor;
- }
- }
- }
-}
-
-::v-deep .el-table::before {
- height: 0;
-}
-
-::v-deep .el-table__body-wrapper {
- background-color: rgba(30, 33, 46);
-}
-
-::v-deep .el-table__body-wrapper::-webkit-scrollbar {
- /* width: 0;瀹藉害涓�0鏆楄棌 */
- width: 0;
-}
-
-::v-deep .cell {
- padding: 0 !important;
- font-size: 18px;
-}
-
-.circleYellow {
- width: 26px;
- height: 26px;
- background-color: rgb(255 255 0);
- border-radius: 50%;
-}
-</style>
diff --git a/src/views/kb/kbCommon.css b/src/views/kb/kbCommon.css
index 1e65115..6c967f1 100644
--- a/src/views/kb/kbCommon.css
+++ b/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 {
@@ -45,7 +47,7 @@
.kb_headTime {
position: absolute;
- right: 10px;
+ right: 80px;
width: 360px;
height: 50px;
z-index: 10;
@@ -66,6 +68,12 @@
flex-direction: column;
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 {
@@ -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;
+}
diff --git a/src/views/kb/zhkb.vue b/src/views/kb/zhkb.vue
index 1e27266..68fbcf4 100644
--- a/src/views/kb/zhkb.vue
+++ b/src/views/kb/zhkb.vue
@@ -1,44 +1,41 @@
<template>
<div>
<div class="kb_dashboard">
+ <!-- 鏄熺┖鑳屾櫙-->
+ <div ref="starsRef" class="stars">
+ <div v-for="(item, index) in starsCount" :key="index" class="star" />
+ </div>
+
<div class="kb_header">
<div class="flex_c_c kb_header_text">
- 杞﹂棿缁煎悎鐪嬫澘
+ <div id="topBarLeft" style="width:600px;height:100%" />
+ 杞﹂棿缁煎悎鏁板瓧鍖栫湅鏉�
+ <div id="topBarRight" style="width:600px;height:100%;transform:rotate(180deg);" />
</div>
- <div class="kb_headerPic" />
<div class="kb_headTime">
<span>{{ headTime }}</span>
</div>
</div>
- <MarqueeTips
- :content="MarqueeTipsContent"
- class="MarqueeTipsContentClass"
- :speed="180"
- />
- <!-- :speed="speed"-->
- <div class="kb_content">
- <div class="kb_left">
- <!-- 1-->
- <div class="kb_left_top_title01 kb_title_text">
- <!-- <div class="PG01" />-->
- <!-- <svg-icon icon-class="sccx" />-->
- 浜х嚎鍔犲伐涓换鍔�
- <div style="margin-left: 30px">{{ number1 }} 鍗�</div>
- </div>
-
- <div class="kb_left_top kb_pd10">
- <div class="kb_left_top02">
+ <div style="display: flex;justify-content: space-between;padding:0 20px 20px 20px">
+ <!-- 宸﹁竟-->
+ <div style="width: 1400px ;height: 969px;" class="flex_c_b">
+ <div>
+ <div class="smallTitle">
+ <svg-icon icon-class="cxjg" class="svg_class" />
+ 浜х嚎鍔犲伐涓换鍔�
+ </div>
+ <div class="lineContent horn">
<div v-for="item in lineContent3" :key="item.workcode" class="kb_left_top_block">
<div class="kb_block02 kb_pd10">
<div>
- <div>閿�鍞崟鍙�:{{ item.saleordercode }}</div>
- <div class="kb_mt5">
+ <div>閿�鍞鍗�:{{ item.saleordercode }}</div>
+ <div class="kb_mt10">
鍔犲伐鍗曞彿:{{ item.workcode }}
</div>
- <div class="kb_mt5">
+ <div class="kb_mt10">
浜у搧鍚嶇О:{{ item.partname }}
</div>
- <div class="kb_mt5">
+ <div class="kb_mt10">
浠诲姟鏁伴噺:{{ parseFloat(item.qty) }}
</div>
</div>
@@ -98,205 +95,179 @@
</div>
</div>
</div>
+
</div>
- <!-- 2-->
- <div class="kb_left_bottom kb_pd10">
- <div class="kb_left_bottom_content">
- <div class="content_head kb_title_text">浜х嚎鍔犲伐浠诲姟
- <div style="margin-left: 30px">{{ number2 }} 鍗�</div>
- </div>
- <div class="content_body">
- <el-table
- ref="tableData"
- :data="tableData"
- style="width: 100%;"
- :header-cell-style="headerCellStyle"
- :cell-style="cellStyle"
- height="440"
- >
- <el-table-column
- prop="RowNum"
- label="搴忓彿"
- width="50"
- />
- <!-- label="鍔犲伐鐘舵��"-->
- <el-table-column
- prop="status"
- label="鐘舵��"
- width="65"
- >
- <template slot-scope="{row}">
- <div v-if="row.status==='ALLO'">宸叉淳鍙�</div>
- <div v-if="row.status==='START'">寮�宸�</div>
- <div v-if="row.status==='NEW'">鏂板伐鍗�</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="lm_date"
- label="娲惧彂鏃堕棿"
- width="115"
- >
- <template slot-scope="{row}">
- <div>{{ row.lm_date.substring(0, 10) }}</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="saleOrderCode"
- label="閿�鍞鍗曞彿"
- width="178"
- >
- <template slot-scope="{row}">
- <div v-if="row.saleOrderCode" class="ellipsis">{{ row.saleOrderCode }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="wo_code"
- label="鍔犲伐鍗曞彿"
- width="205"
- >
- <template slot-scope="{row}">
- <div v-if="row.wo_code" class="ellipsis">{{ row.wo_code }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="partname"
- label="浜у搧鍚嶇О"
- width="150"
- >
- <template slot-scope="{row}">
- <div v-if="row.partname" class="ellipsis">{{ row.partname }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <!-- <el-table-column-->
- <!-- prop="partspec"-->
- <!-- label="瑙勬牸"-->
- <!-- width="125"-->
- <!-- >-->
- <!-- <template slot-scope="{row}">-->
- <!-- <div v-if="row.partspec" class="ellipsis">{{ row.partspec }}</div>-->
- <!-- <div v-else>/</div>-->
- <!-- </template>-->
- <!-- </el-table-column>-->
- <!-- <el-table-column-->
- <!-- prop="name"-->
- <!-- label="鍗曚綅"-->
- <!-- width="50"-->
- <!-- />-->
- <el-table-column
- prop="plan_qty"
- label="浠诲姟鏁伴噺"
- width="85"
- />
- <el-table-column
- prop="good_qty"
- label="瀹屽伐鏁伴噺"
- width="85"
- />
- <el-table-column
- prop="ng_qty"
- label="涓嶈壇鏁伴噺"
- width="85"
- />
- <el-table-column
- prop="wcl"
- label="瀹屾垚鐜�"
- width="60"
- >
- <template slot-scope="{row}">
- <div>{{ parseFloat((row.good_qty * 100 / row.plan_qty).toFixed(2)) }}%</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="planenddate"
- label="棰勮寮�濮�"
- width="115"
- >
- <template slot-scope="{row}">
- <div>{{ row.planenddate.substring(0, 10) }}</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="planstartdate"
- label="棰勮缁撴潫"
- width="125"
- >
- <template slot-scope="{row}">
- <div>{{ row.planstartdate.substring(0, 10) }}</div>
- </template>
- </el-table-column>
- </el-table>
- </div>
+ <div>
+ <div class="smallTitle">
+ <svg-icon icon-class="cxmc" class="svg_class" />
+ 浜х嚎鍔犲伐浠诲姟
</div>
+ <div class="lineContent horn">
+ <el-table
+ ref="tableDataLeftBottomRef"
+ :data="tableDataLeftBottom"
+ class="tableData"
+ style="width: 100%;"
+ :header-cell-style="headerCellStyle"
+ :cell-style="cellStyle"
+ height="428"
+ >
+ <el-table-column
+ prop="RowNum"
+ label="搴忓彿"
+ width="60"
+ />
+
+ <el-table-column
+ prop="status"
+ width="80"
+ label="鐘舵��"
+ >
+ <template slot-scope="{row}">
+ <div v-if="row.status==='ALLO'">宸叉淳鍙�</div>
+ <div v-if="row.status==='START'">寮�宸�</div>
+ <div v-if="row.status==='NEW'">鏂板伐鍗�</div>
+ </template>
+ </el-table-column>
+ <el-table-column
+ prop="lm_date"
+ label="娲惧彂鏃堕棿"
+ width="120"
+ >
+ <template slot-scope="{row}">
+ <div>{{ row.lm_date.substring(0, 10) }}</div>
+ </template>
+ </el-table-column>
+ <el-table-column
+ prop="saleOrderCode"
+ label="閿�鍞鍗曞彿"
+ width="170"
+ >
+ <template slot-scope="{row}">
+ <div v-if="row.saleOrderCode">{{ row.saleOrderCode }}</div>
+ <div v-else>/</div>
+ </template>
+ </el-table-column>
+ <el-table-column
+ prop="wo_code"
+ label="鍔犲伐鍗曞彿"
+ width="190"
+ />
+ <el-table-column
+ prop="partname"
+ label="浜у搧鍚嶇О"
+ width="350"
+ >
+ <template slot-scope="{row}">
+ <div v-if="row.partname" class="ellipsis">{{ row.partname }}</div>
+ <div v-else>/</div>
+ </template>
+ </el-table-column>
+ <el-table-column
+ prop="plan_qty"
+ label="浠诲姟鏁伴噺"
+ width="105"
+ />
+ <el-table-column
+ prop="good_qty"
+ label="瀹屽伐鏁伴噺"
+ width="105"
+ />
+ <el-table-column
+ prop="ng_qty"
+ label="涓嶈壇鏁伴噺"
+ width="105"
+ />
+ <el-table-column
+ label="瀹屾垚鐜�"
+ width="105"
+ >
+ <template slot-scope="{row}">
+ <div>{{ parseFloat((row.good_qty * 100 / row.plan_qty).toFixed(2)) }}%</div>
+ </template>
+ </el-table-column>
+ <!-- <el-table-column-->
+
+ <!-- label="棰勮寮�濮�"-->
+ <!-- width="140"-->
+ <!-- >-->
+ <!-- <template slot-scope="{row}">-->
+ <!-- <div>{{ row.planstartdate.substring(0, 10) }}</div>-->
+ <!-- </template>-->
+ <!-- </el-table-column>-->
+ <!-- <el-table-column-->
+ <!-- prop=""-->
+ <!-- label="棰勮缁撴潫"-->
+ <!-- width="140"-->
+ <!-- >-->
+ <!-- <template slot-scope="{row}">-->
+ <!-- <div>{{ row.planenddate.substring(0, 10) }}</div>-->
+ <!-- </template>-->
+ <!-- </el-table-column>-->
+ </el-table>
+ </div>
+
</div>
</div>
- <div class="kb_right kb_pd10">
- <div class="kb_right_top kb_pd10">
- <div class="kb_right_top_content">
- <div class="content_head kb_title_text">褰撴棩瀹屽伐浜у搧鏁伴噺鎺掕</div>
- <div class="content_body">
- <el-table
- ref="tableDataRank"
- :data="tableDataRank"
- class="tableDataRank"
- style="width: 100%;"
- :header-cell-style="headerCellStyle"
- :cell-style="cellStyle"
- height="396"
- >
- <el-table-column
- type="index"
- label="搴忓彿"
- width="55"
- />
- <el-table-column
- prop="wkshname"
- label="杞﹂棿锛堜緵鏂癸級"
- width="120"
- >
- <template slot-scope="{row}">
- <div v-if="row.wkshname" class="ellipsis">{{ row.wkshname }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="linename"
- label="浜х嚎"
- width="120"
- >
- <template slot-scope="{row}">
- <div v-if="row.linename" class="ellipsis">{{ row.linename }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="partname"
- width="138"
- label="浜у搧"
- >
- <template slot-scope="{row}">
- <div v-if="row.partname" class="ellipsis">{{ row.partname }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="good_qty"
- label="鏁伴噺"
- width="100"
- />
- </el-table>
- </div>
+ <!-- 鍙宠竟-->
+ <div style="width: 450px;height: 969px;" class="flex_c_b">
+ <div>
+ <div class="smallTitle">
+ <svg-icon icon-class="drwg" class="svg_class" />
+ 褰撴棩瀹屽伐浜у搧鏁伴噺鎺掕
</div>
+ <div class="lineContent horn">
+ <el-table
+ ref="tableDataRightTopRef"
+ :data="tableDataRightTop"
+ class="tableData"
+ style="width: 100%;"
+ :header-cell-style="headerCellStyle"
+ :cell-style="cellStyle"
+ height="428"
+ >
+ <el-table-column
+ type="index"
+ label="搴忓彿"
+ width="60"
+ />
+ <el-table-column
+ prop="linename"
+ width="125"
+ label="浜х嚎"
+ />
+ <el-table-column
+ prop="partname"
+ width="160"
+ label="浜у搧"
+ >
+ <template slot-scope="{row}">
+ <div v-if="row.partname" class="ellipsis">{{ row.partname }}</div>
+ <div v-else>/</div>
+ </template>
+ </el-table-column>
+ <el-table-column
+ prop="good_qty"
+ label="鏁伴噺"
+ width="90"
+ >
+ <template slot-scope="{row}">
+ <div>{{ parseFloat(row.good_qty) }}</div>
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
+
</div>
- <div class="kb_right_bottom kb_pd10">
- <div class="kb_right_bottom_content_title kb_title_text">
+ <div>
+ <div class="smallTitle">
+ <svg-icon icon-class="top5" class="svg_class" />
涓�鍛ㄤ笉鑹疶op5
</div>
- <div class="kb_right_bottom_content">
- <div id="bar02" style="width: 100%;height:100%" />
+ <div class="lineContent horn">
+ <div id="bar01" class="flex_c_c" style="width: 100%;height:100%" />
</div>
+
</div>
</div>
</div>
@@ -306,52 +277,33 @@
<script>
import './kbCommon.css'
-import { bar02, loadEcharts } from '@/utils/myEcharts'
+import { bar02, kbTop, loadEcharts } from '@/utils/myEcharts'
import {
LineSearchBottomLeftData,
LineSearchBottomRightData,
LineSearchTopLeftData,
- LineSearchTopRightData, ShopSearch, WkspReportNotice
+ LineSearchTopRightData,
+ ShopSearch
} from '@/api/dzkb'
-import MarqueeTips from 'vue-marquee-tips'
+import { parseTime } from '@/utils'
export default {
- name: 'Index2',
- components: {
- MarqueeTips
- },
+ name: 'Cjsc',
data() {
return {
-
- onLine: navigator.onLine, // 鐩戝惉缃戠粶鏄惁鍦ㄧ嚎
-
headTime: '',
-
- lineContent: [],
+ tableDataRightTop: [],
+ tableDataRightTopTemp: [],
+ tableDataLeftBottom: [],
+ tableDataLeftBottomTemp: [],
lineContent3: [],
-
- leftTopData: [],
- tableData: [],
- tableDataRank: [],
- lineCodeArr: [],
-
ShopArr: [], // 杞﹂棿缂栫爜鏁扮粍
- number1: '',
- number2: '',
+ starsCount: 800, // 鏄熸槦鏁伴噺
+ distance: 900 // 闂磋窛
- MarqueeTipsContent: '', // 鍏憡
- speed: 100, // 鍏憡鎾斁鐨勯�熷害
-
- MarqueeTipsTask: null,
- ShopSearchTask: null,
- ShopSearchLineTask: null,
- TableDataRollTask: null,
- TableDataRankRollTask: null,
- EchartsTask: null
}
},
-
created() {
setInterval(this.getNowTime, 1000)
@@ -361,77 +313,23 @@
}, 1000 * 60 * 120)
},
mounted() {
- // 鐩戝惉缃戠粶鏄惁鍦ㄧ嚎
- window.addEventListener('online', this.updateOnlineStatus)
- window.addEventListener('offline', this.updateOnlineStatus)
- this.updateOnlineStatus({ type: this.onLine ? 'online' : 'offline', isFirst: true })
- },
- beforeDestroy() {
- window.removeEventListener('online', this.updateOnlineStatus)
- window.removeEventListener('offline', this.updateOnlineStatus)
+ this.getTopBar()
+
+ this.getShopSearch()
+ this.setStarsRef()
},
methods: {
- // 鏇存柊缃戠粶鐘舵��
- updateOnlineStatus(e) {
- if (e.isFirst) {
- this.getValue()// 鑾峰彇鍊�
- } else {
- const loading = this.$loading({
- lock: true,
- text: '鏂綉浜嗭紝姝ｅ湪鎷煎懡鑱旂綉涓紝璇锋鏌ョ綉缁滄槸鍚︽甯�...',
- spinner: 'el-icon-loading',
- customClass: 'osloading',
- background: 'rgba(0, 0, 0, 0.7)'
- })
- const { type } = e
- this.onLine = type === 'online'
- if (this.onLine) {
- this.getValue()
- loading.close()
- this.$message.success('缃戠粶杩炴帴鎴愬姛锛�')
- } else {
- clearInterval(this.MarqueeTipsTask)
- clearInterval(this.ShopSearchTask)
- clearInterval(this.ShopSearchLineTask)
- clearInterval(this.TableDataRollTask)
- clearInterval(this.TableDataRankRollTask)
- clearInterval(this.EchartsTask)
- this.$message.error('缃戠粶鎺夌嚎锛岃鍏虫敞缃戠粶鐘舵�侊紒')
- }
- }
- },
- // 鑾峰彇鍊�
- async getValue() {
- await this.getShopSearch()
- await this.getShopSearchLine()
-
- await this.getEcharts()
- await this.getTableDataRoll()
- await this.getTableDataRankRoll()
- await this.getMarqueeTipsContent()
- await this.getMarqueeTipsContent()
- },
- // 鑾峰彇鍏憡
- getMarqueeTipsContent() {
- WkspReportNotice({ shopcode: this.ShopArr.join(',') }).then(res => {
- let contentAll = ''
- res.data.forEach(item => {
- contentAll += item.contents + ' '.padStart(item.contents.toString().length * 2, ' ')
- })
- this.MarqueeTipsContent = contentAll
- this.speed = this.MarqueeTipsContent.length / 10
-
- this.MarqueeTipsTask = setInterval(() => {
- WkspReportNotice({ shopcode: this.ShopArr.join(',') }).then(res1 => {
- let contentAll = ''
- res1.data.forEach(item => {
- contentAll += item.contents + ' '.padStart(item.contents.toString().length * 2, ' ')
- })
- this.MarqueeTipsContent = contentAll
- this.speed = this.MarqueeTipsContent.length / 10
- })
- // }, this.speed * 1000)
- }, 1000 * 60 * 5)
+ setStarsRef() {
+ const starNodes = Array.from(this.$refs.starsRef.children)
+ starNodes.forEach(item => {
+ const speed = 0.2 + Math.random() * 1
+ const thisDistance = this.distance + Math.random() * 300
+ item.style.transformOrigin = `0 0 ${thisDistance}px`
+ item.style.transform = `
+ translate3d(0,0,-${thisDistance}px)
+ rotateY(${Math.random() * 360}deg)
+ rotateX(${Math.random() * -50}deg)
+ scale(${speed},${speed})`
})
},
// 鑾峰彇杞﹂棿缂栫爜
@@ -442,17 +340,26 @@
res1.data.forEach(item => {
this.ShopArr.push(item.org_code)
})
+
+ if (this.ShopArr.length > 0) {
+ this.getShopSearchLine()
+ this.getRightRightData()
+ this.getLeftBottomData()
+ this.getEcharts()
+ }
}
- setInterval(() => {
- this.ShopSearchTask = ShopSearch().then(res1 => {
- if (res1.code === '200') {
- this.ShopArr = []
- res1.data.forEach(item => {
- this.ShopArr.push(item.org_code)
- })
- }
- })
- }, 1000 * 30)
+ if (this.ShopArr.length > 0) {
+ setInterval(() => {
+ this.ShopSearchTask = ShopSearch().then(res1 => {
+ if (res1.code === '200') {
+ this.ShopArr = []
+ res1.data.forEach(item => {
+ this.ShopArr.push(item.org_code)
+ })
+ }
+ })
+ }, 1000 * 60)
+ }
},
// 浜х嚎鍔犲伐涓换鍔�
getShopSearchLine() {
@@ -462,12 +369,11 @@
length = this.lineContent.length
count = Math.ceil(length / 3) // 闇�瑕佽疆鎾殑缁勬暟 3涓负涓�缁�
this.lineContent3 = this.lineContent.slice(0, 3)
-
this.number1 = this.lineContent.length
})
let start = 0
- this.ShopSearchLineTask = setInterval(() => {
+ const timer = setInterval(() => {
if (Math.floor(start / 3) === count && count !== 0) {
start = 0
LineSearchTopLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
@@ -479,80 +385,85 @@
this.number1 = this.lineContent.length
})
} else if (count === 0) {
- clearInterval(this.ShopSearchLineTask)
+ clearInterval(timer)
this.getShopSearchLine()
}
this.lineContent3 = this.lineContent.slice(start, start + 3)
start = start + 3
- }, 1000 * 3)
+ }, 1000 * 10)
},
- // 浜х嚎鍔犲伐浠诲姟
- getTableDataRoll() {
- LineSearchBottomLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
- this.tableData = res.data
- this.number2 = this.tableData.length
+ // 鑾峰彇鍙充笂鏁版嵁 褰撴棩瀹屽伐浜у搧鏁伴噺鎺掕
+ getRightRightData() {
+ let startValue = 0 // 鍒濆鍊�
+ const scale = 10// 鍒诲害
- const divData = this.$refs.tableData.bodyWrapper
- // 鎷垮埌鍏冪礌鍚庯紝瀵瑰厓绱犺繘琛屽畾鏃跺鍔犺窛绂婚《閮ㄨ窛绂伙紝瀹炵幇婊氬姩鏁堟灉(姝ら厤缃负姣�100姣绉诲姩1鍍忕礌)
- this.TableDataRollTask = setInterval(() => {
- // 鍏冪礌鑷璺濈椤堕儴1鍍忕礌
- divData.scrollTop += 1
- // divData.scrollTop += divData.scrollHeight / this.tableData.length
- // 鍒ゆ柇鍏冪礌鏄惁婊氬姩鍒板簳閮�(鍙楂樺害+璺濈椤堕儴=鏁翠釜楂樺害)
- if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
- // 閲嶇疆table璺濈椤堕儴璺濈
- divData.scrollTop = 0
- LineSearchBottomLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
- this.tableData = res.data
- this.number2 = this.tableData.length
- if (this.tableData.length > 10) {
- clearInterval(this.TableDataRollTask)
- this.getTableDataRoll()
- }
- })
- }
- }, this.tableData.length <= 10 ? 1000 * 3 : 100)
- })
- },
- // 褰撴棩瀹屽伐浜у搧鏁伴噺鎺掕
- getTableDataRankRoll() {
LineSearchTopRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
- this.tableDataRank = res.data
+ this.tableDataRightTopTemp = res.data
- const divData = this.$refs.tableDataRank.bodyWrapper
- // 鎷垮埌鍏冪礌鍚庯紝瀵瑰厓绱犺繘琛屽畾鏃跺鍔犺窛绂婚《閮ㄨ窛绂伙紝瀹炵幇婊氬姩鏁堟灉(姝ら厤缃负姣�100姣绉诲姩1鍍忕礌)
- this.TableDataRankRollTask = setInterval(() => {
- // 鍏冪礌鑷璺濈椤堕儴1鍍忕礌
- // divData.scrollTop += divData.scrollHeight / this.tableDataRank.length
- divData.scrollTop += 1
- // 鍒ゆ柇鍏冪礌鏄惁婊氬姩鍒板簳閮�(鍙楂樺害+璺濈椤堕儴=鏁翠釜楂樺害)
- if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
- // 閲嶇疆table璺濈椤堕儴璺濈
- divData.scrollTop = 0
- LineSearchTopRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
- this.tableDataRank = res.data
+ this.tableDataRightTop = this.tableDataRightTopTemp.slice(startValue, startValue + scale)
- if (this.tableDataRank.length > 9) {
- clearInterval(this.TableDataRankRollTask)
- this.getTableDataRankRoll()
- }
- })
+ const loop = Math.floor(this.tableDataRightTopTemp.length / scale)// 闇�瑕佸惊鐜殑娆℃暟
+ let nowLoop = 0// 褰撳墠寰幆鐨勬鏁�
+
+ const timer = setInterval(() => {
+ startValue = startValue + scale
+ this.tableDataRightTop = this.tableDataRightTopTemp.slice(startValue, startValue + scale)
+ if (nowLoop === loop) {
+ clearInterval(timer)
+ this.getRightRightData()
}
- }, this.tableDataRank.length <= 9 ? 1000 * 3 : 100)
+
+ nowLoop++
+ }, 1000 * 10)
})
},
- // 鑾峰彇echarts
+ // 浜х嚎鍔犲伐浠诲姟 宸︿笅鏁版嵁
+ getLeftBottomData() {
+ let startValue = 0 // 鍒濆鍊�
+ const scale = 10// 鍒诲害
+
+ LineSearchBottomLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
+ this.tableDataLeftBottomTemp = res.data
+ this.tableDataLeftBottom = this.tableDataLeftBottomTemp.slice(startValue, startValue + scale)
+
+ const loop = Math.floor(this.tableDataLeftBottomTemp.length / scale)// 闇�瑕佸惊鐜殑娆℃暟
+ let nowLoop = 0// 褰撳墠寰幆鐨勬鏁�
+
+ const timer = setInterval(() => {
+ startValue = startValue + scale
+ this.tableDataLeftBottom = this.tableDataLeftBottomTemp.slice(startValue, startValue + scale)
+ if (nowLoop === loop) {
+ clearInterval(timer)
+ this.getLeftBottomData()
+ }
+
+ nowLoop++
+ }, 1000 * 10)
+ })
+ },
+
getEcharts() {
+ let dataArr = [30, 20, 20, 18, 10]
+ let titlenameArr = ['棰滆壊', '灏哄', '姘斿懗', '姣涘埡', '瑁傜棔']
LineSearchBottomRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
- loadEcharts('bar02', bar02(res.data.map(i => i.cont), res.data.map(i => i.name)))
+ dataArr = res.data.map(i => i.cont)
+ titlenameArr = res.data.map(i => i.name)
+ loadEcharts('bar01', bar02(dataArr, titlenameArr))
})
- this.EchartsTask = setInterval(() => {
+ setInterval(() => {
LineSearchBottomRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
- loadEcharts('bar02', bar02(res.data.map(i => i.cont), res.data.map(i => i.name)))
+ dataArr = res.data.map(i => i.cont)
+ titlenameArr = res.data.map(i => i.name)
+ loadEcharts('bar01', bar02(dataArr, titlenameArr))
})
- }, 1000 * 15)
+ }, 1000 * 10)
+ },
+ // 鑾峰彇topEcharts
+ getTopBar() {
+ loadEcharts('topBarLeft', kbTop())
+ loadEcharts('topBarRight', kbTop())
},
// 鑾峰彇褰撳墠鏃堕棿
getNowTime() {
@@ -572,266 +483,136 @@
},
headerCellStyle() {
return {
- backgroundColor: 'rgb(30 ,33, 46)',
+ backgroundColor: '#000',
padding: '10px 0',
textAlign: 'center',
color: '#07acc2',
- border: 'none'
+ border: 'none',
+ fontSize: '18px'
}
},
cellStyle() {
return {
- padding: '8px 0',
+ padding: '7px 0',
textAlign: 'center',
- backgroundColor: 'rgba(30, 33, 46 )',
- // backgroundColor: 'transparent',
+ backgroundColor: '#000',
color: '#fff',
- border: 'none'
+ border: 'none',
+ fontSize: '18px'
}
}
-
}
+
}
</script>
-<style scoped lang="scss">
-$kbBorderColor: rgba(9, 216, 242, 0.4);
-$kbBackgroundColor: rgba(30, 33, 46, 0.6);
-.kb_content {
- display: flex;
- position: relative;
- height: 990px;
- width: 100%;
- letter-spacing: 2px;
- color: #fff;
+<style lang="scss" scoped>
+$main_color: #09d8f2;
+$color01: #00FFFF;
- .kb_left {
- width: 1345px;
- height: 100%;
- padding-left: 5px;
-
- .kb_left_top_title01 {
- position: absolute;
- top: 37px;
- left: 15px;
- display: flex;
- color: #00ffff;
-
- .PG01 {
- background: url("../../assets/images/GP_1.png") no-repeat;
- width: 28px;
- height: 12px;
- margin-top: 4px;
- margin-right: 10px;
- }
- }
-
- .kb_left_top {
- height: 495px;
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- padding-top: 70px;
-
- .kb_left_top02 {
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- border: 1px solid $kbBorderColor;
- height: 400px;
- border-radius: 5px;
- background-color: $kbBackgroundColor;
-
- .kb_left_top_block {
- width: 100%;
- height: 133px;
- display: flex;
- font-size: 17px;
- border-bottom: 1px solid $kbBorderColor;
- justify-content: flex-start;
-
- .kb_block02 {
- width: 304px;
- display: flex;
- align-items: center;
- border-right: 1px solid $kbBorderColor;
- }
-
- .kb_block03 {
- width: 1020px;
- font-size: 17px;
- display: flex;
- flex-direction: column;
- //font-size: 12px;
- border-radius: 5px;
-
- .kb_block03_content {
- border: 1px solid $kbBorderColor;
- width: 180px;
- height: 80px;
- margin-right: 15px;
- display: flex;
- flex-direction: column;
-
- .content01 {
- height: 30px;
- width: 100%;
- border-bottom: 1px solid $kbBorderColor;
- display: flex;
- align-items: center;
- justify-content: center;
- }
-
- .content02Parent {
- display: flex;
-
- .content02 {
- width: 60px;
- border-right: 1px solid $kbBorderColor;
-
- .content02_1 {
- display: flex;
- align-items: center;
- justify-content: center;
- //height: 50%;
- height: 25px;
- }
-
- .content02_2 {
- height: 25px;
- display: flex;
- align-items: center;
- justify-content: center;
- }
-
- .borderTop {
- border-top: 1px solid $kbBorderColor;
- }
- }
- }
-
- }
- }
-
- .kb_block03_02 {
- margin-top: 7px;
- display: flex;
-
- .kb_block03_02_content {
- width: 180px;
- margin-right: 15px;
-
- .content01 {
- .circle {
- width: 26px;
- height: 26px;
- background-color: #00ff8b;
- border-radius: 50%;
- }
-
- }
-
- }
- }
-
- }
-
- .kb_left_top_block:nth-child(3n) {
- border-bottom: none !important;
- }
- }
- }
-
- .kb_left_bottom {
- height: 495px;
-
- .kb_left_bottom_content {
- height: 460px;
- display: flex;
- flex-direction: column;
-
- .content_head {
- display: flex;
- line-height: 20px;
- margin-bottom: 10px;
- margin-top: -10px;
- color: #00ffff;
-
- }
-
- .content_body {
- border: 1px solid $kbBorderColor;
- }
- }
- }
- }
-
- .kb_right {
- width: 575px;
- height: 100%;
-
- .kb_right_top {
- margin-top: 30px;
- margin-bottom: -30px;
- height: 476px;
- width: 100%;
-
- .kb_right_top_content {
- height: 430px;
- display: flex;
- flex-direction: column;
-
- .content_head {
- //font-size: 18px;
- line-height: 20px;
- margin-bottom: 10px;
- margin-top: -10px;
- color: #00ffff;
- }
-
- .content_body {
- border: 1px solid $kbBorderColor;
- }
- }
- }
-
- .kb_right_bottom {
- height: 482px;
- margin-top: 8px;
-
- .kb_right_bottom_content_title {
- color: #00ffff;
- margin-bottom: 5px;
- margin-top: -12px;
- }
-
- .kb_right_bottom_content {
- border: 1px solid $kbBorderColor;
- height: 441px;
- width: 100%;
- border-radius: 5px;
- background-color: $kbBackgroundColor;
- }
- }
- }
+.tableData {
+ background: #000;
}
-::v-deep .el-table::before {
+.el-table::before {
height: 0;
}
-::v-deep .el-table__body-wrapper {
- background-color: rgba(30, 33, 46);
+.el-table__empty-text {
+ color: $main_color;
}
-::v-deep .el-table__body-wrapper::-webkit-scrollbar {
- /* width: 0;瀹藉害涓�0鏆楄棌 */
- width: 0;
+.kb_left_top_block {
+ width: 100%;
+ height: 143px;
+ display: flex;
+ font-size: 16px;
+ border-bottom: 1px solid $main_color;
+ justify-content: flex-start;
+
+ .kb_block02 {
+ width: 304px;
+ display: flex;
+ align-items: center;
+ border-right: 1px solid $main_color;
+ }
+
+ .kb_block03 {
+ width: 1020px;
+ font-size: 16px;
+ display: flex;
+ flex-direction: column;
+ border-radius: 5px;
+
+ .kb_block03_content {
+ border: 1px solid $main_color;
+ width: 180px;
+ height: 80px;
+ margin-right: 15px;
+ display: flex;
+ flex-direction: column;
+
+ .content01 {
+ height: 30px;
+ width: 100%;
+ border-bottom: 1px solid $main_color;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .content02Parent {
+ display: flex;
+
+ .content02 {
+ width: 60px;
+ border-right: 1px solid $main_color;
+
+ .content02_1 {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 25px;
+ }
+
+ .content02_2 {
+ height: 25px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .borderTop {
+ border-top: 1px solid $main_color;
+ }
+ }
+ }
+
+ }
+ }
+
+ .kb_block03_02 {
+ margin-top: 15px;
+ display: flex;
+
+ .kb_block03_02_content {
+ width: 180px;
+ margin-right: 15px;
+
+ .content01 {
+ .circle {
+ width: 26px;
+ height: 26px;
+ background-color: #00ff8b;
+ border-radius: 50%;
+ }
+ }
+ }
+ }
}
-::v-deep .cell {
- padding: 0 !important;
- font-size: 18px;
+.kb_left_top_block:nth-child(3n) {
+ border-bottom: none !important;
}
.circleYellow {
@@ -840,4 +621,40 @@
background-color: rgb(255 255 0);
border-radius: 50%;
}
+
+</style>
+
+<!--鏄熺┖-->
+<style lang="css" scoped>
+@keyframes rotate {
+ 0% {
+ transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
+ }
+ 100% {
+ transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
+ }
+}
+
+.stars {
+ transform: perspective(500px);
+ transform-style: preserve-3d;
+ position: absolute;
+ perspective-origin: 50% 100%;
+ left: 45%;
+ animation: rotate 90s infinite linear;
+ bottom: 0;
+ z-index: 102;
+}
+
+.star {
+ width: 2px;
+ height: 2px;
+ /*background: #f7f7b6;*/
+ background: #8edffc;
+ position: absolute;
+ left: 0;
+ top: 0;
+ backface-visibility: hidden;
+ z-index: 102;
+}
</style>
diff --git a/src/views/kb/zhkb_back.vue b/src/views/kb/zhkb_back.vue
deleted file mode 100644
index d24b679..0000000
--- a/src/views/kb/zhkb_back.vue
+++ /dev/null
@@ -1,1248 +0,0 @@
-<template>
- <div>
- <div class="kb_dashboard">
- <div class="kb_header">
- <div class="flex_c_c kb_header_text">
- 澶у矝杞﹂棿缁煎悎鐪嬫澘
- </div>
- <div class="kb_headerPic" />
- <div class="kb_headTime">
- <span>{{ headTime }}</span>
- </div>
- </div>
-
- <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>
-
- <div class="kb_left_top kb_pd10">
-
- <div class="kb_left_top_block">
- <div class="kb_block01 kb_pd10">
- <div>
- <div>浜х嚎鍚嶇О:{{ lineContent01.linename }}</div>
- <div class="kb_mt10">浜х嚎鎬婚噺:{{
- lineContent01.children !== undefined ? lineContent01.lineworkcont : ''
- }}
- </div>
- </div>
- <div>
- <!-- <div>{{ lineContent01.linename }}</div>-->
- <!-- <div v-if="lineContent01.children!==undefined" class="kb_mt10">{{ lineContent01.lineworkcont }}</div>-->
- </div>
- </div>
- <div class="kb_block02 kb_pd10">
- <div>
- <div>閿�鍞崟鍙�:{{ lineContent01.children !== undefined ? lineContent01.children.saleordercode : '' }}</div>
- <div class="kb_mt5">
- 鍔犲伐鍗曞彿:{{ lineContent01.children !== undefined ? lineContent01.children.workcode : '' }}
- </div>
- <div class="kb_mt5">
- 浜у搧鍚嶇О:{{ lineContent01.children !== undefined ? lineContent01.children.partname : '' }}
- </div>
-
- <div v-if="lineContent01.children&&lineContent01.children.length===0" class="kb_mt5">
- 浠诲姟鏁伴噺:
- </div>
- <div v-else class="kb_mt5">
- 浠诲姟鏁伴噺:{{ lineContent01.children? parseFloat(lineContent01.children.qty) : '' }}
- </div>
- </div>
-
- </div>
- <div class="kb_block03 kb_pd10 ">
- <div v-if="lineContent01.children!==undefined" class="flex_s_c">
- <div
- v-for="item in lineContent01.children.children"
- :key="item.stepseq"
- class="kb_block03_content flex_c_c"
- >
- <div>
- <div class="content01">{{ item.stepname }}</div>
- </div>
- <div class="content02Parent">
- <div class="content02">
- <div class="content02_1 ">浠诲姟</div>
- <div class="content02_2 borderTop ">{{ parseFloat(item.planqty) }}</div>
- </div>
- <div class="content02">
- <div class="content02_1 ">鍚堟牸</div>
- <div class="content02_2 borderTop ">{{ parseFloat(item.goodqty) }}</div>
- </div>
- <div class="content02" style="border-right: 0">
- <div class="content02_1 ">涓嶈壇</div>
- <div class="content02_2 borderTop ">{{ parseFloat(item.ngqty) }}</div>
- </div>
- </div>
- </div>
- </div>
- <div v-if="lineContent01.children!==undefined" class="kb_block03_02 flex_s_c">
- <div
- v-for="item in lineContent01.children.children"
- :key="item.stepseq"
- class="kb_block03_02_content flex_c_c"
- >
- <div class="flex_c_c content01">
- <div
- v-if="item.status==='START'&&(parseFloat(item.ngqty)===0||item.ngqty==='')&&(parseFloat(item.goodqty)===0||item.goodqty==='')"
- class="circle"
- style="background-color: blue;"
- />
- <div
- v-else-if="item.status==='ALLO'&&(parseFloat(item.ngqty)===0||item.ngqty==='')&&(parseFloat(item.goodqty)===0||item.goodqty==='')"
- class="circle"
- style="background-color: rgb(255 255 255)"
- />
- <div
- v-else-if="parseFloat(item.ngqty)+parseFloat(item.goodqty)>=parseFloat(item.planqty)"
- class="circle"
- />
- <div v-else class="circleYellow" />
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <!-- 234-->
- <div class="kb_left_top_block">
- <div class="kb_block01 kb_pd10">
- <div>
- <div>浜х嚎鍚嶇О:{{ lineContent02.linename }}</div>
- <div class="kb_mt10">浜х嚎鎬婚噺:{{
- lineContent02.children !== undefined ? lineContent02.lineworkcont : ''
- }}
- </div>
- </div>
- <div>
- <!-- <div>{{ lineContent02.linename }}</div>-->
- <!-- <div v-if="lineContent02.children!==undefined" class="kb_mt10">{{ lineContent02.lineworkcont }}</div>-->
- </div>
- </div>
- <div class="kb_block02 kb_pd10">
- <div>
- <div>閿�鍞崟鍙�:{{ lineContent02.children !== undefined ? lineContent02.children.saleordercode : '' }}</div>
- <div class="kb_mt5">
- 鍔犲伐鍗曞彿:{{ lineContent02.children !== undefined ? lineContent02.children.workcode : '' }}
- </div>
- <div class="kb_mt5">
- 浜у搧鍚嶇О:{{ lineContent02.children !== undefined ? lineContent02.children.partname : '' }}
- </div>
- <div v-if="lineContent02.children&&lineContent02.children.length===0" class="kb_mt5">
- 浠诲姟鏁伴噺:
- </div>
- <div v-else class="kb_mt5">
- 浠诲姟鏁伴噺:{{ lineContent02.children ? parseFloat(lineContent02.children.qty) : '' }}
- </div>
- </div>
-
- </div>
- <div class="kb_block03 kb_pd10 ">
- <div v-if="lineContent02.children!==undefined" class="flex_s_c">
- <div
- v-for="item in lineContent02.children.children"
- :key="item.stepseq"
- class="kb_block03_content flex_c_c"
- >
- <div>
- <div class="content01">{{ item.stepname }}</div>
- </div>
- <div class="content02Parent">
- <div class="content02">
- <div class="content02_1 ">浠诲姟</div>
- <div class="content02_2 borderTop ">{{ parseFloat(item.planqty) }}</div>
- </div>
- <div class="content02">
- <div class="content02_1 ">鍚堟牸</div>
- <div class="content02_2 borderTop ">{{ parseFloat(item.goodqty) }}</div>
- </div>
- <div class="content02" style="border-right: 0">
- <div class="content02_1 ">涓嶈壇</div>
- <div class="content02_2 borderTop ">{{ parseFloat(item.ngqty) }}</div>
- </div>
- </div>
- </div>
- </div>
- <div v-if="lineContent02.children!==undefined" class="kb_block03_02 flex_s_c">
- <div
- v-for="item in lineContent02.children.children"
- :key="item.stepseq"
- class="kb_block03_02_content flex_c_c"
- >
- <div class="flex_c_c content01">
- <div
- v-if="item.status==='START'&&(parseFloat(item.ngqty)===0||item.ngqty==='')&&(parseFloat(item.goodqty)===0||item.goodqty==='')"
- class="circle"
- style="background-color: blue;"
- />
- <div
- v-else-if="item.status==='ALLO'&&(parseFloat(item.ngqty)===0||item.ngqty==='')&&(parseFloat(item.goodqty)===0||item.goodqty==='')"
- class="circle"
- style="background-color: rgb(255 255 255)"
- />
- <div
- v-else-if="parseFloat(item.ngqty)+parseFloat(item.goodqty)>=parseFloat(item.planqty)"
- class="circle"
- />
- <div v-else class="circleYellow" />
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <div class="kb_left_top_block">
- <div class="kb_block01 kb_pd10">
- <div>
- <div>浜х嚎鍚嶇О:{{ lineContent03.linename }}</div>
- <div class="kb_mt10">浜х嚎鎬婚噺:{{
- lineContent03.children !== undefined ? lineContent03.lineworkcont : ''
- }}
- </div>
- </div>
- <div>
- <!-- <div>{{ lineContent03.linename }}</div>-->
- <!-- <div v-if="lineContent03.children!==undefined" class="kb_mt10">{{ lineContent03.lineworkcont }}</div>-->
- </div>
- </div>
- <div class="kb_block02 kb_pd10">
- <div>
- <div>閿�鍞崟鍙�:{{ lineContent03.children !== undefined ? lineContent03.children.saleordercode : '' }}</div>
- <div class="kb_mt5">
- 鍔犲伐鍗曞彿:{{ lineContent03.children !== undefined ? lineContent03.children.workcode : '' }}
- </div>
- <div class="kb_mt5">
- 浜у搧鍚嶇О:{{ lineContent03.children !== undefined ? lineContent03.children.partname : '' }}
- </div>
- <div v-if="lineContent03.children&&lineContent03.children.length===0" class="kb_mt5">
- 浠诲姟鏁伴噺:
- </div>
- <div v-else class="kb_mt5">
- 浠诲姟鏁伴噺:{{ lineContent03.children ? parseFloat(lineContent03.children.qty) : '' }}
- </div>
- </div>
-
- </div>
- <div class="kb_block03 kb_pd10 ">
- <div v-if="lineContent03.children!==undefined" class="flex_s_c">
- <div
- v-for="item in lineContent03.children.children"
- :key="item.stepseq"
- class="kb_block03_content flex_c_c"
- >
- <div>
- <div class="content01">{{ item.stepname }}</div>
- </div>
- <div class="content02Parent">
- <div class="content02">
- <div class="content02_1 ">浠诲姟</div>
- <div class="content02_2 borderTop ">{{ parseFloat(item.planqty) }}</div>
- </div>
- <div class="content02">
- <div class="content02_1 ">鍚堟牸</div>
- <div class="content02_2 borderTop ">{{ parseFloat(item.goodqty) }}</div>
- </div>
- <div class="content02" style="border-right: 0">
- <div class="content02_1 ">涓嶈壇</div>
- <div class="content02_2 borderTop ">{{ parseFloat(item.ngqty) }}</div>
- </div>
- </div>
- </div>
- </div>
- <div v-if="lineContent03.children!==undefined" class="kb_block03_02 flex_s_c">
- <div
- v-for="item in lineContent03.children.children"
- :key="item.stepseq"
- class="kb_block03_02_content flex_c_c"
- >
- <div class="flex_c_c content01">
- <div
- v-if="item.status==='START'&&(parseFloat(item.ngqty)===0||item.ngqty==='')&&(parseFloat(item.goodqty)===0||item.goodqty==='')"
- class="circle"
- style="background-color: blue;"
- />
- <div
- v-else-if="item.status==='ALLO'&&(parseFloat(item.ngqty)===0||item.ngqty==='')&&(parseFloat(item.goodqty)===0||item.goodqty==='')"
- class="circle"
- style="background-color: rgb(255 255 255)"
- />
- <div
- v-else-if="parseFloat(item.ngqty)+parseFloat(item.goodqty)>=parseFloat(item.planqty)"
- class="circle"
- />
- <div v-else class="circleYellow" />
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <div class="kb_left_top_block">
- <div class="kb_block01 kb_pd10">
- <div>
- <div>浜х嚎鍚嶇О:{{ lineContent04.linename }}</div>
- <div class="kb_mt10">浜х嚎鎬婚噺:{{
- lineContent04.children !== undefined ? lineContent04.lineworkcont : ''
- }}
- </div>
- </div>
- <div>
- <!-- <div>{{ lineContent04.linename }}</div>-->
- <!-- <div v-if="lineContent04.children!==undefined" class="kb_mt10">{{ lineContent04.lineworkcont }}</div>-->
- </div>
- </div>
- <div class="kb_block02 kb_pd10">
- <div>
- <div>閿�鍞崟鍙�:{{ lineContent04.children !== undefined ? lineContent04.children.saleordercode : '' }}</div>
- <div class="kb_mt5">
- 鍔犲伐鍗曞彿:{{ lineContent04.children !== undefined ? lineContent04.children.workcode : '' }}
- </div>
- <div class="kb_mt5">
- 浜у搧鍚嶇О:{{ lineContent04.children !== undefined ? lineContent04.children.partname : '' }}
- </div>
- <div v-if="lineContent04.children&&lineContent04.children.length===0" class="kb_mt5">
- 浠诲姟鏁伴噺:
- </div>
- <div v-else class="kb_mt5">
- 浠诲姟鏁伴噺:{{ lineContent04.children ? parseFloat(lineContent04.children.qty) : '' }}
- </div>
- </div>
-
- </div>
- <div class="kb_block03 kb_pd10 ">
- <div v-if="lineContent04.children!==undefined" class="flex_s_c">
- <div
- v-for="item in lineContent04.children.children"
- :key="item.stepseq"
- class="kb_block03_content flex_c_c"
- >
- <div>
- <div class="content01">{{ item.stepname }}</div>
- </div>
- <div class="content02Parent">
- <div class="content02">
- <div class="content02_1 ">浠诲姟</div>
- <div class="content02_2 borderTop ">{{ parseFloat(item.planqty) }}</div>
- </div>
- <div class="content02">
- <div class="content02_1 ">鍚堟牸</div>
- <div class="content02_2 borderTop ">{{ parseFloat(item.goodqty) }}</div>
- </div>
- <div class="content02" style="border-right: 0">
- <div class="content02_1 ">涓嶈壇</div>
- <div class="content02_2 borderTop ">{{ parseFloat(item.ngqty) }}</div>
- </div>
- </div>
- </div>
- </div>
- <div v-if="lineContent04.children!==undefined" class="kb_block03_02 flex_s_c">
- <div
- v-for="item in lineContent04.children.children"
- :key="item.stepseq"
- class="kb_block03_02_content flex_c_c"
- >
- <div class="flex_c_c content01">
- <div
- v-if="item.status==='START'&&(parseFloat(item.ngqty)===0||item.ngqty==='')&&(parseFloat(item.goodqty)===0||item.goodqty==='')"
- class="circle"
- style="background-color: blue;"
- />
- <div
- v-else-if="item.status==='ALLO'&&(parseFloat(item.ngqty)===0||item.ngqty==='')&&(parseFloat(item.goodqty)===0||item.goodqty==='')"
- class="circle"
- style="background-color: rgb(255 255 255)"
- />
- <div
- v-else-if="parseFloat(item.ngqty)+parseFloat(item.goodqty)>=parseFloat(item.planqty)"
- class="circle"
- />
- <div v-else class="circleYellow" />
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- </div>
- <!-- 2-->
- <div class="kb_left_bottom kb_pd10">
- <div class="kb_left_bottom_content">
- <div class="content_head kb_title_text">浜х嚎鍔犲伐浠诲姟</div>
- <div class="content_body">
- <el-table
- ref="tableData"
- :data="tableData"
- style="width: 100%;"
- :header-cell-style="headerCellStyle"
- :cell-style="cellStyle"
- height="440"
- >
- <el-table-column
- prop="RowNum"
- label="搴忓彿"
- width="40"
- />
- <el-table-column
- prop="status"
- label="鍔犲伐鐘舵��"
- width="70"
- >
- <template slot-scope="{row}">
- <div v-if="row.status==='ALLO'">宸叉淳鍙�</div>
- <div v-if="row.status==='START'">寮�宸�</div>
- <div v-if="row.status==='NEW'">鏂板伐鍗�</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="lm_date"
- label="娲惧彂鏃堕棿"
- width="95"
- >
- <template slot-scope="{row}">
- <div>{{ row.lm_date.substring(0, 10) }}</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="saleOrderCode"
- label="閿�鍞鍗曞彿"
- width="158"
- >
- <template slot-scope="{row}">
- <div v-if="row.saleOrderCode">{{ row.saleOrderCode }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="wo_code"
- label="鍔犲伐鍗曞彿"
- width="170"
- />
- <el-table-column
- prop="partname"
- label="浜у搧鍚嶇О"
- width="145"
- />
- <el-table-column
- prop="partspec"
- label="瑙勬牸"
- width="130"
- >
- <template slot-scope="{row}">
- <div v-if="row.partspec" class="ellipsis">{{ row.partspec }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="name"
- label="鍗曚綅"
- width="50"
- />
- <el-table-column
- prop="plan_qty"
- label="浠诲姟鏁伴噺"
- width="70"
- />
- <el-table-column
- prop="good_qty"
- label="瀹屽伐鏁伴噺"
- width="70"
- />
- <el-table-column
- prop="ng_qty"
- label="涓嶈壇鏁伴噺"
- width="70"
- />
- <el-table-column
- prop="wcl"
- label="瀹屾垚鐜�"
- width="50"
- >
- <template slot-scope="{row}">
- <div>{{ parseFloat((row.good_qty * 100 / row.plan_qty).toFixed(2)) }}%</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="planenddate"
- label="棰勮寮�濮�"
- width="95"
- >
- <template slot-scope="{row}">
- <div>{{ row.planenddate.substring(0, 10) }}</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="planstartdate"
- label="棰勮缁撴潫"
- width="105"
- >
- <template slot-scope="{row}">
- <div>{{ row.planstartdate.substring(0, 10) }}</div>
- </template>
- </el-table-column>
- </el-table>
- </div>
- </div>
- </div>
- </div>
- <div class="kb_right kb_pd10">
- <div class="kb_right_top kb_pd10">
- <div class="kb_right_top_content">
- <div class="content_head kb_title_text">褰撴棩瀹屽伐浜у搧鏁伴噺鎺掕</div>
- <div class="content_body">
- <el-table
- ref="tableDataRank"
- :data="tableDataRank"
- class="tableDataRank"
- style="width: 100%;"
- :header-cell-style="headerCellStyle"
- :cell-style="cellStyle"
- height="426"
- >
- <el-table-column
- type="index"
- label="搴忓彿"
- width="55"
- />
- <el-table-column
- prop="wkshname"
- label="杞﹂棿锛堜緵鏂癸級"
- width="120"
- >
- <template slot-scope="{row}">
- <div v-if="row.wkshname" class="ellipsis">{{ row.wkshname }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="linename"
- label="浜х嚎"
- width="120"
- />
- <el-table-column
- prop="partname"
- width="138"
- label="浜у搧"
- />
- <el-table-column
- prop="good_qty"
- label="鏁伴噺"
- width="100"
- />
- </el-table>
- </div>
- </div>
- </div>
- <div class="kb_right_bottom kb_pd10">
- <div class="kb_right_bottom_content_title kb_title_text">
- 涓�鍛ㄤ笉鑹疶op5
- </div>
- <div class="kb_right_bottom_content">
- <div id="bar02" style="width: 100%;height:100%" />
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
-</template>
-
-<script>
-import './kbCommon.css'
-import { bar02, loadEcharts } from '@/utils/myEcharts'
-import {
- LineSearchBottomLeftData,
- LineSearchBottomRightData,
- LineSearchTopLeftData,
- LineSearchTopRightData,
- ShopSearchLine
-} from '@/api/dzkb'
-
-export default {
- name: 'Index2',
- data() {
- return {
- headTime: '',
-
- lineArr: [],
- // lineContent01: {},
- lineContent01: {
- linename: '',
- lineworkcont: '',
- children: undefined
- },
- lineContent02: {
- linename: '',
- lineworkcont: '',
- children: undefined
- },
- lineContent03: {
- linename: '',
- lineworkcont: '',
- children: undefined
- },
- lineContent04: {
- linename: '',
- lineworkcont: '',
- children: undefined
- // children: {
- // workcode: '',
- // partname: '',
- // qty: 0,
- // saleordercode: '',
- // children: [
- // {
- // stepseq: '',
- // stepname: '',
- // planqty: 0,
- // goodqty: '',
- // ngqty: ''
- // }
- // ]
- // }
- },
-
- leftTopData: [],
- tableData: [],
- tableDataRank: [],
- lineCodeArr: []
-
- }
- },
-
- created() {
- setInterval(this.getNowTime, 1000)
- },
- mounted() {
- this.getValue()
- },
- methods: {
- async getValue() {
- await this.getShopSearchLine()
- await this.getLineSearchTopLeftData()
-
- this.getEcharts()
- this.getTableDataRoll()
- this.getTableDataRankRoll()
- },
- // 鐢熶骇浜х嚎
- async getShopSearchLine() {
- const { data: res } = await ShopSearchLine({ shopcode: 'CJ001' })
- this.lineArr = res
- },
-
- getLineSearchTopLeftData() {
- this.lineArr.forEach((item, index) => {
- if (index <= 3) {
- this.handleEveryLine(item, index)
- this.lineCodeArr.push(item.code)
- }
- })
- },
- // 澶勭悊姣忎竴鏉′骇绾�
- async handleEveryLine(item, index) {
- const res = await LineSearchTopLeftData([item])
-
- let res1, res2, res3, res4
- if (res.data[0].linecode === this.lineCodeArr[0]) {
- res1 = res
- }
- if (res.data[0].linecode === this.lineCodeArr[1]) {
- res2 = res
- }
- if (res.data[0].linecode === this.lineCodeArr[2]) {
- res3 = res
- }
- if (res.data[0].linecode === this.lineCodeArr[3]) {
- res4 = res
- }
-
- let flag1 = true
- let flag2 = true
- let flag3 = true
- let flag4 = true
- if (index === 0) {
- let count = 0
- if (flag1) {
- this.lineContent01 = {
- linename: res1.data[0].linename,
- lineworkcont: res1.data[0].lineworkcont,
- children: res1.data[0].children ? res.data[0].children[count] : []
- }
- flag1 = false
- }
- setInterval(() => {
- if (count > 0) {
- this.lineContent01 = {
- linename: res1.data[0].linename,
- lineworkcont: res1.data[0].lineworkcont,
- children: res1.data[0].children ? res1.data[0].children[count] : []
- }
- }
- console.log(res1.data[0].children === null, 999)
- if (res1.data[0].children === null) {
- res1.data[0].children = []
- }
- if (this.lineContent01.children === undefined || res1.data[0].children.length >= 0) {
- LineSearchTopLeftData([item]).then(res => {
- res1 = res
- })
- }
- if (res1.data[0].children.length === count++) {
- count = 0
- this.lineContent01 = {
- linename: res1.data[0].linename,
- lineworkcont: res1.data[0].lineworkcont,
- children: res1.data[0].children ? res1.data[0].children[count] : []
- }
- }
- }, 1000 * 3)
- } else if (index === 1) {
- let count = 0
- if (flag2) {
- this.lineContent02 = {
- linename: res2.data[0].linename,
- lineworkcont: res2.data[0].lineworkcont,
- children: res2.data[0].children ? res2.data[0].children[count] : []
- }
- flag2 = false
- }
- setInterval(() => {
- if (count > 0) {
- this.lineContent02 = {
- linename: res2.data[0].linename,
- lineworkcont: res2.data[0].lineworkcont,
- children: res2.data[0].children ? res2.data[0].children[count] : []
- }
- }
- if (res2.data[0].children === null) {
- res2.data[0].children = []
- }
- if (this.lineContent02.children === undefined || res2.data[0].children.length >= 0) {
- LineSearchTopLeftData([item]).then(res => {
- res2 = res
- })
- }
- if (res2.data[0].children.length === count++) {
- count = 0
- this.lineContent02 = {
- linename: res2.data[0].linename,
- lineworkcont: res2.data[0].lineworkcont,
- children: res2.data[0].children ? res2.data[0].children[count] : []
- }
- }
- }, 1000 * 3)
- } else if (index === 2) {
- let count = 0
- if (flag3) {
- this.lineContent03 = {
- linename: res3.data[0].linename,
- lineworkcont: res3.data[0].lineworkcont,
- children: res3.data[0].children ? res3.data[0].children[count] : []
- }
- flag3 = false
- }
- setInterval(() => {
- if (count > 0) {
- this.lineContent03 = {
- linename: res3.data[0].linename,
- lineworkcont: res3.data[0].lineworkcont,
- children: res3.data[0].children ? res3.data[0].children[count] : []
- }
- }
-
- if (res3.data[0].children === null) {
- res3.data[0].children = []
- }
-
- if (this.lineContent03.children === undefined || res3.data[0].children.length >= 0) {
- LineSearchTopLeftData([item]).then(res => {
- res3 = res
- })
- }
-
- if (res3.data[0].children.length === count++) {
- count = 0
- this.lineContent03 = {
- linename: res3.data[0].linename,
- lineworkcont: res3.data[0].lineworkcont,
- children: res3.data[0].children ? res3.data[0].children[count] : []
- }
- }
- }, 1000 * 3)
- } else if (index === 3) {
- let count = 0
- if (flag4) {
- this.lineContent04 = {
- linename: res4.data[0].linename,
- lineworkcont: res4.data[0].lineworkcont,
- children: res4.data[0].children ? res4.data[0].children[count] : []
- }
- flag4 = false
- }
- setInterval(() => {
- if (count > 0) {
- this.lineContent04 = {
- linename: res4.data[0].linename,
- lineworkcont: res4.data[0].lineworkcont,
- children: res4.data[0].children ? res4.data[0].children[count] : []
- }
- }
-
- if (res4.data[0].children === null) {
- res4.data[0].children = []
- }
-
- if (res4.data[0].children.length === count || this.lineContent04.children === undefined) {
- LineSearchTopLeftData([item]).then(res => {
- res4 = res
- })
- }
-
- if (res4.data[0].children.length === count++) {
- count = 0
- this.lineContent04 = {
- linename: res4.data[0].linename,
- lineworkcont: res4.data[0].lineworkcont,
- children: res4.data[0].children ? res4.data[0].children[count] : []
- }
- }
- }, 1000 * 3)
- }
- },
-
- // 浜х嚎鍔犲伐浠诲姟
- getTableDataRoll() {
- LineSearchBottomLeftData().then(res => {
- this.tableData = res.data
-
- const divData = this.$refs.tableData.bodyWrapper
- // 鎷垮埌鍏冪礌鍚庯紝瀵瑰厓绱犺繘琛屽畾鏃跺鍔犺窛绂婚《閮ㄨ窛绂伙紝瀹炵幇婊氬姩鏁堟灉(姝ら厤缃负姣�100姣绉诲姩1鍍忕礌)
- const task = setInterval(() => {
- // 鍏冪礌鑷璺濈椤堕儴1鍍忕礌
- divData.scrollTop += 1
- // divData.scrollTop += divData.scrollHeight / this.tableData.length
- // 鍒ゆ柇鍏冪礌鏄惁婊氬姩鍒板簳閮�(鍙楂樺害+璺濈椤堕儴=鏁翠釜楂樺害)
- if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
- // 閲嶇疆table璺濈椤堕儴璺濈
- divData.scrollTop = 0
- LineSearchBottomLeftData().then(res => {
- this.tableData = res.data
- if (this.tableData.length > 10) {
- clearInterval(task)
- this.getTableDataRoll()
- }
- })
- }
- }, this.tableData.length <= 10 ? 1000 * 3 : 100)
- })
- },
- // 褰撴棩瀹屽伐浜у搧鏁伴噺鎺掕
- getTableDataRankRoll() {
- LineSearchTopRightData().then(res => {
- this.tableDataRank = res.data
-
- const divData = this.$refs.tableDataRank.bodyWrapper
- // 鎷垮埌鍏冪礌鍚庯紝瀵瑰厓绱犺繘琛屽畾鏃跺鍔犺窛绂婚《閮ㄨ窛绂伙紝瀹炵幇婊氬姩鏁堟灉(姝ら厤缃负姣�100姣绉诲姩1鍍忕礌)
- const task = setInterval(() => {
- // 鍏冪礌鑷璺濈椤堕儴1鍍忕礌
- // divData.scrollTop += divData.scrollHeight / this.tableDataRank.length
- divData.scrollTop += 1
- // 鍒ゆ柇鍏冪礌鏄惁婊氬姩鍒板簳閮�(鍙楂樺害+璺濈椤堕儴=鏁翠釜楂樺害)
- if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
- // 閲嶇疆table璺濈椤堕儴璺濈
- divData.scrollTop = 0
- LineSearchTopRightData().then(res => {
- this.tableDataRank = res.data
-
- if (this.tableDataRank.length > 10) {
- clearInterval(task)
- this.getTableDataRankRoll()
- }
- })
- }
- }, this.tableDataRank.length <= 10 ? 1000 * 3 : 100)
- })
- },
- // 鑾峰彇echarts
- getEcharts() {
- LineSearchBottomRightData().then(res => {
- loadEcharts('bar02', bar02(res.data.map(i => i.cont), res.data.map(i => i.name)))
- })
-
- setInterval(() => {
- LineSearchBottomRightData().then(res => {
- loadEcharts('bar02', bar02(res.data.map(i => i.cont), res.data.map(i => i.name)))
- })
- }, 1000 * 15)
- },
- // 鑾峰彇褰撳墠鏃堕棿
- 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)',
- padding: '10px 0',
- textAlign: 'center',
- color: '#07acc2',
- border: 'none'
- }
- },
- cellStyle() {
- return {
- padding: '8px 0',
- textAlign: 'center',
- backgroundColor: 'rgba(30, 33, 46 )',
- // backgroundColor: 'transparent',
- color: '#fff',
- border: 'none'
- }
- }
-
- }
-}
-</script>
-
-<style scoped lang="scss">
-//$kbBorderColor: #3A0088;
-//$kbBorderColor: #09d8f2;
-$kbBorderColor: rgba(9, 216, 242, 0.4);
-$kbBackgroundColor: rgba(30, 33, 46, 0.6);
-.kb_content {
- display: flex;
- position: relative;
- height: 990px;
- width: 100%;
- //background-color: #000;
- letter-spacing: 2px;
- //color: #d8d7d9;
- color: #fff;
-
- .kb_left {
- width: 1345px;
- height: 100%;
- padding-left: 5px;
-
- .kb_left_top_title01 {
- position: absolute;
- top: 10px;
- left: 15px;
- font-size: 18px;
- display: flex;
- color: #00ffff;
-
- .PG01 {
- background: url("../../assets/images/GP_1.png") no-repeat;
- width: 28px;
- height: 12px;
- margin-top: 4px;
- margin-right: 10px;
- }
- }
-
- .kb_left_top {
- height: 495px;
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- padding-top: 30px;
-
- .kb_left_top_block {
- margin-top: 10px;
- width: 100%;
- height: 100px;
- display: flex;
- border-radius: 5px;
- font-size: 14px;
- //border: 1px solid rgba(255, 255, 255, 0.6);
- border: 1px solid $kbBorderColor;
- justify-content: flex-start;
-
- .kb_block01 {
- width: 171px;
- display: flex;
- align-items: center;
- border-right: 1px solid $kbBorderColor;
- background-color: $kbBackgroundColor;
- border-bottom-left-radius: 5px;
- border-top-left-radius: 5px;
-
- }
-
- .kb_block02 {
- width: 304px;
- display: flex;
- align-items: center;
- border-right: 1px solid $kbBorderColor;
- background-color: $kbBackgroundColor;
- }
-
- .kb_block03 {
- width: 843px;
- display: flex;
- flex-direction: column;
- font-size: 12px;
- background-color: $kbBackgroundColor;
- border-radius: 5px;
-
- .kb_block03_content {
- border: 1px solid $kbBorderColor;
- width: 152px;
- height: 50px;
- margin-right: 15px;
- //margin-right: 20px;
- display: flex;
- flex-direction: column;
-
- .content01 {
- //width: 50px;
- width: 100%;
- height: 20px;
- border-bottom: 1px solid $kbBorderColor;
- display: flex;
- align-items: center;
- justify-content: center;
- }
-
- .content02Parent {
- display: flex;
-
- .content02 {
- width: 50px;
- border-right: 1px solid $kbBorderColor;
-
- .content02_1 {
- display: flex;
- align-items: center;
- justify-content: center;
- height: 50%;
- }
-
- .content02_2 {
- height: 50%;
- display: flex;
- align-items: center;
- justify-content: center;
- }
-
- .borderTop {
- border-top: 1px solid $kbBorderColor;
- }
- }
- }
-
- }
- }
-
- .kb_block03_02 {
- margin-top: 7px;
- display: flex;
-
- .kb_block03_02_content {
- width: 152px;
- margin-right: 15px;
-
- .content01 {
- .circle {
- width: 26px;
- height: 26px;
- background-color: #00ff8b;
- border-radius: 50%;
- }
-
- }
-
- }
- }
-
- }
-
- }
-
- .kb_left_bottom {
- height: 495px;
-
- .kb_left_bottom_content {
- height: 460px;
- display: flex;
- flex-direction: column;
- //border: 1px solid $kbBorderColor;
-
- .content_head {
- ////font-size: 26px;
- //font-size: 18px;
- //height: 55px;
- //line-height: 55px;
- ////border-bottom: 1px solid $kbBorderColor;
- ////text-align: center;
- //padding-left: 10px;
-
- font-size: 18px;
- line-height: 20px;
- //padding-left: 10px;
- margin-bottom: 10px;
- margin-top: -10px;
- color: #00ffff;
-
- }
-
- .content_body {
- border: 1px solid $kbBorderColor;
- }
- }
- }
- }
-
- .kb_right {
- width: 575px;
- height: 100%;
-
- .kb_right_top {
- height: 476px;
- width: 100%;
-
- .kb_right_top_content {
- //border: 1px solid $kbBorderColor;
- height: 460px;
- display: flex;
- flex-direction: column;
-
- .content_head {
- font-size: 18px;
- line-height: 20px;
- //padding-left: 10px;
- margin-bottom: 10px;
- margin-top: -10px;
- color: #00ffff;
- }
-
- .content_body {
- border: 1px solid $kbBorderColor;
- //border-radius: 5px;
- }
- }
- }
-
- .kb_right_bottom {
- height: 481px;
- margin-top: 8px;
-
- .kb_right_bottom_content_title {
- color: #00ffff;
- font-size: 18px;
- margin-bottom: 10px;
- margin-top: -10px;
- }
-
- .kb_right_bottom_content {
- border: 1px solid $kbBorderColor;
- height: 440px;
- width: 100%;
- border-radius: 5px;
- background-color: $kbBackgroundColor;
- //height: 100%;
- }
- }
- }
-}
-
-::v-deep .el-table::before {
- height: 0;
-}
-
-::v-deep .el-table__body-wrapper {
- //background-color: #044563;
- 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;
-}
-
-//
-///* 瀹氫箟keyframes鍔ㄧ敾锛屽懡鍚嶄负blink*/
-//@keyframes blink {
-// 0% {
-// opacity: 1
-// }
-// 100% {
-// opacity: 0
-// }
-//}
-//
-///*娣诲姞鍏煎鎬у墠缂�*/
-//@-webkit-keyframes blink {
-// 0% {
-// opacity: 1
-// }
-// 100% {
-// opacity: 0
-// }
-//}
-//
-//@-o-keyframes blink {
-// 0% {
-// opacity: 1
-// }
-// 100% {
-// opacity: 0
-// }
-//}
-//
-//@-moz-keyframes blink {
-// 0% {
-// opacity: 1
-// }
-// 100% {
-// opacity: 0
-// }
-//}
-//
-//@-ms-keyframes blink {
-// 0% {
-// opacity: 1
-// }
-// 100% {
-// opacity: 0
-// }
-//}
-//
-.circleYellow {
- width: 26px;
- height: 26px;
- background-color: rgb(255 255 0);
- border-radius: 50%;
-
- //animation: blink 2s linear infinite;
- //-webkit-animation: blink 2s linear infinite;
- //-moz-animation: blink 2s linear infinite;
- //-ms-animation: blink 2s linear infinite;
- //-o-animation: blink 2s linear infinite;
-}
-</style>
diff --git a/src/views/kb/zpcj.vue b/src/views/kb/zpcj.vue
deleted file mode 100644
index 91b0a6f..0000000
--- a/src/views/kb/zpcj.vue
+++ /dev/null
@@ -1,843 +0,0 @@
-<template>
- <div>
- <div class="kb_dashboard">
- <div class="kb_header">
- <div class="flex_c_c kb_header_text">
- 瑁呴厤杞﹂棿鐪嬫澘
- </div>
- <div class="kb_headerPic" />
- <div class="kb_headTime">
- <span>{{ headTime }}</span>
- </div>
- </div>
- <MarqueeTips
- :content="MarqueeTipsContent"
- class="MarqueeTipsContentClass"
- :speed="180"
- />
- <!-- :speed="speed"-->
- <div class="kb_content">
- <div class="kb_left">
- <!-- 1-->
- <div class="kb_left_top_title01 kb_title_text">
- <!-- <div class="PG01" />-->
- <!-- <svg-icon icon-class="sccx" />-->
- 浜х嚎鍔犲伐涓换鍔�
- <div style="margin-left: 30px">{{ number1 }} 鍗�</div>
- </div>
-
- <div class="kb_left_top kb_pd10">
- <div class="kb_left_top02">
- <div 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">
- 鍔犲伐鍗曞彿:{{ item.workcode }}
- </div>
- <div class="kb_mt5">
- 浜у搧鍚嶇О:{{ item.partname }}
- </div>
- <div class="kb_mt5">
- 浠诲姟鏁伴噺:{{ parseFloat(item.qty) }}
- </div>
- </div>
- </div>
- <div class="kb_block03 kb_pd10 ">
- <div v-if="item.children&&item.children.length>0" class="flex_s_c">
- <div
- v-for="(it,ind) in item.children"
- :key="ind"
- class="kb_block03_content flex_c_c"
- >
- <div>
- <div class="content01">{{ it.stepname }}</div>
- </div>
- <div class="content02Parent">
- <div class="content02">
- <div class="content02_1 ">浠诲姟</div>
- <div class="content02_2 borderTop ">{{ parseFloat(it.planqty) }}</div>
- </div>
- <div class="content02">
- <div class="content02_1 ">鍚堟牸</div>
- <div class="content02_2 borderTop ">{{ parseFloat(it.goodqty) }}</div>
- </div>
- <div class="content02" style="border-right: 0">
- <div class="content02_1 ">涓嶈壇</div>
- <div class="content02_2 borderTop ">{{ parseFloat(it.ngqty) }}</div>
- </div>
- </div>
- </div>
- </div>
- <div v-if="item.children&&item.children.length>0" class="kb_block03_02 flex_s_c">
- <div
- v-for="(it,ind) in item.children"
- :key="ind"
- class="kb_block03_02_content flex_c_c"
- >
- <div class="flex_c_c content01">
- <div
- v-if="it.status==='START'&&(parseFloat(it.ngqty)===0||it.ngqty==='')&&(parseFloat(it.goodqty)===0||it.goodqty==='')"
- class="circle"
- style="background-color: blue;"
- />
- <div
- v-else-if="it.status==='ALLO'&&(parseFloat(it.ngqty)===0||it.ngqty==='')&&(parseFloat(it.goodqty)===0||it.goodqty==='')"
- class="circle"
- style="background-color: rgb(255 255 255)"
- />
- <div
- v-else-if="parseFloat(it.ngqty)+parseFloat(it.goodqty)>=parseFloat(it.planqty)"
- class="circle"
- />
- <div v-else class="circleYellow" />
- </div>
- </div>
- </div>
-
- </div>
- </div>
- </div>
- </div>
- <!-- 2-->
- <div class="kb_left_bottom kb_pd10">
- <div class="kb_left_bottom_content">
- <div class="content_head kb_title_text">浜х嚎鍔犲伐浠诲姟
- <div style="margin-left: 30px">{{ number2 }} 鍗�</div>
- </div>
- <div class="content_body">
- <el-table
- ref="tableData"
- :data="tableData"
- style="width: 100%;"
- :header-cell-style="headerCellStyle"
- :cell-style="cellStyle"
- height="440"
- >
- <el-table-column
- prop="RowNum"
- label="搴忓彿"
- width="50"
- />
- <!-- label="鍔犲伐鐘舵��"-->
- <el-table-column
- prop="status"
- label="鐘舵��"
- width="65"
- >
- <template slot-scope="{row}">
- <div v-if="row.status==='ALLO'">宸叉淳鍙�</div>
- <div v-if="row.status==='START'">寮�宸�</div>
- <div v-if="row.status==='NEW'">鏂板伐鍗�</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="lm_date"
- label="娲惧彂鏃堕棿"
- width="115"
- >
- <template slot-scope="{row}">
- <div>{{ row.lm_date.substring(0, 10) }}</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="saleOrderCode"
- label="閿�鍞鍗曞彿"
- width="178"
- >
- <template slot-scope="{row}">
- <div v-if="row.saleOrderCode" class="ellipsis">{{ row.saleOrderCode }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="wo_code"
- label="鍔犲伐鍗曞彿"
- width="205"
- >
- <template slot-scope="{row}">
- <div v-if="row.wo_code" class="ellipsis">{{ row.wo_code }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="partname"
- label="浜у搧鍚嶇О"
- width="150"
- >
- <template slot-scope="{row}">
- <div v-if="row.partname" class="ellipsis">{{ row.partname }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <!-- <el-table-column-->
- <!-- prop="partspec"-->
- <!-- label="瑙勬牸"-->
- <!-- width="125"-->
- <!-- >-->
- <!-- <template slot-scope="{row}">-->
- <!-- <div v-if="row.partspec" class="ellipsis">{{ row.partspec }}</div>-->
- <!-- <div v-else>/</div>-->
- <!-- </template>-->
- <!-- </el-table-column>-->
- <!-- <el-table-column-->
- <!-- prop="name"-->
- <!-- label="鍗曚綅"-->
- <!-- width="50"-->
- <!-- />-->
- <el-table-column
- prop="plan_qty"
- label="浠诲姟鏁伴噺"
- width="85"
- />
- <el-table-column
- prop="good_qty"
- label="瀹屽伐鏁伴噺"
- width="85"
- />
- <el-table-column
- prop="ng_qty"
- label="涓嶈壇鏁伴噺"
- width="85"
- />
- <el-table-column
- prop="wcl"
- label="瀹屾垚鐜�"
- width="60"
- >
- <template slot-scope="{row}">
- <div>{{ parseFloat((row.good_qty * 100 / row.plan_qty).toFixed(2)) }}%</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="planenddate"
- label="棰勮寮�濮�"
- width="115"
- >
- <template slot-scope="{row}">
- <div>{{ row.planenddate.substring(0, 10) }}</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="planstartdate"
- label="棰勮缁撴潫"
- width="125"
- >
- <template slot-scope="{row}">
- <div>{{ row.planstartdate.substring(0, 10) }}</div>
- </template>
- </el-table-column>
- </el-table>
- </div>
- </div>
- </div>
- </div>
- <div class="kb_right kb_pd10">
- <div class="kb_right_top kb_pd10">
- <div class="kb_right_top_content">
- <div class="content_head kb_title_text">褰撴棩瀹屽伐浜у搧鏁伴噺鎺掕</div>
- <div class="content_body">
- <el-table
- ref="tableDataRank"
- :data="tableDataRank"
- class="tableDataRank"
- style="width: 100%;"
- :header-cell-style="headerCellStyle"
- :cell-style="cellStyle"
- height="396"
- >
- <el-table-column
- type="index"
- label="搴忓彿"
- width="55"
- />
- <el-table-column
- prop="wkshname"
- label="杞﹂棿锛堜緵鏂癸級"
- width="120"
- >
- <template slot-scope="{row}">
- <div v-if="row.wkshname" class="ellipsis">{{ row.wkshname }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="linename"
- label="浜х嚎"
- width="120"
- >
- <template slot-scope="{row}">
- <div v-if="row.linename" class="ellipsis">{{ row.linename }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="partname"
- width="138"
- label="浜у搧"
- >
- <template slot-scope="{row}">
- <div v-if="row.partname" class="ellipsis">{{ row.partname }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="good_qty"
- label="鏁伴噺"
- width="100"
- />
- </el-table>
- </div>
- </div>
- </div>
- <div class="kb_right_bottom kb_pd10">
- <div class="kb_right_bottom_content_title kb_title_text">
- 涓�鍛ㄤ笉鑹疶op5
- </div>
- <div class="kb_right_bottom_content">
- <div id="bar02" style="width: 100%;height:100%" />
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
-</template>
-
-<script>
-import './kbCommon.css'
-import { bar02, loadEcharts } from '@/utils/myEcharts'
-import {
- LineSearchBottomLeftData,
- LineSearchBottomRightData,
- LineSearchTopLeftData,
- LineSearchTopRightData, ShopSearch, WkspReportNotice
-} from '@/api/dzkb'
-import MarqueeTips from 'vue-marquee-tips'
-
-export default {
- name: 'Index2',
- components: {
- MarqueeTips
- },
- data() {
- return {
-
- onLine: navigator.onLine, // 鐩戝惉缃戠粶鏄惁鍦ㄧ嚎
-
- headTime: '',
-
- lineContent: [],
- lineContent3: [],
-
- leftTopData: [],
- tableData: [],
- tableDataRank: [],
- lineCodeArr: [],
-
- ShopArr: ['CJ001'], // 杞﹂棿缂栫爜鏁扮粍
-
- number1: '',
- number2: '',
-
- MarqueeTipsContent: '', // 鍏憡
- speed: 100, // 鍏憡鎾斁鐨勯�熷害
-
- MarqueeTipsTask: null,
- ShopSearchTask: null,
- ShopSearchLineTask: null,
- TableDataRollTask: null,
- TableDataRankRollTask: null,
- EchartsTask: null
- }
- },
-
- created() {
- setInterval(this.getNowTime, 1000)
-
- // 涓ゅ皬鏃剁湅鏉垮埛鏂颁竴娆�
- setInterval(() => {
- window.location.reload()
- }, 1000 * 60 * 120)
- },
- mounted() {
- // 鐩戝惉缃戠粶鏄惁鍦ㄧ嚎
- window.addEventListener('online', this.updateOnlineStatus)
- window.addEventListener('offline', this.updateOnlineStatus)
- this.updateOnlineStatus({ type: this.onLine ? 'online' : 'offline', isFirst: true })
- },
- beforeDestroy() {
- window.removeEventListener('online', this.updateOnlineStatus)
- window.removeEventListener('offline', this.updateOnlineStatus)
- },
- methods: {
- // 鏇存柊缃戠粶鐘舵��
- updateOnlineStatus(e) {
- if (e.isFirst) {
- this.getValue()// 鑾峰彇鍊�
- } else {
- const loading = this.$loading({
- lock: true,
- text: '鏂綉浜嗭紝姝ｅ湪鎷煎懡鑱旂綉涓紝璇锋鏌ョ綉缁滄槸鍚︽甯�...',
- spinner: 'el-icon-loading',
- customClass: 'osloading',
- background: 'rgba(0, 0, 0, 0.7)'
- })
- const { type } = e
- this.onLine = type === 'online'
- if (this.onLine) {
- this.getValue()
- loading.close()
- this.$message.success('缃戠粶杩炴帴鎴愬姛锛�')
- } else {
- clearInterval(this.MarqueeTipsTask)
- clearInterval(this.ShopSearchTask)
- clearInterval(this.ShopSearchLineTask)
- clearInterval(this.TableDataRollTask)
- clearInterval(this.TableDataRankRollTask)
- clearInterval(this.EchartsTask)
- this.$message.error('缃戠粶鎺夌嚎锛岃鍏虫敞缃戠粶鐘舵�侊紒')
- }
- }
- },
- // 鑾峰彇鍊�
- async getValue() {
- // await this.getShopSearch()
- await this.getShopSearchLine()
-
- await this.getEcharts()
- await this.getTableDataRoll()
- await this.getTableDataRankRoll()
- await this.getMarqueeTipsContent()
- await this.getMarqueeTipsContent()
- },
- // 鑾峰彇鍏憡
- getMarqueeTipsContent() {
- WkspReportNotice({ shopcode: this.ShopArr.join(',') }).then(res => {
- let contentAll = ''
- res.data.forEach(item => {
- contentAll += item.contents + ' '.padStart(item.contents.toString().length * 2, ' ')
- })
- this.MarqueeTipsContent = contentAll
- this.speed = this.MarqueeTipsContent.length / 10
-
- this.MarqueeTipsTask = setInterval(() => {
- WkspReportNotice({ shopcode: this.ShopArr.join(',') }).then(res1 => {
- let contentAll = ''
- res1.data.forEach(item => {
- contentAll += item.contents + ' '.padStart(item.contents.toString().length * 2, ' ')
- })
- this.MarqueeTipsContent = contentAll
- this.speed = this.MarqueeTipsContent.length / 10
- })
- // }, this.speed * 1000)
- }, 1000 * 60 * 5)
- })
- },
- // 鑾峰彇杞﹂棿缂栫爜
- async getShopSearch() {
- const res1 = await ShopSearch()
- if (res1.code === '200') {
- this.ShopArr = []
- res1.data.forEach(item => {
- this.ShopArr.push(item.org_code)
- })
- }
- setInterval(() => {
- this.ShopSearchTask = ShopSearch().then(res1 => {
- if (res1.code === '200') {
- this.ShopArr = []
- res1.data.forEach(item => {
- this.ShopArr.push(item.org_code)
- })
- }
- })
- }, 1000 * 30)
- },
- // 浜х嚎鍔犲伐涓换鍔�
- getShopSearchLine() {
- let length, count
- LineSearchTopLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
- this.lineContent = res.data
- length = this.lineContent.length
- count = Math.ceil(length / 3) // 闇�瑕佽疆鎾殑缁勬暟 3涓负涓�缁�
- this.lineContent3 = this.lineContent.slice(0, 3)
-
- this.number1 = this.lineContent.length
- })
-
- let start = 0
- this.ShopSearchLineTask = setInterval(() => {
- if (Math.floor(start / 3) === count && count !== 0) {
- start = 0
- LineSearchTopLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
- this.lineContent = res.data
- length = this.lineContent.length
- count = Math.ceil(length / 3) // 闇�瑕佽疆鎾殑缁勬暟 3涓负涓�缁�
- this.lineContent3 = this.lineContent.slice(0, 3)
-
- this.number1 = this.lineContent.length
- })
- } else if (count === 0) {
- clearInterval(this.ShopSearchLineTask)
- this.getShopSearchLine()
- }
- this.lineContent3 = this.lineContent.slice(start, start + 3)
- start = start + 3
- }, 1000 * 3)
- },
-
- // 浜х嚎鍔犲伐浠诲姟
- getTableDataRoll() {
- LineSearchBottomLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
- this.tableData = res.data
- this.number2 = this.tableData.length
-
- 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
-
- const divData = this.$refs.tableDataRank.bodyWrapper
- // 鎷垮埌鍏冪礌鍚庯紝瀵瑰厓绱犺繘琛屽畾鏃跺鍔犺窛绂婚《閮ㄨ窛绂伙紝瀹炵幇婊氬姩鏁堟灉(姝ら厤缃负姣�100姣绉诲姩1鍍忕礌)
- this.TableDataRankRollTask = setInterval(() => {
- // 鍏冪礌鑷璺濈椤堕儴1鍍忕礌
- // divData.scrollTop += divData.scrollHeight / this.tableDataRank.length
- divData.scrollTop += 1
- // 鍒ゆ柇鍏冪礌鏄惁婊氬姩鍒板簳閮�(鍙楂樺害+璺濈椤堕儴=鏁翠釜楂樺害)
- if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
- // 閲嶇疆table璺濈椤堕儴璺濈
- divData.scrollTop = 0
- LineSearchTopRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
- this.tableDataRank = res.data
-
- if (this.tableDataRank.length > 9) {
- clearInterval(this.TableDataRankRollTask)
- this.getTableDataRankRoll()
- }
- })
- }
- }, this.tableDataRank.length <= 9 ? 1000 * 3 : 100)
- })
- },
- // 鑾峰彇echarts
- getEcharts() {
- LineSearchBottomRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
- loadEcharts('bar02', bar02(res.data.map(i => i.cont), res.data.map(i => i.name)))
- })
-
- this.EchartsTask = setInterval(() => {
- LineSearchBottomRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
- loadEcharts('bar02', bar02(res.data.map(i => i.cont), res.data.map(i => i.name)))
- })
- }, 1000 * 15)
- },
- // 鑾峰彇褰撳墠鏃堕棿
- 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)',
- padding: '10px 0',
- textAlign: 'center',
- color: '#07acc2',
- border: 'none'
- }
- },
- cellStyle() {
- return {
- padding: '8px 0',
- textAlign: 'center',
- backgroundColor: 'rgba(30, 33, 46 )',
- // backgroundColor: 'transparent',
- color: '#fff',
- border: 'none'
- }
- }
-
- }
-}
-</script>
-
-<style scoped lang="scss">
-$kbBorderColor: rgba(9, 216, 242, 0.4);
-$kbBackgroundColor: rgba(30, 33, 46, 0.6);
-.kb_content {
- display: flex;
- position: relative;
- height: 990px;
- width: 100%;
- letter-spacing: 2px;
- color: #fff;
-
- .kb_left {
- width: 1345px;
- height: 100%;
- padding-left: 5px;
-
- .kb_left_top_title01 {
- position: absolute;
- top: 37px;
- left: 15px;
- display: flex;
- color: #00ffff;
-
- .PG01 {
- background: url("../../assets/images/GP_1.png") no-repeat;
- width: 28px;
- height: 12px;
- margin-top: 4px;
- margin-right: 10px;
- }
- }
-
- .kb_left_top {
- height: 495px;
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- padding-top: 70px;
-
- .kb_left_top02 {
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- border: 1px solid $kbBorderColor;
- height: 400px;
- border-radius: 5px;
- background-color: $kbBackgroundColor;
-
- .kb_left_top_block {
- width: 100%;
- height: 133px;
- display: flex;
- font-size: 17px;
- border-bottom: 1px solid $kbBorderColor;
- justify-content: flex-start;
-
- .kb_block02 {
- width: 304px;
- display: flex;
- align-items: center;
- border-right: 1px solid $kbBorderColor;
- }
-
- .kb_block03 {
- width: 1020px;
- font-size: 17px;
- display: flex;
- flex-direction: column;
- //font-size: 12px;
- border-radius: 5px;
-
- .kb_block03_content {
- border: 1px solid $kbBorderColor;
- width: 180px;
- height: 80px;
- margin-right: 15px;
- display: flex;
- flex-direction: column;
-
- .content01 {
- height: 30px;
- width: 100%;
- border-bottom: 1px solid $kbBorderColor;
- display: flex;
- align-items: center;
- justify-content: center;
- }
-
- .content02Parent {
- display: flex;
-
- .content02 {
- width: 60px;
- border-right: 1px solid $kbBorderColor;
-
- .content02_1 {
- display: flex;
- align-items: center;
- justify-content: center;
- //height: 50%;
- height: 25px;
- }
-
- .content02_2 {
- height: 25px;
- display: flex;
- align-items: center;
- justify-content: center;
- }
-
- .borderTop {
- border-top: 1px solid $kbBorderColor;
- }
- }
- }
-
- }
- }
-
- .kb_block03_02 {
- margin-top: 7px;
- display: flex;
-
- .kb_block03_02_content {
- width: 180px;
- margin-right: 15px;
-
- .content01 {
- .circle {
- width: 26px;
- height: 26px;
- background-color: #00ff8b;
- border-radius: 50%;
- }
-
- }
-
- }
- }
-
- }
-
- .kb_left_top_block:nth-child(3n) {
- border-bottom: none !important;
- }
- }
- }
-
- .kb_left_bottom {
- height: 495px;
-
- .kb_left_bottom_content {
- height: 460px;
- display: flex;
- flex-direction: column;
-
- .content_head {
- display: flex;
- line-height: 20px;
- margin-bottom: 10px;
- margin-top: -10px;
- color: #00ffff;
-
- }
-
- .content_body {
- border: 1px solid $kbBorderColor;
- }
- }
- }
- }
-
- .kb_right {
- width: 575px;
- height: 100%;
-
- .kb_right_top {
- margin-top: 30px;
- margin-bottom: -30px;
- height: 476px;
- width: 100%;
-
- .kb_right_top_content {
- height: 430px;
- display: flex;
- flex-direction: column;
-
- .content_head {
- //font-size: 18px;
- line-height: 20px;
- margin-bottom: 10px;
- margin-top: -10px;
- color: #00ffff;
- }
-
- .content_body {
- border: 1px solid $kbBorderColor;
- }
- }
- }
-
- .kb_right_bottom {
- height: 482px;
- margin-top: 8px;
-
- .kb_right_bottom_content_title {
- color: #00ffff;
- margin-bottom: 5px;
- margin-top: -12px;
- }
-
- .kb_right_bottom_content {
- border: 1px solid $kbBorderColor;
- height: 441px;
- width: 100%;
- border-radius: 5px;
- background-color: $kbBackgroundColor;
- }
- }
- }
-}
-
-::v-deep .el-table::before {
- height: 0;
-}
-
-::v-deep .el-table__body-wrapper {
- background-color: rgba(30, 33, 46);
-}
-
-::v-deep .el-table__body-wrapper::-webkit-scrollbar {
- /* width: 0;瀹藉害涓�0鏆楄棌 */
- width: 0;
-}
-
-::v-deep .cell {
- padding: 0 !important;
- font-size: 18px;
-}
-
-.circleYellow {
- width: 26px;
- height: 26px;
- background-color: rgb(255 255 0);
- border-radius: 50%;
-}
-</style>
--
Gitblit v1.9.3