From 0c918c3f8ff8f711ac8194582895967155812f0d Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期二, 06 十二月 2022 11:26:15 +0800
Subject: [PATCH] 1.看板修改
---
src/icons/svg/zlfx02.svg | 1
src/permission.js | 2
src/utils/myEcharts_zngc.js | 3733 ++++++++++++++++++++++++++++++++++++
src/icons/svg/zncc.svg | 1
src/utils/echarts-liquidfill.min.js | 2
src/assets/images/kb_body.jpg | 0
src/views/kb/ckgl.vue | 74
src/icons/svg/ryfx02.svg | 1
src/icons/svg/xsdd02.svg | 1
src/router/index.js | 13
src/icons/svg/ckgl02.svg | 1
src/icons/svg/scjh02.svg | 1
/dev/null | 843 --------
src/views/kb/zngc.vue | 1475 ++++++++++++++
src/assets/images/box03.png | 0
src/icons/svg/cjhn02.svg | 1
src/views/kb/zhkbc.vue | 4
src/icons/svg/sbfx02.svg | 1
18 files changed, 5,262 insertions(+), 892 deletions(-)
diff --git a/src/assets/images/box03.png b/src/assets/images/box03.png
new file mode 100644
index 0000000..b4c2af7
--- /dev/null
+++ b/src/assets/images/box03.png
Binary files differ
diff --git a/src/assets/images/kb_body.jpg b/src/assets/images/kb_body.jpg
new file mode 100644
index 0000000..7d5767a
--- /dev/null
+++ b/src/assets/images/kb_body.jpg
Binary files differ
diff --git a/src/icons/svg/cjhn02.svg b/src/icons/svg/cjhn02.svg
new file mode 100644
index 0000000..ab5fba7
--- /dev/null
+++ b/src/icons/svg/cjhn02.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="1664680797379" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="21073" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M502.087111 149.390222a2819.456 2819.456 0 0 0-114.944 152.064c-29.681778 42.325333-56.32 83.285333-79.132444 122.168889-54.215111 92.387556-84.124444 168.604444-84.124445 220.103111 0 173.824 137.088 314.396444 305.777778 314.396445 168.675556 0 305.777778-140.572444 305.777778-314.396445 0-51.484444-29.909333-127.715556-84.124445-220.103111-22.812444-38.883556-49.450667-79.843556-79.132444-122.168889a2819.456 2819.456 0 0 0-114.944-152.064 2847.345778 2847.345778 0 0 0-27.591111-33.607111c-8.604444 10.325333-17.834667 21.560889-27.562667 33.607111zM158.876444 643.726222c0-66.204444 33.408-151.338667 93.056-253.013333 23.765333-40.504889 51.342222-82.915556 81.976889-126.577778a2883.413333 2883.413333 0 0 1 117.617778-155.619555 2798.250667 2798.250667 0 0 1 49.692445-59.790223l3.982222-4.579555 24.462222-27.960889 24.462222 27.960889 3.982222 4.579555c3.143111 3.683556 6.812444 7.964444 10.922667 12.828445 11.704889 13.852444 24.746667 29.610667 38.769778 46.961778a2883.413333 2883.413333 0 0 1 117.617778 155.619555c30.634667 43.662222 58.197333 86.072889 81.976889 126.577778 59.648 101.674667 93.056 186.808889 93.056 253.013333 0 209.365333-165.831111 379.420444-370.787556 379.420445-204.970667 0-370.787556-170.055111-370.787556-379.420445z" p-id="21074" fill="#09d8f2"></path><path d="M529.664 910.193778c-142.876444 0-258.688-116.224-258.688-259.598222 0-143.36 134.442667-70.769778 258.688 0 124.757333 71.068444 258.688-143.36 258.688 0 0 143.374222-115.825778 259.598222-258.702222 259.598222z" p-id="21075" fill="#09d8f2"></path><path d="M724.920889 180.821333c0-23.651556 15.658667-51.754667 41.813333-84.110222a512.213333 512.213333 0 0 1 39.594667-43.434667l11.235555-10.766222 11.249778 10.766222 3.527111 3.456A512.199111 512.199111 0 0 1 868.408889 96.711111a315.690667 315.690667 0 0 1 23.438222 32.668445C903.608889 148.48 910.222222 165.518222 910.222222 180.821333c0 51.584-41.443556 93.468444-92.643555 93.468445s-92.657778-41.884444-92.657778-93.468445z m67.100444-63.672889c-21.589333 26.695111-34.588444 50.033778-34.588444 63.672889 0 33.706667 26.965333 60.956444 60.145778 60.956445 33.166222 0 60.131556-27.249778 60.131555-60.956445 0-7.950222-4.664889-19.982222-13.553778-34.432a284.174222 284.174222 0 0 0-21.020444-29.240889 480.213333 480.213333 0 0 0-25.400889-28.828444 392.647111 392.647111 0 0 0-25.713778 28.828444zM113.777778 329.059556c0-17.692444 11.064889-37.546667 29.582222-60.458667a353.422222 353.422222 0 0 1 27.377778-30.023111l11.235555-10.780445 11.249778 10.780445a353.422222 353.422222 0 0 1 27.363556 30.008889c6.300444 7.793778 11.804444 15.402667 16.327111 22.755555 8.462222 13.752889 13.269333 26.140444 13.269333 37.717334 0 37.930667-30.492444 68.750222-68.195555 68.750222-37.717333 0-68.209778-30.819556-68.209778-68.750222z m54.869333-40.021334c-13.937778 17.251556-22.357333 32.341333-22.357333 40.021334 0 20.053333 16.014222 36.252444 35.697778 36.252444 19.669333 0 35.697778-16.199111 35.697777-36.252444 0-4.224-2.887111-11.619556-8.462222-20.693334a188.202667 188.202667 0 0 0-13.909333-19.342222 312.462222 312.462222 0 0 0-13.340445-15.374222 312.462222 312.462222 0 0 0-13.326222 15.388444z" p-id="21076" fill="#09d8f2"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/ckgl02.svg b/src/icons/svg/ckgl02.svg
new file mode 100644
index 0000000..58f58ef
--- /dev/null
+++ b/src/icons/svg/ckgl02.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="1664680808606" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="21739" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M963.413333 349.013333L554.666667 61.44a74.24 74.24 0 0 0-85.333334 0L60.586667 349.013333a42.666667 42.666667 0 0 0-10.24 59.733334 42.666667 42.666667 0 0 0 59.733333 10.24L512 135.253333l401.92 283.733334A42.666667 42.666667 0 0 0 938.666667 426.666667a42.666667 42.666667 0 0 0 34.986666-17.92 42.666667 42.666667 0 0 0-10.24-59.733334zM853.333333 448a42.666667 42.666667 0 0 0-42.666666 42.666667V896H213.333333v-405.333333a42.666667 42.666667 0 0 0-85.333333 0v410.453333A80.64 80.64 0 0 0 208.64 981.333333h606.72A80.64 80.64 0 0 0 896 901.12V490.666667a42.666667 42.666667 0 0 0-42.666667-42.666667z" p-id="21740" fill="#09d8f2"></path><path d="M682.666667 832a64 64 0 0 0 64-64v-85.333333a64 64 0 0 0-64-64h-85.333334a64 64 0 0 0-64 64v85.333333a64 64 0 0 0 64 64zM576 768v-85.333333a21.333333 21.333333 0 0 1 21.333333-21.333334h85.333334a21.333333 21.333333 0 0 1 21.333333 21.333334v85.333333a21.333333 21.333333 0 0 1-21.333333 21.333333h-85.333334a21.333333 21.333333 0 0 1-21.333333-21.333333zM341.333333 576h85.333334a64 64 0 0 0 64-64v-85.333333A64 64 0 0 0 426.666667 362.666667H341.333333A64 64 0 0 0 277.333333 426.666667v85.333333A64 64 0 0 0 341.333333 576zM320 426.666667a21.333333 21.333333 0 0 1 21.333333-21.333334h85.333334a21.333333 21.333333 0 0 1 21.333333 21.333334v85.333333a21.333333 21.333333 0 0 1-21.333333 21.333333H341.333333a21.333333 21.333333 0 0 1-21.333333-21.333333zM277.333333 768A64 64 0 0 0 341.333333 832h85.333334a64 64 0 0 0 64-64v-85.333333a64 64 0 0 0-64-64H341.333333A64 64 0 0 0 277.333333 682.666667z m42.666667-85.333333a21.333333 21.333333 0 0 1 21.333333-21.333334h85.333334a21.333333 21.333333 0 0 1 21.333333 21.333334v85.333333a21.333333 21.333333 0 0 1-21.333333 21.333333H341.333333a21.333333 21.333333 0 0 1-21.333333-21.333333z" p-id="21741" fill="#09d8f2"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/ryfx02.svg b/src/icons/svg/ryfx02.svg
new file mode 100644
index 0000000..418376a
--- /dev/null
+++ b/src/icons/svg/ryfx02.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="1664680706335" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9757" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M245.956679 257.845119a192.672086 192.672086 0 0 1 384.777488 0A185.871894 185.871894 0 0 1 439.76213 442.016965a187.571942 187.571942 0 0 1-193.805451-184.171846zM65.751611 887.996175A373.443836 373.443836 0 0 1 402.361078 515.685704L442.595543 510.018878a249.340346 249.340346 0 0 0 137.13719-37.967735l14.733748-10.766969A258.97395 258.97395 0 0 0 431.261891 0.004533a257.273902 257.273902 0 0 0-249.907029 257.840586 261.807363 261.807363 0 0 0 98.036091 203.439055l18.133843 10.766969-18.133843 7.366874A437.478971 437.478971 0 0 0 0.583111 886.296127 131.470364 131.470364 0 0 0 121.286506 1020.033222H442.595543c10.766969 0 34.000956-17.000478 34.000956-34.000957s-23.233987-34.000956-34.000956-34.000956H122.986554a63.468452 63.468452 0 0 1-57.234943-64.035134z m893.658467-88.969169a107.103012 107.103012 0 0 0-94.069312 107.669695 82.73566 82.73566 0 0 0 7.366874 32.867591l-47.034657 25.500717-18.133843-18.133843a103.702917 103.702917 0 0 0-61.768404-21.533939 119.57003 119.57003 0 0 0-61.768404 21.533939c-7.366874 7.366874-14.733748 10.766969-18.133843 18.133843L623.933976 940.697657a91.235899 91.235899 0 0 0 5.666826-34.000956 108.236377 108.236377 0 0 0-94.069312-107.669695c0-7.366874-3.400096-21.533939-3.400096-36.267687s3.400096-25.500717 3.400096-36.267686a107.103012 107.103012 0 0 0 94.069312-108.803061 80.46893 80.46893 0 0 0-6.800191-32.867591l46.467974-26.067399a73.102056 73.102056 0 0 0 18.133843 15.30043 102.002869 102.002869 0 0 0 56.66826 21.533939 105.969647 105.969647 0 0 0 56.668261-21.533939c7.366874-7.366874 14.733748-10.766969 18.133843-15.30043l47.034656 26.067399a90.669217 90.669217 0 0 0-7.366874 32.867591 109.936425 109.936425 0 0 0 94.069313 108.803061c0 7.366874 3.400096 21.533939 3.400095 36.267686a87.269121 87.269121 0 0 1 3.400096 36.267687z m18.133843-123.536808h-3.400095a56.66826 56.66826 0 0 1-56.668261-56.66826c0-7.366874 3.400096-18.700526 3.400096-21.533939a46.467974 46.467974 0 0 0-13.600383-52.701483L840.406731 510.018878h-18.133843a39.1011 39.1011 0 0 0-32.867591 14.733747 86.135756 86.135756 0 0 1-43.634561 25.500718c-14.733748 0-36.267687-18.133843-47.034656-25.500718a45.901291 45.901291 0 0 0-32.867591-14.733747 20.400574 20.400574 0 0 0-14.733748 3.400095l-68.568595 36.267687a45.334608 45.334608 0 0 0-14.733748 51.001434 88.969169 88.969169 0 0 1 3.400096 22.100622 56.66826 56.66826 0 0 1-56.668261 56.66826H510.597455a39.1011 39.1011 0 0 0-32.867591 32.867591 308.84202 308.84202 0 0 0-7.366874 56.668261 150.17089 150.17089 0 0 0 7.366874 56.66826 38.534417 38.534417 0 0 0 32.867591 32.867591h3.400096a56.66826 56.66826 0 0 1 56.66826 56.668261c0 7.366874-3.400096 18.133843-3.400095 21.533939a44.767926 44.767926 0 0 0 14.733747 51.001434l64.601817 36.267687a36.834369 36.834369 0 0 1 18.133844-3.400096 39.1011 39.1011 0 0 0 32.867591-14.733747c7.366874-7.366874 28.900813-28.900813 47.034656-28.900813a80.46893 80.46893 0 0 1 47.034656 28.900813 45.901291 45.901291 0 0 0 32.867591 14.733747 34.567639 34.567639 0 0 0 18.133844-3.400095l64.601816-40.234465a45.334608 45.334608 0 0 0 14.733748-51.001435 96.902725 96.902725 0 0 1-2.833413-21.533939 56.66826 56.66826 0 0 1 56.668261-56.66826h3.400095a39.1011 39.1011 0 0 0 32.867591-32.867591 259.540633 259.540633 0 0 0 7.366874-56.668261 221.572898 221.572898 0 0 1-10.200287-51.001434 38.534417 38.534417 0 0 0-31.734226-31.734226z m-231.773185 134.303777a47.034656 47.034656 0 1 1 47.034656-47.034656 47.601339 47.601339 0 0 1-47.034656 47.034656z m18.133844-145.070746a99.169456 99.169456 0 0 0-116.169934 119.570029 100.869504 100.869504 0 0 0 79.902247 79.902247 98.036091 98.036091 0 0 0 116.169934-116.169933 100.302821 100.302821 0 0 0-79.902247-83.302343z" fill="#09d8f2" p-id="9758"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/sbfx02.svg b/src/icons/svg/sbfx02.svg
new file mode 100644
index 0000000..24dec5d
--- /dev/null
+++ b/src/icons/svg/sbfx02.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="1664680718379" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10775" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M966.136837 260.049194l-52.19233 52.37482A142.890189 142.890189 0 0 1 711.927344 109.494398l52.192329-52.19233c28.833525-28.833525 9.672005-62.776788-42.337833-54.747199a261.509119 261.509119 0 0 0-215.521473 313.336468l-437.97759 437.97759A142.707698 142.707698 0 0 0 269.934959 956.251072l437.97759-437.97759A261.144138 261.144138 0 0 0 1020.336563 302.9345c8.759552-52.37482-25.366202-71.71883-54.199726-42.885306zM202.595905 888.912017a47.630063 47.630063 0 1 1 0-67.339054 47.630063 47.630063 0 0 1 0 67.339054z m-47.447573-620.468252l164.241597 165.154049 67.339054-67.521545-164.241596-164.241596-36.498133-70.623887-118.43644-84.675667L0.21376 113.874173l84.128195 117.888968z m552.216745 350.564562a23.723786 23.723786 0 0 0-33.578282 0l-101.099827 101.099827a23.723786 23.723786 0 0 0 0 33.578282l238.332805 238.332805A95.260126 95.260126 0 1 0 945.697882 857.706114z" p-id="10776" fill="#09d8f2"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/scjh02.svg b/src/icons/svg/scjh02.svg
new file mode 100644
index 0000000..f87d7b5
--- /dev/null
+++ b/src/icons/svg/scjh02.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="1664680511324" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2741" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M751.855 562.229c-107.579 0-194.778 87.223-194.778 194.797 0 107.584 87.199 194.782 194.778 194.782 107.574 0 194.797-87.198 194.797-194.782 0-107.575-87.213-194.797-194.797-194.797z m137.083 208.085c0 7.957-6.463 14.426-14.431 14.426H773.273v86.666a14.404 14.404 0 0 1-14.431 14.431h-14.427c-7.967 0-14.416-6.436-14.416-14.431V784.85H628.984c-7.948 0-14.431-6.464-14.431-14.431v-14.44c0-7.958 6.463-14.431 14.431-14.431h101.225v-86.671c0-7.986 6.454-14.431 14.44-14.431h14.422c7.967 0 14.421 6.444 14.421 14.431v86.565h101.021c7.948 0 14.431 6.464 14.431 14.422v14.45h-0.006zM268.89 234.46c22.832 0 41.336-17.896 41.336-39.96v-79.903c0-22.075-18.505-39.96-41.336-39.96-22.827 0-41.322 17.886-41.322 39.96V194.5c0 22.07 18.495 39.96 41.322 39.96zM682.205 234.46c22.826 0 41.331-17.896 41.331-39.96v-79.903c0-22.075-18.515-39.96-41.331-39.96-22.827 0-41.337 17.886-41.337 39.96V194.5c0 22.07 18.51 39.96 41.337 39.96zM475.547 234.46c22.827 0 41.332-17.896 41.332-39.96v-79.903c0-22.075-18.505-39.96-41.332-39.96s-41.322 17.886-41.322 39.96V194.5c-0.009 22.07 18.496 39.96 41.322 39.96z" fill="#09d8f2" p-id="2742"></path><path d="M528.691 793.807H220.676c-19.028 0-34.439-14.916-34.439-33.297 0-18.382 15.411-33.288 34.439-33.288h307.269c4.598-34.06 16.739-65.71 34.707-93.229H227.568c-22.836 0-41.332-17.886-41.332-39.951 0-22.074 18.495-39.951 41.332-39.951h425.309c30.128-14.793 63.986-23.122 99.816-23.122 45.087 0 87.07 13.203 122.386 35.887V194.5c0-22.065-18.495-39.952-41.327-39.952h-68.889V194.5c0 44.14-37.005 79.912-82.658 79.912s-82.663-35.772-82.663-79.912v-39.952H558.21V194.5c0 44.14-37.005 79.912-82.663 79.912-45.644 0-82.658-35.772-82.658-79.912v-39.952h-41.336V194.5c0 44.14-37 79.912-82.653 79.912-45.653 0-82.663-35.772-82.663-79.912v-39.952h-68.894c-22.831 0-41.327 17.886-41.327 39.952v692.531c0 22.061 18.5 39.946 41.327 39.946h484.199c-37.991-33.977-64.464-80.559-72.851-133.17zM227.568 380.944h495.968c22.827 0 41.327 17.896 41.327 39.956 0 22.065-18.5 39.951-41.327 39.951H227.568c-22.836 0-41.332-17.886-41.332-39.951 0-22.061 18.495-39.956 41.332-39.956z" fill="#09d8f2" p-id="2743"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/xsdd02.svg b/src/icons/svg/xsdd02.svg
new file mode 100644
index 0000000..f46afa4
--- /dev/null
+++ b/src/icons/svg/xsdd02.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="1664680599125" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3426" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M343.381333 255.1808a305.4592 305.4592 0 0 1 106.257067-44.032 68.266667 68.266667 0 0 1 124.7232 0 305.4592 305.4592 0 0 1 106.257067 44.032 68.266667 68.266667 0 0 1 88.200533 88.200533 305.4592 305.4592 0 0 1 44.032 106.257067 68.266667 68.266667 0 0 1 0 124.7232 305.4592 305.4592 0 0 1-44.032 106.257067 68.266667 68.266667 0 0 1-88.200533 88.200533 305.4592 305.4592 0 0 1-106.257067 44.032 68.266667 68.266667 0 0 1-124.7232 0 305.4592 305.4592 0 0 1-106.257067-44.032 68.266667 68.266667 0 0 1-88.200533-88.200533 305.4592 305.4592 0 0 1-44.032-106.257067 68.266667 68.266667 0 0 1 0-124.7232 305.4592 305.4592 0 0 1 44.032-106.257067 68.266667 68.266667 0 0 1 88.200533-88.200533z m140.322134 107.588267l-133.256534 133.256533a31.402667 31.402667 0 0 0 0 44.270933l133.256534 133.256534a31.402667 31.402667 0 0 0 44.270933 0l133.256533-133.256534c12.0832-12.0832 21.8112-35.976533 21.435734-53.0432 0 0 0.443733-102.468267-21.504-124.450133-21.947733-21.947733-123.733333-21.435733-123.733334-21.435733-17.646933-0.546133-41.506133 9.181867-53.725866 21.4016zM580.266667 477.866667a34.133333 34.133333 0 1 1 0-68.266667 34.133333 34.133333 0 0 1 0 68.266667z" fill="#09d8f2" p-id="3427"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/zlfx02.svg b/src/icons/svg/zlfx02.svg
new file mode 100644
index 0000000..6dfefc7
--- /dev/null
+++ b/src/icons/svg/zlfx02.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="1664680628689" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4757" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M516.07552 0l425.51296 186.1632v279.32672c0 258.2528-181.5552 500.08064-425.51296 558.51008C275.6608 965.30432 95.39584 728.73984 91.62752 473.64096l-0.06144-8.15104V186.14272L516.07552 0z m0.1024 81.92l-343.6544 156.3648v234.63936c0 216.8832 146.96448 419.328 343.6544 469.15584 197.48864-49.09056 344.4736-252.2112 344.4736-469.15584V238.2848L516.17792 81.92z m0.4096 143.36c134.12352 0 242.85184 110.03904 242.85184 245.76 0 53.08416-16.62976 102.21568-44.89216 142.39744l43.88864 44.40064-57.2416 57.93792-43.90912-44.40064A239.8208 239.8208 0 0 1 516.58752 716.8c-134.144 0-242.8928-110.03904-242.8928-245.76s108.7488-245.76 242.8928-245.76z m0 81.92c-89.43616 0-161.91488 73.35936-161.91488 163.84s72.4992 163.84 161.91488 163.84a159.744 159.744 0 0 0 82.24768-22.69184l-40.7552-41.22624 57.2416-57.93792 40.7552 41.24672A164.5568 164.5568 0 0 0 678.48192 471.04c0-90.48064-72.4992-163.84-161.8944-163.84z" p-id="4758" fill="#09d8f2"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/zncc.svg b/src/icons/svg/zncc.svg
new file mode 100644
index 0000000..5f3fb37
--- /dev/null
+++ b/src/icons/svg/zncc.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="1664768961489" class="icon" viewBox="0 0 1197 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2688" xmlns:xlink="http://www.w3.org/1999/xlink" width="149.625" height="128"><path d="M246.280708 449.881781h170.542624v170.542624H246.280708zM246.280708 733.835318h170.542624v170.542624H246.280708zM508.677917 733.835318h170.542624v170.542624H508.677917z" fill="#09d8f2" p-id="2689"></path><path d="M169.595391 923.322612h208.391368v-208.391368h-208.391368z m37.889339-170.502029h132.612689v132.612689h-132.612689zM431.965536 923.322612h208.391368v-208.391368h-208.391368z m37.88934-170.502029h132.612688v132.612689h-132.612688zM169.595391 639.369075h208.391368v-208.391368h-208.391368z m37.889339-170.502029h132.612689v132.612689h-132.612689z" fill="#09d8f2" p-id="2690"></path><path d="M1147.005035 705.107079a50.460481 50.460481 0 0 0-46.658016 31.421088h-130.85354l-90.379607 89.824799v-130.095754a50.365758 50.365758 0 1 0 0-54.858351v-124.926566h23.085433L1005.231245 625.174104h61.313071a50.365758 50.365758 0 1 0-4.249019-37.889339H1021.523661l-103.03194-108.701809h-39.377849v-106.902066l67.212982 56.076223 24.249177-29.107132L491.993075 0 0 398.474066l23.84322 29.44543 54.411798-44.05989v640.140394h800.858854V879.817531L985.122831 774.417507h115.224188a50.365758 50.365758 0 1 0 46.658016-69.310428z m-225.712209-48.714865a12.476418 12.476418 0 1 1-12.476419 12.476418 12.503482 12.503482 0 0 1 12.476419-12.517014z m189.446698-67.76779a12.476418 12.476418 0 1 1-12.48995 12.476418 12.48995 12.48995 0 0 1 12.48995-12.517014z m-269.514992-110.041468h-8.673953a56.69869 56.69869 0 1 0 0 37.889339h8.673953v133.384008h-53.22099a50.365758 50.365758 0 1 0 0 37.889339h53.193926v166.374797h-46.83393a50.365758 50.365758 0 1 0 0 37.88934h46.860994v94.100881H116.144358V353.169241l375.51042-304.143142 349.569754 291.179575z m-43.302103 18.944669a18.809351 18.809351 0 1 1-18.795818-18.80935 18.822883 18.822883 0 0 1 18.795818 18.80935z m-44.073421 171.300411a12.476418 12.476418 0 1 1-12.476418-12.476418 12.48995 12.48995 0 0 1 12.476418 12.476418z m6.332933 204.237073a12.48995 12.48995 0 1 1-12.48995-12.476418 12.48995 12.48995 0 0 1 12.48995 12.476418z m386.823094-105.115854a12.476418 12.476418 0 1 1 12.48995-12.476418 12.48995 12.48995 0 0 1-12.48995 12.476418z" fill="#09d8f2" p-id="2691"></path></svg>
\ No newline at end of file
diff --git a/src/permission.js b/src/permission.js
index fd74217..19d6870 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', '/zhkbc', '/ckgl', '/cgdd', '/back', '/zngc'] // 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 f394774..b6a0170 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -50,18 +50,13 @@
hidden: true
},
{
- path: '/zpcj',
- component: () => import('@/views/kb/zpcj'),
+ path: '/zhkbc',
+ component: () => import('@/views/kb/zhkbc'),
hidden: true
},
{
- path: '/dccj',
- component: () => import('@/views/kb/dccj'),
- hidden: true
- },
- {
- path: '/bzcj',
- component: () => import('@/views/kb/bzcj'),
+ path: '/zngc',
+ component: () => import('@/views/kb/zngc'),
hidden: true
},
diff --git a/src/utils/echarts-liquidfill.min.js b/src/utils/echarts-liquidfill.min.js
new file mode 100644
index 0000000..8fe33e1
--- /dev/null
+++ b/src/utils/echarts-liquidfill.min.js
@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("echarts")):"function"==typeof define&&define.amd?define(["echarts"],t):"object"==typeof exports?exports["echarts-liquidfill"]=t(require("echarts")):e["echarts-liquidfill"]=t(e.echarts)}(self,(function(e){return(()=>{"use strict";var t={245:(e,t,a)=>{a.r(t);var i=a(83);i.extendSeriesModel({type:"series.liquidFill",optionUpdated:function(){var e=this.option;e.gridSize=Math.max(Math.floor(e.gridSize),4)},getInitialData:function(e,t){var a=i.helper.createDimensions(e.data,{coordDimensions:["value"]}),r=new i.List(a,this);return r.initData(e.data),r},defaultOption:{color:["#294D99","#156ACF","#1598ED","#45BDFF"],center:["50%","50%"],radius:"50%",amplitude:"8%",waveLength:"80%",phase:"auto",period:"auto",direction:"right",shape:"circle",waveAnimation:!0,animationEasing:"linear",animationEasingUpdate:"linear",animationDuration:2e3,animationDurationUpdate:1e3,outline:{show:!0,borderDistance:8,itemStyle:{color:"none",borderColor:"#294D99",borderWidth:8,shadowBlur:20,shadowColor:"rgba(0, 0, 0, 0.25)"}},backgroundStyle:{color:"#E3F7FF"},itemStyle:{opacity:.95,shadowBlur:50,shadowColor:"rgba(0, 0, 0, 0.4)"},label:{show:!0,color:"#294D99",insideColor:"#fff",fontSize:50,fontWeight:"bold",align:"center",baseline:"middle",position:"inside"},emphasis:{itemStyle:{opacity:.8}}}});const r=i.graphic.extendShape({type:"ec-liquid-fill",shape:{waveLength:0,radius:0,radiusY:0,cx:0,cy:0,waterLevel:0,amplitude:0,phase:0,inverse:!1},buildPath:function(e,t){null==t.radiusY&&(t.radiusY=t.radius);for(var a=Math.max(2*Math.ceil(2*t.radius/t.waveLength*4),8);t.phase<2*-Math.PI;)t.phase+=2*Math.PI;for(;t.phase>0;)t.phase-=2*Math.PI;var i=t.phase/Math.PI/2*t.waveLength,r=t.cx-t.radius+i-2*t.radius;e.moveTo(r,t.waterLevel);for(var l=0,o=0;o<a;++o){var s=o%4,h=n(o*t.waveLength/4,s,t.waveLength,t.amplitude);e.bezierCurveTo(h[0][0]+r,-h[0][1]+t.waterLevel,h[1][0]+r,-h[1][1]+t.waterLevel,h[2][0]+r,-h[2][1]+t.waterLevel),o===a-1&&(l=h[2][0])}t.inverse?(e.lineTo(l+r,t.cy-t.radiusY),e.lineTo(r,t.cy-t.radiusY),e.lineTo(r,t.waterLevel)):(e.lineTo(l+r,t.cy+t.radiusY),e.lineTo(r,t.cy+t.radiusY),e.lineTo(r,t.waterLevel)),e.closePath()}});function n(e,t,a,i){return 0===t?[[e+.5*a/Math.PI/2,i/2],[e+.5*a/Math.PI,i],[e+a/4,i]]:1===t?[[e+.5*a/Math.PI/2*(Math.PI-2),i],[e+.5*a/Math.PI/2*(Math.PI-1),i/2],[e+a/4,0]]:2===t?[[e+.5*a/Math.PI/2,-i/2],[e+.5*a/Math.PI,-i],[e+a/4,-i]]:[[e+.5*a/Math.PI/2*(Math.PI-2),-i],[e+.5*a/Math.PI/2*(Math.PI-1),-i/2],[e+a/4,0]]}var l=function(e,t){switch(e){case"center":case"middle":e="50%";break;case"left":case"top":e="0%";break;case"right":case"bottom":e="100%"}return"string"==typeof e?(a=e,a.replace(/^\s+|\s+$/g,"")).match(/%$/)?parseFloat(e)/100*t:parseFloat(e):null==e?NaN:+e;var a};function o(e){return e&&0===e.indexOf("path://")}i.extendChartView({type:"liquidFill",render:function(e,t,a){var n=this,s=this.group;s.removeAll();var h=e.getData(),d=h.getItemModel(0),p=d.get("center"),u=d.get("radius"),c=a.getWidth(),g=a.getHeight(),v=Math.min(c,g),f=0,y=0,m=e.get("outline.show");m&&(f=e.get("outline.borderDistance"),y=l(e.get("outline.itemStyle.borderWidth"),v));var w,b,x,M=l(p[0],c),P=l(p[1],g),I=!1,S=e.get("shape");"container"===S?(I=!0,b=[(w=[c/2,g/2])[0]-y/2,w[1]-y/2],x=[l(f,c),l(f,g)],u=[Math.max(b[0]-x[0],0),Math.max(b[1]-x[1],0)]):(b=(w=l(u,v)/2)-y/2,x=l(f,v),u=Math.max(b-x,0)),m&&(Y().style.lineWidth=y,s.add(Y()));var L=I?0:M-u,C=I?0:P-u,T=null;s.add(function(){var t=E(u);t.setStyle(e.getModel("backgroundStyle").getItemStyle()),t.style.fill=null,t.z2=5;var a=E(u);a.setStyle(e.getModel("backgroundStyle").getItemStyle()),a.style.stroke=null;var r=new i.graphic.Group;return r.add(t),r.add(a),r}());var D=this._data,F=[];function E(e,t){if(S){if(o(S)){var a=i.graphic.makePath(S.slice(7),{}),r=a.getBoundingRect(),n=r.width,l=r.height;n>l?(l*=2*e/n,n=2*e):(n*=2*e/l,l=2*e);var s=t?0:M-n/2,h=t?0:P-l/2;return a=i.graphic.makePath(S.slice(7),{},new i.graphic.BoundingRect(s,h,n,l)),t&&(a.x=-n/2,a.y=-l/2),a}if(I){var d=t?-e[0]:M-e[0],p=t?-e[1]:P-e[1];return i.helper.createSymbol("rect",d,p,2*e[0],2*e[1])}return d=t?-e:M-e,p=t?-e:P-e,"pin"===S?p+=e:"arrow"===S&&(p-=e),i.helper.createSymbol(S,d,p,2*e,2*e)}return new i.graphic.Circle({shape:{cx:t?0:M,cy:t?0:P,r:e}})}function Y(){var t=E(w);return t.style.fill=null,t.setStyle(e.getModel("outline.itemStyle").getItemStyle()),t}function k(t,a,n){var o=I?u[0]:u,s=I?g/2:u,d=h.getItemModel(t),p=d.getModel("itemStyle"),c=d.get("phase"),v=l(d.get("amplitude"),2*s),f=l(d.get("waveLength"),2*o),y=s-h.get("value",t)*s*2;c=n?n.shape.phase:"auto"===c?t*Math.PI/4:c;var m=p.getItemStyle();if(!m.fill){var w=e.get("color"),b=t%w.length;m.fill=w[b]}var x=new r({shape:{waveLength:f,radius:o,radiusY:s,cx:2*o,cy:0,waterLevel:y,amplitude:v,phase:c,inverse:a},style:m,x:M,y:P});x.shape._waterLevel=y;var S=d.getModel("emphasis.itemStyle").getItemStyle();S.lineWidth=0,x.ensureState("emphasis").style=S,i.helper.enableHoverEmphasis(x);var L=E(u,!0);return L.setStyle({fill:"white"}),x.setClipPath(L),x}function q(e,t,a){var i=h.getItemModel(e),r=i.get("period"),n=i.get("direction"),l=h.get("value",e),o=i.get("phase");o=a?a.shape.phase:"auto"===o?e*Math.PI/4:o;var s,d;s="auto"===r?0===(d=h.count())?5e3:5e3*(.2+(d-e)/d*.8):"function"==typeof r?r(l,e):r;var p=0;"right"===n||null==n?p=Math.PI:"left"===n?p=-Math.PI:"none"===n?p=0:console.error("Illegal direction value for liquid fill."),"none"!==n&&i.get("waveAnimation")&&t.animate("shape",!0).when(0,{phase:o}).when(s/2,{phase:p+o}).when(s,{phase:2*p+o}).during((function(){T&&T.dirty(!0)})).start()}h.diff(D).add((function(t){var a=k(t,!1),r=a.shape.waterLevel;a.shape.waterLevel=I?g/2:u,i.graphic.initProps(a,{shape:{waterLevel:r}},e),a.z2=2,q(t,a,null),s.add(a),h.setItemGraphicEl(t,a),F.push(a)})).update((function(t,a){for(var r=D.getItemGraphicEl(a),l=k(t,!1,r),d={},p=["amplitude","cx","cy","phase","radius","radiusY","waterLevel","waveLength"],u=0;u<p.length;++u){var c=p[u];l.shape.hasOwnProperty(c)&&(d[c]=l.shape[c])}var v={},f=["fill","opacity","shadowBlur","shadowColor"];for(u=0;u<f.length;++u)c=f[u],l.style.hasOwnProperty(c)&&(v[c]=l.style[c]);I&&(d.radiusY=g/2),i.graphic.updateProps(r,{shape:d,x:l.x,y:l.y},e),e.isUniversalTransitionEnabled&&e.isUniversalTransitionEnabled()?i.graphic.updateProps(r,{style:v},e):r.useStyle(v);var y=r.getClipPath(),m=l.getClipPath();r.setClipPath(l.getClipPath()),r.shape.inverse=l.inverse,y&&m&&n._shape===S&&!o(S)&&i.graphic.updateProps(m,{shape:y.shape},e,{isFrom:!0}),q(t,r,r),s.add(r),h.setItemGraphicEl(t,r),F.push(r)})).remove((function(e){var t=D.getItemGraphicEl(e);s.remove(t)})).execute(),d.get("label.show")&&s.add(function(t){var a=d.getModel("label");var r,n,l,o={z2:10,shape:{x:L,y:C,width:2*(I?u[0]:u),height:2*(I?u[1]:u)},style:{fill:"transparent"},textConfig:{position:a.get("position")||"inside"},silent:!0},s={style:{text:(r=e.getFormattedLabel(0,"normal"),n=100*h.get("value",0),l=h.getName(0)||e.name,isNaN(n)||(l=n.toFixed(0)+"%"),null==r?l:r),textAlign:a.get("align"),textVerticalAlign:a.get("baseline")}};Object.assign(s.style,i.helper.createTextStyle(a));var p=new i.graphic.Rect(o),c=new i.graphic.Rect(o);c.disableLabelAnimation=!0,p.disableLabelAnimation=!0;var g=new i.graphic.Text(s),v=new i.graphic.Text(s);p.setTextContent(g),c.setTextContent(v);var f=a.get("insideColor");v.style.fill=f;var y=new i.graphic.Group;y.add(p),y.add(c);var m=E(u,!0);return(T=new i.graphic.CompoundPath({shape:{paths:t},x:M,y:P})).setClipPath(m),c.setClipPath(T),y}(F)),this._shape=S,this._data=h},dispose:function(){}})},83:t=>{t.exports=e}},a={};function i(e){if(a[e])return a[e].exports;var r=a[e]={exports:{}};return t[e](r,r.exports,i),r.exports}return i.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i(245)})()}));
+//# sourceMappingURL=echarts-liquidfill.min.js.map
\ No newline at end of file
diff --git a/src/utils/myEcharts_zngc.js b/src/utils/myEcharts_zngc.js
new file mode 100644
index 0000000..0f5e620
--- /dev/null
+++ b/src/utils/myEcharts_zngc.js
@@ -0,0 +1,3733 @@
+import * as echarts from 'echarts'
+
+/** 255
+ * 缁熶竴鏍峰紡锛屽姞杞�
+ * @param {*} id
+ * @param {*} option
+ */
+export function loadEcharts(id, option) {
+ var myChart = echarts.init(document.getElementById(id))
+
+ if (option.textStyle == null) {
+ option.textStyle = {
+ fontFamily: 'Microsoft YaHei',
+ color: '#ffffff'
+ }
+ }
+
+ // 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃銆�
+ myChart.clear()
+ myChart.setOption(option, true)
+
+ window.addEventListener('resize', function() {
+ myChart.resize()
+ })
+
+ return myChart
+}
+
+const colorX = '#c7e7ff'
+const colorY = '#7696c5'
+
+// 鑴夐摼鐪嬫澘
+export function mapArea() {
+
+}
+
+export function pie1(data) {
+ const titleArr = []
+ const seriesArr = []
+ const colors = [['#389af4', '#dfeaff'], ['#ff8c37', '#ffdcc3'], ['#ffc257', '#ffedcc'], ['#fd6f97', '#fed4e0'], ['#a181fc', '#e3d9fe']]
+ data.forEach(function(item, index) {
+ titleArr.push(
+ {
+ text: item.name,
+ left: index * 20 + 9.5 + '%',
+ top: '55%',
+ textAlign: 'center',
+ textStyle: {
+ fontWeight: 'normal',
+ fontSize: '16',
+ color: colors[index][0],
+ textAlign: 'center'
+ }
+ }
+ )
+ seriesArr.push(
+ {
+ name: item.name,
+ type: 'pie',
+ clockWise: false,
+ radius: [50, 60], // 璋冩暣楗煎浘澶у皬
+ itemStyle: {
+ normal: {
+ color: colors[index][0],
+ shadowColor: colors[index][0],
+ shadowBlur: 0,
+ label: {
+ show: false
+ },
+ labelLine: {
+ show: false
+ }
+ }
+ },
+ hoverAnimation: false,
+ center: [index * 20 + 10 + '%', '50%'],
+ data: [{
+ value: item.value,
+ label: {
+ normal: {
+ formatter: function(params) {
+ return params.value + '%'
+ },
+ position: 'center',
+ show: true,
+ textStyle: {
+ fontSize: '16',
+ fontWeight: 'normal',
+ // fontWeight: 'bold',
+ color: colors[index][0]
+ }
+ }
+ }
+ }, {
+ value: 100 - item.value,
+ name: 'invisible',
+ itemStyle: {
+ normal: {
+ color: colors[index][1]
+ },
+ emphasis: {
+ color: colors[index][1]
+ }
+ }
+ }]
+ }
+ )
+ })
+
+ const option = {
+ backgroundColor: 'transparent',
+ title: titleArr,
+ series: seriesArr
+ }
+
+ return option
+}
+
+export function bar1(data1, data2) {
+ const titleText = '宸ュ巶浜哄憳鍑哄嫟鐜�'
+ const path = 'path://M214,1079l8-6h16l8,6-8,6H222Z'
+ // const data1 = ['80', '90', '70', '30', '50']
+ // const data2 = ['70', '60', '50', '40', '30']
+ const option = {
+ backgroundColor: 'transparent',
+ // tooltip: {
+ // show: false,
+ // trigger: 'axis',
+ // axisPointer: { // 鍧愭爣杞存寚绀哄櫒锛屽潗鏍囪酱瑙﹀彂鏈夋晥
+ // type: 'shadow' // 榛樿涓虹洿绾匡紝鍙�変负锛�'line' | 'shadow'
+ // },
+ // formatter: function(e) {
+ // if (e.length > 1) {
+ // var S = e[1].data - e[0].data
+ // return e[0].axisValue + ':<br>宸=褰撳墠锛嶅勾鍒�<br>=' + S
+ // } else if (e.length = 1) {
+ // return e[0].axisValue + ':<br>' + e[0].seriesName + '=' + e[0].data
+ // }
+ // }
+ // },
+ title: {
+ text: titleText,
+ x: '40%',
+ y: '0%',
+ textStyle: {
+ // color: '#fff',
+ color: '#00ffff',
+ fontSize: '20',
+ fontWeight: 'bolder'
+ },
+ subtextStyle: {
+ color: '#90979c',
+ fontSize: '16'
+ }
+ },
+ grid: {
+ left: '4%',
+ right: '4%',
+ bottom: '4%',
+ top: '15%',
+ containLabel: true
+ },
+ legend: {
+ show: false,
+ // data: ['title1', 'title2'],
+ data: ['title1'],
+ left: 220,
+ top: 10,
+ textStyle: {
+ color: '#00ffff',
+ fontSize: 14
+ },
+ itemWidth: 12,
+ itemHeight: 10,
+ itemGap: 35,
+ color: '#242424'
+ },
+ xAxis: {
+ type: 'category',
+ // data: ['杞﹂棿涓�', '杞﹂棿浜�', '杞﹂棿涓�', '杞﹂棿鍥�', '杞﹂棿浜�'],
+ data: ['娴欐睙鐨囧啝', '姘稿悍鐨囧啝', '鍖楄景鐢垫満', '鎭掓嘲鐨囧啝鍥灄', '杩堟嫇濉戜笟'],
+ axisLine: {
+ lineStyle: {
+ show: true,
+ lineStyle: {
+ color: '#6A989E'
+ }
+ }
+ },
+ axisLabel: {
+ // interval: 0,
+ // rotate: 40,
+ textStyle: {
+ fontFamily: 'Microsoft YaHei',
+ color: colorX, // x杞撮鑹�
+ fontWeight: 'normal',
+ fontSize: '12',
+ lineHeight: 22
+ }
+ }
+ // splitLine:{
+ // show:true,
+ // lineStyle: {
+ // type: 'dashed',
+ // color: 'rgba(135,140,147,0.8)'
+ // }
+ // },
+ },
+ yAxis:
+ {
+ name: '%',
+ nameTextStyle: {
+ color: colorY,
+ fontSize: 14,
+ lineHeight: 20
+ },
+ boundaryGap: false,
+ splitNumber: 4,
+ type: 'value',
+ axisLabel: {
+ textStyle: {
+ fontSize: 14,
+ color: '#7696c5'
+ // color: this.colorY
+ }
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#032c58'
+ }
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#032c58'
+ }
+ },
+ axisTick: {
+ show: true
+ }
+ },
+ // {
+ // type: 'value',
+ // // name: '鏁伴噺锛堝崟浣嶏細涓級',
+ // name: '',
+ // nameTextStyle: {
+ // color: '#ffffff'
+ // },
+ // axisLine: {
+ // show: false,
+ // lineStyle: {
+ // type: 'dashed',
+ // color: 'rgba(135,140,147,0.8)'
+ // }
+ // },
+ // splitLine: {
+ // show: true,
+ // lineStyle: {
+ // color: 'rgba(135,140,147,1)' // 宸︿晶鏄剧ず绾�
+ // }
+ // },
+ // axisLabel: {
+ // formatter: '{value}',
+ // color: colorY,
+ // fontSize: 14
+ // }
+ // },
+ series: [
+ {
+ type: 'pictorialBar',
+ symbol: path,
+ symbolSize: [30, 8],
+ // symbolOffset: [-18, -4],
+ symbolOffset: [0, -4],
+ symbolPosition: 'end',
+ z: 12,
+ color: '#3440FF',
+ data: data1
+ },
+ // {
+ // type: 'pictorialBar',
+ // symbol: path,
+ // symbolSize: [30, 8],
+ // symbolOffset: [18, -4],
+ // // symbolOffset: [20, -5],
+ // symbolPosition: 'end',
+ // z: 12,
+ // color: '#FF1155',
+ // data: data2
+ // },
+ {
+ type: 'pictorialBar',
+ symbol: path,
+ symbolSize: [30, 8],
+ // symbolOffset: [-18, 4],
+ symbolOffset: [0, 4],
+ z: 12,
+ color: 'rgba(126,192,238,0.6)',
+ data: data1
+ },
+ // {
+ // name: '',
+ // type: 'pictorialBar',
+ // symbol: path,
+ // symbolSize: [30, 8],
+ // // symbolOffset: [20, 4],
+ // symbolOffset: [18, 4],
+ // color: '#FFC0CB',
+ // z: 12,
+ // data: data2
+ // },
+ {
+ name: 'title1',
+ type: 'bar',
+ barWidth: '30',
+ itemStyle: {
+ normal: {
+ opacity: 0.7,
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: 'blue'
+ }, {
+ offset: 1,
+ color: '#7EC0EE'
+ }]),
+ barBorderRadius: 0
+ }
+
+ },
+ label: {
+ show: true,
+ // position: ['-18','-18'],
+ position: 'top',
+ color: '#00f8ff',
+ fontSize: 12
+ },
+ data: data1
+ }
+ // {
+ // name: 'title2',
+ // type: 'bar',
+ // barWidth: '30',
+ // itemStyle: {
+ // normal: {
+ // opacity: 0.7,
+ // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ // offset: 0,
+ // color: '#FF2246'
+ // }, {
+ // offset: 1,
+ // color: '#FFC0CB'
+ //
+ // }]),
+ // barBorderRadius: 0
+ // }
+ //
+ // },
+ // label: {
+ // show: true,
+ // // position: ['18','-18'],
+ // position: 'top',
+ // color: '#00f8ff',
+ // fontSize: 12
+ // },
+ // data: data2
+ // }
+ ]
+ }
+
+ return option
+}
+
+export function line1(dataY, dataY2, dataY3, dataY4, dataY5) {
+ const option = {
+ backgroundColor: 'transparent',
+ grid: {
+ left: '4%',
+ right: '4%',
+ bottom: '4%',
+ top: '15%',
+ containLabel: true
+ },
+ title: {
+ // text: '閿�鍞姒傝',
+ text: '鍚勫伐鍘傝兘鑰�',
+ left: '50%',
+ top: '0%',
+ textAlign: 'center',
+ textStyle: {
+ // color: '#fff',
+ color: '#00ffff',
+ fontSize: '20',
+ fontWeight: 'bolder'
+ }
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ lineStyle: {
+ color: '#ddd'
+ }
+ },
+ backgroundColor: 'rgba(255,255,255,1)',
+ padding: [5, 10],
+ textStyle: {
+ color: '#7588E4'
+ },
+ extraCssText: 'box-shadow: 0 0 5px rgba(0,0,0,0.3)'
+ },
+ legend: {
+ show: false,
+ right: 20,
+ orient: 'vertical',
+ data: ['娴欐睙鐨囧啝', '姘稿悍鐨囧啝', '鍖楄景鐢垫満', '鎭掓嘲鐨囧啝鍥灄', '杩堟嫇濉戜笟']
+ },
+ xAxis: {
+
+ // data: ['00:00','2:00','4:00','6:00','8:00','10:00','12:00','14:00','16:00','18:00','20:00',"22:00"],
+ // data: ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '5鏈�', '6鏈�', '7鏈�', '8鏈�', '9鏈�', '10鏈�', '11鏈�', '12鏈�'],
+ data: ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '5鏈�', '6鏈�', '7鏈�', '8鏈�', '9鏈�', '10鏈�', '11鏈�'],
+ // type: 'category',
+ // boundaryGap: true,
+ // axisLabel: {
+ // interval: 0,
+ // formatter: '{value}',
+ // fontSize: 14,
+ // margin: 20,
+ // textStyle: {
+ // // color: this.colorX
+ // color: '#c7e7ff'
+ // }
+ // },
+ // axisLine: {
+ // lineStyle: {
+ // color: '#032c58'
+ // }
+ // },
+ // splitLine: {
+ // show: false,
+ // lineStyle: {
+ // color: '#032c58'
+ // }
+ // },
+ // axisTick: {
+ // show: false
+ // }
+ // name: '鏈�',
+ // nameTextStyle: {
+ // color: colorX,
+ // fontSize: 14,
+ // lineHeight: 20
+ // },
+ boundaryGap: false,
+ // splitLine: {
+ // show: false,
+ // interval: 'auto',
+ // lineStyle: {
+ // color: ['#D4DFF5']
+ // }
+ // },
+ axisTick: {
+ show: false
+ },
+ axisLine: {
+ lineStyle: {
+ show: true,
+ lineStyle: {
+ color: '#6A989E'
+ }
+ }
+ },
+ axisLabel: {
+ margin: 10,
+ textStyle: {
+ color: colorX,
+ fontSize: 14
+ }
+ }
+ },
+ yAxis:
+ {
+ name: '',
+ nameTextStyle: {
+ color: colorY,
+ fontSize: 14,
+ lineHeight: 20
+ },
+ boundaryGap: false,
+ splitNumber: 5,
+ type: 'value',
+ // offset: -30,
+ axisLabel: {
+ textStyle: {
+ fontSize: 14,
+ color: '#7696c5'
+ // color: this.colorY
+ }
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#032c58'
+ }
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#032c58'
+ }
+ },
+ axisTick: {
+ show: true
+ }
+ },
+ series: [
+ {
+ name: '娴欐睙鐨囧啝',
+ type: 'line',
+ smooth: true,
+ showSymbol: false,
+ symbol: 'circle',
+ symbolSize: 6,
+ // data: ['200', '400', '500', '300', '400', '500', '600', '800', '900', '1000', '1100', '1322'],
+ data: dataY,
+ areaStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: 'rgba(0,215,236,0.5)'
+ }, {
+ offset: 1,
+ color: 'rgba(0,215,236,0.2)'
+ }], false)
+ }
+ },
+ itemStyle: {
+ normal: {
+ // color: '#f7b851'
+ // color: `rgb(73, 226, 196)`
+ color: `rgb(0, 215, 236)`
+ }
+ },
+ lineStyle: {
+ normal: {
+ width: 3
+ }
+ }
+ },
+ {
+ name: '姘稿悍鐨囧啝',
+ type: 'line',
+ smooth: true,
+ showSymbol: false,
+ symbol: 'circle',
+ symbolSize: 6,
+ // data: ['1200', '1400', '808', '811', '626', '488', '1600', '1100', '500', '300', '1998', '822'],
+ data: dataY2,
+ areaStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: 'rgba(60,244,184,0.5)'
+ }, {
+ offset: 1,
+ color: 'rgba(60,244,184,0.2)'
+ }], false)
+ }
+ },
+ itemStyle: {
+ normal: {
+ color: `rgb(60, 244, 184)`
+ }
+ },
+ lineStyle: {
+ normal: {
+ width: 3
+ }
+ }
+ },
+ {
+ name: '鍖楄景鐢垫満',
+ type: 'line',
+ smooth: true,
+ showSymbol: false,
+ symbol: 'circle',
+ symbolSize: 6,
+ // data: ['1200', '1400', '808', '811', '626', '488', '1600', '1100', '500', '300', '1998', '822'],
+ data: dataY3,
+ areaStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: 'rgba(55,183,255,0.5)'
+ }, {
+ offset: 1,
+ color: 'rgba(55,183,255,0.2)'
+ }], false)
+ }
+ },
+ itemStyle: {
+ normal: {
+ // color: '#58c8da'
+ color: `rgb(55, 183, 255)`
+ }
+ },
+ lineStyle: {
+ normal: {
+ width: 3
+ }
+ }
+ },
+ {
+ name: '鎭掓嘲鐨囧啝鍥灄',
+ type: 'line',
+ smooth: true,
+ showSymbol: false,
+ symbol: 'circle',
+ symbolSize: 6,
+ // data: ['1200', '1400', '808', '811', '626', '488', '1600', '1100', '500', '300', '1998', '822'],
+ data: dataY4,
+ areaStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: 'rgba(26,202,200,0.5)'
+ }, {
+ offset: 1,
+ color: 'rgba(26,202,200,0.2)'
+ }], false)
+ }
+ },
+ itemStyle: {
+ normal: {
+ // color: '#58c8da'
+ color: `rgb(26, 202, 200)`
+ }
+ },
+ lineStyle: {
+ normal: {
+ width: 3
+ }
+ }
+ },
+ {
+ name: '杩堟嫇濉戜笟',
+ type: 'line',
+ smooth: true,
+ showSymbol: false,
+ symbol: 'circle',
+ symbolSize: 6,
+ // data: ['1200', '1400', '808', '811', '626', '488', '1600', '1100', '500', '300', '1998', '822'],
+ data: dataY5,
+ areaStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: 'rgba(243,94,94,0.5)'
+ }, {
+ offset: 1,
+ color: 'rgba(243,94,94,0.2)'
+ }], false)
+ }
+ },
+ itemStyle: {
+ normal: {
+ // color: '#58c8da'
+ color: `rgb(243, 94, 94)`
+ }
+ },
+ lineStyle: {
+ normal: {
+ width: 3
+ }
+ }
+ }
+ ]
+ }
+
+ return option
+}
+
+export function pie2(title, scaleData) {
+ var rich = {
+ white: {
+ color: '#ddd',
+ align: 'center',
+ padding: [5, 0]
+ }
+ }
+ var placeHolderStyle = {
+ normal: {
+ label: {
+ show: false
+ },
+ labelLine: {
+ show: false
+ },
+ color: 'rgba(0, 0, 0, 0)',
+ borderColor: 'rgba(0, 0, 0, 0)',
+ borderWidth: 0
+ }
+ }
+ var data = []
+ for (var i = 0; i < scaleData.length; i++) {
+ data.push({
+ value: scaleData[i].value,
+ name: scaleData[i].name,
+ itemStyle: {
+ normal: {
+ borderWidth: 5,
+ shadowBlur: 30,
+ borderColor: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
+ offset: 0,
+ color: '#7777eb'
+ }, {
+ offset: 1,
+ color: '#70ffac'
+ }]),
+ shadowColor: 'rgba(142, 152, 241, 0.6)'
+ }
+ }
+ }, {
+ value: 4,
+ name: '',
+ itemStyle: placeHolderStyle
+ })
+ }
+ var seriesObj = [{
+ name: '',
+ type: 'pie',
+ clockWise: false,
+ radius: [60, 65],
+ top: '10%',
+ hoverAnimation: false,
+ itemStyle: {
+ normal: {
+ label: {
+ show: true,
+ position: 'outside',
+ // color: '#ddd',
+ color: colorX,
+ formatter: function(params) {
+ var percent = 0
+ var total = 0
+ for (var i = 0; i < scaleData.length; i++) {
+ total += scaleData[i].value
+ }
+ percent = ((params.value / total) * 100).toFixed(0)
+ if (params.name !== '') {
+ return params.name + '\n{white|' + '' + percent + '%}'
+ } else {
+ return ''
+ }
+ },
+ rich: rich
+ },
+ labelLine: {
+ show: false
+ }
+ }
+ },
+ data: data
+ }]
+ const option = {
+ backgroundColor: 'transparent',
+ tooltip: {
+ show: false
+ },
+ top: 'middle',
+ title: {
+ text: title,
+ left: '50%',
+ top: '7%',
+ textAlign: 'center',
+ textStyle: {
+ color: '#00ffff',
+ fontSize: '20',
+ fontWeight: 'bolder'
+ }
+ },
+ legend: {
+ show: false
+ },
+ toolbox: {
+ show: false
+ },
+ series: seriesObj
+ }
+
+ return option
+}
+
+export function bar2(list) {
+ // const list = [500, 400, 300, 200, 200]
+ const yName = ['娴忚瀹㈡埛', '杩涘簵瀹㈡埛', '璁よ喘瀹㈡埛', '涓嬪崟瀹㈡埛', '鍐嶆璐拱']
+ const xData = [500, 400, 300, 200, 100]
+ // const color = ['#ff3259', '#ff6160', '#ffb065', '#fef568', '#1a6df1', '#15a0ff', '#11e2ff', '#58febe']
+ const color = ['#ff3259', '#ff6160', '#ffb065', '#fef568', '#1a6df1']
+ const barWidth = 15
+ const option = {
+ backgroundColor: 'transparent',
+ title: {
+ text: '骞冲彴閾炬帴瀹㈡埛',
+ left: '50%',
+ top: '5%',
+ textAlign: 'center',
+ textStyle: {
+ // color: '#fff',
+ color: '#00ffff',
+ fontSize: '20',
+ fontWeight: 'bolder'
+ }
+ },
+ xAxis: {
+ splitLine: {
+ show: false
+ },
+ axisLabel: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLine: {
+ show: false
+ }
+ },
+ grid: {
+ left: '4%',
+ right: '4%',
+ bottom: '4%',
+ top: '15%',
+ containLabel: true
+ },
+ yAxis: [{
+ inverse: true,
+ axisLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ margin: 10,
+ textStyle: {
+ fontSize: 14,
+ color: colorX
+ }
+ },
+ data: yName
+ }],
+ series: [{ // 鍐�
+ type: 'bar',
+ barWidth,
+ legendHoverLink: false,
+ symbolRepeat: true,
+ silent: true,
+ itemStyle: {
+ normal: {
+ // barBorderRadius: [4, 4, 4, 4],
+ color: function(params) {
+ var colorlist = color
+ return colorlist[params.dataIndex]
+ }
+ }
+ },
+ data: list,
+ z: 1,
+ animationEasing: 'elasticOut'
+ },
+ { // 鑳屾櫙
+ type: 'pictorialBar',
+ animationDuration: 0,
+ symbolRepeat: 'fixed',
+ symbolMargin: '20%',
+ symbol: 'roundRect',
+ symbolSize: [6, barWidth],
+ itemStyle: {
+ normal: {
+ color: 'rgba(255,255,255,0.3)'
+ }
+ },
+
+ data: xData,
+ z: 0,
+ animationEasing: 'elasticOut'
+ },
+ { // 鍒嗛殧
+ type: 'pictorialBar',
+ itemStyle: {
+ color: '#051e43'
+ },
+ symbolRepeat: 'fixed',
+ symbolMargin: 4,
+ symbol: 'roundRect',
+ symbolClip: true,
+ symbolSize: [2, barWidth],
+ symbolPosition: 'start',
+ symbolOffset: [0, 0],
+ data: list,
+ z: 2,
+ animationEasing: 'elasticOut'
+ }
+ ]
+ }
+
+ return option
+}
+
+export function custom1() {
+
+}
+
+export function bar3() {
+ const a1 = 20 + Math.floor(Math.random() * 80)
+ const a2 = 20 + Math.floor(Math.random() * 80)
+ const a3 = 20 + Math.floor(Math.random() * 80)
+ const a4 = 20 + Math.floor(Math.random() * 80)
+ const a5 = 20 + Math.floor(Math.random() * 80)
+ const a6 = 20 + Math.floor(Math.random() * 80)
+ const a7 = 20 + Math.floor(Math.random() * 80)
+ const a8 = 20 + Math.floor(Math.random() * 80)
+ const a9 = 20 + Math.floor(Math.random() * 80)
+ const a10 = 20 + Math.floor(Math.random() * 80)
+ const a11 = 20 + Math.floor(Math.random() * 80)
+ const a12 = 20 + Math.floor(Math.random() * 80)
+ const list = [
+ {
+ key: '杩涜揣鏁伴噺',
+ value: [
+ { value: a1 },
+ { value: a2 },
+ { value: a3 },
+ { value: a4 },
+ { value: a5 },
+ { value: a6 },
+ { value: a8 },
+ { value: a9 },
+ { value: a10 },
+ { value: a11 },
+ { value: a12 }
+ ]
+ }, {
+ key: '鍚堟牸鏁伴噺',
+ value: [
+ { value: a1 - 2 },
+ { value: a2 - 3 },
+ { value: a3 - 5 },
+ { value: a4 - 1 },
+ { value: a5 - 2 },
+ { value: a6 - 4 },
+ { value: a7 - 5 },
+ { value: a8 - 2 },
+ { value: a9 - 2 },
+ { value: a10 - 6 },
+ { value: a11 - 1 },
+ { value: a12 - 3 }
+ ]
+ }, {
+ key: '涓嶅悎鏍兼暟閲�',
+ value: [
+ { value: 2 },
+ { value: 3 },
+ { value: 5 },
+ { value: 1 },
+ { value: 2 },
+ { value: 4 },
+ { value: 5 },
+ { value: 2 },
+ { value: 2 },
+ { value: 6 },
+ { value: 1 },
+ { value: 3 }
+ ]
+ }
+ ]
+ const color = ['26,171,234', '73,226,196', '255,221,97']
+ // const xList = ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '5鏈�', '6鏈�', '7鏈�', '8鏈�', '9鏈�', '10鏈�', '11鏈�', '12鏈�']
+ const xList = ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '5鏈�', '6鏈�', '7鏈�', '8鏈�', '9鏈�', '10鏈�', '11鏈�']
+ const seriesData = []
+
+ list.forEach((r, i) => {
+ var o = {
+ name: r.key,
+ type: 'bar',
+ smooth: false,
+ yAxisIndex: 0,
+ showSymbol: true,
+ showAllSymbol: true,
+ barWidth: 8,
+ zlevel: 3,
+ lineStyle: {
+ normal: {
+ width: 2,
+ color: `rgba(${color[i]})`
+ }
+ },
+ areaStyle: {
+ normal: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ {
+ offset: 0,
+ color: `rgba(${color[i]}, 0.0)`// 0% 澶勭殑棰滆壊
+ },
+ {
+ offset: 1,
+ color: `rgba(${color[i]}, 0.0)` // 100% 澶勭殑棰滆壊
+ }
+ ],
+ globalCoord: false // 缂虹渷涓� false
+ } // 娓愬彉棰滆壊
+ }
+ },
+ itemStyle: {
+ normal: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ {
+ offset: 0,
+ color: `rgba(${color[i]}, 1)`// 0% 澶勭殑棰滆壊
+ },
+ {
+ offset: 1,
+ color: `rgba(${color[i]}, 0.2)` // 100% 澶勭殑棰滆壊
+ }
+ ],
+ globalCoord: false // 缂虹渷涓� false
+ } // 娓愬彉棰滆壊
+ }
+ },
+ data: r.value.map(r => r.value)
+ }
+ // if (i === 0) {
+ // xList = r.value.map(r => r.key)
+ // }
+ // if (r.percent) {
+ // this.$set(o, 'symbolSize', 6)
+ // } else {
+ // this.$set(o, 'symbol', 'path://M0,10 L10,10 L5,0 L0,10 z')
+ // }
+ seriesData.push(o)
+ })
+ const option = {
+ backgroundColor: 'transparent',
+ legend: {
+ show: true,
+ data: list.map(r => r.key),
+ top: '2%',
+ itemHeight: 20,
+ itemWidth: 20,
+ textStyle: {
+ fontSize: 14,
+ color: 'F1F1F3'
+ // color: colorX
+ },
+ right: '1%'
+ },
+ title: {
+ text: '鍚堟牸鐜囧垎鏋�',
+ left: '28%',
+ top: '2%',
+ textAlign: 'center',
+ textStyle: {
+ // color: '#fff',
+ color: '#00ffff',
+ fontSize: '20',
+ fontWeight: 'bolder'
+ }
+ },
+ grid: {
+ left: '4%',
+ right: '4%',
+ bottom: '4%',
+ top: '15%',
+ containLabel: true
+ },
+ tooltip: {
+ show: true,
+ trigger: 'axis', // axis , item
+ backgroundColor: 'RGBA(0, 0, 0, 0.3)',
+ borderColor: 'rgba(0, 151, 251, 0.6)',
+ borderWidth: 1,
+ borderRadius: 0,
+ textStyle: {
+ color: '#BCE9FC',
+ fontSize: 14,
+ align: 'left'
+ }
+ },
+ xAxis: [{
+ type: 'category',
+ boundaryGap: true,
+ axisLabel: {
+ interval: 0,
+ formatter: '{value}',
+ fontSize: 14,
+ margin: 20,
+ textStyle: {
+ // color: this.colorX
+ color: '#c7e7ff'
+ }
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#032c58'
+ }
+ },
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: '#032c58'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ data: xList
+ }],
+ yAxis: [
+ {
+ boundaryGap: false,
+ splitNumber: 4,
+ type: 'value',
+ name: '%',
+ nameTextStyle: {
+ color: colorY,
+ fontSize: 14,
+ lineHeight: 20
+ },
+ axisLabel: {
+ textStyle: {
+ fontSize: 14,
+ color: '#7696c5'
+ // color: this.colorY
+ }
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#032c58'
+ }
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#032c58'
+ }
+ },
+ axisTick: {
+ show: true
+ }
+ },
+ {
+ boundaryGap: false,
+ splitNumber: 4,
+ type: 'value',
+ axisLabel: {
+ textStyle: {
+ fontSize: 14,
+ // color: this.colorY
+ color: '#7696c5'
+ }
+ },
+ nameTextStyle: {
+ color: '#fff',
+ fontSize: 14,
+ lineHeight: 40
+ },
+ splitLine: {
+ lineStyle: {
+ color: '#032c58'
+ }
+ },
+ axisLine: {
+ show: false
+ },
+ axisTick: {
+ show: true
+ }
+ }
+ ],
+ series: seriesData
+ }
+ return option
+}
+
+export function bar4() {
+ const data = [{
+ name: '娴欐睙鐨囧啝',
+ value: Math.floor(Math.random() * 10 + 90)
+ },
+ {
+ name: '姘稿悍鐨囧啝',
+ value: Math.floor(Math.random() * 10 + 90)
+ },
+ {
+ name: '鍖楄景鐢垫満',
+ value: Math.floor(Math.random() * 10 + 90)
+ },
+ {
+ name: '鎭掓嘲鐨囧啝鍥灄',
+ value: Math.floor(Math.random() * 10 + 90)
+ },
+ {
+ name: '杩堟嫇濉戜笟',
+ value: Math.floor(Math.random() * 10 + 90)
+ }
+ // {
+ // name: '杞﹂棿浜�',
+ // value: Math.floor(Math.random() * 10 + 90)
+ // }
+ ]
+ const getArrByKey = (data, k) => {
+ const key = k || 'value'
+ const res = []
+ if (data) {
+ data.forEach(function(t) {
+ res.push(t[key])
+ })
+ }
+ return res
+ }
+ const getSymbolData = (data) => {
+ const arr = []
+ for (var i = 0; i < data.length; i++) {
+ arr.push({
+ value: data[i].value,
+ symbolPosition: 'end'
+ })
+ }
+ return arr
+ }
+ // console.log(getSymbolData(data));
+ const option = {
+ backgroundColor: 'transparent',
+ grid: {
+ left: '0%',
+ right: '4%',
+ bottom: '4%',
+ top: '15%',
+ containLabel: true
+ },
+ title: {
+ text: '宸ュ巶杈炬垚鐜�',
+ x: '46%',
+ y: '5%',
+ textStyle: {
+ // color: '#fff',
+ color: '#00ffff',
+ fontSize: '20',
+ fontWeight: 'bolder'
+ },
+ subtextStyle: {
+ color: '#90979c',
+ fontSize: '16'
+ }
+ },
+ xAxis: {
+ show: false
+ },
+ yAxis: [{
+ triggerEvent: true,
+ show: true,
+ inverse: true,
+ data: getArrByKey(data, 'name'),
+ axisLine: {
+ show: false
+ },
+ splitLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+
+ axisLabel: {
+ show: true,
+ interval: 0,
+ color: colorY,
+ 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: getArrByKey(data, 'name'),
+ axisLine: {
+ show: false
+ },
+ splitLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ interval: 0,
+ shadowOffsetX: '-20px',
+ // color: ['#fff'],
+ color: colorX,
+ 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 barline1() {
+ return {
+ backgroundColor: 'transparent',
+ tooltip: {},
+ title: {
+ text: '璁㈠崟瀹屾垚鎬绘暟',
+ left: '50%',
+ top: '5%',
+ textAlign: 'center',
+ textStyle: {
+ // color: '#fff',
+ color: '#00ffff',
+ fontSize: '20',
+ fontWeight: 'bolder'
+ }
+ },
+ grid: {
+ left: '4%',
+ right: '4%',
+ bottom: '4%',
+ top: '15%',
+ 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: ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '5鏈�', '6鏈�', '7鏈�', '8鏈�', '9鏈�', '10鏈�', '11鏈�']
+ }],
+ 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, 987]
+ 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), 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 zhkb01() {
+ // const zhkb01name = ['璁″垝瀹屾垚杩涘害(鑷骇)', '璁″垝瀹屾垚杩涘害(澶栬喘)'] // 鍚嶇О
+ const zhkb01name = ['', ''] // 鍚嶇О
+ const zhkb01Value = [Math.ceil(Math.random() * 10 + 90), Math.ceil(Math.random() * 10 + 90)] // 鍊�
+ const zhkb01Max = []
+
+ const max = Math.ceil(Math.max(...zhkb01Value.map(r => r)) * 1.1)
+ for (let i = 0; i < zhkb01Value.length; i++) {
+ zhkb01Max.push(max * 4)
+ // zhkb01Max.push(100)
+ }
+ const option = {
+ backgroundColor: 'transparent',
+ grid: {
+ left: '4%',
+ right: '4%',
+ bottom: '4%',
+ top: '5%',
+ containLabel: true
+ },
+ // tooltip: {
+ // formatter: (params) => {
+ // if (params.name !== '') {
+ // return params.name + ' : ' + zhkb01Value[params.dataIndex]
+ // }
+ // },
+ // textStyle: {
+ // align: 'left'
+ // }
+ // },
+ xAxis: [
+ {
+ type: 'value',
+ axisLabel: {
+ show: false,
+ color: '#fff',
+ formatter: function(val) {
+ return val + ''
+ },
+ textStyle: {
+ fontSize: '13'
+ }
+ },
+ min: 0,
+ max: max, // 璁＄畻鏈�澶у��
+ interval: max / 5, // 骞冲潎鍒嗕负5浠�
+ splitNumber: 5,
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: '#fff'
+ }
+ },
+ axisLine: {
+ show: false,
+ lineStyle: {
+ color: '#fff',
+ width: 1,
+ opacity: 0.3
+ }
+ },
+ axisTick: {
+ show: false
+ }
+ },
+ {
+ type: 'value',
+ axisLabel: {
+ show: false
+ },
+ min: 0,
+ max: max, // 璁＄畻鏈�澶у��
+ interval: max / 10, // 骞冲潎鍒嗕负5浠�
+ splitNumber: 10,
+ splitLine: {
+ show: false,
+ lineStyle: {
+ type: 'dashed',
+ color: '#D8D8D8'
+ }
+ },
+ axisLine: {
+ show: false,
+ lineStyle: {
+ color: '#fff'
+ }
+ },
+ axisTick: {
+ show: false
+ }
+ }
+ ],
+ yAxis: [
+ {
+ // show: true,//鏆傛椂涓嶆樉绀�
+ show: false,
+ inverse: false,
+ data: zhkb01name,
+ axisLabel: {
+ padding: [30, 0, 0, -135],
+ // inside: true
+ textStyle: {
+ fontSize: 16,
+ fontFamily: 'PingFang SC',
+ // fontWeight: 400,
+ color: '#3dffef',
+ align: 'left'
+ }
+ // formatter: '{value}\n{a|鍗犱綅}',
+ // rich: {
+ // a: {
+ // // color: 'transparent',
+ // color: 'red',
+ // lineHeight: 30,
+ // fontFamily: 'digital',
+ // fontSize: 20,
+ // // shadowColor: 'rgba(0, 0, 0, 1)',
+ // shadowColor: 'red',
+ // shadowBlur: 10
+ // }
+ // }
+ },
+ // scale: true, // 鑷�傚簲
+ // offset: 50,
+ splitLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLine: {
+ show: false
+ }
+ },
+ {
+ // 宸︿晶鏌辩姸鍥剧殑Y杞�
+ gridIndex: 0, // y杞存墍鍦ㄧ殑 grid 鐨勭储寮�
+ splitLine: 'none',
+ axisTick: 'none',
+ axisLine: 'none',
+ data: zhkb01Value,
+ // inverse: true,//鏄惁鏄弽鍚戝潗鏍囪酱銆�
+ axisLabel: {
+ show: true,
+ verticalAlign: 'center',
+ align: 'left',
+ padding: [0, 0, 0, 0],
+ textStyle: {
+ color: '#fff',
+ fontSize: '20'
+ },
+ formatter: function(value) {
+ return '{x| ' + value + '} {y|' + '%}'
+ },
+ rich: {
+ y: {
+ color: '#3dffef',
+ fontFamily: 'Orbitron',
+ fontSize: 16
+ },
+ x: {
+ color: '#3dffef',
+ fontFamily: 'Orbitron',
+ fontSize: 16
+ }
+ }
+ }
+ }
+ ],
+ series: [
+ {
+ name: '鍊�',
+ type: 'bar',
+ barGap: '-130%',
+ // zlevel: 1,
+ xAxisIndex: 0,
+ label: {
+ show: false,
+ position: 'right',
+ textStyle: {
+ color: '#fff',
+ fontSize: 20
+ }
+ },
+ itemStyle: {
+ normal: {
+ barBorderRadius: 4,
+ color: {
+ colorStops: [
+ {
+ offset: 0,
+ color: '#46B7ED' // 0% 澶勭殑棰滆壊
+ },
+ {
+ offset: 1,
+ color: '#48EDD3' // 100% 澶勭殑棰滆壊
+ }
+ ]
+ }
+ }
+ },
+ barWidth: 12,
+ data: zhkb01Value,
+ z: 0
+ },
+ {
+ // 鍒嗛殧
+ type: 'pictorialBar',
+ symbolRotate: '-20',
+ itemStyle: {
+ normal: {
+ color: 'rgba(1, 12, 38, 0.4)'
+ }
+ },
+ symbolRepeat: 'fixed',
+ symbolMargin: 10,
+ symbol: 'rect',
+ symbolClip: true,
+ symbolSize: [5, 28],
+ symbolPosition: 'start',
+ symbolOffset: [0, -1],
+ data: zhkb01Value,
+ z: 66,
+ animationEasing: 'elasticOut'
+ },
+ {
+ name: '鑳屾櫙',
+ type: 'bar',
+ barWidth: 14,
+ barGap: '-110%',
+ data: zhkb01Max,
+ itemStyle: {
+ normal: {
+ color: 'rgba(5,59,113,.7)',
+ barBorderRadius: 6,
+ borderColor: 'rgba(0, 255, 236, 1)'
+ }
+ },
+ z: -1
+ }
+ ]
+ }
+ return option
+}
+
+export function zhkb02() {
+
+}
+
+export function zhkb03(title) {
+ const labelData = []
+ const labelData1 = []
+ for (let i = 0; i < 80; ++i) {
+ labelData.push({
+ value: 1,
+ name: i,
+ itemStyle: {
+ normal: {
+ color: 'rgba(0,209,228,0)'
+ }
+ }
+ })
+ }
+ for (let i = 0; i < labelData.length; ++i) {
+ if (labelData[i].name < 15) {
+ labelData[i].itemStyle = {
+ normal: {
+ color: new echarts.graphic.LinearGradient(
+ 0, 1, 0, 0,
+ [{
+ offset: 0,
+ color: '#6dfbff'
+ },
+ {
+ offset: 1,
+ color: '#02aeff'
+ }
+ ]
+ )
+ }
+
+ }
+ }
+ }
+ for (let i = 0; i < 80; ++i) {
+ labelData1.push({
+ value: 1,
+ name: i,
+ itemStyle: {
+ normal: {
+ color: 'rgba(0,209,228,0)'
+ }
+ }
+ })
+ }
+ for (let i = 0; i < labelData1.length; ++i) {
+ if (labelData1[i].name < 80) {
+ labelData1[i].itemStyle = {
+ normal: {
+ color: '#464451'
+ }
+
+ }
+ }
+ }
+
+ function Pie() {
+ const dataArr = []
+ for (var i = 0; i < 100; i++) {
+ if (i % 10 === 0) {
+ dataArr.push({
+ name: (i + 1).toString(),
+ value: 30,
+ itemStyle: {
+ normal: {
+ color: 'rgba(0,255,255,1)',
+ borderWidth: 0,
+ borderColor: 'rgba(0,0,0,0)'
+ }
+ }
+ })
+ } else {
+ dataArr.push({
+ name: (i + 1).toString(),
+ value: 100,
+ itemStyle: {
+ normal: {
+ color: 'rgba(0,0,0,0)',
+ borderWidth: 0,
+ borderColor: 'rgba(0,0,0,0)'
+ }
+ }
+ })
+ }
+ }
+ return dataArr
+ }
+
+ function Pie1() {
+ const dataArr = []
+ for (var i = 0; i < 100; i++) {
+ if (i % 5 === 0) {
+ dataArr.push({
+ name: (i + 1).toString(),
+ value: 20,
+ itemStyle: {
+ normal: {
+ color: 'rgba(0,255,255,1)',
+ borderWidth: 0,
+ borderColor: 'rgba(0,0,0,0)'
+ }
+ }
+ })
+ } else {
+ dataArr.push({
+ name: (i + 1).toString(),
+ value: 100,
+ itemStyle: {
+ normal: {
+ color: 'rgba(0,0,0,0)',
+ borderWidth: 0,
+ borderColor: 'rgba(0,0,0,0)'
+ }
+ }
+ })
+ }
+ }
+ return dataArr
+ }
+
+ function Pie2() {
+ const dataArr = []
+ for (var i = 0; i < 100; i++) {
+ if (i % 5 === 0) {
+ dataArr.push({
+ name: (i + 1).toString(),
+ value: 20,
+ itemStyle: {
+ normal: {
+ color: 'rgba(0,255,255,.3)',
+ borderWidth: 0,
+ borderColor: 'rgba(0,0,0,0)'
+ }
+ }
+ })
+ } else {
+ dataArr.push({
+ name: (i + 1).toString(),
+ value: 100,
+ itemStyle: {
+ normal: {
+ color: 'rgba(0,0,0,0)',
+ borderWidth: 0,
+ borderColor: 'rgba(0,0,0,0)'
+ }
+ }
+ })
+ }
+ }
+ return dataArr
+ }
+
+ const option = {
+ grid: {
+ left: '0%',
+ right: '0%',
+ bottom: '0%',
+ top: '0%',
+ containLabel: true
+ },
+ backgroundColor: 'transparent',
+ title: [
+ {
+ text: title,
+ x: '46%',
+ y: '38%',
+ textAlign: 'center',
+ textStyle: {
+ fontSize: 12,
+ fontWeight: 'normal',
+ color: '#09d8f2'
+ }
+ },
+ {
+ text: '99%',
+ x: '49%',
+ y: '53%',
+ textAlign: 'center',
+ textStyle: {
+ fontSize: 18,
+ fontWeight: 800,
+ color: '#09d8f2'
+ }
+ }],
+ polar: {
+ radius: ['90%', '85%'],
+ center: ['50%', '50%']
+ },
+ angleAxis: {
+ max: 100,
+ show: false,
+ startAngle: 0
+ },
+ radiusAxis: {
+ type: 'category',
+ show: true,
+ axisLabel: {
+ show: false
+ },
+ axisLine: {
+ show: false
+
+ },
+ axisTick: {
+ show: false
+ }
+ },
+ series: [
+ // 鏈�閲屽湀
+ {
+ type: 'pie',
+ radius: ['91%', '89%'],
+ center: ['50%', '50%'],
+ data: [{
+ hoverOffset: 1,
+ value: 100,
+ name: '',
+ itemStyle: {
+ color: '#2f748b'
+ },
+ label: {
+ show: false
+ },
+ labelLine: {
+ normal: {
+ smooth: true,
+ lineStyle: {
+ width: 0
+ }
+ }
+ },
+ hoverAnimation: false
+ }]
+ },
+ // 閲岀浜屽湀
+ {
+ name: '',
+ type: 'bar',
+ roundCap: true, // 鍦嗚
+ barWidth: 60,
+ showBackground: true,
+ backgroundStyle: {
+ color: '#3d4767'
+ },
+ data: [75],
+ coordinateSystem: 'polar',
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
+ offset: 0,
+ color: '#0ff'
+ }, {
+ offset: 1,
+ color: '#02aeff'
+ }])
+ }
+ }
+ },
+ // 榻胯疆
+ {
+ name: '澶х幆',
+ type: 'gauge',
+ splitNumber: 100,
+ radius: '124%',
+ center: ['50%', '50%'],
+ startAngle: 90,
+ endAngle: -269.9999,
+ axisLine: {
+ show: false,
+ lineStyle: {
+ color: [[0.3, '#26a7d4'], [1, '#23395a']]
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ splitLine: {
+ show: true,
+ length: 8,
+ lineStyle: {
+ color: 'auto',
+ width: 2.5
+ }
+ },
+ axisLabel: {
+ show: false
+ },
+ detail: {
+ show: false
+ }
+ },
+ // 澶栧湀瑁呴グ
+ {
+ type: 'pie',
+ zlevel: 0,
+ silent: true,
+ radius: ['110%', '108.5%'],
+ center: ['50%', '50%'],
+ z: 1,
+ label: {
+ normal: {
+ show: false
+ }
+ },
+ labelLine: {
+ normal: {
+ show: false
+ }
+ },
+ data: Pie()
+ },
+ // {
+ // type: 'pie',
+ // zlevel: 0,
+ // silent: true,
+ // startAngle: -150,
+ // radius: ['58.5%', '57%'],
+ // center: ['50%', '50%'],
+ // z: 1,
+ // label: {
+ // normal: {
+ // show: false
+ // }
+ // },
+ // labelLine: {
+ // normal: {
+ // show: false
+ // }
+ // },
+ // data: Pie3()
+ // },
+ {
+ type: 'pie',
+ zlevel: 0,
+ silent: true,
+ startAngle: -140,
+ radius: ['100%', '98.5%'],
+ center: ['50%', '50%'],
+ z: 1,
+ label: {
+ normal: {
+ show: false
+ }
+ },
+ labelLine: {
+ normal: {
+ show: false
+ }
+ },
+ data: Pie()
+ },
+ {
+ type: 'pie',
+ zlevel: 0,
+ silent: true,
+ radius: ['98%', '96.5%'],
+ center: ['50%', '50%'],
+ z: 1,
+ label: {
+ normal: {
+ show: false
+ }
+ },
+ labelLine: {
+ normal: {
+ show: false
+ }
+ },
+ data: Pie1()
+ },
+ {
+ type: 'pie',
+ zlevel: 0,
+ silent: true,
+ startAngle: -140,
+ radius: ['98%', '96.5%'],
+ center: ['50%', '50%'],
+ z: 1,
+ label: {
+ normal: {
+ show: false
+ }
+ },
+ labelLine: {
+ normal: {
+ show: false
+ }
+ },
+ data: Pie2()
+ },
+ {
+ type: 'pie',
+ zlevel: 0,
+ silent: true,
+ startAngle: -147.5,
+ radius: ['98%', '96.5%'],
+ center: ['50%', '50%'],
+ z: 1,
+ label: {
+ normal: {
+ show: false
+ }
+ },
+ labelLine: {
+ normal: {
+ show: false
+ }
+ },
+ data: Pie2()
+ }
+ ]
+ }
+
+ return option
+}
+
+export function zhkb04() {
+ const myColor = ['#d0a00e', '#34da62', '#00e9db', '#00c0e9', '#0096f3']
+ // const data = [330, 404, 780, 509, 150]
+ const data = [Math.ceil(Math.random() * 100 + 500), Math.ceil(Math.random() * 100 + 600), Math.ceil(Math.random() * 100 + 700), Math.ceil(Math.random() * 400 + 500), Math.ceil(Math.random() * 100 + 200)]
+ const option = {
+ backgroundColor: 'transparent',
+ grid: {
+ left: '10%',
+ right: '4%',
+ bottom: '0%',
+ top: '5%',
+ containLabel: true
+ },
+ xAxis: [{
+ show: false
+ }],
+ yAxis: [
+ {
+ axisTick: 'none',
+ axisLine: 'none',
+ offset: '27',
+ axisLabel: {
+ textStyle: {
+ color: function(value, index) {
+ let temp = ''
+ myColor.forEach((it, ind) => {
+ if (index === ind) {
+ temp = it
+ }
+ })
+ return temp
+ },
+ fontSize: 16
+ }
+ },
+ data: ['绗洓瀛ｅ害璁㈠崟鏁�', '绗笁瀛ｅ害璁㈠崟鏁�', '绗簩瀛ｅ害璁㈠崟鏁�', '绗竴瀛ｅ害璁㈠崟鏁�', '鍦ㄥ埗璁㈠崟鏁伴噺']
+ },
+ {
+ axisTick: 'none',
+ axisLine: 'none',
+ axisLabel: {
+ textStyle: {
+ color: function(value, index) {
+ let temp = ''
+ myColor.forEach((it, ind) => {
+ if (index === ind) {
+ temp = it
+ }
+ })
+ return temp
+ },
+ fontSize: 16
+ }
+ },
+
+ data: data
+ },
+ {
+ show: false,
+ name: '鍗曚綅锛氫欢',
+ nameGap: '50',
+ nameTextStyle: {
+ color: '#ffffff',
+ fontSize: '16'
+ },
+ axisLine: {
+ lineStyle: {
+ color: 'rgba(0,0,0,0)'
+ }
+ },
+ data: []
+ }
+ ],
+ series: [
+ {
+ name: '鏉�',
+ type: 'bar',
+ yAxisIndex: 0,
+ data: data.map(r => r / 10),
+ label: {
+ normal: {
+ show: false,
+ position: 'right',
+ formatter: function(param) {
+ return param.value + '%'
+ },
+ textStyle: {
+ color: '#ffffff',
+ fontSize: '16'
+ }
+ }
+ },
+ barWidth: 12,
+ itemStyle: {
+ normal: {
+ color: function(params) {
+ var num = myColor.length
+ return myColor[params.dataIndex % num]
+ }
+ }
+ },
+ z: 2
+ },
+ {
+ name: '鐧芥',
+ type: 'bar',
+ yAxisIndex: 1,
+ barGap: '-100%',
+ data: [99.5, 99.5, 99.5, 99.5, 99.5],
+ barWidth: 20,
+ itemStyle: {
+ normal: {
+ color: '#0e2147',
+ barBorderRadius: 5
+ }
+ },
+ z: 1
+ },
+ {
+ name: '澶栨',
+ type: 'bar',
+ yAxisIndex: 2,
+ barGap: '-100%',
+ data: [100, 100, 100, 100, 100],
+ barWidth: 24,
+ itemStyle: {
+ normal: {
+ color: function(params) {
+ var num = myColor.length
+ return myColor[params.dataIndex % num]
+ },
+ barBorderRadius: 5
+ }
+ },
+ z: 0
+ },
+ {
+ name: '澶栧渾',
+ type: 'scatter',
+ hoverAnimation: false,
+ data: [0, 0, 0, 0, 0],
+ yAxisIndex: 2,
+ symbolSize: 30,
+ itemStyle: {
+ normal: {
+ color: function(params) {
+ var num = myColor.length
+ return myColor[params.dataIndex % num]
+ },
+ opacity: 1
+ }
+ },
+ z: 2
+ }
+ ]
+ }
+
+ return option
+}
+
+export function zhkb05() {
+// 鏁版嵁
+// var XName = ['鍛ㄤ竴', '鍛ㄤ簩', '鍛ㄤ笁', '鍛ㄥ洓', '鍛ㄤ簲', '鍛ㄥ叚', '鍛ㄦ棩']
+ var XName = ['01鏈�', '02鏈�', '03鏈�', '04鏈�', '05鏈�', '06鏈�', '07鏈�', '08鏈�', '09鏈�', '10鏈�', '11鏈�']
+ var data1 = [
+ // [123, 121, 123, 321, 222, 111, 234, 121, 123, 321, 222, 321]
+ [Math.ceil(Math.random() * 100 + 100), Math.ceil(Math.random() * 100 + 200), Math.ceil(Math.random() * 100 + 200), Math.ceil(Math.random() * 100 + 300), Math.ceil(Math.random() * 100 + 100), Math.ceil(Math.random() * 100 + 200), Math.ceil(Math.random() * 100 + 200), Math.ceil(Math.random() * 100 + 300), Math.ceil(Math.random() * 100 + 100), Math.ceil(Math.random() * 100 + 200), Math.ceil(Math.random() * 100 + 300)]
+ // [123, 154, 234, 321, 120, 390, 634],
+ // [63, 194, 234, 321, 278, 110, 534],
+ // [53, 254, 234, 321, 118, 240, 434],
+ // [23, 354, 334, 221, 178, 190, 234]
+ ]
+ var Line = ['浜戠瘑灞辨按璺嚎', '鏄曞崥鏈楀鏍¤矾绾�', '鏂板崕灏忓璺嚎', '浜戦敠浜旇矾璺嚎']
+ var img = [
+ 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABRCAYAAABFTSEIAAAACXBIWXMAAAsSAAALEgHS3X78AAAEp0lEQVR42u3cz4sjRRTA8W9Vd3Vn8mMmjj9WQWSRZQ+CsH+B7MnDIgiCd0E8CYJ/gOAIelo8ehUP/gF6WLw5/gMueFP2sIcF0dHd2Z1kknR11fOQZJJJMtlZd03H7HtQpNOTnpn+8Lrm1etmjIig8e/DKoECKqACKqCGAiqgAiqghgIqoAIqoIYCKqACKqCGAiqgAiqghgIqoAJudKTr+osZMNPvBUQBHwHsPF9fB9R0DeHMOQ6T6WOrhEzXBM4swDOL0M6CrArRVoq3t2dGUIb9fTvatg8ZZup1PDBgzPmy98mey6qfzjLz2WaWjEUZKEvGyi9nWyneMOvGIyFQo2Sbg4MUSChpU9IeTTUpJdsEajPZOJeJG5uBZj7rLLduWS5dGm6XNLEELOFUFj54ACJCaychkpDSASK3bwsXL0YgVpWJKwM0iy9Zy8HdGru7jvt3Pbu7w0wES7drTwAbjTHMGCsQcIAnYTC1/wRx0wEnl27JNgZI8HQ6Kc1mQq83RNzaMjPzXqDbjTQaJRFLxIyyMSxAXEkWrhrQzAAmo5HOjCQf7jflILxOkohL+aUPgV4vEGNJo+E5PAy02+UIMEwBxo0CPDP7Dg5SnEtpt1PA0e87XO25FOoh8IYIH2Y5b45RzGAQBiIltZoHxqMcjbksXAVgdc2EQMYzzzdotyeZWKuleULXJtwT4SODfC2QCWR+IF9KnjuX1Xbo99Op7LVE8iXlz0YBTk5SyLEEjo5OLuccEoFUvHfO+reuUPx4zftXAIcx1hdcF+/TvFab4A0Bs0VwqyhpVnkJT89/Q4DDQ0e77YCMwIUsFMeFZD856699URRvX4nxE4A/jbnxXp7v4Zw3ReGNSDHI8wFQjIafuoyn58L/fB6sth/Ybg9fez2TRC6QZcZYvgHsazF+MP7YCyLXcM7gvSXLDGBqYDg+NhwdmSpPoTrAkub0W+f4FSB1fDucIunMHSLpO8WAH0rSy8u+19MBCHB4OHzd2pI+CEUhpigEiN+l6WcdY252jLn5s7Wf472ImPcN8pUl/tEHoV4XWq1Ke4KrLmPsTA3oODpytFoOyJKSyzHyMSIxteWngMW5cSEdDJQUhTdZVgxOz3/+jFJm4+bA2e5JpNU6WZ4Fw99JwnWMKccwpeddP+B7GZTNUPKqybJy0O+Hs1YfMz9swwvpB8fbGDG0GuGkkK7V0hxSmZQpABI8l2z0v3sJf50qpAMJCd2qCulql3LD1lRGQjm7lEsDz0rkxTQOfiPPxUBcuJTbbhss/Y1eyi3NwsmKInmkZsKk5gtPUzNhvp11507CSy/X6XYStpvFudpZw1ZWIOF4Cq6SdtbKbioJyAhRTu3u9yMJXerN+ugvaQQsjcZ8Q3VnZwxlSDhe1lB9GjrSw5b+1avT8+Jw+979nNaOI6U3KpTrWAosxVQmygK4ld8X0ZtK/7eViExD7O1NQPb3T7fsl4/4sBpwYzPwjFbTo95Yl9l9Vd1YN1X/147HebSjary1AHyc5qc+XLQEQx9ve8Kg6xr6hKoCKqACKqCGAiqgAiqghgIqoAIqoIYCKqACKqCGAiqgAiqghgIq4JrHP8fEWV8FMTmOAAAAAElFTkSuQmCC',
+ 'image://data:image/png;base64,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',
+ 'image://data:image/png;base64,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',
+ 'image://data:image/png;base64,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'
+ ]
+ // var color = ['#00f8ff', '#00f15a', '#0696f9', '#dcf776']
+ var color = ['#00f8ff']
+
+ // 鏁版嵁澶勭悊
+ var datas = []
+ Line.map((item, index) => {
+ datas.push(
+ {
+ symbolSize: 150,
+ symbol: img[index],
+ name: item,
+ type: 'line',
+ yAxisIndex: 1,
+ data: data1[index],
+ itemStyle: {
+ normal: {
+ borderWidth: 5,
+ color: color[index]
+ }
+ }
+ }
+ )
+ })
+
+ const option = {
+ backgroundColor: 'transparent',
+ grid: {
+ left: '5%',
+ top: '20%',
+ bottom: '0%',
+ right: '5%',
+ containLabel: true
+ },
+ title: {
+ text: '浠婂勾姣忔湀璁㈠崟鏁伴噺',
+ x: '50%',
+ y: '0%',
+ textAlign: 'center',
+ textStyle: {
+ fontSize: 16,
+ fontWeight: 'normal',
+ color: '#00FFFF'
+ }
+ },
+ legend: {
+ show: false,
+ type: 'scroll',
+ data: Line,
+ itemWidth: 18,
+ itemHeight: 12,
+ textStyle: {
+ color: '#00ffff',
+ fontSize: 14
+ }
+ },
+ yAxis: [
+ {
+ type: 'value',
+ position: 'right',
+ splitLine: {
+ show: false
+ },
+ axisLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ show: false
+ }
+ },
+ {
+ // show: false,
+ type: 'value',
+ position: 'left',
+ // name: '浠婂勾姣忔湀璁㈠崟鏁伴噺',
+ nameTextStyle: {
+ color: '#00FFFF',
+ fontSize: 16
+ },
+ splitNumber: 3,
+ // nameLocation: 'center',
+ splitLine: {
+ lineStyle: {
+ type: 'dashed',
+ color: 'rgba(135,140,147,0.8)'
+ }
+ },
+ axisLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ formatter: '{value}',
+ color: '#00FFFF',
+ fontSize: 14
+ }
+ }
+ ],
+ xAxis: [
+ {
+ type: 'category',
+ axisTick: {
+ show: false
+ },
+ axisLine: {
+ show: false,
+ lineStyle: {
+ color: '#6A989E'
+ }
+ },
+ axisLabel: {
+ inside: false,
+ textStyle: {
+ color: colorX, // x杞撮鑹�
+ fontWeight: 'normal',
+ fontSize: 16,
+ lineHeight: 22
+ }
+
+ },
+ data: XName
+ },
+ {
+ type: 'category',
+ axisLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ show: false
+ },
+ splitArea: {
+ show: false
+ },
+ splitLine: {
+ show: false
+ },
+ // -----
+ data: ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '5鏈�', '6鏈�']
+ }
+ ],
+ series: datas
+ }
+ // 褰撶偣鍑籰egend閫夐」鏃舵姌绾夸笂鐨勫皬鍥剧墖浼氭秷澶憋紝涓洪伩鍏嶈繖绉嶆儏鍐碉紝鍙互閲囧彇浠ヤ笅鍒濆鍖栨柟娉� 浣跨敤svg
+ // var myCharts = echarts.init(document.getElementById('AnalysisChartLine'), null, {renderer: 'svg'});
+ // myCharts.clear();
+ // myCharts.setOption(option)
+
+ return option
+}
+
+export function zhkb06(title) {
+ const option = {
+ backgroundColor: 'transparent',
+ title: [
+ {
+ text: title,
+ x: 'center',
+ top: '55%',
+ textStyle: {
+ color: '#FFFFFF',
+ fontSize: 14,
+ fontWeight: 100
+ }
+ },
+ {
+ text: '95%',
+ x: 'center',
+ top: '38%',
+ textStyle: {
+ fontSize: 14,
+ color: '#FFFFFF',
+ fontFamily: 'DINAlternate-Bold, DINAlternate',
+ foontWeight: 100
+ }
+ }
+ ],
+ grid: {
+ left: '0%',
+ top: '0%',
+ bottom: '0%',
+ right: '0%',
+ containLabel: true
+ },
+ angleAxis: {
+ max: 100,
+ clockwise: false, // 閫嗘椂閽�
+ // 闅愯棌鍒诲害绾�
+ show: false,
+ boundaryGap: ['40%', '40%'],
+ startAngle: 90
+ },
+ radiusAxis: {
+ type: 'category',
+ show: true,
+ axisLabel: {
+ show: false
+ },
+ axisLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ }
+ },
+ polar: [
+ {
+ center: ['50%', '50%'], // 涓績鐐逛綅缃�
+ radius: '165%' // 鍥惧舰澶у皬
+ }
+ ],
+ series: [
+ {
+ name: '榻胯疆',
+ type: 'gauge',
+ splitNumber: 60,
+ radius: '132%',
+ center: ['50%', '50%'],
+ startAngle: 90,
+ endAngle: -269.9999,
+ axisLine: {
+ show: false,
+ lineStyle: {
+ color: [[0.3, '#26a7d4'], [1, '#23395a']]
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ splitLine: {
+ show: true,
+ length: 8,
+ lineStyle: {
+ color: 'auto',
+ width: 2.5
+ }
+ },
+ axisLabel: {
+ show: false
+ },
+ detail: {
+ show: false
+ }
+ },
+ {
+ type: 'bar',
+ z: 10,
+ data: [75],
+ showBackground: false,
+ backgroundStyle: {
+ color: 'blue',
+ borderWidth: 4,
+ width: 4
+ },
+ coordinateSystem: 'polar',
+ roundCap: true,
+ barWidth: 6, // 澶х殑鍗犳瘮鐜�
+ itemStyle: {
+ normal: {
+ opacity: 1,
+ color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
+ {
+ offset: 0,
+ color: '#00FFFF'
+ },
+ {
+ offset: 1,
+ color: '#09d8f2'
+ }
+ ])
+ }
+ }
+ },
+ {
+ type: 'pie',
+ name: '鍐呭眰缁嗗渾鐜�',
+ radius: ['82%', '83%'],
+ startAngle: 110,
+ hoverAnimation: false,
+ clockWise: true,
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
+ {
+ offset: 0,
+ color: 'rgba(151,179,166,0.74)'
+ },
+ {
+ offset: 1,
+ color: 'rgba(151,179,166,0.74)'
+ }
+ ]),
+ shadowBlur: 20,
+ shadowColor: '#66666a'
+ }
+ },
+ tooltip: {
+ show: false
+ },
+ label: {
+ show: false
+ },
+ data: [100]
+ }
+ ]
+ }
+ return option
+}
+
+export function zhkb07(title, value) {
+ const dataArr = [
+ {
+ value: value,
+ name: title
+ }
+ ]
+ const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+ {
+ offset: 0,
+ color: '#1f79b6' // 0% 澶勭殑棰滆壊
+ },
+ {
+ offset: 1,
+ color: '#0dd2db' // 100% 澶勭殑棰滆壊
+ }
+ ])
+ const colorSet = [
+ [value / 100, color],
+ [1, '#15337C']
+ ]
+ const rich = {
+ white: {
+ fontSize: 14,
+ color: '#fff',
+ fontWeight: '500'
+ },
+ bule: {
+ fontSize: 14,
+ fontFamily: 'DINBold',
+ color: '#fff',
+ fontWeight: 100
+ },
+ radius: {
+ width: 350,
+ height: 80,
+ // lineHeight:80,
+ borderWidth: 1,
+ borderColor: '#0092F2',
+ fontSize: 14,
+ color: '#fff',
+ backgroundColor: '#1B215B',
+ borderRadius: 20,
+ textAlign: 'center'
+ },
+ size: {
+ height: 400,
+ padding: [100, 0, 0, 0]
+ }
+ }
+ const option = {
+ backgroundColor: 'transparent',
+ tooltip: {
+ formatter: '{a} <br/>{b} : {c}%'
+ },
+ series: [
+ {
+ type: 'gauge',
+ radius: '90%',
+ startAngle: '225',
+ endAngle: '-45',
+ pointer: {
+ show: false
+ },
+ detail: {
+ formatter: function(value) {
+ var num = Math.round(value)
+ return '{bule|' + num + '}{white|%}'
+ },
+ rich: rich,
+ offsetCenter: ['0%', '0%']
+ },
+ data: dataArr,
+ title: {
+ show: true,
+ color: '#fff',
+ offsetCenter: ['0', '75%'],
+ fontSize: 14
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: colorSet,
+ width: 12,
+ shadowOffsetX: 0,
+ shadowOffsetY: 0,
+ opacity: 1
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ splitLine: {
+ show: false,
+ length: 10,
+ lineStyle: {
+ color: '#00377a',
+ width: 2,
+ type: 'solid'
+ }
+ },
+ axisLabel: {
+ show: false
+ }
+ }
+ ]
+ }
+
+ return option
+}
+
+export function zhkb08() {
+ const data = [
+ {
+ name: '閽㈡潗鏀瑰埗杞﹂棿',
+ value: Math.floor(Math.random() * 10 + 90)
+ },
+ {
+ name: '鍐峰ⅸ杞﹂棿',
+ value: Math.floor(Math.random() * 10 + 90)
+ },
+ {
+ name: '鐑ⅸ杞﹂棿',
+ value: Math.floor(Math.random() * 10 + 90)
+ },
+ {
+ name: '鐑鐞嗚溅闂�',
+ value: Math.floor(Math.random() * 10 + 90)
+ },
+ {
+ name: '杈惧厠缃楄溅闂�',
+ value: Math.floor(Math.random() * 10 + 90)
+ },
+ {
+ name: '闀�閿岃溅闂�',
+ value: Math.floor(Math.random() * 10 + 90)
+ }
+ ]
+
+ const myColor = ['#d0a00e', '#34da62', '#00e9db', '#00c0e9', '#0096f3', '#ff00ff']
+
+ const getArrByKey = (data, k) => {
+ const key = k || 'value'
+ const res = []
+ if (data) {
+ data.forEach(function(t) {
+ res.push(t[key])
+ })
+ }
+ return res
+ }
+ const getSymbolData = (data) => {
+ const arr = []
+ for (var i = 0; i < data.length; i++) {
+ arr.push({
+ value: data[i].value,
+ symbolPosition: 'end'
+ })
+ }
+ return arr
+ }
+ // console.log(getSymbolData(data));
+ const option = {
+ backgroundColor: 'transparent',
+ grid: {
+ left: '0%',
+ right: '0%',
+ bottom: '0%',
+ top: '15%',
+ containLabel: true
+ },
+ title: {
+ text: '涔濇湀鑳借�楃敤閲�',
+ x: '44%',
+ y: '0%',
+ textStyle: {
+ color: '#09d8f2',
+ fontSize: 16
+ }
+ // subtextStyle: {
+ // color: '#90979c',
+ // fontSize: '16'
+ // }
+ },
+ xAxis: {
+ show: false
+ },
+ yAxis: [
+ {
+ triggerEvent: true,
+ show: true,
+ inverse: true,
+ data: getArrByKey(data, 'name'),
+ axisLine: {
+ show: false
+ },
+ splitLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ show: true,
+ interval: 0,
+ // color: colorY,
+ align: 'left',
+ margin: 30,
+ textStyle: {
+ color: function(value, index) {
+ let temp = ''
+ myColor.forEach((it, ind) => {
+ if (index === ind) {
+ temp = it
+ }
+ })
+ return temp
+ },
+ fontSize: 16,
+ align: 'right'
+ // width: 36
+ }
+ // formatter: function(value, index) {
+ // return '{title|' + value + '}'
+ // },
+ // rich: {
+ // title: {
+ // width: 36,
+ // align: 'right',
+ // fontSize: 16
+ // }
+ // }
+ }
+ },
+ {
+ triggerEvent: true,
+ show: true,
+ inverse: true,
+ data: getArrByKey(data, 'name'),
+ axisLine: {
+ show: false
+ },
+ splitLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ interval: 0,
+ shadowOffsetX: '-20px',
+ // color: colorX,
+ color: function(value, index) {
+ let temp = ''
+ myColor.forEach((it, ind) => {
+ if (index === ind) {
+ temp = it
+ }
+ })
+ return temp
+ },
+ align: 'left',
+ verticalAlign: 'center',
+ lineHeight: 40,
+ fontSize: 16,
+ margin: 20,
+ formatter: function(value, index) {
+ // return data[index].value + '%'
+ 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,
+ yAxisIndex: 0,
+ data: data,
+ barWidth: 10,
+ // align: left,
+ itemStyle: {
+ normal: {
+ color: function(params) {
+ return myColor[params.dataIndex]
+ },
+ barBorderRadius: 10
+ }
+ }
+ // label: {
+ // normal: {
+ // color: '#fff',
+ // show: true,
+ // position: ["-80px", 0],
+ // textStyle: {
+ // fontSize: 16
+ // },
+ // formatter: function(a, b) {
+ // return a.name
+ // }
+ // }
+ // }
+ }]
+ }
+
+ return option
+}
+
+// 鏆傛椂寮冪敤
+export function zhkb092222() {
+ const data = [220, 182, 191, 234, 290, 330, 310, 182, 191, 234, 290, 330]
+ const sideData = data.map(item => item + 4.5)
+
+ const option = {
+
+ backgroundColor: 'transparent',
+ // tooltip: {
+ // trigger: 'axis',
+ // formatter: '{b} : {c}',
+ // axisPointer: { // 鍧愭爣杞存寚绀哄櫒锛屽潗鏍囪酱瑙﹀彂鏈夋晥
+ // type: 'shadow' // 榛樿涓虹洿绾匡紝鍙�変负锛�'line' | 'shadow'
+ // }
+ // },
+ grid: {
+ left: '2%',
+ right: '2%',
+ bottom: '2%',
+ top: '15%',
+ containLabel: true
+ },
+ title: {
+ text: '杩戜竴骞存瘡鏈堣兘鑰椾娇鐢�',
+ x: '40%',
+ y: '0%',
+ textStyle: {
+ color: '#09d8f2',
+ fontSize: 16
+ }
+ // subtextStyle: {
+ // color: '#90979c',
+ // fontSize: '16'
+ // }
+ },
+ xAxis: {
+ data: ['01鏈�', '02鏈�', '03鏈�', '04鏈�', '05鏈�', '06鏈�', '07鏈�', '08鏈�', '09鏈�', '10鏈�', '11鏈�', '12鏈�'],
+ // 鍧愭爣杞�
+ axisLine: {
+ lineStyle: {
+ color: '#3eb2e8'
+ }
+ },
+ // 鍧愭爣鍊兼爣娉�
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: colorX,
+ fontSize: 14
+ }
+ }
+ },
+ yAxis: {
+ // 鍧愭爣杞�
+ axisLine: {
+ show: false
+ },
+ // 鍧愭爣鍊兼爣娉�
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: '#09d8f2',
+ fontSize: 14
+ }
+ },
+ // 鍒嗘牸绾�
+ splitLine: {
+ lineStyle: {
+ type: 'dashed',
+ color: 'rgba(135,140,147,0.8)'
+ }
+ },
+ splitNumber: 3
+ },
+ series: [
+ {
+ name: 'a',
+ tooltip: {
+ show: false
+ },
+ type: 'bar',
+ barWidth: 18,
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+ offset: 0,
+ color: '#0B4EC3' // 0% 澶勭殑棰滆壊
+ }, {
+ offset: 0.6,
+ color: '#138CEB' // 60% 澶勭殑棰滆壊
+ }, {
+ offset: 1,
+ color: '#17AAFE' // 100% 澶勭殑棰滆壊
+ }], false)
+ }
+ },
+ data: data,
+ barGap: 0
+ },
+ {
+ type: 'bar',
+ barWidth: 8,
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+ offset: 0,
+ color: '#09337C' // 0% 澶勭殑棰滆壊
+ }, {
+ offset: 0.6,
+ color: '#0761C0' // 60% 澶勭殑棰滆壊
+ }, {
+ offset: 1,
+ color: '#0575DE' // 100% 澶勭殑棰滆壊
+ }], false)
+ }
+ },
+ barGap: 0,
+ data: sideData
+ },
+ {
+ name: 'b',
+ tooltip: {
+ show: false
+ },
+ type: 'pictorialBar',
+ itemStyle: {
+ borderWidth: 1,
+ borderColor: '#0571D5',
+ color: '#1779E0'
+ },
+ symbol: 'path://M 0,0 l 120,0 l -30,60 l -120,0 z',
+ symbolSize: ['30', '6'],
+ symbolOffset: ['0', '-4'],
+ // symbolRotate: -5,
+ symbolPosition: 'end',
+ data: data,
+ z: 3
+ }
+ ]
+ }
+ return option
+}
+
+export function zhkb09() {
+ // const dataY = [60, 70, 80, 90, 60, 70, 80, 90, 80, 90, 60, 70, 80, 90]
+ const dataY = [(80 + Math.random() * 10), (90 - Math.random() * 30), (60 + Math.random() * 30), (70 + Math.random() * 20), (80 + Math.random() * 10), (90 - Math.random() * 30), (80 - Math.random() * 30), (90 - Math.random() * 30), (60 + Math.random() * 30), (70 + Math.random() * 20), (80 - Math.random() * 10), (90 - Math.random() * 30)]
+
+ const option = {
+ backgroundColor: 'transparent',
+ grid: {
+ left: '2%',
+ right: '2%',
+ bottom: '2%',
+ top: '15%',
+ containLabel: true
+ },
+ title: {
+ text: '杩戜竴骞存瘡鏈堣兘鑰椾娇鐢�',
+ x: '40%',
+ y: '0%',
+ textStyle: {
+ color: '#09d8f2',
+ fontSize: 16
+ }
+ },
+ color: ['#3cefff'],
+ tooltip: {},
+ xAxis: [
+ {
+ type: 'category',
+ data: ['01鏈�', '02鏈�', '03鏈�', '04鏈�', '05鏈�', '06鏈�', '07鏈�', '08鏈�', '09鏈�', '10鏈�', '11鏈�'],
+ axisTick: {
+ alignWithLabel: true
+ },
+ nameTextStyle: {
+ color: '#82b0ec'
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#82b0ec'
+ }
+ },
+ axisLabel: {
+ margin: 20,
+ textStyle: {
+ // color: '#82b0ec'
+ color: colorX,
+ fontSize: 14
+ }
+ }
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ axisLabel: {
+ textStyle: {
+ color: '#09d8f2',
+ fontSize: 14
+ }
+ // formatter: '{value}%'
+ },
+ splitLine: {
+ lineStyle: {
+ type: 'dashed',
+ color: 'rgba(135,140,147,0.8)'
+ }
+ },
+ axisLine: {
+ show: false
+ }
+ }
+ ],
+ series: [
+ {
+ name: '',
+ type: 'pictorialBar',
+ symbolSize: [20, 10],
+ symbolOffset: [0, -5],
+ symbolPosition: 'end',
+ z: 12,
+ label: {
+ normal: {
+ show: false,
+ position: 'top',
+ formatter: '{c}%'
+ }
+ },
+ data: dataY
+ },
+ {
+ name: '',
+ type: 'pictorialBar',
+ symbolSize: [20, 10],
+ symbolOffset: [0, 5],
+ z: 12,
+ data: dataY
+ },
+ {
+ type: 'bar',
+ itemStyle: {
+ normal: {
+ opacity: 0.7
+ }
+ },
+ barWidth: '20',
+ data: dataY
+ // markLine: {
+ // silent: true,
+ // label: {
+ // position: 'middle',
+ // formatter: '{b}',
+ // color: 'red'
+ // },
+ // data: [
+ // {
+ // name: '鐩爣鍊�',
+ // yAxis: 80,
+ // lineStyle: {
+ // color: 'red'
+ // },
+ // itemStyle: {
+ // color: 'red'
+ // },
+ // label: {
+ // position: 'end',
+ // formatter: '{b}\n {c}%'
+ // }
+ // }
+ // ]
+ // }
+ },
+ {
+ type: 'effectScatter',
+ silent: true,
+ tooltip: {
+ show: false
+ },
+ zlevel: 3,
+ symbolSize: 10,
+ showEffectOn: 'render',
+ rippleEffect: {
+ brushType: 'stroke',
+ color: '#3cefff',
+ scale: 5
+ },
+ itemStyle: {
+ color: '#3cefff'
+ },
+ hoverAnimation: true,
+ data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+ }
+ ]
+ }
+
+ return option
+}
+
+export function zhkb10() {
+ const _legendColor = '#8FD8FF'
+ const _fontSize = 16
+ const _fontColor = '#8FD8FF'
+ // const data1 = [70, 90, 100, 70, 90, 100]
+ // const data2 = [80, 60, 80, 50, 90, 60]
+ const data1 = [70 + Math.random() * 20, 90 - Math.random() * 20, 100 - Math.random() * 20, 70 + Math.random() * 20, 90 - Math.random() * 20, 80 - Math.random() * 20]
+ const data2 = [80 + Math.random() * 20, 60 + Math.random() * 20, 80 - Math.random() * 20, 50 + Math.random() * 20, 90 - Math.random() * 20, 60 + Math.random() * 20]
+ const option = {
+ backgroundColor: 'transparent',
+ legend: {
+ x: 'right',
+ y: '2%',
+ itemWidth: 10,
+ itemHeight: 10,
+ textStyle: {
+ fontSize: 16,
+ color: 'rgba(255,255,255,.7)'
+ }
+ },
+ grid: {
+ left: '2%',
+ top: '7%',
+ right: '2%',
+ bottom: '0%',
+ containLabel: true
+ },
+ yAxis: {
+ // max: Math.ceil(Math.max(...data1) * 1.2),
+ max: 100,
+ type: 'value',
+ position: 'left',
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#4E84AC'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ formatter: '{value}',
+ color: '#00FFFF',
+ fontSize: 14
+ },
+ splitLine: {
+ show: false
+ }
+ },
+ xAxis: {
+ type: 'category',
+ nameTextStyle: {
+ fontSize: 16,
+ color: '#7dd6ea'
+ },
+ axisLabel: {
+ show: true,
+ interval: 0,
+ // margin: 20,
+ textStyle: {
+ color: colorX,
+ fontSize: 16
+ }
+ },
+ splitLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#4E84AC'
+ // width: 3
+ }
+ },
+ data: ['閽㈡潗鏀瑰埗', '鍐峰ⅸ', '鐑ⅸ', '鐑鐞�', '杈惧厠缃�', '闀�閿�']
+ },
+ series: [
+ {
+ name: '浜哄憳鍒嗘瀽1',
+ type: 'bar',
+ barWidth: 15,
+ barGap: '30%',
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: 'rgba(0,234,255, 1)'
+ },
+ {
+ offset: 1,
+ color: 'rgba(0,234,255, .1)'
+ }
+ ])
+ }
+ },
+ // label: {
+ // show: true,
+ // position: 'top',
+ // textStyle: {
+ // fontSize: 36,
+ // color: '#00EAFF'
+ // },
+ // formatter: function(params) {
+ // return params.value + '%'
+ // }
+ // },
+ data: data1,
+ z: 10,
+ zlevel: 0
+ },
+ {
+ // 鍒嗛殧
+ type: 'pictorialBar',
+ itemStyle: {
+ normal: {
+ color: '#0F375F'
+ }
+ },
+ symbolRepeat: 'fixed',
+ symbolMargin: 15,
+ symbol: 'rect',
+ symbolClip: true,
+ symbolSize: [15, 2],
+ symbolPosition: 'start',
+ symbolOffset: [-10, 0],
+ data: data1,
+ width: 2,
+ z: 0,
+ zlevel: 1
+ },
+ {
+ name: '浜哄憳鍒嗘瀽2',
+ type: 'bar',
+ barWidth: 15,
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: 'rgba(252,160,0, 1)'
+ },
+ {
+ offset: 1,
+ color: 'rgba(252,160,0, .1)'
+ }
+ ])
+ }
+ },
+ // label: {
+ // show: true,
+ // position: 'top',
+ // textStyle: {
+ // fontSize: 16,
+ // color: '#FFA200'
+ // },
+ // formatter: function(params) {
+ // return params.value + '%'
+ // }
+ // },
+ data: data2,
+ z: 10,
+ zlevel: 0
+ },
+ {
+ // 鍒嗛殧
+ type: 'pictorialBar',
+ itemStyle: {
+ normal: {
+ color: '#0F375F'
+ }
+ },
+ symbolRepeat: 'fixed',
+ symbolMargin: 15,
+ symbol: 'rect',
+ symbolClip: true,
+ symbolSize: [15, 2],
+ symbolPosition: 'start',
+ symbolOffset: [10, 0],
+ data: data2,
+ width: 2,
+ z: 0,
+ zlevel: 1
+ }
+ ]
+ }
+ return option
+}
+
+export function zhkb11() {
+ const option = {
+ backgroundColor: 'transparent',
+ // title: {
+ // text: '鏃舵-杩涘嚭娓祦閲�',
+ // left: '5%',
+ // top: '5%',
+ // textStyle: {
+ // color: '#fff',
+ // fontSize: '18px'
+ // }
+ // },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ legend: [
+ {
+ icon: 'react',
+ right: '0%',
+ top: '0%',
+ textStyle: {
+ color: '#fff',
+ fontSize: 14
+ },
+ itemGap: 30,
+ itemWidth: 30,
+ itemHeight: 4,
+ data: ['璁惧鍒╃敤鐜�', '璁惧寮�鏈虹巼']
+ }
+ ],
+ grid: {
+ top: '10%',
+ right: '5%',
+ left: '1%',
+ bottom: '0%',
+ containLabel: true
+ },
+ yAxis: [
+ {
+ type: 'category',
+ data: ['鍐烽暒杞﹂棿', '鐑ⅸ杞﹂棿', '杈惧厠缃楄溅闂�', '纾峰寲杞﹂棿', '娉ㄥ杞﹂棿'],
+ axisLine: {
+ lineStyle: {
+ color: '#4E84AC'
+ // width: 2
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ // margin: 10,
+ color: '#09d8f2',
+ textStyle: {
+ fontSize: 16
+ }
+ }
+ }
+ ],
+ xAxis: [
+ {
+ axisLabel: {
+ formatter: '{value}',
+ color: '#6895CA',
+ textStyle: {
+ fontSize: 16,
+ color: colorX
+ }
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ width: 2,
+ color: '#4E84AC'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ splitLine: {
+ lineStyle: {
+ type: 'dashed',
+ // 浣跨敤娣辨祬鐨勯棿闅旇壊
+ color: '#184D9A'
+ }
+ }
+ }
+ ],
+ series: [
+ {
+ name: '璁惧鍒╃敤鐜�',
+ type: 'bar',
+ barGap: '70%',
+ data: [Math.ceil(30 + Math.random() * 20), Math.ceil(75 - Math.random() * 20), Math.ceil(77 - Math.random() * 20), Math.ceil(39 + Math.random() * 20), Math.ceil(85 - Math.random() * 20)],
+ barWidth: 12,
+ itemStyle: {
+ normal: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 1,
+ y2: 0,
+ colorStops: [
+ {
+ offset: 0,
+ color: '#00FFFF' // 0% 澶勭殑棰滆壊
+ },
+ {
+ offset: 1,
+ color: '#00FF00' // 100% 澶勭殑棰滆壊
+ }
+ ],
+ global: false // 缂虹渷涓� false
+ },
+ barBorderRadius: [30, 30, 30, 30],
+ shadowColor: 'rgba(0,160,221,1)',
+ shadowBlur: 4
+ }
+ },
+ label: {
+ normal: {
+ show: true,
+ // lineHeight: 20,
+ // width: 80,
+ // height: 20,
+ verticalAlign: 'center',
+ borderRadius: 200,
+ position: 'right',
+ color: '#00FF00',
+ fontSize: 16
+ }
+ }
+ },
+ {
+ name: '璁惧寮�鏈虹巼',
+ type: 'bar',
+ data: [Math.ceil(90 - Math.random() * 20), 45 + Math.ceil(Math.random() * 20), Math.ceil(27 + Math.random() * 20), Math.ceil(20 + Math.random() * 60), Math.ceil(85 - Math.random() * 20)],
+ barWidth: 12,
+ itemStyle: {
+ normal: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 1,
+ y2: 0,
+ colorStops: [
+ {
+ offset: 0,
+ color: '#00FFFF' // 0% 澶勭殑棰滆壊
+ },
+ {
+ offset: 1,
+ color: '#FFFF00' // 100% 澶勭殑棰滆壊
+ }
+ ],
+ global: false // 缂虹渷涓� false
+ },
+ barBorderRadius: [30, 30, 30, 30],
+ shadowColor: 'rgba(0,160,221,1)',
+ shadowBlur: 4
+ }
+ },
+ label: {
+ normal: {
+ show: true,
+ // lineHeight: 20,
+ // width: 80,
+ // height: 20,
+ borderRadius: 200,
+ verticalAlign: 'center',
+ // position: ['-0', '-20'],
+ position: 'right',
+ color: '#FFFF00',
+ fontSize: 16
+ }
+ }
+ }
+ ]
+ }
+ return option
+}
+
+export function zhkb12() {
+
+}
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/ckgl.vue b/src/views/kb/ckgl.vue
index 40e9ddd..c96122b 100644
--- a/src/views/kb/ckgl.vue
+++ b/src/views/kb/ckgl.vue
@@ -164,7 +164,7 @@
<el-table-column
prop="voucherdate"
label="鍗曟嵁鏃ユ湡"
- width="130"
+ width="150"
>
<template slot-scope="{row}">
<div v-if="row.voucherdate" class="ellipsis">{{ row.voucherdate.substring(0, 10) }}</div>
@@ -174,7 +174,7 @@
<el-table-column
prop="wo"
label="鍗曟嵁缂栧彿"
- width="195"
+ width="255"
>
<template slot-scope="{row}">
<div class="ellipsis">{{ row.wo }}</div>
@@ -183,7 +183,7 @@
<el-table-column
prop="customename"
label="瀹㈡埛"
- width="125"
+ width="168"
>
<template slot-scope="{row}">
<div v-if="row.customename" class="ellipsis">{{ row.customename }}</div>
@@ -200,16 +200,16 @@
<!-- <div v-else>/</div>-->
<!-- </template>-->
<!-- </el-table-column>-->
- <el-table-column
- prop="SourceVoucherCode"
- label="鏉ユ簮鍗曞彿"
- width="185"
- >
- <template slot-scope="{row}">
- <div v-if="row.SourceVoucherCode" class="ellipsis">{{ row.SourceVoucherCode }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
+ <!-- <el-table-column-->
+ <!-- prop="SourceVoucherCode"-->
+ <!-- label="鏉ユ簮鍗曞彿"-->
+ <!-- width="185"-->
+ <!-- >-->
+ <!-- <template slot-scope="{row}">-->
+ <!-- <div v-if="row.SourceVoucherCode" class="ellipsis">{{ row.SourceVoucherCode }}</div>-->
+ <!-- <div v-else>/</div>-->
+ <!-- </template>-->
+ <!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="materiel_code"-->
<!-- label="浜у搧缂栧彿"-->
@@ -218,7 +218,7 @@
<el-table-column
prop="materiel_name"
label="浜у搧鍚嶇О"
- width="170"
+ width="240"
>
<template slot-scope="{row}">
<div v-if="row.materiel_name" class="ellipsis">{{ row.materiel_name }}</div>
@@ -237,7 +237,7 @@
<el-table-column
prop="quantity"
label="鏁伴噺"
- width="87"
+ width="150"
>
<template slot-scope="{row}">
<div class="ellipsis">{{ row.quantity }}</div>
@@ -246,37 +246,37 @@
<el-table-column
prop="saleOutQuantity"
label="宸插彂璐ф暟閲�"
- width="100"
+ width="150"
>
<template slot-scope="{row}">
<div v-if="row.saleOutQuantity" class="ellipsis">{{ row.saleOutQuantity }}</div>
<div v-else>0</div>
</template>
</el-table-column>
- <el-table-column
- prop="priuserdefnvc1"
- label="妫�楠屾柟寮�"
- width="110"
- >
- <template slot-scope="{row}">
- <div v-if="row.priuserdefnvc1">{{ row.priuserdefnvc1 }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="priuserdefnvc2"
- label="妫�楠屼汉鍛�"
- width="110"
- >
- <template slot-scope="{row}">
- <div v-if="row.priuserdefnvc2">{{ row.priuserdefnvc2 }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
+ <!-- <el-table-column-->
+ <!-- prop="priuserdefnvc1"-->
+ <!-- label="妫�楠屾柟寮�"-->
+ <!-- width="110"-->
+ <!-- >-->
+ <!-- <template slot-scope="{row}">-->
+ <!-- <div v-if="row.priuserdefnvc1">{{ row.priuserdefnvc1 }}</div>-->
+ <!-- <div v-else>/</div>-->
+ <!-- </template>-->
+ <!-- </el-table-column>-->
+ <!-- <el-table-column-->
+ <!-- prop="priuserdefnvc2"-->
+ <!-- label="妫�楠屼汉鍛�"-->
+ <!-- width="110"-->
+ <!-- >-->
+ <!-- <template slot-scope="{row}">-->
+ <!-- <div v-if="row.priuserdefnvc2">{{ row.priuserdefnvc2 }}</div>-->
+ <!-- <div v-else>/</div>-->
+ <!-- </template>-->
+ <!-- </el-table-column>-->
<el-table-column
prop="deliveryDate"
label="棰勮浜よ揣鏃ユ湡"
- width="141"
+ width="240"
>
<template slot-scope="{row}">
<div v-if="row.deliveryDate">{{ row.deliveryDate.substring(0,10) }}</div>
diff --git a/src/views/kb/dccj.vue b/src/views/kb/zhkbc.vue
similarity index 99%
rename from src/views/kb/dccj.vue
rename to src/views/kb/zhkbc.vue
index ae8bbe8..2a19c79 100644
--- a/src/views/kb/dccj.vue
+++ b/src/views/kb/zhkbc.vue
@@ -3,7 +3,7 @@
<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">
@@ -335,7 +335,7 @@
tableDataRank: [],
lineCodeArr: [],
- ShopArr: ['CJ002'], // 杞﹂棿缂栫爜鏁扮粍
+ ShopArr: [window.location.hash.split('?')[1].split('=')[1]], // 鑾峰彇鍦板潃鏍廲ode鍙傛暟
number1: '',
number2: '',
diff --git a/src/views/kb/zngc.vue b/src/views/kb/zngc.vue
new file mode 100644
index 0000000..3f92054
--- /dev/null
+++ b/src/views/kb/zngc.vue
@@ -0,0 +1,1475 @@
+<template>
+ <div>
+
+ <div class="kb_body">
+ <div class="kb_background" />
+ <div class="kb_background2" />
+ <div class="kb_head">鏅鸿兘宸ュ巶缁煎悎绠＄悊</div>
+ <div class="kb_headerPic2 kb_flex_space_between">
+ <div id="zhkbTop01" style="width: 800px;height:36px;" />
+ <div id="zhkbTop02" style="width: 800px;height:36px;transform: rotate(180deg);margin-top: -12px" />
+ </div>
+ <div class="kb_content">
+ <!-- 宸﹁竟-->
+ <div class="kb_content_left kb_flex_column">
+ <div class="kb_content_left_top">
+ <div class="middle_title">
+ <div class="icon">
+ <svg-icon icon-class="scjh02" class="svg_class" />
+ </div>
+ <div class="title">鐢熶骇璁″垝</div>
+ </div>
+ <div class="scjh kb_block horn kb_flex_column">
+ <div class="kb_flex_space_between" style="height: 20px;">
+ <div>鍦ㄥ埗璁″垝鏁伴噺锛堣嚜浜э級 75000鍚�</div>
+ <div>璁″垝瀹屾垚杩涘害锛堝璐級 30000鍚�</div>
+ </div>
+ <div class="kb_flex_space_between" style="padding: 0 15px;height: 20px;">
+ <div :style="{color:colorX}">鐢熶骇绫诲瀷</div>
+ <div :style="{color:colorX}">鐢熶骇鏁伴噺</div>
+ <div :style="{color:colorX}">瀹屾垚杩涘害</div>
+ </div>
+ <div>
+ <div class="kb_flex_space_between">
+ <div style="height: 60px;display: flex;flex-direction: column;justify-content: center">
+ <div style="margin: 5px 0;color: #3dffef">璁″垝瀹屾垚杩涘害(鑷骇)</div>
+ <div style="margin: 5px 0;color: #3dffef">璁″垝瀹屾垚杩涘害(澶栬喘)</div>
+ </div>
+ <div id="zhkb01" style="width:380px;height: 60px;" />
+ </div>
+ </div>
+ <div style="height: 180px;" class="kb_flex_column">
+ <!-- <div class="small_title">-->
+ <!-- <div class="small_bar" />-->
+ <!-- <div class="small_content">棰勬湡璁″垝鍘熷洜鍒嗘瀽</div>-->
+ <!-- </div>-->
+ <div style="height: 180px;" class="kb_flex_space_between">
+ <div id="zhkb02" style="height: 180px;width: 520px;" />
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="kb_content_left_bottom">
+ <div class="middle_title">
+ <div class="icon">
+ <svg-icon icon-class="ckgl02" class="svg_class" />
+ </div>
+ <div class="title">浠撳簱绠＄悊</div>
+ </div>
+ <div class="ckgl kb_block horn kb_flex_column">
+ <div style="height: 60px" class="kb_flex_space_between">
+ <div style="width: 188px">
+ <div class="middle_title">
+ <div class="icon">
+ <svg-icon icon-class="zncc" class="svg_class" />
+ </div>
+ <div style="margin-left: 30px;">
+ <div>8000鍚�</div>
+ <div :style="{color:colorX}">鏄ㄦ棩鍏ュ簱鏁伴噺</div>
+ </div>
+ </div>
+ </div>
+ <div style="width: 324px">
+ <div class="middle_title">
+ <div class="icon">
+ <svg-icon icon-class="zncc" class="svg_class" />
+ </div>
+ <div style="margin-left: 30px;">
+ <div>10000鍚�</div>
+ <div :style="{color:colorX}">鏄ㄦ棩鍑哄簱鏁伴噺</div>
+ </div>
+ </div>
+ </div>
+
+ </div>
+ <div style="height: 190px;position: relative" class="kb_flex_space_between">
+ <div id="zhkb12" style="width: 190px;padding: 0;" class="kb_block" />
+ <div style="position: absolute;bottom: 40px;left: 55px;width: 100px;height: 30px;color: #c7e7ff">鍏ュ簱鍙婃椂鐜�
+ </div>
+
+ <div
+ style="width: 320px;margin-left: 10px;align-items: center;padding: 10px 20px"
+ class="kb_block kb_flex_space_between"
+ >
+ <div class="kb_flex_column" style="position: relative;margin-top: -5px;">
+ <div style="position: absolute;left: 42px;top: 20px">0.01%</div>
+ <div class="box03" />
+ <div style="text-align: center;margin-top: 5px;">閫�璐х巼</div>
+ </div>
+ <div class="kb_flex_column" style="position: relative;margin-top: -5px;">
+ <div style="position: absolute;left: 42px;top: 20px">0.02%</div>
+ <div class="box03" />
+ <div style="text-align: center;margin-top: 5px;">鎹熷潖鐜�</div>
+ </div>
+ </div>
+ </div>
+ <div style="height: 280px;position: relative" class="kb_flex_column">
+ <div style="height: 20px;font-size: 18px;position: absolute;left: 220px;top: 24px">鎴愬搧搴撳瓨缁撴瀯</div>
+ <div id="zhkb13" style="height: 260px;width: 100%;" />
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- 涓棿-->
+ <div class="kb_content_center kb_flex_column">
+ <div class="kb_content_center_top">
+ <div class="middle_title" style="align-items: center">
+ <div class="icon">
+ <svg-icon icon-class="xsdd02" class="svg_class" style="font-size:50px" />
+ </div>
+ <div class="title" style="margin-top:10px">閿�鍞鍗�</div>
+ </div>
+ <div class="xsdd kb_block horn">
+ <div style="" class="kb_flex_space_between">
+ <div class="kb_flex_column">
+ <div id="zhkb03" style="width:120px;height: 120px;" />
+ <div id="zhkb03_2" style="width:120px;height: 120px;" />
+ </div>
+ <div>
+ <div id="zhkb04" style="width: 600px; height: 240px" />
+ </div>
+ </div>
+ <div id="zhkb05" style="height: 170px;" />
+ </div>
+ </div>
+ <div class="kb_content_center_bottom">
+ <div class="middle_title">
+ <div class="icon">
+ <svg-icon icon-class="cjhn02" class="svg_class" />
+ </div>
+ <div class="title">杞﹂棿鑰楄兘</div>
+ </div>
+ <div class="cjhn kb_block horn kb_flex_column">
+ <div id="zhkb08" style="height: 200px;width:100%" />
+ <div id="zhkb09" style="height: 200px;width:100%" />
+ </div>
+ </div>
+ </div>
+ <!-- 鍙宠竟-->
+ <div class="kb_content_right kb_flex_column">
+ <div class="kb_content_right_top">
+ <div class="middle_title">
+ <div class="icon">
+ <svg-icon icon-class="zlfx02" class="svg_class" />
+ </div>
+ <div class="title">璐ㄩ噺鍒嗘瀽</div>
+ </div>
+ <div class="zlfx kb_block horn kb_flex_space_between">
+ <div class="kb_flex_column">
+ <div id="zhkb06" style="height: 50%;width: 140px;" />
+ <div id="zhkb06_2" style="height: 50%;width: 140px;" />
+ </div>
+ <div class="kb_flex_column">
+ <div style="height: 50%;width: 390px;" class="kb_flex_space_between">
+ <div id="zhkb07_1" style="height: 109px; width: 130px;" />
+ <div id="zhkb07_2" style="height: 109px; width: 130px;" />
+ <div id="zhkb07_3" style="height: 109px; width: 130px;" />
+ </div>
+ <div style="height: 50%;width: 390px;" class="kb_flex_space_between">
+ <div id="zhkb07_4" style="height: 109px; width: 130px;" />
+ <div id="zhkb07_5" style="height: 109px; width: 130px;" />
+ <div id="zhkb07_6" style="height: 109px; width: 130px;" />
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="kb_content_right_center">
+ <div class="middle_title">
+ <div class="icon">
+ <svg-icon icon-class="ryfx02" class="svg_class" />
+ </div>
+ <div class="title">浜哄憳鍒嗘瀽</div>
+ </div>
+ <div id="zhkb10" class="ryfx kb_block horn" />
+ </div>
+ <div class="kb_content_right_bottom">
+ <div class="middle_title">
+ <div class="icon">
+ <svg-icon icon-class="sbfx02" class="svg_class" />
+ </div>
+ <div class="title">璁惧鍒嗘瀽</div>
+ </div>
+ <div id="zhkb11" class="sbfx kb_block horn" />
+ </div>
+ </div>
+ </div>
+ </div>
+
+ </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import {
+ loadEcharts,
+ zhkb01,
+ zhkb03,
+ zhkb04,
+ zhkb05,
+ zhkb06,
+ zhkb07,
+ zhkb08,
+ zhkb09,
+ zhkb10, zhkb11
+} from '@/utils/myEcharts_zngc'
+
+import '@/utils/echarts-liquidfill.min.js'
+
+export default {
+ name: 'Index',
+ data() {
+ return {
+ colorX: '#c7e7ff',
+ colorY: '#7696c5'
+ }
+ },
+ mounted() {
+ this.getEchartsHead('zhkbTop01')
+ this.getEchartsHead('zhkbTop02')
+ // setInterval(() => {
+ // this.getEchartsHead('zhkbTop01')
+ // this.getEchartsHead('zhkbTop02')
+ // }, 1000 * 20)
+
+ this.getAllEcharts()
+
+ this.getzhkb02()
+ setInterval(() => {
+ this.getzhkb02()
+ }, 1000 * 16)
+
+ this.getzhkb12()
+ setInterval(() => {
+ this.getzhkb12()
+ }, 1000 * 11)
+
+ this.getzhkb13()
+ setInterval(() => {
+ this.getzhkb13()
+ }, 1000 * 19)
+
+ // this.getzhkb11()
+ },
+ methods: {
+ // 娴嬭瘯鑷姩鎾斁tooltip
+ getzhkb11() {
+ const option = {
+ backgroundColor: 'transparent',
+ // title: {
+ // text: '鏃舵-杩涘嚭娓祦閲�',
+ // left: '5%',
+ // top: '5%',
+ // textStyle: {
+ // color: '#fff',
+ // fontSize: '18px'
+ // }
+ // },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ legend: [
+ {
+ icon: 'react',
+ right: '0%',
+ top: '0%',
+ textStyle: {
+ color: '#fff',
+ fontSize: 14
+ },
+ itemGap: 30,
+ itemWidth: 30,
+ itemHeight: 4,
+ data: ['璁惧鍒╃敤鐜�', '璁惧寮�鏈虹巼']
+ }
+ ],
+ grid: {
+ top: '10%',
+ right: '5%',
+ left: '1%',
+ bottom: '0%',
+ containLabel: true
+ },
+ yAxis: [
+ {
+ type: 'category',
+ data: ['鍐烽暒杞﹂棿', '鐑ⅸ杞﹂棿', '杈惧厠缃楄溅闂�', '纾峰寲杞﹂棿', '娉ㄥ杞﹂棿'],
+ axisLine: {
+ lineStyle: {
+ color: '#4E84AC'
+ // width: 2
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ // margin: 10,
+ color: '#09d8f2',
+ textStyle: {
+ fontSize: 16
+ }
+ }
+ }
+ ],
+ xAxis: [
+ {
+ axisLabel: {
+ formatter: '{value}',
+ color: '#6895CA',
+ textStyle: {
+ fontSize: 16,
+ color: this.colorX
+ }
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ width: 2,
+ color: '#4E84AC'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ splitLine: {
+ lineStyle: {
+ type: 'dashed',
+ // 浣跨敤娣辨祬鐨勯棿闅旇壊
+ color: '#184D9A'
+ }
+ }
+ }
+ ],
+ series: [
+ {
+ name: '璁惧鍒╃敤鐜�',
+ type: 'bar',
+ barGap: '70%',
+ data: [Math.ceil(30 + Math.random() * 20), Math.ceil(75 - Math.random() * 20), Math.ceil(77 - Math.random() * 20), Math.ceil(39 + Math.random() * 20), Math.ceil(85 - Math.random() * 20)],
+ barWidth: 12,
+ itemStyle: {
+ normal: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 1,
+ y2: 0,
+ colorStops: [
+ {
+ offset: 0,
+ color: '#00FFFF' // 0% 澶勭殑棰滆壊
+ },
+ {
+ offset: 1,
+ color: '#00FF00' // 100% 澶勭殑棰滆壊
+ }
+ ],
+ global: false // 缂虹渷涓� false
+ },
+ barBorderRadius: [30, 30, 30, 30],
+ shadowColor: 'rgba(0,160,221,1)',
+ shadowBlur: 4
+ }
+ },
+ label: {
+ normal: {
+ show: true,
+ // lineHeight: 20,
+ // width: 80,
+ // height: 20,
+ verticalAlign: 'center',
+ borderRadius: 200,
+ position: 'right',
+ color: '#00FF00',
+ fontSize: 16
+ }
+ }
+ },
+ {
+ name: '璁惧寮�鏈虹巼',
+ type: 'bar',
+ data: [Math.ceil(90 - Math.random() * 20), 45 + Math.ceil(Math.random() * 20), Math.ceil(27 + Math.random() * 20), Math.ceil(20 + Math.random() * 60), Math.ceil(85 - Math.random() * 20)],
+ barWidth: 12,
+ itemStyle: {
+ normal: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 1,
+ y2: 0,
+ colorStops: [
+ {
+ offset: 0,
+ color: '#00FFFF' // 0% 澶勭殑棰滆壊
+ },
+ {
+ offset: 1,
+ color: '#FFFF00' // 100% 澶勭殑棰滆壊
+ }
+ ],
+ global: false // 缂虹渷涓� false
+ },
+ barBorderRadius: [30, 30, 30, 30],
+ shadowColor: 'rgba(0,160,221,1)',
+ shadowBlur: 4
+ }
+ },
+ label: {
+ normal: {
+ show: true,
+ // lineHeight: 20,
+ // width: 80,
+ // height: 20,
+ borderRadius: 200,
+ verticalAlign: 'center',
+ // position: ['-0', '-20'],
+ position: 'right',
+ color: '#FFFF00',
+ fontSize: 16
+ }
+ }
+ }
+ ]
+ }
+
+ const myChart = echarts.init(document.getElementById('zhkb11'))
+
+ if (option.textStyle == null) {
+ option.textStyle = {
+ fontFamily: 'Microsoft YaHei',
+ color: '#ffffff'
+ }
+ }
+
+ // 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃銆�
+ myChart.clear()
+ myChart.setOption(option, true)
+
+ window.addEventListener('resize', function() {
+ myChart.resize()
+ })
+
+ let index = 0
+ setInterval(function() {
+ myChart.dispatchAction({
+ type: 'showTip',
+ seriesIndex: 0,
+ dataIndex: index
+ })
+ index++
+ if (index > 4) {
+ index = 0
+ }
+ }, 2000)
+ },
+ getAllEcharts() {
+ loadEcharts('zhkb01', zhkb01())
+ loadEcharts('zhkb03', zhkb03('铻烘瘝鎶曞叆浜у嚭鐜�'))
+ loadEcharts('zhkb03_2', zhkb03('铻烘潌鎶曞叆浜у嚭鐜�'))
+ loadEcharts('zhkb04', zhkb04())
+ loadEcharts('zhkb05', zhkb05())
+ loadEcharts('zhkb06', zhkb06('妫�楠屽強鏃剁巼'))
+ loadEcharts('zhkb06_2', zhkb06('鎴愬搧鍚堟牸鐜�'))
+ loadEcharts('zhkb07_1', zhkb07('閽㈡潗鏁呴殰', 96))
+ loadEcharts('zhkb07_2', zhkb07('鍐烽暒', 96))
+ loadEcharts('zhkb07_3', zhkb07('鐑ⅸ', 96))
+ loadEcharts('zhkb07_4', zhkb07('鐑鐞�', 95))
+ loadEcharts('zhkb07_5', zhkb07('杈惧厠缃�', 95))
+ loadEcharts('zhkb07_6', zhkb07('闀�閿�', 95))
+ loadEcharts('zhkb08', zhkb08())
+ loadEcharts('zhkb09', zhkb09())
+ loadEcharts('zhkb10', zhkb10())
+ loadEcharts('zhkb11', zhkb11())
+
+ setInterval(() => {
+ loadEcharts('zhkb01', zhkb01())
+ }, 1000 * 10)
+ setInterval(() => {
+ loadEcharts('zhkb03', zhkb03('铻烘瘝鎶曞叆浜у嚭鐜�'))
+ loadEcharts('zhkb03_2', zhkb03('铻烘潌鎶曞叆浜у嚭鐜�'))
+ }, 1000 * 12)
+ setInterval(() => {
+ loadEcharts('zhkb04', zhkb04())
+ }, 1000 * 14)
+ setInterval(() => {
+ loadEcharts('zhkb05', zhkb05())
+ }, 1000 * 16)
+ setInterval(() => {
+ loadEcharts('zhkb06', zhkb06('妫�楠屽強鏃剁巼'))
+ loadEcharts('zhkb06_2', zhkb06('鎴愬搧鍚堟牸鐜�'))
+ }, 1000 * 18)
+ // setInterval(() => {
+ // loadEcharts('zhkb07_1', zhkb07())
+ // loadEcharts('zhkb07_2', zhkb07())
+ // loadEcharts('zhkb07_3', zhkb07())
+ // loadEcharts('zhkb07_4', zhkb07())
+ // loadEcharts('zhkb07_5', zhkb07())
+ // loadEcharts('zhkb07_6', zhkb07())
+ // }, 1000 * 5)
+ setInterval(() => {
+ loadEcharts('zhkb08', zhkb08())
+ }, 1000 * 20)
+ setInterval(() => {
+ loadEcharts('zhkb09', zhkb09())
+ }, 1000 * 22)
+ setInterval(() => {
+ loadEcharts('zhkb10', zhkb10())
+ }, 1000 * 24)
+ setInterval(() => {
+ loadEcharts('zhkb11', zhkb11())
+ }, 1000 * 26)
+ },
+ getzhkb13() {
+ const colorList = ['#47A2FF ', '#53C8D1', '#59CB74', '#FBD444', '#7F6AAD', '#585247', '#00FFFF', '#ff00ff', '#00ff00', '#ffff00', '#ff0000', '#0000ff']
+ const data = [
+ { name: 'LB01 100', value: 100 },
+ { name: 'LB02 200', value: 200 },
+ { name: 'LB03 300', value: 300 },
+ { name: 'LB04 400', value: 400 },
+ { name: 'LB05 500', value: 500 },
+ { name: 'LB06 550', value: 550 },
+ { name: 'LB07 570', value: 570 },
+ { name: 'LB08 570', value: 570 },
+ { name: 'LB09 570', value: 570 },
+ { name: 'LB10 570', value: 570 },
+ { name: 'LB11 570', value: 570 },
+ { name: 'LB12 570', value: 570 }
+ ]
+ const option = {
+ backgroundColor: 'transparent',
+ grid: {
+ left: '0%',
+ right: '0%',
+ bottom: '0%',
+ top: '20%',
+ containLabel: true
+ },
+ title: {
+ text: 80 + Math.ceil(Math.random() * 10) + '%',
+ // subtext: '3',
+ textStyle: {
+ fontSize: 26,
+ color: '#09d8f2',
+ lineHeight: 20
+ },
+ // subtextStyle: {
+ // fontSize: 28,
+ // color: '#333'
+ // },
+ textAlign: 'center',
+ left: '74%',
+ top: '55%'
+ },
+ tooltip: {
+ trigger: 'item'
+ },
+ legend: {
+ // type: 'scroll',
+ orient: 'vertical',
+ left: '4%',
+ top: '20%',
+ itemGap: 20,
+ selectedMode: false,
+ // icon: 'pin',
+ icon: 'roundRect',
+ data: data.map(r => r.name),
+ textStyle: {
+ color: colorList.map(r => r),
+ fontSize: 16,
+ rich: {
+ uname: {
+ width: 100
+ },
+ unum: {
+ // color: '#4ed139',
+ color: function(value, index) {
+ console.log(value, index)
+ },
+ width: 20,
+ align: 'right'
+ }
+ }
+ }
+ // formatter(name) {
+ // return `{uname|${name}}{unum|5000鍚▆`
+ // }
+ },
+ color: colorList,
+ series: [
+ {
+ // name: 'title',
+ type: 'pie',
+ silent: true,
+ radius: [60, 90],
+ center: ['75%', '60%'],
+ label: {
+ show: false
+ },
+ labelLine: {
+ show: false
+ },
+ // itemStyle: {
+ // borderWidth: 3,
+ // borderColor: '#fff'
+ // },
+ data: data
+ }
+ ]
+ }
+ const myChart = echarts.init(document.getElementById('zhkb13'))
+
+ if (option.textStyle == null) {
+ option.textStyle = {
+ fontFamily: 'Microsoft YaHei',
+ color: '#ffffff'
+ }
+ }
+
+ // 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃銆�
+ myChart.clear()
+ myChart.setOption(option, true)
+
+ window.addEventListener('resize', function() {
+ myChart.resize()
+ })
+
+ // var index = 0 // 鎾斁鎵�鍦ㄤ笅鏍�
+ // var mTime = setInterval(function() {
+ // myChart.dispatchAction({
+ // type: 'showTip',
+ // seriesIndex: 0,
+ // dataIndex: index
+ // })
+ // index++
+ // if (index > data.length - 1) {
+ // index = 0
+ // }
+ // }, 2000)
+
+ // var currentIndex = -1 // 褰撳墠楂樹寒鍥惧舰鍦ㄩゼ鍥炬暟鎹腑鐨勪笅鏍�
+ // var changePieInterval = setInterval(selectPie, 2000) // 璁剧疆鑷姩鍒囨崲楂樹寒鍥惧舰鐨勫畾鏃跺櫒
+ //
+ // function highlightPie() { // 鍙栨秷鎵�鏈夐珮浜苟楂樹寒褰撳墠鍥惧舰
+ // // 閬嶅巻楗煎浘鏁版嵁锛屽彇娑堟墍鏈夊浘褰㈢殑楂樹寒鏁堟灉
+ // option.series[0].data.forEach((item, index) => {
+ // myChart.dispatchAction({
+ // type: 'downplay',
+ // // type: 'showTip',
+ // seriesIndex: 0,
+ // dataIndex: index
+ // })
+ // })
+ //
+ // // // 楂樹寒褰撳墠鍥惧舰
+ // myChart.dispatchAction({
+ // type: 'highlight',
+ // seriesIndex: 0,
+ // dataIndex: currentIndex
+ // })
+ // }
+ //
+ // myChart.on('mouseover', (params) => { // 鐢ㄦ埛榧犳爣鎮诞鍒版煇涓�鍥惧舰鏃讹紝鍋滄鑷姩鍒囨崲骞堕珮浜紶鏍囨偓娴殑鍥惧舰
+ // clearInterval(changePieInterval)
+ // currentIndex = params.dataIndex
+ // highlightPie()
+ // })
+ //
+ // myChart.on('mouseout', (params) => { // 鐢ㄦ埛榧犳爣绉诲嚭鏃讹紝閲嶆柊寮�濮嬭嚜鍔ㄥ垏鎹�
+ // if (changePieInterval) {
+ // clearInterval(changePieInterval)
+ // }
+ // changePieInterval = setInterval(selectPie, 1000)
+ // })
+ //
+ // function selectPie() { // 楂樹寒鏁堟灉鍒囨崲鍒颁笅涓�涓浘褰�
+ // var dataLen = option.series[0].data.length
+ // currentIndex = (currentIndex + 1) % dataLen
+ // highlightPie()
+ // }
+ },
+ getzhkb12() {
+ const value1 = Math.ceil(Math.random() * 10 + 60)
+ const option = {
+ backgroundColor: 'transparent',
+ grid: {
+ left: '0%',
+ right: '0%',
+ bottom: '0%',
+ top: '0%',
+ containLabel: true
+ },
+ title: {
+ text: value1 + '%',
+ x: '36%',
+ y: '40%',
+ textStyle: {
+ color: this.colorX,
+ fontSize: 26
+ }
+ },
+ series: [
+ {
+ type: 'liquidFill',
+ radius: '80%',
+ // data: [0.6],
+ data: [value1 / 100, 0.4, 0.2],
+ backgroundStyle: {
+ color: {
+ type: 'radial',
+ x: 0.5,
+ y: 0.5,
+ r: 0.5,
+ colorStops: [
+ {
+ offset: 0,
+ color: 'rgba(0,24,55, 0)'
+ },
+ {
+ offset: 0.75,
+ color: 'rgba(0,24,55, 0)'
+ },
+ {
+ offset: 1,
+ color: 'rgba(37,237,259, 1)'
+ }],
+ globalCoord: false
+ }
+ },
+ outline: {
+ borderDistance: 0,
+ itemStyle: {
+ borderWidth: 0,
+ borderColor: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [{
+ offset: 0,
+ color: 'rgba(50,115,256, 1)'
+ }, {
+ offset: 0.5,
+ color: 'rgba(50,115,233, .75)'
+ }, {
+ offset: 1,
+ color: 'rgba(50,115,233, 1)'
+ }],
+ globalCoord: false
+ }
+ }
+ },
+ color: ['rgba(9,216,242, .8)', 'rgba(9,216,242, 0.6)', 'rgba(9,216,242, 0.4)'],
+ // color: {
+ // type: 'linear',
+ // x: 0,
+ // y: 0,
+ // x2: 0,
+ // y2: 1
+ // colorStops: [{
+ // offset: 0,
+ // color: 'rgba(37,237,259, 1)'
+ // }, {
+ // offset: 0.5,
+ // color: 'rgba(0,100,259, 0.5)'
+ // }, {
+ // offset: 1,
+ // color: 'darkblue'
+ // }
+ // ]
+ // globalCoord: false
+ // },
+ label: {
+ normal: {
+ formatter: ''
+ }
+ }
+ }
+ ]
+ }
+ const myChart = echarts.init(document.getElementById('zhkb12'))
+
+ if (option.textStyle == null) {
+ option.textStyle = {
+ fontFamily: 'Microsoft YaHei',
+ color: '#ffffff'
+ }
+ }
+
+ // 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃銆�
+ myChart.clear()
+ myChart.setOption(option, true)
+
+ window.addEventListener('resize', function() {
+ myChart.resize()
+ })
+ },
+ getEchartsHead(id) {
+ const barWidth = 12
+ var data1 = [100]
+ const titlename = ['鏃堕棿']
+ const valdata = [100]
+ const option = {
+ backgroundColor: 'transparent',
+ // animationDuration: 0,
+ // animationDurationUpdate: 1000 * 30,
+ // animationEasing: 'linear',
+ // animationEasingUpdate: 'linear',
+ grid: {
+ left: '%',
+ top: '20%',
+ bottom: '0%',
+ right: '5%',
+ containLabel: true
+ },
+ xAxis: {
+ show: false,
+ inverse: true
+ },
+ yAxis: [
+ {
+ show: false,
+ data: titlename,
+ inverse: true,
+ axisLine: {
+ show: false
+ },
+ splitLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ }
+ },
+ {
+ show: false,
+ inverse: true,
+ data: titlename,
+ axisLabel: {
+ textStyle: {
+ fontSize: 12,
+ color: '#fff'
+ }
+ },
+ axisLine: {
+ show: false
+ },
+ splitLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ }
+ }
+ ],
+ series: [
+ // 鍐�
+ {
+ type: 'bar',
+ barWidth: barWidth,
+ legendHoverLink: false,
+ symbolRepeat: true,
+ silent: true,
+ itemStyle: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 1,
+ y2: 0,
+ colorStops: [
+ {
+ offset: 0,
+ color: '#74ddff' // 0% 澶勭殑棰滆壊
+ },
+ {
+ offset: 1,
+ color: '#ffc975' // 100% 澶勭殑棰滆壊
+ }
+ ]
+ },
+ shadowBlur: 6,
+ shadowColor: '#74ddff'
+ },
+ data: data1,
+ z: 1,
+ animationEasing: 'elasticOut'
+ },
+ // 鑳屾櫙
+ {
+ type: 'pictorialBar',
+ animationDuration: 0,
+ symbolRepeat: 'fixed',
+ symbolMargin: '20%',
+ symbol: 'roundRect',
+ symbolSize: [6, barWidth],
+ itemStyle: {
+ normal: {
+ color: '#12272A'
+ }
+ },
+ label: {
+ show: false
+ },
+ data: data1,
+ z: 0,
+ animationEasing: 'elasticOut'
+ },
+ // 鍒嗛殧
+ {
+ type: 'pictorialBar',
+ itemStyle: {
+ color: '#000'
+ },
+ symbolRepeat: 'fixed',
+ symbolMargin: 4,
+ symbol: 'roundRect',
+ symbolClip: true,
+ symbolSize: [2, barWidth],
+ symbolPosition: 'start',
+ symbolOffset: [0, 0],
+ data: data1,
+ z: 2,
+ animationEasing: 'elasticOut'
+ },
+ // 鍥炬爣
+ {
+ name: '鍥炬爣',
+ 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: [-25, 0],
+ z: 12,
+ itemStyle: {
+ normal: {
+ color: '#14b1eb'
+ }
+ },
+ symbolPosition: 'end',
+ data: data1
+ }
+ // 澶栨
+ // {
+ // name: '澶栨',
+ // type: 'bar',
+ // barGap: '-100%', // 璁剧疆澶栨绮楃粏
+ // yAxisIndex: 1,
+ // data: [100],
+ // barWidth: 25,
+ // itemStyle: {
+ // normal: {
+ // color: 'none',
+ // borderColor: '#74ddff',
+ // },
+ // },
+ // },
+ ]
+ }
+ const myChart = echarts.init(document.getElementById(id))
+
+ if (option.textStyle == null) {
+ option.textStyle = {
+ fontFamily: 'Microsoft YaHei',
+ color: '#ffffff'
+ }
+ }
+
+ // function run() {
+ // let value = 100
+ // if (value < 120) {
+ // value++
+ // } else {
+ // value = 120
+ // }
+ // data1 = [value]
+ // myChart.setOption({
+ // series: [
+ // {
+ // type: 'bar',
+ // data: data1
+ // }
+ // ]
+ // })
+ // }
+ // setTimeout(function() {
+ // run()
+ // }, 0)
+ // setInterval(function() {
+ // run()
+ // }, 1000 * 30)
+
+ // 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃銆�
+ myChart.clear()
+ myChart.setOption(option, true)
+
+ window.addEventListener('resize', function() {
+ myChart.resize()
+ })
+
+ // return option
+ },
+
+ getzhkb02() {
+ let a, b, c, d
+ a = Math.ceil(Math.random() * 10 + 20)
+ b = Math.ceil(Math.random() * 10 + 20)
+ c = Math.ceil(Math.random() * 10 + 20)
+ d = 100 - a - b - c
+ const data = [
+ {
+ 'name': '鐢熶骇宸叉帓婊�',
+ 'value': a
+ }, {
+ 'name': '鐗╂枡涓嶈冻',
+ 'value': b
+ }, {
+ 'name': '鎻掔彮',
+ 'value': c
+ }, {
+ 'name': '鍏跺畠',
+ 'value': d
+ }]
+
+ const colorArr = ['#00FFFF', '#FFFF00', '#00FF00', '#FF00FF']
+ const option = {
+ color: colorArr,
+ backgroundColor: 'transparent',
+ title: {
+ show: true,
+ text: '棰勬湡璁″垝鍘熷洜鍒嗘瀽',
+ // subtext: 7789,
+ textStyle: {
+ color: '#09d8f2',
+ fontSize: 16
+ // align: 'center'
+ },
+ // subtextStyle: {
+ // fontSize: 30,
+ // color: ['#ff9d19']
+ // },
+ x: 'center',
+ y: '2%'
+ },
+ grid: {
+ left: '0%',
+ right: '4%',
+ bottom: '4%',
+ top: '20%',
+ containLabel: true
+ },
+ legend: {
+ orient: 'vertical',
+ top: '30%',
+ left: '5%',
+ selectedMode: false,
+ textStyle: {
+ color: colorArr.map(r => r),
+ fontSize: 16
+ },
+ icon: 'roundRect',
+ data: data
+ },
+ series: [
+ // 涓昏灞曠ず灞傜殑
+ {
+
+ left: 150,
+ radius: ['40%', '61%'],
+ center: ['50%', '60%'],
+ type: 'pie',
+ silent: true,
+ label: {
+ normal: {
+ show: true,
+ formatter: '{c}%',
+ textStyle: {
+ fontSize: 16,
+ color: function(value, index) { // 姝や唬鐮佹棤鏁�
+ console.log(value, index, 345678)
+ // let temp = ''
+ // colorArr.forEach((it, ind) => {
+ // if (index === ind) {
+ // temp = it
+ // }
+ // })
+ // return temp
+ }
+ },
+ position: 'outside'
+ },
+ emphasis: {
+ show: true
+ }
+ },
+ labelLine: {
+ normal: {
+ show: true,
+ length: 30,
+ length2: 30
+ },
+ emphasis: {
+ show: true
+ }
+ },
+ name: '姘戣璁粌鎬婚噺',
+ data: data
+
+ },
+ // 杈规鐨勮缃�
+ {
+ left: 150,
+ radius: ['30%', '34%'],
+ center: ['50%', '60%'],
+ type: 'pie',
+ silent: true,
+ label: {
+ normal: {
+ show: false
+ },
+ emphasis: {
+ show: false
+ }
+ },
+ labelLine: {
+ normal: {
+ show: false
+ },
+ emphasis: {
+ show: false
+ }
+ },
+ animation: false,
+ tooltip: {
+ show: false
+ },
+ data: [{
+ value: 1,
+ itemStyle: {
+ // color: 'rgba(250,250,250,0.3)'
+ color: '#09d8f2'
+ }
+ }]
+ },
+ {
+ left: 150,
+ name: '澶栬竟妗�',
+ type: 'pie',
+ silent: true,
+ clockWise: false, // 椤烘椂鍔犺浇
+ hoverAnimation: false, // 榧犳爣绉诲叆鍙樺ぇ
+ center: ['50%', '60%'],
+ radius: ['65%', '65%'],
+ label: {
+ normal: {
+ show: false
+ }
+ },
+ data: [{
+ value: 9,
+ name: '',
+ itemStyle: {
+ normal: {
+ borderWidth: 2,
+ // borderColor: '#0b5263'
+ borderColor: '#09d8f2'
+ }
+ }
+ }]
+ }
+ ]
+ }
+ const myChart = echarts.init(document.getElementById('zhkb02'))
+
+ if (option.textStyle == null) {
+ option.textStyle = {
+ fontFamily: 'Microsoft YaHei',
+ color: '#ffffff'
+ }
+ }
+
+ // 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃銆�
+ myChart.clear()
+ myChart.setOption(option, true)
+
+ window.addEventListener('resize', function() {
+ myChart.resize()
+ })
+
+ // let currentIndex = -1 // 褰撳墠楂樹寒鍥惧舰鍦ㄩゼ鍥炬暟鎹腑鐨勪笅鏍�
+ // var changePieInterval = setInterval(selectPie, 2000) // 璁剧疆鑷姩鍒囨崲楂樹寒鍥惧舰鐨勫畾鏃跺櫒
+ //
+ // function highlightPie() { // 鍙栨秷鎵�鏈夐珮浜苟楂樹寒褰撳墠鍥惧舰
+ // // for (var idx in option.series[0].data) {
+ // // // 閬嶅巻楗煎浘鏁版嵁锛屽彇娑堟墍鏈夊浘褰㈢殑楂樹寒鏁堟灉
+ // // myChart.dispatchAction({
+ // // type: 'downplay',
+ // // seriesIndex: 0,
+ // // dataIndex: idx
+ // // })
+ // // }
+ // // 閬嶅巻楗煎浘鏁版嵁锛屽彇娑堟墍鏈夊浘褰㈢殑楂樹寒鏁堟灉
+ // option.series[0].data.forEach((item, index) => {
+ // myChart.dispatchAction({
+ // type: 'downplay',
+ // seriesIndex: 0,
+ // dataIndex: index
+ // })
+ // })
+ //
+ // // 楂樹寒褰撳墠鍥惧舰
+ // myChart.dispatchAction({
+ // type: 'highlight',
+ // seriesIndex: 0,
+ // dataIndex: currentIndex
+ // })
+ // }
+ //
+ // myChart.on('mouseover', (params) => { // 鐢ㄦ埛榧犳爣鎮诞鍒版煇涓�鍥惧舰鏃讹紝鍋滄鑷姩鍒囨崲骞堕珮浜紶鏍囨偓娴殑鍥惧舰
+ // clearInterval(changePieInterval)
+ // currentIndex = params.dataIndex
+ // highlightPie()
+ // })
+ //
+ // myChart.on('mouseout', (params) => { // 鐢ㄦ埛榧犳爣绉诲嚭鏃讹紝閲嶆柊寮�濮嬭嚜鍔ㄥ垏鎹�
+ // if (changePieInterval) {
+ // clearInterval(changePieInterval)
+ // }
+ // changePieInterval = setInterval(selectPie, 1000)
+ // })
+ //
+ // function selectPie() { // 楂樹寒鏁堟灉鍒囨崲鍒颁笅涓�涓浘褰�
+ // var dataLen = option.series[0].data.length
+ // currentIndex = (currentIndex + 1) % dataLen
+ // highlightPie()
+ // }
+
+ // return myChart
+ }
+
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+$kbBorderColor: rgba(9, 216, 242, 0.4);
+$color01: #00FFFF; //杈规鍥涗釜瑙掔殑棰滆壊
+$color02: #09d8f2; //鐪嬫澘鏍囬鍜屽皬鏍囬棰滆壊
+.kb_body {
+ width: 1920px;
+ height: 1080px;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ //color: #09d8f2;
+ color: $color01;
+ //background: repeating-radial-gradient(circle, #000000, #444444 100%, #666666 100%);
+
+}
+
+.kb_background {
+ position: absolute;
+ bottom: 0;
+ width: 1920px;
+ height: 887px;
+ background: url('../../assets/images/kb_body.jpg') no-repeat;
+ //z-index: -1;
+ //opacity: 0.4;
+ filter: brightness(40%);
+}
+
+.kb_background2 {
+ position: absolute;
+ top: -694px;
+ width: 1920px;
+ height: 887px;
+ background: url('../../assets/images/kb_body.jpg') no-repeat;
+ filter: brightness(40%);
+ //z-index: -1;
+ //opacity: 0.4;
+}
+
+.kb_flex {
+ display: flex;
+ justify-content: space-between;
+}
+
+.kb_head {
+ display: flex;
+ justify-content: center;
+ line-height: 90px;
+ font-size: 46px;
+ margin: auto;
+ z-index: 2;
+ color: $color02;
+ letter-spacing: 2px;
+ font-weight: bolder;
+}
+
+.kb_headerPic2 {
+ position: absolute;
+ top: 35px;
+ width: 1920px;
+ //height: 12px;
+ //background: url("../../assets/images/kb_headtitle2.png") no-repeat;
+ //margin-left: 56px;
+ z-index: 2;
+}
+
+.kb_content {
+ height: 990px;
+ display: flex;
+ //padding: 20px;
+ padding: 0 20px 20px 20px;
+ z-index: 2;
+}
+
+.kb_content_left {
+ width: 552px;
+
+ .kb_content_left_top {
+ height: 380px;
+
+ .scjh {
+ height: 340px;
+ }
+ }
+
+ .kb_content_left_bottom {
+ height: 570px;
+
+ .ckgl {
+ height: 530px;
+ }
+ }
+}
+
+.kb_content_center {
+ width: 736px;
+ margin: 0 20px;
+
+ .kb_content_center_top {
+ height: 475px;
+
+ .xsdd {
+ height: 435px
+ }
+ }
+
+ .kb_content_center_bottom {
+ height: 475px;
+
+ .cjhn {
+ height: 435px;
+ }
+ }
+}
+
+.kb_content_right {
+ width: 552px;
+
+ .kb_content_right_top {
+ height: 285px;
+
+ .zlfx {
+ height: 240px;
+ }
+ }
+
+ .kb_content_right_center {
+ height: 285px;
+
+ .ryfx {
+ height: 240px;
+ }
+ }
+
+ .kb_content_right_bottom {
+ height: 380px;
+
+ .sbfx {
+ height: 340px;
+ }
+ }
+}
+
+.kb_flex_column {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+}
+
+.kb_flex_space_between {
+ display: flex;
+ justify-content: space-between;
+}
+
+.kb_block {
+ border: 1px solid $color01;
+ box-shadow: $color02 0 0 10px;
+ border-radius: 10px;
+ padding: 10px;
+ //background-color: rgba(0,255,255,1);
+}
+
+.box03 {
+ width: 124px;
+ height: 139px;
+ background: url("../../assets/images/box03.png");
+}
+
+.middle_title {
+ display: flex;
+ align-items: flex-end;
+ height: 40px;
+ margin-left: 5px;
+ margin-bottom: 10px;
+
+ .svg_class {
+ font-size: 36px;
+ }
+
+ .title {
+ font-size: 26px;
+ margin-left: 5px;
+ }
+
+}
+
+.small_title {
+ height: 16px;
+ display: flex;
+
+ .small_bar {
+ width: 2px;
+ height: 16px;
+ background: $color01;
+ margin-right: 5px;
+ }
+}
+
+//杈规鍥涗釜瑙�
+.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: 3px 20px, 20px 3px;
+}
+
+//鏂囧瓧3D
+//.threeD {
+// text-shadow:$color02 4px 4px 4px
+//}
+</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