From 59fbd9a0bee7e07df2bd2fe7e851eb2b5fb8d3ae Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期二, 15 十一月 2022 16:08:38 +0800
Subject: [PATCH] 1.富尔达看板初稿实现
---
src/permission.js | 2
src/views/kb/cjzl.vue | 394 ++++
src/icons/svg/cxmc.svg | 1
src/icons/svg/zbl.svg | 1
src/views/kb/zhkb.vue | 908 +++-------
src/router/index.js | 196 +-
src/utils/myEcharts.js | 606 +++++++
src/icons/svg/cxjg.svg | 1
src/views/kb/cjsc.vue | 791 +++++++++
src/icons/svg/drwg.svg | 1
/dev/null | 843 ----------
src/views/kb/kbCommon.css | 28
src/icons/svg/bll.svg | 1
src/icons/svg/blmx.svg | 1
src/icons/svg/rbl.svg | 1
src/icons/svg/scxx.svg | 1
src/views/kb/zhkb_back.vue | 1185 ++++---------
src/icons/svg/top5.svg | 1
18 files changed, 2,589 insertions(+), 2,373 deletions(-)
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/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/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/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..a5dd403 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', '/cjsc', '/cjzl'] // 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 c8a5016..a29f0e7 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -35,36 +35,20 @@
* 鐪嬫澘閮ㄥ垎璺敱
* */
{
+ path: '/cjzl',
+ component: () => import('@/views/kb/cjzl'),
+ hidden: true
+ },
+ {
path: '/zhkb',
component: () => import('@/views/kb/zhkb'),
hidden: true
},
{
- path: '/ckgl',
- component: () => import('@/views/kb/ckgl'),
+ path: '/cjsc',
+ component: () => import('@/views/kb/cjsc'),
hidden: true
},
- {
- path: '/cgdd',
- component: () => import('@/views/kb/cgdd'),
- hidden: true
- },
- {
- path: '/zpcj',
- component: () => import('@/views/kb/zpcj'),
- hidden: true
- },
- {
- path: '/dccj',
- component: () => import('@/views/kb/dccj'),
- hidden: true
- },
- {
- path: '/bzcj',
- component: () => import('@/views/kb/bzcj'),
- hidden: true
- },
-
{
path: '/login',
component: () => import('@/views/login/index'),
@@ -151,13 +135,13 @@
component: () => import('@/views/jcsz/wldw'),
meta: { code: '1013', title: '寰�鏉ュ崟浣�', icon: '', keepAlive: true }
},
- // {
- // path: 'adsz',
- // name: 'ADZZCancel',
- // code: '1014',
- // component: () => import('@/views/jcsz/adsz'),
- // meta: { code: '1014', title: '瀹夌伅璁剧疆', icon: '', keepAlive: true }
- // }
+ {
+ path: 'adsz',
+ name: 'ADZZCancel',
+ code: '1014',
+ component: () => import('@/views/jcsz/adsz'),
+ meta: { code: '1014', title: '瀹夌伅璁剧疆', icon: '', keepAlive: true }
+ }
]
},
{
@@ -169,26 +153,26 @@
meta: { code: '1002', title: '璁惧绠＄悊', icon: 'example' },
alwaysShow: true,
children: [
- // {
- // path: 'sblx',
- // name: 'SBLXCancel',
- // code: '1020',
- // component: () => import('@/views/sbgl/sblx'),
- // meta: { code: '1020', title: '璁惧绫诲瀷', icon: '', keepAlive: true }
- // },
- // {
- // path: 'wxjl',
- // code: '1029Cancel',
- // name: 'WXJL',
- // component: () => import('@/views/sbgl/wxjl'),
- // meta: { code: '1029', title: '缁翠慨璁板綍', icon: '', keepAlive: true }
- // }, {
- // path: 'sbz',
- // name: 'SBZCancel',
- // code: '1021',
- // component: () => import('@/views/sbgl/sbz'),
- // meta: { code: '1021', title: '璁惧缁�', icon: '', keepAlive: true }
- // },
+ {
+ path: 'sblx',
+ name: 'SBLXCancel',
+ code: '1020',
+ component: () => import('@/views/sbgl/sblx'),
+ meta: { code: '1020', title: '璁惧绫诲瀷', icon: '', keepAlive: true }
+ },
+ {
+ path: 'wxjl',
+ code: '1029Cancel',
+ name: 'WXJL',
+ component: () => import('@/views/sbgl/wxjl'),
+ meta: { code: '1029', title: '缁翠慨璁板綍', icon: '', keepAlive: true }
+ }, {
+ path: 'sbz',
+ name: 'SBZCancel',
+ code: '1021',
+ component: () => import('@/views/sbgl/sbz'),
+ meta: { code: '1021', title: '璁惧缁�', icon: '', keepAlive: true }
+ },
{
path: 'sbqd',
name: 'sbqdCancel',
@@ -196,48 +180,48 @@
component: () => import('@/views/sbgl/sbqd'),
meta: { code: '1022', title: '璁惧娓呭崟', icon: '', keepAlive: true }
},
- // {
- // path: 'djbz',
- // name: 'DJBZCancel',
- // code: '1023',
- // component: () => import('@/views/sbgl/djbz'),
- // meta: { code: '1023', title: '鐐规鏍囧噯', icon: '', keepAlive: true }
- // },
- // {
- // path: 'djbw',
- // name: 'DJBWCancel',
- // code: '1024',
- // component: () => import('@/views/sbgl/djbw'),
- // meta: { code: '1024', title: '鐐规閮ㄤ綅', icon: '', keepAlive: true }
- // },
- // {
- // path: 'bybz',
- // name: 'BYBZCancel',
- // code: '1025',
- // component: () => import('@/views/sbgl/bybz'),
- // meta: { code: '1025', title: '淇濆吇鏍囧噯', icon: '', keepAlive: true }
- // },
- // {
- // path: 'bybw',
- // name: 'BYBWCancel',
- // code: '1026',
- // component: () => import('@/views/sbgl/bybw'),
- // meta: { code: '1026', title: '淇濆吇閮ㄤ綅', icon: '', keepAlive: true }
- // },
- // {
- // path: 'djjl',
- // name: 'DJJLCancel',
- // code: '1027',
- // component: () => import('@/views/sbgl/djjl'),
- // meta: { code: '1027', title: '鐐规璁板綍', icon: '', keepAlive: true }
- // },
- // {
- // path: 'byjl',
- // name: 'BYJLCancel',
- // code: '1028',
- // component: () => import('@/views/sbgl/byjl'),
- // meta: { code: '1028', title: '淇濆吇璁板綍', icon: '', keepAlive: true }
- // }
+ {
+ path: 'djbz',
+ name: 'DJBZCancel',
+ code: '1023',
+ component: () => import('@/views/sbgl/djbz'),
+ meta: { code: '1023', title: '鐐规鏍囧噯', icon: '', keepAlive: true }
+ },
+ {
+ path: 'djbw',
+ name: 'DJBWCancel',
+ code: '1024',
+ component: () => import('@/views/sbgl/djbw'),
+ meta: { code: '1024', title: '鐐规閮ㄤ綅', icon: '', keepAlive: true }
+ },
+ {
+ path: 'bybz',
+ name: 'BYBZCancel',
+ code: '1025',
+ component: () => import('@/views/sbgl/bybz'),
+ meta: { code: '1025', title: '淇濆吇鏍囧噯', icon: '', keepAlive: true }
+ },
+ {
+ path: 'bybw',
+ name: 'BYBWCancel',
+ code: '1026',
+ component: () => import('@/views/sbgl/bybw'),
+ meta: { code: '1026', title: '淇濆吇閮ㄤ綅', icon: '', keepAlive: true }
+ },
+ {
+ path: 'djjl',
+ name: 'DJJLCancel',
+ code: '1027',
+ component: () => import('@/views/sbgl/djjl'),
+ meta: { code: '1027', title: '鐐规璁板綍', icon: '', keepAlive: true }
+ },
+ {
+ path: 'byjl',
+ name: 'BYJLCancel',
+ code: '1028',
+ component: () => import('@/views/sbgl/byjl'),
+ meta: { code: '1028', title: '淇濆吇璁板綍', icon: '', keepAlive: true }
+ }
]
},
{
@@ -390,13 +374,13 @@
component: () => import('@/views/zzmx/chda'),
meta: { code: '1061', title: '瀛樿揣妗ｆ', icon: '', keepAlive: true }
},
- // {
- // path: 'wlqd',
- // name: 'WLQDCancel',
- // code: '1062',
- // component: () => import('@/views/zzmx/wlqd'),
- // meta: { code: '1062', title: '鐗╂枡娓呭崟', icon: '', keepAlive: true }
- // },
+ {
+ path: 'wlqd',
+ name: 'WLQDCancel',
+ code: '1062',
+ component: () => import('@/views/zzmx/wlqd'),
+ meta: { code: '1062', title: '鐗╂枡娓呭崟', icon: '', keepAlive: true }
+ },
{
path: 'gylx',
name: 'GYLXCancel',
@@ -587,13 +571,13 @@
component: () => import('@/views/xtsz/bmgz'),
meta: { code: '1101', title: '缂栫爜瑙勫垯', icon: '', keepAlive: true }
},
- // {
- // path: 'mmxg',
- // name: 'MMXGCancel',
- // code: '1102',
- // component: () => import('@/views/xtsz/mmxg'),
- // meta: { code: '1102', title: '瀵嗙爜淇敼', icon: '', keepAlive: true }
- // },
+ {
+ path: 'mmxg',
+ name: 'MMXGCancel',
+ code: '1102',
+ component: () => import('@/views/xtsz/mmxg'),
+ meta: { code: '1102', title: '瀵嗙爜淇敼', icon: '', keepAlive: true }
+ },
{
path: 'xtrz',
name: 'XTRZCancel',
diff --git a/src/utils/myEcharts.js b/src/utils/myEcharts.js
index ac3560d..edc7679 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']
@@ -788,3 +791,606 @@
}
return option
}
+
+// 鐪嬫澘澶撮儴鑳屾櫙鏉�
+export function kbTop() {
+ var getXY = ['瀛﹀墠鏁欒偛绯�'] // 鏁版嵁鐐瑰悕绉�
+ var getRS = [255] // 瀛︾敓婊℃剰搴�
+
+ var max = Math.ceil(255 / 10) * 10
+
+ const option = {
+ backgroundColor: 'transparent',
+ grid: {
+ left: '0%',
+ right: '0%',
+ bottom: '0%',
+ top: '0%'
+ // containLabel: true
+ },
+ xAxis: [
+ {
+ type: 'value',
+ show: false,
+ axisLabel: {
+ margin: 5,
+ color: '#666666',
+ textStyle: {
+ fontSize: '13'
+ }
+ },
+ min: 0,
+ max: max, // 璁＄畻鏈�澶у��
+ interval: max / 5, // 骞冲潎鍒嗕负5浠�
+ splitNumber: 5,
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#D1D1D1'
+ }
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#333333'
+ }
+ },
+ axisTick: {
+ show: false
+ }
+ }
+ ],
+ yAxis: [
+ {
+ type: 'category',
+ inverse: true,
+ show: false,
+ axisLabel: {
+ textStyle: {
+ color: '#6F84BD',
+ fontSize: '13'
+ }
+ },
+ splitLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLine: {
+ show: false,
+ lineStyle: {
+ color: '#333333'
+ }
+ },
+ data: getXY
+ }
+ ],
+ series: [
+ {
+ name: '鍊�',
+ type: 'bar',
+ zlevel: 1,
+ xAxisIndex: 0,
+ label: {
+ show: false,
+ position: 'right',
+ color: '#6F84BD',
+ fontSize: 14,
+ offset: [10, 0]
+ },
+ itemStyle: {
+ normal: {
+ barBorderRadius: [10, 10, 10, 10],
+ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+ offset: 0,
+ color: '#91ddec' // 0% 澶勭殑棰滆壊
+ }, {
+ offset: 1,
+ color: '#09d8f2' // 100% 澶勭殑棰滆壊
+ }], false)
+ }
+ },
+ barWidth: 15,
+ data: getRS
+ }
+ ]
+ }
+
+ return option
+}
+
+// 杞﹂棿璐ㄩ噺宸︿笅鍛ㄤ笉鑹�
+export function line02() {
+ return {
+ backgroundColor: 'transparent',
+ tooltip: {},
+ // title: {
+ // show: false,
+ // text: '璁㈠崟瀹屾垚鎬绘暟',
+ // left: '50%',
+ // top: '5%',
+ // textAlign: 'center',
+ // textStyle: {
+ // // color: '#fff',
+ // color: '#00ffff',
+ // fontSize: '20',
+ // fontWeight: 'bolder'
+ // }
+ // },
+ grid: {
+ left: '0%',
+ right: '2%',
+ bottom: '5%',
+ top: '8%',
+ containLabel: true
+ },
+ legend: {
+ show: false,
+ itemGap: 50,
+ data: ['娉ㄥ唽鎬婚噺', '鏈�鏂版敞鍐岄噺'],
+ textStyle: {
+ color: '#f9f9f9',
+ borderColor: '#fff'
+ }
+ },
+ xAxis: [{
+ type: 'category',
+ boundaryGap: true,
+ axisLabel: {
+ interval: 0,
+ formatter: '{value}',
+ fontSize: 14,
+ margin: 20,
+ textStyle: {
+ color: colorX
+ }
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#032c58'
+ }
+ },
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: '#032c58'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ data: ['鍛ㄤ竴', '鍛ㄤ簩', '鍛ㄤ笁', '鍛ㄥ洓', '鍛ㄤ簲', '鍛ㄥ叚', '鍛ㄦ棩']
+ }],
+ yAxis: [
+ {
+ // max: 800,
+ boundaryGap: false,
+ splitNumber: 4,
+ type: 'value',
+ axisLabel: {
+ textStyle: {
+ fontSize: 14,
+ color: colorY
+ }
+ },
+ // name: '鍗�',
+ // nameTextStyle: {
+ // color: colorY,
+ // fontSize: 14,
+ // lineHeight: 20
+ // },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#032c58'
+ }
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#032c58'
+ }
+ },
+ axisTick: {
+ show: true
+ }
+ }
+ ],
+ series: [
+ {
+ name: '娉ㄥ唽鎬婚噺',
+ type: 'line',
+ // smooth: true, //鏄惁骞虫粦鏇茬嚎鏄剧ず
+ // symbol:'circle', // 榛樿鏄┖蹇冨渾锛堜腑闂存槸鐧借壊鐨勶級锛屾敼鎴愬疄蹇冨渾
+ showAllSymbol: true,
+ symbol: 'emptyCircle',
+ symbolSize: 6,
+ lineStyle: {
+ normal: {
+ color: '#28ffb3' // 绾挎潯棰滆壊
+ },
+ borderColor: '#f0f'
+ },
+ label: {
+ show: true,
+ position: 'top',
+ textStyle: {
+ color: '#fff'
+ }
+ },
+ itemStyle: {
+ normal: {
+ color: '#28ffb3'
+
+ }
+ },
+ tooltip: {
+ show: false
+ },
+ areaStyle: { // 鍖哄煙濉厖鏍峰紡
+ normal: {
+ // 绾挎�ф笎鍙橈紝鍓�4涓弬鏁板垎鍒槸x0,y0,x2,y2(鑼冨洿0~1);鐩稿綋浜庡浘褰㈠寘鍥寸洅涓殑鐧惧垎姣斻�傚鏋滄渶鍚庝竴涓弬鏁版槸鈥榯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: [393, 438, 485, 631, 689, 824, 700]
+ // data: [600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100)]
+ }
+ // {
+ // name: '鏈�鏂版敞鍐岄噺',
+ // type: 'bar',
+ // barWidth: 20,
+ // tooltip: {
+ // show: false
+ // },
+ // label: {
+ // show: true,
+ // position: 'top',
+ // textStyle: {
+ // color: '#fff',
+ // }
+ // },
+ // itemStyle: {
+ // normal: {
+ // // barBorderRadius: 5,
+ // // color: new echarts.graphic.LinearGradient(
+ // // 0, 0, 0, 1,
+ // // [{
+ // // offset: 0,
+ // // color: '#14c8d4'
+ // // },
+ // // {
+ // // offset: 1,
+ // // color: '#43eec6'
+ // // }
+ // // ]
+ // // )
+ // color: function (params) {
+ // var colorList = ['#0ec1ff', '#10cdff', '#12daff', '#15ebff', '#17f8ff', '#1cfffb', '#1dfff1'];
+ // return colorList[params.dataIndex];
+ // }
+ // }
+ // },
+ // data: [200, 382, 102, 267, 186, 315, 316]
+ // }
+ ]
+ }
+}
+
+// 杞﹂棿璐ㄩ噺鍙充笂 鏃ヤ笉鑹�
+export function bar04() {
+ const data = [
+ {
+ name: '浜х嚎涓�',
+ value: 100
+ },
+ {
+ name: '浜х嚎浜�',
+ value: 200
+ },
+ {
+ name: '浜х嚎涓�',
+ value: 64
+ },
+ {
+ name: '浜х嚎鍥�',
+ value: 44
+ }
+ ]
+ const getSymbolData = (data) => {
+ const arr = []
+ for (var i = 0; i < data.length; i++) {
+ arr.push({
+ value: data[i].value,
+ symbolPosition: 'end'
+ })
+ }
+ return arr
+ }
+
+ const option = {
+ backgroundColor: 'transparent',
+ grid: {
+ top: '0%',
+ bottom: 0,
+ right: '4%',
+ left: -20,
+ containLabel: true
+ },
+ xAxis: {
+ show: false
+ },
+ yAxis: [{
+ triggerEvent: true,
+ show: true,
+ inverse: true,
+ data: data.map(r => r.name),
+ axisLine: {
+ show: false
+ },
+ splitLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+
+ axisLabel: {
+ show: true,
+ interval: 0,
+ color: '#fff',
+ align: 'left',
+ margin: 60,
+ formatter: function(value, index) {
+ return '{title|' + value + '}'
+ },
+ rich: {
+ title: {
+ width: 50,
+ align: 'right',
+ fontSize: 18
+ }
+ }
+ }
+ }, {
+ triggerEvent: true,
+ show: true,
+ inverse: true,
+ data: data.map(r => r.name),
+ axisLine: {
+ show: false
+ },
+ splitLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ interval: 0,
+ shadowOffsetX: '-20px',
+ color: ['#fff'],
+ align: 'left',
+ verticalAlign: 'center',
+ lineHeight: 40,
+ fontSize: 18,
+ formatter: function(value, index) {
+ return data[index].value + ''
+ }
+
+ }
+ }],
+ series: [
+ {
+ name: 'XXX',
+ type: 'pictorialBar',
+ symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
+ symbolSize: [50, 50],
+ symbolOffset: [20, 0],
+ z: 12,
+ itemStyle: {
+ normal: {
+ color: '#fff'
+ }
+ },
+ data: getSymbolData(data)
+ },
+ {
+ name: '鏉�',
+ type: 'bar',
+ showBackground: true,
+ // barBorderRadius: 30,
+ yAxisIndex: 0,
+ data: data,
+ barWidth: 10,
+ // align: left,
+ itemStyle: {
+ normal: {
+ color: 'rgba(41, 162, 245, 1)',
+ barBorderRadius: 10
+ }
+ // color: '#A71A2B',
+ // barBorderRadius: 4,
+ }
+ // label: {
+ // normal: {
+ // color: '#fff',
+ // show: true,
+ // position: ["-80px", 0],
+ // textStyle: {
+ // fontSize: 16
+ // },
+ // formatter: function(a, b) {
+ // return a.name
+ // }
+ // }
+ // }
+ }]
+ }
+
+ return option
+}
+
+// 杞﹂棿璐ㄩ噺鍙充笅 鍛ㄤ笉鑹�
+export function pie02() {
+ const bgColor = 'transparent'
+ const title = '鎬讳笉鑹暟'
+ const color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0']
+ const echartData = [
+ {
+ name: '浜х嚎涓�',
+ value: '456'
+ },
+ {
+ name: '浜х嚎浜�',
+ value: '123'
+ },
+ {
+ name: '浜х嚎涓�',
+ value: '312'
+ },
+ {
+ name: '浜х嚎鍥�',
+ value: '222'
+ }
+ ]
+
+ const formatNumber = function(num) {
+ const reg = /(?=(\B)(\d{3})+$)/g
+ return num.toString().replace(reg, ',')
+ }
+ const total = echartData.reduce((a, b) => {
+ return a + b.value * 1
+ }, 0)
+
+ const option = {
+ backgroundColor: bgColor,
+ color: color,
+ // tooltip: {
+ // trigger: 'item'
+ // },
+ title: [{
+ text: '{name|' + title + '}\n{val|' + formatNumber(total) + '}',
+ top: 'center',
+ left: 'center',
+ textStyle: {
+ rich: {
+ name: {
+ fontSize: 18,
+ fontWeight: 'normal',
+ color: '#fff',
+ padding: [10, 0]
+ },
+ val: {
+ fontSize: 32,
+ fontWeight: 'bold',
+ color: '#fff'
+ }
+ }
+ }
+ }
+ // {
+ // text: '鍗曚綅锛氫釜',
+ // top: 20,
+ // left: 20,
+ // textStyle: {
+ // fontSize: 14,
+ // color: '#666666',
+ // fontWeight: 400
+ // }
+ // }
+ ],
+ // legend: {
+ // orient: 'vertical',
+ // icon: 'rect',
+ // x: '80%',
+ // y: 'center',
+ // itemWidth: 12,
+ // itemHeight: 12,
+ // align: 'left',
+ // textStyle: {
+ // rich: {
+ // name: {
+ // fontSize: 12
+ // },
+ // value: {
+ // fontSize: 16,
+ // padding: [0, 5, 0, 15]
+ // },
+ // unit: {
+ // fontSize: 12
+ // }
+ // }
+ // },
+ // formatter: function(name) {
+ // let res = echartData.filter(v => v.name === name);
+ // res = res[0] || {};
+ // let unit = res.unit || '';
+ // return '{name|' + name + '} {value|' + res.value + '}{unit|' + unit + '}'
+ // }
+ // // data: legendName
+ // },
+ series: [
+ {
+ type: 'pie',
+ radius: ['35%', '50%'],
+ center: ['50%', '50%'],
+ data: echartData,
+ hoverAnimation: false,
+ itemStyle: {
+ normal: {
+ borderColor: bgColor,
+ borderWidth: 2
+ }
+ },
+ labelLine: {
+ normal: {
+ // showAbove: false,
+ length: 20,
+ length2: 45,
+ lineStyle: {
+ color: '#fff'
+ }
+ }
+ },
+ label: {
+ normal: {
+ formatter: params => {
+ return (
+ '{icon|鈼弣{name|' + params.name + '}{value|' +
+ formatNumber(params.value) + '}'
+ )
+ },
+ padding: [0, -50, 25, -50],
+ rich: {
+ icon: {
+ fontSize: 16,
+ color: 'red'
+ },
+ name: {
+ fontSize: 16,
+ padding: [0, 10, 0, 4],
+ color: '#fff'
+ },
+ value: {
+ fontSize: 18,
+ fontWeight: 'bold',
+ color: '#fff'
+ }
+ }
+ }
+ }
+ }]
+ }
+ return option
+}
diff --git a/src/views/kb/bzcj.vue b/src/views/kb/bzcj.vue
deleted file mode 100644
index 3744682..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="planstartdate"
- label="棰勮寮�濮�"
- width="115"
- >
- <template slot-scope="{row}">
- <div>{{ row.planstartdate.substring(0, 10) }}</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="planenddate"
- label="棰勮缁撴潫"
- width="125"
- >
- <template slot-scope="{row}">
- <div>{{ row.planenddate.substring(0, 10) }}</div>
- </template>
- </el-table-column>
- </el-table>
- </div>
- </div>
- </div>
- </div>
- <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
deleted file mode 100644
index 3c48a08..0000000
--- a/src/views/kb/cgdd.vue
+++ /dev/null
@@ -1,594 +0,0 @@
-<template>
- <div>
- <div class="kb_dashboard">
- <div class="kb_header">
- <div class="flex_c_c" style="letter-spacing: 3px;margin-left: 1px;">
- 閲囪喘璺熻釜鐪嬫澘
- </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>
- <div class="content01">
- <div class="pic01" />
- <div class="number">{{ purchaseLeftTopData.ThisMonthPurchaseOrderCont }}</div>
- <div class="text">鏈湀鍒拌揣鍗曟暟</div>
- </div>
- <div class="content01">
- <div class="pic01" />
- <div class="number">{{ purchaseLeftTopData.ThisMonthWareHouseOrderCont }}</div>
- <div class="text">鏈湀閲囪喘鍏ュ簱鍗曟暟</div>
- <!-- <div id="pie01" ref="pie01" class="pie01" />-->
- <!-- <div class="text" style="margin-top: -10px">褰撴湀寤舵湡鍗犳瘮</div>-->
- </div>
-
- </div>
- </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">
- <el-table
- ref="tableData"
- :data="tableData"
- style="width: 100%;"
- :header-cell-style="headerCellStyle"
- :cell-style="cellStyle"
- height="588"
- >
- <!-- <el-table-column-->
- <!-- prop="RowNum"-->
- <!-- label="搴忓彿"-->
- <!-- width="53"-->
- <!-- />-->
-
- <el-table-column
- prop="PurchaseOrder"
- label="閲囪喘璁㈠崟"
- width="203"
- >
- <template slot-scope="{row}">
- <div class="ellipsis">{{ row.PurchaseOrder }}</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="suppername"
- label="渚涘簲鍟�"
- width="163"
- >
- <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="partcode"-->
- <!-- label="浜у搧缂栫爜"-->
- <!-- width="108"-->
- <!-- />-->
- <el-table-column
- prop="partname"
- label="浜у搧鍚嶇О"
- width="175"
- >
- <template slot-scope="{row}">
- <div v-if="row.partname" class="ellipsis">{{ row.partname }}</div>
- <div v-else />
- </template>
- </el-table-column>
- <!-- <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="quantity"
- label="璁㈠崟鏁伴噺"
- width="94"
- >
- <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="quantity1"
- label="宸叉敹鏁伴噺"
- width="94"
- >
- <template slot-scope="{row}">
- <div v-if="row.quantity1">{{ parseFloat(row.quantity1) }}</div>
- <div v-else>0</div>
- </template>
- </el-table-column>
- <el-table-column
- label="鏈敹鏁伴噺"
- width="94"
- >
- <template slot-scope="{row}">
- <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"
- >
- <template slot-scope="{row}">
- <div v-if="row.acceptDate">{{ row.acceptDate.substring(0, 10) }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="warning"
- label="寤舵湡澶╂暟"
- width="114"
- >
- <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>
- </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"
- style="width: 100%;"
- :header-cell-style="headerCellStyle"
- :cell-style="cellStyle"
- :row-class-name="tableRowClassName"
- height="865"
- >
- <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>
- </div>
- </div>
-
- </div>
- </div>
- </div>
- </div>
-</template>
-
-<script>
-import './kbCommon.css'
-import { bar02, loadEcharts, pie01 } from '@/utils/myEcharts'
-import * as echarts from 'echarts'
-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: [],
- tableData: [],
- tableDataRank: [],
-
- number1: '',
-
- MarqueeTipsContent: '', // 鍏憡
- speed: 100, // 鍏憡鎾斁鐨勯�熷害
-
- PurchaseLeftTop: null,
- PurchaseLeftBottom: null,
- PurchaseRight: 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.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('缃戠粶鎺夌嚎锛岃鍏虫敞缃戠粶鐘舵�侊紒')
- }
- }
- },
-
- // 鑾峰彇鍏憡
- 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
- },
- getPurchaseLeftTop() {
- PurchaseLeftTop().then(res => {
- this.purchaseLeftTopData = res.data[0]
- // console.log(this.purchaseLeftTopData)
- })
- this.PurchaseLeftTop = setInterval(() => {
- PurchaseLeftTop().then(res => {
- this.purchaseLeftTopData = res.data[0]
- })
- }, 1000 * 6)
- },
- getPurchaseLeftBottom() {
- PurchaseLeftBottom().then(res => {
- this.tableData = res.data
- this.number1 = this.tableData.length
-
- const divData = this.$refs.tableData.bodyWrapper
- // 鎷垮埌鍏冪礌鍚庯紝瀵瑰厓绱犺繘琛屽畾鏃跺鍔犺窛绂婚《閮ㄨ窛绂伙紝瀹炵幇婊氬姩鏁堟灉(姝ら厤缃负姣�100姣绉诲姩1鍍忕礌)
- this.PurchaseLeftBottom = setInterval(() => {
- // 鍏冪礌鑷璺濈椤堕儴1鍍忕礌
- divData.scrollTop += 1
- // 鍒ゆ柇鍏冪礌鏄惁婊氬姩鍒板簳閮�(鍙楂樺害+璺濈椤堕儴=鏁翠釜楂樺害)
- if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
- // 閲嶇疆table璺濈椤堕儴璺濈
- divData.scrollTop = 0
- PurchaseLeftBottom().then(res => {
- this.tableData = res.data
- this.number1 = this.tableData.length
- if (this.tableData.length > 14) {
- clearInterval(this.PurchaseLeftBottom)
- this.getPurchaseLeftBottom()
- }
- })
- }
- }, this.tableData.length <= 14 ? 1000 * 3 : 100)
- })
- },
- getPurchaseRight() {
- PurchaseRight().then(res => {
- this.tableDataRank = res.data
- const divData = this.$refs.tableDataRank.bodyWrapper
- // 鎷垮埌鍏冪礌鍚庯紝瀵瑰厓绱犺繘琛屽畾鏃跺鍔犺窛绂婚《閮ㄨ窛绂伙紝瀹炵幇婊氬姩鏁堟灉(姝ら厤缃负姣�100姣绉诲姩1鍍忕礌)
- this.PurchaseRight = setInterval(() => {
- // 鍏冪礌鑷璺濈椤堕儴1鍍忕礌
- divData.scrollTop += 1
- // 鍒ゆ柇鍏冪礌鏄惁婊氬姩鍒板簳閮�(鍙楂樺害+璺濈椤堕儴=鏁翠釜楂樺害)
- if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
- // 閲嶇疆table璺濈椤堕儴璺濈
- divData.scrollTop = 0
- PurchaseRight().then(res => {
- this.tableDataRank = res.data
- if (this.tableDataRank.length > 21) {
- clearInterval(this.PurchaseRight)
- this.getPurchaseRight()
- }
- })
- }
- }, 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() {
- 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: #09d8f2;
-$kbBorderColor: rgba(9,216,242,0.4);
-
-.kb_content {
- display: flex;
- position: relative;
- height: 990px;
- width: 100%;
- background-color: #000;
- letter-spacing: 2px;
-
- .kb_left {
- width: 1345px;
- height: 100%;
- padding-left: 5px;
-
- .kb_left_top {
- height: 345px;
- display: flex;
- flex-direction: column;
- //justify-content: space-around;
- justify-content: flex-end;
-
- .kb_left_top_block {
- width: 100%;
- height: 237px;
- display: flex;
- //border: 1px solid rgba(255, 255, 255, 0.6);
- justify-content: space-around;
- background-color: rgba(30, 33, 46,0.6);
-
- .content01 {
- margin: auto;
- position: relative;
- width: 202px;
- text-align: center;
-
- .pic01 {
- height: 145px;
- background: url("../../assets/images/pic01.png");
- }
-
- //.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;
- }
- }
- }
-
- }
-}
-
-::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;
-}
-
-</style>
diff --git a/src/views/kb/cjsc.vue b/src/views/kb/cjsc.vue
new file mode 100644
index 0000000..07e9586
--- /dev/null
+++ b/src/views/kb/cjsc.vue
@@ -0,0 +1,791 @@
+<template>
+ <div>
+ <div class="kb_dashboard">
+ <div class="kb_header">
+ <div class="flex_c_c kb_header_text">
+ <div id="topBarLeft" style="width:600px;height:100%" />
+ 杞﹂棿鐢熶骇鏁板瓧鍖栫湅鏉�
+ <div id="topBarRight" style="width:600px;height:100%;transform:rotate(180deg);" />
+ </div>
+ <div class="kb_headTime">
+ <span>{{ headTime }}</span>
+ </div>
+ </div>
+ <div style="display: flex;justify-content: space-between;padding:0 20px 20px 20px">
+ <div style="width: 380px;height: 969px;" class="flex_c_b">
+ <div>
+ <div class="smallTitle">
+ <svg-icon icon-class="cxmc" class="svg_class" />
+ 瑁呴厤涓�绾�
+ </div>
+ <div class="lineContent horn">
+ <el-table
+ ref="tableDataLeftTopRef"
+ :data="tableDataLeftTop"
+ class="tableData"
+ style="width: 100%;"
+ :header-cell-style="headerCellStyle"
+ :cell-style="cellStyle"
+ height="428"
+ >
+ <el-table-column
+ prop="xsdd"
+ label="閿�鍞崟鍙�"
+ width="141"
+ />
+
+ <el-table-column
+ prop="cpmc"
+ width="133"
+ label="浜у搧鍚嶇О"
+ />
+ <el-table-column
+ prop="sl"
+ label="鏁伴噺"
+ width="100"
+ />
+ </el-table>
+ </div>
+ </div>
+ <div>
+ <div class="smallTitle">
+ <svg-icon icon-class="cxmc" class="svg_class" />
+ 瑁呴厤浜岀嚎
+ </div>
+ <div class="lineContent horn">
+ <el-table
+ ref="tableDataLeftTopRef"
+ :data="tableDataLeftTop"
+ class="tableData"
+ style="width: 100%;"
+ :header-cell-style="headerCellStyle"
+ :cell-style="cellStyle"
+ height="428"
+ >
+ <el-table-column
+ prop="xsdd"
+ label="閿�鍞崟鍙�"
+ width="141"
+ />
+
+ <el-table-column
+ prop="cpmc"
+ width="133"
+ label="浜у搧鍚嶇О"
+ />
+ <el-table-column
+ prop="sl"
+ label="鏁伴噺"
+ width="100"
+ />
+ </el-table>
+ </div>
+
+ </div>
+ </div>
+ <div>
+ <div class="smallTitle">
+ <svg-icon icon-class="scxx" class="svg_class" />
+ 鐢熶骇淇℃伅
+ </div>
+ <div class="lineContentCenter horn">
+ <el-table
+ ref="tableDataLeftCenterRef"
+ :data="tableDataCenterTop"
+ class="tableData"
+ style="width: 100%;"
+ :header-cell-style="headerCellStyleCenter"
+ :cell-style="cellStyleCenter"
+ height="927"
+ >
+ <el-table-column
+ prop="xh"
+ label="搴忓彿"
+ width="50"
+ >
+ <template slot-scope="{row}">
+ <div
+ :style="{color:row.cxmc==='瑁呴厤涓�绾�'?'#ffff00':row.cxmc==='瑁呴厤浜岀嚎'?'#FF3333':row.cxmc==='瑁呴厤涓夌嚎'?'#FF00FF':'#00FFFF'}"
+ > {{ row.xh }}
+ </div>
+ </template>
+ </el-table-column>
+ <el-table-column
+ prop="jgdh"
+ label="鍔犲伐鍗曞彿"
+ width="150"
+ >
+ <template slot-scope="{row}">
+ <div
+ :style="{color:row.cxmc==='瑁呴厤涓�绾�'?'#ffff00':row.cxmc==='瑁呴厤浜岀嚎'?'#FF3333':row.cxmc==='瑁呴厤涓夌嚎'?'#FF00FF':'#00FFFF'}"
+ > {{ row.jgdh }}
+ </div>
+ </template>
+ </el-table-column>
+ <el-table-column
+ prop="cxmc"
+ width="130"
+ label="浜х嚎鍚嶇О"
+ >
+ <template slot-scope="{row}">
+ <div
+ :style="{color:row.cxmc==='瑁呴厤涓�绾�'?'#ffff00':row.cxmc==='瑁呴厤浜岀嚎'?'#FF3333':row.cxmc==='瑁呴厤涓夌嚎'?'#FF00FF':'#00FFFF'}"
+ > {{ row.cxmc }}
+ </div>
+ </template>
+ </el-table-column>
+ <el-table-column
+ prop="cpmc"
+ width="150"
+ label="浜у搧鍚嶇О"
+ >
+ <template slot-scope="{row}">
+ <div
+ :style="{color:row.cxmc==='瑁呴厤涓�绾�'?'#ffff00':row.cxmc==='瑁呴厤浜岀嚎'?'#FF3333':row.cxmc==='瑁呴厤涓夌嚎'?'#FF00FF':'#00FFFF'}"
+ > {{ row.cpmc }}
+ </div>
+ </template>
+ </el-table-column>
+ <el-table-column
+ prop="scsl"
+ label="鐢熶骇鏁伴噺"
+ width="100"
+ >
+ <template slot-scope="{row}">
+ <div
+ :style="{color:row.cxmc==='瑁呴厤涓�绾�'?'#ffff00':row.cxmc==='瑁呴厤浜岀嚎'?'#FF3333':row.cxmc==='瑁呴厤涓夌嚎'?'#FF00FF':'#00FFFF'}"
+ > {{ row.scsl }}
+ </div>
+ </template>
+ </el-table-column>
+ <el-table-column
+ prop="yjks"
+ label="棰勮寮�濮�"
+ width="150"
+ >
+ <template slot-scope="{row}">
+ <div
+ :style="{color:row.cxmc==='瑁呴厤涓�绾�'?'#ffff00':row.cxmc==='瑁呴厤浜岀嚎'?'#FF3333':row.cxmc==='瑁呴厤涓夌嚎'?'#FF00FF':'#00FFFF'}"
+ > {{ row.yjks }}
+ </div>
+ </template>
+ </el-table-column>
+ <el-table-column
+ prop="yjwg"
+ label="棰勮瀹屽伐"
+ width="150"
+ >
+ <template slot-scope="{row}">
+ <div
+ :style="{color:row.cxmc==='瑁呴厤涓�绾�'?'#ffff00':row.cxmc==='瑁呴厤浜岀嚎'?'#FF3333':row.cxmc==='瑁呴厤涓夌嚎'?'#FF00FF':'#00FFFF'}"
+ > {{ row.yjwg }}
+ </div>
+ </template>
+ </el-table-column>
+ <el-table-column
+ prop="gx"
+ label="宸ュ簭"
+ width="90"
+ >
+ <template slot-scope="{row}">
+ <div
+ :style="{color:row.cxmc==='瑁呴厤涓�绾�'?'#ffff00':row.cxmc==='瑁呴厤浜岀嚎'?'#FF3333':row.cxmc==='瑁呴厤涓夌嚎'?'#FF00FF':'#00FFFF'}"
+ > {{ row.gx }}
+ </div>
+ </template>
+ </el-table-column>
+ <el-table-column
+ prop="scjd"
+ label="鐢熶骇杩涘害"
+ width="90"
+ >
+ <template slot-scope="{row}">
+ <div
+ :style="{color:row.cxmc==='瑁呴厤涓�绾�'?'#ffff00':row.cxmc==='瑁呴厤浜岀嚎'?'#FF3333':row.cxmc==='瑁呴厤涓夌嚎'?'#FF00FF':'#00FFFF'}"
+ > {{ row.scjd }}
+ </div>
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
+ </div>
+ <div style="width: 380px;height: 969px;" class="flex_c_b">
+ <div>
+ <div class="smallTitle">
+ <svg-icon icon-class="cxmc" class="svg_class" />
+ 瑁呴厤涓夌嚎
+ </div>
+ <div class="lineContent horn">
+ <el-table
+ ref="tableDataLeftTopRef"
+ :data="tableDataLeftTop"
+ class="tableData"
+ style="width: 100%;"
+ :header-cell-style="headerCellStyle"
+ :cell-style="cellStyle"
+ height="428"
+ >
+ <el-table-column
+ prop="xsdd"
+ label="閿�鍞崟鍙�"
+ width="141"
+ />
+
+ <el-table-column
+ prop="cpmc"
+ width="133"
+ label="浜у搧鍚嶇О"
+ />
+ <el-table-column
+ prop="sl"
+ label="鏁伴噺"
+ width="100"
+ />
+ </el-table>
+ </div>
+ </div>
+ <div>
+ <div class="smallTitle">
+ <svg-icon icon-class="cxmc" class="svg_class" />
+ 瑁呴厤鍥涚嚎
+ </div>
+ <div class="lineContent horn">
+ <el-table
+ ref="tableDataLeftTopRef"
+ :data="tableDataLeftTop"
+ class="tableData"
+ style="width: 100%;"
+ :header-cell-style="headerCellStyle"
+ :cell-style="cellStyle"
+ height="428"
+ >
+ <el-table-column
+ prop="xsdd"
+ label="閿�鍞崟鍙�"
+ width="141"
+ />
+
+ <el-table-column
+ prop="cpmc"
+ width="133"
+ label="浜у搧鍚嶇О"
+ />
+ <el-table-column
+ prop="sl"
+ label="鏁伴噺"
+ width="100"
+ />
+ </el-table>
+ </div>
+
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import './kbCommon.css'
+import { kbTop, loadEcharts } from '@/utils/myEcharts'
+
+export default {
+ name: 'Cjsc',
+ data() {
+ return {
+ headTime: '',
+ tableDataLeftTop: [],
+ tableDataLeftTopTemp: [
+ { xsdd: 'MO-2022111501', cpmc: '浜у搧鍚嶇О1', sl: '100' },
+ { xsdd: 'MO-2022111502', cpmc: '浜у搧鍚嶇О2', sl: '100' },
+ { xsdd: 'MO-2022111503', cpmc: '浜у搧鍚嶇О3', sl: '100' },
+ { xsdd: 'MO-2022111504', cpmc: '浜у搧鍚嶇О4', sl: '100' },
+ { xsdd: 'MO-2022111505', cpmc: '浜у搧鍚嶇О5', sl: '100' },
+ { xsdd: 'MO-2022111506', cpmc: '浜у搧鍚嶇О6', sl: '100' },
+ { xsdd: 'MO-2022111507', cpmc: '浜у搧鍚嶇О7', sl: '100' },
+ { xsdd: 'MO-2022111508', cpmc: '浜у搧鍚嶇О8', sl: '100' },
+ { xsdd: 'MO-2022111509', cpmc: '浜у搧鍚嶇О9', sl: '100' },
+ { xsdd: 'MO-2022111510', cpmc: '浜у搧鍚嶇О10', sl: '100' },
+ { xsdd: 'MO-2022111511', cpmc: '浜у搧鍚嶇О11', sl: '100' },
+ { xsdd: 'MO-2022111512', cpmc: '浜у搧鍚嶇О12', sl: '100' },
+ { xsdd: 'MO-2022111513', cpmc: '浜у搧鍚嶇О13', sl: '100' },
+ { xsdd: 'MO-2022111514', cpmc: '浜у搧鍚嶇О14', sl: '100' },
+ { xsdd: 'MO-2022111515', cpmc: '浜у搧鍚嶇О15', sl: '100' },
+ { xsdd: 'MO-2022111516', cpmc: '浜у搧鍚嶇О16', sl: '100' },
+ { xsdd: 'MO-2022111517', cpmc: '浜у搧鍚嶇О17', sl: '100' },
+ { xsdd: 'MO-2022111518', cpmc: '浜у搧鍚嶇О18', sl: '100' },
+ { xsdd: 'MO-2022111519', cpmc: '浜у搧鍚嶇О19', sl: '100' },
+ { xsdd: 'MO-2022111520', cpmc: '浜у搧鍚嶇О20', sl: '100' },
+ { xsdd: 'MO-2022111521', cpmc: '浜у搧鍚嶇О21', sl: '100' },
+ { xsdd: 'MO-2022111522', cpmc: '浜у搧鍚嶇О22', sl: '100' },
+ { xsdd: 'MO-2022111523', cpmc: '浜у搧鍚嶇О23', sl: '100' },
+ { xsdd: 'MO-2022111524', cpmc: '浜у搧鍚嶇О24', sl: '100' }
+ ],
+ tableDataCenterTop: [],
+ tableDataCenterTopTemp: [
+ {
+ xh: 1,
+ jgdh: 'MO-2022-1115-01',
+ cxmc: '瑁呴厤涓�绾�',
+ cpmc: '浜у搧鍚嶇О1',
+ scsl: '100',
+ yjks: '2022-10-01',
+ yjwg: '2022-10-10',
+ gx: '宸ュ簭涓�',
+ scjd: '10/20'
+ },
+ {
+ xh: 2,
+ jgdh: 'MO-2022-1115-01',
+ cxmc: '瑁呴厤浜岀嚎',
+ cpmc: '浜у搧鍚嶇О1',
+ scsl: '100',
+ yjks: '2022-10-01',
+ yjwg: '2022-10-10',
+ gx: '宸ュ簭涓�',
+ scjd: '10/20'
+ },
+ {
+ xh: 3,
+ jgdh: 'MO-2022-1115-01',
+ cxmc: '瑁呴厤涓夌嚎',
+ cpmc: '浜у搧鍚嶇О1',
+ scsl: '100',
+ yjks: '2022-10-01',
+ yjwg: '2022-10-10',
+ gx: '宸ュ簭涓�',
+ scjd: '10/20'
+ },
+ {
+ xh: 4,
+ jgdh: 'MO-2022-1115-01',
+ cxmc: '瑁呴厤鍥涚嚎',
+ cpmc: '浜у搧鍚嶇О1',
+ scsl: '100',
+ yjks: '2022-10-01',
+ yjwg: '2022-10-10',
+ gx: '宸ュ簭涓�',
+ scjd: '10/20'
+ },
+ {
+ xh: 5,
+ jgdh: 'MO-2022-1115-01',
+ cxmc: '瑁呴厤涓�绾�',
+ cpmc: '浜у搧鍚嶇О1',
+ scsl: '100',
+ yjks: '2022-10-01',
+ yjwg: '2022-10-10',
+ gx: '宸ュ簭涓�',
+ scjd: '10/20'
+ },
+ {
+ xh: 6,
+ jgdh: 'MO-2022-1115-01',
+ cxmc: '瑁呴厤涓�绾�',
+ cpmc: '浜у搧鍚嶇О1',
+ scsl: '100',
+ yjks: '2022-10-01',
+ yjwg: '2022-10-10',
+ gx: '宸ュ簭涓�',
+ scjd: '10/20'
+ },
+ {
+ xh: 7,
+ jgdh: 'MO-2022-1115-01',
+ cxmc: '瑁呴厤涓�绾�',
+ cpmc: '浜у搧鍚嶇О1',
+ scsl: '100',
+ yjks: '2022-10-01',
+ yjwg: '2022-10-10',
+ gx: '宸ュ簭涓�',
+ scjd: '10/20'
+ },
+ {
+ xh: 8,
+ jgdh: 'MO-2022-1115-01',
+ cxmc: '瑁呴厤涓�绾�',
+ cpmc: '浜у搧鍚嶇О1',
+ scsl: '100',
+ yjks: '2022-10-01',
+ yjwg: '2022-10-10',
+ gx: '宸ュ簭涓�',
+ scjd: '10/20'
+ },
+ {
+ xh: 9,
+ jgdh: 'MO-2022-1115-01',
+ cxmc: '瑁呴厤浜岀嚎',
+ cpmc: '浜у搧鍚嶇О1',
+ scsl: '100',
+ yjks: '2022-10-01',
+ yjwg: '2022-10-10',
+ gx: '宸ュ簭涓�',
+ scjd: '10/20'
+ },
+ {
+ xh: 10,
+ jgdh: 'MO-2022-1115-01',
+ cxmc: '瑁呴厤浜岀嚎',
+ cpmc: '浜у搧鍚嶇О1',
+ scsl: '100',
+ yjks: '2022-10-01',
+ yjwg: '2022-10-10',
+ gx: '宸ュ簭涓�',
+ scjd: '10/20'
+ },
+ {
+ xh: 11,
+ jgdh: 'MO-2022-1115-01',
+ cxmc: '瑁呴厤涓夌嚎',
+ cpmc: '浜у搧鍚嶇О1',
+ scsl: '100',
+ yjks: '2022-10-01',
+ yjwg: '2022-10-10',
+ gx: '宸ュ簭涓�',
+ scjd: '10/20'
+ },
+ {
+ xh: 12,
+ jgdh: 'MO-2022-1115-01',
+ cxmc: '瑁呴厤涓夌嚎',
+ cpmc: '浜у搧鍚嶇О1',
+ scsl: '100',
+ yjks: '2022-10-01',
+ yjwg: '2022-10-10',
+ gx: '宸ュ簭涓�',
+ scjd: '10/20'
+ },
+ {
+ xh: 13,
+ jgdh: 'MO-2022-1115-01',
+ cxmc: '瑁呴厤涓�绾�',
+ cpmc: '浜у搧鍚嶇О1',
+ scsl: '100',
+ yjks: '2022-10-01',
+ yjwg: '2022-10-10',
+ gx: '宸ュ簭涓�',
+ scjd: '10/20'
+ },
+ {
+ xh: 14,
+ jgdh: 'MO-2022-1115-01',
+ cxmc: '瑁呴厤涓�绾�',
+ cpmc: '浜у搧鍚嶇О1',
+ scsl: '100',
+ yjks: '2022-10-01',
+ yjwg: '2022-10-10',
+ gx: '宸ュ簭涓�',
+ scjd: '10/20'
+ },
+ {
+ xh: 15,
+ jgdh: 'MO-2022-1115-01',
+ cxmc: '瑁呴厤涓�绾�',
+ cpmc: '浜у搧鍚嶇О1',
+ scsl: '100',
+ yjks: '2022-10-01',
+ yjwg: '2022-10-10',
+ gx: '宸ュ簭涓�',
+ scjd: '10/20'
+ },
+ {
+ xh: 16,
+ jgdh: 'MO-2022-1115-01',
+ cxmc: '瑁呴厤鍥涚嚎',
+ cpmc: '浜у搧鍚嶇О1',
+ scsl: '100',
+ yjks: '2022-10-01',
+ yjwg: '2022-10-10',
+ gx: '宸ュ簭涓�',
+ scjd: '10/20'
+ },
+ {
+ xh: 17,
+ jgdh: 'MO-2022-1115-01',
+ cxmc: '瑁呴厤鍥涚嚎',
+ cpmc: '浜у搧鍚嶇О1',
+ scsl: '100',
+ yjks: '2022-10-01',
+ yjwg: '2022-10-10',
+ gx: '宸ュ簭涓�',
+ scjd: '10/20'
+ },
+ {
+ xh: 18,
+ jgdh: 'MO-2022-1115-01',
+ cxmc: '瑁呴厤鍥涚嚎',
+ cpmc: '浜у搧鍚嶇О1',
+ scsl: '100',
+ yjks: '2022-10-01',
+ yjwg: '2022-10-10',
+ gx: '宸ュ簭涓�',
+ scjd: '10/20'
+ },
+ {
+ xh: 19,
+ jgdh: 'MO-2022-1115-01',
+ cxmc: '瑁呴厤鍥涚嚎',
+ cpmc: '浜у搧鍚嶇О1',
+ scsl: '100',
+ yjks: '2022-10-01',
+ yjwg: '2022-10-10',
+ gx: '宸ュ簭涓�',
+ scjd: '10/20'
+ },
+ {
+ xh: 20,
+ jgdh: 'MO-2022-1115-01',
+ cxmc: '瑁呴厤鍥涚嚎',
+ cpmc: '浜у搧鍚嶇О1',
+ scsl: '100',
+ yjks: '2022-10-01',
+ yjwg: '2022-10-10',
+ gx: '宸ュ簭涓�',
+ scjd: '10/20'
+ },
+ {
+ xh: 21,
+ jgdh: 'MO-2022-1115-01',
+ cxmc: '瑁呴厤鍥涚嚎',
+ cpmc: '浜у搧鍚嶇О1',
+ scsl: '100',
+ yjks: '2022-10-01',
+ yjwg: '2022-10-10',
+ gx: '宸ュ簭涓�',
+ scjd: '10/20'
+ },
+ {
+ xh: 22,
+ jgdh: 'MO-2022-1115-01',
+ cxmc: '瑁呴厤涓�绾�',
+ cpmc: '浜у搧鍚嶇О1',
+ scsl: '100',
+ yjks: '2022-10-01',
+ yjwg: '2022-10-10',
+ gx: '宸ュ簭涓�',
+ scjd: '10/20'
+ },
+ {
+ xh: 23,
+ jgdh: 'MO-2022-1115-01',
+ cxmc: '瑁呴厤涓�绾�',
+ cpmc: '浜у搧鍚嶇О1',
+ scsl: '100',
+ yjks: '2022-10-01',
+ yjwg: '2022-10-10',
+ gx: '宸ュ簭涓�',
+ scjd: '10/20'
+ },
+ {
+ xh: 24,
+ jgdh: 'MO-2022-1115-01',
+ cxmc: '瑁呴厤涓夌嚎',
+ cpmc: '浜у搧鍚嶇О1',
+ scsl: '100',
+ yjks: '2022-10-01',
+ yjwg: '2022-10-10',
+ gx: '宸ュ簭涓�',
+ scjd: '10/20'
+ },
+ {
+ xh: 25,
+ jgdh: 'MO-2022-1115-01',
+ cxmc: '瑁呴厤浜岀嚎',
+ cpmc: '浜у搧鍚嶇О1',
+ scsl: '100',
+ yjks: '2022-10-01',
+ yjwg: '2022-10-10',
+ gx: '宸ュ簭涓�',
+ scjd: '10/20'
+ },
+ {
+ xh: 26,
+ jgdh: 'MO-2022-1115-01',
+ cxmc: '瑁呴厤涓夌嚎',
+ cpmc: '浜у搧鍚嶇О1',
+ scsl: '100',
+ yjks: '2022-10-01',
+ yjwg: '2022-10-10',
+ gx: '宸ュ簭涓�',
+ scjd: '10/20'
+ },
+ {
+ xh: 27,
+ jgdh: 'MO-2022-1115-01',
+ cxmc: '瑁呴厤鍥涚嚎',
+ cpmc: '浜у搧鍚嶇О1',
+ scsl: '100',
+ yjks: '2022-10-01',
+ yjwg: '2022-10-10',
+ gx: '宸ュ簭涓�',
+ scjd: '10/20'
+ }
+ ]
+ }
+ },
+ created() {
+ setInterval(this.getNowTime, 1000)
+
+ // 涓ゅ皬鏃剁湅鏉垮埛鏂颁竴娆�
+ setInterval(() => {
+ window.location.reload()
+ }, 1000 * 60 * 120)
+ },
+ mounted() {
+ this.getTopBar()
+ this.getTableDataSetInterval()
+ this.getCenterTableDataSetInterval()
+ },
+ methods: {
+ // 涓棿閮ㄥ垎鐨勮〃鏍�
+ getCenterTableDataSetInterval() {
+ let startValue = 0 // 鍒濆鍊�
+ const scale = 23// 鍒诲害
+
+ this.tableDataCenterTop = this.tableDataCenterTopTemp.slice(startValue, startValue + scale)
+
+ const loop = Math.floor(this.tableDataCenterTopTemp.length / scale)// 闇�瑕佸惊鐜殑娆℃暟
+ let nowLoop = 0// 褰撳墠寰幆鐨勬鏁�
+
+ setInterval(() => {
+ startValue = startValue + scale
+ this.tableDataCenterTop = this.tableDataCenterTopTemp.slice(startValue, startValue + scale)
+ if (nowLoop === loop) {
+ this.getCenterTableDataSetInterval()
+ }
+
+ nowLoop++
+ }, 5000)
+ },
+
+ // 瀹氭椂鍒锋柊琛ㄦ牸鏁版嵁
+ getTableDataSetInterval() {
+ let startValue = 0 // 鍒濆鍊�
+ const scale = 10// 鍒诲害
+
+ this.tableDataLeftTop = this.tableDataLeftTopTemp.slice(startValue, startValue + scale)
+
+ const loop = Math.floor(this.tableDataLeftTopTemp.length / scale)// 闇�瑕佸惊鐜殑娆℃暟
+ let nowLoop = 0// 褰撳墠寰幆鐨勬鏁�
+
+ setInterval(() => {
+ startValue = startValue + scale
+ this.tableDataLeftTop = this.tableDataLeftTopTemp.slice(startValue, startValue + scale)
+ if (nowLoop === loop) {
+ this.getTableDataSetInterval()
+ }
+ nowLoop++
+ }, 5000)
+ },
+
+ // 鑾峰彇topEcharts
+ getTopBar() {
+ loadEcharts('topBarLeft', kbTop())
+ loadEcharts('topBarRight', kbTop())
+ },
+ // 鑾峰彇褰撳墠鏃堕棿
+ getNowTime() {
+ const dt = new Date()
+ const wk = dt.getDay()
+ const y = dt.getFullYear()
+ const m = (dt.getMonth() + 1 + '').padStart(2, '0')
+ const d = (dt.getDate() + '').padStart(2, '0')
+
+ const hh = (dt.getHours() + '').padStart(2, '0')
+ const mm = (dt.getMinutes() + '').padStart(2, '0')
+ const ss = (dt.getSeconds() + '').padStart(2, '0')
+ const weeks = ['鏄熸湡鏃�', '鏄熸湡涓�', '鏄熸湡浜�', '鏄熸湡涓�', '鏄熸湡鍥�', '鏄熸湡浜�', '鏄熸湡鍏�']
+ const week = weeks[wk]
+
+ this.headTime = `${y}-${m}-${d} ${hh}:${mm}:${ss} ${week}`
+ },
+ headerCellStyle() {
+ return {
+ // backgroundColor: 'rgb(30 ,33, 46)',
+ backgroundColor: '#000',
+ padding: '10px 0',
+ textAlign: 'center',
+ color: '#07acc2',
+ border: 'none'
+ }
+ },
+ cellStyle() {
+ return {
+ padding: '7px 0',
+ textAlign: 'center',
+ // backgroundColor: 'rgba(30, 33, 46)',
+ backgroundColor: '#000',
+ // backgroundColor: 'transparent',
+ color: '#fff',
+ border: 'none'
+ }
+ },
+ headerCellStyleCenter() {
+ return {
+ // backgroundColor: 'rgb(30 ,33, 46)',
+ backgroundColor: '#000',
+ padding: '10px 0',
+ textAlign: 'center',
+ color: '#07acc2',
+ border: 'none'
+ }
+ },
+ cellStyleCenter() {
+ return {
+ padding: '7.5px 0',
+ textAlign: 'center',
+ backgroundColor: '#000',
+ color: '#fff',
+ border: 'none'
+ }
+ }
+ }
+
+}
+</script>
+
+<style lang="scss" scoped>
+$main_color: #09d8f2;
+$color01: #00FFFF;
+.lineContent {
+ height: 435px;
+ border: 1px solid $main_color;
+ //outline: 1px solid $main_color;
+ border-radius: 5px;
+ padding: 2px;
+}
+
+.lineContentCenter {
+ height: 935px;
+ border: 1px solid $main_color;
+ //outline: 1px solid $main_color;
+ border-radius: 5px;
+ padding: 2px;
+}
+
+.horn {
+ background: linear-gradient($color01, $color01) left top,
+ linear-gradient($color01, $color01) left top,
+ linear-gradient($color01, $color01) right top,
+ linear-gradient($color01, $color01) right top,
+ linear-gradient($color01, $color01) left bottom,
+ linear-gradient($color01, $color01) left bottom,
+ linear-gradient($color01, $color01) right bottom,
+ linear-gradient($color01, $color01) right bottom;
+ background-repeat: no-repeat;
+ //background-size: 5px 20px, 20px 5px;
+ background-size: 2px 20px, 20px 2px;
+}
+
+.tableData {
+ background: #000;
+}
+
+//.el-table::before{
+// height: 0;
+//}
+
+.el-table__empty-text {
+ color: $main_color;
+}
+</style>
diff --git a/src/views/kb/cjzl.vue b/src/views/kb/cjzl.vue
new file mode 100644
index 0000000..126bc2f
--- /dev/null
+++ b/src/views/kb/cjzl.vue
@@ -0,0 +1,394 @@
+<template>
+ <div>
+ <div class="kb_dashboard">
+ <div class="kb_header">
+ <div class="flex_c_c kb_header_text">
+ <div id="topBarLeft" style="width:600px;height:100%" />
+ 杞﹂棿璐ㄩ噺鏁板瓧鍖栫湅鏉�
+ <div id="topBarRight" style="width:600px;height:100%;transform:rotate(180deg);" />
+ </div>
+ <div class="kb_headTime">
+ <span>{{ headTime }}</span>
+ </div>
+ </div>
+ <div style="display: flex;justify-content: space-between;padding:0 20px 20px 20px">
+ <!-- 宸﹁竟閮ㄥ垎-->
+ <div style="width: 480px;height: 969px;" class="flex_c_b">
+ <div>
+ <div class="smallTitle">
+ <svg-icon icon-class="top5" class="svg_class" />
+ Top5涓嶈壇
+ </div>
+ <div class="lineContent horn">
+ <div id="bar01" class="flex_c_c" style="width: 100%;height:100%" />
+ </div>
+ </div>
+ <div>
+ <div class="smallTitle">
+ <svg-icon icon-class="bll" class="svg_class" style="font-size: 30px" />
+ 鍛ㄤ笉鑹秼鍔�
+ </div>
+ <div class="lineContent horn">
+ <div id="line01" class="flex_c_c" style="width: 100%;height:100%" />
+ </div>
+
+ </div>
+ </div>
+ <!-- 涓棿閮ㄥ垎-->
+ <div>
+ <div class="smallTitle">
+ <svg-icon icon-class="blmx" class="svg_class" />
+ 涓嶈壇鏄庣粏
+ </div>
+ <div class="lineContentCenter horn">
+ <el-table
+ ref="tableDataLeftCenterRef"
+ :data="tableDataCenterTop"
+ class="tableData"
+ style="width: 100%;"
+ :header-cell-style="headerCellStyleCenter"
+ :cell-style="cellStyleCenter"
+ height="927"
+ >
+ <el-table-column
+ prop="xh"
+ label="搴忓彿"
+ width="50"
+ />
+ <el-table-column
+ prop="cxmc"
+ width="130"
+ label="浜х嚎鍚嶇О"
+ >
+ <template slot-scope="{row}">
+ <div>{{ row.cxmc }}</div>
+ </template>
+ </el-table-column>
+ <el-table-column
+ prop="jgdh"
+ label="鐢熶骇鍗曞彿"
+ width="150"
+ >
+ <template slot-scope="{row}">
+ <div style="color: #00FFFF">{{ row.jgdh }}</div>
+ </template>
+ </el-table-column>
+
+ <el-table-column
+ prop="cpmc"
+ width="150"
+ label="浜у搧鍚嶇О"
+ />
+ <el-table-column
+ prop="blyy"
+ label="涓嶈壇鍘熷洜"
+ width="150"
+ >
+ <template slot-scope="{row}">
+ <div style="color:#d91010;">{{ row.blyy }}</div>
+ </template>
+ </el-table-column>
+ <el-table-column
+ prop="scsl"
+ label="涓嶈壇鏁伴噺"
+ width="100"
+ />
+ <el-table-column
+ prop="bgsl"
+ label="鎶ュ伐鏁伴噺"
+ width="100"
+ />
+ <!-- <el-table-column-->
+ <!-- prop="yjks"-->
+ <!-- label="棰勮寮�濮�"-->
+ <!-- width="150"-->
+ <!-- />-->
+ <!-- <el-table-column-->
+ <!-- prop="yjwg"-->
+ <!-- label="棰勮瀹屽伐"-->
+ <!-- width="150"-->
+ <!-- />-->
+
+ <!-- <el-table-column-->
+ <!-- prop="scjd"-->
+ <!-- label="鐢熶骇杩涘害"-->
+ <!-- width="90"-->
+ <!-- />-->
+ </el-table>
+ </div>
+ </div>
+ <!-- 鍙宠竟閮ㄥ垎-->
+ <div style="width: 480px;height: 969px;" class="flex_c_b">
+ <div>
+ <div class="smallTitle">
+ <svg-icon icon-class="rbl" class="svg_class" style="font-size: 28px" />
+ 鏃ヤ笉鑹垎甯�
+ </div>
+ <div class="lineContent horn">
+ <div id="bar02" class="flex_c_c" style="width: 100%;height:100%" />
+ </div>
+ </div>
+ <div>
+ <div class="smallTitle">
+ <svg-icon icon-class="zbl" class="svg_class" style="font-size: 28px" />
+ 鍛ㄤ笉鑹垎甯�
+ </div>
+ <div class="lineContent horn">
+ <div id="pie01" class="flex_c_c" style="width: 100%;height:100%" />
+ </div>
+
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import './kbCommon.css'
+import { bar02, bar04, kbTop, line02, loadEcharts, pie02 } from '@/utils/myEcharts'
+
+export default {
+ name: 'Cjsc',
+ data() {
+ return {
+ headTime: '',
+ tableDataLeftTop: [],
+ tableDataLeftTopTemp: [
+ { xsdd: 'MO-2022111501', cpmc: '浜у搧鍚嶇О1', sl: '100' },
+ { xsdd: 'MO-2022111502', cpmc: '浜у搧鍚嶇О2', sl: '100' },
+ { xsdd: 'MO-2022111503', cpmc: '浜у搧鍚嶇О3', sl: '100' },
+ { xsdd: 'MO-2022111504', cpmc: '浜у搧鍚嶇О4', sl: '100' },
+ { xsdd: 'MO-2022111505', cpmc: '浜у搧鍚嶇О5', sl: '100' },
+ { xsdd: 'MO-2022111506', cpmc: '浜у搧鍚嶇О6', sl: '100' },
+ { xsdd: 'MO-2022111507', cpmc: '浜у搧鍚嶇О7', sl: '100' },
+ { xsdd: 'MO-2022111508', cpmc: '浜у搧鍚嶇О8', sl: '100' },
+ { xsdd: 'MO-2022111509', cpmc: '浜у搧鍚嶇О9', sl: '100' },
+ { xsdd: 'MO-2022111510', cpmc: '浜у搧鍚嶇О10', sl: '100' },
+ { xsdd: 'MO-2022111511', cpmc: '浜у搧鍚嶇О11', sl: '100' },
+ { xsdd: 'MO-2022111512', cpmc: '浜у搧鍚嶇О12', sl: '100' },
+ { xsdd: 'MO-2022111513', cpmc: '浜у搧鍚嶇О13', sl: '100' },
+ { xsdd: 'MO-2022111514', cpmc: '浜у搧鍚嶇О14', sl: '100' },
+ { xsdd: 'MO-2022111515', cpmc: '浜у搧鍚嶇О15', sl: '100' },
+ { xsdd: 'MO-2022111516', cpmc: '浜у搧鍚嶇О16', sl: '100' },
+ { xsdd: 'MO-2022111517', cpmc: '浜у搧鍚嶇О17', sl: '100' },
+ { xsdd: 'MO-2022111518', cpmc: '浜у搧鍚嶇О18', sl: '100' },
+ { xsdd: 'MO-2022111519', cpmc: '浜у搧鍚嶇О19', sl: '100' },
+ { xsdd: 'MO-2022111520', cpmc: '浜у搧鍚嶇О20', sl: '100' },
+ { xsdd: 'MO-2022111521', cpmc: '浜у搧鍚嶇О21', sl: '100' },
+ { xsdd: 'MO-2022111522', cpmc: '浜у搧鍚嶇О22', sl: '100' },
+ { xsdd: 'MO-2022111523', cpmc: '浜у搧鍚嶇О23', sl: '100' },
+ { xsdd: 'MO-2022111524', cpmc: '浜у搧鍚嶇О24', sl: '100' }
+ ],
+ tableDataCenterTop: [],
+ tableDataCenterTopTemp: [
+ { xh: 1, bgsl: 200, blyy: '灏哄銆佽壊绯汇�佹瘺鍒�', jgdh: 'MO-2022-1115-01', cxmc: '浜х嚎鍚嶇О1', cpmc: '浜у搧鍚嶇О1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '宸ュ簭涓�', scjd: '10/20' },
+ { xh: 2, bgsl: 200, blyy: '灏哄銆佹瘺鍒�', jgdh: 'MO-2022-1115-01', cxmc: '浜х嚎鍚嶇О1', cpmc: '浜у搧鍚嶇О1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '宸ュ簭涓�', scjd: '10/20' },
+ { xh: 3, bgsl: 200, blyy: '灏哄銆佽壊绯�', jgdh: 'MO-2022-1115-01', cxmc: '浜х嚎鍚嶇О1', cpmc: '浜у搧鍚嶇О1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '宸ュ簭涓�', scjd: '10/20' },
+ { xh: 4, bgsl: 200, blyy: '灏哄銆佹瘺鍒�', jgdh: 'MO-2022-1115-01', cxmc: '浜х嚎鍚嶇О1', cpmc: '浜у搧鍚嶇О1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '宸ュ簭涓�', scjd: '10/20' },
+ { xh: 5, bgsl: 200, blyy: '鑹茬郴銆佹瘺鍒�', jgdh: 'MO-2022-1115-01', cxmc: '浜х嚎鍚嶇О1', cpmc: '浜у搧鍚嶇О1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '宸ュ簭涓�', scjd: '10/20' },
+ { xh: 6, bgsl: 200, blyy: '灏哄銆佽壊绯�', jgdh: 'MO-2022-1115-01', cxmc: '浜х嚎鍚嶇О1', cpmc: '浜у搧鍚嶇О1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '宸ュ簭涓�', scjd: '10/20' },
+ { xh: 7, bgsl: 200, blyy: '灏哄銆佽壊绯汇�佹瘺鍒�', jgdh: 'MO-2022-1115-01', cxmc: '浜х嚎鍚嶇О1', cpmc: '浜у搧鍚嶇О1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '宸ュ簭涓�', scjd: '10/20' },
+ { xh: 8, bgsl: 200, blyy: '灏哄銆佹瘺鍒�', jgdh: 'MO-2022-1115-01', cxmc: '浜х嚎鍚嶇О1', cpmc: '浜у搧鍚嶇О1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '宸ュ簭涓�', scjd: '10/20' },
+ { xh: 9, bgsl: 200, blyy: '灏哄銆佽壊绯汇�佹瘺鍒�', jgdh: 'MO-2022-1115-01', cxmc: '浜х嚎鍚嶇О1', cpmc: '浜у搧鍚嶇О1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '宸ュ簭涓�', scjd: '10/20' },
+ { xh: 10, bgsl: 200, blyy: '姣涘埡', jgdh: 'MO-2022-1115-01', cxmc: '浜х嚎鍚嶇О1', cpmc: '浜у搧鍚嶇О1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '宸ュ簭涓�', scjd: '10/20' },
+ { xh: 11, bgsl: 200, blyy: '灏哄', jgdh: 'MO-2022-1115-01', cxmc: '浜х嚎鍚嶇О1', cpmc: '浜у搧鍚嶇О1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '宸ュ簭涓�', scjd: '10/20' },
+ { xh: 12, bgsl: 200, blyy: '灏哄銆佽壊绯汇�佹瘺鍒�', jgdh: 'MO-2022-1115-01', cxmc: '浜х嚎鍚嶇О1', cpmc: '浜у搧鍚嶇О1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '宸ュ簭涓�', scjd: '10/20' },
+ { xh: 13, bgsl: 200, blyy: '灏哄銆佽壊绯汇�佹瘺鍒�', jgdh: 'MO-2022-1115-01', cxmc: '浜х嚎鍚嶇О1', cpmc: '浜у搧鍚嶇О1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '宸ュ簭涓�', scjd: '10/20' },
+ { xh: 14, bgsl: 200, blyy: '灏哄銆佽壊绯汇�佹瘺鍒�', jgdh: 'MO-2022-1115-01', cxmc: '浜х嚎鍚嶇О1', cpmc: '浜у搧鍚嶇О1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '宸ュ簭涓�', scjd: '10/20' },
+ { xh: 15, bgsl: 200, blyy: '灏哄銆佽壊绯汇�佹瘺鍒�', jgdh: 'MO-2022-1115-01', cxmc: '浜х嚎鍚嶇О1', cpmc: '浜у搧鍚嶇О1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '宸ュ簭涓�', scjd: '10/20' },
+ { xh: 16, bgsl: 200, blyy: '灏哄銆佽壊绯汇�佹瘺鍒�', jgdh: 'MO-2022-1115-01', cxmc: '浜х嚎鍚嶇О1', cpmc: '浜у搧鍚嶇О1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '宸ュ簭涓�', scjd: '10/20' },
+ { xh: 17, bgsl: 200, blyy: '灏哄銆佽壊绯汇�佹瘺鍒�', jgdh: 'MO-2022-1115-01', cxmc: '浜х嚎鍚嶇О1', cpmc: '浜у搧鍚嶇О1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '宸ュ簭涓�', scjd: '10/20' },
+ { xh: 18, bgsl: 200, blyy: '灏哄銆佽壊绯汇�佹瘺鍒�', jgdh: 'MO-2022-1115-01', cxmc: '浜х嚎鍚嶇О1', cpmc: '浜у搧鍚嶇О1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '宸ュ簭涓�', scjd: '10/20' },
+ { xh: 19, bgsl: 200, blyy: '灏哄銆佽壊绯汇�佹瘺鍒�', jgdh: 'MO-2022-1115-01', cxmc: '浜х嚎鍚嶇О1', cpmc: '浜у搧鍚嶇О1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '宸ュ簭涓�', scjd: '10/20' },
+ { xh: 20, bgsl: 200, blyy: '灏哄銆佽壊绯汇�佹瘺鍒�', jgdh: 'MO-2022-1115-01', cxmc: '浜х嚎鍚嶇О1', cpmc: '浜у搧鍚嶇О1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '宸ュ簭涓�', scjd: '10/20' },
+ { xh: 21, bgsl: 200, blyy: '灏哄銆佽壊绯汇�佹瘺鍒�', jgdh: 'MO-2022-1115-01', cxmc: '浜х嚎鍚嶇О1', cpmc: '浜у搧鍚嶇О1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '宸ュ簭涓�', scjd: '10/20' },
+ { xh: 22, bgsl: 200, blyy: '灏哄銆佽壊绯汇�佹瘺鍒�', jgdh: 'MO-2022-1115-01', cxmc: '浜х嚎鍚嶇О1', cpmc: '浜у搧鍚嶇О1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '宸ュ簭涓�', scjd: '10/20' },
+ { xh: 23, bgsl: 200, blyy: '灏哄銆佽壊绯汇�佹瘺鍒�', jgdh: 'MO-2022-1115-01', cxmc: '浜х嚎鍚嶇О1', cpmc: '浜у搧鍚嶇О1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '宸ュ簭涓�', scjd: '10/20' },
+ { xh: 24, bgsl: 200, blyy: '灏哄銆佽壊绯汇�佹瘺鍒�', jgdh: 'MO-2022-1115-01', cxmc: '浜х嚎鍚嶇О1', cpmc: '浜у搧鍚嶇О1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '宸ュ簭涓�', scjd: '10/20' },
+ { xh: 25, bgsl: 200, blyy: '灏哄銆佽壊绯汇�佹瘺鍒�', jgdh: 'MO-2022-1115-01', cxmc: '浜х嚎鍚嶇О1', cpmc: '浜у搧鍚嶇О1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '宸ュ簭涓�', scjd: '10/20' },
+ { xh: 26, bgsl: 200, blyy: '灏哄銆佽壊绯汇�佹瘺鍒�', jgdh: 'MO-2022-1115-01', cxmc: '浜х嚎鍚嶇О1', cpmc: '浜у搧鍚嶇О1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '宸ュ簭涓�', scjd: '10/20' },
+ { xh: 27, bgsl: 200, blyy: '灏哄銆佽壊绯汇�佹瘺鍒�', jgdh: 'MO-2022-1115-01', cxmc: '浜х嚎鍚嶇О1', cpmc: '浜у搧鍚嶇О1', scsl: '100', yjks: '2022-10-01', yjwg: '2022-10-10', gx: '宸ュ簭涓�', scjd: '10/20' }
+ ]
+ }
+ },
+ created() {
+ setInterval(this.getNowTime, 1000)
+
+ // 涓ゅ皬鏃剁湅鏉垮埛鏂颁竴娆�
+ setInterval(() => {
+ window.location.reload()
+ }, 1000 * 60 * 120)
+ },
+ mounted() {
+ this.getTopBar()
+ this.getTableDataSetInterval()
+ this.getCenterTableDataSetInterval()
+
+ this.getEcharts()
+ },
+ methods: {
+ // 鑾峰彇Echarts
+ getEcharts() {
+ const dataArr = [30, 20, 20, 18, 10]
+ const titlenameArr = ['棰滆壊', '灏哄', '姘斿懗', '姣涘埡', '瑁傜棔']
+ loadEcharts('bar01', bar02(dataArr, titlenameArr))
+
+ loadEcharts('line01', line02())
+
+ loadEcharts('bar02', bar04())
+
+ loadEcharts('pie01', pie02())
+ },
+ // 涓棿閮ㄥ垎鐨勮〃鏍�
+ getCenterTableDataSetInterval() {
+ let startValue = 0 // 鍒濆鍊�
+ const scale = 23// 鍒诲害
+
+ this.tableDataCenterTop = this.tableDataCenterTopTemp.slice(startValue, startValue + scale)
+
+ const loop = Math.floor(this.tableDataCenterTopTemp.length / scale)// 闇�瑕佸惊鐜殑娆℃暟
+ let nowLoop = 0// 褰撳墠寰幆鐨勬鏁�
+
+ setInterval(() => {
+ startValue = startValue + scale
+ this.tableDataCenterTop = this.tableDataCenterTopTemp.slice(startValue, startValue + scale)
+ if (nowLoop === loop) {
+ this.getCenterTableDataSetInterval()
+ }
+
+ nowLoop++
+ }, 5000)
+ },
+
+ // 瀹氭椂鍒锋柊琛ㄦ牸鏁版嵁
+ getTableDataSetInterval() {
+ let startValue = 0 // 鍒濆鍊�
+ const scale = 10// 鍒诲害
+
+ this.tableDataLeftTop = this.tableDataLeftTopTemp.slice(startValue, startValue + scale)
+
+ const loop = Math.floor(this.tableDataLeftTopTemp.length / scale)// 闇�瑕佸惊鐜殑娆℃暟
+ let nowLoop = 0// 褰撳墠寰幆鐨勬鏁�
+
+ setInterval(() => {
+ startValue = startValue + scale
+ this.tableDataLeftTop = this.tableDataLeftTopTemp.slice(startValue, startValue + scale)
+ if (nowLoop === loop) {
+ this.getTableDataSetInterval()
+ }
+ nowLoop++
+ }, 5000)
+ },
+
+ // 鑾峰彇topEcharts
+ getTopBar() {
+ loadEcharts('topBarLeft', kbTop())
+ loadEcharts('topBarRight', kbTop())
+ },
+ // 鑾峰彇褰撳墠鏃堕棿
+ getNowTime() {
+ const dt = new Date()
+ const wk = dt.getDay()
+ const y = dt.getFullYear()
+ const m = (dt.getMonth() + 1 + '').padStart(2, '0')
+ const d = (dt.getDate() + '').padStart(2, '0')
+
+ const hh = (dt.getHours() + '').padStart(2, '0')
+ const mm = (dt.getMinutes() + '').padStart(2, '0')
+ const ss = (dt.getSeconds() + '').padStart(2, '0')
+ const weeks = ['鏄熸湡鏃�', '鏄熸湡涓�', '鏄熸湡浜�', '鏄熸湡涓�', '鏄熸湡鍥�', '鏄熸湡浜�', '鏄熸湡鍏�']
+ const week = weeks[wk]
+
+ this.headTime = `${y}-${m}-${d} ${hh}:${mm}:${ss} ${week}`
+ },
+ headerCellStyle() {
+ return {
+ // backgroundColor: 'rgb(30 ,33, 46)',
+ backgroundColor: '#000',
+ padding: '10px 0',
+ textAlign: 'center',
+ color: '#07acc2',
+ border: 'none'
+ }
+ },
+ cellStyle() {
+ return {
+ padding: '7px 0',
+ textAlign: 'center',
+ // backgroundColor: 'rgba(30, 33, 46)',
+ backgroundColor: '#000',
+ // backgroundColor: 'transparent',
+ color: '#fff',
+ border: 'none'
+ }
+ },
+ headerCellStyleCenter() {
+ return {
+ // backgroundColor: 'rgb(30 ,33, 46)',
+ backgroundColor: '#000',
+ padding: '10px 0',
+ textAlign: 'center',
+ color: '#07acc2',
+ border: 'none'
+ }
+ },
+ cellStyleCenter() {
+ return {
+ padding: '7.5px 0',
+ textAlign: 'center',
+ backgroundColor: '#000',
+ color: '#fff',
+ border: 'none'
+ }
+ }
+ }
+
+}
+</script>
+
+<style lang="scss" scoped>
+$main_color:#09d8f2;
+$color01: #00FFFF;
+.lineContent {
+ height: 435px;
+ border: 1px solid $main_color;
+ //outline: 1px solid $main_color;
+ border-radius: 5px;
+ padding: 2px;
+
+}
+.lineContentCenter{
+ height: 935px;
+ border: 1px solid $main_color;
+ //outline: 1px solid $main_color;
+ border-radius: 5px;
+ padding: 2px;
+}
+
+.horn {
+ background: linear-gradient($color01, $color01) left top,
+ linear-gradient($color01, $color01) left top,
+ linear-gradient($color01, $color01) right top,
+ linear-gradient($color01, $color01) right top,
+ linear-gradient($color01, $color01) left bottom,
+ linear-gradient($color01, $color01) left bottom,
+ linear-gradient($color01, $color01) right bottom,
+ linear-gradient($color01, $color01) right bottom;
+ background-repeat: no-repeat;
+ //background-size: 5px 20px, 20px 5px;
+ background-size: 2px 20px, 20px 2px;
+}
+
+.tableData{
+ background: #000;
+}
+
+//.el-table::before{
+// height: 0;
+//}
+
+.el-table__empty-text{
+ color: $main_color;
+}
+</style>
diff --git a/src/views/kb/ckgl.vue b/src/views/kb/ckgl.vue
deleted file mode 100644
index 40e9ddd..0000000
--- a/src/views/kb/ckgl.vue
+++ /dev/null
@@ -1,630 +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"
- 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>
- <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"
- >
- <el-table-column
- prop="voucherdate"
- label="鍗曟嵁鏃ユ湡"
- width="130"
- >
- <template slot-scope="{row}">
- <div v-if="row.voucherdate" class="ellipsis">{{ row.voucherdate.substring(0, 10) }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="wo"
- label="鍗曟嵁缂栧彿"
- width="195"
- >
- <template slot-scope="{row}">
- <div class="ellipsis">{{ row.wo }}</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="customename"
- label="瀹㈡埛"
- width="125"
- >
- <template slot-scope="{row}">
- <div v-if="row.customename" class="ellipsis">{{ row.customename }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <!-- <el-table-column-->
- <!-- prop="username"-->
- <!-- label="涓氬姟鍛�"-->
- <!-- width="65"-->
- <!-- >-->
- <!-- <template slot-scope="{row}">-->
- <!-- <div v-if="row.username" class="ellipsis">{{ row.username }}</div>-->
- <!-- <div v-else>/</div>-->
- <!-- </template>-->
- <!-- </el-table-column>-->
- <el-table-column
- prop="SourceVoucherCode"
- label="鏉ユ簮鍗曞彿"
- width="185"
- >
- <template slot-scope="{row}">
- <div v-if="row.SourceVoucherCode" class="ellipsis">{{ row.SourceVoucherCode }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <!-- <el-table-column-->
- <!-- prop="materiel_code"-->
- <!-- label="浜у搧缂栧彿"-->
- <!-- width="96"-->
- <!-- />-->
- <el-table-column
- prop="materiel_name"
- label="浜у搧鍚嶇О"
- width="170"
- >
- <template slot-scope="{row}">
- <div v-if="row.materiel_name" class="ellipsis">{{ row.materiel_name }}</div>
- </template>
- </el-table-column>
- <!-- <el-table-column-->
- <!-- prop="specification"-->
- <!-- label="瑙勬牸鍨嬪彿"-->
- <!-- width="100"-->
- <!-- >-->
- <!-- <template slot-scope="{row}">-->
- <!-- <div v-if="row.specification" class="ellipsis">{{ row.specification }}</div>-->
- <!-- <div v-else>/</div>-->
- <!-- </template>-->
- <!-- </el-table-column>-->
- <el-table-column
- prop="quantity"
- label="鏁伴噺"
- width="87"
- >
- <template slot-scope="{row}">
- <div class="ellipsis">{{ row.quantity }}</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="saleOutQuantity"
- label="宸插彂璐ф暟閲�"
- width="100"
- >
- <template slot-scope="{row}">
- <div v-if="row.saleOutQuantity" class="ellipsis">{{ row.saleOutQuantity }}</div>
- <div v-else>0</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="priuserdefnvc1"
- label="妫�楠屾柟寮�"
- width="110"
- >
- <template slot-scope="{row}">
- <div v-if="row.priuserdefnvc1">{{ row.priuserdefnvc1 }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="priuserdefnvc2"
- label="妫�楠屼汉鍛�"
- width="110"
- >
- <template slot-scope="{row}">
- <div v-if="row.priuserdefnvc2">{{ row.priuserdefnvc2 }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="deliveryDate"
- label="棰勮浜よ揣鏃ユ湡"
- width="141"
- >
- <template slot-scope="{row}">
- <div v-if="row.deliveryDate">{{ row.deliveryDate.substring(0,10) }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- </el-table>
- </div>
- </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>
- </div>
-
- </div>
- </div>
- </div>
- </div>
-</template>
-
-<script>
-import './kbCommon.css'
-import { bar02, 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, // 鍏憡鎾斁鐨勯�熷害
-
- tableTopTask: null,
- tableBottomTask: null,
- echartsRightTop: null,
- echartsRightBottom: 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.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('缃戠粶鎺夌嚎锛岃鍏虫敞缃戠粶鐘舵�侊紒')
- }
- }
- },
-
- // 鑾峰彇鍏憡
- 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
- },
- // 鑾峰彇宸︿笂table鏁版嵁
- getWareHouseTopLeftData() {
- WareHouseTopLeftData().then(res => {
- this.tableDataTop = res.data
- this.number1 = this.tableDataTop.length
- const divData = this.$refs.tableDataTopRef.bodyWrapper
- // 鎷垮埌鍏冪礌鍚庯紝瀵瑰厓绱犺繘琛屽畾鏃跺鍔犺窛绂婚《閮ㄨ窛绂伙紝瀹炵幇婊氬姩鏁堟灉(姝ら厤缃负姣�100姣绉诲姩1鍍忕礌)
- this.tableTopTask = setInterval(() => {
- // 鍏冪礌鑷璺濈椤堕儴1鍍忕礌
- divData.scrollTop += 1
- // divData.scrollTop += divData.scrollHeight / this.tableData.length
- // 鍒ゆ柇鍏冪礌鏄惁婊氬姩鍒板簳閮�(鍙楂樺害+璺濈椤堕儴=鏁翠釜楂樺害)
- if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
- // 閲嶇疆table璺濈椤堕儴璺濈
- divData.scrollTop = 0
- WareHouseTopLeftData().then(res => {
- this.tableDataTop = res.data
- this.number1 = this.tableDataTop.length
- if (this.tableDataTop.length > 9) {
- clearInterval(this.tableTopTask)
- this.getWareHouseTopLeftData()
- }
- })
- }
- }, this.tableDataTop.length <= 9 ? 1000 * 3 : 100)
- })
- },
- // 鑾峰彇宸︿笅table鏁版嵁
- getWareHouseTopBottomData() {
- WareHouseTopBottomData().then(res => {
- this.tableDataBottom = res.data
- this.number2 = this.tableDataBottom.length
- const divData = this.$refs.tableDataBottomRef.bodyWrapper
- // 鎷垮埌鍏冪礌鍚庯紝瀵瑰厓绱犺繘琛屽畾鏃跺鍔犺窛绂婚《閮ㄨ窛绂伙紝瀹炵幇婊氬姩鏁堟灉(姝ら厤缃负姣�100姣绉诲姩1鍍忕礌)
- // const task = setInterval(() => {
- this.tableBottomTask = setInterval(() => {
- // 鍏冪礌鑷璺濈椤堕儴1鍍忕礌
- divData.scrollTop += 1
- // divData.scrollTop += divData.scrollHeight / this.tableData.length
- // 鍒ゆ柇鍏冪礌鏄惁婊氬姩鍒板簳閮�(鍙楂樺害+璺濈椤堕儴=鏁翠釜楂樺害)
- if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
- // 閲嶇疆table璺濈椤堕儴璺濈
- divData.scrollTop = 0
- WareHouseTopBottomData().then(res => {
- this.tableDataBottom = res.data
- this.number2 = this.tableDataBottom.length
- if (this.tableDataBottom.length > 10) {
- clearInterval(this.tableBottomTask)
- this.getWareHouseTopBottomData()
- }
- })
- }
- }, this.tableDataBottom.length <= 10 ? 1000 * 3 : 100)
- })
- },
-
- // 鑾峰彇echarts
- getEcharts() {
- WareHouseRightTopData().then(res => {
- loadEcharts('bar03', bar02(res.data.filter(i => i.CanuseBaseQuantity > 0).map(i => i.CanuseBaseQuantity), res.data.filter(i => i.CanuseBaseQuantity > 0).map(i => i.materiel_name)))
- })
-
- WareHouseRightBottomData().then(res => {
- loadEcharts('bar04', bar02(res.data.filter(i => i.CanuseBaseQuantity > 0).map(i => i.CanuseBaseQuantity), res.data.filter(i => i.CanuseBaseQuantity > 0).map(i => i.materiel_name)))
- })
-
- this.echartsRightTop = setInterval(() => {
- WareHouseRightTopData().then(res => {
- loadEcharts('bar03', bar02(res.data.filter(i => i.CanuseBaseQuantity > 0).map(i => i.CanuseBaseQuantity), res.data.filter(i => i.CanuseBaseQuantity > 0).map(i => i.materiel_name)))
- })
- }, 1000 * 15)
-
- this.echartsRightBottom = setInterval(() => {
- WareHouseRightBottomData().then(res => {
- loadEcharts('bar04', bar02(res.data.filter(i => i.CanuseBaseQuantity > 0).map(i => i.CanuseBaseQuantity), res.data.filter(i => i.CanuseBaseQuantity > 0).map(i => i.materiel_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: #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;
-
- }
- }
- }
-
- }
-}
-
-::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 .el-table::before {
- height: 0;
-}
-
-::v-deep .cell {
- padding: 0 !important;
- //font-size: 16px;
- font-size: 18px;
-}
-</style>
diff --git a/src/views/kb/dccj.vue b/src/views/kb/dccj.vue
deleted file mode 100644
index ae8bbe8..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="planstartdate"
- label="棰勮寮�濮�"
- width="115"
- >
- <template slot-scope="{row}">
- <div>{{ row.planstartdate.substring(0, 10) }}</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="planenddate"
- label="棰勮缁撴潫"
- width="125"
- >
- <template slot-scope="{row}">
- <div>{{ row.planenddate.substring(0, 10) }}</div>
- </template>
- </el-table-column>
- </el-table>
- </div>
- </div>
- </div>
- </div>
- <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..014ebc4 100644
--- a/src/views/kb/kbCommon.css
+++ b/src/views/kb/kbCommon.css
@@ -67,6 +67,12 @@
justify-content: space-evenly;
/*align-content: center;*/
}
+.flex_c_b {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-content: space-between;
+}
.flex_e_c {
display: flex;
@@ -88,8 +94,8 @@
margin-top: 10px;
}
-.kb_mt5 {
- margin-top: 5px;
+.kb_mt10 {
+ margin-top: 10px;
}
/*鍏憡鏍峰紡*/
.MarqueeTipsContentClass {
@@ -114,3 +120,21 @@
/*}*/
/*scrollbar END*/
+
+
+.smallTitle{
+ height: 35px;
+ display: flex;
+ color: #00ffff;
+ font-size: 24px;
+ /*align-content: flex-start;*/
+}
+
+.svg_class{
+ margin-right: 10px;
+ font-size: 26px;
+}
+
+.el-table::before{
+ height: 0;
+}
diff --git a/src/views/kb/zhkb.vue b/src/views/kb/zhkb.vue
index 2bdb36a..75a6351 100644
--- a/src/views/kb/zhkb.vue
+++ b/src/views/kb/zhkb.vue
@@ -3,42 +3,34 @@
<div class="kb_dashboard">
<div class="kb_header">
<div class="flex_c_c kb_header_text">
- 杞﹂棿缁煎悎鐪嬫澘
+ <div id="topBarLeft" style="width:600px;height:100%" />
+ 杞﹂棿缁煎悎鏁板瓧鍖栫湅鏉�
+ <div id="topBarRight" style="width:600px;height:100%;transform:rotate(180deg);" />
</div>
- <div class="kb_headerPic" />
<div class="kb_headTime">
<span>{{ headTime }}</span>
</div>
</div>
- <MarqueeTips
- :content="MarqueeTipsContent"
- class="MarqueeTipsContentClass"
- :speed="180"
- />
- <!-- :speed="speed"-->
- <div class="kb_content">
- <div class="kb_left">
- <!-- 1-->
- <div class="kb_left_top_title01 kb_title_text">
- <!-- <div class="PG01" />-->
- <!-- <svg-icon icon-class="sccx" />-->
- 浜х嚎鍔犲伐涓换鍔�
- <div style="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 class="kb_mt10">
鍔犲伐鍗曞彿:{{ item.workcode }}
</div>
- <div class="kb_mt5">
+ <div class="kb_mt10">
浜у搧鍚嶇О:{{ item.partname }}
</div>
- <div class="kb_mt5">
+ <div class="kb_mt10">
浠诲姟鏁伴噺:{{ parseFloat(item.qty) }}
</div>
</div>
@@ -98,205 +90,99 @@
</div>
</div>
</div>
+
</div>
- <!-- 2-->
- <div class="kb_left_bottom kb_pd10">
- <div class="kb_left_bottom_content">
- <div class="content_head kb_title_text">浜х嚎鍔犲伐浠诲姟
- <div style="margin-left: 30px">{{ number2 }} 鍗�</div>
- </div>
- <div class="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="planstartdate"
- label="棰勮寮�濮�"
- width="115"
- >
- <template slot-scope="{row}">
- <div>{{ row.planstartdate.substring(0, 10) }}</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="planenddate"
- label="棰勮缁撴潫"
- width="125"
- >
- <template slot-scope="{row}">
- <div>{{ row.planenddate.substring(0, 10) }}</div>
- </template>
- </el-table-column>
- </el-table>
- </div>
+ <div>
+ <div 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="xh"
+ label="搴忓彿"
+ width="50"
+ />
+
+ <el-table-column
+ prop="zt"
+ width="100"
+ label="鐘舵��"
+ />
+ <el-table-column
+ prop="pfsj"
+ label="娲惧彂鏃堕棿"
+ width="160"
+ />
+ <el-table-column
+ prop=""
+ label="閿�鍞鍗曞彿"
+ width="160"
+ />
+ </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
+ prop="xh"
+ label="搴忓彿"
+ width="50"
+ />
+ <el-table-column
+ prop="cx"
+ width="144"
+ label="浜х嚎"
+ />
+ <el-table-column
+ prop="cp"
+ width="160"
+ label="浜у搧"
+ />
+ <el-table-column
+ prop="sl"
+ label="鏁伴噺"
+ width="90"
+ />
+ </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 +192,40 @@
<script>
import './kbCommon.css'
-import { bar02, loadEcharts } from '@/utils/myEcharts'
-import {
- LineSearchBottomLeftData,
- LineSearchBottomRightData,
- LineSearchTopLeftData,
- LineSearchTopRightData, ShopSearch, WkspReportNotice
-} from '@/api/dzkb'
-import MarqueeTips from 'vue-marquee-tips'
+import { bar02, kbTop, loadEcharts } from '@/utils/myEcharts'
+import { LineSearchTopLeftData, ShopSearch } from '@/api/dzkb'
export default {
- name: 'Index2',
- components: {
- MarqueeTips
- },
+ name: 'Cjsc',
data() {
return {
-
- onLine: navigator.onLine, // 鐩戝惉缃戠粶鏄惁鍦ㄧ嚎
-
headTime: '',
- lineContent: [],
+ tableDataRightTop: [],
+ tableDataRightTopTemp: [
+ { xh: 1, cx: '瑁呴厤涓�绾�', cp: '娌欐哗妞�', sl: 2000 },
+ { xh: 2, cx: '瑁呴厤涓�绾�', cp: '娌欐哗妞�', sl: 2000 },
+ { xh: 3, cx: '瑁呴厤涓�绾�', cp: '娌欐哗妞�', sl: 2000 },
+ { xh: 4, cx: '瑁呴厤涓�绾�', cp: '娌欐哗妞�', sl: 2000 },
+ { xh: 5, cx: '瑁呴厤涓�绾�', cp: '娌欐哗妞�', sl: 2000 },
+ { xh: 6, cx: '瑁呴厤涓�绾�', cp: '娌欐哗妞�', sl: 2000 },
+ { xh: 7, cx: '瑁呴厤涓�绾�', cp: '娌欐哗妞�', sl: 2000 },
+ { xh: 8, cx: '瑁呴厤涓�绾�', cp: '娌欐哗妞�', sl: 2000 },
+ { xh: 9, cx: '瑁呴厤涓�绾�', cp: '娌欐哗妞�', sl: 2000 },
+ { xh: 10, cx: '瑁呴厤涓�绾�', cp: '娌欐哗妞�', sl: 2000 },
+ { xh: 11, cx: '瑁呴厤涓�绾�', cp: '娌欐哗妞�', sl: 2000 },
+ { xh: 12, cx: '瑁呴厤涓�绾�', cp: '娌欐哗妞�', sl: 2000 },
+ { xh: 13, cx: '瑁呴厤涓�绾�', cp: '娌欐哗妞�', sl: 2000 }
+ ],
+ tableDataLeftBottom: [],
+ tableDataLeftBottomTemp: [
+ {}
+ ],
lineContent3: [],
+ ShopArr: [] // 杞﹂棿缂栫爜鏁扮粍
- leftTopData: [],
- tableData: [],
- tableDataRank: [],
- lineCodeArr: [],
-
- ShopArr: [], // 杞﹂棿缂栫爜鏁扮粍
-
- number1: '',
- number2: '',
-
- MarqueeTipsContent: '', // 鍏憡
- speed: 100, // 鍏憡鎾斁鐨勯�熷害
-
- MarqueeTipsTask: null,
- ShopSearchTask: null,
- ShopSearchLineTask: null,
- TableDataRollTask: null,
- TableDataRankRollTask: null,
- EchartsTask: null
}
},
-
created() {
setInterval(this.getNowTime, 1000)
@@ -361,79 +235,14 @@
}, 1000 * 60 * 120)
},
mounted() {
- // 鐩戝惉缃戠粶鏄惁鍦ㄧ嚎
- window.addEventListener('online', this.updateOnlineStatus)
- window.addEventListener('offline', this.updateOnlineStatus)
- this.updateOnlineStatus({ type: this.onLine ? 'online' : 'offline', isFirst: true })
- },
- beforeDestroy() {
- window.removeEventListener('online', this.updateOnlineStatus)
- window.removeEventListener('offline', this.updateOnlineStatus)
+ this.getTopBar()
+
+ this.getEcharts()
+ this.getRightRightData()
+
+ this.getShopSearch()
},
methods: {
- // 鏇存柊缃戠粶鐘舵��
- updateOnlineStatus(e) {
- if (e.isFirst) {
- this.getValue()// 鑾峰彇鍊�
- } else {
- const loading = this.$loading({
- lock: true,
- text: '鏂綉浜嗭紝姝ｅ湪鎷煎懡鑱旂綉涓紝璇锋鏌ョ綉缁滄槸鍚︽甯�...',
- spinner: 'el-icon-loading',
- customClass: 'osloading',
- background: 'rgba(0, 0, 0, 0.7)'
- })
- const { type } = e
- this.onLine = type === 'online'
- if (this.onLine) {
- this.getValue()
- loading.close()
- this.$message.success('缃戠粶杩炴帴鎴愬姛锛�')
- } else {
- clearInterval(this.MarqueeTipsTask)
- clearInterval(this.ShopSearchTask)
- clearInterval(this.ShopSearchLineTask)
- clearInterval(this.TableDataRollTask)
- clearInterval(this.TableDataRankRollTask)
- clearInterval(this.EchartsTask)
- this.$message.error('缃戠粶鎺夌嚎锛岃鍏虫敞缃戠粶鐘舵�侊紒')
- }
- }
- },
- // 鑾峰彇鍊�
- async getValue() {
- await this.getShopSearch()
- await this.getShopSearchLine()
-
- await this.getEcharts()
- await this.getTableDataRoll()
- await this.getTableDataRankRoll()
- await this.getMarqueeTipsContent()
- await this.getMarqueeTipsContent()
- },
- // 鑾峰彇鍏憡
- getMarqueeTipsContent() {
- WkspReportNotice({ shopcode: this.ShopArr.join(',') }).then(res => {
- let contentAll = ''
- res.data.forEach(item => {
- contentAll += item.contents + ' '.padStart(item.contents.toString().length * 2, ' ')
- })
- this.MarqueeTipsContent = contentAll
- this.speed = this.MarqueeTipsContent.length / 10
-
- this.MarqueeTipsTask = setInterval(() => {
- WkspReportNotice({ shopcode: this.ShopArr.join(',') }).then(res1 => {
- let contentAll = ''
- res1.data.forEach(item => {
- contentAll += item.contents + ' '.padStart(item.contents.toString().length * 2, ' ')
- })
- this.MarqueeTipsContent = contentAll
- this.speed = this.MarqueeTipsContent.length / 10
- })
- // }, this.speed * 1000)
- }, 1000 * 60 * 5)
- })
- },
// 鑾峰彇杞﹂棿缂栫爜
async getShopSearch() {
const res1 = await ShopSearch()
@@ -442,17 +251,18 @@
res1.data.forEach(item => {
this.ShopArr.push(item.org_code)
})
+ this.getShopSearchLine()
}
- setInterval(() => {
- this.ShopSearchTask = ShopSearch().then(res1 => {
- if (res1.code === '200') {
- this.ShopArr = []
- res1.data.forEach(item => {
- this.ShopArr.push(item.org_code)
- })
- }
- })
- }, 1000 * 30)
+ // setInterval(() => {
+ // this.ShopSearchTask = ShopSearch().then(res1 => {
+ // if (res1.code === '200') {
+ // this.ShopArr = []
+ // res1.data.forEach(item => {
+ // this.ShopArr.push(item.org_code)
+ // })
+ // }
+ // })
+ // }, 1000 * 30)
},
// 浜х嚎鍔犲伐涓换鍔�
getShopSearchLine() {
@@ -462,97 +272,59 @@
length = this.lineContent.length
count = Math.ceil(length / 3) // 闇�瑕佽疆鎾殑缁勬暟 3涓负涓�缁�
this.lineContent3 = this.lineContent.slice(0, 3)
-
this.number1 = this.lineContent.length
})
- let start = 0
- this.ShopSearchLineTask = setInterval(() => {
- if (Math.floor(start / 3) === count && count !== 0) {
- start = 0
- LineSearchTopLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
- this.lineContent = res.data
- length = this.lineContent.length
- count = Math.ceil(length / 3) // 闇�瑕佽疆鎾殑缁勬暟 3涓负涓�缁�
- this.lineContent3 = this.lineContent.slice(0, 3)
+ // let start = 0
+ // this.ShopSearchLineTask = setInterval(() => {
+ // if (Math.floor(start / 3) === count && count !== 0) {
+ // start = 0
+ // LineSearchTopLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
+ // this.lineContent = res.data
+ // length = this.lineContent.length
+ // count = Math.ceil(length / 3) // 闇�瑕佽疆鎾殑缁勬暟 3涓负涓�缁�
+ // this.lineContent3 = this.lineContent.slice(0, 3)
+ //
+ // this.number1 = this.lineContent.length
+ // })
+ // } else if (count === 0) {
+ // clearInterval(this.ShopSearchLineTask)
+ // this.getShopSearchLine()
+ // }
+ // this.lineContent3 = this.lineContent.slice(start, start + 3)
+ // start = start + 3
+ // }, 1000 * 5)
+ },
- this.number1 = this.lineContent.length
- })
- } else if (count === 0) {
- clearInterval(this.ShopSearchLineTask)
- this.getShopSearchLine()
+ // 鑾峰彇鍙充笂鏁版嵁
+ getRightRightData() {
+ let startValue = 0 // 鍒濆鍊�
+ const scale = 10// 鍒诲害
+
+ this.tableDataRightTop = this.tableDataRightTopTemp.slice(startValue, startValue + scale)
+
+ const loop = Math.floor(this.tableDataRightTopTemp.length / scale)// 闇�瑕佸惊鐜殑娆℃暟
+ let nowLoop = 0// 褰撳墠寰幆鐨勬鏁�
+
+ setInterval(() => {
+ startValue = startValue + scale
+ this.tableDataRightTop = this.tableDataRightTopTemp.slice(startValue, startValue + scale)
+ if (nowLoop === loop) {
+ this.getRightRightData()
}
- this.lineContent3 = this.lineContent.slice(start, start + 3)
- start = start + 3
- }, 1000 * 3)
+
+ nowLoop++
+ }, 5000)
},
-
- // 浜х嚎鍔犲伐浠诲姟
- 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)
+ const dataArr = [30, 20, 20, 18, 10]
+ const titlenameArr = ['棰滆壊', '灏哄', '姘斿懗', '姣涘埡', '瑁傜棔']
+ loadEcharts('bar01', bar02(dataArr, titlenameArr))
+ },
+ // 鑾峰彇topEcharts
+ getTopBar() {
+ loadEcharts('topBarLeft', kbTop())
+ loadEcharts('topBarRight', kbTop())
},
// 鑾峰彇褰撳墠鏃堕棿
getNowTime() {
@@ -572,268 +344,152 @@
},
headerCellStyle() {
return {
- backgroundColor: 'rgb(30 ,33, 46)',
+ backgroundColor: '#000',
padding: '10px 0',
textAlign: 'center',
color: '#07acc2',
border: 'none'
+ // fontSize: '16px'
}
},
cellStyle() {
return {
- padding: '8px 0',
+ padding: '7px 0',
textAlign: 'center',
- backgroundColor: 'rgba(30, 33, 46 )',
- // backgroundColor: 'transparent',
+ backgroundColor: '#000',
color: '#fff',
border: 'none'
+ // fontSize: '16px'
}
}
-
}
+
}
</script>
-<style scoped lang="scss">
-$kbBorderColor: rgba(9, 216, 242, 0.4);
-$kbBackgroundColor: rgba(30, 33, 46, 0.6);
-.kb_content {
- display: flex;
- position: relative;
- height: 990px;
+<style lang="scss" scoped>
+$main_color: #09d8f2;
+$color01: #00FFFF;
+.lineContent {
+ height: 435px;
+ border: 1px solid $main_color;
+ border-radius: 5px;
+ padding: 2px;
+}
+
+.horn {
+ background: linear-gradient($color01, $color01) left top,
+ linear-gradient($color01, $color01) left top,
+ linear-gradient($color01, $color01) right top,
+ linear-gradient($color01, $color01) right top,
+ linear-gradient($color01, $color01) left bottom,
+ linear-gradient($color01, $color01) left bottom,
+ linear-gradient($color01, $color01) right bottom,
+ linear-gradient($color01, $color01) right bottom;
+ background-repeat: no-repeat;
+ background-size: 2px 20px, 20px 2px;
+}
+
+.tableData {
+ background: #000;
+}
+
+.el-table__empty-text {
+ color: $main_color;
+}
+
+.kb_left_top_block {
width: 100%;
- letter-spacing: 2px;
- color: #fff;
+ height: 143px;
+ display: flex;
+ font-size: 16px;
+ border-bottom: 1px solid $main_color;
+ justify-content: flex-start;
- .kb_left {
- width: 1345px;
- height: 100%;
- padding-left: 5px;
+ .kb_block02 {
+ width: 304px;
+ display: flex;
+ align-items: center;
+ border-right: 1px solid $main_color;
+ }
- .kb_left_top_title01 {
- position: absolute;
- top: 37px;
- left: 15px;
- display: flex;
- color: #00ffff;
+ .kb_block03 {
+ width: 1020px;
+ font-size: 16px;
+ display: flex;
+ flex-direction: column;
+ border-radius: 5px;
- .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;
+ .kb_block03_content {
+ border: 1px solid $main_color;
+ width: 180px;
+ height: 80px;
+ margin-right: 15px;
display: flex;
flex-direction: column;
- justify-content: flex-start;
- padding-top: 70px;
- .kb_left_top02 {
+ .content01 {
+ height: 30px;
+ width: 100%;
+ border-bottom: 1px solid $main_color;
display: flex;
- flex-direction: column;
- justify-content: flex-start;
- border: 1px solid $kbBorderColor;
- height: 400px;
- border-radius: 5px;
- background-color: $kbBackgroundColor;
+ align-items: center;
+ justify-content: center;
+ }
- .kb_left_top_block {
- width: 100%;
- height: 133px;
- display: flex;
- font-size: 17px;
- border-bottom: 1px solid $kbBorderColor;
- justify-content: flex-start;
+ .content02Parent {
+ display: flex;
- .kb_block02 {
- width: 304px;
+ .content02 {
+ width: 60px;
+ border-right: 1px solid $main_color;
+
+ .content02_1 {
display: flex;
align-items: center;
- border-right: 1px solid $kbBorderColor;
+ justify-content: center;
+ height: 25px;
}
- .kb_block03 {
- width: 1020px;
- font-size: 17px;
+ .content02_2 {
+ height: 25px;
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;
- }
- }
- }
-
- }
+ align-items: center;
+ justify-content: center;
}
- .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%;
- }
-
- }
-
- }
+ .borderTop {
+ border-top: 1px solid $main_color;
}
-
- }
-
- .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_block03_02 {
+ margin-top: 15px;
+ display: flex;
- .kb_right_top {
- margin-top: 30px;
- margin-bottom: -30px;
- height: 476px;
- width: 100%;
+ .kb_block03_02_content {
+ width: 180px;
+ margin-right: 15px;
- .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;
+ .content01 {
+ .circle {
+ width: 26px;
+ height: 26px;
+ background-color: #00ff8b;
+ border-radius: 50%;
}
-
- .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;
+.kb_left_top_block:nth-child(3n) {
+ border-bottom: none !important;
}
-
-::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;
diff --git a/src/views/kb/zhkb_back.vue b/src/views/kb/zhkb_back.vue
index d24b679..2bdb36a 100644
--- a/src/views/kb/zhkb_back.vue
+++ b/src/views/kb/zhkb_back.vue
@@ -3,14 +3,19 @@
<div class="kb_dashboard">
<div class="kb_header">
<div class="flex_c_c kb_header_text">
- 澶у矝杞﹂棿缁煎悎鐪嬫澘
+ 杞﹂棿缁煎悎鐪嬫澘
</div>
<div class="kb_headerPic" />
<div class="kb_headTime">
<span>{{ headTime }}</span>
</div>
</div>
-
+ <MarqueeTips
+ :content="MarqueeTipsContent"
+ class="MarqueeTipsContentClass"
+ :speed="180"
+ />
+ <!-- :speed="speed"-->
<div class="kb_content">
<div class="kb_left">
<!-- 1-->
@@ -18,365 +23,88 @@
<!-- <div class="PG01" />-->
<!-- <svg-icon icon-class="sccx" />-->
浜х嚎鍔犲伐涓换鍔�
+ <div style="margin-left: 30px">{{ number1 }} 鍗�</div>
</div>
<div class="kb_left_top kb_pd10">
-
- <div class="kb_left_top_block">
- <div class="kb_block01 kb_pd10">
- <div>
- <div>浜х嚎鍚嶇О:{{ lineContent01.linename }}</div>
- <div class="kb_mt10">浜х嚎鎬婚噺:{{
- lineContent01.children !== undefined ? lineContent01.lineworkcont : ''
- }}
- </div>
- </div>
- <div>
- <!-- <div>{{ lineContent01.linename }}</div>-->
- <!-- <div v-if="lineContent01.children!==undefined" class="kb_mt10">{{ lineContent01.lineworkcont }}</div>-->
- </div>
- </div>
- <div class="kb_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 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="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 class="kb_mt5">
+ 浜у搧鍚嶇О:{{ item.partname }}
+ </div>
+ <div class="kb_mt5">
+ 浠诲姟鏁伴噺:{{ parseFloat(item.qty) }}
</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 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>
+ <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>
-
- <!-- 234-->
- <div class="kb_left_top_block">
- <div class="kb_block01 kb_pd10">
- <div>
- <div>浜х嚎鍚嶇О:{{ lineContent02.linename }}</div>
- <div class="kb_mt10">浜х嚎鎬婚噺:{{
- lineContent02.children !== undefined ? lineContent02.lineworkcont : ''
- }}
- </div>
- </div>
- <div>
- <!-- <div>{{ lineContent02.linename }}</div>-->
- <!-- <div v-if="lineContent02.children!==undefined" class="kb_mt10">{{ lineContent02.lineworkcont }}</div>-->
- </div>
- </div>
- <div class="kb_block02 kb_pd10">
- <div>
- <div>閿�鍞崟鍙�:{{ lineContent02.children !== undefined ? lineContent02.children.saleordercode : '' }}</div>
- <div class="kb_mt5">
- 鍔犲伐鍗曞彿:{{ lineContent02.children !== undefined ? lineContent02.children.workcode : '' }}
- </div>
- <div class="kb_mt5">
- 浜у搧鍚嶇О:{{ lineContent02.children !== undefined ? lineContent02.children.partname : '' }}
- </div>
- <div v-if="lineContent02.children&&lineContent02.children.length===0" class="kb_mt5">
- 浠诲姟鏁伴噺:
- </div>
- <div v-else class="kb_mt5">
- 浠诲姟鏁伴噺:{{ lineContent02.children ? parseFloat(lineContent02.children.qty) : '' }}
- </div>
- </div>
-
- </div>
- <div class="kb_block03 kb_pd10 ">
- <div v-if="lineContent02.children!==undefined" class="flex_s_c">
- <div
- v-for="item in lineContent02.children.children"
- :key="item.stepseq"
- class="kb_block03_content flex_c_c"
- >
- <div>
- <div class="content01">{{ item.stepname }}</div>
- </div>
- <div class="content02Parent">
- <div class="content02">
- <div class="content02_1 ">浠诲姟</div>
- <div class="content02_2 borderTop ">{{ parseFloat(item.planqty) }}</div>
- </div>
- <div class="content02">
- <div class="content02_1 ">鍚堟牸</div>
- <div class="content02_2 borderTop ">{{ parseFloat(item.goodqty) }}</div>
- </div>
- <div class="content02" style="border-right: 0">
- <div class="content02_1 ">涓嶈壇</div>
- <div class="content02_2 borderTop ">{{ parseFloat(item.ngqty) }}</div>
- </div>
- </div>
- </div>
- </div>
- <div v-if="lineContent02.children!==undefined" class="kb_block03_02 flex_s_c">
- <div
- v-for="item in lineContent02.children.children"
- :key="item.stepseq"
- class="kb_block03_02_content flex_c_c"
- >
- <div class="flex_c_c content01">
- <div
- v-if="item.status==='START'&&(parseFloat(item.ngqty)===0||item.ngqty==='')&&(parseFloat(item.goodqty)===0||item.goodqty==='')"
- class="circle"
- style="background-color: blue;"
- />
- <div
- v-else-if="item.status==='ALLO'&&(parseFloat(item.ngqty)===0||item.ngqty==='')&&(parseFloat(item.goodqty)===0||item.goodqty==='')"
- class="circle"
- style="background-color: rgb(255 255 255)"
- />
- <div
- v-else-if="parseFloat(item.ngqty)+parseFloat(item.goodqty)>=parseFloat(item.planqty)"
- class="circle"
- />
- <div v-else class="circleYellow" />
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <div class="kb_left_top_block">
- <div class="kb_block01 kb_pd10">
- <div>
- <div>浜х嚎鍚嶇О:{{ lineContent03.linename }}</div>
- <div class="kb_mt10">浜х嚎鎬婚噺:{{
- lineContent03.children !== undefined ? lineContent03.lineworkcont : ''
- }}
- </div>
- </div>
- <div>
- <!-- <div>{{ lineContent03.linename }}</div>-->
- <!-- <div v-if="lineContent03.children!==undefined" class="kb_mt10">{{ lineContent03.lineworkcont }}</div>-->
- </div>
- </div>
- <div class="kb_block02 kb_pd10">
- <div>
- <div>閿�鍞崟鍙�:{{ lineContent03.children !== undefined ? lineContent03.children.saleordercode : '' }}</div>
- <div class="kb_mt5">
- 鍔犲伐鍗曞彿:{{ lineContent03.children !== undefined ? lineContent03.children.workcode : '' }}
- </div>
- <div class="kb_mt5">
- 浜у搧鍚嶇О:{{ lineContent03.children !== undefined ? lineContent03.children.partname : '' }}
- </div>
- <div v-if="lineContent03.children&&lineContent03.children.length===0" class="kb_mt5">
- 浠诲姟鏁伴噺:
- </div>
- <div v-else class="kb_mt5">
- 浠诲姟鏁伴噺:{{ lineContent03.children ? parseFloat(lineContent03.children.qty) : '' }}
- </div>
- </div>
-
- </div>
- <div class="kb_block03 kb_pd10 ">
- <div v-if="lineContent03.children!==undefined" class="flex_s_c">
- <div
- v-for="item in lineContent03.children.children"
- :key="item.stepseq"
- class="kb_block03_content flex_c_c"
- >
- <div>
- <div class="content01">{{ item.stepname }}</div>
- </div>
- <div class="content02Parent">
- <div class="content02">
- <div class="content02_1 ">浠诲姟</div>
- <div class="content02_2 borderTop ">{{ parseFloat(item.planqty) }}</div>
- </div>
- <div class="content02">
- <div class="content02_1 ">鍚堟牸</div>
- <div class="content02_2 borderTop ">{{ parseFloat(item.goodqty) }}</div>
- </div>
- <div class="content02" style="border-right: 0">
- <div class="content02_1 ">涓嶈壇</div>
- <div class="content02_2 borderTop ">{{ parseFloat(item.ngqty) }}</div>
- </div>
- </div>
- </div>
- </div>
- <div v-if="lineContent03.children!==undefined" class="kb_block03_02 flex_s_c">
- <div
- v-for="item in lineContent03.children.children"
- :key="item.stepseq"
- class="kb_block03_02_content flex_c_c"
- >
- <div class="flex_c_c content01">
- <div
- v-if="item.status==='START'&&(parseFloat(item.ngqty)===0||item.ngqty==='')&&(parseFloat(item.goodqty)===0||item.goodqty==='')"
- class="circle"
- style="background-color: blue;"
- />
- <div
- v-else-if="item.status==='ALLO'&&(parseFloat(item.ngqty)===0||item.ngqty==='')&&(parseFloat(item.goodqty)===0||item.goodqty==='')"
- class="circle"
- style="background-color: rgb(255 255 255)"
- />
- <div
- v-else-if="parseFloat(item.ngqty)+parseFloat(item.goodqty)>=parseFloat(item.planqty)"
- class="circle"
- />
- <div v-else class="circleYellow" />
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <div class="kb_left_top_block">
- <div class="kb_block01 kb_pd10">
- <div>
- <div>浜х嚎鍚嶇О:{{ lineContent04.linename }}</div>
- <div class="kb_mt10">浜х嚎鎬婚噺:{{
- lineContent04.children !== undefined ? lineContent04.lineworkcont : ''
- }}
- </div>
- </div>
- <div>
- <!-- <div>{{ lineContent04.linename }}</div>-->
- <!-- <div v-if="lineContent04.children!==undefined" class="kb_mt10">{{ lineContent04.lineworkcont }}</div>-->
- </div>
- </div>
- <div class="kb_block02 kb_pd10">
- <div>
- <div>閿�鍞崟鍙�:{{ lineContent04.children !== undefined ? lineContent04.children.saleordercode : '' }}</div>
- <div class="kb_mt5">
- 鍔犲伐鍗曞彿:{{ lineContent04.children !== undefined ? lineContent04.children.workcode : '' }}
- </div>
- <div class="kb_mt5">
- 浜у搧鍚嶇О:{{ lineContent04.children !== undefined ? lineContent04.children.partname : '' }}
- </div>
- <div v-if="lineContent04.children&&lineContent04.children.length===0" class="kb_mt5">
- 浠诲姟鏁伴噺:
- </div>
- <div v-else class="kb_mt5">
- 浠诲姟鏁伴噺:{{ lineContent04.children ? parseFloat(lineContent04.children.qty) : '' }}
- </div>
- </div>
-
- </div>
- <div class="kb_block03 kb_pd10 ">
- <div v-if="lineContent04.children!==undefined" class="flex_s_c">
- <div
- v-for="item in lineContent04.children.children"
- :key="item.stepseq"
- class="kb_block03_content flex_c_c"
- >
- <div>
- <div class="content01">{{ item.stepname }}</div>
- </div>
- <div class="content02Parent">
- <div class="content02">
- <div class="content02_1 ">浠诲姟</div>
- <div class="content02_2 borderTop ">{{ parseFloat(item.planqty) }}</div>
- </div>
- <div class="content02">
- <div class="content02_1 ">鍚堟牸</div>
- <div class="content02_2 borderTop ">{{ parseFloat(item.goodqty) }}</div>
- </div>
- <div class="content02" style="border-right: 0">
- <div class="content02_1 ">涓嶈壇</div>
- <div class="content02_2 borderTop ">{{ parseFloat(item.ngqty) }}</div>
- </div>
- </div>
- </div>
- </div>
- <div v-if="lineContent04.children!==undefined" class="kb_block03_02 flex_s_c">
- <div
- v-for="item in lineContent04.children.children"
- :key="item.stepseq"
- class="kb_block03_02_content flex_c_c"
- >
- <div class="flex_c_c content01">
- <div
- v-if="item.status==='START'&&(parseFloat(item.ngqty)===0||item.ngqty==='')&&(parseFloat(item.goodqty)===0||item.goodqty==='')"
- class="circle"
- style="background-color: blue;"
- />
- <div
- v-else-if="item.status==='ALLO'&&(parseFloat(item.ngqty)===0||item.ngqty==='')&&(parseFloat(item.goodqty)===0||item.goodqty==='')"
- class="circle"
- style="background-color: rgb(255 255 255)"
- />
- <div
- v-else-if="parseFloat(item.ngqty)+parseFloat(item.goodqty)>=parseFloat(item.planqty)"
- class="circle"
- />
- <div v-else class="circleYellow" />
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
</div>
<!-- 2-->
<div class="kb_left_bottom kb_pd10">
<div class="kb_left_bottom_content">
- <div class="content_head kb_title_text">浜х嚎鍔犲伐浠诲姟</div>
+ <div class="content_head kb_title_text">浜х嚎鍔犲伐浠诲姟
+ <div style="margin-left: 30px">{{ number2 }} 鍗�</div>
+ </div>
<div class="content_body">
<el-table
ref="tableData"
@@ -389,12 +117,13 @@
<el-table-column
prop="RowNum"
label="搴忓彿"
- width="40"
+ width="50"
/>
+ <!-- label="鍔犲伐鐘舵��"-->
<el-table-column
prop="status"
- label="鍔犲伐鐘舵��"
- width="70"
+ label="鐘舵��"
+ width="65"
>
<template slot-scope="{row}">
<div v-if="row.status==='ALLO'">宸叉淳鍙�</div>
@@ -405,7 +134,7 @@
<el-table-column
prop="lm_date"
label="娲惧彂鏃堕棿"
- width="95"
+ width="115"
>
<template slot-scope="{row}">
<div>{{ row.lm_date.substring(0, 10) }}</div>
@@ -414,78 +143,88 @@
<el-table-column
prop="saleOrderCode"
label="閿�鍞鍗曞彿"
- width="158"
+ width="178"
>
<template slot-scope="{row}">
- <div v-if="row.saleOrderCode">{{ row.saleOrderCode }}</div>
+ <div v-if="row.saleOrderCode" class="ellipsis">{{ row.saleOrderCode }}</div>
<div v-else>/</div>
</template>
</el-table-column>
<el-table-column
prop="wo_code"
label="鍔犲伐鍗曞彿"
- width="170"
- />
- <el-table-column
- prop="partname"
- label="浜у搧鍚嶇О"
- width="145"
- />
- <el-table-column
- prop="partspec"
- label="瑙勬牸"
- width="130"
+ width="205"
>
<template slot-scope="{row}">
- <div v-if="row.partspec" class="ellipsis">{{ row.partspec }}</div>
+ <div v-if="row.wo_code" class="ellipsis">{{ row.wo_code }}</div>
<div v-else>/</div>
</template>
</el-table-column>
<el-table-column
- prop="name"
- label="鍗曚綅"
- width="50"
- />
+ prop="partname"
+ label="浜у搧鍚嶇О"
+ width="150"
+ >
+ <template slot-scope="{row}">
+ <div v-if="row.partname" class="ellipsis">{{ row.partname }}</div>
+ <div v-else>/</div>
+ </template>
+ </el-table-column>
+ <!-- <el-table-column-->
+ <!-- prop="partspec"-->
+ <!-- label="瑙勬牸"-->
+ <!-- width="125"-->
+ <!-- >-->
+ <!-- <template slot-scope="{row}">-->
+ <!-- <div v-if="row.partspec" class="ellipsis">{{ row.partspec }}</div>-->
+ <!-- <div v-else>/</div>-->
+ <!-- </template>-->
+ <!-- </el-table-column>-->
+ <!-- <el-table-column-->
+ <!-- prop="name"-->
+ <!-- label="鍗曚綅"-->
+ <!-- width="50"-->
+ <!-- />-->
<el-table-column
prop="plan_qty"
label="浠诲姟鏁伴噺"
- width="70"
+ width="85"
/>
<el-table-column
prop="good_qty"
label="瀹屽伐鏁伴噺"
- width="70"
+ width="85"
/>
<el-table-column
prop="ng_qty"
label="涓嶈壇鏁伴噺"
- width="70"
+ width="85"
/>
<el-table-column
prop="wcl"
label="瀹屾垚鐜�"
- width="50"
+ width="60"
>
<template slot-scope="{row}">
<div>{{ parseFloat((row.good_qty * 100 / row.plan_qty).toFixed(2)) }}%</div>
</template>
</el-table-column>
<el-table-column
- prop="planenddate"
- label="棰勮寮�濮�"
- width="95"
- >
- <template slot-scope="{row}">
- <div>{{ row.planenddate.substring(0, 10) }}</div>
- </template>
- </el-table-column>
- <el-table-column
prop="planstartdate"
- label="棰勮缁撴潫"
- width="105"
+ label="棰勮寮�濮�"
+ width="115"
>
<template slot-scope="{row}">
<div>{{ row.planstartdate.substring(0, 10) }}</div>
+ </template>
+ </el-table-column>
+ <el-table-column
+ prop="planenddate"
+ label="棰勮缁撴潫"
+ width="125"
+ >
+ <template slot-scope="{row}">
+ <div>{{ row.planenddate.substring(0, 10) }}</div>
</template>
</el-table-column>
</el-table>
@@ -505,7 +244,7 @@
style="width: 100%;"
:header-cell-style="headerCellStyle"
:cell-style="cellStyle"
- height="426"
+ height="396"
>
<el-table-column
type="index"
@@ -526,12 +265,22 @@
prop="linename"
label="浜х嚎"
width="120"
- />
+ >
+ <template slot-scope="{row}">
+ <div v-if="row.linename" class="ellipsis">{{ row.linename }}</div>
+ <div v-else>/</div>
+ </template>
+ </el-table-column>
<el-table-column
prop="partname"
width="138"
label="浜у搧"
- />
+ >
+ <template slot-scope="{row}">
+ <div v-if="row.partname" class="ellipsis">{{ row.partname }}</div>
+ <div v-else>/</div>
+ </template>
+ </el-table-column>
<el-table-column
prop="good_qty"
label="鏁伴噺"
@@ -562,271 +311,191 @@
LineSearchBottomLeftData,
LineSearchBottomRightData,
LineSearchTopLeftData,
- LineSearchTopRightData,
- ShopSearchLine
+ LineSearchTopRightData, ShopSearch, WkspReportNotice
} from '@/api/dzkb'
+import MarqueeTips from 'vue-marquee-tips'
export default {
name: 'Index2',
+ components: {
+ MarqueeTips
+ },
data() {
return {
+
+ onLine: navigator.onLine, // 鐩戝惉缃戠粶鏄惁鍦ㄧ嚎
+
headTime: '',
- lineArr: [],
- // lineContent01: {},
- lineContent01: {
- linename: '',
- lineworkcont: '',
- children: undefined
- },
- lineContent02: {
- linename: '',
- lineworkcont: '',
- children: undefined
- },
- lineContent03: {
- linename: '',
- lineworkcont: '',
- children: undefined
- },
- lineContent04: {
- linename: '',
- lineworkcont: '',
- children: undefined
- // children: {
- // workcode: '',
- // partname: '',
- // qty: 0,
- // saleordercode: '',
- // children: [
- // {
- // stepseq: '',
- // stepname: '',
- // planqty: 0,
- // goodqty: '',
- // ngqty: ''
- // }
- // ]
- // }
- },
+ lineContent: [],
+ lineContent3: [],
leftTopData: [],
tableData: [],
tableDataRank: [],
- lineCodeArr: []
+ lineCodeArr: [],
+ ShopArr: [], // 杞﹂棿缂栫爜鏁扮粍
+
+ number1: '',
+ number2: '',
+
+ MarqueeTipsContent: '', // 鍏憡
+ speed: 100, // 鍏憡鎾斁鐨勯�熷害
+
+ MarqueeTipsTask: null,
+ ShopSearchTask: null,
+ ShopSearchLineTask: null,
+ TableDataRollTask: null,
+ TableDataRankRollTask: null,
+ EchartsTask: null
}
},
created() {
setInterval(this.getNowTime, 1000)
+
+ // 涓ゅ皬鏃剁湅鏉垮埛鏂颁竴娆�
+ setInterval(() => {
+ window.location.reload()
+ }, 1000 * 60 * 120)
},
mounted() {
- this.getValue()
+ // 鐩戝惉缃戠粶鏄惁鍦ㄧ嚎
+ window.addEventListener('online', this.updateOnlineStatus)
+ window.addEventListener('offline', this.updateOnlineStatus)
+ this.updateOnlineStatus({ type: this.onLine ? 'online' : 'offline', isFirst: true })
+ },
+ beforeDestroy() {
+ window.removeEventListener('online', this.updateOnlineStatus)
+ window.removeEventListener('offline', this.updateOnlineStatus)
},
methods: {
- 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)
+ // 鏇存柊缃戠粶鐘舵��
+ 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 handleEveryLine(item, index) {
- const res = await LineSearchTopLeftData([item])
-
- let res1, res2, res3, res4
- if (res.data[0].linecode === this.lineCodeArr[0]) {
- res1 = res
+ // 鑾峰彇杞﹂棿缂栫爜
+ async getShopSearch() {
+ const res1 = await ShopSearch()
+ if (res1.code === '200') {
+ this.ShopArr = []
+ res1.data.forEach(item => {
+ this.ShopArr.push(item.org_code)
+ })
}
- if (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
+ setInterval(() => {
+ this.ShopSearchTask = ShopSearch().then(res1 => {
+ if (res1.code === '200') {
+ this.ShopArr = []
+ res1.data.forEach(item => {
+ this.ShopArr.push(item.org_code)
})
}
- if (res1.data[0].children.length === count++) {
- count = 0
- this.lineContent01 = {
- linename: res1.data[0].linename,
- lineworkcont: res1.data[0].lineworkcont,
- children: res1.data[0].children ? res1.data[0].children[count] : []
- }
- }
- }, 1000 * 3)
- } else if (index === 1) {
- let count = 0
- if (flag2) {
- this.lineContent02 = {
- linename: res2.data[0].linename,
- lineworkcont: res2.data[0].lineworkcont,
- children: res2.data[0].children ? res2.data[0].children[count] : []
- }
- flag2 = false
+ })
+ }, 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()
}
- 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)
- }
+ this.lineContent3 = this.lineContent.slice(start, start + 3)
+ start = start + 3
+ }, 1000 * 3)
},
// 浜х嚎鍔犲伐浠诲姟
getTableDataRoll() {
- LineSearchBottomLeftData().then(res => {
+ LineSearchBottomLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
this.tableData = res.data
+ this.number2 = this.tableData.length
const divData = this.$refs.tableData.bodyWrapper
// 鎷垮埌鍏冪礌鍚庯紝瀵瑰厓绱犺繘琛屽畾鏃跺鍔犺窛绂婚《閮ㄨ窛绂伙紝瀹炵幇婊氬姩鏁堟灉(姝ら厤缃负姣�100姣绉诲姩1鍍忕礌)
- const task = setInterval(() => {
+ this.TableDataRollTask = setInterval(() => {
// 鍏冪礌鑷璺濈椤堕儴1鍍忕礌
divData.scrollTop += 1
// divData.scrollTop += divData.scrollHeight / this.tableData.length
@@ -834,10 +503,11 @@
if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
// 閲嶇疆table璺濈椤堕儴璺濈
divData.scrollTop = 0
- LineSearchBottomLeftData().then(res => {
+ LineSearchBottomLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
this.tableData = res.data
+ this.number2 = this.tableData.length
if (this.tableData.length > 10) {
- clearInterval(task)
+ clearInterval(this.TableDataRollTask)
this.getTableDataRoll()
}
})
@@ -847,12 +517,12 @@
},
// 褰撴棩瀹屽伐浜у搧鏁伴噺鎺掕
getTableDataRankRoll() {
- LineSearchTopRightData().then(res => {
+ LineSearchTopRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
this.tableDataRank = res.data
const divData = this.$refs.tableDataRank.bodyWrapper
// 鎷垮埌鍏冪礌鍚庯紝瀵瑰厓绱犺繘琛屽畾鏃跺鍔犺窛绂婚《閮ㄨ窛绂伙紝瀹炵幇婊氬姩鏁堟灉(姝ら厤缃负姣�100姣绉诲姩1鍍忕礌)
- const task = setInterval(() => {
+ this.TableDataRankRollTask = setInterval(() => {
// 鍏冪礌鑷璺濈椤堕儴1鍍忕礌
// divData.scrollTop += divData.scrollHeight / this.tableDataRank.length
divData.scrollTop += 1
@@ -860,26 +530,26 @@
if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
// 閲嶇疆table璺濈椤堕儴璺濈
divData.scrollTop = 0
- LineSearchTopRightData().then(res => {
+ LineSearchTopRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
this.tableDataRank = res.data
- if (this.tableDataRank.length > 10) {
- clearInterval(task)
+ if (this.tableDataRank.length > 9) {
+ clearInterval(this.TableDataRankRollTask)
this.getTableDataRankRoll()
}
})
}
- }, this.tableDataRank.length <= 10 ? 1000 * 3 : 100)
+ }, this.tableDataRank.length <= 9 ? 1000 * 3 : 100)
})
},
// 鑾峰彇echarts
getEcharts() {
- LineSearchBottomRightData().then(res => {
+ LineSearchBottomRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
loadEcharts('bar02', bar02(res.data.map(i => i.cont), res.data.map(i => i.name)))
})
- setInterval(() => {
- LineSearchBottomRightData().then(res => {
+ this.EchartsTask = setInterval(() => {
+ LineSearchBottomRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
loadEcharts('bar02', bar02(res.data.map(i => i.cont), res.data.map(i => i.name)))
})
}, 1000 * 15)
@@ -925,8 +595,6 @@
</script>
<style scoped lang="scss">
-//$kbBorderColor: #3A0088;
-//$kbBorderColor: #09d8f2;
$kbBorderColor: rgba(9, 216, 242, 0.4);
$kbBackgroundColor: rgba(30, 33, 46, 0.6);
.kb_content {
@@ -934,9 +602,7 @@
position: relative;
height: 990px;
width: 100%;
- //background-color: #000;
letter-spacing: 2px;
- //color: #d8d7d9;
color: #fff;
.kb_left {
@@ -946,9 +612,8 @@
.kb_left_top_title01 {
position: absolute;
- top: 10px;
+ top: 37px;
left: 15px;
- font-size: 18px;
display: flex;
color: #00ffff;
@@ -966,118 +631,115 @@
display: flex;
flex-direction: column;
justify-content: flex-start;
- padding-top: 30px;
+ padding-top: 70px;
- .kb_left_top_block {
- margin-top: 10px;
- width: 100%;
- height: 100px;
+ .kb_left_top02 {
display: flex;
- border-radius: 5px;
- font-size: 14px;
- //border: 1px solid rgba(255, 255, 255, 0.6);
- border: 1px solid $kbBorderColor;
+ flex-direction: column;
justify-content: flex-start;
+ border: 1px solid $kbBorderColor;
+ height: 400px;
+ border-radius: 5px;
+ background-color: $kbBackgroundColor;
- .kb_block01 {
- width: 171px;
+ .kb_left_top_block {
+ width: 100%;
+ height: 133px;
display: flex;
- align-items: center;
- border-right: 1px solid $kbBorderColor;
- background-color: $kbBackgroundColor;
- border-bottom-left-radius: 5px;
- border-top-left-radius: 5px;
+ 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_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;
+ .kb_block03 {
+ width: 1020px;
+ font-size: 17px;
display: flex;
flex-direction: column;
+ //font-size: 12px;
+ border-radius: 5px;
- .content01 {
- //width: 50px;
- width: 100%;
- height: 20px;
- border-bottom: 1px solid $kbBorderColor;
+ .kb_block03_content {
+ border: 1px solid $kbBorderColor;
+ width: 180px;
+ height: 80px;
+ margin-right: 15px;
display: flex;
- align-items: center;
- justify-content: center;
- }
+ flex-direction: column;
- .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;
- }
+ .content01 {
+ height: 30px;
+ width: 100%;
+ border-bottom: 1px solid $kbBorderColor;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
- }
- }
- }
+ .content02Parent {
+ display: flex;
- .kb_block03_02 {
- margin-top: 7px;
- display: flex;
+ .content02 {
+ width: 60px;
+ border-right: 1px solid $kbBorderColor;
- .kb_block03_02_content {
- width: 152px;
- margin-right: 15px;
+ .content02_1 {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ //height: 50%;
+ height: 25px;
+ }
- .content01 {
- .circle {
- width: 26px;
- height: 26px;
- background-color: #00ff8b;
- border-radius: 50%;
+ .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 {
@@ -1087,20 +749,10 @@
height: 460px;
display: flex;
flex-direction: column;
- //border: 1px solid $kbBorderColor;
.content_head {
- ////font-size: 26px;
- //font-size: 18px;
- //height: 55px;
- //line-height: 55px;
- ////border-bottom: 1px solid $kbBorderColor;
- ////text-align: center;
- //padding-left: 10px;
-
- font-size: 18px;
+ display: flex;
line-height: 20px;
- //padding-left: 10px;
margin-bottom: 10px;
margin-top: -10px;
color: #00ffff;
@@ -1119,19 +771,19 @@
height: 100%;
.kb_right_top {
+ margin-top: 30px;
+ margin-bottom: -30px;
height: 476px;
width: 100%;
.kb_right_top_content {
- //border: 1px solid $kbBorderColor;
- height: 460px;
+ height: 430px;
display: flex;
flex-direction: column;
.content_head {
- font-size: 18px;
+ //font-size: 18px;
line-height: 20px;
- //padding-left: 10px;
margin-bottom: 10px;
margin-top: -10px;
color: #00ffff;
@@ -1139,29 +791,26 @@
.content_body {
border: 1px solid $kbBorderColor;
- //border-radius: 5px;
}
}
}
.kb_right_bottom {
- height: 481px;
+ height: 482px;
margin-top: 8px;
.kb_right_bottom_content_title {
color: #00ffff;
- font-size: 18px;
- margin-bottom: 10px;
- margin-top: -10px;
+ margin-bottom: 5px;
+ margin-top: -12px;
}
.kb_right_bottom_content {
border: 1px solid $kbBorderColor;
- height: 440px;
+ height: 441px;
width: 100%;
border-radius: 5px;
background-color: $kbBackgroundColor;
- //height: 100%;
}
}
}
@@ -1172,7 +821,6 @@
}
::v-deep .el-table__body-wrapper {
- //background-color: #044563;
background-color: rgba(30, 33, 46);
}
@@ -1183,66 +831,13 @@
::v-deep .cell {
padding: 0 !important;
+ font-size: 18px;
}
-//
-///* 瀹氫箟keyframes鍔ㄧ敾锛屽懡鍚嶄负blink*/
-//@keyframes blink {
-// 0% {
-// opacity: 1
-// }
-// 100% {
-// opacity: 0
-// }
-//}
-//
-///*娣诲姞鍏煎鎬у墠缂�*/
-//@-webkit-keyframes blink {
-// 0% {
-// opacity: 1
-// }
-// 100% {
-// opacity: 0
-// }
-//}
-//
-//@-o-keyframes blink {
-// 0% {
-// opacity: 1
-// }
-// 100% {
-// opacity: 0
-// }
-//}
-//
-//@-moz-keyframes blink {
-// 0% {
-// opacity: 1
-// }
-// 100% {
-// opacity: 0
-// }
-//}
-//
-//@-ms-keyframes blink {
-// 0% {
-// opacity: 1
-// }
-// 100% {
-// opacity: 0
-// }
-//}
-//
.circleYellow {
width: 26px;
height: 26px;
background-color: rgb(255 255 0);
border-radius: 50%;
-
- //animation: blink 2s linear infinite;
- //-webkit-animation: blink 2s linear infinite;
- //-moz-animation: blink 2s linear infinite;
- //-ms-animation: blink 2s linear infinite;
- //-o-animation: blink 2s linear infinite;
}
</style>
diff --git a/src/views/kb/zpcj.vue b/src/views/kb/zpcj.vue
deleted file mode 100644
index 2e85f2c..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="planstartdate"
- label="棰勮寮�濮�"
- width="115"
- >
- <template slot-scope="{row}">
- <div>{{ row.planstartdate.substring(0, 10) }}</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="planenddate"
- label="棰勮缁撴潫"
- width="125"
- >
- <template slot-scope="{row}">
- <div>{{ row.planenddate.substring(0, 10) }}</div>
- </template>
- </el-table-column>
- </el-table>
- </div>
- </div>
- </div>
- </div>
- <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