From 47b28eb882c08879ccfa708df86068c9d033f04d Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期日, 02 十月 2022 16:48:38 +0800
Subject: [PATCH] 1.综合看板实现部分

---
 src/icons/svg/zlfx02.svg |    1 
 src/permission.js        |    2 
 src/icons/svg/cjhn02.svg |    1 
 src/icons/svg/ryfx02.svg |    1 
 src/icons/svg/xsdd02.svg |    1 
 src/icons/svg/sbfx02.svg |    1 
 src/views/kb/zhkb.vue    |  845 +++++++++++++++++++++++
 src/router/index.js      |    5 
 src/utils/myEcharts.js   | 1281 +++++++++++++++++++++++++++++++++++
 src/icons/svg/ckgl02.svg |    1 
 src/icons/svg/scjh02.svg |    1 
 11 files changed, 2,132 insertions(+), 8 deletions(-)

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/permission.js b/src/permission.js
index 837ce27..3841bfb 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -8,7 +8,7 @@
 
 NProgress.configure({ showSpinner: false }) // NProgress Configuration
 
-const whiteList = ['/login','/kb'] // no redirect whitelist
+const whiteList = ['/login', '/kb', '/zhkb'] // 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 ace34be..766581b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -32,6 +32,11 @@
  */
 export const constantRoutes = [
   {
+    path: '/zhkb',
+    component: () => import('@/views/kb/zhkb'),
+    hidden: true
+  },
+  {
     path: '/kb',
     component: () => import('@/views/kb/index'),
     hidden: true
diff --git a/src/utils/myEcharts.js b/src/utils/myEcharts.js
index c60aa83..b4eb432 100644
--- a/src/utils/myEcharts.js
+++ b/src/utils/myEcharts.js
@@ -536,9 +536,9 @@
         },
         itemStyle: {
           normal: {
-          // color: '#f7b851'
-          //   color: `rgb(73, 226, 196)`
-            color: `rgb(0,215,236)`
+            // color: '#f7b851'
+            //   color: `rgb(73, 226, 196)`
+            color: `rgb(0, 215, 236)`
           }
         },
         lineStyle: {
@@ -569,7 +569,7 @@
         },
         itemStyle: {
           normal: {
-            color: `rgb(60,244,184)`
+            color: `rgb(60, 244, 184)`
           }
         },
         lineStyle: {
@@ -601,7 +601,7 @@
         itemStyle: {
           normal: {
             // color: '#58c8da'
-            color: `rgb(55,183,255)`
+            color: `rgb(55, 183, 255)`
           }
         },
         lineStyle: {
@@ -633,7 +633,7 @@
         itemStyle: {
           normal: {
             // color: '#58c8da'
-            color: `rgb(26,202,200)`
+            color: `rgb(26, 202, 200)`
           }
         },
         lineStyle: {
@@ -665,7 +665,7 @@
         itemStyle: {
           normal: {
             // color: '#58c8da'
-            color: `rgb(243,94,94)`
+            color: `rgb(243, 94, 94)`
           }
         },
         lineStyle: {
@@ -1565,3 +1565,1270 @@
     ]
   }
 }
+
+// 缁煎悎鐪嬫澘
+export function zhkb01() {
+  // const zhkb01name = ['璁″垝瀹屾垚杩涘害(鑷骇)', '璁″垝瀹屾垚杩涘害(澶栬喘)'] // 鍚嶇О
+  const zhkb01name = ['', ''] // 鍚嶇О
+  const zhkb01Value = [88, 95] // 鍊�
+  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() {
+  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: '铻烘瘝鎶曞叆浜у嚭鐜�',
+        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 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: ['绗洓瀛e害璁㈠崟鏁�', '绗笁瀛e害璁㈠崟鏁�', '绗簩瀛e害璁㈠崟鏁�', '绗竴瀛e害璁㈠崟鏁�', '鍦ㄥ埗璁㈠崟鏁伴噺']
+      },
+      {
+        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: ['12566', '12566', '12566', '12566', '12566']
+      },
+      {
+        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: [33, 44, 78, 59, 15],
+        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鏈�', '12鏈�']
+  var data1 = [
+    [123, 121, 123, 321, 222, 111, 234, 121, 123, 321, 222, 321]
+    // [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,iVBORw0KGgoAAAANSUhEUgAAAE8AAABPCAYAAACqNJiGAAAACXBIWXMAAAsSAAALEgHS3X78AAAHaUlEQVR42u3cv29jWRUH8O+5P96zX5x4Mk4yjCW0S5QqZil2aIEUUG5BEQr4B2joKBclrhAF1HR0gNYVK6BapDSIyhSLnAKNxBSrLJOJd+L413vv3nsOhfNjMhmx4sfaSXSP5ESOrt/1++jcn+8qJCKI8d+FigQRL+JFvIgXI+JFvIgX8WJEvIgX8SJexIsR8SJexIt4MSJexIt4ES9GxPvfw9zGL0Ugev1vgtv3gJluw0NvApH8R+VvB+ZC8a6jCdpo096/Kd8GsIc9mfEtHnGBzXYG18b+OVgb2+gRABzgBQE7r5Q9wA7WZfuScB9tAIJ9AYiwIECz2GzbpyuwFm1ilQBgA63X+rwdAEeyCeAAkB30ziH3gXPARWTh3EfbWbaBgH0CerSOFnWxqjYAVUeqnqGpB58M9AquXoNPBvoZmrqOVG0AqotVtY4WAT0C9qkNkNz/Pu9iFN0/v/EWHQIqQZ9UqCeauaLJcWqWilM/WQYANhg9RCaFH6eMRNjYiUdfSjRkG2CgJ0BLZhkIzLMJzxHvzXAZnqn+p4mqVauZ1srQkvWToQqaisumGySVbJm1jJ0p82I09Z4bj0ue4G1eJOBc8drnfdw6WrQBqAxQyrtseuqcXSOVn5XarCilR6QUJTSFoyqssJQSasL+jLmykgR3Ilx9YC0bO5kAfAzwC/TkEC3Zw77MC28uA8bFIDEbVXfRxUeUICXlV7KCnE7XSraoatJsFKrKaa8ZOYEsseQiMJLCBKvHnECRWpuGIkCnHllizsbLKGgHuwIcvlLfFw84lwFDzn920CPgkKpoUgVGjYwt7bB05VCbwdhbu1QznBeJKJeI0kkKvAsy74J4k/MisUs1Mxh7Ww61scPSjYwtKzCqiiYBhzS7vkDuV59Hl6NrF6uqjlRNnqcme1TTFcC4cWmD8lYTrTNQBeSbAH4kKnzHQgsLmKGCFngv7DUbZ5cSlwN+8nwUskeFH6DgJ3jJV33fPcm8q6lui6qHTTJoUOVhsmRwqvJRoQ15ratWS8kjVvISwDcAfCxOJYWjhAW/gPAPAnNLWb1myOt8VGiDUzW7ToOqh006uDE/vON4Nxb524DBgKC9n5yR0kSqJK91EbSqsNYgI+zfh1bvV6W1rRMygHwM4LtKcx8+PC7Ja02kJmekoL03GBC2P39z4Q42W6LzqTEBUE+f9vVgqaHrad94W7MV5S1rlQjkHQJ9PQT+ncVXvpzxO78GqAbwP4fqL99nnLxMrSmdSEkipQpc5myccSM3KBq+Pu6Hra1GAMC4XP9+sTc3t2bb6cyWYdgCmo8BPGxgGQCRJYInQI4F8kMiTRV5+70ZHACoL2Wy/R6RphJMhEAET0SWljG7TvPx7LrX6rlPy7Pd3dZlFpSuXAL6GAKYYHKRn6ei6NvGBgHx8HryhjNtQkosH4nQV3H+uVmhPgIH/aZ67gneVTJsoSGDs0GJz4Daci5VsSIwIoUXC2ER4dz0PhRM/yBwf2WMfztO/vyhCKoE/BLMIjBSFSu15VzwGXDSP8EWGvKm+u70JJku53nAAYANAA8bSTk+sYYHSoL2LCKsErPlmQpA/Vzk5PfDyp9+AhcIVguXgWHtsYL6jVHsnMyQ1SCVwFbW1p0/BHCMq42sV+u9s5n36kx/tpV0JB51ebDG7OvCQYSdlEFAnwLCAD4goq+ReEeE71HgP2ptfkYsmyLhcYAOTsoQRNjXhR+sMXvUZRtHsoOevKneO9/ntc9/d7uAR19yV2YhSFJZtmE1q3rPeEGgfzC5D1JSPybhUin6FZH/lgZ+KmAP4NSx+NWs6ivLNoQgSe7KzKMv3e71eu7ZCmO2o3IAqA1AVYJPEymS3Cy5CgamGGljlNeOEh2I1wzUIw/+ewojUzixooOVMng2Ia0Fn6PuK35sS0rLXJviGOAdgOe5szKXzKNre8I9mXaPZFObAsZPyhfHnKHubc24JNNOc+GY/fOE8besogrNXIJDqblwSaadrRmXoe7LF8cM4yeb2hTT7vUmS/cr827u512scSswSrypWUUhPyt5okjVVyqkUF4aMBIZnOWSsXBlJVFeBNB+msPzzTXt/Pbz5tbn0St9X6cDDNGUAQrOn3p2lOYlTzFxpdcr1k0xclOYV14jp1esm7jSlzyF10uT/OkMboimdDpXfR3dvz7vZvZ1Oj3a3QW6WFVVNClBnwwaRGGYgNN0YMsJAFhPlUysgioK0cvlxRb8FEfyBC+507mYGM9/G37OD4AubmxfDndbArTkCV7yNsADFDxBj9/Sy7mzw7MMhc9QeGvykbPDs7f0cj5BjwcoeBu4bKqHC4JbQOa9noHnWYge7WL2vHbnfJrbxdFlmSdoymySPXt+2wGwe62Pmz/cAvHedMRi/xKrg5uL+xnWZVm5voJZzE0s/KzKTcTZu3a7TdibjTB7e3vy+nBwG86r0G367xafd+DnthzwuZV4dy3i4caIF/EiXsSLEfEiXsSLeDEiXsSLeBEv4sWIeBEv4kW8GBEv4kW8iBcj4v0f4l+bPQ5YnMn04QAAAABJRU5ErkJggg=='
+  ]
+  // 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() {
+  const option = {
+    backgroundColor: 'transparent',
+    title: [
+      {
+        text: '妫�楠屽強鏃剁巼',
+        x: 'center',
+        top: '55%',
+        textStyle: {
+          color: '#FFFFFF',
+          fontSize: 12,
+          fontWeight: 100
+        }
+      },
+      {
+        text: '75%',
+        x: 'center',
+        top: '38%',
+        textStyle: {
+          fontSize: 12,
+          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() {
+  const dataArr = [
+    {
+      value: 61,
+      name: '鎴戞槸鏍囬'
+    }
+  ]
+  const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+    {
+      offset: 0,
+      color: '#1f79b6' // 0% 澶勭殑棰滆壊
+    },
+    {
+      offset: 1,
+      color: '#0dd2db' // 100% 澶勭殑棰滆壊
+    }
+  ])
+  const colorSet = [
+    [0.61, color],
+    [1, '#15337C']
+  ]
+  const rich = {
+    white: {
+      fontSize: 12,
+      color: '#fff',
+      fontWeight: '500'
+    },
+    bule: {
+      fontSize: 12,
+      fontFamily: 'DINBold',
+      color: '#fff',
+      fontWeight: 100
+    },
+    radius: {
+      width: 350,
+      height: 80,
+      // lineHeight:80,
+      borderWidth: 1,
+      borderColor: '#0092F2',
+      fontSize: 12,
+      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: 12
+        },
+        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
+}
diff --git a/src/views/kb/zhkb.vue b/src/views/kb/zhkb.vue
new file mode 100644
index 0000000..2779003
--- /dev/null
+++ b/src/views/kb/zhkb.vue
@@ -0,0 +1,845 @@
+<template>
+  <div>
+
+    <div class="kb_body">
+      <div class="kb_background" />
+      <div class="kb_background2" />
+      <div class="kb_head">鏅鸿兘璁㈠崟鐪嬫澘</div>
+      <!--      <div class="kb_headerPic" />-->
+      <div class="kb_headerPic 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>鐢熶骇绫诲瀷</div>
+                <div>鐢熶骇鏁伴噺</div>
+                <div>瀹屾垚杩涘害</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: 160px;" class="kb_flex_space_between">
+                  <div id="zhkb02" style="height: 160px;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">
+              123
+            </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">123</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 class="ryfx kb_block horn">123</div>
+          </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 class="sbfx kb_block horn">123</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import '@/utils/world'
+import { loadEcharts, zhkb01, zhkb02, zhkb03, zhkb04, zhkb05, zhkb06, zhkb07 } from '@/utils/myEcharts'
+
+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()
+    // }, 10000)
+  },
+  methods: {
+    getAllEcharts() {
+      loadEcharts('zhkb01', zhkb01())
+      // loadEcharts('zhkb02', zhkb02())
+      loadEcharts('zhkb03', zhkb03())
+      loadEcharts('zhkb03_2', zhkb03())
+      loadEcharts('zhkb04', zhkb04())
+      loadEcharts('zhkb05', zhkb05())
+      loadEcharts('zhkb06', zhkb06())
+      loadEcharts('zhkb06_2', zhkb06())
+      loadEcharts('zhkb07_1', zhkb07())
+      loadEcharts('zhkb07_2', zhkb07())
+      loadEcharts('zhkb07_3', zhkb07())
+      loadEcharts('zhkb07_4', zhkb07())
+      loadEcharts('zhkb07_5', zhkb07())
+      loadEcharts('zhkb07_6', zhkb07())
+    },
+    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() {
+      const data = [
+        {
+          'name': '鐢熶骇宸叉帓婊�',
+          'value': 40
+        }, {
+          'name': '鐗╂枡涓嶈冻',
+          'value': 10
+        }, {
+          'name': '鎻掔彮',
+          'value': 20
+        }, {
+          'name': '鍏跺畠',
+          'value': 30
+        }]
+
+      const colorArr = ['#00FFFF', '#FFFF00', '#00FF00', '#FF00FF']
+      const option = {
+        color: colorArr,
+        backgroundColor: 'transparent',
+        title: {
+          show: false,
+          text: '鎬绘暟',
+          subtext: 7789,
+          textStyle: {
+            color: '#f2f2f2',
+            fontSize: 40
+            // align: 'center'
+          },
+          subtextStyle: {
+            fontSize: 30,
+            color: ['#ff9d19']
+          },
+          x: 'center',
+          y: 'center'
+        },
+        grid: {
+          left: '0%',
+          right: '4%',
+          bottom: '4%',
+          top: '15%',
+          containLabel: true
+        },
+        legend: {
+          orient: 'vertical',
+          top: 'middle',
+          left: '5%',
+          textStyle: {
+            color: colorArr.map(r => r),
+            fontSize: 16
+          },
+          icon: 'roundRect',
+          data: data
+        },
+        series: [
+          // 涓昏灞曠ず灞傜殑
+          {
+            left: 150,
+            radius: ['40%', '61%'],
+            center: ['50%', '50%'],
+            type: 'pie',
+            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: 55
+              },
+              emphasis: {
+                show: true
+              }
+            },
+            name: '姘戣璁粌鎬婚噺',
+            data: data
+
+          },
+          // 杈规鐨勮缃�
+          {
+            left: 150,
+            radius: ['30%', '34%'],
+            center: ['50%', '50%'],
+            type: 'pie',
+            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',
+            clockWise: false, // 椤烘椂鍔犺浇
+            hoverAnimation: false, // 榧犳爣绉诲叆鍙樺ぇ
+            center: ['50%', '50%'],
+            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 // 褰撳墠楂樹寒鍥惧舰鍦ㄩゼ鍥炬暟鎹腑鐨勪笅鏍�
+      let 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-color: 'transparent';
+}
+
+.kb_background {
+  position: absolute;
+  bottom: 0;
+  width: 1920px;
+  height: 887px;
+  background: url('../../assets/images/body.jpg') no-repeat;
+  z-index: -1;
+  //opacity: 0.9;
+}
+
+.kb_background2 {
+  position: absolute;
+  top: -694px;
+  width: 1920px;
+  height: 887px;
+  background: url('../../assets/images/body.jpg') no-repeat;
+  z-index: -1;
+  //opacity: 0.9;
+}
+
+.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_headerPic {
+//  position: absolute;
+//  top: 39px;
+//  width: 1808px;
+//  height: 12px;
+//  background: url("../../assets/images/kb_headtitle2.png") no-repeat;
+//  margin-left: 56px;
+//  z-index: 2;
+//}
+.kb_headerPic {
+  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;
+}
+
+.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);
+}
+
+.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>

--
Gitblit v1.9.3